Difuse/luci
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

luci-theme-bootstrap: compress color names, fix table striping

Browse source 
Signed-off-by: Jo-Philipp Wich <jo@mein.io>
This commit is contained in:
Jo-Philipp Wich 2018-07-12 18:57:20 +02:00
parent b7bf164fea
commit a0e5e8a9da
1 changed files with 63 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

118
themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css
View file

@ -162,7 +162,7 @@ textarea {
* Basic and global styles for generating a grid system, structural layout, and page templates * Basic and global styles for generating a grid system, structural layout, and page templates
* ------------------------------------------------------------------------------------------- */ * ------------------------------------------------------------------------------------------- */
body { body {
background-color: #ffffff; background-color: #fff;
margin: 0; margin: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 13px; font-size: 13px;
@ -516,7 +516,7 @@ input[type=checkbox], input[type=radio] {
} }
input[type=file] { input[type=file] {
background-color: #ffffff; background-color: #fff;
padding: initial; padding: initial;
border: initial; border: initial;
line-height: initial; line-height: initial;
@ -537,7 +537,7 @@ select, input[type=file] {
select[multiple] { select[multiple] {
height: inherit; height: inherit;
background-color: #ffffff; background-color: #fff;
} }
textarea { textarea {
@ -552,7 +552,7 @@ textarea {
} }
.uneditable-input { .uneditable-input {
background-color: #ffffff; background-color: #fff;
display: block; display: block;
border-color: #eee; border-color: #eee;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
@ -800,7 +800,7 @@ header a {
header h3 a:hover, header .brand:hover, header ul .active > a { header h3 a:hover, header .brand:hover, header ul .active > a {
background-color: #333; background-color: #333;
background-color: rgba(255, 255, 255, 0.05); background-color: rgba(255, 255, 255, 0.05);
color: #ffffff; color: #fff;
text-decoration: none; text-decoration: none;
} }
@ -813,7 +813,7 @@ header h3 a, header .brand {
display: block; display: block;
padding: 8px 20px 12px; padding: 8px 20px 12px;
margin-left: -20px; margin-left: -20px;
color: #ffffff; color: #fff;
font-size: 20px; font-size: 20px;
font-weight: 200; font-weight: 200;
line-height: 1; line-height: 1;
@ -854,7 +854,7 @@ header div > ul a, .nav a {
} }
header div > ul a:hover, .nav a:hover { header div > ul a:hover, .nav a:hover {
color: #ffffff; color: #fff;
text-decoration: none; text-decoration: none;
} }
@ -904,7 +904,7 @@ header div > ul .menu-dropdown .dropdown-toggle,
.nav .menu-dropdown .dropdown-toggle, .nav .menu-dropdown .dropdown-toggle,
header div > ul .dropdown-menu .dropdown-toggle, header div > ul .dropdown-menu .dropdown-toggle,
.nav .dropdown-menu .dropdown-toggle { .nav .dropdown-menu .dropdown-toggle {
color: #ffffff; color: #fff;
} }
header div > ul .menu-dropdown a.menu.open, header div > ul .menu-dropdown a.menu.open,
@ -934,14 +934,14 @@ header div > ul .dropdown-menu li a:hover,
background-color: #191919; background-color: #191919;
background-repeat: repeat-x; background-repeat: repeat-x;
background-image: linear-gradient(to bottom, #292929, #191919); background-image: linear-gradient(to bottom, #292929, #191919);
color: #ffffff; color: #fff;
} }
header div > ul .menu-dropdown .active a, header div > ul .menu-dropdown .active a,
.nav .menu-dropdown .active a, .nav .menu-dropdown .active a,
header div > ul .dropdown-menu .active a, header div > ul .dropdown-menu .active a,
.nav .dropdown-menu .active a { .nav .dropdown-menu .active a {
color: #ffffff; color: #fff;
} }
header div > ul .menu-dropdown .divider, header div > ul .menu-dropdown .divider,
@ -971,12 +971,12 @@ a.menu:after, .dropdown-toggle:after {
margin-left: 4px; margin-left: 4px;
border-left: 4px solid transparent; border-left: 4px solid transparent;
border-right: 4px solid transparent; border-right: 4px solid transparent;
border-top: 4px solid #ffffff; border-top: 4px solid #fff;
opacity: 0.5; opacity: 0.5;
} }
.menu-dropdown, .dropdown-menu { .menu-dropdown, .dropdown-menu {
background-color: #ffffff; background-color: #fff;
float: left; float: left;
position: absolute; position: absolute;
top: 40px; top: 40px;
@ -1009,7 +1009,7 @@ a.menu:after, .dropdown-toggle:after {
margin: 5px 0; margin: 5px 0;
overflow: hidden; overflow: hidden;
background-color: #eee; background-color: #eee;
border-bottom: 1px solid #ffffff; border-bottom: 1px solid #fff;
} }
header .dropdown-menu a, .dropdown-menu a { header .dropdown-menu a, .dropdown-menu a {
@ -1019,16 +1019,16 @@ header .dropdown-menu a, .dropdown-menu a {
font-weight: normal; font-weight: normal;
line-height: 18px; line-height: 18px;
color: #808080; color: #808080;
text-shadow: 0 1px 0 #ffffff; text-shadow: 0 1px 0 #fff;
} }
header .dropdown-menu a:hover, header .dropdown-menu a:hover,
.dropdown-menu a:hover, .dropdown-menu a:hover,
header .dropdown-menu a.hover, header .dropdown-menu a.hover,
.dropdown-menu a.hover { .dropdown-menu a.hover {
background-color: #dddddd; background-color: #ddd;
background-repeat: repeat-x; background-repeat: repeat-x;
background-image: linear-gradient(to bottom, #eeeeee, #dddddd); background-image: linear-gradient(to bottom, #eee, #ddd);
color: #404040; color: #404040;
text-decoration: none; text-decoration: none;
box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.025), inset 0 -1px rgba(0, 0, 0, 0.025); box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.025), inset 0 -1px rgba(0, 0, 0, 0.025);
@ -1038,7 +1038,7 @@ header .dropdown-menu a.hover,
.dropdown.open .menu, .dropdown.open .menu,
.open .dropdown-toggle, .open .dropdown-toggle,
.dropdown.open .dropdown-toggle { .dropdown.open .dropdown-toggle {
color: #ffffff; color: #fff;
background: #ccc; background: #ccc;
background: rgba(0, 0, 0, 0.3); background: rgba(0, 0, 0, 0.3);
} }
@ -1137,7 +1137,7 @@ header .dropdown-menu a.hover,
.cbi-tabmenu .active > a, .cbi-tabmenu .active > a:hover, .cbi-tabmenu .active > a, .cbi-tabmenu .active > a:hover,
.cbi-tab > a:link, .cbi-tab > a:hover { .cbi-tab > a:link, .cbi-tab > a:hover {
color: #808080; color: #808080;
background-color: #ffffff; background-color: #fff;
border: 1px solid #ddd; border: 1px solid #ddd;
border-bottom-color: transparent; border-bottom-color: transparent;
cursor: default; cursor: default;
@ -1181,15 +1181,15 @@ header .dropdown-menu a.hover,
margin: 0 0 18px; margin: 0 0 18px;
background-color: #f5f5f5; background-color: #f5f5f5;
background-repeat: repeat-x; background-repeat: repeat-x;
background-image: linear-gradient(to bottom, #ffffff, #f5f5f5); background-image: linear-gradient(to bottom, #fff, #f5f5f5);
border: 1px solid #ddd; border: 1px solid #ddd;
border-radius: 3px; border-radius: 3px;
box-shadow: inset 0 1px 0 #ffffff; box-shadow: inset 0 1px 0 #fff;
} }
.breadcrumb li { .breadcrumb li {
display: inline; display: inline;
text-shadow: 0 1px 0 #ffffff; text-shadow: 0 1px 0 #fff;
} }
.breadcrumb .divider { .breadcrumb .divider {
@ -1223,7 +1223,7 @@ footer {
.alert-message.info, .alert-message.info,
.btn.info:hover, .btn.info:hover,
.alert-message.info:hover { .alert-message.info:hover {
color: #ffffff; color: #fff;
} }
.btn .close, .alert-message .close { .btn .close, .alert-message .close {
@ -1267,7 +1267,7 @@ footer {
display: inline-block; display: inline-block;
background-color: #e6e6e6; background-color: #e6e6e6;
background-repeat: no-repeat; background-repeat: no-repeat;
background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); background-image: linear-gradient(#fff, #fff 25%, #e6e6e6);
padding: 5px 14px 6px; padding: 5px 14px 6px;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
color: #333; color: #333;
@ -1292,8 +1292,8 @@ footer {
.cbi-input-invalid, .cbi-input-invalid,
.cbi-value-error input { .cbi-value-error input {
color: #FF0000; color: #f00;
border-color: #FF0000; border-color: #f00;
} }
.cbi-button-positive, .cbi-button-positive,
@ -1310,7 +1310,6 @@ footer {
.cbi-button-link, .cbi-button-link,
.cbi-button-up, .cbi-button-up,
.cbi-button-down { .cbi-button-down {
border-color: #444;
color: #444; color: #444;
} }
@ -1331,6 +1330,11 @@ footer {
color: #c44; color: #c44;
} }
.cbi-page-actions .cbi-button-link,
.cbi-page-actions form[method="get"]:first-child {
float: left;
}
.btn.primary, .btn.primary,
.cbi-button-action.important, .cbi-button-action.important,
.cbi-page-actions .cbi-button-apply, .cbi-page-actions .cbi-button-apply,
@ -1348,7 +1352,7 @@ footer {
} }
.cbi-page-actions .cbi-button-apply + .cbi-button-save { .cbi-page-actions .cbi-button-apply + .cbi-button-save {
background: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); background: linear-gradient(#fff, #fff 25%, #e6e6e6);
text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.75); text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.75);
color: #4a4; color: #4a4;
} }
@ -1595,16 +1599,16 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
.close { .close {
float: right; float: right;
color: #000000; color: #000;
font-size: 20px; font-size: 20px;
font-weight: bold; font-weight: bold;
line-height: 13.5px; line-height: 13.5px;
text-shadow: 0 1px 0 #ffffff; text-shadow: 0 1px 0 #fff;
opacity: 0.25; opacity: 0.25;
} }
.close:hover { .close:hover {
color: #000000; color: #000;
text-decoration: none; text-decoration: none;
opacity: 0.4; opacity: 0.4;
} }
@ -1641,7 +1645,7 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
.alert-message.error p a, .alert-message.error p a,
.alert-message.success p a, .alert-message.success p a,
.alert-message.info p a { .alert-message.info p a {
color: #ffffff; color: #fff;
} }
.alert-message h5 { .alert-message h5 {
@ -1666,7 +1670,7 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
padding: 1px 3px 2px; padding: 1px 3px 2px;
font-size: 9.75px; font-size: 9.75px;
font-weight: bold; font-weight: bold;
color: #ffffff !important; color: #fff !important;
text-transform: uppercase; text-transform: uppercase;
white-space: nowrap; white-space: nowrap;
background-color: #bfbfbf; background-color: #bfbfbf;
@ -1676,7 +1680,7 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
a.label:link, a.label:link,
a.label:visited { a.label:visited {
color: #ffffff; color: #fff;
} }
a.label:hover { a.label:hover {
@ -1707,7 +1711,7 @@ a.label:hover {
#memcache > div, #memcache > div,
#membuff > div, #membuff > div,
#conns > div { #conns > div {
border: 1px solid #CCCCCC; border: 1px solid #ccc;
border-radius: 3px 3px 3px 3px; border-radius: 3px 3px 3px 3px;
color: #808080; color: #808080;
display: inline-block; display: inline-block;
@ -1791,6 +1795,10 @@ table table td,
vertical-align: middle; vertical-align: middle;
} }
.cbi-rowstyle-2 {
background: #f9f9f9;
}
.cbi-value-description { .cbi-value-description {
background-image: url(/luci-static/resources/cbi/help.gif); background-image: url(/luci-static/resources/cbi/help.gif);
background-position: .25em .2em; background-position: .25em .2em;
@ -1800,9 +1808,9 @@ table table td,
} }
.cbi-section-error { .cbi-section-error {
border: 1px solid #FF0000; border: 1px solid #f00;
border-radius: 3px; border-radius: 3px;
background-color: #FCE6E6; background-color: #fce6e6;
padding: 5px; padding: 5px;
margin-bottom: 18px; margin-bottom: 18px;
} }
@ -1810,17 +1818,17 @@ table table td,
.cbi-section-error ul { margin: 0 0 0 20px; } .cbi-section-error ul { margin: 0 0 0 20px; }
.cbi-section-error ul li { .cbi-section-error ul li {
color: #FF0000; color: #f00;
font-weight: bold; font-weight: bold;
} }
.ifacebox { .ifacebox {
background-color: #FFFFFF; background-color: #fff;
border: 1px solid #CCCCCC; border: 1px solid #ccc;
margin: 0 10px; margin: 0 10px;
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); background-image: linear-gradient(#fff, #fff 25%, #f9f9f9);
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
border-radius: 4px; border-radius: 4px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
@ -1831,7 +1839,7 @@ table table td,
} }
.ifacebox .ifacebox-head { .ifacebox .ifacebox-head {
border-bottom: 1px solid #CCCCCC; border-bottom: 1px solid #ccc;
padding: 2px; padding: 2px;
background: #eee; background: #eee;
} }
@ -1848,10 +1856,10 @@ table table td,
display: inline-flex; display: inline-flex;
flex-direction: row; flex-direction: row;
white-space: nowrap; white-space: nowrap;
background-color: #FFFFFF; background-color: #fff;
border: 1px solid #CCCCCC; border: 1px solid #ccc;
padding: 2px; padding: 2px;
background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); background-image: linear-gradient(#fff, #fff 25%, #f9f9f9);
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
border-radius: 4px; border-radius: 4px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
@ -1867,7 +1875,7 @@ table table td,
} }
.ifacebadge-active { .ifacebadge-active {
border-color: #000000; border-color: #000;
font-weight: bold; font-weight: bold;
} }
@ -1910,7 +1918,7 @@ table table td,
border-radius: 4px; border-radius: 4px;
display: inline-block; display: inline-block;
white-space: nowrap; white-space: nowrap;
color: #666666; color: #666;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
} }
@ -1929,8 +1937,8 @@ table table td,
} }
.zonebadge-empty { .zonebadge-empty {
border: 1px dashed #AAAAAA; border: 1px dashed #aaa;
color: #AAAAAA; color: #aaa;
font-style: italic; font-style: italic;
font-size: smaller; font-size: smaller;
} }
@ -1938,7 +1946,7 @@ table table td,
div.cbi-value var, div.cbi-value var,
.td.cbi-value-field var { .td.cbi-value-field var {
font-style: italic; font-style: italic;
color: #0069D6; color: #0069d6;
} }
.uci-change-list { .uci-change-list {
@ -1948,8 +1956,8 @@ div.cbi-value var,
.uci-change-list ins, .uci-change-list ins,
.uci-change-legend-label ins { .uci-change-legend-label ins {
text-decoration: none; text-decoration: none;
border: 1px solid #00FF00; border: 1px solid #0f0;
background-color: #CCFFCC; background-color: #cfc;
display: block; display: block;
padding: 2px; padding: 2px;
} }
@ -1957,8 +1965,8 @@ div.cbi-value var,
.uci-change-list del, .uci-change-list del,
.uci-change-legend-label del { .uci-change-legend-label del {
text-decoration: none; text-decoration: none;
border: 1px solid #FF0000; border: 1px solid #f00;
background-color: #FFCCCC; background-color: #fcc;
display: block; display: block;
font-style: normal; font-style: normal;
padding: 2px; padding: 2px;
@ -1967,8 +1975,8 @@ div.cbi-value var,
.uci-change-list var, .uci-change-list var,
.uci-change-legend-label var { .uci-change-legend-label var {
text-decoration: none; text-decoration: none;
border: 1px solid #CCCCCC; border: 1px solid #ccc;
background-color: #EEEEEE; background-color: #eee;
display: block; display: block;
font-style: normal; font-style: normal;
padding: 2px; padding: 2px;