diff options
Diffstat (limited to 'themes')
-rw-r--r-- | themes/fledermaus/htdocs/luci-static/fledermaus/cascade.css | 518 | ||||
-rw-r--r-- | themes/fledermaus/htdocs/luci-static/fledermaus/fledermaus.png | bin | 0 -> 7321 bytes | |||
-rw-r--r-- | themes/fledermaus/luasrc/view/themes/fledermaus/footer.htm | 4 | ||||
-rw-r--r-- | themes/fledermaus/luasrc/view/themes/fledermaus/header.htm | 150 |
4 files changed, 422 insertions, 250 deletions
diff --git a/themes/fledermaus/htdocs/luci-static/fledermaus/cascade.css b/themes/fledermaus/htdocs/luci-static/fledermaus/cascade.css index 89db2e53be..0ab856fc31 100644 --- a/themes/fledermaus/htdocs/luci-static/fledermaus/cascade.css +++ b/themes/fledermaus/htdocs/luci-static/fledermaus/cascade.css @@ -1,312 +1,412 @@ -@charset "utf-8"; +* { + margin: 0; + padding: 0; +} body { + background-color: #e5e6ec; + color: #ffffff; font-family: Verdana, Arial, sans-serif; - background-color: #aaaaaa; + font-size: 100%; + line-height: 100%; } -h1 { - margin: 0%; - font-size: 1.4em; - font-weight: bold; - margin-bottom: 0.5em; +code { + font-family: monospace; + white-space: pre; } -h2 { - margin: 0%; - font-size: 1.2em; +div#content ul { + margin-left: 2em; +} + +.warning { + color: red !important; font-weight: bold; } -h3 { - margin: 0%; +.clear { + clear: both; + height: 1px; +} + +.hidden { + display: none; +} + +.error { + color: #ff0000; } #header { - padding: 0.2em; - height: 4.5em; - background-color: #262626; + min-height: 98px; + background-image: url(logo.png); + background-repeat: no-repeat; + background-position: left center; + background-color: #000000; + text-align: center; + border-bottom: 1px solid #dc0067; +} + +#header2 { + min-height: 98px; + background-image: url(fledermaus.png); + background-repeat: no-repeat; + background-position: right center; +} + +#header3 { + font-size: 2.6em; + font-family: serif; + color: #FFCB05; + letter-spacing: 0.35em; + font-weight: bold; + line-height: 1.4em; } -#columns { - border-left: 10.1em solid #262626; - border-right: 10.1em solid #262626; - display: block; - background-color: white; - padding: 0.1em; +#header4 { + font-size: 1.25em; + line-height: 1.2em; + letter-spacing: 0.2em; + color: white; } -#columnswrapper { - display: block; - margin-left: -10em; - margin-right: -10em; +.pathbar { + display: none; } -#content { - margin-left: 14em; - margin-right: 14em; +.menubar { + width: 100%; + min-height: 1.8em; + background: #000000; + color: #ffffff; +} + +.mainmenu { + float: left; + width: auto; + min-height: 1.8em; + background: #000000; + color: #ffffff; +} + +.mainmenu div { + float: left; +} + +.mainmenu li { + white-space: nowrap; +} + +.mainmenu div ul { + display: none; + position: absolute; + 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; - position: relative; - padding: 2px; - font-size: 0.8em; } -.headerlogo { - height: 4em; - padding: 5px; +.mainmenu ul li > ul { + left: 100%; + margin-top: -1.8em; + border-width: 1px; } -.headerlogo img { - height: 100%; +.modemenu a, +.mainmenu a { + display: block; + padding: 0.5em; + color: #ffffff; + text-decoration: none; + font-size: 80%; } -.headertitle { - font-size: 2.4em; - color: gray; - letter-spacing: 0.5em; - text-transform: lowercase; +.mainmenu .active a, +.modemenu .active a { + color: #ffff00; + font-weight: bold; } -.separator { - padding-left: 0.25em; +.mainmenu li:hover > span > a, +.mainmenu div:hover > a { font-weight: bold; - font-size: 0.8em; - line-height: 1.4em; } -.whitetext { - color: white; +.modemenu a:hover, +.modemenu a:focus, +.mainmenu a:hover, +.mainmenu a:focus { + color: #ffff00; + font-weight: bold; } -.yellowtext { - color: #ffcb05; +.mainmenu div.preactive > a { + color: #ffff00; + font-weight: bold; } -.magentatext { - color: #dc0065; +.modemenu ul { + width: auto; + background: #000000; + color: #ffffff; + list-style-type: none; } -.inheritcolor { - color: inherit; +.modemenu li { + float: right; } -.smalltext { - font-size: 0.8em; +#content { + clear: both; + width: 90%; + margin: 0 auto; + padding: 0.5em; + background: #f8f9fe; + color: #000000; + font-size: 80%; } -.yellow { - background-color: #ffcb05; +#content h1 { + margin: 0.25em 0 0.5em 0; + font-size: 150%; + font-weight: normal; } -.magenta { - background-color: #dc0065; +#content h2 { + margin: 0.5em 0; + font-size: 120%; + font-weight: normal; + text-decoration: underline; } -.nodeco { - text-decoration: none; +#content p { + margin-bottom: 1em; } -.redhover:hover { - color: red; +.cbi-section { + margin-bottom: 0.5em; + padding: 0.5em 1em; + border: 1px dotted #555555; + background-color: #f2f3f9; } -.bold { +.cbi-section legend { + font-size: 110%; font-weight: bold; + height: 1em; + padding: 0 0.25em; + color: #555555; } -.sidebar { - position: relative; - padding: 0.25em; - color: gray; - width: 9em; - font-weight: bold; +.cbi-section h2 { + margin: 0em 0 0.5em -0.5em !important; } -.separator a, .sidebar a { - color: inherit; - text-decoration: inherit; +.cbi-section h3 { + height: 1.5em; + font-size: 90%; + color: #555555; } -.separator a:hover, .sidebar a:hover { - color: red; +.cbi-section-descr { + margin-bottom: 0.5em; + font-size: 95%; } -.sidebar div { - padding-bottom: 0.5em; +input[type=submit], +input[type=reset], +label { + cursor: pointer; } -.sidebar ul { - font-size: 0.9em; - color: white; - list-style-type: none; - padding-left: 1em; - margin-top: 0%; +select, +input, +textarea { + background: #eeeeee; + color: #000000; + border: 1px solid #000000; } -.table { - display: table; +input:focus, +textarea:focus { + background: #f2f3f9; } -.table-row { - display: table-row; +select, +input[type=text], +input[type=password] { + width: 20em; } -.table-cell { - display: table-cell; +td select, +td input[type=text], +td input[type=password] { + width: 99%; } -.left { - float: left; - text-align: left; +textarea { + margin-left: -1px; + margin-bottom: 0.5em; } -.right { +form > div > input[type=submit], +form > div > input[type=reset] { float: right; - text-align: right; + margin-left: 0.5em; } -.clear { - clear: both; +table.smalltext { + background: #f5f5f5; + 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; } -.hidden { - display: none; +table.smalltext tr:hover td { + background-color: #bbddee; } -.inline { - display: inline; +table.smalltext tr th { + padding: 0 0.25em; + border-left: 1px solid #666666; + text-align: left; } -.code { - background: #f7f7f7; - border: 1px solid #d7d7d7; - margin: 1em 1.75em; - padding: 1em; +table.smalltext tr td { + padding: 0 0.25em; + border-top: 1px solid #666666; + border-left: 1px solid #666666; } -code { - display: block; - background: #f7f7f7; - border: 1px solid #d7d7d7; - margin: 1em 1.75em; - padding: 1em; - overflow: auto; - white-space: pre; +div.cbi-value { + clear: left; + padding: 0.25em; + border-bottom: 1px dotted #bbbbbb; } -.cbi-section { - margin-top: 1em; +div.cbi-value:hover { + background: #f8f8f8; } -.cbi-section-remove { - text-align: right; +div.cbi-value:last-child { + border: none; } -.cbi-value { - display: table-row; +.cbi-value-title { + float: left; + width: 40%; + margin: 0.25em 0; } -.cbi-value-title { - display: table-cell; - line-height: 1.75em; - font-weight: bold; - padding: 0.25em; +div.cbi-value-field { + width: 58%; + margin: 0.25em 0 0.25em 40%; } -.cbi-value-field { - display: table-cell; - text-align: left; - padding: 0.25em; - line-height: 1.75em; +div.cbi-value-description { + font-size: 90%; } -.cbi-value-field input, .cbi-value-field select, -.cbi-optionals select, .cbi-optionals input, -.cbi-section-remove input, .cbi-section-create input { - font-size: 0.8em; - margin: 0%; +div.cbi-value-field > div.cbi-value-description { + display: none; } -.cbi-section-descr { - padding-bottom: 1em; +div.cbi-value:hover div.cbi-value-field > div.cbi-value-description { + display: block; } -.cbi-value-description { - display: inline; - font-style: italic; - font-size: 0.8em; - padding: 0.25em; - margin-bottom: 0.5em; +div.cbi-section-create { + clear: left; } -.cbi-form-separator { - margin-top: 1em; +div.cbi-map-descr { + margin-bottom: 1em; } -.cbi-section-node { - display: table; - padding: 0.25em; - background: #f7f7f7; - border: 1px solid #d7d7d7; +div.cbi-optionals { + margin: 0.5em 0; + padding: 0 0.25em; } -.cbi-section-row { - display: table-row; +div.cbi-section-remove { + float: right; } -.cbi-section-row-head { - display: table-cell; - font-weight: bold; - padding: 0.25em; +div.cbi-section-remove input { + border-color: #bbbbbb; + border-bottom: none; } -.cbi-section-row-descr { - display: table-cell; - padding: 0.25em; - font-size: 0.8em; +.cbi-section-node { + clear: both; + border: 1px dotted #bbbbbb; + padding-bottom: 0; } -.cbi-section-node h3 { - margin-bottom: 0.5em; +table.cbi-section-table { + width: 100%; + font-size: 95%; } -.cbi-error { - color: red; - font-weight: bold; - font-size: 0.8em; - margin-bottom: 0.75em; +table.cbi-section-table th, +table.cbi-section-table td { + text-align: center; } -.cbi-optionals { - margin-top: 1em; - display: table-cell; +tr.cbi-section-table-descr th { + font-weight: normal; + font-size: 90%; } -.cbi-optionals option { - font-size: 0.8em; +td.cbi-section-table-optionals { + text-align: left !important; + padding-top: 1em; } -.error { - color: red; - font-weight: bold; +.right { + text-align: right; } -.ok { - color: green; - font-weight: bold; +.luci { + position: fixed; + bottom: 0; + left: 0; + text-align: right; +} + +.luci a { + color: #666666; + text-decoration: none; + font-size: 70%; +} + +.inline { + display: inline; } #memorybar { width:200px; - height:9px; + height:8px; border:1px solid #bbb; - background-color: #262626; + background-color:red } #memfree, #membuffers, #memcached { float:right; - border:1px solid #262626; - height:7px; + border:1px solid #bbb; + height:6px; } #memfree { @@ -314,10 +414,62 @@ code { } #membuffers { - background-color:#ffcb05; + background-color:yellow; } #memcached { - background-color:#dc0065; + background-color:orange; } + +/* obligatory IE6 Voodoo Code */ +* html body { + padding-left: 50% !important; +} + +* html div#header { + margin-left: -100% !important; +} + +* html div.menubar { + margin-left: -100% !important; + width: 200% !important; +} + +* html div#content { + 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%; +} diff --git a/themes/fledermaus/htdocs/luci-static/fledermaus/fledermaus.png b/themes/fledermaus/htdocs/luci-static/fledermaus/fledermaus.png Binary files differnew file mode 100644 index 0000000000..852e9d0c08 --- /dev/null +++ b/themes/fledermaus/htdocs/luci-static/fledermaus/fledermaus.png diff --git a/themes/fledermaus/luasrc/view/themes/fledermaus/footer.htm b/themes/fledermaus/luasrc/view/themes/fledermaus/footer.htm index 3819b50c61..d1a8d43fee 100644 --- a/themes/fledermaus/luasrc/view/themes/fledermaus/footer.htm +++ b/themes/fledermaus/luasrc/view/themes/fledermaus/footer.htm @@ -12,11 +12,11 @@ You may obtain a copy of the License at $Id$ -%> + <br class="clear" /> </div> - <div class="clear"></div> </div></div> </div> -<div class="separator magenta bold"><a href="<%=controller%>/about"><%=luci.__appname__ .. " " .. luci.__version__%> - Lua Configuration Interface</a></div> +<div class="luci separator black whitetext bold"><a href="<%=controller%>/about">Powered by <%= luci.__appname__ .. " " .. luci.__version__%></a></div> </body> </html> diff --git a/themes/fledermaus/luasrc/view/themes/fledermaus/header.htm b/themes/fledermaus/luasrc/view/themes/fledermaus/header.htm index a6ec5b8113..515eaabe00 100644 --- a/themes/fledermaus/luasrc/view/themes/fledermaus/header.htm +++ b/themes/fledermaus/luasrc/view/themes/fledermaus/header.htm @@ -19,21 +19,23 @@ local request = require("luci.dispatcher").context.path local category = request[1] local tree = luci.dispatcher.node() local cattree = category and luci.dispatcher.node(category) -local node = luci.dispatcher.context.dispatched +local node = luci.dispatcher.context.dispatched local hostname = luci.sys.hostname() local c = tree for i,r in ipairs(request) do - if c.nodes and c.nodes[r] then + if c.nodes and c.nodes[r] then c = c.nodes[r] c._menu_selected = true end end require("luci.i18n").loadc("default") - require("luci.http").prepare_content("text/html") -%><?xml version="1.0" encoding="utf-8"?> + +-%> + +<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> @@ -42,24 +44,32 @@ require("luci.http").prepare_content("text/html") <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" /> <meta http-equiv="content-script-type" content="text/javascript" /> <title><%= hostname .. ( (node and node.title) and ' - ' .. node.title or '') %> - LuCI</title> + + <!--[if lt IE 7]> + <script type="text/javascript"> + function setup_hover() { + function ie_hover(e) { + e.onmouseover = function() { this.className = "hover" } + e.onmouseout = function() { this.className = null } + } + + var lis = document.getElementById("mainmenu").getElementsByTagName("LI"); + var divs = document.getElementById("mainmenu").getElementsByTagName("DIV"); + + for( var i = 0; i < lis.length; i++ ) ie_hover( lis[i] ); + for( var i = 0; i < divs.length; i++ ) ie_hover( divs[i] ); + } + </script> + <![endif]--> </head> -<body> -<div id="header"> - <div class="headerlogo left"><img src="<%=media%>/logo.png" alt="<%=luci.config.brand.title%>" /></div> - <div class="whitetext smalltext right"> - <%=luci.config.brand.firmware%><br /> - <%=luci.config.brand.distro%><br /> - <%:load%>: <%=load1%> <%=load5%> <%=load15%><br /> - <%:hostname%>: <%=hostname%> - </div> - <div> - <span class="headertitle"><%=luci.config.brand.title%></span><br /> - <span class="whitetext bold"><%=luci.config.brand.subtitle%></span> - </div> -</div> +<body onload="window.setup_hover && setup_hover()"> +<div id="header"><div id="header2"> + <span id="header3">freifunk kamikaze</span><br /> + <span id="header4">now with even more bats and stuff</span> +</div></div> -<div class="separator yellow bold"> -<%:path%>: <% +<div class="pathbar separator black whitetext bold"> +<%:path%>: <% local c = tree local url = controller for k,v in pairs(request) do @@ -72,43 +82,50 @@ end %> </div> -<div id="columns"><div id="columnswrapper"> - <div class="sidebar left"> -<% +<div class="menubar"> + <div id="mainmenu" class="mainmenu"> +<%- local function submenu(prefix, node) - if not node._menu_selected or not node.nodes then + if not node.nodes then return false end - local index = {} + local index = {} + local count = 0 for k, n in pairs(node.nodes) do if n.title and n.target then table.insert(index, {name=k, order=n.order or 100}) + count = count + 1 end end - + table.sort(index, function(a, b) return a.order < b.order end) + + if count > 0 then %> <ul> - <% for j, v in pairs(index) do - local nnode = node.nodes[v.name] - local href = controller .. prefix .. v.name - href = (nnode.query) and href .. luci.http.build_querystring(nnode.query) or href + <%- for j, v in pairs(index) do + if #v.name > 0 then + local nnode = node.nodes[v.name] + local href = controller .. prefix .. v.name + href = (nnode.query) and href .. luci.http.build_querystring(nnode.query) or href %> <li> - <span<% if nnode._menu_selected then %> class="yellowtext"<%end%>><a href="<%=href%>"><%=nnode.title%></a></span> - <% submenu(prefix .. v.name .. "/", nnode) %> + <span<% if nnode._menu_selected then %> class="active"<%end%>><a href="<%=href%>"><%=nnode.title%></a></span> + <%- submenu(prefix .. v.name .. "/", nnode) %> </li> - <% end %> - </ul> -<% + <%- end %> + <%- end %> + </ul> +<%- + end end if cattree and cattree.nodes then - local index = {} + local index = {} for k, node in pairs(cattree.nodes) do table.insert(index, {name=k, order=node.order or 100}) end - + table.sort(index, function(a, b) return a.order < b.order end) for i, k in ipairs(index) do @@ -116,44 +133,47 @@ if cattree and cattree.nodes then if node.title and node.target then local href = controller.."/"..category.."/"..k.name href = (k.query) and href .. luci.http.build_querystring(k.query) or href %> - <div<% if node._menu_selected then %> class="yellowtext"<%end%>><a href="<%=controller%>/<%=category%>/<%=k.name%>"><%=node.title%></a> + <div<% if node._menu_selected then %> class="preactive"<%end%>><a href="<%=href%>"><%=node.title%></a> <%submenu("/" .. category .. "/" .. k.name .. "/", node)%> </div> <% end end end -%> +%> </div> - <div class="sidebar right"> - <div><%:webui%> - <ul><% - for k,node in pairs(tree.nodes) do - if node.title then %> - <li<% if request[1] == k then %> class="yellowtext"<%end%>><a href="<%=controller%>/<%=k%>"><%=node.title%></a></li> -<% end - end%> - </ul> - </div> - <% - if "admin" == request[1] then - local ucic = 0 - for i, j in pairs(require("luci.model.uci").changes()) do - for k, l in pairs(j) do - for m, n in pairs(l) do - ucic = ucic + 1; - end + <div class="modemenu"> + <ul><% + for k,node in pairs(tree.nodes) do + if node.title then %> + <li<% if request[1] == k then %> class="active"<%end%>><a href="<%=controller%>/<%=k%>"><%=node.title%></a></li> +<% end + end%> + </ul> + </div> + + <% + if tree.nodes[category] and tree.nodes[category].ucidata then + local ucic = 0 + for i, j in pairs(require("luci.model.uci").changes()) do + for k, l in pairs(j) do + for m, n in pairs(l) do + ucic = ucic + 1; end end - %> - <div><%:config%> + end + %> + <div class="mainmenu" style="float:right; margin-right:2em"> + <div> <% if ucic > 0 then %> - <% submenu("/" .. category .. "/uci/", tree.nodes[category].nodes["uci"]) -%> + <a class="warning" href="<%=controller%>/<%=category%>/uci/changes"><%:unsavedchanges%>: <%=ucic%></a> + <% submenu("/" .. category .. "/uci/", tree.nodes[category].nodes["uci"]) -%> <% else %> - <ul> - <li><%:changes%>: 0</li> - </ul> + <a href="#"><%:changes%>: 0</a> <% end %> </div> - <% end %> </div> - <div id="content"> + <% end %> + + <br class="clear" /> +</div> +<div id="content"> |