diff options
Diffstat (limited to 'themes/luci-theme-openwrt')
5 files changed, 168 insertions, 223 deletions
diff --git a/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css b/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css index c5ee58fff7..8b359d475a 100644 --- a/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css +++ b/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css @@ -29,6 +29,21 @@ body { padding: 0; } +.table { display: table; } +.tr { display: table-row; } +.thead { display: table-header-group; } +.tbody { display: table-row-group; } +.tfoot { display: table-footer-group; } +.td, .th { display: table-cell; } +.th { font-weight: bold; } + +.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; @@ -166,6 +181,33 @@ code { background-color: white; } +.alert-message { + font-size: 9pt; + font-weight: normal; + padding: .5em; + border-radius: 3px; + color: #000; +} + +.alert-message.notice { + background: linear-gradient(#ccc 0%, #eee 100%); + color: #4a6b7c; +} + +.alert-message.warning { + background: linear-gradient(#dda 0%, #dd8 100%); + color: #c00; +} + +.alert-message > * { + margin: .5em; +} + +.alert-message > h4 { + font-weight: bold; + font-size: 10pt; +} + div.hostinfo { float: left; margin: 0; @@ -420,9 +462,9 @@ input[type=password] { width: 20em; } -td select, -td input[type=text], -td input[type=password] { +.td select, +.td input[type=text], +.td input[type=password] { width: 99%; } @@ -432,24 +474,29 @@ img.cbi-image-button { vertical-align: middle; } -input.cbi-button { - background-color: #EEEEEE; - background-repeat: no-repeat; - background-position: 1px center; - border: 1px solid #CCCCCC; +.btn, .cbi-button { + padding: 2px; border-radius: 3px; + border: 1px solid #aaa; + background: #eee 1px center no-repeat; + text-decoration: none; + color: #000; + display: inline-block; } -input.cbi-button:hover { - border-color: #4A6B7C; - background-color: #FFFFFF; +.btn:hover, .cbi-button:hover { + border-color: #4a6b7c; + background-color: #fff; } -input.cbi-button[disabled] { - color: #CCCCCC; - border-color: #CCCCCC; - background-color: #EEEEEE; +.btn[disabled], +.btn[disabled]:hover, +.cbi-button[disabled], +.cbi-button[disabled]:hover { + opacity: .6; cursor: default; + border-color: inherit; + background-color: inherit; } input.cbi-input-user { @@ -494,7 +541,6 @@ input.cbi-button-fieldadd { background-image: url(../resources/cbi/fieldadd.gif); color: #000000; padding-left: 17px; - padding-right: 1px; } input.cbi-input-reset, @@ -513,6 +559,7 @@ input.cbi-button-save { padding-right: 1px; } +/* input.cbi-input-apply, input.cbi-button-apply { background-image: url('../resources/cbi/apply.gif'); @@ -520,6 +567,18 @@ input.cbi-button-apply { padding-left: 17px; padding-right: 1px; } +*/ + +input.cbi-input-apply:before, +input.cbi-button-apply:before { + background-image: url('../resources/cbi/apply.gif'); + border: 2px solid red; + width: 100px; + height: 100px; + content: "."; + display: block; + position: absolute; +} input.cbi-input-link, input.cbi-button-link { @@ -608,12 +667,18 @@ form > div > input[type=reset] { margin-left: 0.5em; } -table td, -table th { +table td, table th { + color: #000000; +} + +.table .td, .table .th { color: #000000; + padding: .25em 0; + text-align: center; + vertical-align: middle; } -table.smalltext { +.table.smalltext { background: #f5f5f5; color: #000000; border-top: 1px solid #666666; @@ -626,35 +691,35 @@ table.smalltext { border-collapse: collapse; } -table.smalltext tr:hover td { +.table.smalltext .tr:hover .td { background-color: #bbddee; color: #000000; } -table.smalltext tr th { +.table.smalltext .tr .th { padding: 0 0.25em; border-left: 1px solid #666666; text-align: left; } -table.smalltext tr td { +.table.smalltext .tr .td { padding: 0 0.25em; border-top: 1px solid #666666; border-left: 1px solid #666666; } -table.cbi-section-table .cbi-rowstyle-1 { +.table.cbi-section-table .cbi-rowstyle-1 { background-color: #eeeeff; color: #000000; } -table.cbi-section-table .cbi-rowstyle-1:hover, -table.cbi-section-table .cbi-rowstyle-2:hover { +.table.cbi-section-table .cbi-rowstyle-1:hover, +.table.cbi-section-table .cbi-rowstyle-2:hover { background-color: #b2c8d4; color: #000000; } -table.cbi-section-table .cbi-section-table-cell { +.table.cbi-section-table .cbi-section-table-cell { padding: 3px; white-space: nowrap; } @@ -692,6 +757,11 @@ div.cbi-value-field { padding: 0.25em 0; } +div.td.cbi-value-field { + width: auto; + vertical-align: middle; +} + div.cbi-value-description { font-size: 90%; display: inline; @@ -740,7 +810,7 @@ div.cbi-section-remove { border-bottom: none; } -.cbi-section-node table div { +.cbi-section-node .table div { padding-bottom: 0; border-bottom: none; } @@ -749,23 +819,23 @@ div.cbi-section-remove { margin: 0.25em; } -table.cbi-section-table { +.table.cbi-section-table { width: 100%; font-size: 95%; } -table.cbi-section-table th, -table.cbi-section-table td { +.table.cbi-section-table .th, +.table.cbi-section-table .td { text-align: center; } -tr.cbi-section-table-descr th { +.tr.cbi-section-table-descr .th { font-weight: normal; font-size: 90%; vertical-align: top; } -td.cbi-section-table-optionals { +.td.cbi-section-table-optionals { text-align: left !important; padding-top: 1em; } @@ -781,7 +851,7 @@ div.cbi-error { background-color: #ffffff; } -td.cbi-value-error { +.td.cbi-value-error { border-color: red; } @@ -864,6 +934,10 @@ div.cbi-tab-descr { text-align: right !important; } +.center { + text-align: center !important; +} + .luci { position: absolute; bottom: 0; @@ -892,57 +966,79 @@ div.cbi-tab-descr { padding: 0.5em; } -.errorbox { - border: 1px solid #FF0000; - background-color: #FFCCCC; - padding: 5px; - margin-bottom: 5px; + +.ifacebadge, .ifacebox { + display: inline-flex; + align-content: center; + border: 1px solid #ccc; + border-radius: 3px; + padding: 2px; + background: #fff; + margin: .25em .5em; +} + +.ifacebox-head { + background: #eee; +} + +.ifacebox-head.active { + background: #90c0e0; } -.errorbox a { - color: #000000 !important; +.ifacebadge > img { + margin-right: 5px; + align-self: start; } +.ifacebadge-active { + border-color: #000000; + font-weight: bold; +} .ifacebox { - background-color: #FFFFFF; - border: 1px solid #CCCCCC; + flex-direction: column; margin: 0 10px; - text-align: center; - white-space: nowrap; + padding: 0; + min-width: 100px; } -.ifacebox .ifacebox-head { - border-bottom: 1px solid #CCCCCC; +.ifacebox > * { padding: 2px; } -.ifacebox .ifacebox-body { - padding: 2px; + +.network-status-table { + display: flex; + flex-wrap: wrap; } +.network-status-table .ifacebox { + margin: .5em; + font-size: 90%; + flex-grow: 1; +} -.ifacebadge { - background-color: #FFFFFF; - border: 1px solid #CCCCCC; - padding: 1px 2px; - margin-left: 2px; - display: inline-block; - cursor: default; - white-space: nowrap; - font-size: 11px; - border-radius: 3px; +.network-status-table .ifacebox-body { + display: flex; + flex-direction: column; + height: 100%; } -.ifacebadge img { - width: 16px; - height: 16px; - vertical-align: middle; +.network-status-table .ifacebox-body > span { + flex: 10; } -.ifacebadge-active { - border-color: #000000; - font-weight: bold; +.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; } diff --git a/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/ie6.css b/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/ie6.css deleted file mode 100644 index 14db3f86e5..0000000000 --- a/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/ie6.css +++ /dev/null @@ -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; -} diff --git a/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/ie7.css b/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/ie7.css deleted file mode 100644 index 9e569b28bd..0000000000 --- a/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/ie7.css +++ /dev/null @@ -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; -} diff --git a/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/ie8.css b/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/ie8.css deleted file mode 100644 index 890988c417..0000000000 --- a/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/ie8.css +++ /dev/null @@ -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; -} diff --git a/themes/luci-theme-openwrt/luasrc/view/themes/openwrt.org/header.htm b/themes/luci-theme-openwrt/luasrc/view/themes/openwrt.org/header.htm index a560014d37..cbf02a76cd 100644 --- a/themes/luci-theme-openwrt/luasrc/view/themes/openwrt.org/header.htm +++ b/themes/luci-theme-openwrt/luasrc/view/themes/openwrt.org/header.htm @@ -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"> @@ -170,16 +167,16 @@ <div id="maincontent"> <noscript> - <div class="errorbox"> - <strong><%:JavaScript required!%></strong><br /> - <%:You must enable JavaScript in your browser or LuCI will not work properly.%> + <div class="alert-message warning"> + <h4><%:JavaScript required!%></h4> + <p><%:You must enable JavaScript in your browser or LuCI will not work properly.%></p> </div> </noscript> <%- if luci.sys.process.info("uid") == 0 and luci.sys.user.getuser("root") and not luci.sys.user.getpasswd("root") and category ~= "failsafe" then -%> - <div class="errorbox"> - <strong><%:No password set!%></strong><br /> - <%:There is no password set on this router. Please configure a root password to protect the web interface and enable SSH.%><br /> - <a href="<%=pcdata(luci.dispatcher.build_url("admin/system/admin"))%>"><%:Go to password configuration...%></a> + <div class="alert-message warning"> + <h4><%:No password set!%></h4> + <p><%:There is no password set on this router. Please configure a root password to protect the web interface and enable SSH.%></p> + <div class="right"><a class="btn" href="<%=url("admin/system/admin")%>"><%:Go to password configuration...%></a></div> </div> <%- end -%> |