fix: luna style
This commit is contained in:
redhoodsu
16
package.json
16
package.json
@@ -65,14 +65,14 @@
|
||||
"karma-webpack": "^5.0.0",
|
||||
"licia": "^1.44.0",
|
||||
"luna-box-model": "^1.0.0",
|
||||
"luna-console": "^1.3.5",
|
||||
"luna-data-grid": "^1.0.0",
|
||||
"luna-dom-viewer": "^1.4.0",
|
||||
"luna-modal": "^1.2.3",
|
||||
"luna-notification": "^0.3.2",
|
||||
"luna-object-viewer": "^0.3.1",
|
||||
"luna-setting": "^2.0.1",
|
||||
"luna-tab": "^0.3.2",
|
||||
"luna-console": "^1.3.6",
|
||||
"luna-data-grid": "^1.4.2",
|
||||
"luna-dom-viewer": "^1.8.2",
|
||||
"luna-modal": "^1.3.1",
|
||||
"luna-notification": "^0.3.3",
|
||||
"luna-object-viewer": "^0.3.2",
|
||||
"luna-setting": "^2.0.2",
|
||||
"luna-tab": "^0.3.4",
|
||||
"luna-text-viewer": "^0.2.1",
|
||||
"postcss-clean": "^1.2.2",
|
||||
"postcss-loader": "^3.0.0",
|
||||
|
||||
@@ -1,462 +1,468 @@
|
||||
@use './variable' as *;
|
||||
|
||||
.luna-console {
|
||||
background: var(--background);
|
||||
}
|
||||
.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);
|
||||
@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-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);
|
||||
&:focus {
|
||||
.luna-data-grid-data-container {
|
||||
.luna-data-grid-node.luna-data-grid-selected {
|
||||
background: var(--accent);
|
||||
}
|
||||
}
|
||||
}
|
||||
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 {
|
||||
background: var(--highlight);
|
||||
}
|
||||
tr:nth-child(even) {
|
||||
background: var(--contrast);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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 {
|
||||
.luna-console-special {
|
||||
color: var(--operator-color);
|
||||
}
|
||||
.luna-dom-viewer-string {
|
||||
color: var(--string-color);
|
||||
}
|
||||
.luna-dom-viewer-boolean {
|
||||
.luna-console-keyword {
|
||||
color: var(--keyword-color);
|
||||
}
|
||||
.luna-dom-viewer-special {
|
||||
.luna-console-operator {
|
||||
color: var(--operator-color);
|
||||
}
|
||||
.luna-dom-viewer-keyword {
|
||||
color: var(--keyword-color);
|
||||
}
|
||||
.luna-dom-viewer-operator {
|
||||
color: var(--operator-color);
|
||||
}
|
||||
.luna-dom-viewer-comment {
|
||||
.luna-console-comment {
|
||||
color: var(--comment-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.luna-dom-viewer-children {
|
||||
margin: 0;
|
||||
padding-left: 15px !important;
|
||||
}
|
||||
|
||||
.inline {
|
||||
.luna-modal,
|
||||
.luna-notification {
|
||||
position: absolute;
|
||||
.luna-console-header {
|
||||
color: var(--link-color);
|
||||
border-bottom-color: var(--border);
|
||||
}
|
||||
}
|
||||
|
||||
.luna-modal {
|
||||
z-index: 9999999;
|
||||
}
|
||||
|
||||
.luna-modal-body,
|
||||
.luna-modal-input {
|
||||
color: var(--foreground);
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
.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-console-nesting-level {
|
||||
border-right-color: var(--border);
|
||||
&::before {
|
||||
border-bottom-color: var(--border);
|
||||
}
|
||||
}
|
||||
.luna-modal-primary {
|
||||
background: var(--accent);
|
||||
}
|
||||
.luna-modal-button {
|
||||
&:active {
|
||||
&::before {
|
||||
background: var(--accent);
|
||||
|
||||
.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-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-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-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-console-preview {
|
||||
@include luna-console-highlight();
|
||||
}
|
||||
&.luna-setting-selected:focus {
|
||||
outline: none;
|
||||
|
||||
.luna-object-viewer {
|
||||
color: var(--primary);
|
||||
font-size: 12px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.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-object-viewer-null {
|
||||
color: var(--operator-color);
|
||||
}
|
||||
}
|
||||
|
||||
.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-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-setting-item-button {
|
||||
button {
|
||||
color: var(--accent);
|
||||
.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);
|
||||
&: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 {
|
||||
&:focus {
|
||||
.luna-data-grid-data-container {
|
||||
.luna-data-grid-node.luna-data-grid-selected {
|
||||
background: var(--accent);
|
||||
}
|
||||
}
|
||||
}
|
||||
input::-webkit-slider-thumb {
|
||||
th,
|
||||
td {
|
||||
border-color: var(--border);
|
||||
background: radial-gradient(
|
||||
circle at center,
|
||||
var(--dark) 0,
|
||||
var(--dark) 15%,
|
||||
var(--light) 22%,
|
||||
var(--light) 100%
|
||||
);
|
||||
}
|
||||
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 {
|
||||
background: var(--highlight);
|
||||
}
|
||||
tr:nth-child(even) {
|
||||
background: var(--contrast);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.luna-box-model {
|
||||
background: var(--background);
|
||||
}
|
||||
.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-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);
|
||||
.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);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user