Skip to content

Commit b5213c3

Browse files
fsbraunfsbraun
authored
Dark mode support for django CMS 3.11/django admin (since version 3.1) (#1315)
1 parent dc6afa0 commit b5213c3

File tree

10 files changed

+135
-58
lines changed

10 files changed

+135
-58
lines changed

‎filer/private/sass/components/_base.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ body {
3737
font-size: $font-size-small;
3838
color: $gray-light !important;
3939
padding: 10px 15px;
40-
background: #fff;
40+
background: $white;
4141
span {
4242
// make sure that paginator has correct font size and color #666
4343
font-size: $font-size-small;
@@ -88,7 +88,7 @@ body {
8888
display: none;
8989
}
9090
#content-main {
91-
background-color: white;
91+
background-color: $white;
9292
}
9393
}
9494

@@ -137,5 +137,5 @@ body {
137137
margin: 0 0 2px !important;
138138
padding: 15px 20px;
139139
box-shadow: 0 0 10px -2px rgba(black, 0.2);
140-
background-color: white;
140+
background-color: $white;
141141
}

‎filer/private/sass/components/_drag-and-drop.scss‎

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,8 @@ form .form-row {
2626
left: 0;
2727
}
2828
&.dz-drag-hover {
29-
background-color: $color-primary-light;
29+
background-color: $color-primary;
30+
filter: brightness(1.5);
3031
border: solid 2px $color-primary !important;
3132
.z-index-fix {
3233
z-index: 1;
@@ -171,7 +172,7 @@ form .form-row {
171172
padding: 10px 20px !important;
172173
cursor: pointer;
173174
.fa {
174-
color: white;
175+
color: $white;
175176
font-size: 17px;
176177
margin: 0 10px 0 0 !important;
177178
vertical-align: middle;
@@ -181,27 +182,27 @@ form .form-row {
181182
}
182183
.choose-file,
183184
.edit-file {
184-
color: white;
185+
color: $white;
185186
margin: 0;
186187
}
187188
.edit-file {
188189
display: none;
189190
}
190191
&.related-lookup-change {
191-
@include button-variant($btn-default-color, white, $btn-default-border, true);
192+
@include button-variant($btn-default-color, $btn-default-bgcolor, $btn-default-border, true);
192193
float: right !important;
193194
padding: 5px 0 !important;
194195
width: 36px !important;
195196
height: 36px !important;
196197
&:focus {
197-
background-color: white !important;
198+
background-color: $white !important;
198199
}
199200
span {
200201
text-align: center;
201202
line-height: 24px;
202203
}
203204
.fa {
204-
color: #999;
205+
color: $btn-default-color;
205206
margin-right: 0 !important;
206207
}
207208
.choose-file {
@@ -339,7 +340,7 @@ form .form-row {
339340
min-height: 100px !important;
340341
.dz-upload {
341342
height: 5px;
342-
background-color: #0bf;
343+
background-color: $color-primary;
343344
}
344345
.dz-name {
345346
overflow: hidden;
@@ -354,12 +355,12 @@ form .form-row {
354355
width: 80px;
355356
height: 80px;
356357
margin-right: 10px;
357-
border: solid 1px #ddd;
358+
border: solid 1px $gray-lighter;
358359
border-radius: 3px;
359-
background: #fff url("../icons/file-unknown.svg");
360+
background: $white url("../icons/file-unknown.svg");
360361
background-size: cover;
361362
img {
362-
background: #fff;
363+
background: $white;
363364
&[src=""],
364365
&:not([src]) {
365366
width: 104%;
@@ -407,7 +408,7 @@ form .form-row {
407408
.filer-dropzone-progress {
408409
height: 5px;
409410
margin-top: 5px;
410-
background-color: #0bf;
411+
background-color: $color-primary;
411412
}
412413

413414
.filer-dropzone-upload-welcome .folder {

‎filer/private/sass/components/_image-info.scss‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
margin-top: 0;
1010
border: 0;
1111
border-radius: 3px;
12-
background: #fff;
12+
background: $white;
1313
box-shadow: 0 0 5px 0 rgba(black,0.2);
1414
.image-details,
1515
.actions-list {
@@ -64,7 +64,7 @@
6464
}
6565
dt {
6666
float: left;
67-
color: #808080;
67+
color: $gray-light;
6868
font-size: 13px;
6969
// required for django CMS without admin styles #673
7070
line-height: $font-size-large !important;
@@ -164,7 +164,7 @@
164164
display: inline-block;
165165
position: relative;
166166
margin-bottom: 15px;
167-
outline: 1px solid #e3e3e3;
167+
outline: 1px solid $gray-lightest;
168168
background-image: url("data:image/gif;base64,R0lGODlhCAAIAKECAOPj4/z8/P///////yH5BAEKAAIALAAAAAAIAAgAAAINhBEZh8q6DoTPSWvoKQA7");
169169
img {
170170
display: block;
@@ -183,7 +183,7 @@
183183
z-index: 1;
184184
width: 26px;
185185
height: 26px;
186-
border: solid 2px #f00;
186+
border: solid 2px $color-danger;
187187
margin: -13px;
188188
border-radius: 30px;
189189
cursor: move;

‎filer/private/sass/components/_navigator.scss‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ body {
1212
}
1313
}
1414
&.reset-hover td {
15-
background-color: white !important;
15+
background-color: $white !important;
1616
}
1717
}
1818
.drag-hover-border {
@@ -42,7 +42,7 @@ body {
4242
}
4343
tbody tr.selected {
4444
.action-button span {
45-
color: $gray-darker !important;
45+
color: $gray-darkest !important;
4646
}
4747
}
4848
.unfiled td {
@@ -116,8 +116,8 @@ body {
116116
box-sizing: border-box !important;
117117
a {
118118
&.icon {
119-
color: $gray-darker !important;
120-
background-color: white !important;
119+
color: $gray-darkest !important;
120+
background-color: $white !important;
121121
}
122122
color: $color-primary !important;
123123
}
@@ -228,7 +228,7 @@ body {
228228
bottom: -11px;
229229
overflow: hidden;
230230
width: 1px;
231-
background-color: #ccc;
231+
background-color: $gray-lighter;
232232
}
233233
}
234234
}
@@ -485,7 +485,7 @@ body {
485485
}
486486
}
487487
a:hover {
488-
color: white !important;
488+
color: $white !important;
489489
background: $color-primary !important;
490490
}
491491
}
@@ -533,7 +533,7 @@ body {
533533
list-style: none;
534534
font-size: 14px;
535535
text-align: left;
536-
background-color: #fff;
536+
background-color: $white;
537537
border-radius: 4px;
538538
background-clip: padding-box;
539539
&:before {
@@ -546,7 +546,7 @@ body {
546546
height: 10px;
547547
margin-left: -5px;
548548
transform: rotate(45deg);
549-
background-color: #fff;
549+
background-color: $white;
550550
}
551551
&.create-menu-dropdown:before {
552552
left: auto;
@@ -622,9 +622,9 @@ body {
622622
> a {
623623
color: $color-primary;
624624
padding: 12px 20px 3px !important;
625-
border-bottom: solid 1px #e1e1e1;
625+
border-bottom: solid 1px $gray-lightest;
626626
&:hover {
627-
color: white !important;
627+
color: $white !important;
628628
background: $color-primary !important;
629629
}
630630
}

‎filer/private/sass/components/_tooltip.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
height: 9px;
2828
margin-left: -5px;
2929
transform: rotate(45deg);
30-
background-color: #fff;
30+
background-color: $white;
3131
}
3232
}
3333

‎filer/private/sass/libs/_dropzone.scss‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -84,8 +84,8 @@
8484
}
8585
.filer-dropzone .dz-preview.dz-file-preview .dz-image {
8686
border-radius: 20px;
87-
background: #999;
88-
background: linear-gradient(to bottom, #eee, #ddd);
87+
background: $gray-light;
88+
background: linear-gradient(to bottom, $gray-lightest, $gray-lighter);
8989
}
9090
.filer-dropzone .dz-preview.dz-file-preview .dz-details {
9191
opacity: 1;
@@ -221,8 +221,8 @@
221221
bottom: 0;
222222
left: 0;
223223
width: 0;
224-
background: #333;
225-
background: linear-gradient(to bottom, #666, #444);
224+
background: $gray-darkest;
225+
background: linear-gradient(to bottom, $gray, $gray-darkest);
226226
transition: width 300ms ease-in-out;
227227
}
228228
.filer-dropzone .dz-preview.dz-error .dz-error-message {
@@ -239,7 +239,7 @@
239239
top: 130px;
240240
left: -10px;
241241
z-index: 1000;
242-
color: white;
242+
color: $white;
243243
font-size: 13px;
244244
width: 140px;
245245
padding: 0.5em 1.2em;

‎filer/private/sass/mixins/_custom.scss‎

Lines changed: 77 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
@return true;
2121
}
2222
}
23-
@mixin button-variant($color, $background, $border, $important: false) {
23+
/* @mixin button-variant($color, $background, $border, $important: false) {
2424
background-image: none important($important);
2525
margin-bottom: 0; // For input.btn
2626
padding: 6px 20px important($important);
@@ -78,4 +78,80 @@
7878
}
7979
}
8080
}
81+
}*/
82+
83+
@mixin button-variant($color, $background, $border, $important: false) {
84+
background-image: none important($important);
85+
margin-bottom: 0; // For input.btn
86+
border-radius: $btn-border-radius-base important($important);
87+
color: $color important($important);
88+
background-color: $background important($important);
89+
border: 1px solid $border important($important);
90+
background-clip: padding-box;
91+
-webkit-appearance: none;
92+
&:focus,
93+
&.focus,
94+
&:hover {
95+
color: $color important($important);
96+
@if $background == $white {
97+
background-color: $gray-lightest important($important);
98+
border-color: $border important($important);
99+
} @else {
100+
background-color: $background important($important);
101+
border-color: $border important($important);
102+
filter: opacity(0.7) important($important);
103+
// Strange: removing opacity(1.) or correcting it makes item transparent
104+
}
105+
text-decoration: none important($important);
106+
}
107+
&:active,
108+
&.cms-btn-active {
109+
color: $color important($important);
110+
background-color: $background important($important);
111+
border-color: $border important($important);
112+
filter: brightness(var(--active-brightness)) opacity(1) important($important);
113+
// Strange: removing opacity(1.) or correcting it makes item transparent
114+
box-shadow: $btn-active-shadow important($important);
115+
116+
&:hover,
117+
&:focus,
118+
&.focus {
119+
color: $color important($important);
120+
background-color: $background important($important);
121+
border-color: $border important($important);
122+
filter: brightness(calc(var(--focus-brightness) * var(--active-brightness))) opacity(1) important($important);
123+
} // Strange: removing opacity(1.) or correcting it makes item transparent
124+
}
125+
&:active,
126+
&.cms-btn-active {
127+
background-image: none important($important);
128+
}
129+
&.cms-btn-disabled,
130+
&[disabled] {
131+
&,
132+
&:hover,
133+
&:focus,
134+
&.focus,
135+
&:active,
136+
&.cms-btn-active { // TODO: FABR
137+
background-color: $background important($important);
138+
border-color: $border important($important);
139+
@if $color == $gray {
140+
color: $gray-lighter important(1);
141+
} @else {
142+
color: $color important(1);
143+
filter: brightness(0.6) opacity(1); // Strange: removing opacity(1.) or correcting it makes item transparent
144+
}
145+
cursor: not-allowed;
146+
box-shadow: none important($important);
147+
&:before {
148+
@if $color == $gray {
149+
color: $gray-lighter important(1);
150+
} @else {
151+
color: $color important(1);
152+
filter: brightness(0.6) opacity(1); // Strange: removing opacity(1.) or correcting it makes item transparent
153+
}
154+
}
155+
}
156+
}
81157
}

0 commit comments

Comments
 (0)