luci-theme-openwrt: add required CSS rules for new tabbing code

Signed-off-by: Jo-Philipp Wich <jo@mein.io>

1 files changed, 34 insertions, 5 deletions

diff --git a/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css b/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css
index ee8937d603..cbe0e11505 100644
--- a/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css
+++ b/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css
@@ -1036,15 +1036,29 @@ ul.cbi-tabmenu li a:hover {
 	flex: 1 1 auto;
 	width: 100%;
 	height: 100%;
+	outline: none;
 }
 
-ul.cbi-tabmenu li.cbi-tab-highlighted {
+ul.cbi-tabmenu li.cbi-tab {
 	color: #000;
-	background: #fea;
+	background: #f5f5f5;
 }
 
-ul.cbi-tabmenu li.cbi-tab {
-	color: #000;
+ul.cbi-tabmenu li.cbi-tab-disabled[data-errors]::after {
+	content: attr(data-errors);
+	background: #c43c35;
+	color: #fff;
+	min-width: 12px;
+	line-height: 14px;
+	border-radius: 8px;
+	text-align: center;
+	margin: 4px 5px 4px 0;
+	padding: 1px 2px;
+	word-wrap: normal;
+	flex: 1 0 auto;
+}
+
+.cbi-section ul.cbi-tabmenu li.cbi-tab {
 	background: #fff;
 }
 
@@ -1057,6 +1071,19 @@ ul.cbi-tabmenu li.cbi-tab {
 	padding: .5em .5em .5em 2em;
 }
 
+[data-tab-title] {
+	height: 0;
+	opacity: 0;
+	overflow: hidden;
+}
+
+[data-tab-active="true"] {
+	opacity: 1;
+	height: auto;
+	overflow: visible;
+	transition: opacity .25s ease-in;
+}
+
 
 .cbi-dropdown {
 	border: 1px inset #000;
@@ -1243,7 +1270,9 @@ ul.cbi-tabmenu li.cbi-tab {
 	border-radius: 3px;
 	position: relative;
 	pointer-events: none;
-	word-break: break-all;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
 }
 
 .cbi-dynlist > .item::after {