PluginProbe
MainWP Dashboard: Self-hosted WordPress Management for Agencies / 6.2.2
MainWP Dashboard: Self-hosted WordPress Management for Agencies v6.2.2
6.2.2 6.2.1 6.2 6.1.8 6.1.7 6.1.6 6.1.5 6.1.4 6.1.3 6.1.2 6.1.1 6.1 6.0.12 6.0.11 4.6.0.1 5.0 5.0.1 5.0.2 5.0.3 5.0.3.1 5.0.3.2 5.1 5.1.1 5.2 5.2.1 All 155 releases
mainwp / assets / css / themes / mainwp-dark-theme.css

mainwp-dark-theme.css in MainWP Dashboard: Self-hosted WordPress Management for Agencies 6.2.2, at assets/css/themes/mainwp-dark-theme.css

1,123 lines 35.4 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /* Define Variables */
2
3 :root {
4
5 /* Sets color for primary button and text links. */
6 --accent-color: #7fb100;
7
8 /* Sets background color for the main navigation and top header elements. */
9 --background-color-1: #1c1d1b;
10
11 /* Sets background color for vertical menu, modal, accordion, sub-header, actions bar and segment elements. */
12 --background-color-2: #2b2b2b;
13
14 /* Sets background color for table headers, widgets, cards, modal headers and navigatoin wrapper elements. */
15 --background-color-3: #262626;
16
17 /* Sets background color for form field elements. */
18 --background-color-4: #444444;
19
20 /* Sets background color for table elements. */
21 --table-background-color: #333333;
22
23 /* Sets color for green elements. */
24 --green-color: #7fb100;
25
26 /* Sets color for yellow elements. */
27 --yellow-color: #B58105;
28
29 /* Sets color for orange elements. */
30 --orange-color: #c47335;
31
32 /* Sets color for red elements. */
33 --red-color: #a00000;
34
35 /* Sets color for blue elements. */
36 --blue-color: #276F86;
37
38 /* Sets main text color. */
39 --font-color: rgba(255, 255, 255, .9);
40
41 /* Sets text color, lighter version. */
42 --font-light-color: rgba(255, 255, 255, .7);
43
44 /* Sets button text color. */
45 --font-button-color: rgba(255, 255, 255, 1);
46
47 /* Sets section element and table borders. */
48 --border-color: rgba(255, 255, 255, .1);
49 }
50
51 /* Fix Colors */
52
53 .mainwp-ui.mainwp-custom-theme a:not(.ui.button),
54 .mainwp-ui.mainwp-custom-theme a:not(.ui.label, .uf-fmuci-button-main) {
55 color: var(--accent-color);
56 }
57
58 .mainwp-ui.mainwp-custom-theme i.green.icon:not(.inverted) {
59 color: var(--green-color) !important;
60 }
61
62 .mainwp-ui.mainwp-custom-theme .ui.green.label:not(.basic) {
63 color: var(--font-button-color) !important;
64 background-color: var(--green-color) !important;
65 }
66
67 .mainwp-ui.mainwp-custom-theme .ui.green.label.basic {
68 color: var(--green-color) !important;
69 border-color: var(--green-color) !important;
70 }
71
72 .mainwp-ui.mainwp-custom-theme i.red.icon:not(.inverted) {
73 color: var(--red-color) !important;
74 }
75
76 .mainwp-ui.mainwp-custom-theme .ui.red.label:not(.basic) {
77 color: var(--font-button-color) !important;
78 background-color: var(--red-color) !important;
79 }
80
81 .mainwp-ui.mainwp-custom-theme #mainwp-version-label {
82 background-color: var(--accent-color) !important;
83 }
84
85 .mainwp-ui.mainwp-custom-theme i.yellow.icon:not(.inverted) {
86 color: var(--yellow-color) !important;
87 }
88
89 .mainwp-ui.mainwp-custom-theme .ui.yellow.label:not(.basic) {
90 color: var(--font-button-color) !important;
91 background-color: var(--yellow-color) !important;
92 }
93
94 .mainwp-ui.mainwp-custom-theme i.blue.icon:not(.inverted) {
95 color: var(--blue-color) !important;
96 }
97
98 .mainwp-ui.mainwp-custom-theme .ui.blue.label:not(.basic) {
99 color: var(--font-button-color) !important;
100 background-color: var(--blue-color) !important;
101 }
102
103 .mainwp-ui.mainwp-custom-theme i.green.icon.inverted {
104 color: var(--font-button-color) !important;
105 background-color: var(--green-color) !important;
106 }
107
108 .mainwp-ui.mainwp-custom-theme i.red.icon.inverted {
109 color: var(--font-button-color) !important;
110 background-color: var(--red-color) !important;
111 }
112
113 .mainwp-ui.mainwp-custom-theme i.yellow.icon.inverted {
114 color: var(--font-button-color) !important;
115 background-color: var(--yellow-color) !important;
116 }
117
118 .mainwp-ui.mainwp-custom-theme i.blue.icon.inverted {
119 color: var(--font-button-color) !important;
120 background-color: var(--blue-color) !important;
121 }
122
123 .mainwp-ui.mainwp-custom-theme .ui.indeterminate.green.progress .bar::before,
124 .mainwp-ui.mainwp-custom-theme .ui.green.progress .bar,
125 .ui.progress .green.bar {
126 background-color: var(--green-color) !important;
127 }
128
129 /* Invert Segments */
130
131 body.mainwp-ui.mainwp-custom-theme.pushable>.pusher,
132 body.mainwp-ui.mainwp-custom-theme,
133 .mainwp-ui.mainwp-custom-theme #wpbody-content,
134 .mainwp-ui.mainwp-custom-theme .mainwp-content-wrap,
135 .mainwp-ui.mainwp-custom-theme .ui.segment {
136 background-color: var(--background-color-2) !important;
137 color: var(--font-color);
138 }
139
140 .mainwp-ui.mainwp-custom-theme #mainwp-top-header {
141 background: var(--background-color-1) !important;
142 color: var(--font-color) !important;
143 border: 0px solid var(--border-color) !important;
144 }
145 .mainwp-ui.mainwp-custom-theme #mainwp-top-header .ui.icon.button:not(.red, .green) {
146 background: var(--background-color-3) !important;
147 -webkit-box-shadow: inset 2px 0px 0px 1px var(--background-color-4) !important;
148 -moz-box-shadow: inset 0px 0px 0px 1px var(--background-color-4) !important;
149 box-shadow: inset 0px 0px 0px 1px var(--background-color-4) !important;
150 color: var(--grey-light-alt) !important;
151 }
152 .mainwp-ui.mainwp-custom-theme #mainwp-page-navigation-wrapper {
153 background-color: var(--background-color-3);
154 padding: 0 !important;
155 box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .1) !important;
156 border-top: 0px solid var(--border-color) !important;
157 border-bottom: 1px solid var(--border-color) !important;
158 border-left: 0px solid var(--border-color) !important;
159 border-right: 1px solid var(--border-color) !important;
160 }
161
162 .mainwp-ui.mainwp-custom-theme #mainwp-page-navigation-wrapper .menu {
163 margin-bottom: 0px !important;
164 border-top: 0px solid var(--border-color) !important;
165 border-bottom: 0px solid var(--border-color) !important;
166 border-left: 0px solid var(--border-color) !important;
167 border-right: 1px solid var(--border-color) !important;
168 color: var(--font-color);
169 background-color: var(--background-color-3);
170 }
171
172 .mainwp-ui.mainwp-custom-theme #mainwp-page-navigation-wrapper .menu .item {
173 padding: 21px;
174 color: var(--font-color);
175 }
176
177 .mainwp-ui.mainwp-custom-theme #mainwp-page-navigation-wrapper .menu .item.active,
178 .mainwp-ui.mainwp-custom-theme #mainwp-page-navigation-wrapper .menu .item:hover {
179 background-color: var(--background-color-2);
180 color: var(--accent-color);
181 }
182
183
184 .mainwp-ui.mainwp-custom-theme .mainwp-actions-bar,
185 .mainwp-ui.mainwp-custom-theme .mainwp-sub-header {
186 border-bottom: 1px solid var(--border-color) !important;
187 background: var(--background-color-2);
188 }
189
190 .mainwp-ui.mainwp-custom-theme .mainwp-side-content,
191 .mainwp-ui.mainwp-custom-theme .mainwp-main-content {
192 border-color: var(--border-color) !important;
193 }
194
195 .mainwp-ui.mainwp-custom-theme #mainwp-sites-menu-sidebar .mainwp-site-menu-item .title {
196 color: var(--font-color) !important;
197 }
198
199 /* Flyout */
200 .mainwp-ui.mainwp-custom-theme .ui.flyout {
201 background-color: var(--background-color-3) !important;
202 }
203 .mainwp-ui.mainwp-custom-theme .ui.flyout .content,
204 .mainwp-ui.mainwp-custom-theme .ui.flyout .actions,
205 .mainwp-ui.mainwp-custom-theme .ui.flyout .header {
206 background-color: var(--background-color-3) !important;
207 }
208
209 /* Headers */
210
211 .mainwp-ui.mainwp-custom-theme h2,
212 .mainwp-ui.mainwp-custom-theme h2.header {
213 color: var(--font-color);
214 }
215
216 .mainwp-ui.mainwp-custom-theme h3,
217 .mainwp-ui.mainwp-custom-theme h3.header {
218 color: var(--font-color);
219 }
220
221 .mainwp-ui.mainwp-custom-theme h4,
222 .mainwp-ui.mainwp-custom-theme h4.header {
223 color: var(--font-color);
224 }
225
226 /* Invert Side Bar */
227
228 .mainwp-ui.mainwp-custom-theme .mainwp-select-sites-header .ui.menu {
229 border-color: var(--border-color);
230 }
231
232 .mainwp-ui.mainwp-custom-theme .mainwp-select-sites-header .ui.menu a.item {
233 color: var(--font-color);
234 }
235
236 .mainwp-ui.mainwp-custom-theme .mainwp-select-sites-header .ui.menu a.item.active {
237 color: var(--accent-color);
238 }
239
240 .mainwp-ui.mainwp-custom-theme #mainwp-select-sites .ui.divided.list .item {
241 border-color: var(--border-color) !important;
242 }
243
244 .mainwp-ui.mainwp-custom-theme .ui.list .item {
245 color: var(--font-color) !important;
246 border-color: var(--border-color) !important;
247 }
248
249 .mainwp-ui.mainwp-custom-theme .ui.list .item .header,
250 .mainwp-ui.mainwp-custom-theme .ui.list .item .description {
251 color: var(--font-color) !important;
252 }
253
254 .mainwp-ui.mainwp-custom-theme .ui.selection.list .item {
255 color: var(--font-color) !important;
256 border-color: var(--border-color) !important;
257 }
258
259 .mainwp-ui.mainwp-custom-theme #mainwp-select-sites .ui.divided.list .item label {
260 color: var(--font-color) !important;
261 }
262
263 .mainwp-ui.mainwp-custom-theme .mainwp-select-sites-select-all-actions {
264 background-color: var(--border-color);
265 border-color: var(--border-color);
266 }
267
268 .mainwp-ui.mainwp-custom-theme .mainwp-side-content .title {
269 color: var(--font-color) !important;
270 }
271
272 .mainwp-ui.mainwp-custom-theme .mainwp-sidebar-options {
273 background-color: var(--background-color-2);
274 }
275
276 /* Invert Widgets */
277
278 .mainwp-ui.mainwp-custom-theme .ui.segment.mainwp-widget {
279 background-color: var(--background-color-3);
280 border-color: var(--border-color) !important;
281 color: var(--font-color);
282 }
283
284 .mainwp-ui.mainwp-custom-theme .ui.segment.mainwp-widget .ui.header,
285 .mainwp-ui.mainwp-custom-theme .ui.segment.mainwp-widget .ui.header .sub.header,
286 .mainwp-ui.mainwp-custom-theme .ui.segment.mainwp-widget .statistic .label,
287 .mainwp-ui.mainwp-custom-theme .ui.segment.mainwp-widget .statistic .value {
288 color: var(--font-color);
289 }
290
291 .mainwp-ui.mainwp-custom-theme .ui.segment.mainwp-widget .ui.horizontal.divider {
292 border-color: var(--border-color);
293 color: var(--font-color);
294 }
295
296 .mainwp-ui.mainwp-custom-theme .ui.segment.mainwp-widget .ui.list .item .content .header,
297 .mainwp-ui.mainwp-custom-theme .ui.segment.mainwp-widget .ui.list .item .content .description,
298 .mainwp-ui.mainwp-custom-theme .ui.segment.mainwp-widget .ui.list .item {
299 border-color: var(--border-color);
300 color: var(--font-color);
301 }
302
303 .mainwp-ui.mainwp-custom-theme .mainwp-no-results-placeholder {
304 opacity: .2;
305 }
306
307 /* Invert Tables */
308
309 .mainwp-ui.mainwp-custom-theme .ui.table,
310 .mainwp-ui.mainwp-custom-theme .ui.inverted.table {
311 background: var(--table-background-color);
312 color: var(--font-color);
313 }
314
315 .mainwp-ui.mainwp-custom-theme .ui.table tr th,
316 .mainwp-ui.mainwp-custom-theme .ui.inverted.table tr th {
317 background-color: var(--background-color-3);
318 border-color: var(--border-color);
319 color: var(--font-color);
320 }
321
322 .mainwp-ui.mainwp-custom-theme table tr th.settinglabel {
323 border-color: var(--border-color);
324 color: var(--font-color);
325 }
326
327 .mainwp-ui.mainwp-custom-theme .ui.definition.table>thead>tr>th:first-child {
328 background-color: var(--background-color-3);
329 border-color: var(--border-color);
330 color: var(--font-color);
331 box-shadow: none !important;
332 }
333
334 .mainwp-ui.mainwp-custom-theme .ui.table tr td {
335 border-color: var(--border-color);
336 }
337
338 .mainwp-ui table.dataTable tbody tr>.dtfc-fixed-left,
339 .mainwp-ui table.dataTable tbody tr>.dtfc-fixed-right {
340 background-color: var(--table-background-color) !important;
341 }
342
343 .mainwp-ui.mainwp-custom-theme .ui.definition.table>tbody>tr>td:first-child:not(.ignored) {
344 color: var(--font-color);
345 }
346
347 .mainwp-ui.mainwp-custom-theme .ui.table tr.hoverli {
348 background-color: var(--background-color-4) !important;
349 }
350
351 .mainwp-ui.mainwp-custom-theme .ui.table tr.active {
352 background-color: var(--background-color-4) !important;
353 }
354
355 .mainwp-ui.mainwp-custom-theme .ui.table tr.active td {
356 color: var(--font-color) !important;
357 }
358
359
360 .mainwp-ui.mainwp-custom-theme .ui.selection.table tr:hover td,
361 .mainwp-ui.mainwp-custom-theme .ui.selectable.table tr:hover td {
362 color: var(--font-light-color);
363 }
364
365 .mainwp-ui.mainwp-custom-theme .alternate,
366 .mainwp-ui.mainwp-custom-theme .striped>tbody> :nth-child(2n+1) {
367 background-color: var(--background-color-3);
368 }
369
370 .mainwp-ui.mainwp-custom-theme #mainwp-manage-themes-table tbody tr td:first-child,
371 .mainwp-ui.mainwp-custom-theme #mainwp-manage-plugins-table tbody tr td:first-child {
372 background-color: var(--background-color-3);
373 }
374
375 .mainwp-ui.mainwp-custom-theme .ui.table tbody tr.positive,
376 .mainwp-ui.mainwp-custom-theme #mainwp-manage-themes-table tbody tr td.positive,
377 .mainwp-ui.mainwp-custom-theme #mainwp-manage-plugins-table tbody tr td.positive {
378 background-color: rgba(127, 177, 0, .1) !important;
379 color: var(--font-color) !important;
380 }
381
382 .mainwp-ui.mainwp-custom-theme .ui.table tbody tr.error,
383 .mainwp-ui.mainwp-custom-theme .ui.table tbody tr.negative,
384 .mainwp-ui.mainwp-custom-theme #mainwp-manage-themes-table tbody tr td.negative,
385 .mainwp-ui.mainwp-custom-theme #mainwp-manage-plugins-table tbody tr td.negative {
386 background-color: rgba(160, 0, 0, .1) !important;
387 color: var(--font-color) !important;
388 }
389
390
391 .mainwp-ui.mainwp-custom-theme .ui.table tbody tr.warning,
392 .mainwp-ui.mainwp-custom-theme #mainwp-manage-themes-table tbody tr td.warning,
393 .mainwp-ui.mainwp-custom-theme #mainwp-manage-plugins-table tbody tr td.warning {
394 background-color: rgba(181, 129, 5, .1) !important;
395 color: var(--font-color) !important;
396 }
397
398 .mainwp-ui.mainwp-custom-theme #mainwp-manage-updates table tr.active,
399 .mainwp-ui.mainwp-custom-theme #mainwp-manage-updates table tr.ui.title.active {
400 background: var(--background-color-3) !important;
401 }
402
403 .mainwp-ui.mainwp-custom-theme #mainwp-manage-updates table tr.content.active {
404 background: var(--background-color-3) !important;
405 }
406
407 .mainwp-ui.mainwp-custom-theme #mainwp-db-plugins-updates-table tr.active table tfoot tr th,
408 .mainwp-ui.mainwp-custom-theme #mainwp-db-plugins-updates-table tr.active table thead tr th,
409 .mainwp-ui.mainwp-custom-theme #mainwp-manage-updates table tr.content.active table tfoot tr th,
410 .mainwp-ui.mainwp-custom-theme #mainwp-manage-updates table tr.content.active table thead tr th {
411 background: var(--background-color-2) !important;
412 color: var(--font-color) !important;
413 }
414
415 .mainwp-ui.mainwp-custom-theme #mainwp-db-plugins-updates-table tr.active table tbody tr td,
416 .mainwp-ui.mainwp-custom-theme #mainwp-manage-updates table tr.content.active table tbody tr td {
417 background: var(--background-color-2) !important;
418 color: var(--font-color) !important;
419 }
420
421 .mainwp-ui.mainwp-custom-theme #mainwp-plugins-content .mainwp-manage-plugin-item,
422 .mainwp-ui.mainwp-custom-theme #mainwp-themes-content .mainwp-manage-theme-item {
423 border-bottom: 1px solid var(--border-color) !important;
424 }
425
426 .mainwp-ui.mainwp-custom-theme #mainwp-plugins-content .mainwp-manage-plugin-item-website,
427 .mainwp-ui.mainwp-custom-theme #mainwp-themes-content .mainwp-manage-theme-item-website {
428 background: var(--background-color-3) !important;
429 color: var(--font-color) !important;
430 border-bottom: 1px solid var(--border-color) !important;
431 border-top: 1px solid var(--border-color) !important;
432 }
433
434 .mainwp-ui.mainwp-custom-theme table.dataTable.table > tbody > tr.selected > * {
435 color: var(--font-color);
436 }
437
438 .mainwp-ui.mainwp-custom-theme table.dataTable tr th:first-child,table.dataTable tr td:first-child {
439 border-left: none !important;
440 }
441
442 .mainwp-ui.mainwp-custom-theme table.dataTable tr th:last-child,table.dataTable tr td:last-child {
443 border-right: none !important;
444 }
445
446 /* Invert Form Fields */
447
448 .mainwp-ui.mainwp-custom-theme .ui.tab textarea,
449 .mainwp-ui.mainwp-custom-theme .ui.form textarea {
450 background-color: var(--background-color-4);
451 border-color: var(--border-color);
452 color: var(--font-color);
453 }
454
455 .mainwp-ui.mainwp-custom-theme .ui.input>input {
456 background-color: var(--background-color-4);
457 border-color: var(--border-color);
458 color: var(--font-color);
459 }
460
461 .mainwp-ui.mainwp-custom-theme .ui.input input[disabled] {
462 color: var(--font-light-color);
463 }
464
465 .mainwp-ui.mainwp-custom-theme .ui.tab input,
466 .mainwp-ui.mainwp-custom-theme .ui.form input,
467 .mainwp-ui.mainwp-custom-theme .ui.form select,
468 .mainwp-ui.mainwp-custom-theme .ui.dropdown.selection {
469 background: var(--background-color-4);
470 color: var(--font-color);
471 border-color: var(--border-color);
472 }
473
474
475
476 .mainwp-ui.mainwp-custom-theme .ui.form input:focus,
477 .mainwp-ui.mainwp-custom-theme .ui.form select:focus,
478 .mainwp-ui.mainwp-custom-theme .ui.dropdown.selection:focus {
479 background-color: var(--background-color-4);
480 color: var(--font-color);
481 }
482
483 .mainwp-ui.mainwp-custom-theme .ui.form .field label {
484 color: var(--font-color);
485 }
486
487 .mainwp-ui.mainwp-custom-theme .ui.input .ui.basic.label {
488 color: var(--font-light-color);
489 background-color: var(--background-color-4);
490 border-color: var(--border-color);
491 }
492
493 .mainwp-ui.mainwp-custom-theme .ui.header,
494 .mainwp-ui.mainwp-custom-theme .ui.header .sub.header {
495 color: var(--font-color);
496 }
497
498 .mainwp-ui.mainwp-custom-theme .ui.dividing.header {
499 border-color: var(--border-color);
500 }
501
502 .mainwp-ui.mainwp-custom-theme .ui.toggle.checkbox.checked label::before,
503 .mainwp-ui.mainwp-custom-theme .ui.slide.checkbox.checked label::before {
504 background: var(--green-color) !important;
505 }
506
507 .mainwp-ui.mainwp-custom-theme .ui.toggle.checkbox label::before,
508 .mainwp-ui.mainwp-custom-theme .ui.slide.checkbox label::before {
509 color: var(--font-color);
510 background: var(--background-color-4);
511 }
512
513 .mainwp-ui.mainwp-custom-theme .ui.checkbox input~label,
514 .mainwp-ui.mainwp-custom-theme .ui.radio.checkbox input~label {
515 color: var(--font-color) !important;
516 }
517
518 .mainwp-ui.mainwp-custom-theme .ui.checkbox.checked input~label,
519 .mainwp-ui.mainwp-custom-theme .ui.radio.checkbox.checked input~label {
520 color: var(--font-color) !important;
521 }
522
523 .mainwp-ui.mainwp-custom-theme .ui.checkbox input~label::before,
524 .mainwp-ui.mainwp-custom-theme .ui.radio.checkbox input~label::before {
525 background: var(--background-color-4) !important;
526 color: var(--font-color) !important;
527 border-color: var(--border-color);
528 }
529
530 .mainwp-ui.mainwp-custom-theme .ui.checkbox.checked input~label::before,
531 .mainwp-ui.mainwp-custom-theme .ui.radio.checkbox.checked input~label::before {
532 background: var(--accent-color) !important;
533 }
534
535 .mainwp-ui.mainwp-custom-theme .ui.checkbox input~label::after,
536 .mainwp-ui.mainwp-custom-theme .ui.radio.checkbox input~label::after {
537 color: var(--font-color) !important;
538 }
539
540 .mainwp-ui.mainwp-custom-theme .ui.checkbox.checked input~label::after,
541 .mainwp-ui.mainwp-custom-theme .ui.radio.checkbox.checked input~label::after {
542 color: var(--background-color-2) !important;
543 }
544
545 .mainwp-ui.mainwp-custom-theme .ui.radio.checkbox input~label::after {
546 background-color: var(--font-color) !important;
547 }
548
549 .mainwp-ui.mainwp-custom-theme .ui.radio.checkbox.checked input~label::after {
550 background-color: var(--background-color-2) !important;
551 }
552
553 .mainwp-ui.mainwp-custom-theme .ui.field input.labelauty+label {
554 background-color: var(--background-color-2) !important;
555 }
556
557 .mainwp-ui.mainwp-custom-theme .mainwp-managesites-import-rows:nth-of-type(odd) {
558 background-color: rgba(255, 255, 255, .06) !important;
559 }
560
561 /* Invert Messages */
562
563 .mainwp-ui.mainwp-custom-theme .ui.message .header {
564 color: var(--font-color);
565 }
566
567 .mainwp-ui.mainwp-custom-theme .ui.message {
568 color: var(--font-color);
569 background-color: var(--background-color-4);
570 box-shadow: none;
571 -webkit-box-shadow: none;
572 }
573
574 .mainwp-ui.mainwp-custom-theme .ui.info.message {
575 color: var(--font-color);
576 background-color: var(--blue-color);
577 box-shadow: none;
578 -webkit-box-shadow: none;
579 }
580
581 .mainwp-ui.mainwp-custom-theme .ui.red.message {
582 color: var(--font-color);
583 background-color: var(--red-color);
584 box-shadow: none;
585 -webkit-box-shadow: none;
586 }
587
588 .mainwp-ui.mainwp-custom-theme .ui.yellow.message {
589 color: var(--font-color);
590 background-color: var(--yellow-color);
591 box-shadow: none;
592 -webkit-box-shadow: none;
593 }
594
595 .mainwp-ui.mainwp-custom-theme .ui.green.message {
596 color: var(--font-color);
597 background-color: var(--green-color);
598 box-shadow: none;
599 -webkit-box-shadow: none;
600 }
601
602 .mainwp-ui.mainwp-custom-theme .ui.message a {
603 color: var(--font-color) !important;
604 font-weight: bolder;
605 }
606
607 /* Invert Cards */
608
609 .mainwp-ui.mainwp-custom-theme .ui.cards .card {
610 background-color: var(--background-color-3);
611 border: 1px solid var(--border-color) !important;
612 color: var(--font-color);
613 box-shadow: none;
614 -webkit-box-shadow: none;
615 }
616
617 .mainwp-ui.mainwp-custom-theme .ui.cards .card .description,
618 .mainwp-ui.mainwp-custom-theme .ui.cards .card .meta {
619 color: var(--font-color);
620 }
621
622 .mainwp-ui.mainwp-custom-theme .ui.cards .card .meta a {
623 color: var(--accent-color);
624 }
625
626 .mainwp-ui.mainwp-custom-theme .ui.cards .card .header {
627 color: var(--font-color);
628 }
629
630 .mainwp-ui.mainwp-custom-theme .ui.cards .card .content {
631 border-top: 1px solid var(--border-color) !important;
632 color: var(--font-color);
633 }
634
635 .mainwp-ui.mainwp-custom-theme .ui.cards .card .extra a:not(.ui) {
636 color: var(--accent-color);
637 }
638
639 /* Invert Steps */
640
641 .mainwp-ui.mainwp-custom-theme .ui.steps .step {
642 background-color: var(--background-color-3) !important;
643 }
644
645 .mainwp-ui.mainwp-custom-theme .ui.steps .step .description {
646 color: var(--font-color) !important;
647 }
648
649 /* Invert Feed */
650
651 .mainwp-ui.mainwp-custom-theme .ui.feed .summary {
652 color: var(--font-color) !important;
653 }
654
655 .mainwp-ui.mainwp-custom-theme .ui.feed .summary .date {
656 color: var(--font-light-color) !important;
657 }
658
659 /* Invert Modal */
660
661 .mainwp-ui.mainwp-custom-theme .ui.modal i.icon.close {
662 top: 0.8em;
663 right: 0.8em;
664 color: #ffffff;
665 opacity: 1 !important;
666 text-shadow: none !important;
667 }
668
669 .mainwp-ui.mainwp-custom-theme .ui.modal>.header,
670 .mainwp-ui.mainwp-custom-theme .ui.modal>.actions {
671 background: var(--background-color-3);
672 border-color: var(--border-color);
673 color: var(--font-color);
674 }
675
676 .mainwp-ui.mainwp-custom-theme .ui.modal,
677 .mainwp-ui.mainwp-custom-theme .ui.modal>.content {
678 background: var(--background-color-2);
679 border-color: var(--border-color);
680 color: var(--font-color);
681 }
682
683 .mainwp-ui.mainwp-custom-theme .ui.progress .label {
684 color: var(--font-color);
685 }
686
687 .mainwp-ui.mainwp-custom-theme .ui.modal .ui.list .item {
688 border-color: var(--border-color);
689 color: var(--font-color);
690 }
691
692 .mainwp-ui.mainwp-custom-theme .ui.modal .ui.list .item .content,
693 .mainwp-ui.mainwp-custom-theme .ui.list .item .content {
694 color: var(--font-color);
695 }
696
697 /* Invert Labels */
698
699 .mainwp-ui.mainwp-custom-theme .ui.label:not(.green),
700 .mainwp-ui.mainwp-custom-theme .ui.label:not(.basic),
701 .mainwp-ui.mainwp-custom-theme .ui.label:not(.disabled),
702 .mainwp-ui.mainwp-custom-theme .ui.label:not(.red) {
703 background-color: var(--background-color-1);
704 border: 1px solid var(--table-background-color);
705 color: var(--font-light-color);
706 box-shadow: none;
707 -webkit-box-shadow: none;
708 }
709
710 .mainwp-ui.mainwp-custom-theme .ui.basic.label {
711 background: none !important;
712 }
713
714 /* Invert Buttons and Icons */
715
716 .mainwp-ui.mainwp-custom-theme .icon {
717 color: var(--font-color);
718 }
719
720 .mainwp-ui.mainwp-custom-theme a:not(.button) .icon:not(.green, .red) {
721 color: var(--accent-color);
722 }
723
724 .mainwp-ui.mainwp-custom-theme .ui.button:not(.green),
725 .mainwp-ui.mainwp-custom-theme .ui.button:not(.basic),
726 .mainwp-ui.mainwp-custom-theme .ui.button:not(.disabled),
727 .mainwp-ui.mainwp-custom-theme .ui.button:not(.red) {
728 background-color: var(--background-color-1);
729 border: 1px solid var(--table-background-color);
730 color: var(--font-light-color);
731 box-shadow: none;
732 -webkit-box-shadow: none;
733 }
734
735 .mainwp-ui.mainwp-custom-theme .ui.button[disabled],
736 .mainwp-ui.mainwp-custom-theme .ui.button.disabled {
737 background-color: var(--table-background-color) !important;
738 border: none !important;
739 color: rgba(255, 255, 255, .3);
740 box-shadow: none !important;
741 -webkit-box-shadow: none !important;
742 }
743
744 .mainwp-ui.mainwp-custom-theme .ui.button.green:not(.basic),
745 .mainwp-ui.mainwp-custom-theme .ui.button.green:not(.disabled),
746 .mainwp-ui.mainwp-custom-theme .ui.button.green:not(.red) {
747 background-color: var(--accent-color);
748 color: var(--font-color);
749 border: none;
750 box-shadow: none;
751 -webkit-box-shadow: none;
752 }
753
754 .mainwp-ui.mainwp-custom-theme .ui.button.green.basic {
755 background-color: var(--background-color-1);
756 color: var(--accent-color);
757 -webkit-box-shadow: inset 0px 0px 0px 1px var(--accent-color);
758 -moz-box-shadow: inset 0px 0px 0px 1px var(--accent-color);
759 box-shadow: inset 0px 0px 0px 1px var(--accent-color);
760 }
761
762 .mainwp-ui.mainwp-custom-theme .ui.button.red {
763 background-color: var(--red-color);
764 }
765
766 .mainwp-ui.mainwp-custom-theme .ui.button.yellow {
767 background-color: var(--yellow-color);
768 }
769
770 .mainwp-ui.mainwp-custom-theme .ui.button.orange {
771 background-color: var(--orange-color);
772 }
773
774 .mainwp-ui.mainwp-custom-theme .ui.button.green.basic .icon {
775 color: var(--accent-color);
776 }
777
778 .mainwp-ui.mainwp-custom-theme .mainwp-nav-wrap .icon {
779 color: var(--font-color) !important;
780 }
781
782
783 .mainwp-ui.mainwp-custom-theme button.mainwp-sites-select-select-button,
784 .mainwp-ui.mainwp-custom-theme button.mainwp-sites-select-deselect-button {
785 color: var(--font-button-color);
786 }
787
788 /* Dimmer & Loader */
789
790 .mainwp-ui.mainwp-custom-theme .ui.dimmer,
791 .mainwp-ui.mainwp-custom-theme .ui.inverted.dimmer {
792 background: var(--background-color-2);
793 opacity: 1;
794 }
795
796 .mainwp-ui.mainwp-custom-theme .ui.dimmer .text,
797 .mainwp-ui.mainwp-custom-theme .ui.inverted.dimmer .text {
798 color: var(--font-light-color);
799 }
800
801 .mainwp-ui.mainwp-custom-theme .ui.loader:after {
802 color: var(--mainwp-green) !important;
803 }
804
805 /* Invert Menus */
806
807 .mainwp-ui.mainwp-custom-theme .ui.dropdown .menu {
808 background-color: var(--background-color-4);
809 }
810
811 .mainwp-ui.mainwp-custom-theme .ui.dropdown .menu:after {
812 background: var(--background-color-4) !important;
813 }
814
815 .mainwp-ui.mainwp-custom-theme .ui.dropdown .menu .item {
816 color: var(--font-color);
817 border-color: var(--border-color) !important;
818 }
819
820 .mainwp-ui.mainwp-custom-theme .ui.dropdown .menu .item.active,
821 .mainwp-ui.mainwp-custom-theme .ui.dropdown .menu .item.selected,
822 .mainwp-ui.mainwp-custom-theme .ui.dropdown .menu .item:hover {
823 background-color: var(--background-color-3) !important;
824 }
825
826 .mainwp-ui.mainwp-custom-theme #mainwp-first-level-navigation {
827 background-color: var(--background-color-1);
828 }
829
830 .mainwp-ui.mainwp-custom-theme #mainwp-second-level-navigation,
831 .mainwp-ui.mainwp-custom-theme #mainwp-second-level-navigation .ui.inverted.menu {
832 background-color: var(--background-color-3);
833 }
834
835 .mainwp-ui.mainwp-custom-theme #mainwp-main-menu .item {
836 padding: 1em !important;
837 background-color: var(--background-color-3) !important;
838 }
839
840 .mainwp-ui.mainwp-custom-theme #mainwp-main-menu .item .menu .item {
841 padding: 1em 1.5em !important;
842 }
843
844 .mainwp-ui.mainwp-custom-theme #mainwp-main-menu .item .item .menu.active .item,
845 .mainwp-ui.mainwp-custom-theme #mainwp-main-menu .item .item .menu.active .item.title,
846 .mainwp-ui.mainwp-custom-theme #mainwp-main-menu .item .item .menu.active .item.content {
847 background-color: rgba(255, 255, 255, 0.08) !important;
848 }
849
850 .mainwp-ui.mainwp-custom-theme #mainwp-sites-sidebar-menu.ui.vertical.menu {
851 background-color: var(--background-color-2);
852 }
853
854 .mainwp-ui.mainwp-custom-theme .ui.pointing.vertical.menu {
855 background-color: var(--background-color-3);
856 border-color: var(--border-color) !important;
857 }
858
859 .mainwp-ui.mainwp-custom-theme #mainwp-sites-sidebar-menu.ui.vertical.menu .item {
860 border-bottom: 1px solid var(--border-color) !important;
861 }
862
863 .mainwp-ui.mainwp-custom-theme #mainwp-sites-sidebar-menu.ui.vertical.menu .item:last-child {
864 border-bottom: none !important;
865 }
866
867 .mainwp-ui.mainwp-custom-theme #mainwp-sites-sidebar-menu.ui.vertical.menu .item a .label,
868 .mainwp-ui.mainwp-custom-theme #mainwp-sites-sidebar-menu.ui.vertical.menu .item a,
869 .mainwp-ui.mainwp-custom-theme #mainwp-sites-sidebar-menu.ui.vertical.menu .item .icon {
870 color: var(--font-color) !important;
871 }
872
873 .mainwp-ui.mainwp-custom-theme .ui.pointing.vertical.menu .item {
874 border-color: var(--border-color);
875 color: var(--font-color);
876 }
877
878 .mainwp-ui.mainwp-custom-theme #mainwp-sites-sidebar-menu.ui.vertical.menu .item:hover,
879 .mainwp-ui.mainwp-custom-theme .ui.pointing.vertical.menu .item:hover {
880 background-color: var(--background-color-4);
881 }
882
883 .mainwp-ui.mainwp-custom-theme #mainwp-sites-sidebar-menu.ui.vertical.menu .item.active,
884 .mainwp-ui.mainwp-custom-theme .ui.pointing.vertical.menu .item.active {
885 border-color: var(--border-color);
886 background-color: var(--background-color-4);
887 color: var(--font-color);
888 }
889
890 .mainwp-ui.mainwp-custom-theme #mainwp-sites-sidebar-menu.ui.vertical.menu .item:after,
891 .mainwp-ui.mainwp-custom-theme .ui.pointing.vertical.menu .item:after {
892 display: none !important;
893 }
894
895 .mainwp-ui.mainwp-custom-theme .mainwp-api-icon {
896 color: var(--accent-color);
897 }
898
899 .mainwp-ui.mainwp-custom-theme .ui.pagination.menu {
900 background-color: var(--background-color-3);
901 border-color: var(--border-color);
902 }
903 .mainwp-ui.mainwp-custom-theme .ui.pagination.menu .item.disabled .page-link {
904 color: var(--font-light-color) !important;
905 }
906 .mainwp-ui.mainwp-custom-theme .ui.pagination.menu .item:hover,
907 .mainwp-ui.mainwp-custom-theme .ui.pagination.menu .item.active {
908 background: var(--accent-color);
909 }
910 .mainwp-ui.mainwp-custom-theme .ui.pagination.menu .item:hover .page-link,
911 .mainwp-ui.mainwp-custom-theme .ui.pagination.menu .item.active .page-link {
912 color: var( --background-color-3 );
913 }
914
915 /* Invert Placeholder */
916
917 .mainwp-ui.mainwp-custom-theme .ui.placeholder {
918 opacity: 0.02;
919 }
920
921 /* Accordion */
922
923 .mainwp-ui.mainwp-custom-theme .mainwp-content-wrap .ui.accordion .title,
924 .mainwp-ui.mainwp-custom-theme .mainwp-content-wrap .ui.accordion .content {
925 color: var(--font-color);
926 border-color: var(--border-color) !important;
927 background-color: var(--background-color-2) !important;
928 }
929
930 .mainwp-ui.mainwp-custom-theme .ui.accordion .title:hover {
931 color: var(--font-color) !important;
932 }
933
934 .mainwp-ui.mainwp-custom-theme .ui.accordion .content.active label {
935 color: var(--font-color) !important;
936 }
937
938 /* Invert Editor */
939
940 .mainwp-ui.mainwp-custom-theme #wp-content-editor-tools {
941 background-color: var(--background-color-2) !important;
942 }
943
944 .mainwp-ui.mainwp-custom-theme #post-status-info {
945 background: var(--background-color-2);
946 border: 0px solid var(--background-color-2) !important;
947 }
948
949 /* Invert Calendar */
950
951 .mainwp-ui.mainwp-custom-theme .ui.calendar {
952 background-color: var(--table-background-color) !important;
953 }
954
955 .mainwp-ui.mainwp-custom-theme .ui.calendar:before {
956 background-color: var(--table-background-color) !important;
957 }
958
959 /* Yoast SEO Widget */
960
961 .mainwp-ui.mainwp-custom-theme #wpseo_meta.postbox {
962 background: var(--background-color-2);
963 border: 0px solid var(--background-color-2) !important;
964 }
965
966 /* WP Widget */
967
968 .mainwp-ui.mainwp-custom-theme .widget-inside,
969 .mainwp-ui.mainwp-custom-theme .widget-top {
970 background: var(--background-color-2);
971 border: 1px solid var(--border-color);
972 }
973
974
975 .mainwp-ui.mainwp-custom-theme #ngBulkSettingsManagerId {
976 background: var(--background-color-2) !important;
977 }
978
979 /* Buddy Support */
980 .mainwp-ui.mainwp-custom-theme .profile_box {
981 background: var(--background-color-2);
982 border: 1px solid var(--border-color);
983 color: var(--font-color);
984 box-shadow: none !important;
985 }
986
987 .mainwp-ui.mainwp-custom-theme .profile_box .bb-remote-checkbox {
988 border-top: 1px solid var(--border-color);
989 }
990
991 .mainwp-ui.mainwp-custom-theme .profile_item_select,
992 .mainwp-ui.mainwp-custom-theme .profile_item_noselect,
993 .mainwp-ui.mainwp-custom-theme .profile_settings {
994 background: var(--background-color-3);
995 border: 1px solid var(--border-color);
996 }
997
998 .mainwp-ui.mainwp-custom-theme .form-table th {
999 color: var(--font-color);
1000 }
1001
1002
1003 .mainwp-ui.mainwp-custom-theme .form-table td input,
1004 .mainwp-ui.mainwp-custom-theme .form-table td select,
1005 .mainwp-ui.mainwp-custom-theme .form-table td a.button {
1006 background-color: var(--background-color-4) !important;
1007 color: var(--font-color);
1008 }
1009
1010 /* Apexcharts */
1011
1012 .mainwp-ui.mainwp-custom-theme .apexcharts-menu {
1013 background: var(--background-color-3) !important;
1014 border-color: var(--border-color) !important;
1015 }
1016
1017 .mainwp-ui.mainwp-custom-theme .apexcharts-menu .apexcharts-menu-item:hover {
1018 background: var(--background-color-4) !important;
1019 }
1020
1021 .mainwp-ui.mainwp-custom-theme.mainwp_page_InsightsOverview .ui.segment.mainwp-widet {
1022 color: #eee !important;
1023 }
1024
1025 /* Wordfence Support */
1026
1027 .mainwp-ui.mainwp-custom-theme .wf-block {
1028 background: var(--background-color-3) !important;
1029 border: 1px solid var(--border-color);
1030 }
1031
1032 .mainwp-ui.mainwp-custom-theme .wf-scan-results {
1033 border-color: var(--border-color) !important;
1034 }
1035
1036 .mainwp-ui.mainwp-custom-theme .wf-scan-tabs {
1037 box-shadow: none !important;
1038 }
1039
1040 .mainwp-ui.mainwp-custom-theme .wf-block-list li,
1041 .mainwp-ui.mainwp-custom-theme #wf-scan-results-new {
1042 border-color: var(--border-color) !important;
1043 }
1044
1045 .mainwp-ui.mainwp-custom-theme .wf-scan-tabs li.wf-tab {
1046 background-color: var(--background-color-3) !important;
1047 color: var(--font-color) !important;
1048 border: none !important;
1049 }
1050
1051 .mainwp-ui.mainwp-custom-theme #wf-scan-bulk-buttons-delete,
1052 .mainwp-ui.mainwp-custom-theme #wf-scan-bulk-buttons-repair {
1053 background-color: var(--accent-color) !important;
1054 color: var(--font-color) !important;
1055 border: none !important;
1056 }
1057
1058 .mainwp-ui.mainwp-custom-theme .wf-scanner-progress>.wf-scan-step>.wf-scan-step-icon>.wf-scan-step-disabled,
1059 .mainwp-ui.mainwp-custom-theme .wf-scanner-progress>.wf-scan-step>.wf-scan-step-icon>.wf-scan-step-premium,
1060 .mainwp-ui.mainwp-custom-theme .wf-scanner-progress>.wf-scan-step>.wf-scan-step-icon>.wf-scan-step-pending,
1061 .mainwp-ui.mainwp-custom-theme .wf-scanner-progress>.wf-scan-step>.wf-scan-step-icon>.wf-scan-step-running,
1062 .mainwp-ui.mainwp-custom-theme .wf-scanner-progress>.wf-scan-step>.wf-scan-step-icon>.wf-scan-step-complete-success,
1063 .mainwp-ui.mainwp-custom-theme .wf-scanner-progress>.wf-scan-step>.wf-scan-step-icon>.wf-scan-step-complete-warning {
1064 background-color: var(--background-color-3) !important;
1065 }
1066
1067 .mainwp-ui.mainwp-custom-theme .wf-scanner-progress>.wf-scan-step:first-of-type,
1068 .mainwp-ui.mainwp-custom-theme .wf-scanner-progress>.wf-scan-step:last-of-type {
1069 background: var(--background-color-3) !important;
1070 }
1071
1072 .mainwp-ui.mainwp-custom-theme .wf-issue:nth-of-type(2n),
1073 .mainwp-ui.mainwp-custom-theme .wf-issue-site-cleaning:nth-of-type(2n) {
1074 background-color: var(--background-color-3) !important;
1075 }
1076
1077 .mainwp-ui.mainwp-custom-theme .wf-issue,
1078 #wf-scan-activity-log .wf-issue-site-cleaning {
1079 border-color: var(--border-color) !important;
1080 }
1081
1082 .mainwp-ui.mainwp-custom-theme #wf-scan-activity-log {
1083 background-color: var(--background-color-3) !important;
1084 }
1085
1086 /* dark theme */
1087 .mainwp-ui.mainwp-custom-theme .dt-scroll-body tbody tr.selected .ui.red.button,
1088 .mainwp-ui.mainwp-custom-theme .dt-scroll-body tbody tr.selected .ui.basic.red.button,
1089 .mainwp-ui.mainwp-custom-theme .dt-scroll-body tbody tr.selected .ui.button.green,
1090 .mainwp-ui.mainwp-custom-theme .dt-scroll-body tbody tr.selected .ui.button.basic.green{
1091 color: #fff !important;
1092 }
1093 /* end */
1094
1095
1096 /*******************************
1097 Scrollbars
1098 *******************************/
1099
1100 /* For WebKit Browsers (e.g., Chrome, Edge, Safari) */
1101 ::-webkit-scrollbar {
1102 width: 5px; /* Width of the scrollbar */
1103 }
1104
1105 ::-webkit-scrollbar-track {
1106 background: #1c1d1b; /* Background of the track */
1107 }
1108
1109 ::-webkit-scrollbar-thumb {
1110 background-color: #666666; /* Color of the scrollbar thumb */
1111 border-radius: 5px; /* Round edges for the thumb */
1112 border: 2px solid #1c1d1b; /* Optional: creates padding between thumb and track */
1113 }
1114
1115 ::-webkit-scrollbar-thumb:hover {
1116 background: #666666; /* Thumb color on hover */
1117 }
1118
1119 /* For Firefox (using CSS Scrollbars Module Level 1) */
1120 * {
1121 scrollbar-width: thin; /* Options: auto, thin */
1122 scrollbar-color: #666666 #1c1d1b; /* thumb color, track color */
1123 }