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         }
 165
 166         .cbi-value .cbi-value:last-child {
 167                 border-bottom: none;
 168                 padding-bottom: inherit;
 169                 margin-bottom: inherit;
 170         }
 171
 172         .cbi-value label.cbi-value-title {
 173                 float: none;
 174                 font-weight: bold;
 175         }
 176
 177         .cbi-value-field, .cbi-select, .cbi-dropdown:not(.btn):not(.cbi-button) {
 178                 width: 100%;
 179                 margin: 0;
 180         }
 181
 182         input, textarea, select,
 183         .cbi-dropdown > ul > li {
 184                 font-size: 16px !important;
 185                 height: auto;
 186         }
 187
 188         .cbi-dropdown > ul > li input[type="text"] {
 189                 line-height: 28px;
 190         }
 191
 192         select, input[type="text"], input[type="password"],
 193         .cbi-dropdown > ul > li input[type="text"] {
 194                 width: 100%;
 195                 height: 30px;
 196         }
 197
 198         input.cbi-input-password {
 199                 width: calc(100% - 25px);
 200         }
 201
 202         [data-dynlist] {
 203                 display: block;
 204         }
 205
 206         [data-dynlist] > .add-item > input {
 207                 width: calc(100% - 21px);
 208         }
 209
 210         [data-dynlist] > .add-item > .cbi-button {
 211                 margin-right: -1px;
 212         }
 213
 214         input[type="text"] + .cbi-button,
 215         input[type="password"] + .cbi-button,
 216         select + .cbi-button {
 217                 font-size: 14px !important;
 218                 line-height:  28px;
 219                 height: 30px;
 220                 box-sizing: border-box;
 221                 overflow: hidden;
 222                 text-overflow: ellipsis;
 223         }
 224
 225         .cbi-value-field input[type="checkbox"],
 226         .cbi-value-field input[type="radio"] {
 227                 margin: 0;
 228         }
 229
 230         button, .btn, .cbi-button {
 231                 font-size: 14px !important;
 232                 padding: 0 8px;
 233         }
 234
 235         .actions,
 236         .cbi-page-actions {
 237                 border-top: none;
 238                 margin-top: -.5em;
 239                 padding: 8px;
 240         }
 241
 242         [data-page="admin-status-overview"] .cbi-section:nth-of-type(1) .td:first-child,
 243         [data-page="admin-status-overview"] .cbi-section:nth-of-type(2) .td:first-child {
 244                 flex-grow: 1;
 245         }
 246
 247         header .pull-right .label {
 248                 white-space: normal;
 249                 display: inline-block;
 250                 text-align: center;
 251                 line-height: 12px;
 252                 margin: 1px 0;
 253         }
 254
 255         header > .fill {
 256                 padding: 1px;
 257         }
 258
 259         header > .fill > .container {
 260                 display: flex;
 261                 flex-direction: row;
 262         }
 263
 264         header .nav {
 265                 flex: 3 3 80%;
 266                 margin: 2px 5px 2px 0;
 267                 display: flex;
 268                 flex-wrap: wrap;
 269                 justify-content: flex-start;
 270         }
 271
 272         header .nav a {
 273                 padding: 2px 6px;
 274         }
 275
 276         header .pull-right {
 277                 flex: 0 1 20%;
 278                 display: flex;
 279                 flex-direction: column;
 280                 padding: 0;
 281                 justify-content: space-around;
 282                 margin: .2em 5px .2em auto;
 283         }
 284
 285         .menu-dropdown, .dropdown-menu {
 286                 top: 23px;
 287         }
 288
 289         .cbi-optionals,
 290         .cbi-section-create {
 291                 padding: 0 0 14px 0;
 292         }
 293
 294         #cbi-network-switch_vlan .th,
 295         #cbi-network-switch_vlan .td {
 296                 flex-basis: 12%;
 297         }
 298
 299         #cbi-network-switch_vlan .td.cbi-section-actions {
 300                 flex-basis: 100%;
 301         }
 302
 303         #cbi-network-switch_vlan .td.cbi-section-actions::before {
 304                 display: none;
 305         }
 306
 307         #cbi-network-switch_vlan .td.cbi-section-actions > * {
 308                 width: auto;
 309                 display: block;
 310         }
 311
 312         #wifi_assoclist_table .td,
 313         [data-page="admin-status-processes"] .td {
 314                 flex-basis: 50% !important;
 315         }
 316
 317         [data-page="admin-status-processes"] .td[data-widget="button"] {
 318                 flex-basis: 33% !important;
 319         }
 320
 321         [data-page="admin-status-processes"] .td[data-name="PID"],
 322         [data-page="admin-status-processes"] .td[data-name="USER"] {
 323                 flex-basis: 25% !important;
 324         }
 325
 326         [data-page="admin-system-fstab"] .td[data-widget="button"]::before,
 327         [data-page="admin-system-startup"] .td[data-widget="button"]::before,
 328         [data-page="admin-status-processes"] .td[data-widget="button"]::before {
 329                 display: none;
 330         }
 331
 332         [data-name="bridge-vlan"] > div {
 333                 overflow: visible !important;
 334         }
 335
 336         [data-name="bridge-vlan"] .td[data-title] {
 337                 flex-basis: 33%;
 338         }
 339
 340         [data-name="bridge-vlan"] .td[data-title]::before {
 341                 content: attr(data-title);
 342         }
 343 }
 344
 345 @media screen and (max-device-width: 375px) {
 346         .cbi-page-actions {
 347                 display: flex;
 348                 justify-content: space-between;
 349                 margin: 0 -1px;
 350                 padding: 0;
 351         }
 352
 353         .cbi-page-actions button {
 354                 overflow: hidden;
 355                 text-overflow: ellipsis;
 356         }
 357
 358         .cbi-page-actions .cbi-button {
 359                 flex: 1;
 360                 margin: 1px !important;
 361                 line-height: 2em;
 362         }
 363
 364         .cbi-page-actions .cbi-button-negative,
 365         .cbi-page-actions .cbi-button-primary,
 366         .cbi-page-actions .cbi-button-apply {
 367                 flex: 3;
 368         }
 369
 370         .cbi-section-actions .cbi-button {
 371                 overflow: hidden;
 372                 text-overflow: ellipsis;
 373                 margin: 1px !important;
 374         }
 375
 376         body[data-page="admin-network-wireless"] .td[data-name="_badge"] {
 377                 max-width: 50px;
 378                 align-self: center;
 379         }
 380
 381         body[data-page="admin-network-wireless"] .td[data-name="_badge"] .ifacebadge {
 382                 display: flex;
 383                 align-items: center;
 384                 flex-direction: column;
 385         }
 386
 387         body[data-page="admin-network-wireless"] .td[data-name="_stat"] {
 388                 flex-basis: 60%;
 389         }
 390
 391         body[data-page="admin-network-network"] .td.cbi-section-actions::before,
 392         body[data-page="admin-network-wireless"] .td.cbi-section-actions::before {
 393                 content: none !important;
 394         }
 395 }
 396
 397 @media screen and (max-width: 375px) {
 398         .td .ifacebox {
 399                 width: 100%;
 400                 margin: 0 !important;
 401                 flex-direction: row;
 402         }
 403
 404         .td .ifacebox .ifacebox-head {
 405                 min-width: 25%;
 406                 justify-content: space-around;
 407                 border-radius: 4px 0 0 4px;
 408         }
 409
 410         .td .ifacebox .ifacebox-head,
 411         .td .ifacebox .ifacebox-body {
 412                 display: flex;
 413                 border-bottom: none;
 414                 align-items: center;
 415         }
 416
 417         .td .ifacebox .ifacebox-head > *,
 418         .ifacebox .ifacebox-body > * {
 419                 margin: .125em;
 420         }
 421 }