luci-theme-material: standardize menu and drop jquery

[project/luci.git] / themes / luci-theme-material / htdocs / luci-static / material / cascade.css

diff --git a/themes/luci-theme-material/htdocs/luci-static/material/cascade.css b/themes/luci-theme-material/htdocs/luci-static/material/cascade.css
index 2a88ef375064903fbb6244c6921a697a57a1585a..c41afc5b6a096cb47415ca82f4b943058c44f531 100644 (file)
--- a/themes/luci-theme-material/htdocs/luci-static/material/cascade.css
+++ b/themes/luci-theme-material/htdocs/luci-static/material/cascade.css
@@ -189,7 +189,7 @@ button,
 select,
 input,
 .cbi-dropdown {
-       height: 1.8rem;
+       min-height: 1.8rem;
        padding: 0;
        color: rgba(0, 0, 0, .87);
        border: 0;
@@ -214,6 +214,7 @@ input:not(.cbi-button):focus,
        border-color: var(--main-color);
 }
 
+.cbi-dropdown,
 select[multiple="multiple"] {
        height: auto;
 }
@@ -292,11 +293,13 @@ small {
        position: fixed;
        z-index: 1000;
        top: 0;
-       display: block;
+       opacity: 1;
+       visibility: visible;
        width: 100%;
        height: 100%;
        pointer-events: none;
        background-color: rgb(240, 240, 240);
+       transition: visibility 400ms, opacity 400ms;
 }
 
 .main > .loading > span {
@@ -346,6 +349,7 @@ small {
        height: calc(100% - 4rem);
        background-color: #fff;
        background-color: var(--menu-bg-color);
+       transition: visibility 400ms, width 400ms;
 }
 
 .main-right {
@@ -401,10 +405,6 @@ header > .fill > .container > #logo > img {
        margin-top: -.1rem;
 }
 
-body:not(.logged-in) > header > .fill > .container > #logo {
-       display: none;
-}
-
 header > .fill > .container > .brand {
        font-size: 1.4rem;
        position: absolute;
@@ -446,7 +446,8 @@ header > .fill > .container > .status > * {
        background-color: #5cb85c !important;
 }
 
-.notice {
+.notice,
+[data-indicator]:not([data-style="inactive"]) {
        background-color: #5bc0de !important;
 }
 
@@ -518,6 +519,10 @@ header > .fill > .container > .status > * {
        display: none;
 }
 
+.main > .main-left > .nav > .slide.active > ul {
+       display: block;
+}
+
 .main > .main-left > .nav > .slide > .menu,
 .main > .main-left > .nav > li > [data-title="Logout"] {
        font-size: 1.15rem;
@@ -574,10 +579,6 @@ body[class*="node-"] > .main > .main-left > .nav > .slide > .menu.active::before
        background: none;
 }
 
-.main > .main-left > .nav > .slide > .slide-menu > li {
-       padding: .4rem 2rem;
-}
-
 .main > .main-left > .nav > .slide > .slide-menu > .active {
        background-color: #09c;
        background-color: var(--submenu-bg-hover-active);
@@ -586,6 +587,7 @@ body[class*="node-"] > .main > .main-left > .nav > .slide > .menu.active::before
 .main > .main-left > .nav > .slide > .slide-menu > li > a {
        white-space: nowrap;
        text-decoration: none;
+       padding: .4rem 2rem;
 }
 
 .main > .main-left > .nav > .slide > .slide-menu > .active > a {
@@ -693,6 +695,7 @@ h5 {
 #cbi-network > .cbi-section-node,
 #cbi-wireless > .cbi-section-node,
 #cbi-wireless > #wifi_assoclist_table,
+[data-tab-title],
 [data-page^="admin-system-admin"]:not(.node-main-login) .cbi-map:not(#cbi-dropbear),
 [data-page="admin-system-opkg"] #maincontent > .container {
        font-family: inherit;
@@ -708,6 +711,16 @@ h5 {
        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);
 }
 
+.cbi-modal .cbi-section,
+.cbi-section .cbi-section {
+       padding: 0;
+       box-shadow: none;
+}
+
+.cbi-modal .cbi-tabmenu {
+       margin-left: 0;
+}
+
 .cbi-map-descr,
 .cbi-section-descr {
        font-size: small;
@@ -745,6 +758,14 @@ fieldset > fieldset,
        border-bottom: thin solid #eee;
 }
 
+.cbi-section > h4:first-child,
+.cbi-section > p:first-child,
+[data-tab-title] > h3:first-child,
+[data-tab-title] > h4:first-child,
+[data-tab-title] > p:first-child {
+       padding-top: 1rem;
+}
+
 table {
        border-spacing: 0;
        border-collapse: collapse;
@@ -1123,6 +1144,8 @@ td > table > tbody > tr > td,
        overflow: hidden;
        height: 0;
        opacity: 0;
+       margin: 0;
+       padding: 0rem 1rem !important;
 }
 
 [data-tab-active="true"] {
@@ -1130,6 +1153,7 @@ td > table > tbody > tr > td,
        height: auto;
        opacity: 1;
        transition: opacity .25s ease-in;
+       margin: inherit !important;
 }
 
 .cbi-section[id] .cbi-section-remove:nth-of-type(4n+3),
@@ -1394,6 +1418,23 @@ body:not(.Interfaces) .cbi-rowstyle-2:first-child {
        outline: 0;
 }
 
+.cbi-dropdown.btn {
+       min-height: 1.8rem;
+       padding-top: 0px;
+       padding-bottom: 0px;
+       padding-right: 0px;
+}
+
+.cbi-dropdown.btn > .open {
+       font-size: 0.8rem;
+       padding: 0px;
+       margin: 0 5px;
+}
+
+.cbi-dropdown.btn > div {
+       margin: 0px;
+}
+
 .cbi-dropdown > .more,
 .cbi-dropdown > ul > li[placeholder] {
        font-weight: bold;
@@ -1463,6 +1504,7 @@ body:not(.Interfaces) .cbi-rowstyle-2:first-child {
        border: thin solid #918e8c;
        background: #f6f6f6;
        box-shadow: 0 0 4px #918e8c;
+       color: var(--main-menu-color);
 }
 
 .cbi-dropdown > ul > li[display],
@@ -1588,7 +1630,6 @@ body:not(.Interfaces) .cbi-rowstyle-2:first-child {
        min-width: 270px;
        max-width: 600px;
        min-height: 32px;
-       max-height: 2400px;
        margin: 5em auto;
        padding: 1em;
        border-radius: 3px !important;
@@ -1599,6 +1640,8 @@ body:not(.Interfaces) .cbi-rowstyle-2:first-child {
 .modal > * {
        line-height: normal;
        flex-basis: 100%;
+       margin-bottom: .5em;
+       max-width: 100%;
 }
 
 .modal > pre,
@@ -1622,6 +1665,7 @@ body:not(.Interfaces) .cbi-rowstyle-2:first-child {
 
 .modal ul {
        margin-left: 2.2em;
+       word-break: break-word;
 }
 
 .modal li {
@@ -1634,25 +1678,23 @@ body:not(.Interfaces) .cbi-rowstyle-2:first-child {
        word-break: break-word;
 }
 
-.modal .label {
-       font-size: .6rem;
-       font-weight: normal;
-       padding: .1rem .3rem;
-       padding-bottom: 0;
-       cursor: default;
-       border-radius: 0;
+.modal label.btn {
+       display: flex;
+       align-items: center;
+       white-space: normal;
+       text-align: left;
+       text-transform: none;
+       padding-bottom: 0.2rem;
+       padding-top: 0.2rem;
 }
 
-.modal .label.warning {
+.modal label.warning {
        background-color: #f0ad4e !important;
 }
 
-.modal .btn {
-       padding: .3rem .6rem;
-}
-
-.modal .spinning {
-       margin-bottom: 2em;
+.modal.cbi-modal {
+       max-width: 90%;
+       max-height: none;
 }
 
 body.modal-overlay-active {
@@ -1776,6 +1818,7 @@ td > .ifacebadge,
 
 .network-status-table .ifacebox-body > span {
        flex: 10 10 auto;
+       height: 100%;
 }
 
 .network-status-table .ifacebox-body > div {
@@ -2067,7 +2110,8 @@ span[data-tooltip] .label {
        flex-direction: column;
 }
 
-.label {
+.label,
+[data-indicator] {
        font-size: .8rem;
        font-weight: bold;
        padding: .3rem .8rem;
@@ -2082,11 +2126,11 @@ span[data-tooltip] .label {
 
 label > input[type="checkbox"],
 label > input[type="radio"] {
-       position: relative;
-       top: .4rem;
-       right: .2rem;
-       margin: 0;
-       vertical-align: bottom;
+       margin-right: 0.8rem;
+}
+
+label[data-index][data-depends] {
+       padding-right: 2em;
 }
 
 .showSide {
@@ -2096,11 +2140,13 @@ label > input[type="radio"] {
 .darkMask {
        position: fixed;
        z-index: 99;
-       display: none;
        width: 100%;
        height: 100%;
        content: "";
        background-color: rgba(0, 0, 0, .56);
+       transition: opacity 400ms, visibility 400ms;
+       visibility: hidden;
+       opacity: 0;
 }
 
 /* diagnostics */
@@ -2452,7 +2498,8 @@ input[name="nslookup"] {
                padding: .3rem .6rem;
        }
 
-       .label {
+       .label,
+       [data-indicator] {
                padding: .2rem .6rem;
        }
 
@@ -2516,6 +2563,7 @@ input[name="nslookup"] {
                padding: .2rem .5rem;
        }
 
+       .cbi-section > h3:first-child,
        .panel-title {
                font-size: 1.1rem;
                padding-bottom: 1rem;
@@ -2593,7 +2641,7 @@ input[name="nslookup"] {
        .main-left {
                position: fixed;
                z-index: 100;
-               width: 0;
+               visibility: hidden;
        }
 
        .main-right {
@@ -2819,7 +2867,7 @@ input[name="nslookup"] {
        }
 
        #maincontent > .container {
-               margin: 0 1rem 1.5rem 1rem;
+               margin: 0 .5rem 1.5rem .5rem;
        }
 
        .main > .main-left > .nav > .slide > .menu,
@@ -2920,6 +2968,7 @@ input[name="nslookup"] {
                display: none;
        }
 
+       .cbi-section > h3:first-child,
        .panel-title {
                font-size: 1.4rem;
                padding-bottom: 1rem;
@@ -2977,6 +3026,22 @@ input[name="nslookup"] {
        .hide-xs:not([data-title="MAC-Address"]) {
                display: none;
        }
+
+       .cbi-modal {
+               padding: .5rem;
+       }
+
+       .cbi-modal .cbi-value {
+               padding: 0 0 .25rem 0;
+       }
+
+       .cbi-modal [data-tab-title] {
+               padding: 0 .25rem !important;
+       }
+
+       [data-tab-title] {
+               padding: 0 .5rem !important;
+       }
 }
 
 @media screen and (min-width: 600px) {