* luci/themes/openwrt-light: sync layout and code to openwrt.org theme

This commit is contained in:
Jo-Philipp Wich 2008-10-21 01:38:26 +00:00
parent fe5db50285
commit ca0de5ffb3
5 changed files with 510 additions and 271 deletions

View file

@ -1,14 +1,41 @@
@charset "utf-8";
@media all {
html,
body {
background-color: #4a6b7c;
color: #ffffff;
}
body {
font-family: Verdana, Arial, sans-serif;
font-size: 101%;
line-height: 100%;
}
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
body { abbr,
background-color: #4a6b7c; acronym {
color: #ffffff; font-style: normal;
font-family: Verdana, Arial, sans-serif; font-variant: normal;
font-size: 100%; }
line-height: 100%;
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 { code {
@ -16,134 +43,287 @@ code {
white-space: pre; white-space: pre;
} }
div#maincontent ul { #maincontent ul {
margin-left: 2em; margin-left: 2em;
} }
.warning { .warning {
color: red !important; color: red;
background-color: white;
font-weight: bold; font-weight: bold;
} }
.clear { .clear {
clear: both; clear: both;
height: 1px;
} }
.skiplink,
.navigation,
.hidden { .hidden {
display: none; position: absolute;
left: -1000px;
top: -1000px;
width: 0px;
height: 0px;
overflow: hidden;
display: inline;
} }
.error { .error {
color: #ff0000; color: #ff0000;
background-color: white;
} }
#header { #header {
background-color: #557788; background-color: #557788;
color: #ffffff;
text-align: right;
padding: 0.5em;
}
#header h1 {
display: inline;
}
#header p {
display: inline;
}
#header h1,
#header p {
font-size: 70%;
font-weight: normal;
line-height: 160%;
text-align: right; text-align: right;
} }
#header .info { ul.dropdowns {
padding: 1em 1em;
font-size: 70%;
line-height: 160%;
}
#header .title {
display: none;
}
.pathbar {
display: none;
}
.menubar {
width: 100%;
min-height: 1.8em;
background: #000000;
color: #ffffff;
}
.mainmenu {
float: left; float: left;
margin: 0;
padding: 0;
width: auto; width: auto;
min-height: 1.8em; list-style: none;
background: #000000;
color: #ffffff;
} }
.mainmenu div { html>body ul.dropdowns {
position: relative;
}
ul.dropdowns li,
ul.dropdowns ul {
margin: 0;
padding: 0;
list-style: none;
}
ul.dropdowns li {
float: left; float: left;
} position: relative;
.mainmenu li {
white-space: nowrap; white-space: nowrap;
} }
.mainmenu div ul { ul.dropdowns li ul {
display: none;
position: absolute; 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;
}
#menubar .warning {
color: red;
background-color: #557788;
}
#menubar ul.dropdowns {
min-height: 1.8em;
background: #000000;
color: #ffffff;
}
#menubar ul.dropdowns li ul {
background: #000000; background: #000000;
color: #ffffff; color: #ffffff;
border-width: 0 1px 1px 1px; border-width: 0 1px 1px 1px;
border-style: solid; border-style: solid;
border-color: #444444; border-color: #444444;
list-style-type: none;
} }
.mainmenu ul li:hover > ul, #menubar ul.dropdowns ul li ul {
.mainmenu div:hover > ul {
display: block;
}
.mainmenu ul li > ul {
left: 100%;
margin-top: -1.8em;
border-width: 1px; border-width: 1px;
} }
.modemenu a, html #menubar a:link,
.mainmenu a { html #menubar a:visited {
position: relative;
display: block; display: block;
padding: 0.5em; padding: 0.5em;
background: #000000;
color: #ffffff; color: #ffffff;
text-decoration: none; text-decoration: none;
font-size: 80%; 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; color: #ffff00;
font-weight: bold; font-weight: bold;
} }
.mainmenu li:hover > span > a, html #menubar a:link.active,
.mainmenu div:hover > a { html #menubar a:visited.active,
font-weight: bold; html #menubar a:link.preactive,
} html #menubar a:visited.preactive {
background: #000000;
.modemenu a:hover,
.modemenu a:focus,
.mainmenu a:hover,
.mainmenu a:focus {
color: #ffff00; color: #ffff00;
font-weight: bold; font-weight: bold;
} }
.mainmenu div.preactive > a { html #menubar a:link.warning,
color: #ffff00; html #menubar a:visited.warning {
background: #000000;
color: red;
font-weight: bold; font-weight: bold;
} }
.modemenu ul { #menubar ul.dropdowns li.over>a,
#menubar ul.dropdowns li.focus>a,
#menubar ul.dropdowns li:hover>a {
font-weight: bold;
}
.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; width: auto;
background: #000000; background: #000000;
color: #ffffff; color: #ffffff;
list-style-type: none; list-style: none;
margin-right: 1px;
} }
.modemenu li { #modemenu li {
float: right; float: right;
list-style: none;
}
#savemenu {
float: right;
margin-right: 2em;
}
.lang_de #submenu_admin_uci {
width: 12em;
}
.lang_ru #submenu_admin_uci {
width: 11.5em;
} }
#maincontent { #maincontent {
@ -181,6 +361,7 @@ div#maincontent ul {
padding: 0.5em 1em; padding: 0.5em 1em;
border: 1px dotted #555555; border: 1px dotted #555555;
background-color: #ffffff; background-color: #ffffff;
color: #000000;
} }
.cbi-section legend { .cbi-section legend {
@ -188,6 +369,7 @@ div#maincontent ul {
font-weight: bold; font-weight: bold;
height: 1em; height: 1em;
padding: 0 0.25em; padding: 0 0.25em;
background-color: transparent;
color: #555555; color: #555555;
} }
@ -196,9 +378,11 @@ div#maincontent ul {
} }
.cbi-section h3 { .cbi-section h3 {
height: 1.5em; text-decoration: none !important;
font-size: 90%; font-weight: bold !important;
color: #555555; color: #555555 !important;
margin: 0.25em !important;
font-size: 100% !important;
} }
.cbi-section-descr { .cbi-section-descr {
@ -214,10 +398,13 @@ div#maincontent ul {
background-color: inherit; background-color: inherit;
} }
ul.cbi-apply {
font-size: 90%;
}
input[type=submit], input[type=submit],
input[type=reset], input[type=reset],
input[type=image], input[type=image] {
label {
cursor: pointer; cursor: pointer;
} }
@ -242,6 +429,7 @@ select:hover,
textarea:focus, textarea:focus,
textarea:hover { textarea:hover {
background-color: #ffffff; background-color: #ffffff;
color: #000000;
} }
select, select,
@ -259,24 +447,28 @@ td input[type=password] {
input.cbi-input-user { input.cbi-input-user {
background: url('../resources/cbi/user.gif') no-repeat scroll 1px center; background: url('../resources/cbi/user.gif') no-repeat scroll 1px center;
background-color: inherit; background-color: inherit;
color: #000000;
padding-left: 17px; padding-left: 17px;
} }
input.cbi-input-password { input.cbi-input-password {
background: url('../resources/cbi/key.gif') no-repeat scroll 1px center; background: url('../resources/cbi/key.gif') no-repeat scroll 1px center;
background-color: inherit; background-color: inherit;
color: #000000;
padding-left: 17px; padding-left: 17px;
} }
input.cbi-input-find { input.cbi-input-find {
background: url('../resources/cbi/find.gif') no-repeat scroll 1px center; background: url('../resources/cbi/find.gif') no-repeat scroll 1px center;
background-color: inherit; background-color: inherit;
color: #000000;
padding-left: 17px; padding-left: 17px;
} }
input.cbi-input-reload { input.cbi-input-reload {
background: url('../resources/cbi/reload.gif') no-repeat scroll 1px center; background: url('../resources/cbi/reload.gif') no-repeat scroll 1px center;
background-color: inherit; background-color: inherit;
color: #000000;
padding-left: 17px; padding-left: 17px;
} }
@ -284,6 +476,7 @@ input.cbi-input-add,
input.cbi-button-add { input.cbi-button-add {
background: url('../resources/cbi/add.gif') no-repeat scroll 1px center; background: url('../resources/cbi/add.gif') no-repeat scroll 1px center;
background-color: inherit; background-color: inherit;
color: #000000;
padding-left: 17px; padding-left: 17px;
padding-right: 1px; padding-right: 1px;
} }
@ -292,6 +485,7 @@ input.cbi-input-fieldadd,
input.cbi-button-fieldadd { input.cbi-button-fieldadd {
background: url(../resources/cbi/fieldadd.gif) no-repeat scroll 1px center; background: url(../resources/cbi/fieldadd.gif) no-repeat scroll 1px center;
background-color: inherit; background-color: inherit;
color: #000000;
padding-left: 17px; padding-left: 17px;
padding-right: 1px; padding-right: 1px;
} }
@ -300,6 +494,7 @@ input.cbi-input-reset,
input.cbi-button-reset { input.cbi-button-reset {
background: url('../resources/cbi/reset.gif') no-repeat scroll 1px center; background: url('../resources/cbi/reset.gif') no-repeat scroll 1px center;
background-color: inherit; background-color: inherit;
color: #000000;
padding-left: 17px; padding-left: 17px;
padding-right: 1px; padding-right: 1px;
} }
@ -308,6 +503,7 @@ input.cbi-input-save,
input.cbi-button-save { input.cbi-button-save {
background: url('../resources/cbi/save.gif') no-repeat scroll 1px center; background: url('../resources/cbi/save.gif') no-repeat scroll 1px center;
background-color: inherit; background-color: inherit;
color: #000000;
padding-left: 17px; padding-left: 17px;
padding-right: 1px; padding-right: 1px;
} }
@ -316,6 +512,7 @@ input.cbi-input-apply,
input.cbi-button-apply { input.cbi-button-apply {
background: url('../resources/cbi/apply.gif') no-repeat scroll 1px center; background: url('../resources/cbi/apply.gif') no-repeat scroll 1px center;
background-color: inherit; background-color: inherit;
color: #000000;
padding-left: 17px; padding-left: 17px;
padding-right: 1px; padding-right: 1px;
} }
@ -324,6 +521,7 @@ input.cbi-input-remove,
div.cbi-section-remove input { div.cbi-section-remove input {
background: url('../resources/cbi/remove.gif') no-repeat scroll 1px center; background: url('../resources/cbi/remove.gif') no-repeat scroll 1px center;
background-color: inherit; background-color: inherit;
color: #000000;
padding-left: 17px; padding-left: 17px;
padding-right: 1px; padding-right: 1px;
} }
@ -343,8 +541,14 @@ form > div > input[type=reset] {
margin-left: 0.5em; margin-left: 0.5em;
} }
table td,
table th {
color: #000000;
}
table.smalltext { table.smalltext {
background: #f5f5f5; background: #f5f5f5;
color: #000000;
border-top: 1px solid #666666; border-top: 1px solid #666666;
border-right: 1px solid #666666; border-right: 1px solid #666666;
border-bottom: 1px solid #666666; border-bottom: 1px solid #666666;
@ -357,6 +561,7 @@ table.smalltext {
table.smalltext tr:hover td { table.smalltext tr:hover td {
background-color: #bbddee; background-color: #bbddee;
color: #000000;
} }
table.smalltext tr th { table.smalltext tr th {
@ -371,12 +576,19 @@ table.smalltext tr td {
border-left: 1px solid #666666; 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; background-color: #eeeeff;
color: #000000;
}
.cbi-section .cbi-rowstyle-1 h3 {
background-color: #eeeeff;
color: #555555;
} }
.cbi-rowstyle-2 { .cbi-rowstyle-2 {
color: #000000;
} }
div.cbi-value { div.cbi-value {
@ -388,37 +600,42 @@ div.cbi-value {
div.cbi-value:hover { div.cbi-value:hover {
background: #f8f8f8; background: #f8f8f8;
} color: #000000;
div.cbi-value:last-child {
border: none;
} }
.cbi-value-title { .cbi-value-title {
float: left; float: left;
width: 40%; width: 40%;
line-height: 1.8em;
} }
div.cbi-value-field { div.cbi-value-field {
width: 58%; width: 58%;
margin: 0.25em 0 0.25em 40%; margin-left: 40%;
padding: 0.25em 0;
} }
div.cbi-value-description { div.cbi-value-description {
font-size: 90%; font-size: 90%;
} 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 { div.cbi-section-create {
clear: left; clear: left;
white-space: nowrap; 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 { div.cbi-map-descr {
@ -426,8 +643,8 @@ div.cbi-map-descr {
} }
div.cbi-optionals { div.cbi-optionals {
margin: 0.5em 0; padding: 0.25em;
padding: 0 0.25em; border-bottom: 1px dotted #bbbbbb;
} }
div.cbi-section-remove { div.cbi-section-remove {
@ -436,10 +653,18 @@ div.cbi-section-remove {
.cbi-section-node { .cbi-section-node {
clear: both; clear: both;
border: 1px dotted #bbbbbb; border-top: 1px dotted #bbbbbb;
border-left: 1px dotted #bbbbbb;
border-right: 1px dotted #bbbbbb;
border-bottom: none;
padding-bottom: 0; padding-bottom: 0;
} }
.cbi-section-node table div {
padding-bottom: 0;
border-bottom: none;
}
.cbi-section-node div.cbi-section-table-row { .cbi-section-node div.cbi-section-table-row {
margin: 0.25em; margin: 0.25em;
} }
@ -471,31 +696,29 @@ td.cbi-section-table-optionals {
div.cbi-error { div.cbi-error {
font-size: 95%; font-size: 95%;
font-weight: bold; font-weight: bold;
color: #FF0000; color: #ff0000;
background-color: #ffffff;
} }
td.cbi-value-error { td.cbi-value-error {
border-color: red !important; border-color: red;
} }
.cbi-value-error input, .cbi-value-error input,
.cbi-value-error select { .cbi-value-error select {
color: red !important; color: red;
background-color: #FFCCCC; background-color: #ffcccc;
} }
.cbi-section-error { .cbi-section-error {
color: red; color: red;
background-color: white;
font-size: 95%; font-size: 95%;
border: 1px dotted red; border: 1px dotted red;
margin: 3px; margin: 3px;
padding: 3px; padding: 3px;
} }
ul.cbi-apply {
font-size: 90%;
}
.right { .right {
text-align: right; text-align: right;
} }
@ -507,7 +730,9 @@ ul.cbi-apply {
text-align: right; text-align: right;
} }
.luci a { .luci a:link,
.luci a:visited {
background-color: transparent;
color: #666666; color: #666666;
text-decoration: none; text-decoration: none;
font-size: 70%; font-size: 70%;
@ -519,85 +744,39 @@ ul.cbi-apply {
.error500 { .error500 {
white-space: normal; white-space: normal;
border: 1px dotted #FF0000; border: 1px dotted #ff0000;
background-color: #FFFFFF; background-color: #ffffff;
color: #000000;
padding: 0.5em; padding: 0.5em;
} }
#memorybar { #memorybar {
width:200px; width: 200px;
height:8px; height: 8px;
border:1px solid #bbb; border: 1px solid #bbb;
background-color:red color: black;
background-color: red;
} }
#memfree, #membuffers, #memcached { #memfree, #membuffers, #memcached {
float:right; float: right;
border:1px solid #bbb; border: 1px solid #bbb;
height:6px; height: 6px;
} }
#memfree { #memfree {
background-color:green; background-color: green;
color: black;
} }
#membuffers { #membuffers {
background-color:yellow; background-color: yellow;
color: black;
} }
#memcached { #memcached {
background-color:orange; background-color: #ffa500;
color: black;
} }
/* 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#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%;
} }

View file

@ -0,0 +1,71 @@
/* 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 ul.dropdowns li ul {
width: 10em;
}
* html ul.dropdowns li li {
clear: both;
float: left;
}
* html ul.dropdowns li li {
width: 100%;
}
* html ul.dropdowns li li a {
height: 1%;
}
* html div#maincontent {
margin-left: -80% !important;
width: 160% !important;
}
* html div.cbi-value-description {
width: auto !important;
}
* html div.cbi-value-field {
margin-left: 0 !important;
width: 100% !important;
}
* html .cbi-input-text,
* html .cbi-input-user,
* html .cbi-input-select,
* html .cbi-input-password {
width: 50% !important;
}
* html .cbi-section legend {
background-color: #ffffff;
color: #555555;
}
* html table.cbi-section-table td .cbi-input-text,
* html table.cbi-section-table td .cbi-input-select {
width: 100% !important;
}
* html div.cbi-page-actions {
text-align: right !important;
}
* html div.cbi-value-field input,
* html div.cbi-value-field select {
font-size: 90% !important;
}

View file

@ -0,0 +1,13 @@
div.cbi-value-field {
margin-left: 0 !important;
}
.cbi-section legend {
background-color: #ffffff;
color: #555555;
}
table.cbi-section-table td .cbi-input-text,
table.cbi-section-table td .cbi-input-select {
width: 95% !important;
}

View file

@ -12,11 +12,10 @@ You may obtain a copy of the License at
$Id$ $Id$
-%> -%>
<br class="clear" /> <div class="clear"></div>
</div>
</div></div>
</div> </div>
<div class="luci separator black whitetext bold"><a href="<%=controller%>/about">Powered by <%= luci.__appname__ .. " " .. luci.__version__%></a></div> <p class="luci"><a href="<%=controller%>/about">Powered by <%= luci.__appname__ .. " " .. luci.__version__%></a></p>
</body> </body>
</html> </html>

View file

@ -31,69 +31,48 @@ for i,r in ipairs(request) do
end end
require("luci.i18n").loadc("default") require("luci.i18n").loadc("default")
require("luci.http").prepare_content("text/html") require("luci.http").prepare_content("application/xhtml+xml")
-%> -%>
<?xml version="1.0" encoding="utf-8"?> <?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<%=luci.i18n.context.lang%>" lang="<%=luci.i18n.context.lang%>">
<head> <head>
<link rel="stylesheet" type="text/css" href="<%=media%>/cascade.css" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<% if node and node.css then %><link rel="stylesheet" type="text/css" href="<%=resource%>/<%=node.css%>" /><% end %> <meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" /> <link rel="stylesheet" type="text/css" media="screen" href="<%=media%>/cascade.css" />
<meta http-equiv="content-script-type" content="text/javascript" /> <!--[if lt IE 7]><link rel="stylesheet" type="text/css" media="screen" href="<%=media%>/ie6.css" /><![endif]-->
<title><%=striptags( hostname .. ( (node and node.title) and ' - ' .. node.title or '')) %> - LuCI</title> <!--[if IE 7]><link rel="stylesheet" type="text/css" media="screen" href="<%=media%>/ie7.css" /><![endif]-->
<% if node and node.css then %><link rel="stylesheet" type="text/css" media="screen" href="<%=resource%>/<%=node.css%>" />
<!--[if lt IE 7]> <% end -%>
<script type="text/javascript"> <script type="text/javascript" src="<%=resource%>/VarType.js"></script>
function setup_hover() { <script type="text/javascript" src="<%=resource%>/XHTML1.js"></script>
function ie_hover(e) { <script type="text/javascript" src="<%=resource%>/Dropdowns.js"></script>
e.onmouseover = function() { this.className = "hover" } <title><%=striptags( hostname .. ( (node and node.title) and ' - ' .. node.title or '')) %> - LuCI</title>
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> </head>
<body onload="window.setup_hover && setup_hover()"> <body class="lang_<%=luci.i18n.context.lang%>">
<p class="skiplink">
<span id="skiplink1"><a href="#navigation"><%:skiplink1 Skip to navigation%></a></span>
<span id="skiplink2"><a href="#content"><%:skiplink2 Skip to content%></a></span>
</p>
<div id="header"> <div id="header">
<div class="info whitetext smalltext bold right"> <h1><%=luci.config.brand.firmware%></h1>
<%=luci.config.brand.firmware%> (<%=luci.config.brand.distro%>) | <p>
<%:load%>: <%=load1%> <%=load5%> <%=load15%> | (<%=luci.config.brand.distro%>) |
<%:hostname%>: <%=hostname%> <%:load%>: <%=load1%> <%=load5%> <%=load15%> |
</div> <%:hostname%>: <%=hostname%>
<div class="title"> </p>
<span class="headertitle"><%=luci.config.brand.title%></span><br />
<span class="whitetext bold"><%=luci.config.brand.subtitle%></span>
</div>
</div> </div>
<div class="pathbar separator black whitetext bold"> <div id="menubar">
<%:path%>: <% <h2 class="navigation"><a id="navigation" name="navigation"><%:navigation Navigation%></a></h2>
local c = tree <ul id="mainmenu" class="dropdowns">
local url = controller
for k,v in pairs(request) do
if c.nodes and c.nodes[v] then
c = c.nodes[v]
url = url .. "/" .. v
%><a href="<%=url%>"><%=c.title or v%></a> <% if k ~= #request then %>&#187; <% end
end
end
%>
</div>
<div class="menubar">
<div id="mainmenu" class="mainmenu">
<%- <%-
local function submenu(prefix, node) local function submenu(prefix, node)
if node.hidden or not node.nodes then if not node.nodes or node.hidden then
return false return false
end end
local index = {} local index = {}
@ -109,21 +88,23 @@ local function submenu(prefix, node)
if count > 0 then if count > 0 then
%> %>
<ul> <ul id="submenu_<%=string.gsub(string.gsub(prefix, "/", "_"), "^_(.-)_$", "%1")%>">
<%- for j, v in pairs(index) do
if not v.hidden and #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="active"<%end%>><a href="<%=luci.util.pcdata(href)%>"><%=nnode.title%></a></span>
<%- submenu(prefix .. v.name .. "/", nnode) %>
</li>
<%- end %>
<%- end %>
</ul>
<%- <%-
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><a<% if nnode._menu_selected then %> class="active"<%end%> href="<%=luci.util.pcdata(href)%>"><%=nnode.title%></a><%-
submenu(prefix .. v.name .. "/", nnode)
%></li>
<%-
end
end
%>
</ul>
<%
end end
end end
@ -137,50 +118,46 @@ if cattree and cattree.nodes then
for i, k in ipairs(index) do for i, k in ipairs(index) do
node = cattree.nodes[k.name] node = cattree.nodes[k.name]
if not node.hidden and node.title and node.target then if node.title and node.target and not node.hidden then
local href = controller.."/"..category.."/"..k.name local href = controller.."/"..category.."/"..k.name.."/"
href = (k.query) and href .. luci.http.build_querystring(k.query) or href %> href = (k.query) and href .. luci.http.build_querystring(k.query) or href
<div<% if node._menu_selected then %> class="preactive"<%end%>><a href="<%=href%>"><%=node.title%></a> %>
<%submenu("/" .. category .. "/" .. k.name .. "/", node)%> <li><a<% if node._menu_selected then %> class="preactive"<%end%> href="<%=href%>"><%=node.title%></a><%
</div> submenu("/" .. category .. "/" .. k.name .. "/", node)
<% end %></li><% end
end end
end end
%> %>
</div> </ul>
<div class="modemenu">
<ul><%
for k,node in pairs(tree.nodes) do
if node.title and not node.hidden then %>
<li<% if request[1] == k then %> class="active"<%end%>><a href="<%=controller%>/<%=k%>"><%=node.title%></a></li>
<% end
end%>
</ul>
</div>
<% <ul id="modemenu"><%
if tree.nodes[category] and tree.nodes[category].ucidata then for k,node in pairs(tree.nodes) do
local ucic = 0 if node.title and not node.hidden then %>
for i, j in pairs(require("luci.model.uci").cursor():changes()) do <li><a<% if request[1] == k then %> class="active"<%end%> href="<%=controller%>/<%=k%>/"><%=node.title%></a></li><%
for k, l in pairs(j) do end
for m, n in pairs(l) do end
ucic = ucic + 1; %>
end </ul>
end
<%
if tree.nodes[category] and tree.nodes[category].ucidata then
local ucic = 0
for i, j in pairs(require("luci.model.uci").cursor():changes()) do
for k, l in pairs(j) do
for m, n in pairs(l) do
ucic = ucic + 1;
end end
%> end
<div class="mainmenu" style="float:right; margin-right:2em"> end
<div> -%>
<% if ucic > 0 then %> <ul id="savemenu" class="dropdowns">
<a class="warning" href="<%=controller%>/<%=category%>/uci/changes"><%:unsavedchanges%>: <%=ucic%></a> <li><% if ucic > 0 then %><a class="warning" href="<%=controller%>/<%=category%>/uci/changes/"><%:unsavedchanges%>: <%=ucic%></a><%
<% submenu("/" .. category .. "/uci/", tree.nodes[category].nodes["uci"]) -%> submenu("/" .. category .. "/uci/", tree.nodes[category].nodes["uci"])
<% else %> else -%>
<a href="#"><%:changes%>: 0</a> <a href="#"><%:changes%>: 0</a><% end -%>
<% end %> </li>
</div> </ul><% end %>
</div>
<% end %>
<br class="clear" /> <div class="clear"></div>
</div> </div>
<div id="maincontent"> <div id="maincontent">