X-Git-Url: http://git.openwrt.org/?p=project%2Fluci.git;a=blobdiff_plain;f=themes%2Fopenwrt.org%2Fhtdocs%2Fluci-static%2Fopenwrt.org%2Fcascade.css;h=85934d915f36c4693c54fa7c7c0eb092751642d4;hp=a022bccbf8240a6fd0abc1d66e6de21c4568e690;hb=9cacdbc05cf66bb452598b29d3ac57ea69cbadca;hpb=9a7c358cfb684970ae050681067e4f87a079cbc0 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 a022bccbf8..85934d915f 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 { +#modemenu li { float: right; + list-style: none; } -#content { +#savemenu { + float: right; + margin-right: 2em; +} + +.lang_de #submenu_admin_uci { + width: 12em; +} + +.lang_ru #submenu_admin_uci { + width: 11.5em; +} + +#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; } @@ -222,10 +431,13 @@ div#content ul { background-color: inherit; } +ul.cbi-apply { + font-size: 90%; +} + input[type=submit], input[type=reset], -input[type=image], -label { +input[type=image] { cursor: pointer; } @@ -250,6 +462,7 @@ select:hover, textarea:focus, textarea:hover { background-color: #ffffff; + color: #000000; } select, @@ -267,24 +480,28 @@ td input[type=password] { 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-key { +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; } @@ -292,6 +509,7 @@ 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; } @@ -300,6 +518,7 @@ 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; } @@ -308,6 +527,7 @@ 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; } @@ -316,6 +536,7 @@ 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; } @@ -324,6 +545,7 @@ 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; } @@ -332,6 +554,7 @@ 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; } @@ -353,6 +576,7 @@ form > div > input[type=reset] { table.smalltext { background: #f5f5f5; + color: #000000; border-top: 1px solid #666666; border-right: 1px solid #666666; border-bottom: 1px solid #666666; @@ -365,6 +589,7 @@ table.smalltext { table.smalltext tr:hover td { background-color: #bbddee; + color: #000000; } table.smalltext tr th { @@ -379,12 +604,18 @@ table.smalltext tr td { border-left: 1px solid #666666; } -.cbi-rowstyle-1 { +table.cbi-section-table .cbi-rowstyle-1, +table.cbi-section-table .cbi-rowstyle-1 * { background-color: #eeeeff; + color: #000000; } -.cbi-rowstyle-2 { +.cbi-section .cbi-rowstyle-1 h3 { + background-color: #eeeeff; + color: #555555; +} +.cbi-rowstyle-2 { } div.cbi-value { @@ -396,10 +627,7 @@ div.cbi-value { div.cbi-value:hover { background: #f8f8f8; -} - -div.cbi-value:last-child { - border: none; + color: #000000; } .cbi-value-title { @@ -409,7 +637,8 @@ div.cbi-value:last-child { div.cbi-value-field { width: 58%; - margin: 0.25em 0 0.25em 40%; + margin-left: 40%; + padding: 0.25em 0; } div.cbi-value-description { @@ -417,18 +646,9 @@ div.cbi-value-description { display: inline; } -/* -div.cbi-value-field > div.cbi-value-description { - display: none; -} - -div.cbi-value:hover div.cbi-value-field > div.cbi-value-description { - display: block; -} -*/ - div.cbi-section-create { clear: left; + white-space: nowrap; } div.cbi-map-descr { @@ -436,8 +656,8 @@ 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 { @@ -445,9 +665,17 @@ div.cbi-section-remove { } .cbi-section-node { - CLEAR: Both; - border: 1px dotted #bbbbbb; + 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 table div { padding-bottom: 0; + border-bottom: none; } .cbi-section-node div.cbi-section-table-row { @@ -481,7 +709,27 @@ td.cbi-section-table-optionals { div.cbi-error { font-size: 95%; font-weight: bold; - color: #FF0000; + 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 { @@ -495,7 +743,9 @@ div.cbi-error { text-align: right; } -.luci a { +.luci a:link, +.luci a:visited { + background-color: transparent; color: #666666; text-decoration: none; font-size: 70%; @@ -507,38 +757,44 @@ div.cbi-error { .error500 { white-space: normal; - border: 1px dotted #FF0000; - background-color: #FFFFFF; + 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; } @@ -547,45 +803,18 @@ div.cbi-error { 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.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.mainmenu li { - height: 1em !important; - width: 10em !important; -} - -* html .mainmenu { - height: 1.8em; -} - * html div.cbi-value-description { margin-left: 40%; } + +}