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