summaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
-rw-r--r--themes/luci-theme-rosy/htdocs/luci-static/rosy/cascade.css207
1 files changed, 131 insertions, 76 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 e621e633d..f6ee728c1 100644
--- a/themes/luci-theme-rosy/htdocs/luci-static/rosy/cascade.css
+++ b/themes/luci-theme-rosy/htdocs/luci-static/rosy/cascade.css
@@ -108,6 +108,7 @@ strong {
html {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
+ position: relative;
}
body {
@@ -118,8 +119,9 @@ body {
html, body {
margin: 0px;
padding: 0px;
- height: 100%;
- font-family: sans-serif, "Helvetica Neue", Helvetica, Hiragino Sans GB;
+ height: auto;
+ min-height: 100%;
+ font-family: Microsoft Yahei, WenQuanYi Micro Hei, sans-serif, "Helvetica Neue", Helvetica, Hiragino Sans GB;
}
select {
@@ -241,6 +243,15 @@ h4 {
padding-bottom: 10px;
}
+.mobile-hide {
+ display: inline-block;
+}
+
+.PC-hide {
+ width: 100%;
+ display: none;
+}
+
.cbi-section {
margin: 1rem 0 0 0;
padding: 2rem;
@@ -337,7 +348,7 @@ div > .table > .tbody > .tr:nth-of-type(2n) {
border-radius: 20px;
overflow: hidden;
border: none !important;
- background-color: #468ea485;
+ background-color: #9bc1cc;
}
.cbi-section .table #memtotal > div > div > div,
@@ -412,7 +423,6 @@ td > table > tbody > tr > td,
.btn, .cbi-button {
margin: 0 .8rem .5rem 0;
-webkit-appearance: none;
- text-transform: uppercase;
color: rgba(0, 0, 0, 0.87);
background-color: #F0F0F0;
transition: all 0.2s ease-in-out;
@@ -538,6 +548,7 @@ td > table > tbody > tr > td,
.container .cbi-map .cbi-tabmenu + div {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
+ overflow: hidden;
}
.tabs {
@@ -562,7 +573,7 @@ td > table > tbody > tr > td,
.tabs > li[class~="active"],
.tabs > li:hover {
cursor: pointer;
- background-color: #0099CC;
+ background-color: #337ab7;
}
.tabs > li[class~="active"] > a,
@@ -634,7 +645,6 @@ td > table > tbody > tr > td,
}
.cbi-value {
- padding: .5rem 0;
display: inline-block;
width: 100%;
}
@@ -1103,6 +1113,9 @@ td > .ifacebadge,
overflow: hidden;
border-radius: 20px;
}
+#iwsvg, #bwsvg {
+ margin-top: 1rem;
+}
.ifacebox {
background-color: #f9f9f9;
@@ -1503,7 +1516,30 @@ header > .container > .pull-right > * {
}
/* applyreboot fix */
-
+#maincontainer {
+ text-align: center;
+}
+#maincontainer > #maincontent {
+ padding: 1rem;
+ margin: 0 auto;
+ border-radius: 10px;
+ display: inline-block;
+ max-width: 800px;
+ width: 40%;
+}
+#applyreboot-container {
+ margin-bottom: 1rem;
+}
+#applyreboot-section {
+ text-align: left;
+ background: #fff;
+ padding: 1rem;
+ border-radius: 10px;
+}
+#applyreboot-section > div {
+ margin: 1rem 0;
+ line-height: 1.5rem;
+}
#applyreboot-container {
margin: 90px 2rem 2rem 2rem;
}
@@ -1513,30 +1549,15 @@ header > .container > .pull-right > * {
line-height: 300%;
}
-#applyreboot-section .bar-container {
- background: transparent;
- height: 20px;
- border: 1px solid #b7b7b7;
- border-radius: 20px;
-}
-#applyreboot-section .bar-container .bar {
- background: #F24C7C;
- height: 100%;
- border-radius: 20px;
-}
-
/* Shared style */
-header, .main {
- width: 100%;
- position: absolute;
-}
header {
- height: 70px;
+ height: 0;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
+ overflow: hidden;
}
header {
padding-right: 1rem;
@@ -1700,7 +1721,7 @@ header .logout a {
footer {
text-align: right;
- padding: 1rem;
+ padding-right: 1rem;
color: #aaa;
font-size: 0.8rem;
text-shadow: 0px 0px 2px #BBB;
@@ -1713,8 +1734,7 @@ footer {
/* The style of the prompt message */
.alert-message {
- padding: 20px 15%;
- border: 1px solid #4A5368;
+ padding: 13px 11%;
border-radius: 10px;
background-color: #FFF;
}
@@ -1734,37 +1754,42 @@ footer {
}
.alert-message > h4 {
- padding: 17px 0 17px 36px;
+ padding: 7px 0 7px 36px;
margin: 0;
font-weight: normal;
- font-size: 22px;
+ font-size: 18px;
background: url(./no-pwd.png) no-repeat left 43%/ 28px;
display: inline-block;
}
.alert-message > p {
- font-size: 16px;
- line-height: 2rem;
+ font-size: 14px;
+ line-height: 1.5rem;
}
.alert-message a {
- padding: 8px 0;
- margin-top: 17px;
+ padding: 4px 0;
+ margin-top: 12px;
width: 100%;
background-color: transparent;
color: #fff;
- font-size: 18px;
+ font-size: 16px;
border: 1px solid #fff;
border-radius: 50px;
}
/* All styles of the login interface */
+.node-main-login {
+ height: auto;
+ min-height: 100%;
+ background: #fff url(./loginBG.png) no-repeat center center / cover;
+}
.node-main-login header {
display: none;
}
.node-main-login .main {
- height: 100%;
+ height: auto;
}
.node-main-login > .main > .main-left {
display: none;
@@ -1772,50 +1797,55 @@ footer {
.node-main-login > .main > .main-right {
width: 100%;
- height: 100%;
- background: #fff url(./loginBG.png) no-repeat center center / cover;
+ height: auto;
+ min-height: 100%;
}
.node-main-login > .main #maincontent {
+ position: absolute;
+ min-width: 492px;
width: 100%;
- height: 100%;
+ top: 47%;
+ left: 50%;
+ transform: translateX(-50%) translateY(-50%);
+ height: auto;
text-align: center;
}
.node-main-login > .main .container {
+ padding: 0;
width: 30%;
- max-width: 600px;
+ max-width: 492px;
display: inline-block;
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translateX(-50%) translateY(-50%);
}
.node-main-login > .main .logoImg a {
- margin: 0 0 20px 0;
+ margin: 0 0 18px 0;
display: block;
- font-size: 36px;
+ font-size: 30px;
color: #fff;
text-decoration: none;
}
+.node-main-login > .main .logoImg img:first-child {
+ width: 72px;
+}
.node-main-login .warning {
- background-color: #3f4a62;
- color: #E9E4E4;
+ background-color: #3E4A62;
+ color: #fff;
}
.node-main-login > .main form h2 {
- margin: 20px 0 16px;
+ margin: 17px 0;
padding: 0;
font-size: 24px;
- color: #FFFFFC;
+ color: #fff;
font-weight: normal;
border: 0;
}
.node-main-login > .main form .cbi-map-descr {
- margin: 16px 0 13px;
+ margin: 0 0 12px;
padding: 0;
font-size: 12px;
color: #B1B6BB;
@@ -1839,7 +1869,7 @@ footer {
}
.node-main-login > .main form .cbi-value-field {
- margin-bottom: 32px;
+ margin-bottom: 16px;
display: block;
width: 100%;
position: relative;
@@ -1849,7 +1879,7 @@ footer {
padding-left: 48px;
width: 100%;
border: 1px solid #556270;
- height: 48px;
+ height: 42px;
border-radius: 50px;
font-size: 20px;
color: #9c9fa1;
@@ -1914,8 +1944,12 @@ footer {
/* Interface after login */
+.logged-in header {
+ height: 70px;
+}
.logged-in .main {
background-color: #EBF1F6;
+ overflow: hidden;
}
.logged-in .main-right {
padding: 0 1rem 3rem 0;
@@ -1964,12 +1998,7 @@ footer {
width: auto;
border: none;
background-color: #468EA4;
-}
-
-@media screen and (max-height: 580px) {
- .logoImg img {
- height: 48px;
- }
+ color: #fff;
}
@media screen and (max-width: 1600px) {
@@ -2049,7 +2078,9 @@ footer {
position: fixed;
z-index: 100;
right: 100%;
+ left: 0;
top: 0;
+ bottom: 0;
background: #0000007d;
border-radius: 0;
min-width: 0;
@@ -2068,9 +2099,6 @@ footer {
.node-main-login > .main .container {
width: 60%;
}
- .node-main-login .main {
- background: #354057;
- }
.showSide {
padding: 0.1rem;
@@ -2254,23 +2282,34 @@ footer {
@media screen and (max-width: 768px) {
- .node-main-login > .main > .main-right {
- background: #354057;
+ .node-main-login {
+ background: none;
}
.node-main-login > .main .logoImg a {
- font-size: 18px;
- margin: 0 0 10px 0;
+ font-size: 30px;
+ margin: 12px 0 22px 0;
+ color: #354057;
+ }
+
+ .node-main-login > .main #maincontent {
+ padding-top: 0;
+ padding-bottom: 1rem;
+ min-width: 100%;
+ top: 0;
+ transform: translateY(0) translateX(-50%);
}
.alert-message {
padding: 8px 15%;
}
- .alert-message > h4,
+ .alert-message > h4{
+ font-size: 14px;
+ }
.alert-message > p,
.alert-message a {
- font-size: 14px;
+ font-size: 12px;
}
.a
lert-message > h4 {
@@ -2282,13 +2321,20 @@ footer {
margin-top: 8px;
}
+ .node-main-login .warning {
+ background-color: #F5F5F6;
+ color: #354057;
+ }
+
+ .alert-message a {
+ color: #f24c7c;
+ background: #fff;
+ }
+
.node-main-login > .main form h2 {
font-size: 16px;
margin: 20px 0 16px;
- }
-
- .node-main-login > .main .container {
- min-width: 90%;
+ color: #354057;
}
.node-main-login > .main form .cbi-value-field input {
@@ -2318,6 +2364,14 @@ footer {
left: auto;
right: 12px;
}
+
+ .mobile-hide {
+ display: none;
+ }
+
+ .PC-hide {
+ display: inline-block;
+ }
}
@media screen and (max-width: 480px) {
@@ -2364,10 +2418,6 @@ footer {
font-size: 10px;
}
- .mobile-hide {
- display: none;
- }
-
.panel-title {
font-size: 1.4rem;
padding-bottom: 1rem;
@@ -2392,6 +2442,7 @@ footer {
font-family: inherit;
min-width: inherit;
background-color: #FFF;
+ border-radius: 20px;
-webkit-overflow-scrolling: touch;
}
@@ -2404,6 +2455,10 @@ footer {
margin-top: 1rem;
}
+ .node-main-login > .main .container {
+ min-width: 90%;
+ }
+
.th, .td {
flex-basis: 50%;
}
@@ -2437,7 +2492,7 @@ footer {
}
.alert-message {
- padding: 8px 5%;
+ padding: 8px 10%;
}
}