}
@media screen and (max-device-width: 600px) {
- #maincontent.container {
- margin-top: 30px;
+ .tabs, .cbi-tabmenu {
+ background: linear-gradient(var(--background-color-high) 20%, var(--border-color-medium) 100%);
+ background-size: 1px 34px;
+ margin-bottom: 10px;
+ }
+
+ .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 var(--border-color-medium);
+ 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-widget="button"],
+ .td[data-widget="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: var(--background-color-low) !important;
+ font-size: 16px;
+ border-bottom: 1px solid var(--border-color-medium);
+ }
+
+ .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-widget="dvalue"] {
+ flex-basis: 50%;
+ }
+
+ .td.cbi-value-field[data-widget="button"],
+ .td.cbi-value-field[data-widget="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 var(--border-color-high);
+ margin-bottom: .5em;
+ display: block;
+ }
+
+ .cbi-value.hidden {
+ display: none;
+ }
+
+ .cbi-value .cbi-value:last-child {
+ border-bottom: none;
+ padding-bottom: inherit;
+ margin-bottom: inherit;
+ }
+
+ .cbi-value label.cbi-value-title {
+ font-weight: bold;
+ }
+
+ .cbi-value-field, .cbi-select, .cbi-dropdown:not(.btn):not(.cbi-button) {
+ width: 100%;
+ margin: 0;
+ }
+
+ input, textarea, select,
+ .cbi-dropdown > ul > li {
+ font-size: 16px !important;
+ height: auto;
+ }
+
+ .cbi-dropdown > ul > li input[type="text"] {
+ line-height: 28px;
+ }
+
+ select, input[type="text"], input[type="password"],
+ .cbi-dropdown > ul > li input[type="text"] {
+ 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;
+ }
+
+ button, .btn, .cbi-button {
+ font-size: 14px !important;
+ padding: 0 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: 0 1 20%;
+ display: flex;
+ flex-direction: column;
+ padding: 0;
+ justify-content: space-around;
+ margin: .2em 5px .2em auto;
+ }
+
+ .menu-dropdown, .dropdown-menu {
+ top: 23px;
+ }
+
+ .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-widget="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-widget="button"]::before,
+ [data-page="admin-system-startup"] .td[data-widget="button"]::before,
+ [data-page="admin-status-processes"] .td[data-widget="button"]::before {
+ display: none;
+ }
+
+ [data-name="bridge-vlan"] > div {
+ overflow: visible !important;
+ }
+
+ [data-name="bridge-vlan"] .td[data-title] {
+ flex-basis: 33%;
+ }
+
+ [data-name="bridge-vlan"] .td[data-title]::before {
+ content: attr(data-title);
}
}
-@media screen and (max-device-width: 360px) {
- #maincontent.container {
- margin-top: 60px;
+@media screen and (max-device-width: 375px) {
+ .cbi-page-actions {
+ display: flex;
+ justify-content: space-between;
+ margin: 0 -1px;
+ padding: 0;
+ }
+
+ .cbi-page-actions button {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
+ .cbi-page-actions .cbi-button {
+ flex: 1;
+ margin: 1px !important;
+ line-height: 2em;
+ }
+
+ .cbi-page-actions .cbi-button-negative,
+ .cbi-page-actions .cbi-button-primary,
+ .cbi-page-actions .cbi-button-apply {
+ flex: 3;
+ }
+
+ .cbi-section-actions .cbi-button {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ margin: 1px !important;
+ }
+
+ body[data-page="admin-network-wireless"] .td[data-name="_badge"] {
+ max-width: 50px;
+ align-self: center;
+ }
+
+ body[data-page="admin-network-wireless"] .td[data-name="_badge"] .ifacebadge {
+ display: flex;
+ align-items: center;
+ flex-direction: column;
+ }
+
+ body[data-page="admin-network-wireless"] .td[data-name="_stat"] {
+ flex-basis: 60%;
+ }
+
+ body[data-page="admin-network-network"] .td.cbi-section-actions::before,
+ body[data-page="admin-network-wireless"] .td.cbi-section-actions::before {
+ content: none !important;
}
}
-@media screen and (max-device-width: 200px) {
- #maincontent.container {
- margin-top: 230px;
+@media screen and (max-width: 375px) {
+ .td .ifacebox {
+ width: 100%;
+ margin: 0 !important;
+ flex-direction: row;
}
-}
\ No newline at end of file
+
+ .td .ifacebox .ifacebox-head {
+ min-width: 25%;
+ justify-content: space-around;
+ border-radius: 4px 0 0 4px;
+ }
+
+ .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;
+ }
+}
projects / project / luci.git / blobdiff