luci-theme-material: improve theming system colors and contrasts
This changed spawned from trying to make certain text colors readable (such as white text on white background in many dialogs) introduced by commit 4ee2bc6 (ref: #5841) which made obvious the need to improve the color and contrast situation in the theme.
Alot of colors were duplicated in cascade.css and made for a hard time to align colors across different elements. This commit tries to rectify that by introducing variables for all commonly used colors.
* All base colors (white, blue, red, green, blue, yellow, etc) has been consolidated and moved to common variables
* Introduced more specific selectors for info levels to avoid colors bleeding over to other elements
* Removed duplicated properties which were overriden at the next row
Signed-off-by: Daniel Nilsson <daniel.nilsson94@outlook.com>
This commit is contained in:
Daniel Nilsson
Paul Donald
parent
85c0429651
commit
3acc8bc373
2 changed files with 153 additions and 132 deletions
|
|
@ -181,7 +181,7 @@ select {
|
|||
padding: .36rem .8rem;
|
||||
color: #555;
|
||||
border: thin solid #ccc;
|
||||
background-color: #fff;
|
||||
background-color: var(--white-color);
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
|
|
@ -212,8 +212,7 @@ select,
|
|||
select:not([multiple="multiple"]):focus,
|
||||
input:not(.cbi-button):focus,
|
||||
.cbi-dropdown:focus {
|
||||
border-color: #09c;
|
||||
border-color: var(--main-color);
|
||||
border-color: var(--primary-color);
|
||||
}
|
||||
|
||||
.cbi-dropdown,
|
||||
|
|
@ -345,12 +344,9 @@ small {
|
|||
top: 4rem;
|
||||
float: left;
|
||||
overflow-x: auto;
|
||||
width: 15%;
|
||||
width: calc(0% + 15rem);
|
||||
height: 100%;
|
||||
height: calc(100% - 4rem);
|
||||
background-color: #fff;
|
||||
background-color: var(--menu-bg-color);
|
||||
background-color: var(--white-color);
|
||||
transition: visibility 400ms, width 400ms;
|
||||
}
|
||||
|
||||
|
|
@ -383,10 +379,8 @@ small {
|
|||
}
|
||||
|
||||
header {
|
||||
color: #fff;
|
||||
color: var(--header-color);
|
||||
background: #09c;
|
||||
background: var(--header-bg);
|
||||
color: var(--secondary-color);
|
||||
background: var(--primary-color);
|
||||
}
|
||||
|
||||
header > .fill > .container {
|
||||
|
|
@ -413,8 +407,7 @@ header > .fill > .container > .brand {
|
|||
cursor: default;
|
||||
vertical-align: text-bottom;
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
color: var(--header-color);
|
||||
color: var(--white-color);
|
||||
}
|
||||
|
||||
header > .fill > .container > .status {
|
||||
|
|
@ -436,10 +429,8 @@ header > .fill > .container > .status > * {
|
|||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
color: var(--header-color);
|
||||
background: #09c;
|
||||
background: var(--header-bg);
|
||||
color: var(--white-color);
|
||||
background: var(--secondary-color);
|
||||
padding: .5rem;
|
||||
transition: box-shadow .2s;
|
||||
box-shadow: 0 2px 5px rgb(0 0 0 / 26%);
|
||||
|
|
@ -459,22 +450,22 @@ header > .fill > .container > .status > * {
|
|||
white-space: nowrap;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
color: #fff !important;
|
||||
color: var(--white-color) !important;
|
||||
border-radius: 3px;
|
||||
background-color: #bfbfbf;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
#modemenu > li > a.active {
|
||||
background-color: #002B49 !important;
|
||||
background-color: var(--dark-blue-color) !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: .5rem solid var(--gray-color);
|
||||
border-left: 1px solid var(--gray-color);
|
||||
border-right: 1px solid var(--gray-color);
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
|
|
@ -482,27 +473,6 @@ header > .fill > .container > .status > * {
|
|||
display: flex;
|
||||
}
|
||||
|
||||
.danger {
|
||||
background-color: #ff7d60 !important;
|
||||
}
|
||||
|
||||
.warning {
|
||||
background-color: #f0e68c !important;
|
||||
}
|
||||
|
||||
.success {
|
||||
background-color: #5cb85c !important;
|
||||
}
|
||||
|
||||
.notice,
|
||||
[data-indicator]:not([data-style="inactive"]) {
|
||||
background-color: #002B49 !important;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: #f00;
|
||||
}
|
||||
|
||||
.alert,
|
||||
.alert-message {
|
||||
font-weight: bold;
|
||||
|
|
@ -510,7 +480,6 @@ header > .fill > .container > .status > * {
|
|||
padding: 1rem;
|
||||
border: 0;
|
||||
border-radius: 0 !important;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);
|
||||
text-shadow: 1px 1px rgba(0, 0, 0, .1);
|
||||
}
|
||||
|
|
@ -528,6 +497,44 @@ header > .fill > .container > .status > * {
|
|||
padding: .3rem .6rem;
|
||||
}
|
||||
|
||||
.alert-message.notice,
|
||||
.label.notice {
|
||||
background-color: var(--notice-color);
|
||||
color: var(--on-notice-color);
|
||||
}
|
||||
|
||||
.alert-message.danger,
|
||||
.btn.danger,
|
||||
.label.danger {
|
||||
background-color: var(--danger-color);
|
||||
color: var(--on-danger-color);
|
||||
}
|
||||
|
||||
.alert-message.warning,
|
||||
.btn.warning,
|
||||
.label.warning {
|
||||
background-color: var(--warning-color);
|
||||
color: var(--on-warning-color);
|
||||
}
|
||||
|
||||
.alert-message.success,
|
||||
.btn.success,
|
||||
.label.success {
|
||||
background-color: var(--success-color);
|
||||
color: var(--on-success-color);
|
||||
}
|
||||
|
||||
.alert-message.error,
|
||||
.btn.error,
|
||||
.label.error {
|
||||
background-color: var(--on-error-color);
|
||||
color: var(--error-color);
|
||||
}
|
||||
|
||||
[data-indicator]:not([data-style="inactive"]) {
|
||||
background-color: var(--notice-color) !important;
|
||||
}
|
||||
|
||||
.container .alert,
|
||||
.container .alert-message {
|
||||
margin-top: 1rem;
|
||||
|
|
@ -555,16 +562,14 @@ header > .fill > .container > .status > * {
|
|||
.main > .main-left > .nav > li a {
|
||||
display: block;
|
||||
color: #5f6368;
|
||||
color: var(--menu-color);
|
||||
}
|
||||
|
||||
.main > .main-left > .nav > li.active > a {
|
||||
color: #fff;
|
||||
color: var(--white-color);
|
||||
}
|
||||
|
||||
.main > .main-left > .nav > li.active {
|
||||
background-color: #09c;
|
||||
background-color: var(--submenu-bg-hover-active);
|
||||
background-color: var(--primary-color);
|
||||
}
|
||||
|
||||
.main > .main-left > .nav > li.slide.active {
|
||||
|
|
@ -592,8 +597,7 @@ header > .fill > .container > .status > * {
|
|||
width: 100%;
|
||||
padding: .5rem 1rem;
|
||||
text-decoration: none;
|
||||
color: #202124;
|
||||
color: var(--main-menu-color);
|
||||
color: var(--black-color-low);
|
||||
}
|
||||
|
||||
.main > .main-left > .nav > .slide > .menu::before {
|
||||
|
|
@ -631,8 +635,7 @@ body[class*="node-"] > .main > .main-left > .nav > .slide > .menu.active::before
|
|||
|
||||
.main > .main-left > .nav > li:hover,
|
||||
.main > .main-left > .nav > .slide > .menu:hover {
|
||||
background: #d4d4d4;
|
||||
background: var(--submenu-bg-hover);
|
||||
background: var(--gray-color);
|
||||
}
|
||||
|
||||
.main > .main-left > .nav > .slide:hover {
|
||||
|
|
@ -640,8 +643,7 @@ body[class*="node-"] > .main > .main-left > .nav > .slide > .menu.active::before
|
|||
}
|
||||
|
||||
.main > .main-left > .nav > .slide > .slide-menu > .active {
|
||||
background-color: #09c;
|
||||
background-color: var(--submenu-bg-hover-active);
|
||||
background-color: var(--primary-color);
|
||||
}
|
||||
|
||||
.main > .main-left > .nav > .slide > .slide-menu > li > a {
|
||||
|
|
@ -651,22 +653,19 @@ body[class*="node-"] > .main > .main-left > .nav > .slide > .menu.active::before
|
|||
}
|
||||
|
||||
.main > .main-left > .nav > .slide > .slide-menu > .active > a {
|
||||
color: #fff;
|
||||
color: var(--white-color);
|
||||
}
|
||||
|
||||
.main > .main-left > .nav > .slide > .slide-menu > li:hover {
|
||||
background: #d4d4d4;
|
||||
background: var(--submenu-bg-hover);
|
||||
background: var(--gray-color);
|
||||
}
|
||||
|
||||
.main > .main-left > .nav > .slide > .slide-menu > li:not(.active):hover > a {
|
||||
color: #202124;
|
||||
color: var(--menu-color-hover);
|
||||
color: #5f6368;
|
||||
}
|
||||
|
||||
.main > .main-left > .nav > .slide > .slide-menu > .active:hover {
|
||||
background-color: #09c;
|
||||
background-color: var(--main-color);
|
||||
background-color: var(--primary-color);
|
||||
}
|
||||
|
||||
/* ripple effect */
|
||||
|
|
@ -692,7 +691,7 @@ body[class*="node-"] > .main > .main-left > .nav > .slide > .menu.active::before
|
|||
transform: scale(10, 10);
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
background-image: radial-gradient(circle, #000 10%, transparent 10.01%);
|
||||
background-image: radial-gradient(circle, var(--black-color) 10%, transparent 10.01%);
|
||||
background-repeat: no-repeat;
|
||||
background-position: 50%;
|
||||
}
|
||||
|
|
@ -767,7 +766,7 @@ h5 {
|
|||
padding: 2rem;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background-color: #fff;
|
||||
background-color: var(--white-color);
|
||||
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);
|
||||
}
|
||||
|
||||
|
|
@ -890,7 +889,7 @@ tr > th,
|
|||
.cbi-section-table-row {
|
||||
margin-bottom: 1rem;
|
||||
text-align: center !important;
|
||||
background: #f4f4f4;
|
||||
background: var(--white-color-low);
|
||||
}
|
||||
|
||||
.cbi-section-table-row:last-child {
|
||||
|
|
@ -915,7 +914,7 @@ tr > th,
|
|||
|
||||
div > table > tbody > tr:nth-of-type(2n),
|
||||
div > .table > .tr:nth-of-type(2n) {
|
||||
background-color: #f9f9f9;
|
||||
background-color: var(--white-color-low);
|
||||
}
|
||||
|
||||
/* fix multiple table */
|
||||
|
|
@ -1042,8 +1041,8 @@ td > table > tbody > tr > td,
|
|||
.cbi-button[name="restart"],
|
||||
.cbi-button[onclick="hide_empty(this)"] {
|
||||
font-weight: bold;
|
||||
border: thin solid #bfbfbf;
|
||||
background-color: #d4d4d4;
|
||||
border: thin solid var(--gray-color-high);
|
||||
background-color: var(--gray-color);
|
||||
}
|
||||
|
||||
/* dark blue */
|
||||
|
|
@ -1059,9 +1058,9 @@ td > table > tbody > tr > td,
|
|||
.cbi-button[value^="Back"],
|
||||
.cbi-button-neutral[onclick="handleConfig(event)"] {
|
||||
font-weight: normal;
|
||||
color: #fff;
|
||||
border: thin solid #2e6da4;
|
||||
background-color: #337ab7;
|
||||
color: var(--on-dark-blue-color);
|
||||
border: thin solid var(--dark-blue-color-high);
|
||||
background-color: var(--dark-blue-color);
|
||||
}
|
||||
|
||||
/* light blue */
|
||||
|
|
@ -1076,9 +1075,9 @@ td > table > tbody > tr > td,
|
|||
.cbi-button[value$="Apply"],
|
||||
.cbi-button[onclick="addKey(event)"] {
|
||||
font-weight: normal;
|
||||
color: #fff;
|
||||
border: thin solid #46b8da;
|
||||
background-color: #5bc0de;
|
||||
color: var(--on-light-blue-color);
|
||||
border: thin solid var(--light-blue-color-high);
|
||||
background-color: var(--light-blue-color);
|
||||
}
|
||||
|
||||
/* red */
|
||||
|
|
@ -1092,9 +1091,9 @@ td > table > tbody > tr > td,
|
|||
.cbi-button[onclick="reboot(this)"],
|
||||
.cbi-button-neutral[value="Restart"] {
|
||||
font-weight: normal;
|
||||
color: #fff;
|
||||
border: thin solid #d43f3a;
|
||||
background-color: #d9534f;
|
||||
color: var(--on-red-color);
|
||||
border: thin solid var(--red-color-high);
|
||||
background-color: var(--red-color);
|
||||
}
|
||||
|
||||
/* yellow */
|
||||
|
|
@ -1106,9 +1105,9 @@ td > table > tbody > tr > td,
|
|||
.cbi-button[onclick="handleReset(event)"],
|
||||
.cbi-button-neutral[value="Disable"] {
|
||||
font-weight: normal;
|
||||
color: #fff;
|
||||
border: thin solid #eea236;
|
||||
background-color: #f0ad4e;
|
||||
color: var(--on-yellow-color);
|
||||
border: thin solid var(--yellow-color-high);
|
||||
background-color: var(--yellow-color);
|
||||
}
|
||||
|
||||
/* green */
|
||||
|
|
@ -1118,9 +1117,9 @@ td > table > tbody > tr > td,
|
|||
.cbi-button[value="Download"],
|
||||
.cbi-button[value="Save mtdblock"] {
|
||||
font-weight: normal;
|
||||
color: #fff;
|
||||
border: thin solid #4cae4c;
|
||||
background-color: #5cb85c;
|
||||
color: var(--on-green-color);
|
||||
border: thin solid var(--green-color-high);
|
||||
background-color: var(--green-color);
|
||||
}
|
||||
|
||||
.cbi-page-actions .cbi-button-link:first-child {
|
||||
|
|
@ -1140,7 +1139,7 @@ td > table > tbody > tr > td,
|
|||
.tabs {
|
||||
margin: 0 -2rem;
|
||||
padding-left: .5rem;
|
||||
background-color: #fff;
|
||||
background-color: var(--white-color);
|
||||
}
|
||||
|
||||
.tabs > li,
|
||||
|
|
@ -1157,8 +1156,7 @@ td > table > tbody > tr > td,
|
|||
|
||||
.tabs > li[class~="active"],
|
||||
.tabs > li:hover {
|
||||
border-bottom-color: #09c;
|
||||
border-bottom-color: var(--main-color);
|
||||
border-bottom-color: var(--primary-color);
|
||||
}
|
||||
|
||||
.tabs > li:hover {
|
||||
|
|
@ -1174,12 +1172,11 @@ td > table > tbody > tr > td,
|
|||
}
|
||||
|
||||
.tabs > li[class~="active"] > a {
|
||||
color: #09c;
|
||||
color: var(--main-color);
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.cbi-tabmenu {
|
||||
border: thin solid #d4d4d4;
|
||||
border: thin solid var(--gray-color);
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
|
|
@ -1188,16 +1185,16 @@ td > table > tbody > tr > td,
|
|||
}
|
||||
|
||||
.cbi-tabmenu > li[class~="cbi-tab"] {
|
||||
background-color: #fff;
|
||||
background-color: var(--white-color);
|
||||
}
|
||||
|
||||
.cbi-tabmenu {
|
||||
background-color: #d4d4d4;
|
||||
background-color: var(--gray-color);
|
||||
}
|
||||
|
||||
.cbi-section .cbi-section-remove:nth-of-type(2n),
|
||||
.container > .cbi-section .cbi-section-node:nth-of-type(2n) {
|
||||
background-color: #f9f9f9;
|
||||
background-color: var(--white-color-low);
|
||||
}
|
||||
|
||||
[data-tab-title] {
|
||||
|
|
@ -1218,18 +1215,18 @@ td > table > tbody > tr > td,
|
|||
|
||||
.cbi-section[id] .cbi-section-remove:nth-of-type(4n+3),
|
||||
.cbi-section[id] .cbi-section-node:nth-of-type(4n+4) {
|
||||
background-color: #f9f9f9;
|
||||
background-color: var(--white-color-low);
|
||||
}
|
||||
|
||||
.cbi-section-node-tabbed {
|
||||
margin-top: 0;
|
||||
padding: 0;
|
||||
border: thin solid #d4d4d4;
|
||||
border: thin solid var(--gray-color);
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
.cbi-tabcontainer > .cbi-value:nth-of-type(2n) {
|
||||
background-color: #f9f9f9;
|
||||
background-color: var(--white-color-low);
|
||||
}
|
||||
|
||||
.cbi-value-field,
|
||||
|
|
@ -1281,8 +1278,8 @@ td > table > tbody > tr > td,
|
|||
}
|
||||
|
||||
.cbi-input-invalid {
|
||||
color: #f00;
|
||||
border-bottom-color: #f00;
|
||||
color: var(--error-color);
|
||||
border-bottom-color: var(--error-color);
|
||||
}
|
||||
|
||||
.cbi-section-error {
|
||||
|
|
@ -1290,7 +1287,7 @@ td > table > tbody > tr > td,
|
|||
line-height: 1.42857143;
|
||||
margin: 18px;
|
||||
padding: 6px;
|
||||
border: thin solid #f00;
|
||||
border: thin solid var(--error-color);
|
||||
border-radius: 3px;
|
||||
background-color: #fce6e6;
|
||||
}
|
||||
|
|
@ -1301,7 +1298,7 @@ td > table > tbody > tr > td,
|
|||
|
||||
.cbi-section-error ul li {
|
||||
font-weight: bold;
|
||||
color: #f00;
|
||||
color: var(--error-color);
|
||||
}
|
||||
|
||||
.td[data-title]::before {
|
||||
|
|
@ -1332,7 +1329,7 @@ td > table > tbody > tr > td,
|
|||
}
|
||||
|
||||
.cbi-rowstyle-1 {
|
||||
background-color: #f9f9f9;
|
||||
background-color: var(--white-color-low);
|
||||
}
|
||||
|
||||
.cbi-rowstyle-2 {
|
||||
|
|
@ -1342,7 +1339,7 @@ td > table > tbody > tr > td,
|
|||
.cbi-rowstyle-2 .cbi-button-up,
|
||||
.cbi-rowstyle-2 .cbi-button-down,
|
||||
body:not(.Interfaces) .cbi-rowstyle-2:first-child {
|
||||
background-color: #fff !important;
|
||||
background-color: var(--white-color) !important;
|
||||
}
|
||||
|
||||
.cbi-section-table .cbi-section-table-titles .cbi-section-table-cell {
|
||||
|
|
@ -1401,9 +1398,9 @@ body:not(.Interfaces) .cbi-rowstyle-2:first-child {
|
|||
padding: 0 6px;
|
||||
content: "\00D7";
|
||||
pointer-events: auto;
|
||||
color: #fff;
|
||||
border: thin solid #d43f3a;
|
||||
background-color: #d9534f;
|
||||
color: var(--white-color);
|
||||
border: thin solid var(--red-color);
|
||||
background-color: var(--red-color-high);
|
||||
}
|
||||
|
||||
.cbi-dynlist > .item > span {
|
||||
|
|
@ -1500,7 +1497,7 @@ body:not(.Interfaces) .cbi-rowstyle-2:first-child {
|
|||
font-weight: bold;
|
||||
display: none;
|
||||
color: #777;
|
||||
text-shadow: 1px 1px 0 #fff;
|
||||
text-shadow: 1px 1px 0 var(--white-color);
|
||||
}
|
||||
|
||||
.cbi-dropdown > ul > li {
|
||||
|
|
@ -1564,7 +1561,7 @@ body:not(.Interfaces) .cbi-rowstyle-2:first-child {
|
|||
border: thin solid #918e8c;
|
||||
background: #f6f6f6;
|
||||
box-shadow: 0 0 4px #918e8c;
|
||||
color: var(--main-menu-color);
|
||||
color: var(--black-color-low);
|
||||
}
|
||||
|
||||
.cbi-dropdown > ul > li[display],
|
||||
|
|
@ -1646,8 +1643,7 @@ body:not(.Interfaces) .cbi-rowstyle-2:first-child {
|
|||
width: 0;
|
||||
height: 100%;
|
||||
transition: width .25s ease-in;
|
||||
background: #5bc0de;
|
||||
background: var(--bar-bg);
|
||||
background: var(--light-blue-color);
|
||||
}
|
||||
|
||||
.cbi-progressbar::after {
|
||||
|
|
@ -1693,7 +1689,7 @@ body:not(.Interfaces) .cbi-rowstyle-2:first-child {
|
|||
margin: 5em auto;
|
||||
padding: 1em;
|
||||
border-radius: 3px !important;
|
||||
background: #fff;
|
||||
background: var(--white-color);
|
||||
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);
|
||||
}
|
||||
|
||||
|
|
@ -1736,7 +1732,6 @@ body:not(.Interfaces) .cbi-rowstyle-2:first-child {
|
|||
.modal p {
|
||||
padding-left: .25rem;
|
||||
word-break: break-word;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.modal label.btn {
|
||||
|
|
@ -1749,10 +1744,6 @@ body:not(.Interfaces) .cbi-rowstyle-2:first-child {
|
|||
padding-top: 0.2rem;
|
||||
}
|
||||
|
||||
.modal label.warning {
|
||||
background-color: #f0ad4e !important;
|
||||
}
|
||||
|
||||
.modal.cbi-modal {
|
||||
max-width: 90%;
|
||||
max-height: none;
|
||||
|
|
@ -1889,7 +1880,7 @@ td > .ifacebadge,
|
|||
min-width: 220px;
|
||||
margin: .5em .25em 0 .25em;
|
||||
padding: .5em;
|
||||
background-color: #fff;
|
||||
background-color: var(--white-color);
|
||||
}
|
||||
|
||||
#dsl_status_table .ifacebox-body span > strong {
|
||||
|
|
@ -1903,7 +1894,7 @@ td > .ifacebadge,
|
|||
width: 100%;
|
||||
min-height: 14rem;
|
||||
padding: .8rem;
|
||||
color: #000;
|
||||
color: var(--black-color);
|
||||
}
|
||||
|
||||
#syslog {
|
||||
|
|
@ -2001,7 +1992,7 @@ td > .ifacebadge,
|
|||
#iwsvg,
|
||||
#iwsvg2,
|
||||
#bwsvg {
|
||||
border: thin solid #d4d4d4 !important;
|
||||
border: thin solid var(--gray-color) !important;
|
||||
}
|
||||
|
||||
#iwsvg,
|
||||
|
|
@ -2015,7 +2006,7 @@ td > .ifacebadge,
|
|||
flex-direction: column;
|
||||
min-width: 100px;
|
||||
border-bottom: thin solid #ccc;
|
||||
background-color: #f9f9f9;
|
||||
background-color: var(--white-color-low);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 1px 2px rgba(0, 0, 0, .2);
|
||||
}
|
||||
|
||||
|
|
@ -2025,8 +2016,7 @@ td > .ifacebadge,
|
|||
}
|
||||
|
||||
.ifacebox-head.active {
|
||||
background: #5bc0de;
|
||||
background: var(--bar-bg);
|
||||
background: var(--light-blue-color);
|
||||
}
|
||||
|
||||
.ifacebox-body {
|
||||
|
|
@ -2129,7 +2119,7 @@ span[data-tooltip] .label {
|
|||
pointer-events: none;
|
||||
opacity: 0;
|
||||
border-radius: 3px;
|
||||
background: #fff;
|
||||
background: var(--white-color);
|
||||
box-shadow: 0 0 2px #444;
|
||||
}
|
||||
|
||||
|
|
@ -2179,7 +2169,7 @@ span[data-tooltip] .label {
|
|||
white-space: nowrap;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
color: #fff !important;
|
||||
color: var(--white-color) !important;
|
||||
border-radius: 3px;
|
||||
background-color: #bfbfbf;
|
||||
text-shadow: none;
|
||||
|
|
@ -2269,7 +2259,7 @@ input[name="nslookup"] {
|
|||
margin-top: 2rem !important;
|
||||
padding: 1rem 3.5rem 2rem;
|
||||
text-align: left;
|
||||
background-color: #fff;
|
||||
background-color: var(--white-color);
|
||||
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,44 @@
|
|||
:root {
|
||||
--main-color: #00B5E2;
|
||||
--header-bg: #00B5E2;
|
||||
--header-color: #fff;
|
||||
--bar-bg: #5bc0de;
|
||||
--menu-bg-color: #fff;
|
||||
--menu-color: #5f6368;
|
||||
--menu-color-hover: #202124;
|
||||
--main-menu-color: #202124;
|
||||
--submenu-bg-hover: #d4d4d4;
|
||||
--submenu-bg-hover-active: #00B5E2;
|
||||
/** General colors */
|
||||
--white-color: #ffffff;
|
||||
--white-color-low: #f9f9f9;
|
||||
--black-color: #000000;
|
||||
--black-color-low: #202124;
|
||||
--yellow-color: #f0ad4e;
|
||||
--yellow-color-high: #eea236;
|
||||
--on-yellow-color: var(--white-color);
|
||||
--red-color: #d9534f;
|
||||
--red-color-high: #d43f3a;
|
||||
--on-red-color: var(--white-color);
|
||||
--green-color: #5cb85c;
|
||||
--green-color-high: #4cae4c;
|
||||
--on-green-color: var(--white-color);
|
||||
--dark-blue-color: #337ab7;
|
||||
--dark-blue-color-high: #2e6da4;
|
||||
--on-dark-blue-color: var(--white-color);
|
||||
--gray-color: #d4d4d4;
|
||||
--gray-color-high: #bfbfbf;
|
||||
--light-blue-color: #5bc0de;
|
||||
--light-blue-color-high: #46b8da;
|
||||
--on-light-blue-color: var(--white-color);
|
||||
|
||||
--primary-color: #00B5E2;
|
||||
--secondary-color: #0099cc;
|
||||
|
||||
--notice-color: #002B49;
|
||||
--on-notice-color: var(--white-color);
|
||||
|
||||
--danger-color: var(--red-color);
|
||||
--on-danger-color: var(--on-red-color);
|
||||
|
||||
--warning-color: #f0e68c;
|
||||
--on-warning-color: var(--black-color);
|
||||
|
||||
--success-color: var(--green-color);
|
||||
--on-success-color: var(--on-green-color);
|
||||
|
||||
--error-color: #ff0000;
|
||||
--on-error-color: var(--white-color);
|
||||
|
||||
--font-body: "Microsoft Yahei", "WenQuanYi Micro Hei", "sans-serif", "Helvetica Neue", "Helvetica", "Hiragino Sans GB";
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue