mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-09-26 11:18:59 +00:00
Inspector: Clean up theming CSS with variables
The media queries for the different themes were all over the place, they got consolidated in one place specifying all the colors. :^)
This commit is contained in:
Tobias Christiansen
Sam Atkins
parent
dd5550dde3
commit
ae25146b89
Notes:
github-actions[bot]
2024-08-09 17:59:16 +00:00
Author: https://github.com/TobyAsE
Commit: ae25146b89
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/1019
Reviewed-by: https://github.com/AtkinsSJ ✅
1 changed files with 84 additions and 115 deletions
|
|
@ -5,6 +5,49 @@ body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
:root {
|
||||||
|
--background: rgb(23, 23, 23);
|
||||||
|
--separator: dimgray;
|
||||||
|
--separator-accent: rgb(57, 57, 57);
|
||||||
|
--tab-controls: rgb(57, 57, 57);
|
||||||
|
--tab-button-background: rgb(43, 42, 50);
|
||||||
|
--text-color: white;
|
||||||
|
--tab-button-active-background: rgb(22 100 219);
|
||||||
|
--tab-button-active-color: var(--text-color);
|
||||||
|
--tab-button-border: rgb(96, 96, 96);
|
||||||
|
--hoverable-background: #31383e;
|
||||||
|
--selected-border: cyan;
|
||||||
|
--console-prompt-color: cyan;
|
||||||
|
--console-message-color: lightskyblue;
|
||||||
|
--console-warning-color: orange;
|
||||||
|
--console-input-color: rgb(57, 57, 57);
|
||||||
|
--console-input-focus-color: cyan;
|
||||||
|
--property-table-head: rgb(57, 57, 57);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: light) {
|
||||||
|
:root {
|
||||||
|
--background: white;
|
||||||
|
--separator: lightgray;
|
||||||
|
--separator-accent: white;
|
||||||
|
--tab-controls: rgb(229, 229, 229);
|
||||||
|
--tab-button-background: white;
|
||||||
|
--text-color: black;
|
||||||
|
--tab-button-active: rgb(22 100 219);
|
||||||
|
--tab-button-border: rgb(242, 242, 242);
|
||||||
|
--hoverable-background: rgb(236, 236, 236);
|
||||||
|
--selected-border: blue;
|
||||||
|
--console-prompt-color: blue;
|
||||||
|
--console-message-color: blue;
|
||||||
|
--console-warning-color: darkorange;
|
||||||
|
--console-input-color: rgb(229, 229, 229);
|
||||||
|
--console-input-focus-color: blue;
|
||||||
|
--property-table-head: rgb(229, 229, 229);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.split-view {
|
.split-view {
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
|
|
@ -78,63 +121,34 @@ body {
|
||||||
overflow: auto scroll;
|
overflow: auto scroll;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
html {
|
||||||
html {
|
background-color: var(--background);
|
||||||
background-color: rgb(23, 23, 23);
|
|
||||||
}
|
|
||||||
|
|
||||||
.split-view-separator {
|
|
||||||
background-color: dimgray;
|
|
||||||
}
|
|
||||||
|
|
||||||
.split-view-separator circle {
|
|
||||||
fill: rgb(57, 57, 57);
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab-controls-container {
|
|
||||||
background-color: rgb(57, 57, 57);
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab-controls button {
|
|
||||||
color: white;
|
|
||||||
background-color: rgb(43, 42, 50);
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab-controls button.active {
|
|
||||||
background-color: rgb(22 100 219);
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab-controls button + button {
|
|
||||||
border-left: 1px solid rgb(96, 96, 96);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: light) {
|
.split-view-separator {
|
||||||
.split-view-separator {
|
background-color: var(--separator);
|
||||||
background-color: lightgray;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.split-view-separator circle {
|
.split-view-separator circle {
|
||||||
fill: white;
|
fill: var(--separator-accent);
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab-controls-container {
|
.tab-controls-container {
|
||||||
background-color: rgb(229, 229, 229);
|
background-color: var(--tab-controls);
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab-controls button {
|
.tab-controls button {
|
||||||
color: black;
|
color: var(--text-color);
|
||||||
background-color: white;
|
background-color: var(--tab-button-background);
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab-controls button.active {
|
.tab-controls button.active {
|
||||||
color: white;
|
background-color: var(--tab-button-active-background);
|
||||||
background-color: rgb(28, 138, 255);
|
color: var(--tab-button-active-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab-controls button + button {
|
.tab-controls button + button {
|
||||||
border-left: 1px solid rgb(242, 242, 242);
|
border-left: 1px solid var(--tab-button-border);
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
details > :not(:first-child) {
|
details > :not(:first-child) {
|
||||||
|
|
@ -153,26 +167,13 @@ details > :not(:first-child) {
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
.hoverable:hover {
|
||||||
.hoverable:hover {
|
background-color: var(--hoverable-background);
|
||||||
background-color: #31383e;
|
|
||||||
}
|
|
||||||
|
|
||||||
.selected {
|
|
||||||
border: 1px dashed cyan;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: light) {
|
.selected {
|
||||||
.hoverable:hover {
|
border: 1px dashed var(--selected-border);
|
||||||
background-color: rgb(236, 236, 236);
|
padding: 0;
|
||||||
}
|
|
||||||
|
|
||||||
.selected {
|
|
||||||
border: 1px dashed blue;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#console {
|
#console {
|
||||||
|
|
@ -203,48 +204,24 @@ details > :not(:first-child) {
|
||||||
width: calc(100% - 60px);
|
width: calc(100% - 60px);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
.console-prompt {
|
||||||
.console-prompt {
|
color: var(--console-prompt-color);
|
||||||
color: cyan;
|
|
||||||
}
|
|
||||||
|
|
||||||
.console-message {
|
|
||||||
color: lightskyblue;
|
|
||||||
}
|
|
||||||
|
|
||||||
.console-warning {
|
|
||||||
color: orange;
|
|
||||||
}
|
|
||||||
|
|
||||||
.console-input {
|
|
||||||
background-color: rgb(57, 57, 57);
|
|
||||||
}
|
|
||||||
|
|
||||||
.console-input input:focus {
|
|
||||||
outline: 1px dashed cyan;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: light) {
|
.console-message {
|
||||||
.console-prompt {
|
color: var(--console-message-color);
|
||||||
color: blue;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.console-message {
|
.console-warning {
|
||||||
color: blue;
|
color: var(--console-warning-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.console-warning {
|
.console-input {
|
||||||
color: darkorange;
|
background-color: var(--console-input-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.console-input {
|
.console-input input:focus {
|
||||||
background-color: rgb(229, 229, 229);
|
outline: 1px dashed var(--console-input-focus-color);
|
||||||
}
|
|
||||||
|
|
||||||
.console-input input:focus {
|
|
||||||
outline: 1px dashed blue;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.property-table {
|
.property-table {
|
||||||
|
|
@ -265,14 +242,6 @@ details > :not(:first-child) {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
.property-table th {
|
||||||
.property-table th {
|
background-color: var(--property-table-head);
|
||||||
background-color: rgb(57, 57, 57);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-color-scheme: light) {
|
|
||||||
.property-table th {
|
|
||||||
background-color: rgb(229, 229, 229);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue