Project

General

Profile

Download (12.1 KB) Statistics
| Branch: | Tag: | Revision:
1
/*
2
 * pfSense-dark.css
3
 *
4
 * part of pfSense (https://www.pfsense.org)
5
 * Copyright (c) 2016 Electric Sheep Fencing
6
 * Copyright (c) 2016-2024 Rubicon Communications, LLC (Netgate)
7
 * All rights reserved.
8
 *
9
 * Licensed under the Apache License, Version 2.0 (the "License");
10
 * you may not use this file except in compliance with the License.
11
 * You may obtain a copy of the License at
12
 *
13
 * http://www.apache.org/licenses/LICENSE-2.0
14
 *
15
 * Unless required by applicable law or agreed to in writing, software
16
 * distributed under the License is distributed on an "AS IS" BASIS,
17
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
18
 * See the License for the specific language governing permissions and
19
 * limitations under the License.
20
 */
21

    
22
@import url("/css/pfSense.css");
23
@import url("/vendor/jquery-ui/themes/dark-hive/theme.css");
24

    
25
body {
26
    background-color: #212121;
27
    color: #ffffff;
28
}
29

    
30
body.no-menu {
31
    background-color: #616161;
32
}
33

    
34
a {
35
    color: #009688;
36
}
37

    
38
a:hover {
39
    color: #00796B;
40
    text-decoration: none;
41
}
42

    
43
h1 a:link, h1 a:visited {
44
    color: #fff;
45
}
46

    
47
h1 a:hover, h1 a:active {
48
    color: #fff;
49
    text-decoration: none !important;
50
}
51

    
52
/** Content structure */
53

    
54
.contains-table table {
55
    border: 1px solid #ddd;
56
}
57

    
58
.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
59
    border-color: #303030;
60
}
61

    
62
.table-hover>tbody>tr:hover, .table-striped>tbody>tr:nth-of-type(odd):hover {
63
    background-color: #757575;
64
}
65

    
66
table.sortable-theme-bootstrap {
67
    color: #e0e0e0 !important;
68
    background-color: #212121 !important;
69
}
70

    
71
.table>tbody+tbody {
72
    border-top: 2px solid #616161;
73
}
74

    
75
.dropdown-menu-fixed {
76
    max-height: calc(98vh - 35px);
77
    overflow-y: auto;
78
}
79

    
80
.dropdown-menu {
81
    background-color: #000;
82
    opacity: .93;
83
    border-radius: 10px;
84
}
85

    
86
.dropdown-menu>li>a {
87
    color: #e0e0e0;
88
}
89

    
90
.dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover {
91
    background-color: #303030;
92
    color: #e0e0e0;
93
}
94

    
95
/** Page header with title and breadcrumb */
96
.header {
97
    background-color: #303030;
98
    box-shadow: 1px 1px 3px #151515;
99
}
100

    
101
.breadcrumb {
102
    background-color: #303030;
103
}
104

    
105
.breadcrumb>li+li:before {
106
    color: #9E9E9E;
107
}
108

    
109
ul.context-links li a {
110
    color: #009688;
111
}
112

    
113
/* navigation */
114
.navbar-inverse {
115
    background-color: #000000;
116
}
117

    
118
.nav>li>a {
119
    border-bottom: 5px solid #212121;
120
    color: #009688;
121
}
122

    
123
.nav>li>a:focus, .nav>li>a:hover {
124
    background-color: #212121;
125
    box-shadow: 2px 2px 8px #080808;
126
    border-bottom: 5px solid #009688;
127
}
128

    
129
.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav li.open>a, .nav li.open>a:focus, .nav-pills>li.active>a:hover {
130
    background-color: #212121;
131
    box-shadow: 2px 2px 8px #151515;
132
    border-bottom: 5px solid #009688;
133
    color: #009688;
134
}
135

    
136
.navbar-inverse .navbar-nav >li>a {
137
    border-bottom: 5px solid #000000;
138
}
139

    
140
.nav-tabs>li>a {
141
    border-bottom: 5px solid #212121;
142
}
143

    
144
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover, .nav-tabs>li>a:hover {
145
    border-left: 1px solid #212121;
146
    border-right: 1px solid #212121;
147
    border-top: 1px solid #212121;
148
    border-bottom: 5px solid #009688;
149
    background-color: #212121;
150
    color: #009688;
151
}
152

    
153
.nav-tabs {
154
    border-bottom: 1px solid #009688;
155
}
156
/* end navigation */
157

    
158
/* start common colors */
159
.alert-warning {
160
    border-top: 1px solid #FFECB3;
161
}
162

    
163
.alert-success {
164
    border-top: 1px solid #DCEDC8;
165
}
166

    
167
.alert-info {
168
    border-top: 1px solid #B2EBF2;
169
}
170

    
171
.bg-primary {
172
    color: #000;
173
    background-color: #009688;
174
}
175

    
176
.bg-success {
177
    color: #000;
178
    background-color: #80CBC4;
179
}
180

    
181
.btn-default {
182
    color: #ffffff;
183
    background-color: #757575;
184
    border-color: #212121;
185
}
186

    
187
.btn-default.active, .btn-default.focus, .btn-default:active, .btn-default:focus, .btn-default:hover, .open>.dropdown-toggle.btn-default {
188
    color: #ffffff;
189
    background-color: #424242;
190
    border-color: #212121;
191
}
192

    
193
.btn-info {
194
    background-color: #2196F3;
195
    border-color: #1976D2;
196
}
197

    
198
.btn-info.active, .btn-info.focus, .btn-info:active, .btn-info:focus, .btn-info:hover, .open>.dropdown-toggle.btn-info {
199
    background-color: #1565C0;
200
    border-color: #0D47A1;
201
}
202

    
203
.btn-primary {
204
    background-color: #009688;
205
    border-color: #00796B;
206
}
207

    
208
.btn-primary.active, .btn-primary.focus, .btn-primary:active, .btn-primary:focus, .btn-primary:hover, .open>.dropdown-toggle.btn-primary {
209
    background-color: #00796B;
210
    border-color: #00695C;
211
}
212

    
213
.btn-success {
214
    background-color: #009688;
215
    border-color: #009688;
216
}
217

    
218
.btn-success.active, .btn-success.focus, .btn-success:active, .btn-success:focus, .btn-success:hover, .open>.dropdown-toggle.btn-success {
219
    background-color: #00796B;
220
    border-color: #00796B;
221
}
222

    
223
.btn-danger {
224
    background-color: #D32F2F;
225
    border-color: #D32F2F;
226
}
227

    
228
.btn-danger.active, .btn-danger.focus, .btn-danger:active, .btn-danger:focus, .btn-danger:hover, .open>.dropdown-toggle.btn-danger {
229
    background-color: #C62828;
230
    border-color: #B71C1C;
231
}
232

    
233
.btn-warning {
234
    background-color: #FFA000;
235
    border-color: #FF8F00;
236
}
237

    
238
.btn-warning.active, .btn-warning.focus, .btn-warning:active, .btn-warning:focus, .btn-warning:hover, .open>.dropdown-toggle.btn-warning {
239
    background-color: #FF8F00;
240
    border-color: #FF6F00;
241
}
242

    
243
/* end common colors */
244

    
245
caption {
246
    color: #E0E0E0;
247
    background-color: #303030;
248
}
249

    
250
.form-control {
251
    background-color: #e0e0e0;
252
}
253

    
254
select.form-control:focus {
255
    background-color: #fff;
256
}
257

    
258
.form-group {
259
    border-bottom: 1px solid #212121;
260
}
261

    
262
.panel-default>.panel-heading {
263
    color: #fff;
264
    background-color: #303030;
265
    border-color: #212121;
266
}
267

    
268
.panel {
269
    background-color: #424242;
270
    border-color: #424242;
271
    box-shadow: 0px 3px 7px rgba(0,0,0,.3);
272
}
273

    
274
.panel-footer {
275
    background-color: #424242;
276
}
277

    
278
.help-block {
279
    color: #eeeeee;
280
}
281

    
282
.checkbox label, .radio label {
283
    color: #eeeeee;
284
}
285

    
286
.table-striped>thead {
287
    background-color: #000;
288
}
289

    
290
.table-striped>tbody>tr:nth-of-type(odd) {
291
    background-color: #303030;
292
}
293

    
294
.table-striped>tbody>tr.disabled:nth-of-type(odd) {
295
    background-color: rgba(48, 48, 48, .5);
296
    color: rgba(255,255,255,.5);
297
}
298

    
299
.table-striped>tbody>tr.disabled:nth-of-type(even) {
300
    background-color: rgba(66, 66, 66, .5);
301
    color: rgba(255,255,255,.5);
302
}
303

    
304
.table-hover>tbody>tr.disabled:hover, .table-striped>tbody>tr.disabled:nth-of-type(odd):hover, .table-striped>tbody>tr.disabled:nth-of-type(even):hover {
305
    background-color: rgba(117, 117, 117, .5);
306
}
307

    
308
tr.disabled a {
309
    color: rgba(0, 150, 136,.5);
310
}
311

    
312
.fieldset[disabled] .form-control, .form-control[disabled], .form-control[disabled]::placeholder, .form-control[readonly], .input-group-inbetween {
313
    color: #555;
314
    background-color: #aaa;
315
    border-color: #999;
316
}
317

    
318
.table-striped>tbody>tr.disabled>td:first-child {
319
    border-left: 3px solid #F44336;
320
    padding-left: 7px;
321
}
322

    
323
.table-bordered {
324
    border: 1px solid #303030;
325
}
326

    
327
.table-bordered>thead {
328
    background-color: #000;
329
}
330

    
331
.table .table {
332
    background-color: #424242;
333
}
334

    
335
/* active table row */
336
.table>tbody>tr.active>td, .table>tbody>tr.active>th, .table>tbody>tr>td.active, .table>tbody>tr>th.active, .table>tfoot>tr.active>td, .table>tfoot>tr.active>th, .table>tfoot>tr>td.active, .table>tfoot>tr>th.active, .table>thead>tr.active>td, .table>thead>tr.active>th, .table>thead>tr>td.active, .table>thead>tr>th.active {
337
    background-color: #80CBC4;
338
    color: #212121;
339
}
340

    
341
/* active table row on hover */
342
.table-hover>tbody>tr.active:hover>td, .table-hover>tbody>tr.active:hover>th, .table-hover>tbody>tr:hover>.active, .table-hover>tbody>tr>td.active:hover, .table-hover>tbody>tr>th.active:hover {
343
    background-color: #80CBC4;
344
    color: #212121;
345
}
346

    
347
.popover-title {
348
    background-color: #424242;
349
    border-bottom: 1px solid #212121;
350
}
351

    
352
.popover {
353
    background-color: #616161;
354
}
355

    
356
.popover.right>.arrow:after {
357
    border-right-color: #212121;
358
}
359

    
360
.modal-content {
361
    background-color: #424242;
362
}
363

    
364
.modal-header, .modal-footer {
365
    background-color: #303030;
366
    border-color: #212121;
367

    
368
}
369

    
370
option:checked {
371
    color: white;
372
    background: #009688;
373
}
374

    
375
.inputselectcombo {
376
    margin-bottom: 0!important;
377
}
378
div.inputselectcombo {
379
    display: table;
380
    font-size: 0px;
381
}
382
div.inputselectcombo select {
383
    display: table-cell;
384
    width: auto;
385
    max-width: 95px;
386
    margin-bottom: 0!important;
387
    border-top-right-radius: 0;
388
    border-bottom-right-radius: 0;
389
}
390
div.inputselectcombo span {
391
    display: table-cell;
392
    width: 100%;
393
}
394
div.inputselectcombo span input {
395
    display: table-cell;
396
    width: 100%;
397
    margin-bottom: 0!important;
398
    border-top-left-radius: 0;
399
    border-bottom-left-radius: 0;
400
}
401

    
402
.progress-bar.progress-bar-success {
403
    background-color: #009688;
404
}
405

    
406
.no-separator {
407
    border-bottom: 0!important;
408
}
409

    
410
/** Page footer */
411
.footer {
412
    background-color: #000;
413
}
414

    
415
.footer a {
416
    color: #fff;
417
}
418

    
419
/** Homepage / dashboard */
420
.widget .panel-heading {
421
    background-color: #757575;
422
}
423

    
424
#widgetSequence {
425
    border-top: 1px solid #ddd;
426
}
427

    
428
a.list-group-item, .list-group-item {
429
    background-color: #424242;
430
    color: #e0e0e0;
431
    border: 1px solid #212121;
432
}
433

    
434
a.list-group-item:focus, a.list-group-item:hover, .list-group-item:focus, .list-group-item:hover {
435
    background-color: #303030;
436
    color: #e0e0e0;
437
}
438

    
439
a.list-group-item .list-group-item-heading, .list-group-item .list-group-item-heading {
440
    color: #EEEEEE;
441
}
442

    
443
.progress {
444
    background-color: #e0e0e0;
445
}
446

    
447
.progress-bar {
448
    background-color: #009688;
449
}
450

    
451
.icon-embed-btn
452
{
453
    color: white;
454
}
455

    
456
/* Used when you need an icon to act as a submit button **/
457
.button-icon
458
{
459
    color: #337AB7;
460
}
461

    
462
button.close {
463
    padding: 0 4px 1px 4px;
464
    border: 1px solid #6D4C41;
465
    border-radius: 5px;
466
    box-shadow: 1px 1px 1px #6D4C41;
467
}
468

    
469
.modal-header button.close {
470
    border: 1px solid #fff;
471
    box-shadow: 1px 1px 1px #fff;
472
    color: #fff;
473
}
474

    
475
input, select, textarea {
476
    color: #212121;
477
}
478

    
479
/* tree css */
480
ul.tree li A:link, ul.tree li A:hover, ul.tree li A:visited {
481
    color : #ffffff;
482
}
483

    
484
/*sortable table*/
485

    
486
table[data-sortable].sortable-theme-bootstrap th[data-sorted="true"] {
487
    background-color: #000;
488
    color: #009688;
489
    border-bottom-color: #009688;
490
}
491

    
492
table[data-sortable].sortable-theme-bootstrap tbody td {
493
    border-top: 1px solid #303030;
494
}
495

    
496
textarea {
497
    background-color: #bfbfbf;
498
}
499

    
500
/** Styling for jQuery autocomplete widget */
501
.ui-autocomplete {
502
    color: #212121;
503
    background-color: #e0e0e0;
504
    background-image: none;
505
}
506

    
507
.ui-widget {
508
    font-family: Roboto, sans-serif;
509
}
510

    
511
/* Callouts */
512
.bs-callout {
513
    padding: 10px 15px;
514
    margin: 20px 0;
515
    border: 1px solid #424242;
516
    border-left-width: 5px;
517
    border-radius: 3px;
518
    font-size: 13px;
519
}
520

    
521
.bs-callout h4 {
522
    margin-top: 0;
523
    margin-bottom: 5px;
524
}
525

    
526
.bs-callout p:last-child {
527
    margin-bottom: 0;
528
}
529

    
530
.bs-callout code {
531
    border-radius: 3px;
532
}
533

    
534
.bs-callout+.bs-callout {
535
    margin-top: -5px;
536
}
537

    
538
/* Callout contextual classes */
539
.bs-callout-default {
540
    border-left-color: #777;
541
}
542

    
543
.bs-callout-default h4 {
544
    color: #777;
545
}
546

    
547
.bs-callout-danger {
548
    border-left-color: #d9534f;
549
}
550

    
551
.bs-callout-danger h4 {
552
    color: #d9534f;
553
}
554

    
555
.bs-callout-warning {
556
    border-left-color: #f0ad4e;
557
}
558

    
559
.bs-callout-warning h4 {
560
    color: #f0ad4e;
561
}
562

    
563
.bs-callout-info {
564
    border-left-color: #01579B;
565
}
566

    
567
.bs-callout-info h4 {
568
    color: #01579B;
569
}
570

    
571
/* D3 Styles */
572

    
573
.traffic-widget-chart:not(:last-child) {
574
    border-bottom: 2px solid #303030;
575
}
576

    
577
svg text {
578
    fill: #FFFFFF !important;
579
}
580

    
581
g.nv-axis text, g.nv-legend text {
582
    fill: #FFFFFF;
583
}
584

    
585
.nvd3 .nv-axis line, .nvd3 .nv-axis path {
586
    fill: #616161 !important;
587
    stroke: #616161 !important;
588
}
589

    
590
.nvtooltip > h3 {
591
    background-color: rgba(66,66,66, 0.9);
592
    border-bottom: 1px solid #616161;
593
    color: #e0e0e0;
594
}
595

    
596
.nvtooltip {
597
    background: rgba(97,97,97, 0.9);
598
    color: #e0e0e0;
599
}
600

    
601
.colspanth {
602
    background-color: #000000;
603
}
604

    
605
/* Required input elements have a title that begins with "*". This causes
606
Group.class.php to add <span class="element-required" to the title, which
607
can then be used to style required input here. Example below uses a custom
608
text underline, but text-color, background, font etc. could also be used */
609
.element-required {
610
    box-shadow: inset 0 0px 0 white, inset 0 -1px 0 white
611
}
(6-6/7)