buckbanzai/talkdesk-useragent-switcher
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

improves dark theme support

Browse source
This commit is contained in:
Ray Lothian 2020-10-04 13:37:51 +02:00
parent 52cb277466
commit fb3dbc8707
4 changed files with 100 additions and 59 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

73
extension/data/options/index.css
View file

@ -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 { body {
min-width: 600px; min-width: 600px;
color: var(--color);
background-color: var(--bg-color);
} }
@media (pointer: none), (pointer: coarse) { @media (pointer: none), (pointer: coarse) {
body { body {
@ -16,13 +42,12 @@ body {
} }
textarea { textarea {
padding: 5px; padding: 5px;
border: solid 1px #ccc;
} }
button, button,
input[type=submit], input[type=submit],
input[type=button] { input[type=button] {
height: 24px; 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)); 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; 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; text-shadow: rgb(240, 240, 240) 0 1px 0;
@ -32,13 +57,25 @@ body {
opacity: 0.5; 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 { h1 {
font-size: 15px; font-size: 15px;
font-weight: normal; font-weight: normal;
} }
textarea {
width: 100%;
}
.mode-2, .mode-2,
.mode { .mode {
display: grid; display: grid;
@ -59,13 +96,13 @@ textarea {
#toggle-whitelist-desc, #toggle-whitelist-desc,
#toggle-blacklist-desc { #toggle-blacklist-desc {
cursor: pointer; cursor: pointer;
color: #2f2f2f; color: var(--color-desc);
background-color: #e8e8e8; background-color: var(--bg-desc);
padding: 1px 4px; padding: 1px 4px;
} }
.note { .note {
background: #e8e8e8; background-color: var(--bg-note);
color: #2f2f2f; color: var(--color-note);
padding: 5px; padding: 5px;
margin: 0 0 10px 0; margin: 0 0 10px 0;
} }
@ -102,21 +139,9 @@ textarea {
} }
} }
.admin { .admin {
background-color: #ffffed; color: var(--color-admin);
border: solid 1px #e8ec3a; background-color: var(--bg-admin);
border: solid 1px var(--border-admin);
padding: 10px; padding: 10px;
margin: 15px 0; margin: 15px 0;
} }
@media (prefers-color-scheme: dark) {
body,
textarea,
.note {
background-color: #313131;
color: #bfbfbf;
}
.admin {
background-color: #545709;
color: #bfbfbf;
}
}

85
extension/data/popup/index.css
View file

@ -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] { [hbox] {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -23,8 +38,8 @@
} }
body { body {
color: #000; color: var(--color);
background-color: #fff; background-color: var(--bg-color);
font-family: "Helvetica Neue", Helvetica, arial, sans-serif; font-family: "Helvetica Neue", Helvetica, arial, sans-serif;
font-size: 13px; font-size: 13px;
width: 600px; width: 600px;
@ -50,13 +65,13 @@ input[type=text] {
width: 100%; width: 100%;
} }
input[type=text]:read-only { input[type=text]:read-only {
color: #636363; color: var(--color-light);
background-color: transparent; background-color: transparent;
} }
input { input {
outline: none; outline: none;
background-color: #fff; background-color: var(--bg-color);
color: #000; color: var(--color);
border: none; border: none;
box-sizing: border-box; box-sizing: border-box;
height: 28px; height: 28px;
@ -82,18 +97,23 @@ select {
-moz-appearance: none; -moz-appearance: none;
user-select: none; user-select: none;
outline: none; outline: none;
color: #000; color: var(--color);
background: #fff url(list.svg) no-repeat center right 4px; background: var(--bg-color) url(list-black.svg) no-repeat center right 4px;
background-size: 8px; background-size: 8px;
font-size: 13px; font-size: 13px;
border-radius: 0; border-radius: 0;
padding: 6px 16px 6px 4px; padding: 6px 16px 6px 4px;
border: none; border: none;
} }
@media (prefers-color-scheme: dark) {
select {
background-image: url(list-white.svg);
}
}
#list { #list {
overflow: auto; overflow: auto;
height: 240px; height: 240px;
color: #000; color: var(--color);
background-position: top 120px center; background-position: top 120px center;
background-repeat: no-repeat; background-repeat: no-repeat;
font-size: 11px; font-size: 11px;
@ -107,8 +127,8 @@ select {
} }
#list th { #list th {
height: 32px; height: 32px;
color: #000; color: var(--color);
background-color: #f5f5f5; background-color: var(--bg-color-light);
white-space: nowrap; white-space: nowrap;
padding-left: 10px; padding-left: 10px;
} }
@ -122,12 +142,12 @@ select {
position: relative; position: relative;
} }
#list tbody tr:nth-child(odd) { #list tbody tr:nth-child(odd) {
color: #000; color: var(--color);
background-color: #fff; background-color: var(--bg-color);
} }
#list tbody tr:nth-child(even) { #list tbody tr:nth-child(even) {
color: #000; color: var(--color);
background-color: #f5f5f5; background-color: var(--bg-color-light);
} }
#list[data-loading=false] tbody:empty::before { #list[data-loading=false] tbody:empty::before {
content: attr(data-content); content: attr(data-content);
@ -158,7 +178,7 @@ select {
} }
#filter { #filter {
background-color: #f5f5f5; background-color: var(--bg-color-light);
} }
#filter th { #filter th {
height: 32px; height: 32px;
@ -188,30 +208,37 @@ select {
[data-cmd="test"] { [data-cmd="test"] {
background-color: #4d72b7; background-color: #4d72b7;
color: #fff; color: var(--bg-color);
} }
[data-cmd="container"] { [data-cmd="container"] {
background-color: #92773c; background-color: #92773c;
color: #fff; color: var(--bg-color);
} }
[data-cmd="window"], [data-cmd="window"],
[data-cmd="apply"] { [data-cmd="apply"] {
background-color: #3c923c; background-color: #3c923c;
color: #fff; color: var(--bg-color);
} }
[data-cmd="reset"] { [data-cmd="reset"] {
color: #fff; color: var(--bg-color);
background-color: #e6850b; background-color: #e6850b;
} }
[data-cmd="reload"], [data-cmd="reload"],
[data-cmd="options"], [data-cmd="options"],
[data-cmd="refresh"] { [data-cmd="refresh"] {
color: #000; color: var(--color);
background-color: #f5f5f5; 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"]) { #explore:not([data-loaded="true"]) {
height: 18px; height: 18px;
} }
@ -221,7 +248,7 @@ body[data-android="true"] [data-cmd="window"] {
display: none; display: none;
} }
#view { #view {
background-color: #f5f5f5; background-color: var(--bg-color-light);
padding: 5px 0; padding: 5px 0;
} }
#view td { #view td {
@ -238,7 +265,7 @@ body[data-android="true"] [data-cmd="window"] {
bottom: 95px; bottom: 95px;
right: 10px; right: 10px;
background-color: #e68509; background-color: #e68509;
color: #fff; color: var(--bg-color);
padding: 2px 5px; padding: 2px 5px;
box-shadow: 0 0 2px #ca7403; box-shadow: 0 0 2px #ca7403;
} }
@ -249,15 +276,3 @@ body[data-android="true"] [data-cmd="window"] {
.hide { .hide {
visibility: hidden; visibility: hidden;
} }
@media (prefers-color-scheme: dark) {
body,
th,
select,
input,
#view,
table {
background-color: #313131;
color: #bfbfbf;
}
}

0
extension/data/popup/list.svg → extension/data/popup/list-black.svg
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 404 B

After

Width:  |  Height:  |  Size: 404 B

1
extension/data/popup/list-white.svg Normal file
View 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>
Side by side

After

Width:  |  Height:  |  Size: 405 B