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