1/*
2=========================================================
3*  Argon Dokuwiki Template
4*  Based on the Argon Design System by Creative Tim
5*  Ported to Dokuwiki by Anchit (@IceWreck)
6=========================================================
7*/
8
9/*
10* I know using important at multiple places is a bad thing, but
11* I need to overrule the css already provided by dokuwiki
12*/
13
14@import 'argon-design-system';
15
16// ------ General ------
17
18button {
19    @extend .btn;
20    @extend .btn-neutral;
21}
22
23legend {
24    @extend .h3;
25    font-style: normal;
26}
27
28input,
29select {
30    background-color: white !important;
31    border-radius: 0.25rem;
32    border-color: #99979c;
33}
34
35// Highlight Search Results
36.search_hit {
37    @extend mark;
38}
39
40// Fix Content Hidden behind navbar when you reach via anchor
41// Fixed somewhere else.
42// :target {
43//     padding-top: 6rem;
44//  }
45
46// Selection
47::-moz-selection {
48    text-shadow: none;
49    background: #dfe2f1;
50}
51
52::selection {
53    text-shadow: none;
54    background: #dfe2f1;
55}
56
57// Breadrumbs
58
59.breadcrumb {
60    flex-direction: column;
61}
62
63
64// ------ Main Content ------
65
66
67#dokuwiki__content {
68    p {
69        font-weight: 400;
70    }
71
72    // HAX. Still don't understand why it works, but it does.
73    // https://developer.mozilla.org/en-US/docs/Web/CSS/::before
74    h1::before,
75    h2::before,
76    h3::before,
77    h4::before,
78    h5::before,
79    h6::before {
80        content: '';
81        display: block;
82        height: 6rem;
83        margin-top: -6rem;
84        visibility: hidden;
85
86    }
87
88
89    // Edit Button
90    .secedit button {
91        @extend .btn;
92        @extend .btn-primary;
93        @extend .btn-sm;
94        margin-bottom: 1em;
95        float: right;
96    }
97
98    // Non-existant links
99    .wikilink2 {
100        color: #dc3545;
101    }
102
103    // Page Revisions Button
104    #page__revisions button {
105        @extend .btn;
106        @extend .btn-primary;
107    }
108
109    // Wiki Edit Menu Buttons
110    .editButtons button {
111        @extend .btn;
112        @extend .btn-primary;
113        @extend .btn-sm;
114        margin-top: 1em;
115        margin-bottom: 1em;
116    }
117
118
119    // Inline Code
120    :not(pre)>code {
121        background-color: inherit;
122        padding: .1em;
123        border-radius: .3em;
124
125
126    }
127
128    // Emoticons
129    img.icon {
130        width: 1rem;
131        height: 1rem;
132    }
133
134    // Tables
135    .table-responsive {
136        border-width: 0rem;
137    }
138
139    table {
140        @extend .table-responsive;
141        @extend .table;
142    }
143
144    // Code Blocks
145    pre {
146        font-family: Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace;
147        font-size: 14px;
148        line-height: 1.375;
149        direction: ltr;
150        text-align: left;
151        white-space: pre;
152        word-spacing: normal;
153        word-break: normal;
154        -moz-tab-size: 4;
155        -o-tab-size: 4;
156        tab-size: 4;
157        -webkit-hyphens: none;
158        -moz-hyphens: none;
159        -ms-hyphens: none;
160        hyphens: none;
161        background: #f5f7ff;
162        color: #5e6687;
163        border: 0;
164        border-radius: .55rem;
165        padding: 1.25rem;
166        margin: 0;
167        margin-bottom: 1rem;
168        margin-top: 1rem;
169        overflow: auto;
170
171    }
172
173    .mf_pdf {
174        display: inline;
175    }
176
177}
178
179.argon-doku-page-menu {
180    display: flex;
181    align-items: flex-end;
182    justify-content: flex-end;
183    margin: 1.75rem 0 0.5rem;
184
185    li {
186        display: inline;
187        fill: #6c757d;
188        :hover {
189            fill:#525f7f;
190        }
191    }
192
193    li:nth-of-type(1) {
194        margin-left: 0em;
195    }
196}
197
198// ------ Editor ------
199
200// Tool Bar Buttons
201#tool__bar button {
202    @extend .btn;
203    @extend .btn-secondary;
204    @extend .btn-sm;
205    margin-bottom: 2em;
206}
207
208// Edit Area
209
210textarea {
211    @extend .form-control;
212    width: 95% !important;
213    max-width: 100% !important;
214}
215
216.editBar {
217    .summary {
218        display: block !important;
219    }
220}
221
222// ------ Table of Contents ------
223.ct-toc {
224    #dw__toc {
225
226        float: inherit;
227        margin: inherit;
228        width: inherit;
229        background-color: inherit;
230        color: inherit;
231        box-sizing: border-box;
232        margin-right: 0em;
233        padding-left: 0;
234        border-left: 1px solid #eee;
235
236
237        h3 {
238            display: none;
239        }
240
241        a {
242            display: block;
243            padding: .125rem 1rem;
244            color: #99979c;
245            font-size: 100%;
246        }
247
248        a:hover {
249            color: #5e72e4;
250            text-decoration: none;
251        }
252
253
254        ol,
255        ul,
256        dl {
257            margin-top: 0;
258            margin-bottom: 1rem;
259        }
260
261        ul {
262            margin-bottom: 0.5rem;
263        }
264
265        ul {
266            list-style: disc outside;
267            list-style-position: outside;
268            list-style-image: none;
269            list-style-type: disc;
270        }
271    }
272
273    // .clear {
274    //     @extend .section-nav;
275    //     .li {
276    //         @extend .toc-entry;
277    //         @extend .toc-h6 !optional;
278    //     }
279    //     display: content;
280    // }
281
282}
283
284// ------ Navbar ------
285
286.header-title a {
287    color: white;
288    font-weight: 600;
289    font-size: 1.2rem;
290}
291
292// Navbar Icons
293.argon-doku-navbar-icon {
294    fill: white;
295
296    :hover {
297        fill: #e6e6e6;
298    }
299}
300
301// Search Bar
302.doku_form {
303    .no {
304        @extend .form-group;
305        @extend .input-group;
306        @extend .mb-4;
307        margin: 0rem;
308        height: 1.5rem;
309        padding: 0rem;
310
311        #qsearch__in {
312            @extend .form-control;
313            width: 10rem;
314            height: 1.5rem;
315            margin: 0rem;
316            margin-right: 1rem;
317            margin-left: 1rem;
318            border-radius: 0.25rem !important;
319            overflow: hidden;
320            border: none;
321        }
322
323        button {
324            @extend .btn;
325            @extend .btn-neutral;
326            margin: 0rem;
327            overflow: hidden;
328            height: 92%;
329        }
330    }
331
332}
333
334// ------ Search Form ------
335
336.toggleAssistant {
337    @extend .btn;
338    @extend .btn-default;
339}
340
341.search-results-form {
342    button {
343        @extend .btn;
344        @extend .btn-primary;
345        margin-left: 3rem;
346    }
347
348    .toggleAssistant {
349        @extend .btn;
350        @extend .btn-default;
351        display: block;
352        float: none !important;
353        margin-top: 2rem;
354        margin-bottom: 2rem;
355    }
356
357    fieldset input {
358        @extend .form-control;
359        display: inline-block;
360    }
361}
362
363// ------ Admin Area ------
364
365.dokuwiki {
366
367
368    .ui-admin {
369        ul li {
370            list-style-type: none;
371        }
372
373        ul .admin_tasks {
374            svg {
375                margin-right: 1rem;
376                width: 1px;
377                height: 1px;
378            }
379        }
380    }
381
382    .tabs {
383        li {
384            list-style-type: disclosure-closed;
385        }
386    }
387
388    div.ui-admin ul li {
389
390        margin: 0rem;
391        vertical-align: middle !important;
392
393        a {
394            vertical-align: middle;
395            span.icon svg {
396                margin-right: 1rem;
397                width: inherit;
398                height: inherit;
399                vertical-align: middle !important;
400                path {
401                    fill: #32325d;
402                }
403
404
405
406            }
407
408            span.prompt {
409                font-size: 1rem;
410                font-weight: normal;
411                vertical-align: middle !important;
412
413            }
414
415        }
416
417    }
418
419
420
421
422}
423// Config Panel
424
425#config__manager td input.edit {
426    @extend .form-control;
427    width: 30em;
428    padding: 0.0rem 0.75rem;
429    background-color: white !important;
430}
431
432#config__manager tr.default .input,
433#config__manager tr.default input,
434#config__manager tr.default textarea,
435#config__manager tr.default select,
436#config__manager .selectiondefault {
437    background-color: inherit;
438}
439
440// ------ Media Uploads ------
441
442.qq-upload-button {
443    @extend .btn;
444    @extend .btn-neutral;
445}
446
447// ------ Registration and User Forms ------
448
449// Modify user, delete user
450
451
452.dokuwiki #dw__register,
453#dw__profiledelete {
454    fieldset {
455        width: 100%;
456        border: 0rem;
457        padding: 0rem;
458        text-align: left !important;
459
460        legend {
461            @extend .h3;
462            font-style: normal;
463        }
464
465        label {
466
467            font-size: 1rem;
468            font-weight: normal;
469            width: 95%;
470            text-align: left !important;
471
472            input {
473                float: right;
474                background-color: white !important;
475                border-radius: 0.25rem;
476                border-color: #99979c;
477                border-width: thin;
478            }
479
480        }
481    }
482
483    label.block {
484        display: inline-block !important;
485    }
486}
487
488// Login
489#dw__login {
490    width: 100%;
491    float: left;
492    left: 0%;
493    margin: 0%;
494    @extend .card;
495    @extend .bg-secondary,
496    .shadow,
497    .border-0;
498
499    label {
500        width: 90%;
501    }
502
503    // legend {
504    //     @extend .card-header,
505    //     .bg-white,
506    //     .pb-5;
507    //     font-size: 2rem;
508
509    //     label {
510    //         @extend .h2;
511    //     }
512
513    //     margin-bottom: 5%;
514    //     font-style: normal;
515    // }
516
517    span {
518        float: left;
519        font-size: 1.15rem;
520    }
521
522    input {
523        display: block;
524        float: right;
525        @extend .form-control;
526        width: 90%;
527        height: 1.15rem;
528        top: 50%;
529
530    }
531
532    .simple {
533        width: 50%;
534        margin-left: unset !important;
535
536    }
537
538    #remember__me {
539        margin-top: 1rem;
540    }
541
542    button {
543        @extend .btn;
544        @extend .btn-primary;
545    }
546}
547
548// ------ Left Sidebar ------
549
550.leftsidebar {
551    .leftsidebar ul {
552        @extend .nav,
553        .ct-sidenav;
554    }
555
556    li {
557        list-style-type: none;
558        display: block;
559        font-size: 0.84rem;
560        padding: 0.25rem;
561        color: #4c555a;
562        font-weight: 400;
563    }
564
565    a:link,
566    a:visited {
567        text-decoration: none;
568        color: #4c555a;
569    }
570
571    a:hover {
572        color: #212529;
573    }
574
575}
576
577.ct-sidebar .nav>li>a {
578    font-size: 0.84rem;
579}
580
581
582// ------ Footer ------
583
584.footer-card {
585    background-color: #f4f5f7;
586    text-align: center;
587
588    .footer-search {
589        // center-align the bottom search bar
590        margin-left: auto;
591        margin-right: auto;
592    }
593
594    .argon-doku-footer-fullmenu {
595        margin-left: auto;
596        margin-right: auto;
597
598        li {
599            display: inline;
600            fill: #6c757d;
601
602            :hover {
603                fill: #525f7f;
604            }
605        }
606
607        li:nth-of-type(1) {
608            margin-left: 0em;
609        }
610    }
611}
612