luci-theme-openwrt-2020: add css success label

[project/luci.git] / themes / luci-theme-openwrt-2020 / htdocs / luci-static / openwrt2020 / cascade.css

diff --git a/themes/luci-theme-openwrt-2020/htdocs/luci-static/openwrt2020/cascade.css b/themes/luci-theme-openwrt-2020/htdocs/luci-static/openwrt2020/cascade.css
index 6ee432f5c932584594fbaaced519bb437522c9c8..c6e5d774283eff334dcf5d3d3dd291968f08a025 100644 (file)
--- a/themes/luci-theme-openwrt-2020/htdocs/luci-static/openwrt2020/cascade.css
+++ b/themes/luci-theme-openwrt-2020/htdocs/luci-static/openwrt2020/cascade.css
@@ -5,6 +5,7 @@
        --secondary-dark-color: #212322;
        --danger-color: #CC1111;
        --warning-color: #CC8800;
+       --success-color: #5CB85C;
        --regular-font: "GalanoGrotesqueW00-Regular";
        --base-font-size: 16px;
 }
@@ -107,8 +108,7 @@ body {
        white-space: nowrap;
 }
 
-#indicators > [data-style="inactive"],
-#indicators > * > #xhr_poll_status_off {
+#indicators > [data-style="inactive"] {
        background: var(--main-bright-color);
        color: var(--secondary-bright-color);
        border: 2px solid var(--secondary-bright-color);
@@ -116,12 +116,6 @@ body {
        padding: 0 calc(.5em - 2px);
 }
 
-#indicators > * > #xhr_poll_status_off {
-       border-radius: 1em;
-       margin: 0 -.5em;
-       display: block;
-}
-
 #menubar h2,
 .skiplink {
        display: none;
@@ -154,12 +148,19 @@ body {
 }
 
 #mainmenu {
-       flex: 1 1 200px;
+       flex: 1 1 100px;
+       max-width: 250px;
        background: var(--main-dark-color);
        color: var(--main-bright-color);
        padding: 1em;
 }
 
+#mainmenu:empty {
+       max-width: 0;
+       padding: 1em 0;
+       transition: all .2s ease-in-out;
+}
+
 #mainmenu > div {
        position: sticky;
        top: 1em;
@@ -167,7 +168,7 @@ body {
 
 #mainmenu ul {
        padding: 0;
-       margin: 0 0 .5em .5em;
+       margin: 0 0 0 .5em;
        line-height: 1.5em;
 }
 
@@ -189,6 +190,7 @@ body {
 #mainmenu li.active > ul {
        max-height: 3000px;
        transition: max-height 1s ease-in-out;
+       margin: 0 0 .5em .5em;
 }
 
 #mainmenu .l1 > li > a {
@@ -270,73 +272,69 @@ body.modal-overlay-active #modal_overlay {
  * table layout
  */
 
-.table {
-       display: table;
+table {
        width: 100%;
        margin: 0 0 1rem 0;
        position: relative;
+       border-collapse: collapse;
 }
 
-.tr {
-       display: table-row;
-}
-
-.tr.cbi-section-table-titles[data-title]::before {
+tr.cbi-section-table-titles[data-title]::before {
        font-weight: bold;
        border-top: none;
 }
 
-.tr[data-title]::before {
+tr[data-title]::before {
        content: attr(data-title);
        display: table-cell;
        border-top: 1px solid var(--main-dark-color);
        padding: .5em;
 }
 
-.th {
+th {
+       text-align: left;
        font-weight: bold;
-       display: table-cell;
        padding: .5em;
        /* word-break: break-word; */
 }
 
-.cbi-section-table-descr .th {
+.cbi-section-table-descr th {
        opacity: .8;
        font-size: 90%;
        font-weight: normal;
 }
 
-.td {
-       display: table-cell;
+td {
        border-top: 1px solid var(--main-dark-color);
        padding: .5em;
        vertical-align: middle;
 }
 
-.td input:not([type]),
-.td input[type="text"],
-.td input[type="password"],
-.td select,
-.td .cbi-dropdown:not(.btn):not(.cbi-button),
-.td .cbi-dynlist {
+td input:not([type]),
+td input[type="text"],
+td input[type="password"],
+td select,
+td .cbi-dropdown:not(.btn):not(.cbi-button),
+td .cbi-dynlist,
+td .control-group {
        min-width: auto;
        width: 100%;
 }
 
-.tr.drag-over-above {
+tr.drag-over-above {
        box-shadow: 0 -6px 6px var(--main-bright-color);
 }
 
-.tr.drag-over-below {
+tr.drag-over-below {
        box-shadow: 0 6px 6px var(--main-bright-color);
 }
 
-.tr.placeholder {
+tr.placeholder {
        height: 4em;
        position: relative;
 }
 
-.tr.placeholder > .td {
+tr.placeholder > td {
        position: absolute;
        left: 0;
        right: 0;
@@ -356,51 +354,51 @@ body.modal-overlay-active #modal_overlay {
        justify-content: space-around;
  }
 
-.assoclist .td,
-[data-page="admin-status-overview"] .td {
+.assoclist td,
+[data-page="admin-status-overview"] td {
        font-size: .9rem;
        vertical-align: middle;
 }
 
-.assoclist .td:nth-of-type(3) > span {
+.assoclist td:nth-of-type(3) > span {
        display: block;
        max-width: 270px;
        font-size: .8rem;
 }
 
-.assoclist .td:nth-of-type(5) > span {
+.assoclist td:nth-of-type(5) > span {
        font-size: .8rem;
 }
 
-.assoclist .td > .ifacebadge {
+.assoclist td > .ifacebadge {
        flex-wrap: wrap;
        justify-content: space-around;
        max-width: 120px;
        padding: .2em;
 }
 
-.assoclist .td > .ifacebadge::after {
+.assoclist td > .ifacebadge::after {
        overflow: hidden;
        text-overflow: ellipsis;
 }
 
-.assoclist .td > .ifacebadge > img {
+.assoclist td > .ifacebadge > img {
        margin: 0 25px;
 }
 
-.assoclist .td > .ifacebadge[data-ssid][data-ifname] > span {
+.assoclist td > .ifacebadge[data-ssid][data-ifname] > span {
        display: none;
 }
 
-.assoclist .td > .ifacebadge[data-ssid][data-ifname]::after {
+.assoclist td > .ifacebadge[data-ssid][data-ifname]::after {
        content: attr(data-ssid) " (" attr(data-ifname) ")";
 }
 
-[data-page="admin-status-overview"] .td:nth-of-type(3) {
+[data-page="admin-status-overview"] td:nth-of-type(3) {
        min-width: 100px;
 }
 
-[data-page="admin-network-firewall"] .table > .tr > *:nth-child(1) {
+[data-page="admin-network-firewall"] table > tr > *:nth-child(1) {
        flex: 1 1 30%;
 }
 
@@ -412,8 +410,8 @@ body.modal-overlay-active #modal_overlay {
        flex: 1;
 }
 
-[data-page="admin-status-processes"] .table .td:nth-of-type(3),
-[data-tab="leases"] .table .td[data-name="duid"] {
+[data-page="admin-status-processes"] table td:nth-of-type(3),
+[data-tab="leases"] table td[data-name="duid"] {
        word-break: break-word;
 }
 
@@ -666,7 +664,7 @@ ul > li {
        padding: 0;
        text-align: center;
        width: 100%;
-       max-width: 100px;
+       max-width: 150px;
 }
 
 .ifacebox-head {
@@ -802,6 +800,7 @@ ul > li {
        opacity: 1;
        height: 1.8em;
        max-height: none;
+       overflow: visible;
 }
 
 .cbi-tabmenu > li > a {
@@ -852,6 +851,10 @@ ul > li {
        background: var(--danger-color);
 }
 
+.alert-message.success {
+       background: var(--success-color);
+}
+
 .alert-message .btn {
        background: inherit;
        box-shadow: 0 0 2px var(--secondary-bright-color);
@@ -909,7 +912,7 @@ button.important {
 
 button[disabled], button.disabled, .btn[disabled], .btn.disabled {
        pointer-events: none;
-       opacity: .5;
+       opacity: .6;
 }
 
 .cbi-button-apply, .cbi-button-positive {
@@ -920,8 +923,18 @@ button[disabled], button.disabled, .btn[disabled], .btn.disabled {
        background: var(--danger-color);
 }
 
+.cbi-checkbox {
+       position: relative;
+}
+
 .cbi-checkbox input[type="checkbox"] {
-       display: none;
+       position: absolute;
+       z-index: 10;
+       -webkit-appearence: button;
+       height: 1.3em;
+       width: 1.3em;
+       opacity: 0;
+       cursor: pointer;
 }
 
 .cbi-checkbox input[type="checkbox"] + label {
@@ -943,7 +956,6 @@ button[disabled], button.disabled, .btn[disabled], .btn.disabled {
        position: absolute;
        left: 0;
        top: 0;
-       cursor: pointer;
 }
 
 .cbi-checkbox input[type="checkbox"]:checked + label::after {
@@ -959,6 +971,24 @@ button[disabled], button.disabled, .btn[disabled], .btn.disabled {
        cursor: pointer;
 }
 
+.cbi-checkbox input.cbi-input-invalid[type="checkbox"] + label::before {
+       box-shadow: 0 0 2px var(--danger-color);
+}
+
+.cbi-checkbox input.cbi-input-invalid[type="checkbox"]:checked + label::after {
+       background: var(--danger-color);
+}
+
+.cbi-checkbox input[type="checkbox"][disabled] + label::before,
+.cbi-checkbox input[type="checkbox"][disabled] + label::after {
+       pointer-events: none;
+       opacity: .6;
+}
+
+.cbi-checkbox input[type="checkbox"][disabled] {
+       pointer-events: none;
+}
+
 input:not([type]),
 input[type="text"],
 input[type="password"],
@@ -982,6 +1012,15 @@ select:focus,
        border-color: var(--main-dark-color);
 }
 
+input[disabled]:not([type]),
+input[disabled][type="text"],
+input[disabled][type="password"],
+select[disabled],
+.cbi-dynlist[disabled] {
+       opacity: .6;
+       pointer-events: none;
+}
+
 input:not([type]) + .btn, input:not([type]) + button,
 input[type="text"] + .btn, input[type="text"] + button,
 input[type="password"] + .btn, input[type="password"] + button {
@@ -1029,6 +1068,7 @@ textarea {
 .control-group {
        display: inline-flex;
        margin: 0 -.125rem;
+       min-width: 20.25em;
 }
 
 .control-group > *,
@@ -1038,12 +1078,13 @@ textarea {
 
 .control-group > * {
        margin: .125rem !important;
-       min-width: auto;
+       min-width: auto !important;
 }
 
 .control-group > select,
 .control-group > input:not([type]),
-.control-group > input[type="text"] {
+.control-group > input[type="text"],
+.control-group > input[type="password"] {
        flex: 10;
 }
 
@@ -1096,13 +1137,14 @@ textarea {
 .cbi-dynlist > .item {
        box-shadow: 0 0 2px var(--main-dark-color);
        margin: .3em 0;
-       padding: .15em .2em;
+       padding: .15em 2em .15em .2em;
        border-radius: .25em;
        position: relative;
        overflow: hidden;
        transition: box-shadow .25s ease-in-out;
        pointer-events: none;
        flex: 1 1 100%;
+       word-break: break-all;
 }
 
 .cbi-dynlist > .item::after {
@@ -1123,6 +1165,10 @@ textarea {
        pointer-events: all;
 }
 
+.cbi-dynlist[disabled] > .item::after {
+       pointer-events: none;
+}
+
 .cbi-dynlist > .item:hover {
        box-shadow: 0 0 2px var(--main-bright-color);
 }
@@ -1473,11 +1519,12 @@ div[id$=".editlist"] {
        top: 0;
        bottom: 0;
        left: .4em;
-       width: 1.3em;
-       height: 1.3em;
+       width: 1.4em;
+       height: 1.4em;
        animation: spin 1s linear infinite;
        content: url("spinner.svg");
        margin: auto;
+       line-height: 0;
 }
 
 button.spinning, .btn.spinning {
@@ -1511,6 +1558,10 @@ button.spinning::before, .btn.spinning::before {
        background: var(--danger-color);
 }
 
+.label.success {
+       background: var(--success-color);
+}
+
 ul.deps {
        margin: 0;
        padding: 0;
@@ -1616,25 +1667,25 @@ ul.errors {
                display: none !important;
        }
 
-       .table {
+       table {
                display: flex;
                flex-direction: column;
        }
 
-       .tr {
+       tr {
                display: block;
                border-bottom: 1px solid var(--main-dark-color);
                margin-bottom: .5em;
                padding-bottom: .5em;
        }
 
-       .tr.cbi-section-table-titles[data-title]::before,
-       .tr.cbi-section-table-titles,
-       .tr.cbi-section-table-descr {
+       tr.cbi-section-table-titles[data-title]::before,
+       tr.cbi-section-table-titles,
+       tr.cbi-section-table-descr {
                display: none;
        }
 
-       .tr[data-title]::before {
+       tr[data-title]::before {
                display: block;
                font-weight: bold;
                border-top: none;
@@ -1642,23 +1693,23 @@ ul.errors {
                font-size: 110%;
        }
 
-       .td {
+       td {
                display: block;
                border-top: none;
                text-align: left !important;
                padding: .2em 0;
        }
 
-       .th, .table-titles {
+       th, table-titles {
                display: none;
        }
 
-       .td[data-title] {
+       td[data-title] {
                position: relative;
                padding: .2em 0 .2em 40%;
        }
 
-       .td[data-title]::before {
+       td[data-title]::before {
                content: attr(data-title) ": ";
                white-space: nowrap;
                font-weight: bold;
@@ -1675,7 +1726,7 @@ ul.errors {
                align-items: center;
        }
 
-       .td[data-title]::after {
+       td[data-title]::after {
                content: "";
                width: 2em;
                position: absolute;
@@ -1686,93 +1737,93 @@ ul.errors {
                background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--secondary-bright-color) 90%);
        }
 
-       [data-page="admin-status-overview"] .cbi-section:nth-of-type(1) .td:first-of-type,
-       [data-page="admin-status-overview"] .cbi-section:nth-of-type(2) .td:first-of-type {
+       [data-page="admin-status-overview"] .cbi-section:nth-of-type(1) td:first-of-type,
+       [data-page="admin-status-overview"] .cbi-section:nth-of-type(2) td:first-of-type {
                font-weight: bold;
                max-width: none;
                width: 100%;
        }
 
-       [data-page="admin-status-overview"] .td > span > span { font-size: .9rem; }
+       [data-page="admin-status-overview"] td > span > span { font-size: .9rem; }
 
-       [data-page="admin-status-routes"] .table:nth-of-type(3) .td:nth-of-type(1) { word-break: break-all; }
+       [data-page="admin-status-routes"] table:nth-of-type(3) td:nth-of-type(1) { word-break: break-all; }
 
-       [data-page="admin-network-firewall-zones"] .td[data-name="_info"] {
+       [data-page="admin-network-firewall-zones"] td[data-name="_info"] {
                padding: .2em 0;
                line-height: 2.2rem;
        }
 
-       [data-page="admin-network-firewall-zones"] .td[data-name="_info"]::before,
-       [data-page="admin-network-firewall-zones"] .td[data-name="_info"]::after {
+       [data-page="admin-network-firewall-zones"] td[data-name="_info"]::before,
+       [data-page="admin-network-firewall-zones"] td[data-name="_info"]::after {
                display: none;
        }
 
-       [data-page="admin-network-firewall-zones"] .td[data-name="_info"] label {
+       [data-page="admin-network-firewall-zones"] td[data-name="_info"] label {
                font-size: 1rem;
        }
 
-       #cbi-wireless-wifi-device .tr { display: flex; flex-wrap: wrap; }
-       #cbi-wireless-wifi-device .tr > *:nth-child(1) { flex: 1 1 20%; align-self: center; }
-       #cbi-wireless-wifi-device .tr > *:nth-child(2) { flex: 2 2 75%; }
-       #cbi-wireless-wifi-device .tr > *:nth-child(3) { flex: 3 3 100%; }
+       #cbi-wireless-wifi-device tr { display: flex; flex-wrap: wrap; }
+       #cbi-wireless-wifi-device tr > *:nth-child(1) { flex: 1 1 20%; align-self: center; }
+       #cbi-wireless-wifi-device tr > *:nth-child(2) { flex: 2 2 75%; }
+       #cbi-wireless-wifi-device tr > *:nth-child(3) { flex: 3 3 100%; }
 
-       #cbi-network-interface .tr { display: flex; flex-wrap: wrap; }
-       #cbi-network-interface .tr > *:nth-child(1) { flex: 1 1 33%; align-self: center; }
-       #cbi-network-interface .tr > *:nth-child(2) { flex: 2 2 60%; align-self: center; font-size: .9rem; overflow: hidden; }
-       #cbi-network-interface .tr > *:nth-child(3) { flex: 3 3 100%; }
-       #cbi-network-interface .tr > *:nth-child(2) > div { overflow: hidden; text-overflow: ellipsis; }
+       #cbi-network-interface tr { display: flex; flex-wrap: wrap; }
+       #cbi-network-interface tr > *:nth-child(1) { flex: 1 1 33%; align-self: center; }
+       #cbi-network-interface tr > *:nth-child(2) { flex: 2 2 60%; align-self: center; font-size: .9rem; overflow: hidden; }
+       #cbi-network-interface tr > *:nth-child(3) { flex: 3 3 100%; }
+       #cbi-network-interface tr > *:nth-child(2) > div { overflow: hidden; text-overflow: ellipsis; }
 
-       .assoclist .tr {
+       .assoclist tr {
                display: flex;
                flex-wrap: wrap;
        }
 
-       .assoclist .td > .ifacebadge {
+       .assoclist td > .ifacebadge {
                max-width: 90px;
        }
 
-       .assoclist .td > .ifacebadge > img {
+       .assoclist td > .ifacebadge > img {
                margin: 0 35px;
        }
 
-       .assoclist .td > .ifacebadge > span {
+       .assoclist td > .ifacebadge > span {
                display: none;
        }
 
-       .assoclist .td > .ifacebadge[data-ifname]::after {
+       .assoclist td > .ifacebadge[data-ifname]::after {
                content: attr(data-ifname);
        }
 
-       .assoclist .td > .ifacebadge[data-signal]::after {
+       .assoclist td > .ifacebadge[data-signal]::after {
                content: attr(data-signal) " dBm";
        }
 
-       .assoclist .td:nth-of-type(3) {
+       .assoclist td:nth-of-type(3) {
                font-weight: bold;
                font-size: 1rem;
        }
 
-       .assoclist .td:nth-of-type(1), .assoclist .td:nth-of-type(4) {
+       .assoclist td:nth-of-type(1), .assoclist td:nth-of-type(4) {
                flex: 1 1 100px;
                margin-right: .5em;
        }
 
-       .assoclist .td:nth-of-type(3), .assoclist .td:nth-of-type(5) {
+       .assoclist td:nth-of-type(3), .assoclist td:nth-of-type(5) {
                flex: 2 2 calc(100% - 110px);
                overflow: hidden;
                text-overflow: ellipsis;
                align-self: center;
        }
 
-       .assoclist .td:nth-of-type(6) { flex: 1; text-align: right !important; }
-       .assoclist .td[data-title] { padding: .2em 0; }
-       .assoclist .td[data-title]::before,
-       .assoclist .td[data-title]::after { display: none; }
+       .assoclist td:nth-of-type(6) { flex: 1; text-align: right !important; }
+       .assoclist td[data-title] { padding: .2em 0; }
+       .assoclist td[data-title]::before,
+       .assoclist td[data-title]::after { display: none; }
 
-       .leases6 .td:nth-of-type(3) { word-wrap: break-word; }
+       .leases6 td:nth-of-type(3) { word-wrap: break-word; }
 
-       .td.cbi-section-actions > div { display: flex; }
-       .td.cbi-section-actions > div > * { flex: 1; }
+       td.cbi-section-actions > div { display: flex; }
+       td.cbi-section-actions > div > * { flex: 1; }
 
        body.modal-overlay-active #modal_overlay > .modal {
                width: 95%;
@@ -1875,7 +1926,7 @@ ul.errors {
 }
 
 @media only screen and (min-width: 800px) and (max-width: 1200px) {
-       .assoclist .tr > *:nth-of-type(2) {
+       .assoclist tr > *:nth-of-type(2) {
                display: none;
        }
 }