_dark.scss 7.32 KB
Newer Older
1
2
/* purgecss start ignore */

Eliot Berriot's avatar
Eliot Berriot committed
3
4
5
6
7
8
9
10
11
12
$background-color: rgb(43, 58, 66);
$button-hover-color: rgb(33, 48, 56);
$light-background-color: rgb(51, 71, 82);
$input-background-color: rgb(189, 211, 222);
$loading-background-color: rgba(43, 58, 66, 0.9);
$text-color: rgb(223, 235, 240);
$discrete-text-color: rgba(223, 235, 240, 0.904);
$border-color: rgb(63, 88, 102);
$light-shadow-color: rgba(223, 235, 240, 0.15);
$shadow-color: rgba(63, 102, 97, 0.95);
13
14
$box-shadow: 0px 1px 3px 0px rgba(63, 88, 102, 0.95),
  0px 0px 0px 1px rgba(63, 88, 102, 0.98);
Eliot Berriot's avatar
Eliot Berriot committed
15
16
17
18
19
$link-color: rgb(255, 144, 0);

.theme-dark {
  background-color: $background-color;
  .ui.labeled.input {
20
21
    input,
    .label {
Eliot Berriot's avatar
Eliot Berriot committed
22
23
24
25
26
27
28
      background-color: $input-background-color;
      &::placeholder {
        color: $light-background-color;
      }
    }
  }
  .ui.statistics .statistic {
29
30
    > .label,
    > .value {
Eliot Berriot's avatar
Eliot Berriot committed
31
32
33
      color: $text-color;
    }
  }
34
  .main.with-background, .opaque {
35
36
    background-color: $background-color;
  }
37
38
  .ui.link.list.list .active.item,
  .ui.link.list.list .active.item a:not(.ui) {
Eliot Berriot's avatar
Eliot Berriot committed
39
40
    color: inherit;
  }
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
  .ui.form textarea,
  .ui.form select,
  .ui.selection.dropdown,
  .ui.dropdown.selected,
  .ui.dropdown .menu .selected.item,
  .ui.form input:not([type]),
  .ui.form input[type="date"],
  .ui.form input[type="datetime-local"],
  .ui.form input[type="email"],
  .ui.form input[type="number"],
  .ui.form input[type="password"],
  .ui.form input[type="search"],
  .ui.form input[type="tel"],
  .ui.form input[type="time"],
  .ui.form input[type="text"],
  .ui.form input[type="file"],
  .ui.form input[type="url"] {
Eliot Berriot's avatar
Eliot Berriot committed
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
    background-color: $input-background-color;
    &::placeholder {
      color: $light-background-color;
    }
  }
  .ui.dropdown .menu .item:hover {
    background-color: $light-background-color;
    color: $text-color;
  }
  .main.pusher > .ui.secondary.menu {
    background-color: $background-color;
    box-shadow: inset 0px -2px 0px 0px $light-background-color;
    .ui.item {
      color: $text-color;
      &.active {
        box-shadow: inset 0px -2px 0px 0px $shadow-color;
      }
    }
  }
  .ui.modal {
78
79
80
    > .header,
    > .content,
    > .actions {
Eliot Berriot's avatar
Eliot Berriot committed
81
82
83
84
85
86
87
88
89
90
      background-color: $background-color;
    }
    > .header {
      border-bottom: 1px solid $border-color;
    }

    > .actions {
      border-top: 1px solid $border-color;
    }
  }
91
92
93
94
  main,
  .main,
  footer,
  .modal {
Eliot Berriot's avatar
Eliot Berriot committed
95
96
97
98
99
100
    .ui.menu {
      background-color: $light-background-color;
      .item {
        color: $text-color;
      }
    }
101
102
103
    .ui.secondary.menu .dropdown.item:hover,
    .ui.secondary.menu .link.item:hover,
    .ui.secondary.menu a.item:hover {
Eliot Berriot's avatar
Eliot Berriot committed
104
105
106
      background: $background-color;
      color: $text-color;
    }
107
108
109
    .header,
    .ui.form .field > label,
    .sub.header {
Eliot Berriot's avatar
Eliot Berriot committed
110
111
112
113
114
      color: $text-color;
    }
    .ui.attached.header {
      background-color: transparent;
    }
115
116
    .ui.toggle.checkbox input:checked ~ .box,
    .ui.toggle.checkbox input:checked ~ label {
Eliot Berriot's avatar
Eliot Berriot committed
117
118
      color: $text-color !important;
    }
119
120
    .ui.toggle.checkbox .box::before,
    .ui.toggle.checkbox label::before {
Eliot Berriot's avatar
Eliot Berriot committed
121
122
123
124
125
126
127
128
      background-color: $light-background-color;
    }
    a:not(.ui):not(.discrete) {
      color: $link-color;
    }
    .ui.segment:not(.basic) {
      background-color: $light-background-color;
    }
129
130
131
    .link {
      color: $link-color;
    }
132
133
134
135
136
137
    .ui.list,
    .ui.dropdown {
      .item,
      div.item,
      a.item,
      .button.item {
Eliot Berriot's avatar
Eliot Berriot committed
138
139
140
141
142
143
144
        background-color: $background-color;
        color: $discrete-text-color;
      }
      .selected.item:not(:hover) {
        color: $background-color;
      }
    }
145
146
147
    .segment .ui.list .item {
      background-color: transparent;
    }
Eliot Berriot's avatar
Eliot Berriot committed
148
149
150
151
152
153
154
155
    .ui.divided.items > .item:not(:first-child) {
      border-top: 1px solid $border-color;
    }
    .ui.items {
      .extra {
        color: $discrete-text-color;
      }
    }
156
157
    label,
    .toggle label {
Eliot Berriot's avatar
Eliot Berriot committed
158
159
      color: $text-color !important;
    }
160
161
162
    &,
    .main.pusher,
    .ui.vertical.segment {
Eliot Berriot's avatar
Eliot Berriot committed
163
164
165
166
167
168
169
170
      color: $text-color;
      background-color: $background-color;
    }

    .discrete {
      color: $discrete-text-color;
    }

171
172
    .ui.table thead th,
    .ui.table {
Eliot Berriot's avatar
Eliot Berriot committed
173
174
175
176
177
178
      color: $text-color;
    }
    .ui.divider:not(.vertical):not(.horizontal) {
      border-top: 1px solid $border-color;
      border-bottom: 1px solid $border-color;
    }
179
180
    .ui.cards > .card,
    .ui.card {
Eliot Berriot's avatar
Eliot Berriot committed
181
182
      color: $text-color;
      background-color: $background-color;
183
184
185
186
187
188
      &:not(.flat) {
        box-shadow: $box-shadow;
      }
      .content,
      .header,
      .description {
Eliot Berriot's avatar
Eliot Berriot committed
189
190
        color: $text-color;
      }
191
192
      .extra,
      .meta {
Eliot Berriot's avatar
Eliot Berriot committed
193
194
195
196
197
198
199
200
201
202
        color: $discrete-text-color;
      }
    }
    .playlist.card {
      .attached.button {
        background-color: $light-background-color;
      }
    }

    // buttons
203
204
205
206
207
    [class="ui button ui button"],
    [class="ui button"],
    [class="ui icon button"],
    [class="ui fluid button"],
    [class="ui cancel button"] {
Eliot Berriot's avatar
Eliot Berriot committed
208
209
210
211
212
213
      background-color: $light-background-color;
      color: $text-color;
      &:hover {
        background-color: $button-hover-color;
      }
    }
214
215
    .ui.buttons > .ui.button:not(.basic):not(.inverted),
    .ui.buttons:not(.basic):not(.inverted) > .button {
Eliot Berriot's avatar
Eliot Berriot committed
216
217
      box-shadow: 0px 0px 0px 1px $light-shadow-color inset;
    }
218
219
220
    .ui.basic.buttons:not(:hover):not(.green):not(.orange):not(.yellow):not(.red)
      .button,
    .ui.basic.button {
Eliot Berriot's avatar
Eliot Berriot committed
221
222
223
224
225
      box-shadow: 0px 0px 0px 1px $text-color inset;
      &:not(:hover):not(.green):not(.orange):not(.yellow):not(.red) {
        color: $text-color !important;
      }
    }
226
227
    .ui.basic.buttons .button,
    .ui.basic.button {
Eliot Berriot's avatar
Eliot Berriot committed
228
229
230
231
      &:hover {
        color: $text-color !important;
      }
    }
232
233
234
235
236
    .ui.basic.buttons:not(.green):not(.orange):not(.yellow):not(.red)
      .button:hover,
    .ui.basic.button:not(.green):not(.orange):not(.yellow):not(.red):hover,
    .ui.basic.button:not(.green):not(.orange):not(.yellow):not(.red):active,
    .ui.basic.button:not(.green):not(.orange):not(.yellow):not(.red):focus {
Eliot Berriot's avatar
Eliot Berriot committed
237
238
239
240
241
242
243
244
245
246
      color: $background-color !important;
    }
    // loading /dimmers
    .ui.loading.form::before {
      background-color: $loading-background-color;
    }
    .ui.inverted.dimmer {
      background-color: $loading-background-color;
    }
    // table
247
248
    .ui.basic.table tbody tr,
    .ui.table tr td {
Eliot Berriot's avatar
Eliot Berriot committed
249
250
251
252
253
254
255
      border-bottom: 1px solid $border-color;
    }
    .ui.table thead th {
      border-bottom: 1px solid $border-color;
    }
    .ui.table {
      &:not(.basic) {
256
257
        &,
        thead th {
Eliot Berriot's avatar
Eliot Berriot committed
258
259
260
261
262
          background-color: $light-background-color;
        }
      }
    }
  }
263
264
265
  .ui.list > .item .description {
    color: $text-color;
  }
266
  .ui.link.list.list a.item:hover,
267
268
  .ui.link.list.list .item a:not(.ui):not(.button):hover, .ui.list > .item a.header {
    color: $link-color !important;
Eliot Berriot's avatar
Eliot Berriot committed
269
270
271
272
273
274
275
276
277
278
279
280
  }
  [data-tooltip]::after {
    background-color: $light-background-color;
    color: $text-color;
  }
  .ui.progress > .label {
    color: $text-color;
  }
  i.grey.icon {
    color: $text-color !important;
  }
  input {
281
282
    &::selection,
    &::-moz-selection {
Eliot Berriot's avatar
Eliot Berriot committed
283
284
285
286
      background: $background-color;
      color: $text-color;
    }
  }
287
288
289
290
291
292
293
294
295
296
297

  .ui.fixed-header.segment {
    background-color: $background-color;
    box-shadow: inset 0px -1px 0px 0px rgba(34, 36, 38, 0.15);
  }
  .ui.fixed-footer.segment {
    box-shadow: inset 0px 1px 0px 0px rgba(34, 36, 38, 0.15);
  }
  @include media("<desktop") {
    background-color: $background-color;
  }
Eliot Berriot's avatar
Eliot Berriot committed
298
}
299
300

/* purgecss end ignore */