فهرست منبع

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) {
     :root {
         --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 {
     width: 100vw;
     height: 100vh;
@@ -61,6 +65,8 @@ body {
 }
 
 .split-view-separator {
+    background-color: var(--separator);
+
     width: 100%;
     height: 5px;
 
@@ -73,7 +79,13 @@ body {
     z-index: 100;
 }
 
+.split-view-separator circle {
+    fill: var(--separator-accent);
+}
+
 .tab-controls-container {
+    background-color: var(--tab-controls);
+
     width: 100%;
 
     padding: 4px;
@@ -91,6 +103,9 @@ body {
 }
 
 .tab-controls button {
+    color: var(--text-color);
+    background-color: var(--tab-button-background);
+
     font-size: 12px;
     font-weight: 600;
 
@@ -110,6 +125,15 @@ body {
     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 {
     height: calc(100% - 40px);
 
@@ -121,36 +145,6 @@ body {
     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) {
     display: list-item;
     list-style: none inside;
@@ -192,6 +186,7 @@ details > :not(:first-child) {
 }
 
 .console-input {
+    background-color: var(--console-input-color);
     width: 100%;
     height: 24px;
     padding: 4px;
@@ -204,6 +199,10 @@ details > :not(:first-child) {
     width: calc(100% - 60px);
 }
 
+.console-input input:focus {
+    outline: 1px dashed var(--console-input-focus-color);
+}
+
 .console-prompt {
     color: var(--console-prompt-color);
 }
@@ -216,14 +215,6 @@ details > :not(:first-child) {
     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 {
     width: 100%;
 
@@ -232,6 +223,7 @@ details > :not(:first-child) {
 }
 
 .property-table th {
+    background-color: var(--property-table-head);
     position: sticky;
     top: 0px;
 }
@@ -242,10 +234,6 @@ details > :not(:first-child) {
     text-align: left;
 }
 
-.property-table th {
-    background-color: var(--property-table-head);
-}
-
 #fonts {
     display: flex;
     flex-direction: row;