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 }