Skip to content

Commit d850b5e

Browse files
jevenskijevenski
authored
Define dialog window colors using variables (#2815)
- This patch serves mainly as a clean-up for dialog window styles, with the aime of simplifying styles. - One major change is removing the old `--settings-background-color` variable. This change leaves an impact on some of the themes, which are Blue and Excel, where the settings dialog window had a different background color than other dialog windows. Some themes (Standard, Dark, DarkBetter, MaterialDesign) are unaffected because the background colors were already the same. Others (Acid and Oblivion) were slightly affected but almost unnoticeable because the previous color difference was subtle. - Besides, it also removes a few excessive detail, such as the previous different colors on the four side of borders in MaterialDesign and Oblivion theme.
1 parent 036d8a9 commit d850b5e

File tree

9 files changed

+45
-74
lines changed

9 files changed

+45
-74
lines changed

‎css/style.css‎

Lines changed: 20 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,15 @@
66
-moz-user-select: none;
77
-webkit-user-select: none;
88
}
9-
html, body {border: 0; padding: 0; cursor: default; overflow: hidden; background-color: #F5F5F5; height: 100%;}
9+
html, body {
10+
border: 0;
11+
padding: 0;
12+
cursor: default;
13+
overflow: hidden;
14+
color: var(--text-color);
15+
background-color: #F5F5F5;
16+
height: 100%;
17+
}
1018
html, body, input,select,button,textarea{font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 11px;}
1119
div, td, label, fieldset, textarea, select, input, button, dialog {
1220
box-sizing: border-box;
@@ -27,7 +35,7 @@ fieldset {
2735
padding: 0.25rem 0.5rem;
2836
}
2937
legend {
30-
color: #000000;
38+
color: var(--text-header-color);
3139
font-weight: bold;
3240
float: unset; /* prevent collision with bootstrap */
3341
width: unset; /* prevent collision with bootstrap */
@@ -86,6 +94,9 @@ span {
8694
.light-theme { color-scheme: light; }
8795
.dark-theme { color-scheme: dark; }
8896
:root {
97+
--text-color: #000000;
98+
--text-header-color: var(--text-color);
99+
89100
--menu-color: #000000;
90101
--menu-background-color: #ffffff;
91102
--menu-border-color: #d0d0d0;
@@ -99,7 +110,6 @@ span {
99110
--menu-item-active-icon: url(data:image/gif;base64,R0lGODlhBwAHAPABAAAAAACMFCH5BAUAAAEALAAAAAAHAAcAAAIMjA9nwMj9wmuLIlUAADs=);
100111
--menu-item-exp-icon: url(data:image/gif;base64,R0lGODlhCAAHAPABAAAAAAAAACH5BAUAAAEALAAAAAAIAAcAAAIMRI4Blrq9HoqQJZsKADs=);
101112

102-
--settings-background-color: #fafafa;
103113
--container-bg-color: #ffffff;
104114
--container-border-color: #a0a0a0;
105115
--btn-bg-color: #F0F0F0;
@@ -141,7 +151,7 @@ category-list.hide-textoverflow panel-label::part(text) {
141151
text-overflow: ellipsis;
142152
}
143153
dialog {
144-
background-color: var(--settings-background-color);
154+
background-color: var(--dialog-bg-color);
145155
border-color: var(--menu-border-color);
146156
}
147157
form{margin:0;}
@@ -160,7 +170,7 @@ div#modalbg {left: 0px; top: 0px; z-index: 500; display: none; opacity: 0.5; bac
160170
left: 0px;
161171
top: 0px;
162172
background-color: var(--dialog-bg-color);
163-
color: #000000;
173+
color: var(--text-color);
164174
border: 2px solid var(--dialog-border-color);
165175
border-radius: 8px;
166176
outline: 0px solid transparent;
@@ -188,9 +198,12 @@ div#modalbg {left: 0px; top: 0px; z-index: 500; display: none; opacity: 0.5; bac
188198
position: sticky;
189199
top: 0;
190200
padding: 0.5rem;
201+
color: var(--text-header-color);
191202
background-color: var(--header-bg-color);
192203
border-bottom: 1px solid var(--header-border-color);
193-
border-radius: 10px 10px 0 0;
204+
border-radius: inherit;
205+
border-bottom-left-radius: 0;
206+
border-bottom-right-radius: 0;
194207
}
195208
.dlg-header > div:first-child {
196209
line-height: 2rem;
@@ -437,7 +450,6 @@ div#HDivider, div#VDivider {flex: 0 0 5px;}
437450
#stg {
438451
width: 95vw;
439452
height: 95vh;
440-
background-color: var(--settings-background-color);
441453
}
442454
#stg_c {
443455
display: flex;
@@ -508,13 +520,12 @@ div#stg .lm {
508520
.stg_con {
509521
display: none;
510522
margin-bottom: auto;
511-
background-color: var(--settings-background-color);
512523
overflow: hidden auto;
513524
}
514525
.stg_con legend {
515526
position: sticky;
516527
top: 0;
517-
background-color: var(--settings-background-color);
528+
background-color: var(--dialog-bg-color);
518529
}
519530
.ie9 .stg_con {position: static}
520531
.stg_con table {width: 100%}
@@ -688,7 +699,6 @@ span#loadimg {padding: 20px; background: transparent url(../images/ajax-loader.g
688699
}
689700
.buttons-group-row {margin: 0.25rem; gap: 0.25rem; display: flex; flex-direction: row;}
690701

691-
.ie fieldset {padding: 5px}
692702
#servertime { text-align: center }
693703
#viewrows { text-align: center; }
694704

‎plugins/rss/rss.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ div#RSSList {border: 1px solid var(--menu-border-color); background-color: var(-
2020
.lf li input.TextboxNormal { width: 85%; background-color: var(--menu-background-color) }
2121
.lf li input { border: 0; font-size: 11px; font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif; cursor: default; font-weight: bold; }
2222
div#FLTchk_buttons {padding-top: 5px; width: 260px; text-align:center}
23-
.rf {background-color: var(--settings-background-color);}
23+
.rf {background-color: var(--dialog-bg-color);}
2424
div#FLT_buttons {clear: both}
2525

2626
#chkFilterBtn {width: 50px}

‎plugins/theme/themes/Acid/style.css‎

Lines changed: 4 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
1-
html, body { background-color: #1e2124; color: #BDDBDB }
1+
html, body { background-color: #1e2124; }
22
:root {
3+
--text-color: #bddbdb;
4+
--text-header-color: #00ff00;
5+
36
--menu-color: #00FF00;
47
--menu-background-color: #1e2124;
58
--menu-border-color: #a0a0a0;
@@ -13,7 +16,6 @@ html, body { background-color: #1e2124; color: #BDDBDB }
1316
/* --menu-item-active-icon: undefined - inherit from standard theme; */
1417
--menu-item-exp-icon: url(data:image/gif;base64,R0lGODlhCAAHAMQAAAAAAP///wD4AADpAADKAAC5AAC1AACwAAChAACQAACIAAT/BCX/JTH/MU//T1X/VW3/bW//b////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAABIALAAAAAAIAAcAAAUYYCSNpAQ55fg0S8oIxFEORpIWSiohuhQCADs=);
1518

16-
--settings-background-color: #272E36;
1719
--container-bg-color: #272E36;
1820
--container-border-color: #a0a0a0;
1921
--btn-bg-color: #D7D7D7;
@@ -80,7 +82,6 @@ panel-label[selected] {
8082
div#preload {background-image: url(./images/toolbar.png); background-image: url(./images/tstatus.png); background-image: url(./images/t_bg.png); background-image: url(./images/r_bg.gif); background-image: url(./images/i_bg.gif); background-image: url(./images/asc.gif); background-image: url(./images/desc.gif); background-image: url(./images/file.gif); background-image: url(./images/dir.gif); background-image: url(./images/pnl_open.gif); background-image: url(./images/pnl_close.gif)}
8183
div#cover {background: #272E36}
8284
div#msg {background: #272E36; border-top: 1px solid #D0D0D0; border-bottom: 1px solid #D0D0D0; color: #00ff00;}
83-
.dlg-window { color: #BDDBDB }
8485

8586
div#modalbg {background-color: #181818;}
8687

@@ -111,7 +112,6 @@ div#side-panel ul li.sel {background-color: #BDDBDB; border-color: #BDDBDB; colo
111112

112113
.stable-icon {background-image: url(./images/tstatus.png); }
113114

114-
#stg { background-color: #272E36; color: #BDDBDB; border: 2px solid #909090; }
115115
div#stg .lm { background-color: #272E36; border: 1px solid #D0D0D0; }
116116

117117
.lm li div > div {
@@ -126,14 +126,8 @@ div#stg .lm { background-color: #272E36; border: 1px solid #D0D0D0; }
126126
.lm li div.toggle { background: transparent url(./images/exp.gif) no-repeat scroll center center; }
127127
.lm li a {color: #BDDBDB; }
128128
.lm li a.focus {background-color: #BDDBDB; color: #272E36;}
129-
.stg_con {background-color: #272E36}
130129

131130
input.disabled, button.disabled {background-color: #272E36; }
132-
legend {color: #00FF00; font-weight: bold}
133-
134-
#st_gl {background: #272E36; color: #BDDBDB;}
135-
#st_dl, #st_con, #st_bt, #st_que, #st_sch, #st_ao, #st_dc { color: #BDDBDB;}
136-
#st_autotools, #st_retrackers, #st_starter, #st_ratio, #st_throttle, #st_unpack, #st_scheduler {color: #BDDBDB;}
137131

138132
a { color: #00ff00; font-weight: bold;}
139133

@@ -159,8 +153,6 @@ div#gcont div.row.Header {background: #323A46;}
159153
font-weight: bold;
160154
}
161155

162-
.dlg-header {color: #00FF00;}
163-
164156
/* Dialog window icons */
165157
#stg-header {background-image: url(./images/settings.gif);}
166158
#tadd-header {background-image: url(./images/world.gif); }

‎plugins/theme/themes/Blue/style.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
html, body { background-color: #DFE8F6 }
22
:root {
3+
--text-color: #000000;
4+
--text-header-color: #15428b;
5+
36
--menu-color: #222222;
47
--menu-background-color: #F0F0F0;
58
--menu-border-color: #718BB7;
@@ -13,7 +16,6 @@ html, body { background-color: #DFE8F6 }
1316
--menu-item-active-icon: url(data:image/gif;base64,R0lGODlhBwAHAPABAAAAAACMFCH5BAUAAAEALAAAAAAHAAcAAAIMjA9nwMj9wmuLIlUAADs=);
1417
--menu-item-exp-icon: url(data:image/gif;base64,R0lGODlhDAAJAPQUACluvipxvzJ1vyxwwCt1yjp6zjiC1jmE0zyE0z2I3UeLyUGJ2VWUzlKg7FSg6Weg1WKq8Y7D9orD/JXL/0D/QAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAUAABQALAAAAAAMAAkAAAUkoEGNZEkliGkS06GSRCQtL0U40CO8RMMENYICULMNipQCkhICADs=);
1518

16-
--settings-background-color: #DFE8F6;
1719
--container-bg-color: #ffffff;
1820
--container-border-color: #99bbe8;
1921
--btn-bg-color: #F0F0F0;
@@ -96,7 +98,5 @@ input[type="text"][disabled],input[type="password"][disabled],input[type="file"]
9698
.statuscell { border-color: #99BBE8;}
9799
.sthdr { color: #15428B; }
98100

99-
.dlg-header {color: #15428B;}
100-
101101
div#stg .lm { background-color: #FAFAFA; border: 1px solid #D0D0D0; }
102102
.lm li a.focus {background-color: #D9E8FB}

‎plugins/theme/themes/Dark/style.css‎

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
html, body {background-color: #181818; color: #999999; }
22
:root {
3+
--text-color: #888888;
4+
--text-header-color: #888888;
5+
36
--menu-color: #666666;
47
--menu-background-color: #181818;
58
--menu-border-color: #333333;
@@ -13,7 +16,6 @@ html, body {background-color: #181818; color: #999999; }
1316
--menu-item-active-icon: url(data:image/gif;base64,R0lGODlhBQAFAPMIAP////n5+dXV1c/Pz8nJycbGxsDAwLS0tACMFAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAUAAAgALAAAAAAFAAUAAAQPEA1AkAC4YBwmNogBHEgEADs=);
1417
--menu-item-exp-icon: url(data:image/gif;base64,R0lGODlhCAAHAPABAP///wCMFCH5BAUAAAEALAAAAAAIAAcAAAIMRI4Blrq9HoqQJZsKADs=);
1518

16-
--settings-background-color: #181818;
1719
--container-bg-color: #181818;
1820
--container-border-color: #333333;
1921
--btn-bg-color: #999999;
@@ -132,10 +134,6 @@ div#modalbg {background-color: #181818;}
132134

133135
div#FileList, div#TrackerList, div#PeerList, div#Speed {background-color: #181818}
134136

135-
#stg { background-color: #181818; color: #888888; border: 1px solid #333333}
136-
137-
div#stg .lm {background-color: #181818; border: 1px solid #333333}
138-
139137
.lm li div > div {
140138
border-left-color: #616161;
141139
}
@@ -148,11 +146,9 @@ div#stg .lm {background-color: #181818; border: 1px solid #333333}
148146
.lm li div.toggle {background: transparent url(./images/exp.gif) no-repeat scroll center center}
149147
.lm li a {color: #888888}
150148
.lm li a.focus {background-color: #333333}
151-
.stg_con {background-color: #181818}
152149
* > fieldset {border: 1px solid #333333}
153150
input.disabled, button.disabled {background-color: #181818; color: #333333; border: 1px solid #333333}
154151
td.disabled, label.disabled, span.disabled, div.disabled {color: #333333}
155-
legend {color: #888888}
156152
select.cols {border: 1px solid #333333}
157153
div#tdetails {background-color: #181818}
158154

@@ -171,7 +167,6 @@ div#tdetails {background-color: #181818}
171167
}
172168

173169
div#dlgProps textarea#prop-trackers {background: #181818; border: 1px solid #333333}
174-
.dlg-window {color: #888888;}
175170

176171
div.tab {background-color: #181818}
177172

‎plugins/theme/themes/DarkBetter/style.css‎

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
html, body {background-color: #181818; color: #999999; }
22
:root {
3+
--text-color: #888888;
4+
--text-header-color: #888888;
5+
36
--menu-color: #666666;
47
--menu-background-color: #181818;
58
--menu-border-color: #333333;
@@ -13,7 +16,6 @@ html, body {background-color: #181818; color: #999999; }
1316
--menu-item-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3e%3ccircle fill='%23FFF' cx='24' cy='24' r='19'/%3e%3c/svg%3e");
1417
--menu-item-exp-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3e%3cpath fill='%23FFF' d='M34 24L14 42V6z'/%3e%3c/svg%3e");
1518

16-
--settings-background-color: #181818;
1719
--container-bg-color: #181818;
1820
--container-border-color: #333333;
1921
--btn-bg-color: #D6D6D6;
@@ -278,10 +280,6 @@ div#modalbg {background-color: #181818}
278280

279281
div#FileList, div#TrackerList, div#PeerList, div#Speed {background-color: #181818}
280282

281-
#stg {background-color: #181818; color: #888888; border: 1px solid #333333}
282-
283-
div#stg .lm {background-color: #181818; border: 1px solid #333333}
284-
285283
.lm li div > div {
286284
border-left-color: #616161;
287285
}
@@ -294,7 +292,6 @@ div#stg .lm {background-color: #181818; border: 1px solid #333333}
294292
.lm li div.toggle {background: transparent url(./images/exp.gif) no-repeat scroll center center}
295293
.lm li a {color: #888888}
296294
.lm li a.focus {background-color: #333333}
297-
.stg_con {background-color: #181818}
298295
* > fieldset {border: 1px solid #333333}
299296
input.disabled, button.disabled {background-color: #181818; color: #333333; border: 1px solid #333333}
300297
td.disabled, label.disabled, span.disabled, div.disabled {color: #333333}
@@ -318,8 +315,6 @@ div#tadd {background-color: #181818; border: 1px solid #333333}
318315
}
319316
div#dlgProps textarea#prop-trackers {background: #181818; border: 1px solid #333333}
320317

321-
.dlg-window {color: #888888;}
322-
323318
div.tab {background-color: #181818}
324319

325320
span#loadimg {background: transparent url(./images/ajax-loader.gif) no-repeat center center; background-size: 28px}

‎plugins/theme/themes/Excel/style.css‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
html, body { background-color: #DFE8F6; scrollbar-arrow-color: #586585; scrollbar-base-color: #e3e9f0; scrollbar-track-color: #7797c1; }
22
:root {
3+
--text-color: #000000;
4+
--text-header-color: #15428b;
5+
36
--menu-color: #000000;
47
--menu-background-color: #f6f6f6;
58
--menu-border-color: #002d96;
@@ -13,7 +16,6 @@ html, body { background-color: #DFE8F6; scrollbar-arrow-color: #586585; scrollba
1316
/* --menu-item-active-icon: undefined - inherit from standard theme; */
1417
/* --menu-item-exp-icon: undefined - inherit from standard theme; */
1518

16-
--settings-background-color: #FFFFFF;
1719
--container-bg-color: #d2e0f0;
1820
--container-border-color: #9eb6ce;
1921
--btn-bg-color: #f1f1ec;
@@ -75,12 +77,8 @@ div#gcont div.row.Header {background-color: #e4edf6;}
7577
#tdcont { color: #034084 }
7678
div#tdetails { background-color: transparent }
7779

78-
.stg_con { background-color: #FFFFFF }
79-
div#stg .lm { background-color: #FAFAFA; border: 1px solid #D0D0D0; }
8080
.lm li a.focus {background-color: #D9E8FB}
8181

82-
.dlg-window { color: #000000; }
83-
.dlg-header {color: #15428B;}
8482
.tabbar { background: transparent url(./images/tabbarbg.png) repeat-x 0 0 }
8583
.tabbar li.nav-item a.nav-link {
8684
border: none;

‎plugins/theme/themes/MaterialDesign/style.css‎

Lines changed: 3 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -192,10 +192,12 @@ html,body
192192
{
193193
font-family:'Roboto' !important;
194194
background-color:#141414;
195-
color:#fff;
196195
text-shadow:0 -1px 0 #000
197196
}
198197
:root {
198+
--text-color: #ffffff;
199+
--text-header-color: #ffffff;
200+
199201
--menu-color: #757571;
200202
--menu-border-color: #333;
201203
--menu-background-color: #181818;
@@ -209,7 +211,6 @@ html,body
209211
--menu-item-active-icon: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAICAYAAAA1BOUGAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAxUlEQVQImWMUFBRkQAO6MAYzJycnqgS3oBRLyqyj//79zWRC18YcULWDgYOL4Z+MDgMTg3vefybr6P8MDAy6TK5ZlxglVBn+vHzA8O/qPgaWvwxMDMwGXgwsCgaXGGW0Gf68fsjw5+YxBub7pw2Z2X5/fcEgLOfDLKXO8P/rR4bft04wMJ3dYMf05+cpZu5/33/9+fsn8z8zK8PfN48YGM6sC2X+9n4HAwMDAwsDA8NlljvHGH/++fOf6fNrO7aPLw7DHAcAYQxFFwvnY44AAAAASUVORK5CYII=);
210212
--menu-item-exp-icon: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAKCAYAAAB4zEQNAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAmElEQVQYlWXNsQ2DMBRF0WuM6BByhcQADIFLl9SkZ6nskCYdI0DjDbwBJXJnxXEqJExO+a/0vlBKPYAXIIEvFwXwNsbQtm3kpgA+TdMwTRNa61RVVRYBkFIyDAPzPKeu61IWT3VdM44jfd+nv3j/mfHesyzL0zknyvMYY2TbNqy1IoQAQAlwHAfrurLvu7iuCKUUQAKyAPADcbArU+HIrAcAAAAASUVORK5CYII=);
211213

212-
--settings-background-color: #222;
213214
--container-bg-color: #181818;
214215
--container-border-color: #1b1b1b;
215216
--btn-bg-color: #3498DB;
@@ -653,14 +654,6 @@ disabled
653654
opacity:50%
654655
}
655656

656-
div#stg .lm
657-
{
658-
margin:5px 0 5px 5px;
659-
padding:10px 5px 0;
660-
background:none;
661-
border:none
662-
}
663-
664657
.lm li div > div {
665658
border-left-color: #AAAAAA;
666659
border-left-style: solid;
@@ -925,16 +918,6 @@ div#dlgProps textarea#prop-trackers
925918

926919
.dlg-window {
927920
box-shadow: 0 19px 38px rgba(0,0,0,0.60);
928-
color: #fff;
929-
border-top-color: #333;
930-
border-right-color: #1b1b1b;
931-
border-left-color: #1b1b1b;
932-
border-bottom-color: #000;
933-
}
934-
935-
#stg_c
936-
{
937-
font-weight:300!important
938921
}
939922

940923
#FS_main div.dlg-header
@@ -1138,4 +1121,3 @@ span.det {
11381121
.sthdr { color: #FFF; }
11391122
.stval { color: #FFF; }
11401123
.tickLabel { color: #FFF; }
1141-
.dlg-window legend { color: #FFF; }

0 commit comments

Comments
 (0)