diff options
Diffstat (limited to 'themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/mobile.css')
| -rw-r--r-- | themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/mobile.css | 388 |
1 files changed, 385 insertions, 3 deletions
diff --git a/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/mobile.css b/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/mobile.css index b74f209045..2e1ffb035b 100644 --- a/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/mobile.css +++ b/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/mobile.css @@ -6,11 +6,368 @@ header h3 a, header .brand { #maincontent.container { margin-top: 30px; } + + .tabs, .cbi-tabmenu { + background: linear-gradient(#fff 20%, #ddd 100%); + background-size: 1px 34px; + margin-bottom: 10px; + flex-wrap: wrap; + } + + .tabs > li, .cbi-tabmenu > li { + height: 30px; + } + + .tabs > li > a, .cbi-tabmenu > li > a { + padding: 0 8px; + line-height: 30px; + } + + .table { + display: flex; + flex-direction: column; + width: 100%; + } + + .tr { + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items: flex-end; + border-top: 1px solid #ddd; + padding: 5px 0; + margin: 0 -3px; + } + + .table .th, + .table .td, + .table .tr::before { + flex: 2 2 33%; + align-self: flex-start; + overflow: hidden; + text-overflow: ellipsis; + word-wrap: break-word; + display: inline-block; + border-top: none; + padding: 3px; + box-sizing: border-box; + } + + .table .td.cbi-dropdown-open { + overflow: visible; + } + + .col-1 { flex: 1 1 30px !important; -webkit-flex: 1 1 30px !important; } + .col-2 { flex: 2 2 60px !important; -webkit-flex: 2 2 60px !important; } + .col-3 { flex: 3 3 90px !important; -webkit-flex: 3 3 90px !important; } + .col-4 { flex: 4 4 120px !important; -webkit-flex: 4 4 120px !important; } + .col-5 { flex: 5 5 150px !important; -webkit-flex: 5 5 150px !important; } + .col-6 { flex: 6 6 180px !important; -webkit-flex: 6 6 180px !important; } + .col-7 { flex: 7 7 210px !important; -webkit-flex: 7 7 210px !important; } + .col-8 { flex: 8 8 240px !important; -webkit-flex: 8 8 240px !important; } + .col-9 { flex: 9 9 270px !important; -webkit-flex: 9 9 270px !important; } + .col-10 { flex: 10 10 300px !important; -webkit-flex: 10 10 300px !important; } + + .td select { + word-wrap: normal; + } + + .td[data-type="button"], + .td[data-type="fvalue"] { + flex: 1 1 17%; + text-align: left; + } + + .td.cbi-value-field { + align-self: flex-start; + } + + .td.cbi-value-field .cbi-button { + width: 100%; + } + + .table.cbi-section-table { + border: none; + background: none; + margin: 0; + } + + .tr.table-titles, + .cbi-section-table-titles, + .cbi-section-table-descr { + display: none; + } + + .cbi-section-table-row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + margin: 0 0 .5em 0; + } + + .cbi-section-table + .cbi-section-create { + padding-top: 0; + } + + .tr[data-title]::before { + display: block; + flex: 1 1 100%; + background: #f5f5f5 !important; + font-size: 16px; + border-bottom: 1px solid #ddd; + } + + .td[data-title]::before, + .td[data-description]::after { + display: block; + } + + .td[data-title] ~ .td.cbi-section-actions { + align-self: flex-start; + } + + .td[data-title] ~ .td.cbi-section-actions::before { + display: block; + content: "\a0"; + } + + .td.cbi-section-actions { + overflow: initial; + max-width: 100%; + padding: 3px 2px; + } + + .hide-sm, + .hide-xs { + display: none !important; + } + + .td.cbi-value-field { + flex-basis: 100%; + } + + .td.cbi-value-field[data-type="dvalue"] { + flex-basis: 50%; + } + + .td.cbi-value-field[data-type="button"], + .td.cbi-value-field[data-type="fvalue"] { + flex-basis: 25%; + text-align: left; + } + + .cbi-section-table .tr:hover .td, + .cbi-section-table .tr:hover .th, + .cbi-section-table .tr:hover::before { + background-color: transparent; + } + + .cbi-value { + padding-bottom: .5em; + border-bottom: 1px solid #ddd; + margin-bottom: .5em; + } + + .cbi-value label.cbi-value-title { + float: none; + font-weight: bold; + } + + .cbi-value-field, .cbi-dropdown { + width: 100%; + margin: 0; + } + + input, textarea, select { + font-size: 16px !important; + line-height: 28px; + } + + select, input[type="text"], input[type="password"] { + width: 100%; + height: 30px; + } + + input.cbi-input-password { + width: calc(100% - 25px); + } + + [data-dynlist] { + display: block; + } + + [data-dynlist] > .add-item > input { + width: calc(100% - 21px); + } + + [data-dynlist] > .add-item > .cbi-button { + margin-right: -1px; + } + + input[type="text"] + .cbi-button, + input[type="password"] + .cbi-button, + select + .cbi-button { + font-size: 14px !important; + line-height: 28px; + height: 30px; + box-sizing: border-box; + overflow: hidden; + text-overflow: ellipsis; + } + + .cbi-value-field input[type="checkbox"], + .cbi-value-field input[type="radio"] { + margin: 0; + } + + .btn, .cbi-button { + font-size: 14px !important; + padding: 4px 8px; + } + + .actions, + .cbi-page-actions { + border-top: none; + margin-top: -.5em; + padding: 8px; + } + + [data-page="admin-status-overview"] .cbi-section:nth-of-type(1) .td:first-child, + [data-page="admin-status-overview"] .cbi-section:nth-of-type(2) .td:first-child { + flex-grow: 1; + } + + header .pull-right .label { + white-space: normal; + display: inline-block; + text-align: center; + line-height: 12px; + margin: 1px 0; + } + + header > .fill { + padding: 1px; + } + + header > .fill > .container { + display: flex; + flex-direction: row; + } + + header .nav { + flex: 3 3 80%; + margin: 2px 5px 2px 0; + display: flex; + flex-wrap: wrap; + justify-content: flex-start; + } + + header .nav a { + padding: 2px 6px; + } + + header .pull-right { + flex: 1 1 20%; + display: flex; + flex-direction: column; + padding: 0; + justify-content: space-around; + } + + .menu-dropdown, .dropdown-menu { + top: 23px; + } + + body { + padding-top: 30px; + } + + .cbi-optionals, + .cbi-section-create { + padding: 0 0 14px 0; + } + + #cbi-network-switch_vlan .th, + #cbi-network-switch_vlan .td { + flex-basis: 12%; + } + + #cbi-network-switch_vlan .td.cbi-section-actions { + flex-basis: 100%; + } + + #cbi-network-switch_vlan .td.cbi-section-actions::before { + display: none; + } + + #cbi-network-switch_vlan .td.cbi-section-actions > * { + width: auto; + display: block; + } + + #wifi_assoclist_table .td, + [data-page="admin-status-processes"] .td { + flex-basis: 50% !important; + } + + [data-page="admin-status-processes"] .td[data-type="button"] { + flex-basis: 33% !important; + } + + [data-page="admin-status-processes"] .td[data-name="PID"], + [data-page="admin-status-processes"] .td[data-name="USER"] { + flex-basis: 25% !important; + } + + [data-page="admin-system-fstab"] .td[data-type="button"]::before, + [data-page="admin-system-startup"] .td[data-type="button"]::before, + [data-page="admin-status-processes"] .td[data-type="button"]::before { + display: none; + } } -@media screen and (max-device-width: 360px) { +@media screen and (max-device-width: 375px) { #maincontent.container { - margin-top: 60px; + margin-top: 55px; + } + + .cbi-page-actions { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + margin: 0 -1px; + padding: 0; + } + + .cbi-page-actions .cbi-button { + flex: 1 1 calc(50% - 2px); + margin: 1px !important; + overflow: hidden; + text-overflow: ellipsis; + } + + .cbi-page-actions .cbi-button-primary, + .cbi-page-actions .cbi-button-apply { + flex-basis: calc(100% - -2px); + } + + .cbi-section-actions .cbi-button { + overflow: hidden; + text-overflow: ellipsis; + } + + body[data-page="admin-network-wireless"] .td.col-2 { + max-width: 50px; + } + + body[data-page="admin-network-wireless"] .td.col-2 > .ifacebadge { + display: flex; + align-items: center; + flex-direction: column; + } + + body[data-page="admin-network-network"] .td.col-3 { + min-width: 250px; } } @@ -18,4 +375,29 @@ header h3 a, header .brand { #maincontent.container { margin-top: 230px; } -}
\ No newline at end of file +} + +@media screen and (max-width: 375px) { + .td .ifacebox { + width: 100%; + margin: 0 !important; + flex-direction: row; + } + + .td .ifacebox .ifacebox-head { + min-width: 25%; + justify-content: space-around; + } + + .td .ifacebox .ifacebox-head, + .td .ifacebox .ifacebox-body { + display: flex; + border-bottom: none; + align-items: center; + } + + .td .ifacebox .ifacebox-head > *, + .ifacebox .ifacebox-body > * { + margin: .125em; + } +} |