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         .tabs, .cbi-tabmenu {
   7                 background: linear-gradient(var(--background-color-high) 20%, var(--border-color-medium) 100%);
   8                 background-size: 1px 34px;
   9                 margin-bottom: 10px;
  10         }
  11
  12         .tabs > li, .cbi-tabmenu > li {
  13                 height: 30px;
  14         }
  15
  16         .tabs > li > a, .cbi-tabmenu > li > a {
  17                 padding: 0 8px;
  18                 line-height: 30px;
  19         }
  20
  21         .table {
  22                 display: flex;
  23                 flex-direction: column;
  24                 width: 100%;
  25         }
  26
  27         .tr {
  28                 display: flex;
  29                 flex-direction: row;
  30                 flex-wrap: wrap;
  31                 align-items: flex-end;
  32                 border-top: 1px solid var(--border-color-medium);
  33                 padding: 5px 0;
  34                 margin: 0 -3px;
  35         }
  36
  37         .table .th,
  38         .table .td,
  39         .table .tr::before {
  40                 flex: 2 2 33%;
  41                 align-self: flex-start;
  42                 overflow: hidden;
  43                 text-overflow: ellipsis;
  44                 word-wrap: break-word;
  45                 display: inline-block;
  46                 border-top: none;
  47                 padding: 3px;
  48                 box-sizing: border-box;
  49         }
  50
  51         .table .td.cbi-dropdown-open {
  52                 overflow: visible;
  53         }
  54
  55         .col-1 { flex: 1 1 30px !important; -webkit-flex: 1 1 30px !important; }
  56         .col-2 { flex: 2 2 60px !important; -webkit-flex: 2 2 60px !important; }
  57         .col-3 { flex: 3 3 90px !important; -webkit-flex: 3 3 90px !important; }
  58         .col-4 { flex: 4 4 120px !important; -webkit-flex: 4 4 120px !important; }
  59         .col-5 { flex: 5 5 150px !important; -webkit-flex: 5 5 150px !important; }
  60         .col-6 { flex: 6 6 180px !important; -webkit-flex: 6 6 180px !important; }
  61         .col-7 { flex: 7 7 210px !important; -webkit-flex: 7 7 210px !important; }
  62         .col-8 { flex: 8 8 240px !important; -webkit-flex: 8 8 240px !important; }
  63         .col-9 { flex: 9 9 270px !important; -webkit-flex: 9 9 270px !important; }
  64         .col-10 { flex: 10 10 300px !important; -webkit-flex: 10 10 300px !important; }
  65
  66         .td select {
  67                 word-wrap: normal;
  68         }
  69
  70         .td[data-widget="button"],
  71         .td[data-widget="fvalue"] {
  72                 flex: 1 1 17%;
  73                 text-align: left;
  74         }
  75
  76         .td.cbi-value-field {
  77                 align-self: flex-start;
  78         }
  79
  80         .td.cbi-value-field .cbi-button {
  81                 width: 100%;
  82         }
  83
  84         .table.cbi-section-table {
  85                 border: none;
  86                 background: none;
  87                 margin: 0;
  88         }
  89
  90         .tr.table-titles,
  91         .cbi-section-table-titles,
  92         .cbi-section-table-descr {
  93                 display: none;
  94         }
  95
  96         .cbi-section-table-row {
  97                 display: flex;
  98                 flex-direction: row;
  99                 flex-wrap: wrap;
 100                 margin: 0 0 .5em 0;
 101         }
 102
 103         .cbi-section-table + .cbi-section-create {
 104                 padding-top: 0;
 105         }
 106
 107         .tr[data-title]::before {
 108                 display: block;
 109                 flex: 1 1 100%;
 110                 background: var(--background-color-low) !important;
 111                 font-size: 16px;
 112                 border-bottom: 1px solid var(--border-color-medium);
 113         }
 114
 115         .td[data-title]::before,
 116         .td[data-description]::after {
 117                 display: block;
 118         }
 119
 120         .td[data-title] ~ .td.cbi-section-actions {
 121                 align-self: flex-start;
 122         }
 123
 124         .td[data-title] ~ .td.cbi-section-actions::before {
 125                 display: block;
 126                 content: "\a0";
 127         }
 128
 129         .td.cbi-section-actions {
 130                 overflow: initial;
 131                 max-width: 100%;
 132                 padding: 3px 2px;
 133         }
 134
 135         .hide-sm,
 136         .hide-xs {
 137                 display: none !important;
 138         }
 139
 140         .td.cbi-value-field {
 141                 flex-basis: 100%;
 142         }
 143
 144         .td.cbi-value-field[data-widget="dvalue"] {
 145                 flex-basis: 50%;
 146         }
 147
 148         .td.cbi-value-field[data-widget="button"],
 149         .td.cbi-value-field[data-widget="fvalue"] {
 150                 flex-basis: 25%;
 151                 text-align: left;
 152         }
 153
 154         .cbi-section-table .tr:hover .td,
 155         .cbi-section-table .tr:hover .th,
 156         .cbi-section-table .tr:hover::before {
 157                 background-color: transparent;
 158         }
 159
 160         .cbi-value {
 161                 padding-bottom: .5em;
 162                 border-bottom: 1px solid var(--border-color-high);
 163                 margin-bottom: .5em;
 164                 display: block;
 165         }
 166
 167         .cbi-value.hidden {
 168                 display: none;
 169         }
 170
 171         .cbi-value .cbi-value:last-child {
 172                 border-bottom: none;
 173                 padding-bottom: inherit;
 174                 margin-bottom: inherit;
 175         }
 176
 177         .cbi-value label.cbi-value-title {
 178                 font-weight: bold;
 179         }
 180
 181         .cbi-value-field, .cbi-select, .cbi-dropdown:not(.btn):not(.cbi-button) {
 182                 width: 100%;
 183                 margin: 0;
 184         }
 185
 186         input, textarea, select,
 187         .cbi-dropdown > ul > li {
 188                 font-size: 16px !important;
 189                 height: auto;
 190         }
 191
 192         .cbi-dropdown > ul > li input[type="text"] {
 193                 line-height: 28px;
 194         }
 195
 196         select, input[type="text"], input[type="password"],
 197         .cbi-dropdown > ul > li input[type="text"] {
 198                 width: 100%;
 199                 height: 30px;
 200         }
 201
 202         input.cbi-input-password {
 203                 width: calc(100% - 25px);
 204         }
 205
 206         [data-dynlist] {
 207                 display: block;
 208         }
 209
 210         [data-dynlist] > .add-item > input {
 211                 width: calc(100% - 21px);
 212         }
 213
 214         [data-dynlist] > .add-item > .cbi-button {
 215                 margin-right: -1px;
 216         }
 217
 218         input[type="text"] + .cbi-button,
 219         input[type="password"] + .cbi-button,
 220         select + .cbi-button {
 221                 font-size: 14px !important;
 222                 line-height:  28px;
 223                 height: 30px;
 224                 box-sizing: border-box;
 225                 overflow: hidden;
 226                 text-overflow: ellipsis;
 227         }
 228
 229         .cbi-value-field input[type="checkbox"],
 230         .cbi-value-field input[type="radio"] {
 231                 margin: 0;
 232         }
 233
 234         button, .btn, .cbi-button {
 235                 font-size: 14px !important;
 236                 padding: 0 8px;
 237         }
 238
 239         .actions,
 240         .cbi-page-actions {
 241                 border-top: none;
 242                 margin-top: -.5em;
 243                 padding: 8px;
 244         }
 245
 246         [data-page="admin-status-overview"] .cbi-section:nth-of-type(1) .td:first-child,
 247         [data-page="admin-status-overview"] .cbi-section:nth-of-type(2) .td:first-child {
 248                 flex-grow: 1;
 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                 flex-basis: 100%;
 305         }
 306
 307         #cbi-network-switch_vlan .td.cbi-section-actions::before {
 308                 display: none;
 309         }
 310
 311         #cbi-network-switch_vlan .td.cbi-section-actions > * {
 312                 width: auto;
 313                 display: block;
 314         }
 315
 316         #wifi_assoclist_table .td,
 317         [data-page="admin-status-processes"] .td {
 318                 flex-basis: 50% !important;
 319         }
 320
 321         [data-page="admin-status-processes"] .td[data-widget="button"] {
 322                 flex-basis: 33% !important;
 323         }
 324
 325         [data-page="admin-status-processes"] .td[data-name="PID"],
 326         [data-page="admin-status-processes"] .td[data-name="USER"] {
 327                 flex-basis: 25% !important;
 328         }
 329
 330         [data-page="admin-system-fstab"] .td[data-widget="button"]::before,
 331         [data-page="admin-system-startup"] .td[data-widget="button"]::before,
 332         [data-page="admin-status-processes"] .td[data-widget="button"]::before {
 333                 display: none;
 334         }
 335
 336         [data-name="bridge-vlan"] > div {
 337                 overflow: visible !important;
 338         }
 339
 340         [data-name="bridge-vlan"] .td[data-title] {
 341                 flex-basis: 33%;
 342         }
 343
 344         [data-name="bridge-vlan"] .td[data-title]::before {
 345                 content: attr(data-title);
 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
 401 @media screen and (max-width: 375px) {
 402         .td .ifacebox {
 403                 width: 100%;
 404                 margin: 0 !important;
 405                 flex-direction: row;
 406         }
 407
 408         .td .ifacebox .ifacebox-head {
 409                 min-width: 25%;
 410                 justify-content: space-around;
 411                 border-radius: 4px 0 0 4px;
 412         }
 413
 414         .td .ifacebox .ifacebox-head,
 415         .td .ifacebox .ifacebox-body {
 416                 display: flex;
 417                 border-bottom: none;
 418                 align-items: center;
 419         }
 420
 421         .td .ifacebox .ifacebox-head > *,
 422         .ifacebox .ifacebox-body > * {
 423                 margin: .125em;
 424         }
 425 }