X-Git-Url: http://git.openwrt.org/?a=blobdiff_plain;f=themes%2Fluci-theme-material%2Fhtdocs%2Fluci-static%2Fmaterial%2Fcascade.css;h=4bf9740860392abbe30f8d92791ba798c109792f;hb=9e73a04adbff4dcebd643400da689291b8320d74;hp=450aeca9fcb64d68e254bc34585996ebacca6d00;hpb=1702813cc373015b79e7dce812ca19e28c3c62b0;p=project%2Fluci.git

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 450aeca9fc..4bf9740860 100644
--- a/themes/luci-theme-material/htdocs/luci-static/material/cascade.css
+++ b/themes/luci-theme-material/htdocs/luci-static/material/cascade.css
@@ -76,7 +76,8 @@
 	background: inherit;
 }
 
-.td[width="33%"] {
+.td[width="33%"], 
+.td[width="33%"]~.td {
 	padding: 1.1em;
 }
 
@@ -199,6 +200,7 @@ input,
 	background-color: transparent;
 	background-image: none;
 	box-shadow: none;
+	align-items: center;
 }
 
 select,
@@ -293,11 +295,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 {
@@ -347,6 +351,7 @@ small {
 	height: calc(100% - 4rem);
 	background-color: #fff;
 	background-color: var(--menu-bg-color);
+	transition: visibility 400ms, width 400ms;
 }
 
 .main-right {
@@ -427,6 +432,52 @@ header > .fill > .container > .status > * {
 	cursor: pointer;
 }
 
+.modemenu-buttons {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	color: #fff;
+	color: var(--header-color);
+	background: #09c;
+	background: var(--header-bg);
+	padding: .5rem;
+	transition: box-shadow .2s;
+	box-shadow: 0 2px 5px rgb(0 0 0 / 26%);
+}
+
+#modemenu {
+	margin: 0.25rem;
+	display: flex;
+	align-items: center;
+	flex-wrap: wrap;
+}
+
+#modemenu > li > a {
+	font-size: .8rem;
+	font-weight: bold;
+	padding: .3rem .8rem;
+	white-space: nowrap;
+	text-decoration: none;
+	text-transform: uppercase;
+	color: #fff !important;
+	border-radius: 3px;
+	background-color: #bfbfbf;
+	text-shadow: none;
+}
+
+#modemenu > li > a.active {
+	background-color: #5bc0de !important;
+}
+
+#modemenu > li.divider {
+	margin-left: .25rem;
+	margin-right: .25rem;
+	border: .5rem solid var(--submenu-bg-hover);
+	border-left: 1px solid var(--submenu-bg-hover);
+	border-right: 1px solid var(--submenu-bg-hover);
+	border-radius: 1rem;
+}
+
 #xhr_poll_status {
 	display: flex;
 }
@@ -487,7 +538,6 @@ header > .fill > .container > .status > * {
 }
 
 .main > .main-left > .nav > li {
-	padding: .5rem 1rem;
 	cursor: pointer;
 	-webkit-user-select: none;
 	-moz-user-select: none;
@@ -508,6 +558,19 @@ header > .fill > .container > .status > * {
 	color: var(--menu-color);
 }
 
+.main > .main-left > .nav > li.active > a {
+	color: #fff;
+}
+
+.main > .main-left > .nav > li.active {
+	background-color: #09c;
+	background-color: var(--submenu-bg-hover-active);
+}
+
+.main > .main-left > .nav > li.slide.active {
+	background-color: unset;
+}
+
 .main > .main-left > .nav > .slide {
 	padding: 0;
 }
@@ -516,8 +579,13 @@ 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"] {
+.main > .main-left > .nav > li > [data-title="Logout"],
+.main > .main-left > .nav > li > [data-title="Dashboard"] {
 	font-size: 1.15rem;
 	font-weight: 500;
 	display: flex;
@@ -572,10 +640,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);
@@ -584,6 +648,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 {
@@ -1587,7 +1652,6 @@ body:not(.Interfaces) .cbi-rowstyle-2:first-child {
 
 .cbi-progressbar::after {
 	font-family: monospace;
-	font-size: 1.3em;
 	font-weight: bold;
 	font-size-adjust: .38;
 	line-height: normal;
@@ -1842,7 +1906,6 @@ td > .ifacebadge,
 
 #syslog {
 	font-size: small;
-	line-height: 1.25;
 	overflow-y: hidden;
 	width: 100%;
 	min-height: 15rem;
@@ -2136,11 +2199,13 @@ label[data-index][data-depends] {
 .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 */
@@ -2277,6 +2342,12 @@ input[name="nslookup"] {
 	margin-bottom: .2rem;
 }
 
+.control-group {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 2px;
+}
+
 [data-page="admin-system-opkg"] div.btn {
 	line-height: 3;
 	display: inline;
@@ -2586,7 +2657,7 @@ input[name="nslookup"] {
 	.main > .main-left > .nav > li,
 	.main > .main-left > .nav > li a,
 	.main > .main-left > .nav > .slide > .menu,
-	.main > .main-left > .nav > li > [data-title="Logout"] {
+	.main > .main-left > .nav > li:last-child > [data-title] {
 		font-size: .9rem;
 	}
 
@@ -2635,7 +2706,7 @@ input[name="nslookup"] {
 	.main-left {
 		position: fixed;
 		z-index: 100;
-		width: 0;
+		visibility: hidden;
 	}
 
 	.main-right {