luci-theme-openwrt: add new style classes

Add new style classes required for status page changes, also drop old
Internet Explorer compatibility CSS.

Signed-off-by: Jo-Philipp Wich <jo@mein.io>
This commit is contained in:
Jo-Philipp Wich 2018-05-30 14:42:00 +02:00
parent f0094cc06e
commit f8221b9825
5 changed files with 50 additions and 153 deletions

View file

@ -40,6 +40,10 @@ body {
.table[width="33%"], .th[width="33%"], .td[width="33%"] { width: 33%; }
.table[width="100%"], .th[width="100%"], .td[width="100%"] { width: 100%; }
.nowrap {
white-space: nowrap;
}
a img {
border: none;
text-decoration: none;
@ -952,8 +956,17 @@ div.cbi-tab-descr {
margin: .25em .5em;
}
.ifacebox-head {
background: #eee;
}
.ifacebox-head.active {
background: #90c0e0;
}
.ifacebadge > img {
margin-right: 2px;
margin-right: 5px;
align-self: start;
}
.ifacebadge-active {
@ -965,7 +978,7 @@ div.cbi-tab-descr {
flex-direction: column;
margin: 0 10px;
padding: 0;
min-width: 70px;
min-width: 100px;
}
.ifacebox > * {
@ -973,6 +986,41 @@ div.cbi-tab-descr {
}
.network-status-table {
display: flex;
flex-wrap: wrap;
}
.network-status-table .ifacebox {
margin: .5em;
font-size: 90%;
flex-grow: 1;
}
.network-status-table .ifacebox-body {
display: flex;
flex-direction: column;
height: 100%;
}
.network-status-table .ifacebox-body > span {
flex: 10;
}
.network-status-table .ifacebox-body > div {
display: flex;
flex-wrap: wrap;
}
.network-status-table .ifacebox-body .ifacebadge {
flex: 1;
margin: .5em .25em .25em .25em;
padding: .5em;
min-width: 220px;
white-space: nowrap;
}
.zonebadge {
padding: 2px;
display: inline-block;

View file

@ -1,77 +0,0 @@
/* obligatory IE6 Voodoo Code */
* html body {
padding-left: 5% !important;
}
* html div#header {
margin-left: 100% !important;
}
* html div#menubar {
margin-left: -5% !important;
width: 105% !important;
}
* html ul.dropdowns li ul {
width: 10em;
}
* html ul.dropdowns li li {
clear: both;
float: left;
}
* html ul.dropdowns li li {
width: 100%;
}
* html ul.dropdowns li li a {
height: 10%;
}
* html div#maincontent {
margin-left: 0% !important;
width: 100% !important;
}
* html div.cbi-value-description {
width: auto !important;
}
* html div.cbi-value-field {
margin-left: 0 !important;
width: 100% !important;
}
* html .cbi-input-text,
* html .cbi-input-user,
* html .cbi-input-select,
* html .cbi-input-password {
width: 50% !important;
}
* html .cbi-input-user,
* html .cbi-input-password {
text-indent: 0 !important;
padding-left: 1.5em !important;
}
* html .cbi-section legend {
background-color: #ffffff;
color: #555555;
}
* html table.cbi-section-table td .cbi-input-text,
* html table.cbi-section-table td .cbi-input-select {
width: 100% !important;
}
* html div.cbi-page-actions {
text-align: right !important;
}
* html div.cbi-value-field input,
* html div.cbi-value-field select {
font-size: 90% !important;
}

View file

@ -1,59 +0,0 @@
#tabmenu {
line-height: 0;
}
ul.tabmenu {
zoom: 1;
}
ul.l1 {
position: relative;
}
table.cbi-section-table td .cbi-input-text,
table.cbi-section-table td .cbi-input-select {
width: 95% !important;
}
.cbi-input-user,
.cbi-input-password {
text-indent: 0 !important;
padding-left: 1.5em !important;
width: 18.5em !important;
}
fieldset.cbi-section {
position: relative;
margin-top: 1em;
padding-top: 0.75em;
border: 1px solid #CCCCCC;
zoom: 1;
}
fieldset.cbi-section legend {
position: absolute;
top: -0.75em;
left: 0.5em;
}
ul.cbi-tabmenu {
margin-bottom: 0;
}
ul.cbi-tabmenu li.cbi-tab a {
position: static; /* fixes misplaced tab after page load */
border-bottom: 1px solid white;
}
div.cbi-value {
zoom: 1; /* fixes hanging float */
}
div.cbi-value-field {
margin-left: 0 !important;
}

View file

@ -1,12 +0,0 @@
fieldset.cbi-section {
position: relative;
margin-top: 1em;
padding-top: 0.75em;
border: 1px solid #CCCCCC;
}
fieldset.cbi-section legend {
position: absolute;
top: -0.75em;
left: 0.5em;
}

View file

@ -118,9 +118,6 @@
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<link rel="stylesheet" type="text/css" media="screen" href="<%=media%>/cascade.css" />
<!--[if IE 6]><link rel="stylesheet" type="text/css" media="screen" href="<%=media%>/ie6.css" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" type="text/css" media="screen" href="<%=media%>/ie7.css" /><![endif]-->
<!--[if IE 8]><link rel="stylesheet" type="text/css" media="screen" href="<%=media%>/ie8.css" /><![endif]-->
<% if node and node.css then %><link rel="stylesheet" type="text/css" media="screen" href="<%=resource%>/<%=node.css%>" />
<% end -%>
<% if css then %><style title="text/css">