improves dark theme support
This commit is contained in:
Ray Lothian
parent
52cb277466
commit
fb3dbc8707
4 changed files with 100 additions and 59 deletions
|
|
@ -1,5 +1,31 @@
|
|||
:root {
|
||||
--color: #444;
|
||||
--bg-color: #fff;
|
||||
--color-admin: #444;
|
||||
--color-desc: #2f2f2f;
|
||||
--bg-desc: #e8e8e8;
|
||||
--color-note: #2f2f2f;
|
||||
--bg-note: #e8e8e8;
|
||||
--bg-admin: #ffffed;
|
||||
--border-admin: #e8ec3a;
|
||||
--color-light: #636363;
|
||||
--bg-color-light: #f5f5f5;
|
||||
--bg-focus: #eff6f9;
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--color: #d1d2cc;
|
||||
--bg-color: #272d37;
|
||||
--color-light: #f5f5f5;
|
||||
--bg-color-light: #343946;
|
||||
--bg-focus: #454b5d;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
min-width: 600px;
|
||||
color: var(--color);
|
||||
background-color: var(--bg-color);
|
||||
}
|
||||
@media (pointer: none), (pointer: coarse) {
|
||||
body {
|
||||
|
|
@ -16,13 +42,12 @@ body {
|
|||
}
|
||||
textarea {
|
||||
padding: 5px;
|
||||
border: solid 1px #ccc;
|
||||
}
|
||||
button,
|
||||
input[type=submit],
|
||||
input[type=button] {
|
||||
height: 24px;
|
||||
color: rgb(68, 68, 68);
|
||||
color: #444;
|
||||
background-image: linear-gradient(rgb(237, 237, 237), rgb(237, 237, 237) 38%, rgb(222, 222, 222));
|
||||
box-shadow: rgba(0, 0, 0, 0.08) 0 1px 0, rgba(255, 255, 255, 0.75) 0 1px 2px inset;
|
||||
text-shadow: rgb(240, 240, 240) 0 1px 0;
|
||||
|
|
@ -32,13 +57,25 @@ body {
|
|||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
button,
|
||||
input[type=submit],
|
||||
input[type=button] {
|
||||
cursor: pointer;
|
||||
}
|
||||
textarea {
|
||||
color: var(--color-light);
|
||||
background-color: var(--bg-color-light);
|
||||
border: none;
|
||||
width: 100%;
|
||||
outline: none;
|
||||
}
|
||||
textarea:focus {
|
||||
background-color: var(--bg-focus);
|
||||
}
|
||||
h1 {
|
||||
font-size: 15px;
|
||||
font-weight: normal;
|
||||
}
|
||||
textarea {
|
||||
width: 100%;
|
||||
}
|
||||
.mode-2,
|
||||
.mode {
|
||||
display: grid;
|
||||
|
|
@ -59,13 +96,13 @@ textarea {
|
|||
#toggle-whitelist-desc,
|
||||
#toggle-blacklist-desc {
|
||||
cursor: pointer;
|
||||
color: #2f2f2f;
|
||||
background-color: #e8e8e8;
|
||||
color: var(--color-desc);
|
||||
background-color: var(--bg-desc);
|
||||
padding: 1px 4px;
|
||||
}
|
||||
.note {
|
||||
background: #e8e8e8;
|
||||
color: #2f2f2f;
|
||||
background-color: var(--bg-note);
|
||||
color: var(--color-note);
|
||||
padding: 5px;
|
||||
margin: 0 0 10px 0;
|
||||
}
|
||||
|
|
@ -102,21 +139,9 @@ textarea {
|
|||
}
|
||||
}
|
||||
.admin {
|
||||
background-color: #ffffed;
|
||||
border: solid 1px #e8ec3a;
|
||||
color: var(--color-admin);
|
||||
background-color: var(--bg-admin);
|
||||
border: solid 1px var(--border-admin);
|
||||
padding: 10px;
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
body,
|
||||
textarea,
|
||||
.note {
|
||||
background-color: #313131;
|
||||
color: #bfbfbf;
|
||||
}
|
||||
.admin {
|
||||
background-color: #545709;
|
||||
color: #bfbfbf;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,18 @@
|
|||
:root {
|
||||
--color: #000;
|
||||
--bg-color: #fff;
|
||||
--color-light: #636363;
|
||||
--bg-color-light: #f5f5f5;
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--color: #d1d2cc;
|
||||
--bg-color: #272d37;
|
||||
--color-light: #f5f5f5;
|
||||
--bg-color-light: #343946;
|
||||
}
|
||||
}
|
||||
|
||||
[hbox] {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
|
@ -23,8 +38,8 @@
|
|||
}
|
||||
|
||||
body {
|
||||
color: #000;
|
||||
background-color: #fff;
|
||||
color: var(--color);
|
||||
background-color: var(--bg-color);
|
||||
font-family: "Helvetica Neue", Helvetica, arial, sans-serif;
|
||||
font-size: 13px;
|
||||
width: 600px;
|
||||
|
|
@ -50,13 +65,13 @@ input[type=text] {
|
|||
width: 100%;
|
||||
}
|
||||
input[type=text]:read-only {
|
||||
color: #636363;
|
||||
color: var(--color-light);
|
||||
background-color: transparent;
|
||||
}
|
||||
input {
|
||||
outline: none;
|
||||
background-color: #fff;
|
||||
color: #000;
|
||||
background-color: var(--bg-color);
|
||||
color: var(--color);
|
||||
border: none;
|
||||
box-sizing: border-box;
|
||||
height: 28px;
|
||||
|
|
@ -82,18 +97,23 @@ select {
|
|||
-moz-appearance: none;
|
||||
user-select: none;
|
||||
outline: none;
|
||||
color: #000;
|
||||
background: #fff url(list.svg) no-repeat center right 4px;
|
||||
color: var(--color);
|
||||
background: var(--bg-color) url(list-black.svg) no-repeat center right 4px;
|
||||
background-size: 8px;
|
||||
font-size: 13px;
|
||||
border-radius: 0;
|
||||
padding: 6px 16px 6px 4px;
|
||||
border: none;
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
select {
|
||||
background-image: url(list-white.svg);
|
||||
}
|
||||
}
|
||||
#list {
|
||||
overflow: auto;
|
||||
height: 240px;
|
||||
color: #000;
|
||||
color: var(--color);
|
||||
background-position: top 120px center;
|
||||
background-repeat: no-repeat;
|
||||
font-size: 11px;
|
||||
|
|
@ -107,8 +127,8 @@ select {
|
|||
}
|
||||
#list th {
|
||||
height: 32px;
|
||||
color: #000;
|
||||
background-color: #f5f5f5;
|
||||
color: var(--color);
|
||||
background-color: var(--bg-color-light);
|
||||
white-space: nowrap;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
|
@ -122,12 +142,12 @@ select {
|
|||
position: relative;
|
||||
}
|
||||
#list tbody tr:nth-child(odd) {
|
||||
color: #000;
|
||||
background-color: #fff;
|
||||
color: var(--color);
|
||||
background-color: var(--bg-color);
|
||||
}
|
||||
#list tbody tr:nth-child(even) {
|
||||
color: #000;
|
||||
background-color: #f5f5f5;
|
||||
color: var(--color);
|
||||
background-color: var(--bg-color-light);
|
||||
}
|
||||
#list[data-loading=false] tbody:empty::before {
|
||||
content: attr(data-content);
|
||||
|
|
@ -158,7 +178,7 @@ select {
|
|||
}
|
||||
|
||||
#filter {
|
||||
background-color: #f5f5f5;
|
||||
background-color: var(--bg-color-light);
|
||||
}
|
||||
#filter th {
|
||||
height: 32px;
|
||||
|
|
@ -188,30 +208,37 @@ select {
|
|||
|
||||
[data-cmd="test"] {
|
||||
background-color: #4d72b7;
|
||||
color: #fff;
|
||||
color: var(--bg-color);
|
||||
}
|
||||
[data-cmd="container"] {
|
||||
background-color: #92773c;
|
||||
color: #fff;
|
||||
color: var(--bg-color);
|
||||
}
|
||||
[data-cmd="window"],
|
||||
[data-cmd="apply"] {
|
||||
background-color: #3c923c;
|
||||
color: #fff;
|
||||
color: var(--bg-color);
|
||||
}
|
||||
|
||||
[data-cmd="reset"] {
|
||||
color: #fff;
|
||||
color: var(--bg-color);
|
||||
background-color: #e6850b;
|
||||
}
|
||||
|
||||
[data-cmd="reload"],
|
||||
[data-cmd="options"],
|
||||
[data-cmd="refresh"] {
|
||||
color: #000;
|
||||
background-color: #f5f5f5;
|
||||
color: var(--color);
|
||||
background-color: var(--bg-color-light);
|
||||
}
|
||||
|
||||
#explore {
|
||||
color: var(--color) !important;
|
||||
background-color: var(--bg-color) !important;
|
||||
}
|
||||
#explore .title {
|
||||
color: var(--color) !important;
|
||||
}
|
||||
#explore:not([data-loaded="true"]) {
|
||||
height: 18px;
|
||||
}
|
||||
|
|
@ -221,7 +248,7 @@ body[data-android="true"] [data-cmd="window"] {
|
|||
display: none;
|
||||
}
|
||||
#view {
|
||||
background-color: #f5f5f5;
|
||||
background-color: var(--bg-color-light);
|
||||
padding: 5px 0;
|
||||
}
|
||||
#view td {
|
||||
|
|
@ -238,7 +265,7 @@ body[data-android="true"] [data-cmd="window"] {
|
|||
bottom: 95px;
|
||||
right: 10px;
|
||||
background-color: #e68509;
|
||||
color: #fff;
|
||||
color: var(--bg-color);
|
||||
padding: 2px 5px;
|
||||
box-shadow: 0 0 2px #ca7403;
|
||||
}
|
||||
|
|
@ -249,15 +276,3 @@ body[data-android="true"] [data-cmd="window"] {
|
|||
.hide {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
body,
|
||||
th,
|
||||
select,
|
||||
input,
|
||||
#view,
|
||||
table {
|
||||
background-color: #313131;
|
||||
color: #bfbfbf;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 404 B After Width: | Height: | Size: 404 B |
1
extension/data/popup/list-white.svg
Normal file
1
extension/data/popup/list-white.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" ?><!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg enable-background="new 0 0 48 48" height="48px" id="Layer_3" version="1.1" viewBox="0 0 48 48" width="48px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon fill="#d1d2cc" points="0,12.438 48,12.438 24,35.562 "/></svg>
|
||||
|
After Width: | Height: | Size: 405 B |
Loading…
Reference in a new issue