luci-theme-rosy: Fix resolution-related styles
Signed-off-by: Yanlan Shen <yanlan.shen.@rosinson.com>
This commit is contained in:
Yanlan Shen
parent
641681fa32
commit
a4e4f935e0
1 changed files with 131 additions and 76 deletions
|
|
@ -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%;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue