Skip to content

Commit ecb73d2

Browse files
gorhillgorhill
committed
Bring dark theme out of experimental status
Too many changes to list here, essentially there is now a user interface setting to enable/disable dark theme, and I've rearranged a bit the Settings pane as a result and also altered other visuals in various places. There are places which I know have not been thoroughly tested (i.e. logger inspector). Will fine-tune as per feedback. Issues with the classic popup panel will not be addressed, and if feedback is that it has become unusuable, it will be outright removed.
1 parent 2bc9c8a commit ecb73d2

34 files changed

+455
-302
lines changed

‎src/1p-filters.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@
5050
<script src="lib/codemirror/addon/search/searchcursor.js"></script>
5151
<script src="lib/codemirror/addon/selection/active-line.js"></script>
5252
<script src="lib/diff/swatinem_diff.js"></script>
53+
<script src="lib/hsluv/hsluv-0.1.0.min.js"></script>
5354

5455
<script src="js/codemirror/search.js"></script>
5556
<script src="js/codemirror/search-thread.js"></script>

‎src/3p-filters.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,8 @@
7070
</div>
7171
</div>
7272

73+
<script src="lib/hsluv/hsluv-0.1.0.min.js"></script>
74+
7375
<script src="js/fa-icons.js"></script>
7476
<script src="js/vapi.js"></script>
7577
<script src="js/vapi-common.js"></script>

‎src/about.html

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@
3535
<div class="li"><span><a href="https://fontawesome.com/" target="_blank">FontAwesome font family</a> by <a href="https://github.com/davegandy">Dave Gandy</a></span></div>
3636
<div class="li"><span><a href="https://github.com/Swatinem/diff" target="_blank">An implementation of Myers' diff algorithm</a> by <a href="https://github.com/Swatinem">Arpad Borsos</a></span></div>
3737
<div class="li"><span><a href="https://github.com/foo123/RegexAnalyzer" target="_blank">Regular Expression Analyzer</a> by <a href="https://github.com/foo123">Nikos M.</a></span></div>
38+
<div class="li"><span><a href="https://github.com/hsluv/hsluv" target="_blank">HSLuv - Human-friendly HSL</a> by <a href="https://github.com/foo123">Alexei Boronine</a></span></div>
3839
</div>
3940
<div class="li"><span data-i18n="aboutCDNs"></span></div>
4041
<div class="liul">
@@ -44,6 +45,8 @@
4445
</div>
4546
</div>
4647

48+
<script src="lib/hsluv/hsluv-0.1.0.min.js"></script>
49+
4750
<script src="js/vapi.js"></script>
4851
<script src="js/vapi-common.js"></script>
4952
<script src="js/vapi-client.js"></script>

‎src/advanced-settings.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@
2727

2828
<script src="lib/codemirror/lib/codemirror.js"></script>
2929
<script src="lib/codemirror/addon/selection/active-line.js"></script>
30+
<script src="lib/hsluv/hsluv-0.1.0.min.js"></script>
3031

3132
<script src="js/fa-icons.js"></script>
3233
<script src="js/vapi.js"></script>

‎src/asset-viewer.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@
3333
<script src="lib/codemirror/addon/scroll/annotatescrollbar.js"></script>
3434
<script src="lib/codemirror/addon/search/searchcursor.js"></script>
3535
<script src="lib/codemirror/addon/selection/active-line.js"></script>
36+
<script src="lib/hsluv/hsluv-0.1.0.min.js"></script>
3637

3738
<script src="js/codemirror/search.js"></script>
3839
<script src="js/codemirror/search-thread.js"></script>

‎src/css/codemirror.css

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,6 @@
1212
height: 100%;
1313
width: 100%;
1414
}
15-
.CodeMirror-activeline-background {
16-
background-color: var(--cm-active-line);
17-
}
1815
.CodeMirror-cursor {
1916
border-color: var(--cm-cursor);
2017
}
@@ -118,6 +115,7 @@
118115
color: var(--sf-variable-ink);
119116
}
120117
.cm-s-default .cm-warning {
118+
background-color: var(--sf-warning-surface);
121119
text-decoration: underline var(--sf-warning-ink);
122120
text-underline-position: under;
123121
}
@@ -166,7 +164,7 @@
166164
font-size: 140%;
167165
}
168166
.cm-search-widget .fa-icon:not(.fa-icon-ro):hover {
169-
fill: #000;
167+
fill: var(--ink-1);
170168
}
171169
.cm-search-widget-input input {
172170
border: 1px solid var(--cm-gutter-ink);
@@ -205,11 +203,11 @@
205203
color: var(--cm-merge-copy-ink);
206204
}
207205
.CodeMirror-merge-l-chunk {
208-
background-color: var(--cm-merge-l-chunk-surface);
206+
background-color: var(--cm-merge-chunk-surface);
209207
}
210208
.CodeMirror-merge-l-chunk-start,
211209
.CodeMirror-merge-l-chunk-end {
212-
border-color: var(--cm-merge-l-chunk-border);
210+
border-color: var(--cm-merge-chunk-border);
213211
}
214212
.CodeMirror-merge-l-deleted {
215213
background-image: none;
@@ -224,10 +222,16 @@
224222
vertical-align: top;
225223
}
226224
.CodeMirror-merge-spacer {
227-
background-color: var(--surface-0);
228-
opacity: 40%;
225+
background-color: var(--cm-merge-chunk-surface);
229226
}
230227

231228
.CodeMirror-hints {
232229
z-index: 10000;
233230
}
231+
232+
/* Must appear after other background color declarations to be sure it
233+
* overrides them
234+
* */
235+
.CodeMirror-activeline-background {
236+
background-color: var(--cm-active-line);
237+
}

‎src/css/common.css

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -115,7 +115,7 @@ button.active {
115115
}
116116
button.disabled,
117117
button[disabled] {
118-
background-color: var(--button-surface);
118+
background-color: var(--button-disabled-surface);
119119
color: var(--button-ink);
120120
fill: var(--button-ink);
121121
filter: var(--button-disabled-filter);
@@ -124,7 +124,7 @@ button[disabled] {
124124
button.preferred:not(.disabled):not([disabled]) {
125125
background-color: var(--button-preferred-surface);
126126
color: var(--button-preferred-ink);
127-
fill: var(--button-preferred-ink);
127+
fill: var(--button-preferred-ink);
128128
}
129129
button.preferred:not(.disabled):not([disabled]):hover > .hover {
130130
background-color: var(--elevation-down-surface);

‎src/css/dashboard-common.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,10 @@ a {
2525
color: var(--info2-ink);
2626
fill: var(--info2-ink);
2727
}
28+
.fa-icon.info.very-important {
29+
color: var(--info3-ink);
30+
fill: var(--info3-ink);
31+
}
2832
input[type="number"] {
2933
width: 5em;
3034
}

‎src/css/document-blocked.css

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ a {
4545
font-size: 96px;
4646
}
4747
#theURL {
48+
color: var(--ink-2);
4849
padding: 0;
4950
}
5051
#theURL > * {
@@ -54,33 +55,32 @@ a {
5455
position: relative;
5556
z-index: 10;
5657
}
57-
#theURL > p > span:last-of-type {
58+
#theURL #toggleParse {
5859
background-color: transparent;
5960
top: 100%;
6061
box-sizing: border-box;
61-
color: var(--ink-4);
62-
fill: var(--ink-4);
62+
color: var(--ink-3);
63+
fill: var(--ink-3);
6364
cursor: pointer;
6465
font-size: 1.2rem;
6566
padding: var(--default-gap-xxsmall);
6667
position: absolute;
6768
transform: translate(0, -50%);
6869
}
69-
#theURL:not(.collapsed) > p > span:last-of-type > span:first-of-type {
70+
#theURL:not(.collapsed) #toggleParse > span:first-of-type {
7071
display: none;
7172
}
72-
#theURL.collapsed > p > span:last-of-type > span:last-of-type {
73+
#theURL.collapsed #toggleParse > span:last-of-type {
7374
display: none;
7475
}
75-
body[dir="ltr"] #theURL > p > span:last-of-type {
76+
body[dir="ltr"] #toggleParse {
7677
right: 0;
7778
}
78-
body[dir="rtl"] #theURL > p > span:last-of-type {
79+
body[dir="rtl"] #toggleParse {
7980
left: 0;
8081
}
81-
#theURL > p:hover > span {
82-
color: var(--ink-1);
83-
fill: var(--ink-1);
82+
#theURL > p:hover #toggleParse {
83+
transform: translate(0, -50%) scale(1.15);
8484
}
8585
#parsed {
8686
background-color: var(--surface-1);

‎src/css/logger-ui.css

Lines changed: 16 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -225,29 +225,21 @@ body[dir="rtl"] #netInspector #filterExprPicker {
225225
}
226226
#vwRenderer .logEntry > div[data-status="1"],
227227
#netFilteringDialog > .panes > .details > div[data-status="1"] {
228-
background-color: var(--logger-blocked-surface);
228+
background-color: rgb(var(--popup-cell-block-surface-rgb) / 50%);
229229
}
230230
#vwRenderer .logEntry > div[data-status="1"][data-modifier],
231231
#netFilteringDialog > .panes > .details > div[data-status="1"][data-modifier] {
232232
background-color: var(--logger-modified-surface);
233233
}
234-
body.colorBlind #vwRenderer .logEntry > div[data-status="1"],
235-
body.colorBlind #netFilteringDialog > .panes > .details > div[data-status="1"] {
236-
background-color: rgba(0, 19, 110, 0.1);
237-
}
238234
#vwRenderer .logEntry > div[data-status="3"] {
239235
background-color: rgba(108, 108, 108, 0.1);
240236
}
241-
body.colorBlind #vwRenderer .logEntry > div[data-status="3"] {
237+
:root.colorBlind #vwRenderer .logEntry > div[data-status="3"] {
242238
background-color: rgba(96, 96, 96, 0.1);
243239
}
244240
#vwRenderer .logEntry > div[data-status="2"],
245241
#netFilteringDialog > .panes > .details > div[data-status="2"] {
246-
background-color: var(--logger-allowed-surface);
247-
}
248-
body.colorBlind #vwRenderer .logEntry > div[data-status="2"],
249-
body.colorBlind #netFilteringDialog > .panes > .details > div[data-status="2"] {
250-
background-color: rgba(255, 194, 57, 0.1)
242+
background-color: rgb(var(--popup-cell-allow-surface-rgb) / 50%);
251243
}
252244
#vwRenderer .logEntry > div[data-tabid="-1"] {
253245
text-shadow: 0 0.2em 0.4em #aaa;
@@ -256,8 +248,8 @@ body.colorBlind #netFilteringDialog > .panes > .details > div[data-status="2"] {
256248
#vwRenderer .logEntry > div.redirect {
257249
background-color: var(--logger-redirected-surface);
258250
}
259-
body.colorBlind #vwRenderer .logEntry > div.extendedRealm,
260-
body.colorBlind #vwRenderer .logEntry > div.redirect {
251+
:root.colorBlind #vwRenderer .logEntry > div.extendedRealm,
252+
:root.colorBlind #vwRenderer .logEntry > div.redirect {
261253
background-color: rgba(0, 19, 110, 0.1);
262254
}
263255
#vwRenderer .logEntry > div[data-aliasid] {
@@ -376,29 +368,21 @@ body[dir="rtl"] #vwRenderer .logEntry > div > span:first-child {
376368
}
377369
#vwRenderer .logEntry > div[data-status="1"] > span:nth-of-type(7) b,
378370
#netFilteringDialog > .panes > .details > div[data-status="1"] b {
379-
background-color: var(--logger-blocked-em-surface);
371+
background-color: rgb(var(--popup-cell-block-surface-rgb) / 100%);
380372
}
381373
#vwRenderer .logEntry > div[data-status="1"][data-modifier] > span:nth-of-type(7) b,
382374
#netFilteringDialog > .panes > .details > div[data-status="1"][data-modifier] b {
383375
background-color: var(--logger-modified-em-surface);
384376
}
385-
body.colorBlind #vwRenderer .logEntry > div[data-status="1"] > span:nth-of-type(7) b,
386-
body.colorBlind #netFilteringDialog > .panes > .details > div[data-status="1"] b {
387-
background-color: rgba(0, 19, 110, 0.2);
388-
}
389377
#vwRenderer .logEntry > div[data-status="3"] > span:nth-of-type(7) b {
390378
background-color: rgba(108, 108, 108, 0.2);
391379
}
392-
body.colorBlind #vwRenderer .logEntry > div[data-status="3"] > span:nth-of-type(7) b {
380+
:root.colorBlind #vwRenderer .logEntry > div[data-status="3"] > span:nth-of-type(7) b {
393381
background-color: rgba(96, 96, 96, 0.2);
394382
}
395383
#vwRenderer .logEntry > div[data-status="2"] > span:nth-of-type(7) b,
396384
#netFilteringDialog > .panes > .details > div[data-status="2"] b {
397-
background-color: var(--logger-allowed-em-surface);
398-
}
399-
body.colorBlind #vwRenderer .logEntry > div[data-status="2"] > span:nth-of-type(7) b,
400-
body.colorBlind #netFilteringDialog > .panes > .details > div[data-status="2"] b {
401-
background-color: rgba(255, 194, 57, 0.2);
385+
background-color: rgb(var(--popup-cell-allow-surface-rgb) / 100%);
402386
}
403387
#vwRenderer .logEntry > div > span:nth-of-type(7) a {
404388
background-color: dimgray;
@@ -759,35 +743,35 @@ body.dirty #netFilteringDialog > div.panes > .dynamic > .toolbar #saveRules {
759743
#netFilteringDialog > div.panes > .dynamic .entry > .action.allow {
760744
background-color: rgba(0, 160, 0, 0.3);
761745
}
762-
body.colorBlind #netFilteringDialog > div.panes > .dynamic .entry > .action.allow {
746+
:root.colorBlind #netFilteringDialog > div.panes > .dynamic .entry > .action.allow {
763747
background-color: rgba(255, 194, 57, 0.4);
764748
}
765749
#netFilteringDialog > div.panes > .dynamic .entry > .action.noop {
766750
background-color: rgba(108, 108, 108, 0.3);
767751
}
768-
body.colorBlind #netFilteringDialog > div.panes > .dynamic .entry > .action.noop {
752+
:root.colorBlind #netFilteringDialog > div.panes > .dynamic .entry > .action.noop {
769753
background-color: rgba(96, 96, 96, 0.4);
770754
}
771755
#netFilteringDialog > div.panes > .dynamic .entry > .action.block {
772756
background-color: rgba(192, 0, 0, 0.3);
773757
}
774-
body.colorBlind #netFilteringDialog > div.panes > .dynamic .entry > .action.block {
758+
:root.colorBlind #netFilteringDialog > div.panes > .dynamic .entry > .action.block {
775759
background-color: rgba(0, 19, 110, 0.4);
776760
}
777761
#netFilteringDialog > div.panes > .dynamic .entry > .action.own.allow {
778762
background-color: rgba(0, 160, 0, 1);
779763
}
780-
body.colorBlind #netFilteringDialog > div.panes > .dynamic .entry > .action.own.allow {
764+
:root.colorBlind #netFilteringDialog > div.panes > .dynamic .entry > .action.own.allow {
781765
background-color: rgba(255, 194, 57, 1);
782766
}
783767
#netFilteringDialog > div.panes > .dynamic .entry > .action.own.noop,
784-
body.colorBlind #netFilteringDialog > div.panes > .dynamic .entry > .action.own.noop {
768+
:root.colorBlind #netFilteringDialog > div.panes > .dynamic .entry > .action.own.noop {
785769
background-color: rgba(108, 108, 108, 1);
786770
}
787771
#netFilteringDialog > div.panes > .dynamic .entry > .action.own.block {
788772
background-color: rgba(192, 0, 0, 1);
789773
}
790-
body.colorBlind #netFilteringDialog > div.panes > .dynamic .entry > .action.own.block {
774+
:root.colorBlind #netFilteringDialog > div.panes > .dynamic .entry > .action.own.block {
791775
background-color: rgba(0, 19, 110, 1);
792776
}
793777
#netFilteringDialog > div.panes > .dynamic .entry > .action:not(.own):hover > span {
@@ -800,7 +784,7 @@ body.colorBlind #netFilteringDialog > div.panes > .dynamic .entry > .action.own.
800784
#netFilteringDialog > div.panes > .dynamic .entry > .action > .allow {
801785
background-color: rgb(0, 160, 0);
802786
}
803-
body.colorBlind #netFilteringDialog > div.panes > .dynamic .entry > .action > .allow {
787+
:root.colorBlind #netFilteringDialog > div.panes > .dynamic .entry > .action > .allow {
804788
background-color: rgb(255, 194, 57);
805789
}
806790
#netFilteringDialog > div.panes > .dynamic .entry > .action > .noop {
@@ -809,7 +793,7 @@ body.colorBlind #netFilteringDialog > div.panes > .dynamic .entry > .action > .
809793
#netFilteringDialog > div.panes > .dynamic .entry > .action > .block {
810794
background-color: rgb(192, 0, 0);
811795
}
812-
body.colorBlind #netFilteringDialog > div.panes > .dynamic .entry > .action > .block {
796+
:root.colorBlind #netFilteringDialog > div.panes > .dynamic .entry > .action > .block {
813797
background-color: rgb(0, 19, 110);
814798
}
815799
#netFilteringDialog > div.panes > .dynamic .entry > .url {

0 commit comments

Comments
 (0)