From 0c8c4fdf1413573dcaa33c21ce40dc620eef9135 Mon Sep 17 00:00:00 2001
From: redhoodsu <redhoodsu@tencent.com>
Date: Wed, 7 May 2025 13:40:27 +0800
Subject: [PATCH] fix: luna style

---
 package.json        |  16 +-
 src/style/luna.scss | 836 ++++++++++++++++++++++----------------------
 2 files changed, 429 insertions(+), 423 deletions(-)

diff --git a/package.json b/package.json
index 3c8ec81..0e75c1a 100644
--- a/package.json
+++ b/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",
diff --git a/src/style/luna.scss b/src/style/luna.scss
index e2eb4ca..add71ca 100644
--- a/src/style/luna.scss
+++ b/src/style/luna.scss
@@ -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);
+  }
 }