luci-mod-status: partial revert of styling changes
authorPaul Donald <[email protected]>
Tue, 21 Oct 2025 14:25:18 +0000 (16:25 +0200)
committerPaul Donald <[email protected]>
Tue, 21 Oct 2025 14:25:47 +0000 (16:25 +0200)
follow-up to 788e47034becc7806485b40dbef9774a14f8ea9d

Some of the CSS changes have knock-on effects and change behaviour in
other display areas, especially when the CSS is minified.

Simplified to change between label flavours on hide/show status.

Signed-off-by: Paul Donald <[email protected]>
modules/luci-mod-status/htdocs/luci-static/resources/view/status/index.js
themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css
themes/luci-theme-material/htdocs/luci-static/material/cascade.css
themes/luci-theme-openwrt-2020/htdocs/luci-static/openwrt2020/cascade.css
themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css

index 243f66daa4f4e8b20a836a2b14b26ccced4a0605..0505d126f4c51bd7a10d9f4901529324ed4e48a0 100644 (file)
@@ -13,6 +13,7 @@ return view.extend({
                include.hide = !include.hide;
 
                btn.setAttribute('data-style', include.hide ? 'active' : 'inactive');
+               btn.setAttribute('class', include.hide ? 'label notice' : 'label');
                btn.firstChild.data = include.hide ? _('Show') : _('Hide');
                btn.blur();
 
@@ -131,6 +132,7 @@ return view.extend({
                                        title != '' ? E('h3', title) : '',
                                        E('div', [
                                                E('span', {
+                                                       'class': includes[i].hide ? 'label notice' : 'label',
                                                        'data-style': includes[i].hide ? 'active' : 'inactive',
                                                        'data-indicator': 'poll-status',
                                                        'data-clickable': 'true',
index 1b94ad7a1dbe768978be335610b09060ecf207b3..a874c2e11d420cf84851d246e9b20f943ba590aa 100644 (file)
@@ -2020,38 +2020,6 @@ form.inline { display: inline; margin-bottom: 0; }
        font-family: monospace;
 }
 
-.cbi-title {
-       display: flex;
-}
-
-.cbi-title div {
-       margin-left: 5px;
-       margin-right: auto;
-       align-self: center;
-}
-
-.cbi-title [data-indicator] {
-       padding: 3px 3px 2px;
-       font-size: 9.75px;
-       font-weight: bold;
-       color: var(--text-color-high);
-       text-transform: uppercase;
-       white-space: nowrap;
-       background-color: var(--background-color-low);
-       border-radius: 3px;
-       text-shadow: none;
-       margin: .125em 0 .125em .4em;
-}
-
-.cbi-title [data-indicator][data-style="active"] {
-       color: var(--on-primary-color);
-       background-color: var(--primary-color-high);
-}
-
-.cbi-title [data-indicator][data-clickable] {
-       cursor: pointer;
-}
-
 .cbi-section-table .tr:hover .td,
 .cbi-section-table .tr:hover .th,
 .cbi-section-table .tr:hover::before {
index 8e491e10c95e4f7bf6c2458c4a92bb90ea6b2cf9..338d7b4fb39c880bd29a12b00db8f55a3f18ec65 100644 (file)
@@ -807,7 +807,6 @@ fieldset > fieldset,
 }
 
 .cbi-section > h3:first-child,
-.cbi-title,
 .panel-title {
        font-size: 1.4rem;
        line-height: 1;
@@ -820,28 +819,6 @@ fieldset > fieldset,
        border-bottom: thin solid #eee;
 }
 
-.cbi-title {
-       display: flex;
-}
-
-.cbi-title > h3:first-child {
-       font-size: unset;
-       margin: unset;
-       padding-bottom: unset;
-}
-
-.cbi-title [data-indicator] {
-       position: relative;
-       top: 0.2rem;
-       float: left;
-       margin-left: 0.3rem;
-       cursor: pointer;
-}
-
-.cbi-title [data-indicator][data-style="active"] {
-       background-color: #002B49 !important;
-}
-
 .cbi-section > h4:first-child,
 .cbi-section > p:first-child,
 [data-tab-title] > h3:first-child,
index ec89ba5df92ba18e4e733413dfcf0d913c415931..cd8fef6a2741e6dc53c8f8c72dc1eccb179ab29e 100644 (file)
@@ -369,44 +369,6 @@ tr.placeholder > td {
  * view specific table invariants
  */
 
-.cbi-title {
-       display: flex;
-        margin: 0 0 1rem 0;
-}
-
-.cbi-title > h3{
-       margin: unset;
-}
-
-.cbi-title div {
-       margin-left: 5px;
-       margin-right: auto;
-       align-self: center;
-}
-
-.cbi-title [data-indicator] {
-       background: var(--secondary-bright-color);
-       color: var(--main-bright-color);
-       border: 0.5px solid var(--main-bright-color);
-       display: inline-block;
-       font-size: .85em;
-       line-height: calc(1.5em - 1px);
-       padding: 0 calc(0.5em - 0.5px);
-       margin: 0.125em;
-       border-radius: 1em;
-       white-space: nowrap;
-}
-
-.cbi-title [data-indicator][data-style="active"] {
-       background: var(--main-bright-color);
-       color: var(--secondary-bright-color);
-       border: 0.5px solid var(--secondary-bright-color);
-}
-
-.cbi-title [data-indicator][data-clickable] {
-       cursor: pointer;
-}
-
  #cbi-wireless-wifi-device .ifacebadge {
        flex-direction: column;
        justify-content: space-around;
index 224c282773f5a0e8f0aef2dadfaade7704f7c150..34896af979d4ec30f8acc74a5f77b057058d6ba6 100644 (file)
@@ -565,48 +565,6 @@ p {
        display: none;
 }
 
-.cbi-title {
-       display: flex;
-       border-bottom: 1px solid;
-       padding-bottom: 4px;
-       margin: .25em 0 .5em 0;
-}
-
-.cbi-title > h3 {
-       border-bottom: unset;
-       padding-bottom: unset;
-       margin: unset;
-       width: unset;
-}
-
-
-.cbi-title div {
-       margin-left: 5px;
-       margin-right: auto;
-       align-self: center;
-}
-
-.cbi-title [data-indicator] {
-       text-transform: uppercase;
-       background: #90c0e0 !important;
-       color: #000 !important;
-       font-size: 11px;
-       padding: 0.125em 0.5em;
-       margin: 0.125em;
-       border-radius: 0.6em;
-}
-
-.cbi-title [data-indicator][data-style="inactive"] {
-       border: 1px solid #90c0e0;
-       background: #fff !important;
-       color: #90c0e0 !important;
-       padding: calc(.125em-1px) calc(.5em-1px);
-}
-
-.cbi-title [data-indicator][data-clickable] {
-       cursor: pointer;
-}
-
 .cbi-title-ref {
        color: #37c;
 }