Merge pull request #5520 from acooler15/luci-lib-docker
[project/luci.git] / themes / luci-theme-bootstrap / htdocs / luci-static / bootstrap / mobile.css
1 header h3 a, header .brand {
2 display:none !important;
3 }
4
5 @media screen and (max-device-width: 600px) {
6 .modal {
7 margin: 1.5em auto;
8 }
9
10 .tabs, .cbi-tabmenu {
11 background: linear-gradient(var(--background-color-high) 20%, var(--border-color-medium) 100%);
12 background-size: 1px 34px;
13 margin-bottom: 10px;
14 }
15
16 .tabs > li, .cbi-tabmenu > li {
17 height: 30px;
18 }
19
20 .tabs > li > a, .cbi-tabmenu > li > a {
21 padding: 0 8px;
22 line-height: 30px;
23 }
24
25 .table {
26 display: flex;
27 flex-direction: column;
28 width: 100%;
29 }
30
31 .tr {
32 display: flex;
33 flex-direction: row;
34 flex-wrap: wrap;
35 align-items: flex-end;
36 border-top: 1px solid var(--border-color-medium);
37 padding: 5px 0;
38 margin: 0 -3px;
39 }
40
41 .table .th,
42 .table .td,
43 .table .tr::before {
44 flex: 1 1 50%;
45 align-self: flex-start;
46 overflow: hidden;
47 text-overflow: ellipsis;
48 word-wrap: break-word;
49 display: inline-block;
50 border-top: none;
51 padding: 3px;
52 box-sizing: border-box;
53 }
54
55 .table .td.cbi-dropdown-open {
56 overflow: visible;
57 }
58
59 .col-1 { flex: 1 1 30px !important; -webkit-flex: 1 1 30px !important; }
60 .col-2 { flex: 2 2 60px !important; -webkit-flex: 2 2 60px !important; }
61 .col-3 { flex: 3 3 90px !important; -webkit-flex: 3 3 90px !important; }
62 .col-4 { flex: 4 4 120px !important; -webkit-flex: 4 4 120px !important; }
63 .col-5 { flex: 5 5 150px !important; -webkit-flex: 5 5 150px !important; }
64 .col-6 { flex: 6 6 180px !important; -webkit-flex: 6 6 180px !important; }
65 .col-7 { flex: 7 7 210px !important; -webkit-flex: 7 7 210px !important; }
66 .col-8 { flex: 8 8 240px !important; -webkit-flex: 8 8 240px !important; }
67 .col-9 { flex: 9 9 270px !important; -webkit-flex: 9 9 270px !important; }
68 .col-10 { flex: 10 10 300px !important; -webkit-flex: 10 10 300px !important; }
69
70 .td select {
71 word-wrap: normal;
72 }
73
74 .td[data-widget="button"],
75 .td[data-widget="fvalue"] {
76 flex: 1 1 17%;
77 text-align: left;
78 }
79
80 .td.cbi-value-field {
81 align-self: flex-start;
82 flex-basis: 100%;
83 margin-bottom: .3em;
84 }
85
86 .td.cbi-value-field .cbi-button {
87 width: 100%;
88 }
89
90 .table.cbi-section-table {
91 border: none;
92 background: none;
93 margin: 0;
94 }
95
96 .tr.table-titles,
97 .cbi-section-table-titles,
98 .cbi-section-table-descr {
99 display: none;
100 }
101
102 .cbi-section-table-row {
103 display: flex;
104 flex-direction: row;
105 flex-wrap: wrap;
106 margin: 0 0 .5em 0;
107 }
108
109 .cbi-section-table + .cbi-section-create {
110 padding-top: 0;
111 }
112
113 .tr[data-title]::before {
114 display: block;
115 flex: 1 1 100%;
116 background: var(--background-color-low) !important;
117 font-size: 16px;
118 border-bottom: 1px solid var(--border-color-medium);
119 }
120
121 .td[data-title]::before {
122 content: attr(data-title);
123 font-weight: bold;
124 display: block;
125 overflow: hidden;
126 text-overflow: ellipsis;
127 white-space: pre-line;
128 }
129
130 .td[data-description]::after {
131 display: block;
132 }
133
134 .td[data-title] ~ .td.cbi-section-actions {
135 align-self: flex-start;
136 }
137
138 .td.cbi-section-actions {
139 overflow: initial;
140 max-width: 100%;
141 padding: 3px 2px;
142 flex-basis: 100%;
143 }
144
145 .hide-sm,
146 .hide-xs {
147 display: none !important;
148 }
149
150 .td.cbi-value-field[data-widget="CBI.DummyValue"],
151 .td.cbi-value-field[data-widget="CBI.Button"],
152 .td.cbi-value-field[data-widget="CBI.FlagValue"],
153 .td.cbi-value-field[data-widget="dvalue"],
154 .td.cbi-value-field[data-widget="button"],
155 .td.cbi-value-field[data-widget="fvalue"] {
156 flex-basis: 50%;
157 text-align: left;
158 }
159
160 .cbi-section-table .tr:hover .td,
161 .cbi-section-table .tr:hover .th,
162 .cbi-section-table .tr:hover::before {
163 background-color: transparent;
164 }
165
166 .cbi-tab-descr {
167 margin: 0 0 .5em 0;
168 }
169
170 .cbi-value {
171 padding-bottom: .5em;
172 border-bottom: 1px solid var(--border-color-high);
173 margin-bottom: .5em;
174 display: block;
175 }
176
177 .cbi-value.hidden {
178 display: none;
179 }
180
181 .cbi-value .cbi-value:last-child {
182 border-bottom: none;
183 padding-bottom: inherit;
184 margin-bottom: inherit;
185 }
186
187 .cbi-value label.cbi-value-title {
188 font-weight: bold;
189 }
190
191 .cbi-value-field, .cbi-select, .cbi-dynlist, .cbi-dropdown:not(.btn):not(.cbi-button) {
192 width: 100%;
193 margin: 0;
194 }
195
196 .cbi-dynlist > .item {
197 min-height: 30px;
198 display: flex;
199 align-items: center;
200 }
201
202 input, textarea, select,
203 .cbi-dropdown > ul > li {
204 font-size: 16px !important;
205 height: auto;
206 }
207
208 .cbi-dropdown > ul > li input[type="text"] {
209 line-height: 28px;
210 }
211
212 select, input[type="text"], input[type="password"],
213 .cbi-dropdown > ul > li input[type="text"],
214 .cbi-value-field .control-group {
215 width: 100%;
216 height: 30px;
217 }
218
219 input.cbi-input-password {
220 width: calc(100% - 25px);
221 }
222
223 input[type="text"] + .cbi-button,
224 input[type="password"] + .cbi-button,
225 select + .cbi-button {
226 overflow: hidden;
227 text-overflow: ellipsis;
228 }
229
230 .cbi-value-field input[type="checkbox"],
231 .cbi-value-field input[type="radio"] {
232 margin: 0;
233 }
234
235 button, .btn, .cbi-button {
236 font-size: 14px !important;
237 padding: 0 8px;
238 }
239
240 .actions,
241 .cbi-page-actions {
242 border-top: none;
243 margin-top: -.5em;
244 padding: 8px;
245 }
246
247 [data-page="admin-status-overview"] .td[width="33%"] {
248 flex-basis: 33%;
249 }
250
251 header .pull-right .label {
252 white-space: normal;
253 display: inline-block;
254 text-align: center;
255 line-height: 12px;
256 margin: 1px 0;
257 }
258
259 header > .fill {
260 padding: 1px;
261 }
262
263 header > .fill > .container {
264 display: flex;
265 flex-direction: row;
266 }
267
268 header .nav {
269 flex: 3 3 80%;
270 margin: 2px 5px 2px 0;
271 display: flex;
272 flex-wrap: wrap;
273 justify-content: flex-start;
274 }
275
276 header .nav a {
277 padding: 2px 6px;
278 }
279
280 header .pull-right {
281 flex: 0 1 20%;
282 display: flex;
283 flex-direction: column;
284 padding: 0;
285 justify-content: space-around;
286 margin: .2em 5px .2em auto;
287 }
288
289 .menu-dropdown, .dropdown-menu {
290 top: 23px;
291 }
292
293 .cbi-optionals,
294 .cbi-section-create {
295 padding: 0 0 14px 0;
296 }
297
298 #cbi-network-switch_vlan .th,
299 #cbi-network-switch_vlan .td {
300 flex-basis: 12%;
301 }
302
303 #cbi-network-switch_vlan .td.cbi-section-actions > * {
304 width: auto;
305 display: block;
306 }
307
308 #wifi_assoclist_table .td,
309 [data-page="admin-status-processes"] .td {
310 flex-basis: 50% !important;
311 }
312
313 [data-page="admin-status-processes"] .td[data-widget="button"] {
314 flex-basis: 33% !important;
315 }
316
317 [data-page="admin-status-processes"] .td[data-name="PID"],
318 [data-page="admin-status-processes"] .td[data-name="USER"] {
319 flex-basis: 25% !important;
320 }
321
322 [data-page="admin-system-fstab"] .td[data-widget="button"]::before,
323 [data-page="admin-system-startup"] .td[data-widget="button"]::before,
324 [data-page="admin-status-processes"] .td[data-widget="button"]::before {
325 display: none;
326 }
327
328 [data-name="bridge-vlan"] > div {
329 overflow: visible !important;
330 }
331
332 [data-name="bridge-vlan"] .td[data-title] {
333 flex-basis: 33%;
334 }
335
336 [data-name="bridge-vlan"] .td[data-title]::before {
337 content: attr(data-title);
338 }
339
340 [data-page="admin-network-network"] .td[data-name="_ifacebox"] {
341 flex-basis: 40%;
342 }
343
344 [data-page="admin-network-network"] .td[data-name="_ifacestat"] {
345 flex-basis: 60%;
346 }
347 }
348
349 @media screen and (max-device-width: 375px) {
350 .cbi-page-actions {
351 display: flex;
352 justify-content: space-between;
353 margin: 0 -1px;
354 padding: 0;
355 }
356
357 .cbi-page-actions button {
358 overflow: hidden;
359 text-overflow: ellipsis;
360 }
361
362 .cbi-page-actions .cbi-button {
363 flex: 1;
364 margin: 1px !important;
365 line-height: 2em;
366 }
367
368 .cbi-page-actions .cbi-button-negative,
369 .cbi-page-actions .cbi-button-primary,
370 .cbi-page-actions .cbi-button-apply {
371 flex: 3;
372 }
373
374 .cbi-section-actions .cbi-button {
375 overflow: hidden;
376 text-overflow: ellipsis;
377 margin: 1px !important;
378 }
379
380 body[data-page="admin-network-wireless"] .td[data-name="_badge"] {
381 max-width: 50px;
382 align-self: center;
383 }
384
385 body[data-page="admin-network-wireless"] .td[data-name="_badge"] .ifacebadge {
386 display: flex;
387 align-items: center;
388 flex-direction: column;
389 }
390
391 body[data-page="admin-network-wireless"] .td[data-name="_stat"] {
392 flex-basis: 60%;
393 }
394
395 body[data-page="admin-network-network"] .td.cbi-section-actions::before,
396 body[data-page="admin-network-wireless"] .td.cbi-section-actions::before {
397 content: none !important;
398 }
399
400 [data-page="admin-network-network"] .td[data-name="_ifacebox"],
401 [data-page="admin-network-network"] .td[data-name="_ifacestat"] {
402 flex-basis: 100%;
403 }
404
405 .td .ifacebox {
406 width: 100%;
407 margin: 0 !important;
408 flex-direction: row;
409 }
410
411 .td .ifacebox .ifacebox-head {
412 min-width: 25%;
413 justify-content: space-around;
414 border-radius: 4px 0 0 4px;
415 }
416
417 .td .ifacebox .ifacebox-head,
418 .td .ifacebox .ifacebox-body {
419 display: flex;
420 border-bottom: none;
421 align-items: center;
422 }
423
424 .td .ifacebox .ifacebox-head > *,
425 .ifacebox .ifacebox-body > * {
426 margin: .125em;
427 }
428 }