xref: /template/minimal/css/mobile.css (revision 1240a73e81f5dbc80953177ae679cae99fbdc9f0) 
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        position: absolute;
51        flex-direction: column-reverse;
52        right: 0px;
53        z-index: 1099;
54        align-items: baseline;
55        width: 100%;
56        top: 60px;
57        display: none;
58    }
59
60    #navbar .right-column .icon, #navbar .right-column a.navitem
61    {
62        display: flex;
63        gap: 16px;
64    }
65
66    #navbar .right-column .icon.dropdown-toggle::after
67    {
68        align-self: center;
69    }
70
71    #qsearch__in, .search, #qsearch__out
72    {
73        width: 100%;
74    }
75
76    navbar .right-column .options
77    {
78        flex-direction: column;
79    }
80
81    navbar .right-column .menu:not(.mobile-menu)
82    {
83        display: none;
84    }
85
86     navbar .right-column .mobile-menu.menu, .mobile-menu.menu .list
87     {
88        display: block;
89     }
90     navbar .right-column .options
91     {
92        width: 100%;
93     }
94
95     navbar .right-column .mobile-menu
96     {
97        padding: 0px;
98        border: none;
99        display: flex;
100        flex-direction: column;
101     }
102
103     .mobile-menu.menu .list
104     {
105        position: relative;
106        top: 0px;
107        border: none;
108        z-index: 1;
109
110     }
111
112     .dokuwiki .wrap_box.wrap_side.wrap_big, .dokuwiki .wrap_box.wrap_side
113     {
114        width: 100%;
115        margin-left: 0px;
116        margin-right: 0px;
117     }
118
119      body.show-sidebar #navbar .right-column, body.show-sidebar #view, body.show-sidebar .site-header, body.show-sidebar #footer
120     {
121        display: none;
122     }
123
124     body.show-sidebar #sidebar
125     {
126        display: flex;
127     }
128
129     body.show-appoptions #sidebar , body.show-appoptions #view, body.show-appoptions .site-header, body.show-appoptions #footer
130     {
131        display: none;
132     }
133
134     body.show-appoptions #navbar .right-column
135     {
136        display: flex;
137     }
138
139}