From db8e5858bfd7d5cae17949a977f87289f5b9ac29 Mon Sep 17 00:00:00 2001 From: Steven Barth Date: Fri, 8 Aug 2008 22:10:17 +0000 Subject: Reworked Fledermaus Theme --- .../htdocs/luci-static/fledermaus/cascade.css | 518 +++++++++++++-------- .../htdocs/luci-static/fledermaus/fledermaus.png | Bin 0 -> 7321 bytes .../luasrc/view/themes/fledermaus/footer.htm | 4 +- .../luasrc/view/themes/fledermaus/header.htm | 150 +++--- 4 files changed, 422 insertions(+), 250 deletions(-) create mode 100644 themes/fledermaus/htdocs/luci-static/fledermaus/fledermaus.png diff --git a/themes/fledermaus/htdocs/luci-static/fledermaus/cascade.css b/themes/fledermaus/htdocs/luci-static/fledermaus/cascade.css index 89db2e53b..0ab856fc3 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 new file mode 100644 index 000000000..852e9d0c0 Binary files /dev/null and b/themes/fledermaus/htdocs/luci-static/fledermaus/fledermaus.png differ diff --git a/themes/fledermaus/luasrc/view/themes/fledermaus/footer.htm b/themes/fledermaus/luasrc/view/themes/fledermaus/footer.htm index 3819b50c6..d1a8d43fe 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$ -%> +
-
-
<%=luci.__appname__ .. " " .. luci.__version__%> - Lua Configuration Interface
+
Powered by <%= luci.__appname__ .. " " .. luci.__version__%>
diff --git a/themes/fledermaus/luasrc/view/themes/fledermaus/header.htm b/themes/fledermaus/luasrc/view/themes/fledermaus/header.htm index a6ec5b811..515eaabe0 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") -%> + +-%> + + @@ -42,24 +44,32 @@ require("luci.http").prepare_content("text/html") <%= hostname .. ( (node and node.title) and ' - ' .. node.title or '') %> - LuCI + + - - + + -
-<%:path%>: <% +
+<%:path%>: <% local c = tree local url = controller for k,v in pairs(request) do @@ -72,43 +82,50 @@ end %>
-
-
-<% +
+ <% end end end -%> +%>
-
-
<%:webui%> -
    <% - for k,node in pairs(tree.nodes) do - if node.title then %> - class="yellowtext"<%end%>><%=node.title%> -<% end - end%> -
-
- <% - 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 +
+
    <% + for k,node in pairs(tree.nodes) do + if node.title then %> + class="active"<%end%>><%=node.title%> +<% end + end%> +
+
+ + <% + 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 - %> -
<%:config%> + end + %> +
+
<% if ucic > 0 then %> - <% submenu("/" .. category .. "/uci/", tree.nodes[category].nodes["uci"]) -%> + <%:unsavedchanges%>: <%=ucic%> + <% submenu("/" .. category .. "/uci/", tree.nodes[category].nodes["uci"]) -%> <% else %> -
    -
  • <%:changes%>: 0
    • -
+ <%:changes%>: 0 <% end %>
- <% end %>
-
+ <% end %> + +
+
+
-- cgit v1.2.3