Explorar el Código

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 hace 11 meses
padre
commit
cde7c91c54
Se han modificado 1 ficheros con 37 adiciones y 49 borrados
  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;