瀏覽代碼

LibWebView: De-duplicate some Inspector CSS rule blocks

After the refactor to use CSS variables for dark-mode colors in commit
ae25146b898ce8900d04c4911f1f0835681aac4e, we had duplicated blocks for
some CSS rules. This patch just unites them into one block.
Timothy Flynn 11 月之前
父節點
當前提交
cde7c91c54
共有 1 個文件被更改,包括 37 次插入49 次删除
  1. 37 49
      Base/res/ladybird/inspector.css

+ 37 - 49
Base/res/ladybird/inspector.css

@@ -1,10 +1,3 @@
-body {
-    font-family: system-ui, sans-serif;
-    font-size: 10pt;
-
-    margin: 0;
-}
-
 @media (prefers-color-scheme: dark) {
 @media (prefers-color-scheme: dark) {
     :root {
     :root {
         --background: rgb(23, 23, 23);
         --background: rgb(23, 23, 23);
@@ -48,6 +41,17 @@ body {
     }
     }
 }
 }
 
 
+html {
+    background-color: var(--background);
+}
+
+body {
+    font-family: system-ui, sans-serif;
+    font-size: 10pt;
+
+    margin: 0;
+}
+
 .split-view {
 .split-view {
     width: 100vw;
     width: 100vw;
     height: 100vh;
     height: 100vh;
@@ -61,6 +65,8 @@ body {
 }
 }
 
 
 .split-view-separator {
 .split-view-separator {
+    background-color: var(--separator);
+
     width: 100%;
     width: 100%;
     height: 5px;
     height: 5px;
 
 
@@ -73,7 +79,13 @@ body {
     z-index: 100;
     z-index: 100;
 }
 }
 
 
+.split-view-separator circle {
+    fill: var(--separator-accent);
+}
+
 .tab-controls-container {
 .tab-controls-container {
+    background-color: var(--tab-controls);
+
     width: 100%;
     width: 100%;
 
 
     padding: 4px;
     padding: 4px;
@@ -91,6 +103,9 @@ body {
 }
 }
 
 
 .tab-controls button {
 .tab-controls button {
+    color: var(--text-color);
+    background-color: var(--tab-button-background);
+
     font-size: 12px;
     font-size: 12px;
     font-weight: 600;
     font-weight: 600;
 
 
@@ -110,6 +125,15 @@ body {
     border-radius: 0 0.5rem 0.5rem 0;
     border-radius: 0 0.5rem 0.5rem 0;
 }
 }
 
 
+.tab-controls button.active {
+    background-color: var(--tab-button-active-background);
+    color: var(--tab-button-active-color);
+}
+
+.tab-controls button + button {
+    border-left: 1px solid var(--tab-button-border);
+}
+
 .tab-content {
 .tab-content {
     height: calc(100% - 40px);
     height: calc(100% - 40px);
 
 
@@ -121,36 +145,6 @@ body {
     overflow: auto scroll;
     overflow: auto scroll;
 }
 }
 
 
-html {
-    background-color: var(--background);
-}
-
-.split-view-separator {
-    background-color: var(--separator);
-}
-
-.split-view-separator circle {
-    fill: var(--separator-accent);
-}
-
-.tab-controls-container {
-    background-color: var(--tab-controls);
-}
-
-.tab-controls button {
-    color: var(--text-color);
-    background-color: var(--tab-button-background);
-}
-
-.tab-controls button.active {
-    background-color: var(--tab-button-active-background);
-    color: var(--tab-button-active-color);
-}
-
-.tab-controls button + button {
-    border-left: 1px solid var(--tab-button-border);
-}
-
 details > :not(:first-child) {
 details > :not(:first-child) {
     display: list-item;
     display: list-item;
     list-style: none inside;
     list-style: none inside;
@@ -192,6 +186,7 @@ details > :not(:first-child) {
 }
 }
 
 
 .console-input {
 .console-input {
+    background-color: var(--console-input-color);
     width: 100%;
     width: 100%;
     height: 24px;
     height: 24px;
     padding: 4px;
     padding: 4px;
@@ -204,6 +199,10 @@ details > :not(:first-child) {
     width: calc(100% - 60px);
     width: calc(100% - 60px);
 }
 }
 
 
+.console-input input:focus {
+    outline: 1px dashed var(--console-input-focus-color);
+}
+
 .console-prompt {
 .console-prompt {
     color: var(--console-prompt-color);
     color: var(--console-prompt-color);
 }
 }
@@ -216,14 +215,6 @@ details > :not(:first-child) {
     color: var(--console-warning-color);
     color: var(--console-warning-color);
 }
 }
 
 
-.console-input {
-    background-color: var(--console-input-color);
-}
-
-.console-input input:focus {
-    outline: 1px dashed var(--console-input-focus-color);
-}
-
 .property-table {
 .property-table {
     width: 100%;
     width: 100%;
 
 
@@ -232,6 +223,7 @@ details > :not(:first-child) {
 }
 }
 
 
 .property-table th {
 .property-table th {
+    background-color: var(--property-table-head);
     position: sticky;
     position: sticky;
     top: 0px;
     top: 0px;
 }
 }
@@ -242,10 +234,6 @@ details > :not(:first-child) {
     text-align: left;
     text-align: left;
 }
 }
 
 
-.property-table th {
-    background-color: var(--property-table-head);
-}
-
 #fonts {
 #fonts {
     display: flex;
     display: flex;
     flex-direction: row;
     flex-direction: row;