1@import '_variables.scss';
2
3/* Global
4==================================================== */
5
6input.button {
7    margin-right: 10px;
8}
9
10.mu.txt-24 {
11    font-size: 24px;
12}
13
14.dokuwiki a.wikilink2,
15.usr-content .page a.wikilink2 {
16    border-bottom: 0px;
17    border-bottom: $border-link-weight dotted currentColor !important;
18}
19
20.action.media {
21    text-decoration: inherit;
22    color: inherit;
23}
24
25.no-outline {
26    outline: 0;
27}
28
29/* Skip Link
30==================================================== */
31.skip.a11y:focus {
32  left: 10px !important;
33  top: 10px !important;
34  width: auto !important;
35  height: auto !important;
36  color: $text-default;
37  background-color: $grey-100;
38  border-radius: $br;
39  padding: $xs-pad;
40  margin-top: 0px;
41}
42
43/* Navigation
44==================================================== */
45
46nav {
47    width: 100%;
48    z-index: 1000;
49    box-shadow: $box-shadow-default;
50    transition: 0.6s box-shadow;
51}
52
53@media (max-width: 575.98px) {
54    .td-header:hover {
55        box-shadow: $box-shadow-active;
56    }
57}
58
59nav #wiki-logo {
60  vertical-align: middle;
61  display: inline-block;
62}
63
64.nav-brand a {
65  display: block;
66  border-bottom: none;
67}
68
69.nav-brand img {
70  height: 35px;
71  width: 35px;
72  margin-right: 5px;
73}
74
75nav .nav-bar {
76    background-color: $bg-dark-extra;
77    height: 65px;
78    width: 100%;
79    left: 0;
80    right: 0;
81    color: $text-light;
82    padding-top: 6px;
83    overflow: hidden;
84}
85
86nav .nav-bar .container {
87    margin-top: 5px;
88}
89
90nav .nav-bar #doku-action-btn button {
91  border-color: transparent;
92}
93
94nav .nav-bar .nav-brand {
95    float: left;
96    h2 {
97        font-size: 18px;
98        margin: 0;
99        margin-top: 4px;
100        text-overflow: ellipsis;
101        white-space: nowrap;
102        display: inline-block;
103    }
104}
105
106nav .nav-bar .nav-brand h2 a {
107    border-bottom: none !important;
108    span:hover,
109    span:focus,
110    span:active {
111        border-bottom: $border-link !important;
112    }
113}
114
115nav .nav-bar .nav-actions {
116    color: $white;
117    text-align: right;
118}
119
120nav .nav-bar .nav-actions .nav-search {
121    margin-left: 10px;
122    margin-right: 10px;
123    margin-top: 4px;
124}
125
126nav .nav-bar .nav-actions button {
127    font-weight: $font-weight-base;
128}
129
130@media (max-width: 767.98px) {
131    nav .nav-bar .nav-actions button {
132        padding: 10px 10px 10px 10px;
133        font-size: 0.8em;
134    }
135}
136
137
138
139@media (max-width: 767.98px) {
140    nav .nav-bar .nav-item {
141        margin-left: 5px;
142    }
143    nav .nav-bar h2 {
144      display: none;
145    }
146}
147
148nav .nav-expanded #menu_unified {
149    display: none;
150}
151
152nav .nav-expanded-inner {
153    background-color: $bg-dark;
154    color: $text-light;
155    padding-top: 30px;
156    padding-bottom: 30px;
157    font-size: $font-size-ui;
158}
159
160nav .nav-expanded-inner .menu-icon {
161    display: block;
162    margin-top: 7px;
163    margin-bottom: 10px;
164    font-size: 24px;
165}
166
167nav .nav-expanded-inner ul {
168    padding: 0;
169    list-style-type: none;
170    margin-top: 20px;
171}
172
173nav .nav-expanded-inner li {
174    list-style: none;
175    margin-bottom: 10px;
176}
177
178nav .nav-expanded-inner li a {
179    text-decoration: none;
180}
181
182nav .nav-expanded-inner li a:hover,
183nav .nav-expanded-inner li a:focus,
184nav .nav-expanded-inner li a:active {
185    text-decoration: inherit;
186}
187
188nav .nav-expanded-inner .icon {
189  margin-right: 4px;
190}
191
192.nav-expanded-inner .right {
193  margin-top: 30px;
194}
195
196nav .nav-expanded #dw__search {
197    vertical-align: middle;
198}
199
200nav .nav-expanded #qsearch__in {
201    max-width: 50%
202}
203
204.dokuwiki form.search div.ajax_qsearch {
205    top: 20px;
206    left: 0;
207    width: 15em;
208    z-index: 20;
209    border-radius: $br;
210    box-shadow: $box-shadow-default;
211    li {
212        text-align: left;
213    }
214}
215
216@media only screen and (min-width:576px) {
217  .nav-expanded-inner .right {
218    margin-top: 0px;
219  }
220  nav .nav-expanded-inner .menu-icon {
221      font-size: 17px;
222  }
223}
224
225@media only screen and (max-width: 576px) {
226  nav .nav-bar .nav-actions {
227      white-space: nowrap;
228      overflow-x: scroll;
229      -ms-overflow-style: none;
230      scrollbar-width: none;
231      ::-webkit-scrollbar {
232        display: none;
233      }
234  }
235}
236
237/* UI Elements
238==================================================== */
239
240.ui {
241    font-size: $font-size-ui;
242}
243
244.ui-title {
245    font-weight: 600;
246}
247
248
249/* User content ==================================================== */
250
251.dokuwiki div.section_highlight {
252    margin: inherit;
253    padding: 0px;
254    border: 0px;
255    animation: 0.2s linear forwards sectionHighlightShadow;
256}
257
258@keyframes sectionHighlightShadow {
259 from {box-shadow: none;}
260 to {box-shadow: rgba(0, 0, 0, 0.3) 10px 0px 10px -10px;}
261}
262
263.btn_secedit button {
264    font-size: $font-size-small;
265    font-weight: normal;
266    padding: 5px;
267    border: 0px;
268    color: $text-ui;
269}
270.btn_secedit button:hover {
271    color: $white;
272}
273.btn_secedit button::after {
274    margin-left: 5px;
275    content: "\E731";
276    font-family: 'microns';
277}
278
279.usr-content {
280    padding-bottom: 100px;
281    min-height: calc(88vh);
282}
283
284.usr-inner {
285    margin-top: 30px;
286}
287
288@media only screen and (max-width: 767.98px) {
289    .usr-content {
290        padding-top: 19px;
291    }
292}
293
294@media only screen and (min-width: 768px) {
295    .usr-content {
296        padding-top: 15px;
297    }
298    .usr-content .usr-inner {
299        margin-top: 70px;
300    }
301}
302
303@media (min-width: 1200px) {
304    .container {
305        max-width: 1000px;
306    }
307}
308
309.breadcrumbs {
310    font-size: $font-size-ui;
311    line-height: 1.7em;
312    .bchead {
313        display: none;
314    }
315}
316
317.breadcrumbs .bcsep {
318    display: none;
319}
320
321.breadcrumbs:not(span) {
322    color: transparent;
323    user-select: none;
324}
325
326.breadcrumbs bdi {
327    display: inline-block;
328    color: $text-default;
329}
330
331.breadcrumbs bdi::after {
332    content: "\E705";
333    font-family: 'microns';
334    padding-left: 5px;
335}
336
337@media only screen and (max-width: 767.98px) {
338    .breadcrumbs {
339        font-size: $font-size-small;
340    }
341}
342
343.usr-content .page {
344    border-top: $border-bold;
345    padding-top: $lg-pad;
346}
347
348.usr-content .page p img {
349    max-width: 100%;
350    height: auto;
351    display: block;
352}
353
354.usr-content .page p img.icon {
355  height: 0.94em;
356  display: inline-block;
357  margin: 0;
358}
359
360.usr-content h1 {
361    margin-top: $xlg-pad;
362}
363
364.usr-content h2,
365.usr-content h3,
366.usr-content h4 {
367    margin-top: $xlg-pad;
368}
369
370.usr-content h5 {
371    margin-top: $xlg-pad;
372}
373
374.usr-content p.caption {
375    text-align: center;
376    color: #898989;
377    font-size: 0.9em;
378}
379
380@media only screen and (min-width: 768px) {
381    .usr-content .col-side {
382        padding-left: 30px;
383    }
384}
385
386/*.nav-side {
387    position: fixed;
388    position: -webkit-sticky;
389    position: sticky;
390    top: $lg-pad;
391}
392
393.nav-side .nav-side-inner {
394    height: 90vh;
395    overflow: scroll;
396} */
397
398.nav-side #dw__toc,
399.nav-side #dokuwiki__aside {
400    /* position: -webkit-sticky;
401    position: sticky;
402    top: 30px;
403    z-index: 1020; */
404    background: none;
405    font-size: $font-size-ui;
406    /* overflow: scroll;
407    height: 90vh; */
408    float: none;
409    margin: 0;
410    border-top: $border-width solid $text-default;
411    padding-top: $lg-pad;
412    width: 100%;
413}
414
415@media only screen and (max-width: 767.98px) {
416    .nav-side #dw__toc,
417    .nav-side #dokuwiki__aside {
418        margin-top: $lg-pad;
419    }
420}
421
422.nav-side #dw__toc {
423    margin-bottom: 40px !important
424}
425
426.nav-side #dw__toc a,
427.nav-side #dokuwiki__aside a {
428    text-decoration: none;
429    color: $text-ui;
430    line-height: $line-height-cond !important;
431}
432
433.nav-side #dw__toc h3,
434.nav-side #dokuwiki__aside h3 {
435    font-size: $font-size-ui;
436    color: $text-default;
437    font-weight: 700;
438    margin-top: 4px;
439    margin-bottom: 18px;
440}
441
442.nav-side h3.toggle {
443    padding: 0px;
444}
445
446.nav-side #dw__toc>div {
447    padding: 0px;
448}
449
450.nav-side ul li {
451    margin-bottom: 5px;
452}
453
454.back-to-top-wrapper {
455    position: absolute;
456    top: 80vh;
457    bottom: -5em;
458    pointer-events: none;
459}
460
461.mode_profile,
462.mode_register,
463.mode_login,
464.mode_resendpwd {
465    .back-to-top-wrapper {
466        display: none;
467    }
468}
469
470.back-to-top-link {
471    position: fixed;
472    position: -webkit-sticky;
473    position: sticky;
474    pointer-events: all;
475    top: calc(100vh - 10rem);
476    display: inline-block;
477    -webkit-transition: -webkit-transform 80ms ease-in;
478    transition: -webkit-transform 80ms ease-in;
479    transition: transform 80ms ease-in;
480    transition: transform 80ms ease-in, -webkit-transform 80ms ease-in;
481    color: $text-ui;
482    font-size: $font-size-ui;
483    background: $paper;
484    background: linear-gradient(180deg, rgba(251, 251, 251, 0) 0%, rgba(251, 251, 251, 1) 43%);
485}
486
487@media only screen and (max-width: 767.98px) {
488    .back-to-top-wrapper {
489        display: none;
490    }
491}
492
493/* Poor compatibility gradient version
494.back-to-top-link::after {
495	background: linear-gradient(180deg, rgba(251,251,251,0) 0%, rgba(251,251,251,1) 43%);
496	content: "";
497	width: 100%;
498	display: block;
499	top: -100px;
500	position: absolute;
501	min-width: 175px;
502	z-index: -100;
503	height: 200px;
504} */
505
506div.insitu-footnote {
507    padding: 0.25rem 0.5rem;
508    font-size: 0.875rem;
509    line-height: 1.5;
510    color: $white;
511    background-color: rgba(0, 0, 0, 0.77);
512    border-radius: 7px;
513    max-height: 50px;
514    overflow: scroll;
515}
516
517.usr-content .fn_top {
518    margin-right: 3px;
519    color: $primary;
520    text-decoration: none;
521    border-bottom: 1px solid currentColor;
522}
523
524.usr-content .fn_bot {
525    color: $text-ui;
526    margin-right: 5px;
527}
528
529.usr-content a.fn_bot {
530    text-decoration: none;
531}
532
533.dokuwiki div.footnotes {
534    margin-top: 50px;
535    border-top: $border-width solid $dividers;
536    border-radius: 1px;
537    margin-bottom: 5em;
538}
539
540.usr-content .fn {
541    margin-bottom: 2rem;
542}
543
544.usr-content .fn .content {
545    color: #333840;
546}
547
548.JSpopup,
549#link__wiz {
550    margin-top: 20px;
551}
552
553/* Edit Page
554==================================================== */
555
556.dokuwiki .editBox {
557    margin-top: $xlg-pad;
558    border-top: $border-bold;
559    padding-top: $lg-pad;
560}
561
562.dokuwiki .editBar .editButtons {
563    display: inline-block;
564    margin-bottom: 20px;
565}
566
567.mode_edit #draft__status, .mode_preview #draft__status,
568.mode_draft #draft__status {
569    color: $primary;
570    font-size: $font-size-ui;
571}
572
573#edit__summary.missing {
574    background-color: $red-light;
575}
576
577.mode_edit button[name="do[cancel]"], .mode_preview button[name="do[cancel]"] {
578    font-weight: $font-weight-base;
579}
580
581.mode_edit .toolbutton,
582.mode_preview .toolbutton,
583div.picker button.toolbutton {
584    padding-left: 5px;
585    padding-right: 5px;
586    padding-top: 2px;
587    padding-bottom: 2px;
588    border: 1px solid transparent;
589    &:active,
590    &:hover,
591    &:focus {
592        border: $border-ui;
593        background-color: $bg-light-well;
594        box-shadow: none;
595    }
596}
597
598.dokuwiki div.preview,
599.dokuwiki .diff_sidebyside {
600    border: none;
601    padding: $sm-pad;
602    background-color: $white;
603    box-shadow: $box-shadow-default;
604    border-radius: $br;
605}
606
607.dokuwiki h1#preview {
608    padding-top: $xlg-pad;
609    border-top: $border-bold;
610}
611
612.mode_edit .usr-content .page .license,
613.mode_preview .usr-content .page .license {
614    color: $text-ui;
615    font-size: $font-size-ui;
616    line-height:$line-height-cond;
617}
618
619
620/* User Pages ==================================================== */
621
622.mode_profile .usr-content fieldset,
623.mode_register .usr-content fieldset,
624.mode_login .usr-content fieldset,
625.mode_resendpwd .usr-content fieldset {
626    margin-top: 70px;
627    width: 100%;
628    max-width: 500px;
629    border: 2px;
630    border-radius: 7px;
631}
632
633.mode_profile .usr-content fieldset legend,
634.mode_register .usr-content fieldset legend,
635.mode_login .usr-content fieldset legend,
636.mode_resendpwd .usr-content fieldset legend {
637    font-size: $font-size-h4;
638    font-weight: $font-weight-strong;
639    background: transparent;
640    border-radius: 0px;
641    padding: 0px;
642    border-bottom: none;
643    text-align: left;
644    border-top: $border-bold;
645    padding-top: $lg-pad;
646}
647
648.dokuwiki label.block select,
649.dokuwiki label.block input.edit {
650    width: 100%;
651}
652
653.dokuwiki label:not(.simple).block {
654    text-align: left;
655    font-weight: 300;
656}
657
658#config__manager fieldset {
659    margin: 0px;
660    max-width: 100%;
661    padding: 0px;
662    font-size: 0.9em;
663}
664
665
666/* Discussion Plugin
667==================================================== */
668
669div.dokuwiki div.comment_wrapper {
670    background-color: transparent;
671    padding: 0px;
672    margin-top: 90px;
673    border-top: $border-bold;
674}
675
676div.dokuwiki div.comment_wrapper #discussion__section {
677    color: inherit;
678    border-bottom: none !important;
679    cursor: default;
680}
681
682div.dokuwiki div.comment_text:not(textarea) {
683    font-size: $font-size-ui;
684    color: $text-ui;
685}
686
687div.dokuwiki div.comment_wrapper #discussion__comment_text {
688    height: 100px;
689}
690
691div.dokuwiki div.comment_wrapper h2:first-child {
692    margin-top: 20px;
693    font-size: $font-size-h5;
694}
695
696div.dokuwiki .comment_body {
697    border: 0;
698    background-color: $paper-active;
699    padding: 10px;
700    border-radius: $br;
701}
702
703div.dokuwiki div.comment_buttons {
704    float: left;
705    cursor: pointer;
706    margin-top: 0px;
707    padding-bottom: 1.4em;
708}
709
710div.dokuwiki div.comment_buttons input.button {
711    font-size: $font-size-ui;
712    color: $primary;
713    border: none;
714    background: none;
715    border-radius: 0px;
716    padding: 0px;
717    border-bottom: 1px solid transparent;
718    font-weight: $font-weight-base;
719    &:hover,
720    &:focus,
721    &:active {
722        background: none;
723        color: $primary-active;
724        border-bottom: 1px solid $primary-active;
725    }
726}
727
728div.dokuwiki .comment_head span.author {
729    background: transparent;
730    padding: inherit;
731    font-weight: 700;
732}
733
734div.dokuwiki .comment_head abbr.published {
735    background: transparent;
736    padding: inherit;
737}
738
739div.dokuwiki #discussion__comment_form label input.edit {
740    width: 100%;
741}
742
743
744/* Footer
745==================================================== */
746
747footer {
748    background-color: $paper-active;
749    text-align: left;
750    font-size: $font-size-ui;
751    color: $text-ui;
752    margin-bottom: 0px;
753    line-height: $line-height-cond;
754    position: relative;
755}
756
757footer .doc,
758footer .license {
759    margin-bottom: $md-pad;
760}
761
762ul.ul-raw,
763.ul-raw ul {
764    list-style: none;
765    padding: 0px;
766    margin-top: 0;
767}
768
769.ul-raw li {
770    list-style: none;
771    margin-bottom: 10px;
772}
773
774.ul-raw a, .license a {
775    color: $text-ui;
776    border-bottom: $border-link !important;
777    &:hover,
778    &:focus,
779    &:active {
780        color: $text-default;
781    }
782}
783
784footer .license img {
785    display: block;
786}
787
788/* Captcha Plugin
789==================================================== */
790#plugin__captcha_wrapper {
791    border-radius: $br;
792    border: 1px solid $dividers;
793}
794#plugin__captcha_wrapper label {
795    display: block;
796}
797#plugin__captcha_wrapper:not(input):not(label) {
798	user-select: none;
799}
800
801
802/* NSPages Plugin
803==================================================== */
804
805.catpageheadline {
806    text-decoration: none;
807    font-size: inherit;
808    margin: auto;
809}
810
811.nspagesPicturesModeTitle {
812    overflow: inherit;
813    background-color: transparent;
814    margin-top: 0;
815    margin-left: 0;
816    font-family: inherit;
817    color: $text-default;
818    background: $bg-light;
819    font-weight: 700;
820    line-height: 1.4em;
821    padding: 3px 3px 13px 0px;
822    max-width: none;
823    border-bottom: $border-bold;
824}
825
826div.nspagesPicturesModeMain a {
827    padding: 0px;
828    background-color: inherit;
829    border-bottom: none !important;
830    height: auto;
831    width: 230px;
832    border-top: 1px solid black;
833    margin: 10px 10px 0px 0px;
834}
835
836@media only screen and (max-width: 767.98px) {
837    div.nspagesPicturesModeMain a {
838        width: 100%;
839        max-width: none;
840    }
841}
842
843div.nspagesPicturesModeMain a {
844    &:focus,
845    &:hover,
846    &:active {
847        border-bottom: $border-link;
848    }
849    &:hover {
850        background-color: transparent;
851    }
852}
853
854div.nspagesPicturesModeImg {
855    padding: 0px;
856    max-width: 100%;
857    width: 100%;
858    background-color: $paper-active;
859    border-bottom-left-radius: $br;
860    border-bottom-right-radius: $br;
861    overflow: hidden;
862    background-repeat: no-repeat;
863}
864
865/* Caption plugin
866==================================================== */
867
868div.caption {
869  margin-left: 0px;
870  border-left: 0px;
871  font-size: 0.9em;
872  line-height: 1.6em;
873  margin-top: $margin-default;
874}
875
876div.figure {
877  background-color: darken($paper, 4%);
878  padding: $sm-pad;
879}
880
881/* Print
882==================================================== */
883
884@media print {
885    body {
886        font-size: 1em;
887    }
888    .col-side {
889        display: none;
890    }
891    .col-main {
892        min-width: 100%;
893    }
894    nav .nav-actions {
895        display: none;
896    }
897    nav {
898        box-shadow: none;
899    }
900    nav .nav-bar {
901        background-color: transparent;
902        color: black;
903    }
904    nav .nav-expanded {
905        display: none;
906    }
907    div.nspagesPicturesModeImg span {
908      display: block;
909    }
910}
911
912
913/* Media Manager
914==================================================== */
915
916#media__popup_content button.button {
917    padding-left: 2px;
918    padding-right: 2px;
919    padding-top: 0px;
920    padding-bottom: 0px;
921    border: $border-ui;
922    &:hover,
923    &:active,
924    &:focus {
925        background-color: $bg-light-well;
926        border: $border-ui;
927    }
928}
929#media__popup_content button.selected {
930    background-color: $bg-light-well;
931    border: $border-ui;
932}
933
934#media__content .qq-uploader {
935    border-radius: 7px;
936    background-color: $white;
937    color: $primary;
938    padding: $sm-pad;
939    transition: all 0.8s;
940}
941
942#media__content .qq-upload-drop-area {
943    position: relative;
944    min-height: 100px;
945    display: block !important;
946    background-color: transparent;
947    border-radius: 7px;
948    outline: 2px dashed $primary;
949}
950
951#media__content .qq-upload-drop-area-active {
952    transition: $trans background-color, $trans color;
953    background-color: $primary;
954    color: $white;
955    outline: 1px dashed $white;
956}
957
958#media__manager .qq-upload-button {
959    color: primary;
960}
961