Like 0
Fork 0

Last active 1731234189

seafile-darktheme-fixed.css Raw
1@media (prefers-color-scheme: dark) {
2 :root {
3
4 --main-bg: #282c34;
5 --dark-bg: #21252b;
6 --light-bg: #333842;
7
8 --main-font: #ababab;
9 --light-font: #eee;
10 --dark-font: #888;
11
12 --main-theme: #6C86B7;
13 --theme-font: #6C86B7;
14
15 --border: rgba(34, 34, 34, 0.9);
16 --shadow: rgba(10, 10, 10, 0.8);
17 --no-shadow: rgba(0, 0, 0, 0);
18 --green: #326732;
19 --info: #676732;
20 --error: #673f32;
21 }
22}
23
24@media (prefers-color-scheme: light) {
25 :root {
26 --main-bg: #fff;
27 --dark-bg: rgb(203, 223, 233);
28 --light-bg: rgb(241, 250, 255);
29
30 --main-font: #404650;
31 --light-font: #1a1a1a;
32 --dark-font: #535d68;
33
34 --main-theme: rgb(190, 213, 255);
35 --theme-font: rgb(92, 113, 153);
36
37 --border: rgba(230, 230, 230, 0.6);
38 --shadow: rgba(0, 0, 0, 0.3);
39 --no-shadow: rgba(0, 0, 0, 0);
40 --green: #326732;
41 --info: #676732;
42 --error: #673f32;
43 }
44}
45
46
47
48
49/******************
50 MAIN PAGE
51*****************/
52
53.star-empty {
54 color: var(--dark-font);
55}
56
57.cur-view-container .fa-star.fas {
58 color: var(--dark-font);
59}
60
61.cur-view-path {
62 background: var(--main-bg) !important;
63}
64
65body {
66 color: var(--main-font);
67 background-color: var(--main-bg);
68}
69
70#header, .main-panel-north, .side-panel-north {
71 background: var(--dark-bg) !important ;
72 border-bottom: 1px solid var(--dark-bg) !important;
73}
74
75.dir-content-nav {
76 background-color: var(--main-bg);
77 border-right: 1px solid var(--border);
78}
79
80.border-left-show:before {
81 background-color: var(--dark-bg);
82}
83
84.cur-view-path:after {
85 border-bottom: 1px solid var(--border) !important;
86}
87
88.side-search-form .input, .side-search-form .input:focus {
89 background: var(--light-bg);
90 box-shadow: inset 0 1px 2px var(--shadow);
91}
92
93.btn-white, .tabnav button, .repo-file-list-topbar .op-btn {
94 background: var(--light-bg);
95}
96
97table td, table th {
98 border-bottom: 1px solid var(--border);
99 color: var(--main-font);
100}
101
102.sf-heading {
103 border-bottom: 1px solid var(--main-bg);
104 color: var(--theme-font);
105}
106
107.side-nav-footer {
108 background: var(--dark-bg);
109 border-top: 1px solid var(--border);
110}
111
112.side-panel-footer {
113 border-right: 1px solid var(--border)!important;
114}
115
116.side-panel-center {
117 border-right: 0px solid var(--border)!important;
118}
119
120
121.mobile-operation-menu {
122 background: var(--main-bg);
123}
124
125.side-panel {
126 background: var(--main-bg);
127}
128
129.side-panel-north {
130 border-right: 0px solid var(--border);
131}
132
133.nav-pills .nav-item .nav-link {
134 color: var(--main-font);
135}
136
137.tr-highlight, .tree-node-inner-hover {
138 background-color: var(--dark-bg);
139}
140
141.tree-node-hight-light {
142 color: var(--main-font);
143 background-color:var(--dark-bg)!important;
144 }
145
146.tr-active {
147 background-color: var(--dark-bg) !important;
148}
149
150.grid-selected-active, .grid-file-img-link:hover {
151 background-color: var(--dark-bg) !important;
152 border: 0px solid var(--border);
153}
154
155.grid-item:hover img {
156 background-color: var(--dark-bg) !important;
157}
158
159
160.grid-file-img-link, .grid-item {
161 background-color: var(--main-bg);
162}
163
164.grid-file-img-link .thumbnail {
165 background: var(--dark-bg);
166 border: 0px solid var(--border);
167}
168
169.grid-item:hover .grid-file-img-link {
170 background:var(--main-bg);
171 }
172
173a, a:hover, .grid-file-name-link, .op-target, a:focus {
174 color: var(--theme-font);
175}
176.path-link {
177 color: var(--theme-font) !important;
178}
179
180.a-simulate {
181 color: var(--theme-font) !important;
182}
183
184.grid-item:hover a {
185 color: var(--theme-font);
186}
187
188.op-icon:hover, .op-icon:focus {
189 color: var(--theme-font);
190 padding-bottom: 0;
191 border-bottom: none;
192}
193
194.op-icon.sf2-x, .op-icon, .sf-dropdown-toggle {
195 color: var(--main-font);
196}
197
198.op-icon.sf2-x:hover, .op-icon.sf2-x:active, .sf-dropdown-toggle:hover, .sf-dropdown-toggle:active {
199 color: var(--theme-font);
200 text-decoration: none;
201}
202
203.empty-tip {
204 border: 1px solid var(--border);
205 background-color: var(--dark-bg);
206}
207
208.empty-tip h2 {
209 color: var(--main-font);
210}
211
212.nav-pills .nav-item .nav-link.active {
213 background-color: var(--dark-bg);
214}
215
216.nav-pills .nav-item .nav-link.active:hover {
217 background-color: var(--dark-bg);
218}
219
220.nav-pills .nav-item .nav-link:hover {
221 background-color: var(--dark-bg);
222}
223
224.nav-tabs {
225 border-bottom: 1px solid var(--border);
226}
227
228.nav .nav-item .nav-link{
229 color: var(--dark-font);
230 border-bottom: 0rem solid var(--no-shadow);
231}
232
233.nav .nav-item .nav-link:hover{
234 color: var(--main-font);
235 border-bottom: 0rem solid var(--no-shadow);
236}
237
238.nav .nav-item .nav-link.active {
239 color: var(--theme-font);
240 border-bottom: 0rem solid var(--no-shadow);
241}
242
243
244.dropdown-menu {
245 background-color: var(--light-bg);
246 border: 1px solid var(--border);
247}
248
249.dropdown-divider {
250 border-top: 1px solid var(--border);
251}
252
253.dropdown-item, .link-dropdown-item {
254 color: var(--main-font);
255}
256
257.group-operations .group-op-item, .sf-view-mode-btn {
258 color: var(--main-font);
259 background-color: var(--light-bg);
260 border: 1px solid var(--border);
261}
262
263.detail-btn button {
264 color: var(--main-font);
265 background-color: var(--light-bg);
266 border: 1px solid var(--border);
267}
268
269.action-icon:focus, .action-icon:hover, .attr-action-icon:focus, .attr-action-icon:hover {
270 color: var(--light-font) !important;
271}
272
273.dropdown-item:hover, .link-dropdown-item:hover {
274 color: var(--light-font);
275 background-color: var(--main-theme);
276}
277
278.sf-view-mode-btn.current-mode {
279 background-color: var(--main-theme)!important;
280 color: var(--light-font) !important;
281}
282
283.modal-header {
284 background-color: var(--main-bg);
285 border-bottom: 1px solid var(--border);
286}
287
288.modal-content {
289 background-color: var(--main-bg);
290}
291
292.modal-footer {
293 border-top: 1px solid var(--border);
294}
295
296.share-dialog-content .share-dialog-side {
297 border-right: 1px solid var(--border);
298}
299
300.close:not(:disabled):not(.disabled):hover, .close:not(:disabled):not(.disabled):focus {
301 color: var(--main-font);
302 background-color: transparent;
303}
304
305#my-info {
306 color: var(--main-font);
307}
308
309.close {
310 color: var(--main-font);
311 text-shadow: 0 1px 0 var(--shadow);
312}
313
314.form-control {
315 color: var(--main-font);
316 background-color: var(--light-bg);
317 border: 1px solid var(--border);}
318 .form-control:focus {
319 color: var(--light-font);
320 background-color: var(--light-bg);
321 border: 1px solid var(--border);
322 box-shadow: 0px 0px 1px var(--shadow); }
323 .form-control::placeholder {
324 color: var(--main-font);}
325 .form-control:disabled, .form-control[readonly] {
326 color: var(--dark-font);
327 background-color: var(--light-bg);
328}
329
330input[type=text]:focus, input[type="password"]:focus {
331 color: var(--light-font);
332 background-color: var(--light-bg);
333 border: 1px solid var(--border);
334}
335
336.sf-popover {
337 background: var(--light-bg);
338 border: 1px solid var(--border);
339 box-shadow: 0 0 1px var(--no-shadow);
340}
341.up-outer-caret .inner-caret {
342 border-bottom-color: var(--light-bg);
343 border-color: var(--light-bg) transparent;
344}
345
346.inner-caret {
347 border-top-color: var(--light-bg);
348}
349
350.outer-caret, .inner-caret {
351 border-color: var(--light-bg) transparent;
352}
353
354.account-popup .item {
355 border-bottom: 1px solid var(--light-bg);
356}
357
358.account-popup a.item:hover {
359 background: var(--main-theme);
360 color: var(--light-font);
361}
362
363.account-popup a.item {
364 background: var(--light-bg);
365 color: var(--main-font);
366}
367
368#quota-bar {
369 border: 1px solid var(--dark-bg);
370 background: var(--main-bg);
371}
372
373#quota-usage {
374 background: var(--main-theme);
375}
376
377
378#notifications .title {
379 color: var(--main-font);
380}
381
382#notice-popover .sf-popover-hd {
383 border-bottom: 1px solid var(--light-bg);
384}
385
386#notice-popover .view-all, .detail-header .detail-title .name {
387 color: var(--theme-font);
388}
389
390.path-toolbar .toolbar-item a:hover {
391 color: var(--theme-font);
392}
393
394.file-internal-link:hover {
395 color: var(--theme-font);
396}
397
398.cur-view-detail {
399 background-color: var(--main-bg);
400 -webkit-box-shadow: -1px 0 2px 0 var(--shadow);
401 box-shadow: -1px 0 2px 0 var(--shadow);
402}
403
404.detail-header {
405 background-color: var(--main-bg);
406 border-bottom: 0px solid var(--border);
407}
408
409.detail-container {
410 border-left: 1px solid var(--border);
411}
412
413.text-secondary {
414 color: var(--main-font) !important;
415}
416
417
418.btn-secondary, .btn-primary {
419 color: var(--main-font)!important;
420 background-color: var(--light-bg)!important;
421 border-color: var(--border)!important; }
422 .btn-secondary:hover, .btn-primary:hover {
423 color: var(--light-font)!important;
424 background-color: var(--main-theme)!important;
425 border-color: var(--border)!important; }
426 .btn-secondary:focus, .btn-secondary.focus, .btn-primary:focus, .btn-primary.focus {
427 box-shadow: 0 0 0 0px var(--shadow)!important; }
428 .btn-secondary.disabled, .btn-secondary:disabled, .btn-primary.disabled, .btn-primary:disabled, .btn-outline-primary:disabled {
429 color: var(--dark-font)!important;
430 background-color: var(--main-bg)!important;
431 border-color: var(--border)!important; }
432 .btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active,
433 .show > .btn-secondary.dropdown-toggle, .btn-primary:not(:disabled):not(.disabled):active,
434 .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle {
435 color: var(--main-font)!important;
436 background-color: var(--light-bg)!important;
437 border-color: var(--border)!important; }
438 .btn-secondary:not(:disabled):not(.disabled):active:focus, .btn-secondary:not(:disabled):not(.disabled).active:focus,
439 .show > .btn-secondary.dropdown-toggle:focus, .btn-primary:not(:disabled):not(.disabled):active:focus,
440 .btn-primary:not(:disabled):not(.disabled).active:focus, .show > .btn-primary.dropdown-toggle:focus {
441 box-shadow: 0 0 0 0px var(--shadow)!important;
442}
443
444.btn-outline-primary {
445 color: var(--main-font);
446 border-color: var(--border);}
447 .btn-outline-primary:hover {
448 color: var(--light-font);
449 background-color: var(--main-theme);
450 border-color: var(--border); }
451 .btn-outline-primary:focus, .btn-outline-primary.focus {
452 box-shadow: 0 0 0 0px var(--shadow); }
453 .btn-outline-primary.disabled, .btn-outline-primary:disabled {
454 color: var(--dark-font);}
455 .btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active,
456 .show > .btn-outline-primary.dropdown-toggle {
457 color: var(--main-font);
458 background-color: var(--light-bg);
459 border-color: var(--border); }
460 .btn-outline-primary:not(:disabled):not(.disabled):active:focus, .btn-outline-primary:not(:disabled):not(.disabled).active:focus,
461 .show > .btn-outline-primary.dropdown-toggle:focus {
462 box-shadow: 0 0 0 0px var(--shadow);
463}
464
465.uploader-list-view {
466 border: 1px solid var(--border);
467 -webkit-box-shadow: 0 0 6px var(--shadow);
468 box-shadow: 0 0 6px var(--shadow);
469 background-color: var(--light-bg);
470}
471
472.uploader-list-header {
473 background-color: var(--light-bg);
474 color: var(--theme-font);
475}
476
477.uploader-list-content {
478 background-color: var(--light-bg);
479}
480
481.progress-bar {
482 color: var(--light-bg);
483 background-color: var(--main-theme);
484}
485
486.progress {
487 background-color: var(--main-bg);
488}
489
490.file-chooser-item .item-active {
491 background: var(--main-theme)!important;
492 color: var(--main-font);
493}
494
495.list-view-header:hover {
496 background-color: var(--dark-bg);
497}
498
499.file-chooser-item .item-active .icon {
500 color: var(--main-font) !important;
501}
502
503.op-bar {
504 background: var(--main-bg);
505}
506
507.rename-container input:focus {
508 background-color: var(--light-bg);
509 border-color: var(--border);
510 box-shadow: 0 0 0 2px var(--shadow);
511 color: var(--main-font);
512}
513
514.rename-container input {
515 border: 1px solid var(--border);
516 color: var(--dark-font);
517}
518
519.side-nav-con [class^="sf2-icon-"], .side-nav-con [class^="sf3-font-"] {
520 color: var(--dark-font);
521}
522
523.side-nav-con .active [class^="sf2-icon-"], .side-nav-con .active [class^="sf3-font-"], .side-nav-con .active .sharp {
524 color: var(--theme-font);
525}
526
527.big-new-file-button {
528 background: var(--light-bg);
529 border: 1px solid var(--border);
530}
531
532.big-new-file-button:focus,
533.big-new-file-button:hover {
534 border-color:var(--border);
535 color: var(--main-font);
536 background: var(--main-theme);
537}
538
539.repo-info-bar {
540 border: 1px solid var(--light-bg);
541 background-color: var(--light-bg);
542}
543
544.used-tag-files {
545 color: var(--theme-font);
546}
547
548.tag-list-stacked .file-tag {
549 border: 0.125rem solid var(--dark-bg);
550}
551
552.table-drop-active:before {
553 border:1px solid var(--main-theme);
554 }
555
556 .tr-drop-effect {
557 background-color:var(--dark-bg)
558 }
559
560/******************
561 ADMIN MENU
562*****************/
563
564#right-panel .hd, .tabnav, .repo-file-list-topbar, .commit-list-topbar, .file-audit-list-topbar, #dir-view .repo-op, .wiki-top {
565 background: var(--main-bg);
566 border-bottom: 1px solid var(--border);
567}
568
569.seahub-web-settings h4, .header-bar h3 {
570 background: var(--main-bg);
571 border-bottom: 1px solid var(--border);
572}
573
574.side-nav {
575 border-right: 1px solid var(--border);
576 background-color: var(--main-bg);
577 box-shadow: 0 0 4px var(--shadow);
578}
579
580.logo-container {
581 background: var(--dark-bg);
582 border-bottom: 1px solid var(--border);
583}
584
585.side-tabnav-tabs .tab a:hover {
586 background-color: var(--dark-bg);
587}
588
589.side-tabnav-tabs .tab a:focus {
590 color: var(--main-font);
591}
592
593
594.side-tabnav-tabs .tab a {
595 color: var(--main-font);
596}
597
598.side-tabnav-tabs .tab-cur [class^="sf2-icon-"], .side-tabnav-tabs .tab-cur [class^="sf3-font-"] {
599 color: var(--light-font);
600}
601
602.side-tabnav-tabs .tab-cur a:hover {
603 background-color: var(--main-theme);
604 color: var(--light-font);
605}
606
607.side-tabnav-tabs .tab-cur a:focus {
608 color: var(--light-font);
609}
610
611.side-tabnav-tabs .tab-cur a {
612 background-color: var(--main-theme);
613 color: var(--light-font);
614}
615
616.header-bar {
617 background: var(--main-bg);
618}
619
620.side-tabnav h3.hd, .side-tabnav .hd h3 {
621 color: var(--theme-font);
622}
623
624.tabnav-tab-cur a, .tabnav-tab a:hover, .wiki-nav .cur-item .link, .wiki-nav .link:hover, #right-panel .hd .ui-state-active .a, #right-panel .hd .a:hover {
625 color: var(--theme-font);
626 border-bottom-color: var(--main-theme);
627}
628
629#right-panel .hd .a, .tabnav-tab a, .wiki-nav .link {
630 color: var(--dark-font);
631 border-bottom: 3px solid transparent;
632}
633
634#simplemodal-container {
635 background-color: var(--main-bg);
636}
637
638.hl {
639 background-color: var(--dark-bg);
640}
641
642.empty-tips {
643 background-color: var(--dark-bg);
644 border: solid 1px var(--border);
645 box-shadow: inset 0 0 4px var(--shadow);
646}
647
648dt, h2 {
649 color: var(--main-font);
650}
651
652h4, h3 {
653 color: var(--theme-font);
654}
655
656input {
657 color: var(--light-font);
658 background-color: var(--light-bg);
659 background: var(--light-bg);
660 border: 1px solid var(--border);
661}
662
663textarea {
664 background-color: var(--light-bg) !important;
665}
666
667input:focus, button:focus, select:focus, textarea:focus {
668 border-color: var(--border);
669}
670
671input, button, select {
672 border-color: var(--main-bg);
673}
674
675textarea {
676 border-color: var(--main-bg)!important;
677 border-radius: 0px!important;
678}
679
680body, input, textarea, button, select {
681 color: var(--main-font);
682}
683
684#info-bar {
685 color: var(--theme-font);
686 background: var(--dark-bg);
687 border: 1px solid var(--main-theme);
688}
689
690button, input[type=submit], input[type=button], input.submit, .sf-btn-link, .fileinput-button, select {
691 background: var(--light-bg);
692 border: 1px solid var(--border);
693 color: var(--main-font);
694}
695
696input[type=submit]:hover, input[type=reset]:hover, input[type=button]:hover, button:hover, .sf-btn-link:hover, .fileinput-button:hover {
697 background: var(--main-theme);
698 color: var(--light-font);
699}
700
701.web-setting-form .cancel, .inline-rename-form .cancel {
702 color: var(--error);
703}
704
705.select2-drop {
706 background: var(--light-bg);
707 color: var(--main-font);
708 border: 1px solid var(--border);
709 -webkit-box-shadow: 0 4px 5px var(--shadow);
710 box-shadow: 0 4px 5px var(--shadow);
711}
712
713.select2-results .select2-highlighted {
714 background: var(--main-theme);
715 color: var(--main-font);
716}
717
718.select2-default {
719 color: var(--main-font) !important;
720}
721
722.select2-container-multi .select2-choices {
723 border: 1px solid var(--border);
724 background-color: var(--light-bg);
725 color: var(--main-font);
726}
727
728.select2-results .select2-no-results, .select2-results .select2-searching, .select2-results .select2-ajax-error, .select2-results .select2-selection-limit {
729 background: var(--light-bg);
730 color: var(--main-font);
731}
732
733.select2-drop-active {
734 border: 1px solid var(--border);
735 color: var(--main-font);
736}
737
738.select2-drop.select2-drop-above.select2-drop-active {
739 border-top: 1px solid var(--border);
740}
741
742.select2-container-active .select2-choice, .select2-container-active .select2-choices {
743 color: var(--main-font);
744 border: 1px solid var(--border);
745 -webkit-box-shadow: 0 0 5px var(--shadow);
746 box-shadow: 0 0 5px var(--shadow);
747}
748
749.select2-dropdown-open.select2-drop-above .select2-choice,
750.select2-dropdown-open.select2-drop-above .select2-choices {
751 color: var(--main-font);
752 border: 1px solid var(--border);
753}
754
755.select2-container-multi.select2-container-active .select2-choices {
756 border: 1px solid var(--border);
757 -webkit-box-shadow: 0 0 5px var(--shadow);
758 box-shadow: 0 0 5px var(--shadow);
759 color: var(--main-font);
760}
761
762.select2-container-multi .select2-choices .select2-search-choice {
763 background: var(--main-theme);
764 color: var(--main-font);
765}
766
767.select2-container-multi .select2-choices .select2-search-choice {
768 color: var(--main-font);
769 box-shadow: 0 0 2px var(--shadow) inset, 0 1px 0 var(--shadow);
770}
771
772
773.select2-container-multi .select2-choices .select2-search-field input.select2-active {
774 background: var(--light-bg) url("select2-spinner.7b9776076d5f.gif") no-repeat 100% !important;
775 color: var(--main-font);
776}
777
778.select2-results .select2-disabled.select2-highlighted,
779.select2-container-multi .select2-choices .select2-search-field input {
780 color: var(--main-font);
781 background: var(--light-bg);
782}
783
784.fileinput-button {
785 background: var(--dark-bg);
786}
787
788.fileinput-button:hover {
789 background: var(--light-bg);
790}
791
792.input-tip {
793 color: var(--dark-font);
794}
795
796.select-white, .folder-perm-select, .share-permission-select, .user-role-select, .admin-role-select, .user-status-select {
797 background: var(--light-bg);
798 border: 1px solid var(--border);
799}
800
801.messages .info {
802 background:var(--info);
803 color: var(--light-font);
804 }
805 .messages .success {
806 background: var(--green);
807 color: var(--light-font);
808 }
809 .messages .error {
810 background:var(--error);
811 color: var(--light-font);
812}
813
814
815.info-item-heading {
816 border-bottom: 1px solid var(--border)!important;
817}
818
819.border-left-show:before {
820 background-color: var(--dark-bg)!important;
821}
822
823/******************
824 PROFILE PAGE
825*****************/
826
827.top-header {
828 background: var(--dark-bg);
829 border-bottom: 1px solid var(--border);
830}
831
832.heading {
833 background: var(--main-bg)!important;
834 color: var(--theme-font)!important;
835}
836.btn-outline-primary:hover {
837 color: var(--main-font);
838 background-color: var(--dark-bg);
839 border-color: var(--border);
840}
841
842.btn-outline-primary {
843 color: var(--main-font);
844 background-color: var(--light-bg);
845 border-color: var(--border);
846}
847
848.setting-item-heading {
849 border-bottom: 1px solid var(--border);
850}
851
852.side-panel {
853 border-right: 0px solid var(--border);
854}
855
856.user-setting-nav .nav-item .nav-link:hover {
857 color: var(--theme-font);
858}
859
860.user-setting-nav .nav-item .nav-link {
861 color: var(--main-font);
862}
863
864.user-setting-nav .nav-item.active .nav-link {
865 color: var(--theme-font);
866 border-color: var(--main-theme);
867}
868
869
870#user-profile {
871 background: var(--dark-bg);
872 border: 2px solid var(--shadow);
873
874}
875
876.user-profile-info {
877 border-top: 1px solid var(--border);
878}
879
880.dirent-table-container td {
881 text-align: right;
882}
883
884.text-orange {
885 color: var(--theme-font) !important;
886}
887
888/******************
889 LOGIN PAGE
890*****************/
891
892.login-panel .name-input {
893 border-radius: 3px 3px 0 0;
894}
895
896.login-panel {
897 background: var(--shadow);
898 box-shadow: 0 0 8px var(--shadow);
899}
900
901.login-panel .input {
902 border: 1px solid var(--shadow);
903}
904
905.login-panel .passwd-input {
906 border-radius: 0 0 3px 3px;
907}
908
909.new-narrow-panel {
910 border: 1px solid var(--border);
911 box-shadow: 0 3px 2px var(--shadow);
912}
913
914.new-narrow-panel .hd {
915 color: var(--main-font);
916 background: var(--dark-bg);
917 border-bottom: 1px solid var(--border);
918}
919
920
921
922#lang-context-selector a {
923 color: var(--main-font);
924}
925
926#lang-context-selector a:hover {
927 color: var(--light-font);
928 background: var(--light-bg);
929 }
930
931/******************
932 FILE EDITOR
933*****************/
934
935
936
937.file-view-content {
938 background: var(--light-bg);
939 border-bottom: 1px solid var(--border);
940}
941
942.file-view-tip {
943 background: var(--light-bg);
944 border: 1px solid var(--dark-bg);
945 box-shadow: 0 0 6px var(--shadow);
946}
947
948.file-view-header {
949 background: var(--dark-bg);
950 border-bottom: 1px solid var(--border);
951}
952
953.ReactCodeMirror {
954 -webkit-box-shadow: 0 0 6px var(--shadow);
955 box-shadow: 0 0 6px var(--shadow);
956 border: 1px solid var(--border);
957}
958
959.CodeMirror {
960 color: var(--main-font);
961}
962
963.CodeMirror-cursor {
964 border-left:1px solid var(--light-font);
965}
966
967.CodeMirror-linenumber {
968 color: var(--dark-font);
969}
970
971.CodeMirror-selected, .CodeMirror-focused .CodeMirror-selected {
972 filter: invert(70%);
973}
974
975.CodeMirror-gutter-filler, .CodeMirror-scrollbar-filler {
976 background-color:var(--main-bg)
977}
978
979.CodeMirror-gutters {
980 border-right:1px solid var(--dark-bg);
981 background-color:var(--main-bg);
982}
983
984.CodeMirror-lines {
985 background: var(--main-bg);
986}
987
988dd {
989 color: var(--theme-font);
990}
991
992.page {
993 background: var(--main-bg);
994 -webkit-box-shadow: 0 0 6px var(--shadow);
995 box-shadow: 0 0 6px var(--shadow);
996}
997
998.ril__navButtonPrev:hover {
999 background:rgba(0,0,0,.4) url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwIiBoZWlnaHQ9IjM0Ij48cGF0aCBkPSJtIDE5LDMgLTIsLTIgLTE2LDE2IDE2LDE2IDEsLTEgLTE1LC0xNSAxNSwtMTUgeiIgZmlsbD0iI0ZGRiIvPjwvc3ZnPg==") no-repeat 50%
1000}
1001.ril__navButtonNext:hover {
1002 background:rgba(0,0,0,.4) url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwIiBoZWlnaHQ9IjM0Ij48cGF0aCBkPSJtIDEsMyAyLC0yIDE2LDE2IC0xNiwxNiAtMSwtMSAxNSwtMTUgLTE1LC0xNSB6IiBmaWxsPSIjRkZGIi8+PC9zdmc+") no-repeat 50%
1003}
1004
1005.ril__closeButton:hover {
1006 background: rgba(0,0,0,.4) url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zd…UgLTEuMjUsLTEuMjUgNy41LC03LjUgLTcuNSwtNy41IHoiIGZpbGw9IiNGRkYiLz48L3N2Zz4=") no-repeat 50%;
1007}
1008
1009.ril__closeButton:hover {
1010 background: rgba(0,0,0,.4) url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIj48cGF0aCBkPSJtIDEsMyAxLjI1LC0xLjI1IDcuNSw3LjUgNy41LC03LjUgMS4yNSwxLjI1IC03LjUsNy41IDcuNSw3LjUgLTEuMjUsMS4yNSAtNy41LC03LjUgLTcuNSw3LjUgLTEuMjUsLTEuMjUgNy41LC03LjUgLTcuNSwtNy41IHoiIGZpbGw9IiNGRkYiLz48L3N2Zz4=") no-repeat 50%
1011}
1012.ril__zoomInButton:hover {
1013 background: rgba(0,0,0,.4) url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCI+PGcgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+PHBhdGggZD0iTTEgMTlsNi02Ii8+PHBhdGggZD0iTTkgOGg2Ii8+PHBhdGggZD0iTTEyIDV2NiIvPjwvZz48Y2lyY2xlIGN4PSIxMiIgY3k9IjgiIHI9IjciIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9zdmc+") no-repeat 50%
1014}
1015.ril__zoomOutButton:hover {
1016 background: rgba(0,0,0,.4) url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCI+PGcgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+PHBhdGggZD0iTTEgMTlsNi02Ii8+PHBhdGggZD0iTTkgOGg2Ii8+PC9nPjxjaXJjbGUgY3g9IjEyIiBjeT0iOCIgcj0iNyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjIiLz48L3N2Zz4=") no-repeat 50%
1017}
1018
1019.seafile-ed-hovermenu {
1020 background-color: var(--light-bg);
1021 border: 1px solid var(--main-bg);
1022 -webkit-box-shadow: 0 1px 2px 0 var(--shadow);
1023}
1024
1025
1026/******************
1027 MD REDACTOR
1028 *****************/
1029
1030.sf-md-viewer-topbar-first, .sf-md-viewer-topbar-first-narrow {
1031 background-color: var(--dark-bg);
1032 border-bottom: 1px solid var(--border);
1033 -webkit-box-shadow: 0 3px 2px -2px var(--shadow);
1034 box-shadow: 0 3px 2px -2px var(--shadow);
1035}
1036
1037.sf-editor-rich-menu {
1038 background-color: var(--main-bg);
1039}
1040
1041.plain-editor-left-panel {
1042 background-color: var(--light-bg);
1043 border-right: 1px solid var(--border);
1044}
1045
1046.editor, .plain-editor-right-panel {
1047 background: var(--main-bg);
1048 border: 1px solid var(--dark-bg);
1049}
1050
1051.seafile-editor-topbar, .seafile-rich-editor-topbar {
1052 background-color: var(--main-bg);
1053 border-bottom: 1px solid var(--border);
1054 -webkit-box-shadow: 0 2px 1px -1px var(--shadow);
1055 box-shadow: 0 2px 1px -1px var(--shadow);
1056}
1057
1058.header-list-container, .seafile-rich-editor-topbar .editor-btn-group {
1059 border-right: 1px solid var(--border);
1060 border-left: 1px solid var(--border);
1061}
1062
1063.btn-active[data-active=true], .rich-icon-btn[data-active=true] {
1064 color: var(--light-font);
1065}
1066
1067.button-container .btn, .button-container .rich-icon-btn, .rich-icon-btn {
1068 background-color: var(--main-bg);
1069}
1070
1071
1072.seafile-rich-editor-topbar .editor-btn-group {
1073 border-right: 1px solid var(--border);
1074 color: var(--main-font);
1075}
1076
1077.upload-localimg-hover .btn:hover, .insert-file:hover, .rich-icon-btn-hover:hover {
1078 /*background-color: var(--main-theme);*/
1079 color: var(--light-font);
1080}
1081
1082.custom-dropdown-list .dropdown-list-toggle:hover {
1083 background-color: var(--main-theme);
1084 border-radius: 3px;
1085}
1086
1087.custom-dropdown-list .custom-dropdown-menu {
1088 background-color: var(--light-bg);
1089}
1090
1091.header-list-container .header-list-body-highlight, .header-list-container .header-list-body-hover:hover {
1092 background-color: var(--main-bg);
1093}
1094
1095.header-list-container .list-dropdown {
1096 border: 1px solid var(--border);
1097 -webkit-box-shadow: 0 0 2px var(--shadow);
1098 box-shadow: 0 0 2px var(--shadow);
1099 background-color: var(--main-bg);
1100}
1101
1102.header-list-container .header-list .list-dropdown-item:hover {
1103 background-color: var(--main-theme);
1104 color: var(--light-font);
1105}
1106
1107.upload-localimg .btn, .rich-icon-btn {
1108 color: var(--main-font);
1109}
1110
1111.upload-localimg-disable .btn {
1112 color:var(--dark-font);
1113}
1114
1115.rich-icon-btn-disabled {
1116 color:var(--dark-font);
1117}
1118
1119.rich-icon-btn-disabled:hover {
1120 color:var(--dark-font);
1121}
1122
1123.article h1, .article h2, .article h3, .article h4, .article h5, .article h6 {
1124 color: var(--dark-font);
1125}
1126
1127.article {
1128 color: var(--main-font);
1129}
1130
1131.seafile-editor-main-panel {
1132 background-color: var(--light-bg);
1133}
1134
1135.article tr:nth-child(2n+1) {
1136 background-color: var(--light-bg);
1137}
1138
1139.article pre {
1140 background: var(--light-bg);
1141}
1142
1143.article h2 {
1144 border-bottom: 1px solid var(--dark-font);
1145}
1146
1147.article table td, .article table th, table {
1148 border-color: var(--dark-font);
1149}
1150
1151.article table {
1152 border-left: 1px solid var(--dark-font);
1153 border-top: 1px solid var(--dark-font);
1154}
1155
1156.article hr.active {
1157 border-top: 1px solid var(--dark-font);
1158}
1159
1160.article .selected-cell {
1161 background-color: var(--dark-bg);
1162}
1163
1164.article .selected-cell-top:before {
1165 border-top:1px double var(--main-theme)
1166 }
1167 .article .selected-cell-bottom:before {
1168 border-bottom:1px double var(--main-theme)
1169 }
1170 .article .selected-cell-left:before {
1171 border-left:1px double var(--main-theme)
1172 }
1173 .article .selected-cell-right:before {
1174 border-right:1px double var(--main-theme)
1175 }
1176
1177.seafile-editor-side-panel {
1178 border-left: 1px solid var(--border);
1179}
1180
1181.outline-h2 {
1182 color: var(--dark-font);
1183}
1184
1185.outline-h2:hover {
1186 color: var(--theme-font);
1187}
1188
1189.outline-h3, .dirent-table-container td, .old-history-main h2 {
1190 color: var(--main-font);
1191}
1192
1193.outline-h3:hover {
1194 color: var(--theme-font);
1195}
1196
1197
1198.side-panel .nav .nav-link.active {
1199 color: var(--theme-font);
1200}
1201
1202.old-history-main .file-name, .old-history-main .commit-list .username, .old-history-main .go-back:hover {
1203 color: var(--theme-font);
1204}
1205
1206.issue-card {
1207 background-color: var(--light-bg);
1208 border: 1px solid var(--border);
1209 -webkit-box-shadow: 0 5px 5px -2px var(--shadow);
1210 box-shadow: 0 5px 5px -2px var(--shadow);
1211}
1212
1213.seafile-comment-item .seafile-comment-info .seafile-comment-dropdown button:hover {
1214 color: var(--light-font);
1215 background-color: var(--no-shadow);
1216}
1217
1218.seafile-comment-item .seafile-comment-info .seafile-comment-dropdown button {
1219 background-color: var(--no-shadow);
1220 color: var(--main-font);
1221}
1222
1223.seafile-comment-item .seafile-comment-info .seafile-comment-dropdown .seafile-comment-dropdown-btn {
1224 color: var(--light-font);
1225 background-color: var(--no-shadow);
1226}
1227
1228.seafile-comment-item .seafile-comment-info .seafile-comment-dropdown:hover .seafile-comment-dropdown-btn {
1229 color: var(--main-font);
1230}
1231
1232.seafile-comment-item-resolved {
1233 background-color: var(--green);
1234}
1235
1236.seafile-comment-item .seafile-comment-info .seafile-comment-dropdown button:focus {
1237 background-color: var(--no-shadow);
1238}
1239
1240.seafile-comment-item .seafile-comment-info .review-time {
1241 color: var(--theme-font);
1242}
1243
1244.file-chooser-item .item-active {
1245 background:var(--dark-bg)!important;
1246 color:var(--main-font)
1247 }
1248 .file-chooser-item .item-active,
1249 .file-chooser-item .item-info:hover {
1250 -webkit-box-shadow:inset 0 0 1px var(--shadow);
1251 box-shadow:inset 0 0 1px var(--shadow);
1252 }
1253 .file-chooser-item .item-info:hover {
1254 background:var(--dark-bg);
1255 }
1256 .file-chooser-item .item-active .icon {
1257 color:var(--main-font);
1258}
1259
1260.lds-ripple div {
1261 border:4px solid var(--theme-font);
1262}
1263
1264.article blockquote {
1265 color: var(--main-font);
1266 border-left: 4px solid var(--dark-font);
1267}
1268
1269.add-tag-link {
1270 color:var(--main-font);
1271 background: var(--light-bg);
1272}
1273
1274.add-tag-link:hover {
1275 color:var(--theme-font);
1276 background: var(--light-bg);
1277}
1278
1279.add-related-file-link {
1280 color: var(--main-font);
1281}
1282
1283.add-related-file-link:hover {
1284 color: var(--theme-font);
1285}
1286
1287.tag-list-item .tag-demo {
1288 color: var(--dark-bg);
1289}
1290
1291.file-tag-list .file-tag-item {
1292 background-color: var(--light-bg);
1293}
1294
1295.file-tag-list .file-tag-item:hover {
1296 background-color: var(--dark-bg);
1297}
1298
1299.table thead th, .text-wrap table thead th {
1300 border-bottom: 1px solid var(--border) ;
1301}
1302
1303.image-full-button {
1304 border:1px solid rgba(0,40,100,.12);
1305 background-color:var(--light-bg);
1306 }
1307 .image-full-button:hover {
1308 background-color:var(--light-bg)
1309}
1310
1311.seafile-ed-hovermenu .seafile-ed-hovermenu-btn {
1312 background-color: var(--light-bg);
1313}
1314
1315.seafile-ed-hovermenu .seafile-ed-hovermenu-triangle {
1316 background: var(--light-bg);
1317}
1318
1319.seafile-editor-help {
1320 background-color: var(--light-bg);
1321 border-left: 1px solid var(--border);
1322}
1323
1324.seafile-editor-help .help-header {
1325 background-color: var(--light-bg);
1326 border-bottom: 1px solid var(--border);
1327}
1328
1329
1330.help-shortcut {
1331 color: var(--main-font);
1332 border-bottom: 1px solid var(--border);
1333}
1334
1335.help-content .help-shortcut-type {
1336 border-bottom: 1px solid var(--border);
1337}
1338
1339.help-shortcut .key {
1340 background-color: var(--dark-bg);
1341 border: 1px solid var(--border);
1342 -webkit-box-shadow: 0 1px 0 var(--border);
1343 box-shadow: 0 1px 0 var(--shadow);
1344}
1345
1346.article .language-type select {
1347 background-color: var(--dark-bg);
1348}
1349
1350
1351/******************
1352 comment
1353*****************/
1354
1355.seafile-comment-footer .submit-comment {
1356 width: 80px;
1357}
1358
1359.seafile-comment-list {
1360 background-color: var(--main-bg);
1361}
1362
1363.seafile-comment-footer {
1364 background-color: var(--dark-bg);
1365 border-top: 1px solid var(--border);
1366}
1367
1368textarea {
1369 color: var(--main-font);
1370}
1371
1372.side-panel .nav {
1373 border-bottom: 1px solid var(--no-shadow);
1374}
1375
1376.seafile-comment-title, .seafile-history-title {
1377 border-bottom: 1px solid var(--border);
1378 background-color: var(--dark-bg);
1379}
1380
1381.seafile-comment-toggle-resolved {
1382 border-bottom: 1px solid var(--border);
1383 background-color: var(--dark-bg);
1384}
1385
1386.seafile-comment {
1387 border-left: 0px solid var(--border);
1388}
1389
1390.seafile-comment-footer .add-comment-input, .seafile-edit-comment .edit-comment-input {
1391 border: 1px solid var(--border);
1392 background-color: var(--light-bg);
1393}
1394
1395.custom-switch-input:checked ~ .custom-switch-indicator {
1396 background: var(--dark-font);
1397}
1398
1399.custom-switch-indicator:before {
1400 background: var(--light-bg);
1401}
1402
1403.custom-switch-input:focus ~ .custom-switch-indicator {
1404 box-shadow: 0 0 0 0px var(--shadow);
1405 border-color: var(--border); }
1406
1407 .custom-switch-indicator {
1408 background: var(--main-bg);
1409 border: 1px solid var(--dark-bg);
1410}
1411
1412.participants .add-participants i {
1413 color: var(--main-font);
1414 border: 0px solid var(--border);
1415}
1416
1417.participants .avatar {
1418 border: 0px solid var(--border);
1419}
1420
1421.seafile-editor-module .side-panel .nav {
1422 border-bottom: 1px solid var(--border);
1423}
1424
1425.seafile-editor-module .side-panel {
1426 background-color: var(--main-bg);
1427}
1428
1429.seafile-editor-module .side-panel .nav .nav-link.active {
1430 color: var(--main-theme);
1431}
1432
1433.comment-dialog, .comment-dialog-triangle {
1434 background-color: var(--main-bg);
1435}
1436
1437.comment-dialog {
1438 border: 1px solid var(--border);
1439 -webkit-box-shadow: 0 0 3px var(--shadow);
1440 box-shadow: 0 0 3px var(--shadow);
1441}
1442
1443.comment-dialog textarea {
1444 background-color: var(--light-bg) !important;
1445}
1446
1447.seafile-viewer-comment-btn:hover {
1448 border: 1px solid var(--border);
1449 -webkit-box-shadow: 0 1px 2px 0 var(--shadow);
1450 box-shadow: 0 1px 2px 0 var(--shadow);
1451 background-color: var(--main-theme);
1452}
1453
1454.seafile-viewer-comment-btn {
1455 border: 1px solid var(--border);
1456 -webkit-box-shadow: 0 1px 2px 0 var(--shadow);
1457 box-shadow: 0 1px 2px 0 var(--shadow);
1458 background-color: var(--border);
1459
1460}
1461
1462/******************
1463 SHARE
1464*****************/
1465
1466
1467.shared-file-view-md-header {
1468 background: var(--dark-bg);
1469 border-bottom: 1px solid var(--border);
1470}
1471
1472.shared-file-view-body {
1473 background: var(--light-bg);
1474 border: 1px solid var(--border);
1475}
1476
1477.shared-file-view-head {
1478 background: var(--main-bg);
1479}
1480
1481.shared-file-view-head h2 {
1482 overflow: visible;
1483 color: var(--theme-font);
1484}
1485
1486.btn-success {
1487 color: var(-);
1488 background-color: var(--main-theme);
1489 border-color: var(--main-theme);}
1490 .btn-success:hover {
1491 color: var(--main-font);
1492 background-color: var(--green);
1493 border-color: var(--green); }
1494 .btn-success:focus, .btn-success.focus {
1495 box-shadow: 0 0 1px var(--no-shadow); }
1496 .btn-success.disabled, .btn-success:disabled {
1497 color: var(--dark-font);
1498 background-color: var(--main-theme);
1499 border-color: var(--main-theme); }
1500 .btn-success:not(:disabled):not(.disabled):active, .btn-success:not(:disabled):not(.disabled).active,
1501 .show > .btn-success.dropdown-toggle {
1502 color: var(--main-font);
1503 background-color: var(--green);
1504 border-color: var(--green); }
1505 .btn-success:not(:disabled):not(.disabled):active:focus, .btn-success:not(:disabled):not(.disabled).active:focus,
1506 .show > .btn-success.dropdown-toggle:focus {
1507 box-shadow: 0 0 2px var(--no-shadow);
1508}
1509
1510#image-view {
1511 background: var(--main-bg);
1512 border: 1px solid var(--no-shadow);
1513}
1514
1515.shared-file-view-body .md-view {
1516 border: 1px solid var(--border);
1517 -webkit-box-shadow: 0 0 6px var(--shadow);
1518 box-shadow: 0 0 6px var(--shadow);
1519 background: var(--main-bg);
1520}
1521
1522
1523/******************
1524 HELP PAGE
1525*****************/
1526
1527
1528.side-textnav-tabs .tab a {
1529 color: var(--main-font);
1530 border-bottom: 1px solid var(--no-shadow);
1531}
1532
1533.side-textnav .hd, .side-info .hd {
1534 border-bottom: 1px solid var(--no-shadow);
1535}
1536
1537.side-textnav-tabs .tab-cur a, .side-textnav-tabs .tab a:hover {
1538 color: var(--theme-font);
1539}
1540
1541/******************
1542 EDITOR TEXT COLOR
1543*****************/
1544
1545pre {
1546 color: var(--main-font);
1547 text-shadow: none;
1548}
1549
1550.CodeMirror pre {
1551 color: var(--main-font);
1552}
1553
1554.cm-s-default .cm-atom {
1555 color: #63c3e3;
1556}
1557
1558.cm-s-default .cm-tag {
1559 color: #ff4747;
1560}
1561
1562.cm-s-default .cm-qualifier {
1563 color: #ffa347;
1564}
1565
1566.cm-s-default .cm-metar {
1567 color: #ff6347;
1568}
1569
1570.cm-s-default .cm-number {
1571 color: #a3d175;
1572}
1573
1574.cm-s-default .cm-string {
1575 color: #75d1ba;
1576}
1577
1578.article .virtual-link {
1579 color: #47a3ff;
1580}
1581
1582.cm-s-default .cm-type {
1583 color: #ff4747;
1584}
1585
1586.cm-s-default .cm-variable-2 {
1587 color: #ff6347;
1588}
1589
1590.cm-s-default .cm-variable-3 {
1591 color: #ff7547;
1592}
1593
1594.cm-s-default .cm-builtin {
1595 color: #75d1ba;
1596}
1597
1598.cm-s-default .cm-header {
1599 color: #5ec6e8;
1600}
1601
1602.cm-s-default .cm-link {
1603 color: var(--theme-font);
1604}
1605
1606.cm-s-default .cm-comment {
1607 color: var(--dark-font);
1608}
1609
1610.cm-s-default .cm-keyword {
1611 color: #ba75d1;
1612}
1613
1614.cm-s-default .cm-def {
1615 color: #63a3e3;
1616}
1617
1618.cm-s-default .cm-quote {
1619 color: #75d1a3;
1620}
1621
1622.cm-s-default .cm-meta {
1623 color: #da7d6c;
1624}
1625
1626.cm-s-default .cm-attribute {
1627 color: #8888dd;
1628}
1629
1630
1631/*INNER*/
1632
1633
1634.css-vj8t7z {
1635 background-color: var(--light-bg) !important;
1636 border-color: var(--border) !important;
1637}
1638
1639.css-2o5izw {
1640 background-color: var(--light-bg) !important;
1641 border-color: var(--border) !important;
1642 box-shadow: 0 0 2px var(--shadow) !important;
1643}
1644
1645.css-xp4uvy {
1646 color: var(--main-font) !important;
1647}
1648
1649.css-d8oujb {
1650 background-color: var(--dark-font) !important;
1651}
1652
1653.css-15k3avv {
1654 background-color: var(--light-bg) !important;
1655}
1656
1657.css-15agui6, [data-css-15agui6], .css-16hxgpx, [data-css-16hxgpx] {
1658 background-color: var(--light-bg) !important;
1659 box-shadow: 0 0 2px var(--shadow) !important;
1660}
1661
1662.css-1tlqf55 {
1663 color: var(--main-font) !important;
1664}

Powered by Opengist ⋅ Load: 365ms⋅

English
⋅ Alveus ⋅ Alveus Forge