|
|
@use './variable' as *; |
|
|
|
|
|
.container { |
|
|
.luna-console { |
|
|
background: var(--background); |
|
|
} |
|
|
|
|
|
@mixin luna-console-highlight { |
|
|
.luna-console-key { |
|
|
color: var(--var-color); |
|
|
} |
|
|
.luna-console-number { |
|
|
color: var(--number-color); |
|
|
} |
|
|
.luna-console-null { |
|
|
color: var(--operator-color); |
|
|
} |
|
|
.luna-console-string { |
|
|
color: var(--string-color); |
|
|
} |
|
|
.luna-console-boolean { |
|
|
color: var(--keyword-color); |
|
|
} |
|
|
.luna-console-special { |
|
|
color: var(--operator-color); |
|
|
} |
|
|
.luna-console-keyword { |
|
|
color: var(--keyword-color); |
|
|
} |
|
|
.luna-console-operator { |
|
|
color: var(--operator-color); |
|
|
} |
|
|
.luna-console-comment { |
|
|
color: var(--comment-color); |
|
|
} |
|
|
} |
|
|
|
|
|
.luna-console-header { |
|
|
color: var(--link-color); |
|
|
border-bottom-color: var(--border); |
|
|
} |
|
|
|
|
|
.luna-console-nesting-level { |
|
|
border-right-color: var(--border); |
|
|
&::before { |
|
|
border-bottom-color: var(--border); |
|
|
} |
|
|
} |
|
|
|
|
|
.luna-console-log-container { |
|
|
&.luna-console-selected { |
|
|
.luna-console-log-item { |
|
|
background: var(--contrast); |
|
|
&:not(.luna-console-error):not(.luna-console-warn) { |
|
|
border-color: var(--border); |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
.luna-console-log-item { |
|
|
border-bottom-color: var(--border); |
|
|
color: var(--foreground); |
|
|
a { |
|
|
color: var(--link-color) !important; |
|
|
} |
|
|
.luna-console-icon-container { |
|
|
.luna-console-icon { |
|
|
color: var(--foreground); |
|
|
} |
|
|
.luna-console-icon-error { |
|
|
color: #ef3842; |
|
|
} |
|
|
.luna-console-icon-warn { |
|
|
color: #e8a400; |
|
|
} |
|
|
} |
|
|
.luna-console-count { |
|
|
color: var(--select-foreground); |
|
|
background: var(--highlight); |
|
|
} |
|
|
&.luna-console-warn { |
|
|
color: var(--console-warn-foreground); |
|
|
background: var(--console-warn-background); |
|
|
border-color: var(--console-warn-border); |
|
|
} |
|
|
&.luna-console-error { |
|
|
background: var(--console-error-background); |
|
|
color: var(--console-error-foreground); |
|
|
border-color: var(--console-error-border); |
|
|
.luna-console-count { |
|
|
background: var(--console-error-foreground); |
|
|
} |
|
|
} |
|
|
.luna-console-code { |
|
|
@include luna-console-highlight(); |
|
|
} |
|
|
.luna-console-log-content { |
|
|
.luna-console-undefined, |
|
|
.luna-console-null { |
|
|
color: var(--operator-color); |
|
|
} |
|
|
.luna-console-number { |
|
|
color: var(--number-color); |
|
|
} |
|
|
.luna-console-boolean { |
|
|
color: var(--keyword-color); |
|
|
} |
|
|
.luna-console-symbol, |
|
|
.luna-console-regexp { |
|
|
color: var(--var-color); |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
.luna-console-preview { |
|
|
@include luna-console-highlight(); |
|
|
} |
|
|
|
|
|
.luna-object-viewer { |
|
|
color: var(--primary); |
|
|
font-size: 12px !important; |
|
|
} |
|
|
.luna-object-viewer-null { |
|
|
color: var(--operator-color); |
|
|
} |
|
|
.luna-object-viewer-string, |
|
|
.luna-object-viewer-regexp { |
|
|
color: var(--string-color); |
|
|
} |
|
|
.luna-object-viewer-number { |
|
|
color: var(--number-color); |
|
|
} |
|
|
.luna-object-viewer-boolean { |
|
|
color: var(--keyword-color); |
|
|
} |
|
|
.luna-object-viewer-special { |
|
|
color: var(--operator-color); |
|
|
} |
|
|
.luna-object-viewer-key, |
|
|
.luna-object-viewer-key-lighter { |
|
|
color: var(--var-color); |
|
|
} |
|
|
.luna-object-viewer-expanded:before { |
|
|
border-color: transparent; |
|
|
border-top-color: var(--foreground); |
|
|
} |
|
|
.luna-object-viewer-collapsed:before { |
|
|
border-top-color: transparent; |
|
|
border-left-color: var(--foreground); |
|
|
} |
|
|
|
|
|
.luna-notification { |
|
|
pointer-events: none !important; |
|
|
padding: $padding; |
|
|
z-index: 1000; |
|
|
} |
|
|
|
|
|
.luna-notification-item { |
|
|
z-index: 500; |
|
|
color: var(--foreground); |
|
|
background: var(--background); |
|
|
box-shadow: none; |
|
|
padding: 5px 10px; |
|
|
border: 1px solid var(--border); |
|
|
} |
|
|
|
|
|
.luna-notification-upper { |
|
|
margin-bottom: 10px; |
|
|
} |
|
|
|
|
|
.luna-notification-lower { |
|
|
margin-top: 10px; |
|
|
} |
|
|
|
|
|
.luna-data-grid { |
|
|
color: var(--foreground); |
|
|
background: var(--background); |
|
|
border-color: var(--border); |
|
|
th, |
|
|
td { |
|
|
border-color: var(--border); |
|
|
} |
|
|
th { |
|
|
background: var(--darker-background); |
|
|
&.luna-data-grid-sortable { |
|
|
&:hover, |
|
|
&:active { |
|
|
color: var(--select-foreground); |
|
|
background: var(--highlight); |
|
|
} |
|
|
} |
|
|
} |
|
|
.luna-data-grid-data-container { |
|
|
.luna-data-grid-node.luna-data-grid-selected, |
|
|
.luna-data-grid-node.luna-data-grid-selectable:hover { |
|
|
background: var(--highlight); |
|
|
} |
|
|
tr:nth-child(even) { |
|
|
background: var(--contrast); |
|
|
} |
|
|
} |
|
|
&:focus { |
|
|
.luna-data-grid-data-container { |
|
|
.luna-data-grid-node.luna-data-grid-selected { |
|
|
background: var(--accent); |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
.luna-dom-viewer { |
|
|
color: var(--foreground); |
|
|
.luna-dom-viewer-html-tag, |
|
|
.luna-dom-viewer-tag-name { |
|
|
color: var(--tag-name-color); |
|
|
} |
|
|
.luna-dom-viewer-attribute-name { |
|
|
color: var(--attribute-name-color); |
|
|
} |
|
|
.luna-dom-viewer-attribute-value { |
|
|
color: var(--string-color); |
|
|
} |
|
|
.luna-dom-viewer-html-comment { |
|
|
color: var(--comment-color); |
|
|
} |
|
|
.luna-dom-viewer-tree-item { |
|
|
&:hover { |
|
|
.luna-dom-viewer-selection { |
|
|
background: var(--contrast); |
|
|
} |
|
|
} |
|
|
&.luna-dom-viewer-selected { |
|
|
.luna-dom-viewer-selection { |
|
|
background: var(--highlight); |
|
|
} |
|
|
} |
|
|
&.luna-dom-viewer-selected:focus { |
|
|
.luna-dom-viewer-selection { |
|
|
background: var(--accent); |
|
|
opacity: 0.2; |
|
|
} |
|
|
} |
|
|
} |
|
|
.luna-dom-viewer-text-node { |
|
|
.luna-dom-viewer-key { |
|
|
color: var(--var-color); |
|
|
} |
|
|
.luna-dom-viewer-number { |
|
|
color: var(--number-color); |
|
|
} |
|
|
.luna-dom-viewer-null { |
|
|
color: var(--operator-color); |
|
|
} |
|
|
.luna-dom-viewer-string { |
|
|
color: var(--string-color); |
|
|
} |
|
|
.luna-dom-viewer-boolean { |
|
|
color: var(--keyword-color); |
|
|
} |
|
|
.luna-dom-viewer-special { |
|
|
color: var(--operator-color); |
|
|
} |
|
|
.luna-dom-viewer-keyword { |
|
|
color: var(--keyword-color); |
|
|
} |
|
|
.luna-dom-viewer-operator { |
|
|
color: var(--operator-color); |
|
|
} |
|
|
.luna-dom-viewer-comment { |
|
|
color: var(--comment-color); |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
.luna-dom-viewer-children { |
|
|
margin: 0; |
|
|
padding-left: 15px !important; |
|
|
} |
|
|
|
|
|
.inline { |
|
|
.luna-modal, |
|
|
.luna-notification { |
|
|
position: absolute; |
|
|
} |
|
|
} |
|
|
|
|
|
.luna-modal { |
|
|
z-index: 9999999; |
|
|
} |
|
|
|
|
|
.luna-modal-body, |
|
|
.luna-modal-input { |
|
|
color: var(--foreground); |
|
|
background: var(--background); |
|
|
} |
|
|
|
|
|
.luna-modal-body { |
|
|
border-color: var(--border); |
|
|
} |
|
|
|
|
|
.luna-modal-input { |
|
|
user-select: text !important; |
|
|
border-color: var(--border); |
|
|
} |
|
|
|
|
|
.luna-modal-button-group { |
|
|
.luna-modal-secondary { |
|
|
border-color: var(--border); |
|
|
color: var(--foreground); |
|
|
background: var(--background); |
|
|
} |
|
|
.luna-modal-primary { |
|
|
background: var(--accent); |
|
|
} |
|
|
.luna-modal-button { |
|
|
&:active { |
|
|
&::before { |
|
|
background: var(--accent); |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
.luna-tab { |
|
|
position: absolute; |
|
|
left: 0; |
|
|
top: 0; |
|
|
color: var(--foreground); |
|
|
background: var(--darker-background); |
|
|
} |
|
|
|
|
|
.luna-tab-tabs-container { |
|
|
border-color: var(--border); |
|
|
} |
|
|
|
|
|
.luna-tab-item { |
|
|
&.luna-tab-selected, |
|
|
&:hover { |
|
|
background: var(--highlight); |
|
|
color: var(--select-foreground); |
|
|
} |
|
|
} |
|
|
|
|
|
.luna-tab-slider { |
|
|
background: var(--accent); |
|
|
} |
|
|
|
|
|
.luna-text-viewer { |
|
|
color: var(--foreground); |
|
|
border: none; |
|
|
border-bottom: 1px solid var(--border); |
|
|
background: var(--background); |
|
|
font-size: $font-size-s; |
|
|
.luna-text-viewer-line-text { |
|
|
user-select: text; |
|
|
* { |
|
|
user-select: text; |
|
|
} |
|
|
} |
|
|
.luna-text-viewer-copy, |
|
|
.luna-text-viewer-line-number { |
|
|
border-color: var(--border); |
|
|
} |
|
|
.luna-text-viewer-copy .luna-text-viewer-icon-check { |
|
|
color: var(--accent); |
|
|
} |
|
|
.luna-text-viewer-copy { |
|
|
background-color: var(--background); |
|
|
} |
|
|
} |
|
|
|
|
|
.luna-setting { |
|
|
color: var(--foreground); |
|
|
background: var(--background); |
|
|
} |
|
|
|
|
|
.luna-setting-item { |
|
|
&:hover, |
|
|
&.luna-setting-selected { |
|
|
background: var(--darker-background); |
|
|
} |
|
|
&.luna-setting-selected:focus { |
|
|
outline: none; |
|
|
} |
|
|
} |
|
|
|
|
|
.luna-setting-item-title { |
|
|
font-size: $font-size; |
|
|
} |
|
|
|
|
|
.luna-setting-item-separator { |
|
|
border-color: var(--border); |
|
|
} |
|
|
|
|
|
.luna-setting-item-checkbox { |
|
|
input { |
|
|
border-color: var(--border); |
|
|
&:checked { |
|
|
background-color: var(--accent); |
|
|
border-color: var(--accent); |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
.luna-setting-item-select { |
|
|
.luna-setting-select { |
|
|
select { |
|
|
color: var(--foreground); |
|
|
border-color: var(--border); |
|
|
background: var(--background); |
|
|
} |
|
|
&:after { |
|
|
border-top-color: var(--foreground); |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
.luna-setting-item-button { |
|
|
button { |
|
|
color: var(--accent); |
|
|
background: var(--background); |
|
|
border-color: var(--border); |
|
|
&:hover, |
|
|
&:active { |
|
|
background: var(--darker-background); |
|
|
} |
|
|
&:active { |
|
|
border: 1px solid var(--accent); |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
.luna-setting-item-number { |
|
|
.luna-setting-range-container { |
|
|
.luna-setting-range-track { |
|
|
.luna-setting-range-track-bar { |
|
|
background: var(--border); |
|
|
.luna-setting-range-track-progress { |
|
|
background: var(--accent); |
|
|
} |
|
|
} |
|
|
} |
|
|
input::-webkit-slider-thumb { |
|
|
border-color: var(--border); |
|
|
background: radial-gradient( |
|
|
circle at center, |
|
|
var(--dark) 0, |
|
|
var(--dark) 15%, |
|
|
var(--light) 22%, |
|
|
var(--light) 100% |
|
|
); |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
.luna-box-model { |
|
|
background: var(--background); |
|
|
} |
|
|
|
|
|
.luna-box-model-position, |
|
|
.luna-box-model-margin, |
|
|
.luna-box-model-border, |
|
|
.luna-box-model-padding, |
|
|
.luna-box-model-content { |
|
|
color: var(--foreground); |
|
|
background: var(--background); |
|
|
} |
|
|
} |
|
|
|
