X-Git-Url: https://git.archive.openwrt.org/?p=project%2Fluci.git;a=blobdiff_plain;f=themes%2Fopenwrt.org%2Fhtdocs%2Fluci-static%2Fopenwrt.org%2Fcascade.css;h=9edc15eeea9e1a2c5808480427f1672e58a3425f;hp=c699af6a913a2b2519d4af35a6c3db3c65e9d073;hb=86b389f6eac17be4b64dcc3c253fa6b6ee032e37;hpb=4e587d53a882be462f32e9e4bf03d87ed216871d diff --git a/themes/openwrt.org/htdocs/luci-static/openwrt.org/cascade.css b/themes/openwrt.org/htdocs/luci-static/openwrt.org/cascade.css index c699af6a9..9edc15eee 100644 --- a/themes/openwrt.org/htdocs/luci-static/openwrt.org/cascade.css +++ b/themes/openwrt.org/htdocs/luci-static/openwrt.org/cascade.css @@ -1,8 +1,8 @@ -* { - margin: 0; - padding: 0; -} +@charset "utf-8"; +@media all { + +html, body { background-color: #4a6b7c; background-image: url(bg.jpg); @@ -10,36 +10,72 @@ body { background-attachment: fixed; background-repeat: repeat-x; color: #ffffff; +} + +body { font-family: Verdana, Arial, sans-serif; - font-size: 100%; + font-size: 101%; line-height: 100%; } +* { + margin: 0; + padding: 0; +} + +abbr, +acronym { + font-style: normal; + font-variant: normal; +} + +abbr[title], +acronym[title] { + border-bottom: 1px dotted; + cursor: help; +} + +a:link abbr[title], +a:visited abbr[title], +a:link acronym[title], +a:visited acronym[title] { + cursor: pointer; +} + code { font-family: monospace; white-space: pre; } -div#content ul { +#maincontent ul { margin-left: 2em; } .warning { - color: red !important; + color: red; + background-color: white; font-weight: bold; } .clear { clear: both; - height: 1px; } +.skiplink, +.navigation, .hidden { - display: none; + position: absolute; + left: -1000px; + top: -1000px; + width: 0px; + height: 0px; + overflow: hidden; + display: inline; } .error { color: #ff0000; + background-color: white; } #header { @@ -48,113 +84,273 @@ div#content ul { background-repeat: no-repeat; background-position: left center; background-color: #557788; + color: #ffffff; text-align: right; } -#header .info { - padding: 1em 1em; +#header h1 { + padding: 1em 1em 0 1em; +} + +#header p { + padding: 0 1em 1em 1em; +} + +#header h1, +#header p { font-size: 70%; + font-weight: normal; line-height: 160%; + text-align: right; } -#header .title { - display: none; +ul.dropdowns { + float: left; + margin: 0; + padding: 0; + width: auto; + list-style: none; } -.pathbar { - display: none; +html>body ul.dropdowns { + position: relative; } -.menubar { - width: 100%; - min-height: 1.8em; - background: #000000; - color: #ffffff; +ul.dropdowns li, +ul.dropdowns ul { + margin: 0; + padding: 0; + list-style: none; } -.mainmenu { +ul.dropdowns li { float: left; - width: auto; - min-height: 1.8em; + position: relative; + white-space: nowrap; +} + +ul.dropdowns li ul { + position: absolute; + z-index: 1000; + top: auto; + min-width: 10em; +} + +* html ul.dropdowns li ul { + width: 10em; +} + +ul.dropdowns li li { + float: none; + position: relative; +} + +* html ul.dropdowns li li { + clear: both; + float: left; +} + +* html ul.dropdowns li li { + width: 100%; +} + +ul.dropdowns li a { + display: block; +} + +* html ul.dropdowns li li a { + height: 1%; +} + +ul.dropdowns ul li ul { + top: 0; +} + +ul.dropdowns li ul, +ul.dropdowns li.over ul ul, +ul.dropdowns li.focus ul ul, +ul.dropdowns li:hover ul ul, +ul.dropdowns li.over ul ul ul, +ul.dropdowns li.focus ul ul ul, +ul.dropdowns li:hover ul ul ul, +ul.dropdowns li.over ul ul ul ul, +ul.dropdowns li.focus ul ul ul ul, +ul.dropdowns li:hover ul ul ul ul { + left: -3000px; +} + +ul.dropdowns li.over ul, +ul.dropdowns li.focus ul, +ul.dropdowns li:hover ul { + left: 0; +} + +ul.dropdowns ul li.over ul, +ul.dropdowns ul li.focus ul, +ul.dropdowns ul li:hover ul, +ul.dropdowns ul ul li.over ul, +ul.dropdowns ul ul li.focus ul, +ul.dropdowns ul ul li:hover ul, +ul.dropdowns ul ul ul li.over ul, +ul.dropdowns ul ul ul li.focus ul, +ul.dropdowns ul ul ul li:hover ul { + left: 100%; +} + +#menubar { + position: relative; + width: 100%; background: #000000; color: #ffffff; } -.mainmenu div { - float: left; +#menubar .warning { + color: red; + background-color: #557788; } -.mainmenu li { - white-space: nowrap; +#menubar ul.dropdowns { + min-height: 1.8em; + background: #000000; + color: #ffffff; } -.mainmenu div ul { - display: none; - position: absolute; +#menubar ul.dropdowns li ul { background: #000000; color: #ffffff; border-width: 0 1px 1px 1px; border-style: solid; border-color: #444444; - list-style-type: none; -} - -.mainmenu ul li:hover > ul, -.mainmenu div:hover > ul { - display: block; } -.mainmenu ul li > ul { - left: 100%; - margin-top: -1.8em; +#menubar ul.dropdowns ul li ul { border-width: 1px; } -.modemenu a, -.mainmenu a { +html #menubar a:link, +html #menubar a:visited { + position: relative; display: block; padding: 0.5em; + background: #000000; color: #ffffff; text-decoration: none; font-size: 80%; + font-weight: normal; } -.mainmenu .active a, -.modemenu .active a { + +html #menubar a:link:hover, +html #menubar a:visited:hover, +html #menubar a:link:active, +html #menubar a:visited:active, +#menubar a:link:focus, +#menubar a:visited:focus { + background: #000000; color: #ffff00; font-weight: bold; } -.mainmenu li:hover > span > a, -.mainmenu div:hover > a { +html #menubar a:link.active, +html #menubar a:visited.active, +html #menubar a:link.preactive, +html #menubar a:visited.preactive { + background: #000000; + color: #ffff00; font-weight: bold; } -.modemenu a:hover, -.modemenu a:focus, -.mainmenu a:hover, -.mainmenu a:focus { - color: #ffff00; +html #menubar a:link.warning, +html #menubar a:visited.warning { + background: #000000; + color: red; font-weight: bold; } -.mainmenu div.preactive > a { - color: #ffff00; +#menubar ul.dropdowns li.over>a, +#menubar ul.dropdowns li.focus>a, +#menubar ul.dropdowns li:hover>a { font-weight: bold; } -.modemenu ul { +.lang_de #submenu_mini_system { min-width: 13.3em; } +* html .lang_de #submenu_mini_system { width: 13.3em; } + +.lang_pt-br #submenu_mini_network { min-width: 14em; } +* html .lang_pt-br #submenu_mini_network { width: 14em; } + +.lang_pt-br #submenu_mini_system { min-width: 11.5em; } +* html .lang_pt-br #submenu_mini_system { width: 11.5em; } + +.lang_ru #submenu_mini_system { min-width: 18em; } +* html .lang_ru #submenu_mini_system { width: 18em; } + +.lang_pt-br #submenu_admin_index { min-width: 11em; } +* html .lang_pt-br #submenu_admin_index { width: 11em; } + +.lang_ru #submenu_admin_index { min-width: 15.5em; } +* html .lang_ru #submenu_admin_index { width: 15.5em; } + +.lang_ru #submenu_admin_status { min-width: 10.5em; } +* html .lang_ru #submenu_admin_status { width: 10.5em; } + +.lang_de #submenu_admin_system { min-width: 13.3em; } +* html .lang_de #submenu_admin_system { width: 13.3em; } + +.lang_fr #submenu_admin_system { min-width: 14.5em; } +* html .lang_fr #submenu_admin_system { width: 14.5em; } + +.lang_pt-br #submenu_admin_system { min-width: 11.5em; } +* html .lang_pt-br #submenu_admin_system { width: 11.5em; } + +.lang_ru #submenu_admin_system { min-width: 18em; } +* html .lang_ru #submenu_admin_system { width: 18em; } + +#submenu_admin_services_chillispot { min-width: 15.5em; } +* html #submenu_admin_services_chillispot { width: 15.5em; } + +#submenu_admin_services_coovachilli { min-width: 15em; } +* html #submenu_admin_services_coovachilli { width: 15em; } + +.lang_ru #submenu_admin_network_routes { min-width: 15.3em; } +* html .lang_ru #submenu_admin_network_routes { width: 15.3em; } + +#submenu_admin_network_firewall { min-width: 14em; } +* html #submenu_admin_network_firewall { width: 14em; } + +.lang_de #submenu_admin_network_firewall { min-width: 16.5em; } +* html .lang_de #submenu_admin_network_firewall { width: 16.5em; } + +.lang_pt-br #submenu_admin_network_firewall { min-width: 15em; } +* html .lang_pt-br #submenu_admin_network_firewall { width: 15em; } + +#modemenu { width: auto; background: #000000; color: #ffffff; - list-style-type: none; + list-style: none; + margin-right: 1px; +} + +#modemenu li { + float: right; + list-style: none; } -.modemenu li { +#savemenu { float: right; + margin-right: 2em; +} + +.lang_de #submenu_admin_uci { + width: 12em; +} + +.lang_ru #submenu_admin_uci { + width: 11.5em; } -#content { +#maincontent { clear: both; width: 80%; margin: 0 auto; @@ -167,20 +363,20 @@ div#content ul { font-size: 80%; } -#content h1 { +#maincontent h2 { margin: 0.25em 0 0.5em 0; font-size: 150%; font-weight: normal; } -#content h2 { +#maincontent h3 { margin: 0.5em 0; font-size: 120%; font-weight: normal; text-decoration: underline; } -#content p { +#maincontent p { margin-bottom: 1em; } @@ -189,6 +385,7 @@ div#content ul { padding: 0.5em 1em; border: 1px dotted #555555; background-color: #ffffff; + color: #000000; } .cbi-section legend { @@ -196,6 +393,17 @@ div#content ul { font-weight: bold; height: 1em; padding: 0 0.25em; + background-color: transparent; + color: #555555; +} + +*+html .cbi-section legend { + background-color: #ffffff; + color: #555555; +} + +* html .cbi-section legend { + background-color: #ffffff; color: #555555; } @@ -206,6 +414,7 @@ div#content ul { .cbi-section h3 { height: 1.5em; font-size: 90%; + background-color: #ffffff; color: #555555; } @@ -214,23 +423,46 @@ div#content ul { font-size: 95%; } +.cbi-title-ref { + color: inherit; + text-decoration: none; + padding-right: 18px; + background: url('../resources/cbi/link.gif') no-repeat scroll right center; + background-color: inherit; +} + +ul.cbi-apply { + font-size: 90%; +} + input[type=submit], input[type=reset], -label { +input[type=image] { cursor: pointer; } + select, input, textarea { background: #eeeeee; color: #000000; - border: 1px solid #000000; + border-width: 1px; + border-color: #000000; +} + +input[type=image] { + border: none; } input:focus, -textarea:focus { - background: #ffffff; +input:hover, +select:focus, +select:hover, +textarea:focus, +textarea:hover { + background-color: #ffffff; + color: #000000; } select, @@ -245,6 +477,92 @@ td input[type=password] { width: 99%; } +input.cbi-input-user { + background: url('../resources/cbi/user.gif') no-repeat scroll 1px center; + background-color: inherit; + color: #000000; + padding-left: 17px; +} + +input.cbi-input-password { + background: url('../resources/cbi/key.gif') no-repeat scroll 1px center; + background-color: inherit; + color: #000000; + padding-left: 17px; +} + +input.cbi-input-find { + background: url('../resources/cbi/find.gif') no-repeat scroll 1px center; + background-color: inherit; + color: #000000; + padding-left: 17px; +} + +input.cbi-input-reload { + background: url('../resources/cbi/reload.gif') no-repeat scroll 1px center; + background-color: inherit; + color: #000000; + padding-left: 17px; +} + +input.cbi-input-add, +input.cbi-button-add { + background: url('../resources/cbi/add.gif') no-repeat scroll 1px center; + background-color: inherit; + color: #000000; + padding-left: 17px; + padding-right: 1px; +} + +input.cbi-input-fieldadd, +input.cbi-button-fieldadd { + background: url(../resources/cbi/fieldadd.gif) no-repeat scroll 1px center; + background-color: inherit; + color: #000000; + padding-left: 17px; + padding-right: 1px; +} + +input.cbi-input-reset, +input.cbi-button-reset { + background: url('../resources/cbi/reset.gif') no-repeat scroll 1px center; + background-color: inherit; + color: #000000; + padding-left: 17px; + padding-right: 1px; +} + +input.cbi-input-save, +input.cbi-button-save { + background: url('../resources/cbi/save.gif') no-repeat scroll 1px center; + background-color: inherit; + color: #000000; + padding-left: 17px; + padding-right: 1px; +} + +input.cbi-input-apply, +input.cbi-button-apply { + background: url('../resources/cbi/apply.gif') no-repeat scroll 1px center; + background-color: inherit; + color: #000000; + padding-left: 17px; + padding-right: 1px; +} + +input.cbi-input-remove, +div.cbi-section-remove input { + background: url('../resources/cbi/remove.gif') no-repeat scroll 1px center; + background-color: inherit; + color: #000000; + padding-left: 17px; + padding-right: 1px; +} + +div.cbi-section-remove input { + border-bottom: none; +} + textarea { margin-left: -1px; margin-bottom: 0.5em; @@ -256,8 +574,14 @@ form > div > input[type=reset] { margin-left: 0.5em; } +table td, +table th { + color: #000000; +} + table.smalltext { background: #f5f5f5; + color: #000000; border-top: 1px solid #666666; border-right: 1px solid #666666; border-bottom: 1px solid #666666; @@ -265,10 +589,12 @@ table.smalltext { width: 80%; margin-left: auto; margin-right: auto; + border-collapse: collapse; } table.smalltext tr:hover td { background-color: #bbddee; + color: #000000; } table.smalltext tr th { @@ -283,45 +609,52 @@ table.smalltext tr td { border-left: 1px solid #666666; } +table.cbi-section-table .cbi-rowstyle-1, +table.cbi-section-table .cbi-rowstyle-1 * { + background-color: #eeeeff; + color: #000000; +} + +.cbi-section .cbi-rowstyle-1 h3 { + background-color: #eeeeff; + color: #555555; +} + +.cbi-rowstyle-2 { + color: #000000; +} + div.cbi-value { clear: left; - padding: 0.25em; + vertical-align: middle; + padding-left: 0.25em; border-bottom: 1px dotted #bbbbbb; } div.cbi-value:hover { background: #f8f8f8; -} - -div.cbi-value:last-child { - border: none; + color: #000000; } .cbi-value-title { float: left; width: 40%; - margin: 0.25em 0; } div.cbi-value-field { width: 58%; - margin: 0.25em 0 0.25em 40%; + margin-left: 40%; + padding: 0.25em 0; } div.cbi-value-description { font-size: 90%; -} - -div.cbi-value-field > div.cbi-value-description { - display: none; -} - -div.cbi-value:hover div.cbi-value-field > div.cbi-value-description { - display: block; + display: inline; } div.cbi-section-create { clear: left; + white-space: nowrap; } div.cbi-map-descr { @@ -329,23 +662,30 @@ div.cbi-map-descr { } div.cbi-optionals { - margin: 0.5em 0; - padding: 0 0.25em; + padding: 0.25em; + border-bottom: 1px dotted #bbbbbb; } div.cbi-section-remove { float: right; } -div.cbi-section-remove input { - border-color: #bbbbbb; +.cbi-section-node { + clear: both; + border-top: 1px dotted #bbbbbb; + border-left: 1px dotted #bbbbbb; + border-right: 1px dotted #bbbbbb; border-bottom: none; + padding-bottom: 0; } -.cbi-section-node { - clear: both; - border: 1px dotted #bbbbbb; +.cbi-section-node table div { padding-bottom: 0; + border-bottom: none; +} + +.cbi-section-node div.cbi-section-table-row { + margin: 0.25em; } table.cbi-section-table { @@ -368,6 +708,44 @@ td.cbi-section-table-optionals { padding-top: 1em; } +div.cbi-section-create { + border-bottom: 1px dotted #bbbbbb; +} + +div.cbi-section-create .cbi-button { + margin: 0.25em; +} + +.cbi-value-helpicon img { + vertical-align: bottom; +} + +div.cbi-error { + font-size: 95%; + font-weight: bold; + color: #ff0000; + background-color: #ffffff; +} + +td.cbi-value-error { + border-color: red; +} + +.cbi-value-error input, +.cbi-value-error select { + color: red; + background-color: #ffcccc; +} + +.cbi-section-error { + color: red; + background-color: white; + font-size: 95%; + border: 1px dotted red; + margin: 3px; + padding: 3px; +} + .right { text-align: right; } @@ -379,7 +757,9 @@ td.cbi-section-table-optionals { text-align: right; } -.luci a { +.luci a:link, +.luci a:visited { + background-color: transparent; color: #666666; text-decoration: none; font-size: 70%; @@ -389,33 +769,46 @@ td.cbi-section-table-optionals { display: inline; } +.error500 { + white-space: normal; + border: 1px dotted #ff0000; + background-color: #ffffff; + color: #000000; + padding: 0.5em; +} + #memorybar { - width:200px; - height:8px; - border:1px solid #bbb; - background-color:red + width: 200px; + height: 8px; + border: 1px solid #bbb; + color: black; + background-color: red; } #memfree, #membuffers, #memcached { - float:right; - border:1px solid #bbb; - height:6px; + float: right; + border: 1px solid #bbb; + height: 6px; } #memfree { - background-color:green; + background-color: green; + color: black; } #membuffers { - background-color:yellow; + background-color: yellow; + color: black; } #memcached { - background-color:orange; + background-color: #ffa500; + color: black; } /* obligatory IE6 Voodoo Code */ + * html body { padding-left: 50% !important; } @@ -424,45 +817,34 @@ td.cbi-section-table-optionals { margin-left: -100% !important; } -* html div.menubar { +* html div#menubar { margin-left: -100% !important; width: 200% !important; } -* html div#content { +* html div#maincontent { margin-left: -80% !important; width: 160% !important; } -* html div.mainmenu div.hover ul, -* html div.mainmenu div li.hover ul, -* html div.mainmenu div li li.hover ul, -* html div.mainmenu div li li li.hover ul, -* html div.mainmenu div li li li li.hover ul { - display: block !important; - margin-left: 3em; -} - -* html div.mainmenu div.hover ul { - margin-left: 0; +* html div.cbi-value-description { + width: auto !important; } -* html div.mainmenu .hover ul ul, -* html div.mainmenu .hover ul ul ul, -* html div.mainmenu .hover ul ul ul ul, -* html div.mainmenu .hover ul ul ul ul ul { - display: none !important; +* html div.cbi-value-field { + margin-left: 0 !important; + width: 100% !important; } -* html div.mainmenu li { - height: 1em !important; - width: 10em !important; +* html .cbi-input-text, +* html .cbi-input-user, +* html .cbi-input-select, +* html .cbi-input-password { + width: 50% !important; } -* html .mainmenu { - height: 1.8em; +* html div.cbi-page-actions { + text-align: right !important; } -* html div.cbi-value-description { - margin-left: 40%; }