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