header h3 a, header .brand { display:none !important; } @media screen and (max-device-width: 600px) { #maincontent.container { margin-top: 30px; } .tabs, .cbi-tabmenu { background: linear-gradient(#fff 20%, #ddd 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 #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-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: #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-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 #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, .cbi-dropdown > ul > li input[type="text"] { font-size: 16px !important; line-height: 28px; height: auto; } 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-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: 375px) { #maincontent.container { 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:not(.cbi-dropdown) { flex: 1 1 calc(50% - 2px); margin: 1px !important; overflow: hidden; text-overflow: ellipsis; } .cbi-page-actions .cbi-button-negative, .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[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; } .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; } }