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=01ccb1e1adf8e0fddd61119d37685f51a63926db;hp=824b04ba4b0172a69fb7419a6877add434f0a363;hb=a81e62298285bb283aa87c49e9b663f2da2c198e;hpb=bd3d20708134c3a7622269f71d13ccb70ac0dece 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 824b04ba4..01ccb1e1a 100644 --- a/themes/openwrt.org/htdocs/luci-static/openwrt.org/cascade.css +++ b/themes/openwrt.org/htdocs/luci-static/openwrt.org/cascade.css @@ -1,18 +1,46 @@ -* { - margin: 0; - padding: 0; +@charset "utf-8"; + +@media all { + +html { + min-height: 100%; + height: auto; } body { + color: #ffffff; background-color: #4a6b7c; background-image: url(bg.jpg); background-position: bottom center; - background-attachment: fixed; background-repeat: repeat-x; - color: #ffffff; font-family: Verdana, Arial, sans-serif; - font-size: 100%; + font-size: 101%; line-height: 100%; + padding-bottom: 1.5em; +} + +* { + 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 { @@ -20,136 +48,301 @@ code { white-space: pre; } -div#content ul { +#maincontent ul { margin-left: 2em; } +.warning { + 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 { min-height: 98px; - background-image: url(header.jpg); + background-image: url(header.png); 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; +} + +ul.dropdowns li li { + float: none; + position: relative; +} + +ul.dropdowns li a { + display: block; +} + +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; +} + +textarea#syslog { + width: 98%; + min-height: 500px; + border: 3px solid #cccccc; + padding: 5px; + font-family: monospace; } -#content { +#maincontent { clear: both; width: 80%; margin: 0 auto; @@ -162,20 +355,26 @@ div#content ul { font-size: 80%; } -#content h1 { - margin: 0.25em 0 0.5em 0; +#maincontent h2 { font-size: 150%; - font-weight: normal; + font-family: Trebuchet MS, Verdana, sans-serif; + font-weight: bold; + margin: 0.25em 0 0.7em 0; + border-bottom: 1px solid; + padding-top: 10px; + padding-bottom: 4px; } -#content h2 { - margin: 0.5em 0; - font-size: 120%; - font-weight: normal; - text-decoration: underline; +#maincontent h3 { + margin: 0.5em 0 1.1em 0; + font-size: 125%; + font-weight: bold; + font-style: italic; + font-family: Trebuchet MS, Verdana, sans-serif; + color: #27408B; } -#content p { +#maincontent p { margin-bottom: 1em; } @@ -184,6 +383,16 @@ div#content ul { padding: 0.5em 1em; border: 1px dotted #555555; background-color: #ffffff; + color: #000000; +} + +.cbi-section legend { + font-size: 110%; + font-weight: bold; + height: 1em; + padding: 0 0.25em; + background-color: transparent; + color: #555555; } .cbi-section h2 { @@ -191,31 +400,58 @@ div#content ul { } .cbi-section h3 { - height: 1em; - font-size: 120%; + text-decoration: none !important; + font-weight: bold !important; + color: #555555 !important; + margin: 0.25em !important; + font-size: 100% !important; } .cbi-section-descr { margin-bottom: 0.5em; + 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, @@ -230,6 +466,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; + text-indent: 17px; +} + +input.cbi-input-password { + background: url('../resources/cbi/key.gif') no-repeat scroll 1px center; + background-color: inherit; + color: #000000; + text-indent: 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; @@ -241,17 +563,33 @@ 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; font-size: 90%; + 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 { padding: 0 0.25em; border-left: 1px solid #666666; + text-align: left; } table.smalltext tr td { @@ -260,37 +598,66 @@ 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; + line-height: 1.8em; } 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%; + display: inline; } div.cbi-section-create { clear: left; + white-space: nowrap; + vertical-align: top; +} + +div.cbi-tblsection-create { + border-bottom: 1px dotted #bbbbbb; +} + +div.cbi-section-create .cbi-button { + margin: 0.25em; +} + +input.cbi-section-create-name { + margin-right: -0.25em; } div.cbi-map-descr { @@ -298,23 +665,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; } -div.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 { @@ -337,6 +711,81 @@ td.cbi-section-table-optionals { padding-top: 1em; } +.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; +} + +ul.cbi-tabmenu { + padding: 3px 0; + margin-left: 0 !important; + margin-bottom: -1px; + list-style-type: none; +} + +ul.cbi-tabmenu li.cbi-tab, +ul.cbi-tabmenu li.cbi-tab-disabled { + display: inline; + margin: 0; +} + +ul.cbi-tabmenu li.cbi-tab a, +ul.cbi-tabmenu li.cbi-tab-disabled a { + text-decoration: none; + padding: 3px 7px; + margin-right: 3px; + border: 1px outset #000000; + border-bottom: none; + background-color: #EEEEEE; + color: #BBBBBB; +} + +ul.cbi-tabmenu li a:hover { + color: #000000; +} + +ul.cbi-tabmenu li.cbi-tab a { + position: relative; + top: 1px; + padding-top: 4px; + color: #000000; + background-color: #FFFFFF; +} + +div.cbi-tab-descr { + background-image: url(/luci-static/resources/cbi/help.gif); + background-position: 0.25em 50%; + background-repeat: no-repeat; + border-bottom: 1px solid #CCCCCC; + margin: 0.25em 0.25em 2em; + padding: 0.5em 0.5em 0.5em 2em; +} + .right { text-align: right; } @@ -348,61 +797,53 @@ 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%; } - -/* obligatory IE6 Voodoo Code */ -* html body { - padding-left: 50% !important; -} - -* html div#header { - margin-left: -100% !important; +.inline { + display: inline; } -* html div.menubar { - margin-left: -100% !important; - width: 200% !important; -} - -* html div#content { - margin-left: -80% !important; - width: 160% !important; +.error500 { + white-space: normal; + border: 1px dotted #ff0000; + background-color: #ffffff; + color: #000000; + padding: 0.5em; } -* 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; +#memorybar { + width: 200px; + height: 8px; + border: 1px solid #bbb; + color: black; + background-color: red; } -* html div.mainmenu div.hover ul { - margin-left: 0; +#memfree, #membuffers, #memcached { + float: right; + border: 1px solid #bbb; + height: 6px; } -* 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; +#memfree { + background-color: green; + color: black; } -* html div.mainmenu li { - height: 1em !important; - width: 10em !important; +#membuffers { + background-color: yellow; + color: black; } -* html .mainmenu { - height: 1.8em; +#memcached { + background-color: #ffa500; + color: black; } -* html div.cbi-value-description { - margin-left: 40%; }