From c19020b2a4236945c1ad4a699ebb761a5dd7dc1f Mon Sep 17 00:00:00 2001 From: Jo-Philipp Wich Date: Tue, 17 May 2022 15:09:25 +0200 Subject: luci-theme-bootstrap: various style tweaks - Make control-group containers flex and ensure proper spacing between elements, fixes e.g. unwanted break for reveal/hide password button on narrow mobile views - Decrease top margin of modal popups - Fix displaying cell titles on mobile wrapped table rows - Tune mobile flex table styles Signed-off-by: Jo-Philipp Wich --- .../htdocs/luci-static/bootstrap/cascade.css | 37 ++++----- .../htdocs/luci-static/bootstrap/mobile.css | 97 +++++++++++----------- 2 files changed, 67 insertions(+), 67 deletions(-) (limited to 'themes') diff --git a/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css b/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css index b558764962..a2099f39d4 100644 --- a/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css +++ b/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css @@ -257,6 +257,18 @@ textarea { vertical-align: top; } +.control-group { + display: inline-flex; + gap: .2em; +} + +.control-group > input + :not(input):not(select), +.control-group > select + :not(input):not(select) { + margin-left: calc(-.2em + -2px); + border-radius: 0 3px 3px 0; + padding: 0 6px; +} + /* * Scaffolding * Basic and global styles for generating a grid system, structural layout, and page templates @@ -602,7 +614,7 @@ select, margin-bottom: 4px; box-shadow: 0 0 2px var(--border-color-high); background: var(--background-color-high); - padding: 2px 2em 2px 4px; + padding: 6px 2em 6px 4px; border: 1px solid var(--border-color-high); border-radius: 3px; color: var(--text-color-high); @@ -1709,25 +1721,6 @@ body.modal-overlay-active #modal_overlay { width: 100%; } -input[type="text"] + .cbi-button, -input[type="password"] + .cbi-button, -select + .cbi-button, -.cbi-select + .cbi-button { - border-radius: 0 3px 3px 0; - border-color: var(--border-color-high); - margin-left: -2px; - padding: 0 6px; - vertical-align: top; - height: 30px; - font-size: 14px; - line-height: 28px; -} - -select + .cbi-button, -.cbi-select + .cbi-button { - position: relative; -} - .cbi-title-ref { color: #37c; } @@ -2544,3 +2537,7 @@ div.cbi-value var.cbi-tooltip-container, [data-darkmode="true"] [data-page="admin-statistics-graphs"] [data-plugin] img { filter: invert(100%) hue-rotate(150deg); } + +[data-page="admin-system-admin-sshkeys"] .cbi-dynlist { + max-width: none; +} 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 00dd089599..da1d7fe281 100644 --- a/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/mobile.css +++ b/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/mobile.css @@ -3,6 +3,10 @@ header h3 a, header .brand { } @media screen and (max-device-width: 600px) { + .modal { + margin: 1.5em auto; + } + .tabs, .cbi-tabmenu { background: linear-gradient(var(--background-color-high) 20%, var(--border-color-medium) 100%); background-size: 1px 34px; @@ -37,7 +41,7 @@ header h3 a, header .brand { .table .th, .table .td, .table .tr::before { - flex: 2 2 33%; + flex: 1 1 50%; align-self: flex-start; overflow: hidden; text-overflow: ellipsis; @@ -75,6 +79,8 @@ header h3 a, header .brand { .td.cbi-value-field { align-self: flex-start; + flex-basis: 100%; + margin-bottom: .3em; } .td.cbi-value-field .cbi-button { @@ -112,7 +118,15 @@ header h3 a, header .brand { border-bottom: 1px solid var(--border-color-medium); } - .td[data-title]::before, + .td[data-title]::before { + content: attr(data-title); + font-weight: bold; + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: pre-line; + } + .td[data-description]::after { display: block; } @@ -121,15 +135,11 @@ header h3 a, header .brand { 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; + flex-basis: 100%; } .hide-sm, @@ -137,17 +147,13 @@ header h3 a, header .brand { 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="CBI.DummyValue"], + .td.cbi-value-field[data-widget="CBI.Button"], + .td.cbi-value-field[data-widget="CBI.FlagValue"], + .td.cbi-value-field[data-widget="dvalue"], .td.cbi-value-field[data-widget="button"], .td.cbi-value-field[data-widget="fvalue"] { - flex-basis: 25%; + flex-basis: 50%; text-align: left; } @@ -157,6 +163,10 @@ header h3 a, header .brand { background-color: transparent; } + .cbi-tab-descr { + margin: 0 0 .5em 0; + } + .cbi-value { padding-bottom: .5em; border-bottom: 1px solid var(--border-color-high); @@ -178,11 +188,17 @@ header h3 a, header .brand { font-weight: bold; } - .cbi-value-field, .cbi-select, .cbi-dropdown:not(.btn):not(.cbi-button) { + .cbi-value-field, .cbi-select, .cbi-dynlist, .cbi-dropdown:not(.btn):not(.cbi-button) { width: 100%; margin: 0; } + .cbi-dynlist > .item { + min-height: 30px; + display: flex; + align-items: center; + } + input, textarea, select, .cbi-dropdown > ul > li { font-size: 16px !important; @@ -194,7 +210,8 @@ header h3 a, header .brand { } select, input[type="text"], input[type="password"], - .cbi-dropdown > ul > li input[type="text"] { + .cbi-dropdown > ul > li input[type="text"], + .cbi-value-field .control-group { width: 100%; height: 30px; } @@ -203,25 +220,9 @@ header h3 a, header .brand { 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; } @@ -243,9 +244,8 @@ header h3 a, header .brand { 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; + [data-page="admin-status-overview"] .td[width="33%"] { + flex-basis: 33%; } header .pull-right .label { @@ -300,14 +300,6 @@ header h3 a, header .brand { 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; @@ -344,6 +336,14 @@ header h3 a, header .brand { [data-name="bridge-vlan"] .td[data-title]::before { content: attr(data-title); } + + [data-page="admin-network-network"] .td[data-name="_ifacebox"] { + flex-basis: 40%; + } + + [data-page="admin-network-network"] .td[data-name="_ifacestat"] { + flex-basis: 60%; + } } @media screen and (max-device-width: 375px) { @@ -396,9 +396,12 @@ header h3 a, header .brand { body[data-page="admin-network-wireless"] .td.cbi-section-actions::before { content: none !important; } -} -@media screen and (max-width: 375px) { + [data-page="admin-network-network"] .td[data-name="_ifacebox"], + [data-page="admin-network-network"] .td[data-name="_ifacestat"] { + flex-basis: 100%; + } + .td .ifacebox { width: 100%; margin: 0 !important; -- cgit v1.2.3