xref: /template/minimal/css/mobile.css (revision 1c483d2b270e92b73ba8b55b812d3f480524337f) 
1/*For mobile */
2@media screen and (max-width: __mobile_breakpoint__) {
3    #view.right-column {
4        padding: 16px;
5    }
6    #main .container {
7        flex-direction: column;
8    }
9
10    #main .left-column {
11        width: 100%;
12        display: none;
13    }
14
15    #main .right-column {
16        width: 100%;
17    }
18
19    #navbar .left-column {
20        flex-grow: 1;
21    }
22    #navbar .right-column {
23        width: 100%;
24        padding: 20px;
25    }
26
27    .table-responsive table {
28        min-width: 800px;
29    }
30
31    #navbar .left-column a.site-name
32    {
33        margin: auto;
34    }
35
36    /*Nav bar for mobile */
37    .mobile.icon {
38        display: flex;
39        align-items: center;
40        padding: 16px;
41    }
42
43
44    #sidebar {
45        width: 100%;
46        display: none;
47    }
48
49    #navbar .right-column {
50        background: rgb(255, 255, 255);
51        position: absolute;
52        flex-direction: column-reverse;
53        right: 0px;
54        z-index: 1099;
55        align-items: baseline;
56        width: 100%;
57        top: 60px;
58        display: none;
59    }
60
61    #navbar .right-column .icon, #navbar .right-column a.navitem
62    {
63        display: flex;
64        gap: 16px;
65    }
66
67    #navbar .right-column .icon.dropdown-toggle::after
68    {
69        align-self: center;
70    }
71
72    #qsearch__in, .search, #qsearch__out
73    {
74        width: 100%;
75    }
76
77    navbar .right-column .options
78    {
79        flex-direction: column;
80    }
81
82    navbar .right-column .menu:not(.mobile-menu)
83    {
84        display: none;
85    }
86
87     navbar .right-column .mobile-menu.menu, .mobile-menu.menu .list
88     {
89        display: block;
90     }
91     navbar .right-column .options
92     {
93        width: 100%;
94     }
95
96     navbar .right-column .mobile-menu
97     {
98        padding: 0px;
99        border: none;
100        display: flex;
101        flex-direction: column;
102     }
103
104     .mobile-menu.menu .list
105     {
106        position: relative;
107        top: 0px;
108        border: none;
109        z-index: 1;
110
111     }
112
113     .dokuwiki .wrap_box.wrap_side.wrap_big, .dokuwiki .wrap_box.wrap_side
114     {
115        width: 100%;
116        margin-left: 0px;
117        margin-right: 0px;
118     }
119
120      body.show-sidebar #navbar .right-column, body.show-sidebar #view, body.show-sidebar .site-header, body.show-sidebar #footer
121     {
122        display: none;
123     }
124
125     body.show-sidebar #sidebar
126     {
127        display: flex;
128     }
129
130     body.show-appoptions #sidebar , body.show-appoptions #view, body.show-appoptions .site-header, body.show-appoptions #footer
131     {
132        display: none;
133     }
134
135     body.show-appoptions #navbar .right-column
136     {
137        display: flex;
138     }
139
140}