Merge pull request #2539 from yglb/rosy-bugsfix

luci-theme-rosy: Fix typo errors and style errors

2 files changed, 74 insertions, 46 deletions

diff --git a/themes/luci-theme-rosy/htdocs/luci-static/rosy/cascade.css b/themes/luci-theme-rosy/htdocs/luci-static/rosy/cascade.css
index 449f9d4cf3..3adc4c36f8 100644
--- a/themes/luci-theme-rosy/htdocs/luci-static/rosy/cascade.css
+++ b/themes/luci-theme-rosy/htdocs/luci-static/rosy/cascade.css
@@ -180,6 +180,12 @@ body {
 
 header {
 	display: none;
+	height: 3rem;
+	z-index: 1000;
+}
+
+header .container {
+    padding: 0 0.5rem;
 }
 
 select {
@@ -904,33 +910,52 @@ form[method="post"] + form[method="post"],
 	border-radius: 20px;
 }
 
-.cbi-tabmenu > li,
 .tabs > li {
-	display: inline-block;
-	padding: .6rem 0;
+    margin-right: .8rem;
+    padding: .5rem 4px;
+    position: relative;
+    display: inline-block;
+    text-align: center;
 }
 
-.cbi-tabmenu > li > a,
-.tabs > li > a {
-	padding: .5rem .8rem;
+.tabs > li a {
+    color: #468EA4;
+	font-size: 14px;
 	text-decoration: none;
-	color: #404040;
+	position: relative;
+	z-index: 1;
+}
+.tabs > li::after {
+    content: '';
+    background-color: #cccccc82;
+    position: absolute;
+    width: 0;
+    height: 100%;
+    bottom: 0;
+    border-radius: 20px;
+    left: 50%;
+    transform: translateX(-50%);
 }
 
-.tabs > li[class~="active"],
-.tabs > li:hover {
-	cursor: pointer;
-	background-color: #468ea4;
-	border-radius: 20px;
+.tabs > li:hover::after {
+    transition: width .35s;
+    width: calc(100% + 4px);
 }
 
-.tabs > li[class~="active"],
-.tabs > li:hover a {
-	color: #fff;
+.tabs > li.active::after {
+    width: calc(100% + 4px);
+    background-color: #468ea473;
 }
 
-.tabs > li[class~="active"] > a {
-	color: #fff;
+.cbi-tabmenu > li {
+	display: inline-block;
+	padding: .6rem 0;
+}
+
+.cbi-tabmenu > li > a {
+	padding: .5rem .8rem;
+	text-decoration: none;
+	color: #404040;
 }
 
 .cbi-tabmenu {
@@ -2207,16 +2232,14 @@ body.login {
 }
 
 .logged-in header {
-	padding: 0 1rem;
-	height: 4rem;
-	width: 100%;
-	position: fixed;
-	top: 0;
-	background: #fff;
-	color: #fff;
-	z-index: 1000;
-	border-bottom: 1px solid #f5f5f5;
 	display: block;
+	position: fixed;
+	top: 1rem;
+	right: 1rem;
+	border: 1px solid #ddd;
+	background-color: #fff;
+	border-radius: 20px;
+	width: calc(85% - 20px - 2rem);
 }
 
 .logged-in .main {
@@ -2228,8 +2251,8 @@ body.login {
 }
 
 .logged-in header .container .btn-con {
-	height: 4rem;
-	line-height: 4rem;
+	height: 3rem;
+	line-height: 3rem;
 }
 
 .logged-in header .container .btn-con #xhr_poll_status {
@@ -2628,8 +2651,13 @@ body.login {
 	}
 
 	.logged-in header {
-		height: 3rem;
 		z-index: 2000;
+		top: 0;
+		left: 0;
+		width: 100%;
+		border-radius: 0;
+		border: none;
+		border-bottom: 1px solid #ddd;
 	}
 
 	.showSide,
diff --git a/themes/luci-theme-rosy/htdocs/luci-static/rosy/js/script.js b/themes/luci-theme-rosy/htdocs/luci-static/rosy/js/script.js
index e8424411db..73557adc0e 100755
--- a/themes/luci-theme-rosy/htdocs/luci-static/rosy/js/script.js
+++ b/themes/luci-theme-rosy/htdocs/luci-static/rosy/js/script.js
@@ -170,22 +170,22 @@
      * Sidebar expand
      */
     var showSide = false;
-    if ($(win).height() == 992) {
-        $(".showSide").click(function () {
-            if (showSide) {
-                $(".darkMask").stop(true).fadeOut("fast");
-                $(".main-left").stop(true).fadeOut("fast");
-                $(".main-right").css("overflow-y", "visible");
-                showSide = false;
-            } else {
-                $(".darkMask").stop(true).fadeIn("fast");
-                $(".main-left").stop(true).animate({
-                    width: "100%"
-                }, "fast").fadeIn("fast");
-                $(".main-right").css("overflow-y", "hidden");
-                showSide = true;
-            }
-        });
+    $(".showSide").click(function () {
+        if (showSide) {
+            $(".darkMask").stop(true).fadeOut("fast");
+            $(".main-left").stop(true).fadeOut("fast");
+            $(".main-right").css("overflow-y", "visible");
+            showSide = false;
+        } else {
+            $(".darkMask").stop(true).fadeIn("fast");
+            $(".main-left").stop(true).animate({
+                width: "100%"
+            }, "fast").fadeIn("fast");
+            $(".main-right").css("overflow-y", "hidden");
+            showSide = true;
+        }
+    });
+    if($(win).width() <= 992){
         $(".main-left").click(function(e) {
             e.preventDefault();
             $(".main-left").stop(true).fadeOut("fast");
@@ -274,4 +274,4 @@
         }
     });
 
-})(window, jQuery);
\ No newline at end of file
+})(window, jQuery);