diff --git a/luci-theme-ezengreen/Makefile b/luci-theme-ezengreen/Makefile new file mode 100644 index 000000000..dc4a25974 --- /dev/null +++ b/luci-theme-ezengreen/Makefile @@ -0,0 +1,16 @@ +# +# Copyright (C) 2008-2014 The LuCI Team +# +# This is free software, licensed under the Apache License, Version 2.0 . +# + +include $(TOPDIR)/rules.mk + +LUCI_TITLE:=Ezengreen Theme +LUCI_DEPENDS:= + +PKG_LICENSE:=Apache-2.0 + +include ../../luci.mk + +# call BuildPackage - OpenWrt buildroot signature diff --git a/luci-theme-ezengreen/htdocs/luci-static/ezengreen/cascade.css b/luci-theme-ezengreen/htdocs/luci-static/ezengreen/cascade.css new file mode 100755 index 000000000..740adc320 --- /dev/null +++ b/luci-theme-ezengreen/htdocs/luci-static/ezengreen/cascade.css @@ -0,0 +1,2027 @@ +/*! + * LuCI Bootstrap Theme + * Copyright 2012 Nut & Bolt + * By David Menting + * Based on Bootstrap v1.4.0 + * + * Copyright 2011 Twitter, Inc + * Licensed under the Apache License v2.0 + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Designed and built with all the love in the world @twitter by @mdo and @fat. + */ +/* Reset.less + * Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc). + * ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ +html { + margin: 0; + padding: 0; +} + +body { + margin: 0; + padding: 5px; +} + +h1, h2, h3, h4, h5, h6, p, pre, a, abbr, acronym, code, del, em, img, ins, q, s, +small, strike, strong, sub, sup, tt, var, dd, dl, dt, li, ol, ul, fieldset, +form, label, legend, button, table, caption, tbody, tfoot, thead, tr, th, td, +.table, .tbody, .tfoot, .thead, .tr, .th, .td { + margin: 0; + padding: 0; + border: 0; + font-weight: normal; + font-style: normal; + font-size: 100%; + line-height: 1; + font-family: inherit; +} + +abbr[title], acronym[title] { + border-bottom: 1px dotted; + font-weight: inherit; + cursor: help; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} + +ol, ul { + list-style: none; +} + +q:before, +q:after, +blockquote:before, +blockquote:after { + content: ""; +} + +html { + overflow-y: scroll; + font-size: 100%; + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; +} + +a:focus { + outline: thin dotted; +} + +a:hover, a:active { + outline: 0; +} + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +nav, +section { + display: block; +} + +sub, sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sup { + top: -0.5em; +} + +sub { + bottom: -0.25em; +} + +img { + border: 0; + -ms-interpolation-mode: bicubic; +} + +button, +input, +select, +option, +textarea { + font-size: 100%; + margin: 0; + box-sizing: border-box; + vertical-align: baseline; + *vertical-align: middle; +} + +button, input { + line-height: normal; + *overflow: visible; +} + +button::-moz-focus-inner, input::-moz-focus-inner { + border: 0; + padding: 0; +} + +button, +input[type="button"], +input[type="reset"], +input[type="submit"] { + cursor: pointer; + -webkit-appearance: button; +} + +button[disabled], +input[type="button"][disabled], +input[type="reset"][disabled], +input[type="submit"][disabled] { + opacity: 0.7; +} + +input[type="search"] { + -webkit-appearance: textfield; + box-sizing: content-box; +} + +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +textarea { + overflow: auto; + vertical-align: top; +} + +/* + * Scaffolding + * Basic and global styles for generating a grid system, structural layout, and page templates + * ------------------------------------------------------------------------------------------- */ +body { + background-color: #fff; + margin: 0; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 12px; + font-weight: normal; + line-height: 18px; + color: #404040; + padding-top: 75px; +} + +.container { + width: 100%; + max-width: 940px; + margin-left: auto; + margin-right: auto; + zoom: 1; +} + +.container:before, .container:after { + display: table; + content: ""; + zoom: 1; +} + +.container:after { + clear: both; +} + +a { + color: #215e21; + text-decoration: none; + line-height: inherit; + font-weight: inherit; +} + +a:hover { + color: #000000; + text-decoration: none; +} + +.pull-right { + float: right; +} + +.pull-left { + float: left; +} + +/* Typography.less + * Headings, body text, lists, code, and more for a versatile and durable typography system + * ---------------------------------------------------------------------------------------- */ +p, +.cbi-map-descr, +.cbi-section-descr, +.table .tr.cbi-section-table-descr .th { + font-size: 12px; + font-weight: normal; + line-height: 18px; + margin-bottom: 9px; +} + +p small { + font-size: 11px; + color: #bfbfbf; +} + +h1, +h2, +h3, legend, +h4, +h5, +h6 { + font-weight: normal; + color: #404040; +} + +h1 small, +h2 small, +h3 small, +h4 small, +h5 small, +h6 small { + color: #bfbfbf; +} + +h1 { + margin-bottom: 18px; + font-size: 30px; + line-height: 36px; +} + +h1 small { + font-size: 18px; +} + +h2 { + font-size: 24px; + line-height: 58px; + text-transform: uppercase; + font-weight: normal; +} + +h2 small { + font-size: 14px; +} + +h3, legend, +h4, +h5, +h6 { + line-height: 48px; +} + +h3, legend { + font-size: 18px; +} + +h3 small { + font-size: 14px; +} + +h4 { + font-size: 16px; +} + +h4 small { + font-size: 12px; +} + +h5 { + font-size: 14px; +} + +h6 { + font-size: 13px; + color: #bfbfbf; + text-transform: uppercase; +} + +ul, ol { + margin: 0 0 18px 25px; +} + +ul ul, +ul ol, +ol ol, +ol ul { + margin-bottom: 0; +} + +ul { + list-style: disc; +} + +ol { + list-style: decimal; +} + +li { + line-height: 18px; + color: #808080; +} + +ul.unstyled { + list-style: none; + margin-left: 0; +} + +dl { + margin-bottom: 18px; +} + +dl dt, dl dd { + line-height: 18px; +} + +dl dt { + font-weight: bold; +} + +dl dd { + margin-left: 9px; +} + +hr { + margin: 20px 0 19px; + border: 0; + border-bottom: 1px solid #eee; +} + +strong { + font-style: inherit; + font-weight: bold; +} + +em { + font-style: italic; + font-weight: inherit; + line-height: inherit; +} + +small { font-size: 0.9em } + +address { + display: block; + line-height: 18px; + margin-bottom: 18px; +} + +code, pre { + padding: 0 3px 2px; + font-family: Monaco, Andale Mono, Courier New, monospace; + font-size: 12px; + border-radius: 2px; +} + +code { + background-color: #fee9cc; + color: rgba(0, 0, 0, 0.75); + padding: 1px 3px; +} + +pre { + background-color: #f5f5f5; + display: block; + padding: 8.5px; + margin: 0 0 18px; + line-height: 18px; + font-size: 12px; + border: 1px solid #ccc; + border: 1px solid rgba(0, 0, 0, 0.15); + border-radius: 2px; + white-space: pre; + white-space: pre-wrap; + word-wrap: break-word; +} + +/* Forms.less + * Base styles for various input types, form layouts, and states + * ------------------------------------------------------------- */ +form { + margin-bottom: 18px; +} + +fieldset { + margin-bottom: 9px; + padding-top: 9px; +} + +fieldset legend { + display: block; + font-size: 19.5px; + line-height: 1; + color: #404040; + padding-top: 20px; + *padding: 0 0 5px 0px; + /* IE6-7 */ + + *line-height: 1.5; + /* IE6-7 */ + +} +form .cbi-tab-descr { + line-height: 18px; + margin-bottom: 18px; +} + +form .clearfix, +form .cbi-value { + margin-bottom: 15px; + margin-top: 15px; + zoom: 1; +} + +form .clearfix:before, form .clearfix:after, +form .cbi-value:before, form .cbi-value:after { + display: table; + content: ""; + zoom: 1; +} + +form .clearfix:after, +form .cbi-value:after { + clear: both; +} + +label, +input, +select, +textarea { + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 12px; + font-weight: normal; + line-height: normal; +} + +form .input, +form .cbi-value-field { + margin-left: 120px; +} + +form .cbi-value label.cbi-value-title { + padding-top: 6px; + font-size: 12px; + line-height: 18px; + float: left; + width: 111px; + text-align: left; + color: #404040; +} + +input[type=checkbox], input[type=radio] { + cursor: pointer; +} + +input, +textarea, +select, +.cbi-dropdown, +.uneditable-input { + display: inline-block; + width: 200px; + height: 30px; + padding: 4px; + font-size: 12px; + line-height: 18px; + color: #808080; + border: 1px solid #ccc; + border-radius: 2px; + box-sizing: border-box; + margin: 2px 0; +} + +.cbi-dropdown { + min-width: 210px; + max-width: 400px; + width: auto; +} + +select { + padding: initial; + background: #fff; + box-shadow: inset 0 -1px 3px rgba(0, 0, 0, 0.1); +} + +input[type=checkbox], input[type=radio] { + width: auto; + height: auto; + padding: 0; + margin: 3px 0; + *margin-top: 0; + /* IE6-7 */ + + line-height: normal; + border: none; +} + +input[type=file] { + background-color: #fff; + padding: initial; + border: initial; + line-height: initial; + box-shadow: none; + width: auto !important; +} + +input[type=button], input[type=reset], input[type=submit] { + width: auto; + height: auto; +} + +select, input[type=file] { + *height: auto; + *margin-top: 4px; + /* For IE7, add top margin to align select with labels */ +} + +select[multiple] { + height: inherit; + background-color: #fff; +} + +textarea { + height: auto; +} + +.td > input[type=text], +.td > input[type=password], +.td > select, +.td > .cbi-dropdown { + width: 100%; +} + +.uneditable-input { + background-color: #fff; + display: block; + border-color: #eee; + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025); + cursor: not-allowed; +} + +::-moz-placeholder { + color: #bfbfbf; +} + +::-webkit-input-placeholder { + color: #bfbfbf; +} + +.btn, .cbi-button, input, textarea { + transition: border linear 0.2s, box-shadow linear 0.2s; + box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); + padding: 12px 6px; +} + +.btn:hover, .cbi-button:hover, +input:focus, textarea:focus { + outline: 0; + border-color: rgba(82, 168, 236, 0.8) !important; + box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6); + text-decoration: none; +} + +input[type=file]:focus, input[type=checkbox]:focus, select:focus { + box-shadow: none; + outline: 1px dotted #666; +} + +input[disabled], +select[disabled], +textarea[disabled], +input[readonly], +select[readonly], +textarea[readonly] { + background-color: #194119; + border-color: #ccc; + padding: 5px; + pointer-events: none; + cursor: default; +} + +select[readonly], +textarea[readonly] { + pointer-events: auto; + cursor: auto; +} + +.cbi-optionals, +.cbi-section-create { + padding: 0 0 10px 10px; +} + +.cbi-section-create { + margin: 10px 0 0 -10px; + display: inline-flex; + align-items: center; +} + +.cbi-section-create > * { + margin: 3px; + flex: 1 1 auto; +} + +.cbi-section-create > * > input { + width: 100%; +} + +.actions, +.cbi-page-actions { + background: #f5f5f5; + margin-bottom: 20px; + margin-top: 40px; + padding: 15px 20px 15px 20px; + border-radius: 0 0 2px 2px; + text-align: right; +} + +.actions .secondary-action, +.cbi-page-actions .secondary-action{ + float: right; +} + +.actions .secondary-action a, +.cbi-page-actions .secondary-action a { + line-height: 30px; +} + +.actions .secondary-action a:hover, +.cbi-page-actions .secondary-action a:hover { + text-decoration: none; +} + +.cbi-page-actions > form { + display: inline; + margin: 0; +} + +.help-inline, .help-block { + font-size: 12px; + line-height: 18px; + color: #bfbfbf; +} + +.help-inline { + padding-left: 5px; + *position: relative; + /* IE6-7 */ + + *top: -5px; + /* IE6-7 */ + +} + +.help-block { + display: block; + max-width: 600px; +} + +/* + * Tables.less + * Tables for, you guessed it, tabular data + * ---------------------------------------- */ +.tr { display: table-row; } +.table[width="33%"], .th[width="33%"], .td[width="33%"] { width: 33%; } +.table[width="100%"], .th[width="100%"], .td[width="100%"] { width: 100%; } + +.table { + display: table; + width: 100%; + margin: 12px 0 24px 0; + padding: 0; + font-size: 12px; + border-collapse: collapse; + position: relative; +} + +.table .th, .table .td { + display: table-cell; + vertical-align: middle; /* Fixme */ + padding: 6px 6px 6px 2px; + line-height: 18px; + text-align: left; +} + +.table .tr:first-child .th { + padding-top: 9px; + font-weight: normal; + vertical-align: top; +} + +.table .td, .table .th { + border-top: 1px solid #e7e7e7; +} + +.tr.placeholder { + height: calc(3em + 20px); +} + +.tr.placeholder > .td { + position: absolute; + left: 0; + right: 0; + bottom: 0; + text-align: center; + line-height: 3em; +} + +/* Patterns.less + * Repeatable UI elements outside the base styles provided from the scaffolding + * ---------------------------------------------------------------------------- */ +header { + height: 40px; + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: 10000; + overflow: visible; + color: #BFBFBF; +} + +header a { + color: #c4c4c4; +} + +header h3 a:hover, header .brand:hover, header ul .active > a { + background-color: #333; + background-color: rgba(0, 0, 0, 0.33); + color: #fff; + text-decoration: none; +} + +header h3 { + position: relative; +} + +header h3 a, header .brand { + float: left; + display: block; + padding: 16px 20px 16px; + margin-left: -20px; + color: #fff; + font-size: 24px; + font-weight: 333; + line-height: 1; +} + +header p { + margin: 0; + line-height: 40px; +} + +header .fill { + background-color: #215e21; + background-repeat: repeat-x; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.33), inset 0 -1px 0 rgba(0, 0, 0, 0.1); + padding: 0 5px; +} + +header div > ul, .nav { + display: block; + float: left; + margin: 0 10px 0 20px; + position: relative; + left: 0; +} + +header div > ul > li, .nav > li { + display: block; + float: left; +} + +header div > ul a, .nav a { + display: block; + float: none; + padding: 22px 12px 14px 12px; + line-height: 19px; + letter-spacing: 0.4px; + text-decoration: none; + text-transform: uppercase; +} + +header div > ul a:hover, .nav a:hover { + color: #fff; + text-decoration: none; +} + +header div > ul .active > a, .nav .active > a { + background-color: #222; + background-color: rgba(0, 0, 0, 0.33); +} + +header div > ul.secondary-nav, .nav.secondary-nav { + float: right; + margin-left: 10px; + margin-right: 0; +} + +header div > ul.secondary-nav .menu-dropdown, +.nav.secondary-nav .menu-dropdown, +header div > ul.secondary-nav .dropdown-menu, +.nav.secondary-nav .dropdown-menu { + right: 0; + border: 0; +} + +header div > ul a.menu:hover, +.nav a.menu:hover, +header div > ul li.open .menu, +.nav li.open .menu, +header div > ul .dropdown-toggle:hover, +.nav .dropdown-toggle:hover, +header div > ul .dropdown.open .dropdown-toggle, +.nav .dropdown.open .dropdown-toggle { + background: #444; + background: rgba(0, 0, 0, 0.3); +} + +header div > ul .menu-dropdown, +.nav .menu-dropdown, +header div > ul .dropdown-menu, +.nav .dropdown-menu { + background-color: #003300; +} + +header div > ul .menu-dropdown a.menu, +.nav .menu-dropdown a.menu, +header div > ul .dropdown-menu a.menu, +.nav .dropdown-menu a.menu, +header div > ul .menu-dropdown .dropdown-toggle, +.nav .menu-dropdown .dropdown-toggle, +header div > ul .dropdown-menu .dropdown-toggle, +.nav .dropdown-menu .dropdown-toggle { + color: #fff; +} + +header div > ul .menu-dropdown a.menu.open, +.nav .menu-dropdown a.menu.open, +header div > ul .dropdown-menu a.menu.open, +.nav .dropdown-menu a.menu.open, +header div > ul .menu-dropdown .dropdown-toggle.open, +.nav .menu-dropdown .dropdown-toggle.open, +header div > ul .dropdown-menu .dropdown-toggle.open, +.nav .dropdown-menu .dropdown-toggle.open { + background: #444; + background: rgba(255, 255, 255, 0.05); +} + +header div > ul .menu-dropdown li a, +.nav .menu-dropdown li a, +header div > ul .dropdown-menu li a, +.nav .dropdown-menu li a { + color: #bfbfbf; +} + +header div > ul .menu-dropdown li a:hover, +.nav .menu-dropdown li a:hover, +header div > ul .dropdown-menu li a:hover, +.nav .dropdown-menu li a:hover { + background-color: #215e21; + background-repeat: repeat-x; + color: #fff; +} + +header div > ul .menu-dropdown .active a, +.nav .menu-dropdown .active a, +header div > ul .dropdown-menu .active a, +.nav .dropdown-menu .active a { + color: #fff; +} + +header div > ul .menu-dropdown .divider, +.nav .menu-dropdown .divider, +header div > ul .dropdown-menu .divider, +.nav .dropdown-menu .divider { + background-color: #222; + border-color: #444; +} + +header ul .menu-dropdown li a, header ul .dropdown-menu li a { + padding: 6px 12px; +} + +li.menu, .dropdown { + position: relative; +} + +.menu-dropdown, .dropdown-menu { + background-color: #fff; + float: left; + position: absolute; + top: 55px; + left: -9999px; + z-index: 900; + min-width: 200px; + max-width: 300px; + _width: 160px; + margin-left: 0; + margin-right: 0; + padding: 6px 0; + zoom: 1; + border-radius: 0 0 2px 2px; + background-clip: padding-box; +} + +.menu-dropdown li, .dropdown-menu li { + float: none; + display: block; + background-color: transparent; +} + +.menu-dropdown .divider, .dropdown-menu .divider { + height: 1px; + margin: 5px 0; + overflow: hidden; + background-color: #eee; + border-bottom: 1px solid #fff; +} + +header .dropdown-menu a, .dropdown-menu a { + display: block; + padding: 4px 15px; + clear: both; + font-weight: normal; + line-height: 18px; + text-transform: capitalize; + letter-spacing: 0.2px; + color: #808080; + zoom: 1.1; +} + +header .dropdown-menu a:hover, +.dropdown-menu a:hover, +header .dropdown-menu a.hover, +.dropdown-menu a.hover { + background-color: #ddd; + background-repeat: repeat-x; + color: #404040; + text-decoration: none; + box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.025), inset 0 -1px rgba(0, 0, 0, 0.025); +} + +.open .menu, +.dropdown.open .menu, +.open .dropdown-toggle, +.dropdown.open .dropdown-toggle { + color: #fff; + background: #ccc; + background: rgba(0, 0, 0, 0.3); +} + +.open .menu-dropdown, +.dropdown.open .menu-dropdown, +.open .dropdown-menu, +.dropdown.open .dropdown-menu { + left: 0; +} + +.dropdown:hover ul.dropdown-menu { + left: 0; +} + +.dropdown-menu .dropdown-menu { + position: absolute; + left: 159px; +} + +.dropdown-menu li { + position: relative; +} + +.tabs, .cbi-tabmenu { + margin: 0 0 18px; + padding: 0; + list-style: none; + zoom: 1; +} + +.tabs:before, +.cbi-tabmenu:before, +.tabs:after, +.cbi-tabmenu:after { + display: table; + content: ""; + zoom: 1; +} + +.tabs:after, .cbi-tabmenu:after { + clear: both; +} + +.tabs > li, .cbi-tabmenu > li { + float: left; +} + +.tabs > li > a, .cbi-tabmenu > li > a { + display: block; +} + +.tabs, +.cbi-tabmenu { + border-color: #ddd; + border-style: solid; + border-width: 0 0 1px; +} + +.tabs > li, +.cbi-tabmenu > li { + position: relative; + margin-bottom: -1px; +} + +.cbi-tabmenu.map { + margin: 0; +} + +.cbi-tabmenu.map > li { + font-size: 16.5px; + font-weight: bold; +} + +.cbi-tabcontainer > fieldset.cbi-section[id] > legend { + display: none; +} + +.tabs > li > a, +.cbi-tabmenu > li > a { + padding: 0 15px; + margin-right: 2px; + line-height: 34px; + border: 1px solid transparent; + border-radius: 2px 2px 0 0; +} + +.tabs > li > a:hover, +.cbi-tabmenu > li > a:hover { + text-decoration: none; + background-color: #eee; + border-color: #eee #eee #ddd; +} + +.tabs .active > a, .tabs .active > a:hover, +.cbi-tabmenu .active > a, .cbi-tabmenu .active > a:hover, +.cbi-tab > a:link, .cbi-tab > a:hover { + color: #000000; + background-color: #fff; + border: 1px solid #ddd; + border-bottom-color: transparent; + cursor: default; +} + +.tabs .menu-dropdown, .tabs .dropdown-menu, +.cbi-tabmenu .menu-dropdown, .cbi-tabmenu .dropdown-menu { + top: 35px; + border-width: 1px; + border-radius: 0 2px 2px 2px; +} + +.tabs a.menu:after, .tabs .dropdown-toggle:after, +.cbi-tabmenu a.menu:after, .cbi-tabmenu .dropdown-toggle:after { + border-top-color: #999; + margin-top: 15px; + margin-left: 5px; +} + +.tabs li.open.menu .menu, .tabs .open.dropdown .dropdown-toggle, +.cbi-tabmenu li.open.menu .menu, .cbi-tabmenu .open.dropdown .dropdown-toggle { + border-color: #999; +} + +.tabs li.open a.menu:after, .tabs .dropdown.open .dropdown-toggle:after, +.cbi-tabmenu li.open a.menu:after, .cbi-tabmenu .dropdown.open .dropdown-toggle:after { + border-top-color: #555; +} + +.tab-content > .tab-pane, +.tab-content > div { + display: none; +} + +.tab-content > .active { + display: block; +} + +.breadcrumb { + padding: 7px 14px; + margin: 0 0 18px; + background-color: #f5f5f5; + background-repeat: repeat-x; + border: 1px solid #ddd; + border-radius: 2px; + box-shadow: inset 0 1px 0 #fff; +} + +.breadcrumb li { + display: inline; +} + +.breadcrumb .divider { + padding: 0 5px; + color: #bfbfbf; +} + +.breadcrumb .active a { + color: #404040; +} + +footer { + margin-top: 30px; + padding-top: 20px; + padding-bottom: 20px; + border-top: 1px solid #404040; +} + +.btn.danger, +.alert-message.danger, +.btn.danger:hover, +.alert-message.danger:hover, +.btn.error, +.alert-message.error, +.btn.error:hover, +.alert-message.error:hover, +.btn.success, +.alert-message.success, +.btn.success:hover, +.alert-message.success:hover, +.btn.info, +.alert-message.info, +.btn.info:hover, +.alert-message.info:hover { + color: #fff; +} + +.btn .close, .alert-message .close { + font-family: Arial, sans-serif; + line-height: 18px; +} + +.btn.danger, +.alert-message.danger, +.btn.error, +.alert-message.error { + background: linear-gradient(to bottom, #ee5f5b, #c43c35) repeat-x; + border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); +} + +.btn.success, .alert-message.success { + background: linear-gradient(to bottom, #62c462, #57a957) repeat-x; + border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); +} + +.btn.info, .alert-message.info { + background: linear-gradient(to bottom, #5bc0de, #339bb9) repeat-x; + border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); +} + +.alert-message.notice { + background: linear-gradient(to bottom, #efefef, #fefefe) repeat-x; + border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); +} + +.btn, +.cbi-button { + cursor: pointer; + display: inline-block; + background: linear-gradient(#fff, #fff 25%, #e6e6e6) no-repeat; + padding: 5px 14px 6px; + color: #333; + font-size: 12px; + line-height: normal; + border: 1px solid #ccc; + border-bottom-color: #bbb; + border-radius: 2px; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); +} + +.btn:focus, +.cbi-button:focus { + outline: 1px dotted #666; +} + +.cbi-input-invalid, +.cbi-value-error input { + color: #f00; + border-color: #f00; +} + +.cbi-button-positive, +.cbi-button-fieldadd, +.cbi-button-add, +.cbi-button-save { + border-color: #4a4; + color: #4a4; +} + +.cbi-button-neutral, +.cbi-button-download, +.cbi-button-find, +.cbi-button-link, +.cbi-button-up, +.cbi-button-down { + color: #444; +} + +.btn.primary, +.cbi-button-action, +.cbi-button-apply, +.cbi-button-reload, +.cbi-button-edit { + border-color: #4aa44b; + color: #4aa44b; +} + +.cbi-button-negative, +.cbi-section-remove .cbi-button, +.cbi-button-reset, +.cbi-button-remove { + border-color: #c44; + color: #c44; +} + +.cbi-page-actions::after { + display: table; + content: ""; + clear: both; +} + +.cbi-page-actions > :not([method="post"]):not(.cbi-button-apply):not(.cbi-button-save):not(.cbi-button-reset) { + float: left; + margin-right: .4em; +} + +.btn.primary, +.cbi-button-action.important, +.cbi-page-actions .cbi-button-apply, +.cbi-section-actions .cbi-button-edit { + color: #fff; + background: #4aa44b; +} + +.cbi-button-positive.important, +.cbi-page-actions .cbi-button-save { + color: #fff; + background: linear-gradient(to bottom, #4a4, #484) no-repeat; +} + +.cbi-button-negative.important { + color: #fff; + background: linear-gradient(to bottom, #c44, #c00) no-repeat; +} + +.cbi-page-actions .cbi-button-apply + .cbi-button-save { + background: linear-gradient(#fff, #fff 25%, #e6e6e6); + color: #4a4; +} + +.cbi-dropdown { + border: 1px solid #ccc; + border-radius: 2px; + display: inline-flex; + padding: 0; + cursor: pointer; + height: auto; + background: linear-gradient(#fff 0%, #e9e8e6 100%); + position: relative; + color: #404040; +} + +.cbi-dropdown:focus { + outline: 2px solid #4b6e9b; +} + +.cbi-dropdown > ul { + margin: 0 !important; + padding: 0; + list-style: none; + overflow-x: hidden; + overflow-y: auto; + display: flex; + width: 100%; +} + +.cbi-dropdown > ul.preview { + display: none; +} + +.cbi-dropdown > .open, +.cbi-dropdown > .more { + flex-grow: 0; + flex-shrink: 0; + display: flex; + flex-direction: column; + justify-content: center; + text-align: center; + line-height: 2em; + padding: 0 .25em; +} + +.cbi-dropdown > .more, +.cbi-dropdown > ul > li[placeholder] { + color: #777; + font-weight: bold; + display: none; +} + +.cbi-dropdown > ul > li { + display: none; + padding: .25em; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + flex-shrink: 1; + flex-grow: 1; + align-items: center; + align-self: center; + color: #404040; + min-height: 20px; +} + +.cbi-dropdown > ul > li .hide-open { display: block; display: initial; } +.cbi-dropdown > ul > li .hide-close { display: none; } + +.cbi-dropdown > ul > li[display]:not([display="0"]) { + border-left: 1px solid #ccc; +} + +.cbi-dropdown[empty] > ul { + max-width: 1px; +} + +.cbi-dropdown > ul > li > form { + display: none; + margin: 0; + padding: 0; + pointer-events: none; +} + +.cbi-dropdown > ul > li img { + vertical-align: middle; + margin-right: .25em; +} + +.cbi-dropdown > ul > li > form > input[type="checkbox"] { + margin: 0; +} + +.cbi-dropdown > ul > li input[type="text"] { + height: 20px; +} + +.cbi-dropdown[open] { + position: relative; +} + +.cbi-dropdown[open] > ul.dropdown { + display: block; + background: #f6f6f5; + border: 1px solid #918e8c; + box-shadow: 0 0 4px #918e8c; + position: absolute; + z-index: 1000; + max-width: none; + min-width: 100%; + width: auto; +} + +.cbi-dropdown > ul > li[display], +.cbi-dropdown[open] > ul.preview, +.cbi-dropdown[open] > ul.dropdown > li, +.cbi-dropdown[multiple] > ul > li > label, +.cbi-dropdown[multiple][open] > ul.dropdown > li, +.cbi-dropdown[multiple][more] > .more, +.cbi-dropdown[multiple][empty] > .more { + flex-grow: 1; + display: flex; +} + +.cbi-dropdown[empty] > ul > li, +.cbi-dropdown[optional][open] > ul.dropdown > li[placeholder], +.cbi-dropdown[multiple][open] > ul.dropdown > li > form { + display: block; +} + +.cbi-dropdown[open] > ul.dropdown > li .hide-open { display: none; } +.cbi-dropdown[open] > ul.dropdown > li .hide-close { display: block; display: initial; } + +.cbi-dropdown[open] > ul.dropdown > li { + border-bottom: 1px solid #ccc; +} + +.cbi-dropdown[open] > ul.dropdown > li[selected] { + background: #b0d0f0; +} + +.cbi-dropdown[open] > ul.dropdown > li.focus { + background: linear-gradient(90deg, #a3c2e8 0%, #84aad9 100%); +} + +.cbi-dropdown[open] > ul.dropdown > li:last-child { + margin-bottom: 0; + border-bottom: none; +} + +.cbi-dropdown[disabled] { + pointer-events: none; + opacity: .6; +} + +input[type="text"] + .cbi-button, +input[type="password"] + .cbi-button, +select + .cbi-button { + border-radius: 2px; + border-color: #ccc; + margin: 2px 0 2px 3px; + padding: 0 12px; + vertical-align: top; + height: 28px; + font-size: 13px; + font-weight: normal; + line-height: 28px; +} + +select + .cbi-button { + #border-left-color: transparent; +} + +.cbi-title-ref { + color: #f39800; +} + +.cbi-title-ref::after { + content: " ➙ "; +} + +.cbi-tooltip-container { + cursor: help; + padding: 5px 3px 5px 3px; +} + +.cbi-tooltip { + position: absolute; + z-index: 1000; + left: -1000px; + opacity: 0; + transition: opacity .25s ease-out; +} + +.cbi-tooltip-container:hover .cbi-tooltip:not(:empty) { + left: auto; + opacity: 1; + transition: opacity .25s ease-in; +} + +.zonebadge .cbi-tooltip { + padding: 1px; + background: inherit; + margin: -1.6em 0 0 -5px; + border-radius: 2px; + pointer-events: none; + box-shadow: 0 0 3px #444; +} + +.zonebadge .cbi-tooltip > * { + margin: 1px; +} + +.zone-forwards { + display: flex; + flex-wrap: wrap; +} + +.zone-forwards > * { + flex: 1 1 40%; + padding: 1px; +} + +.zone-forwards > span { + flex-basis: 10%; + text-align: center; +} + +.zone-forwards .zone-src, +.zone-forwards .zone-dest { + display: flex; + flex-direction: column; +} + +.btn.active, .btn:active { + box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05); +} + +.btn.disabled { + cursor: default; + background-image: none; + opacity: 0.65; + box-shadow: none; +} + +.btn[disabled] { + cursor: default; + background-image: none; + opacity: 0.65; + box-shadow: none; +} + +.btn.large { + font-size: 15px; + line-height: normal; + padding: 9px 14px 9px; + border-radius: 2px; +} + +.btn.small { + padding: 7px 9px 7px; + font-size: 11px; +} + +button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { + padding: 0; + border: 0; +} + +.close { + float: right; + color: #000; + font-size: 20px; + font-weight: bold; + line-height: 13.5px; + opacity: 0.25; +} + +.close:hover { + color: #000; + text-decoration: none; + opacity: 0.4; +} + +.alert-message { + position: relative; + padding: 30px; + margin-top: 25px; + margin-bottom: 25px; + color: #404040; + background: #f0e68c; + border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); + border-width: 1px; + border-style: solid; + border-radius: 2px; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); +} + +.alert-message .close { + margin-top: 1px; + *margin-top: 0; +} + +.alert-message a { + font-weight: bold; + color: #404040; +} + +.alert-message.danger p a, +.alert-message.error p a, +.alert-message.success p a, +.alert-message.info p a { + color: #fff; +} + +.alert-message h5 { + line-height: 18px; +} + +.alert-message p { + margin-bottom: 0; +} + +.alert-message div { + margin-top: 15px; + margin-bottom: 10px; + line-height: 28px; +} + +.label { + padding: 3px 3px 3px 3px; + font-size: 8px; + font-weight: normal; + color: #fff !important; + text-transform: uppercase; + white-space: nowrap; + background-color: #bfbfbf; + border-radius: 2px; + text-shadow: none; +} + +a.label:link, +a.label:visited { + color: #fff; +} + +a.label:hover { + text-decoration: none; +} + +.label.important { + background-color: #c43c35; +} + +.label.warning { + background-color: #f89406; +} + +.label.success { + background-color: #46a546; +} + +.label.notice { + background-color: #62cffc; +} + +/* LuCI specific items */ +.hidden { display: none } + +#memtotal > div, +#memfree > div, +#memcache > div, +#membuff > div, +#conns > div { + border: 1px solid #ccc; + border-radius: 2px 2px 2px 2px; + color: #808080; + display: inline-block; + font-size: 12px; + line-height: 18px; +} + +#xhr_poll_status { + cursor: pointer; +} + +form.inline { display: inline; margin-bottom: 0; } + +header .pull-right { padding-top: 21px; } + +#modemenu li:last-child span.divider { display: none } + +#syslog { width: 100%; } + +.cbi-section-table .tr:hover .td, +.cbi-section-table .tr:hover .th, +.cbi-section-table .tr:hover::before { + background-color: #f5f5f5; +} + +.cbi-section-table .tr.cbi-section-table-descr .th { + font-weight: normal; +} + +.cbi-section-table-titles.named::before, +.cbi-section-table-descr.named::before, +.cbi-section-table-row[data-title]::before { + content: attr(data-title) " "; + display: table-cell; + padding: 10px 10px 9px; + line-height: 18px; + font-weight: bold; + vertical-align: middle; +} + +.cbi-section-table-titles.named::before, +.cbi-section-table-descr.named::before, +.cbi-section-table-row[data-title]::before { + border-top: 1px solid #ddd; +} + +.left { text-align: left !important; } +.right { text-align: right !important; } +.center { text-align: center !important; } +.top { vertical-align: top !important; } +.middle { vertical-align: middle !important; } +.bottom { vertical-align: bottom !important; } + +.cbi-value-field { line-height: 1.5em; } + +.cbi-value-field input[type=checkbox], +.cbi-value-field input[type=radio] { + margin-top: 8px; + margin-right: 6px; +} + +table table td, +.cbi-value-field table td { + border: none; +} + +.table.cbi-section-table input[type="password"], +.table.cbi-section-table input[type="text"], +.table.cbi-section-table textarea, +.table.cbi-section-table select { + width: 100%; +} + +.table.cbi-section-table .td.cbi-section-table-cell { + white-space: nowrap; + text-align: right; +} + +.table.cbi-section-table .td.cbi-section-table-cell select { + width: inherit; +} + +.td.cbi-section-actions { + text-align: right; + vertical-align: middle; +} + +.td.cbi-section-actions > * { + display: flex; +} + +.td.cbi-section-actions > * > *, +.td.cbi-section-actions > * > form > * { + flex: 1 1 4em; + margin: 0 1px; +} + +.td.cbi-section-actions > * > form { + display: inline-flex; + margin: 0; +} + +.table.valign-middle .td { + vertical-align: middle; +} + +.cbi-rowstyle-2, +.tr.table-titles, +.tr.cbi-section-table-titles { + background: #f9f9f9; +} + +.cbi-value-description { + background-image: url(/luci-static/resources/cbi/help.gif); + background-position: .25em .2em; + background-repeat: no-repeat; + margin: 10px 0 10px -5px; + padding: 0 0 0 26px; +} + +.cbi-section-error { + border: 1px solid #f00; + border-radius: 2px; + background-color: #fce6e6; + padding: 5px; + margin-bottom: 18px; +} + +.cbi-section-error ul { margin: 0 0 0 20px; } + +.cbi-section-error ul li { + color: #f00; + font-weight: bold; +} + +.ifacebox { + background-color: #fff; + border: 1px solid #ccc; + margin: 6px 4px; + text-align: center; + white-space: nowrap; + background-image: linear-gradient(#fff, #fff 25%, #f9f9f9); + border-radius: 2px; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); + display: inline-flex; + flex-direction: column; + line-height: 1.2em; + min-width: 100px; +} + +.ifacebox .ifacebox-head { + border-bottom: 1px solid #ccc; + padding: 10px; + line-height: 1.2em; + background: #eee; +} + +.ifacebox .ifacebox-head.active { + background: #f0e68c; +} + +.ifacebox .ifacebox-body { + padding: .25em; +} + +.ifacebadge { + display: inline-block; + flex-direction: row; + white-space: nowrap; + background-color: #fff; + border: 1px solid #ccc; + padding: 5px 5px 3px 5px; + background-image: linear-gradient(#fff, #fff 25%, #f9f9f9); + border-radius: 2px; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); + cursor: default; + line-height: 1.2em; +} + +.ifacebadge img { + width: 16px; + height: 16px; + vertical-align: middle; +} + +.ifacebadge-active { + border-color: #000; + font-weight: bold; +} + +.network-status-table { + display: flex; + flex-wrap: wrap; +} + +.network-status-table .ifacebox { + margin: 10px 10px 15px 2px; + flex-grow: 1; +} + +.network-status-table .ifacebox-body { + display: flex; + flex-direction: column; + height: 100%; + text-align: left; + padding: 8px; +} + +.network-status-table .ifacebox-body > * { + margin: .25em; +} + +.network-status-table .ifacebox-body > span { + flex: 10 10 auto; + height: 100%; +} + +.network-status-table .ifacebox-body > div { + display: flex; + flex-wrap: wrap; + margin: -.125em; +} + +#dsl_status_table .ifacebox-body > span > strong { + display: inline-block; + min-width: 35%; +} + +.ifacebadge.large, +.network-status-table .ifacebox-body .ifacebadge { + display: inline-flex; + flex: 1; + padding: 10px 4px 10px 4px; + min-width: 220px; + margin: 10px 6px 4px 4px; +} + +.ifacebadge > *, +.ifacebadge.large > * { + margin: 0 .125em; +} + +.zonebadge { + padding: 2px; + border-radius: 2px; + display: inline-block; + white-space: nowrap; + color: #666; +} + +.zonebadge > em, +.zonebadge > strong { + margin: 0 2px; + display: inline-block; +} + +.zonebadge input { + width: 6em; +} + +.zonebadge > .ifacebadge { + margin-left: 2px; +} + +.zonebadge-empty { + border: 1px dashed #aaa; + color: #aaa; + font-style: italic; + font-size: smaller; +} + +div.cbi-value var, +.td.cbi-value-field var { + font-style: italic; + color: #215e21; +} + +.uci-change-list { + line-height: 170%; + white-space: pre; +} + +.uci-change-list del, +.uci-change-list ins, +.uci-change-list var, +.uci-change-legend-label del, +.uci-change-legend-label ins, +.uci-change-legend-label var { + text-decoration: none; + font-family: monospace; + font-style: normal; + border: 1px solid #ccc; + background: #eee; + padding: 2px; + display: block; + line-height: 15px; + margin-bottom: 1px; +} + +.uci-change-list ins, +.uci-change-legend-label ins { + border-color: #0f0; + background: #cfc; +} + +.uci-change-list del, +.uci-change-legend-label del { + border-color: #f00; + background: #fcc; +} + +.uci-change-list var, +.uci-change-legend-label var { + border-color: #ccc; + background: #eee; +} + +.uci-change-list var ins, +.uci-change-list var del { + display: inline-block; + border: none; + width: 100%; + padding: 0; +} + +.uci-change-legend { + padding: 5px; +} + +.uci-change-legend-label { + width: 150px; + float: left; +} + +.uci-change-legend-label > ins, +.uci-change-legend-label > del, +.uci-change-legend-label > var { + float: left; + margin-right: 4px; + width: 10px; + height: 10px; + display: block; + position: relative; +} + +.uci-change-legend-label var ins, +.uci-change-legend-label var del { + border: none; + position: absolute; + top: 2px; + left: 2px; + right: 2px; + bottom: 2px; +} + +html body.apply-overlay-active { + height: calc(100vh - 63px); +} + +#applyreboot-section { + line-height: 300%; +} + +.login{ + text-align: center; + background-color: #fff; + border-radius: 20px; + width: 300px; + height: 350px; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%,-50%); +} diff --git a/luci-theme-ezengreen/htdocs/luci-static/ezengreen/ezenlink.png b/luci-theme-ezengreen/htdocs/luci-static/ezengreen/ezenlink.png new file mode 100755 index 000000000..070a12b7d Binary files /dev/null and b/luci-theme-ezengreen/htdocs/luci-static/ezengreen/ezenlink.png differ diff --git a/luci-theme-ezengreen/htdocs/luci-static/ezengreen/favicon.ico b/luci-theme-ezengreen/htdocs/luci-static/ezengreen/favicon.ico new file mode 100755 index 000000000..dd14062c9 Binary files /dev/null and b/luci-theme-ezengreen/htdocs/luci-static/ezengreen/favicon.ico differ diff --git a/luci-theme-ezengreen/htdocs/luci-static/ezengreen/footer.png b/luci-theme-ezengreen/htdocs/luci-static/ezengreen/footer.png new file mode 100755 index 000000000..c7e2e393a Binary files /dev/null and b/luci-theme-ezengreen/htdocs/luci-static/ezengreen/footer.png differ diff --git a/luci-theme-ezengreen/htdocs/luci-static/ezengreen/mobile.css b/luci-theme-ezengreen/htdocs/luci-static/ezengreen/mobile.css new file mode 100755 index 000000000..8c2ab1f25 --- /dev/null +++ b/luci-theme-ezengreen/htdocs/luci-static/ezengreen/mobile.css @@ -0,0 +1,61 @@ +#content-desktop {display: block;} +#content-mobile {display: none;} + +@media screen and (max-width: 600px) { + +#content-desktop {display: none;} +#content-mobile {display: block;} + +} + +header h3 a, header .brand { + float: left; + display: block; + padding: 12px 6px 12px 6px; + margin: 0 0 0 10px; + font-size: 22px; + font-weight: 240; +} + +header div > ul, .nav { + display: block; + float: left; + margin: 7px 8px 0 8px; + position: relative; + left: 0; +} + +header div > ul a, .nav a { + display: block; + float: left; + padding: 12px 6px 12px 6px; + line-height: 14px; + letter-spacing: 0.2px; +} + +.menu-dropdown, .dropdown-menu { + top: 38px; + min-width: 180px; + max-width: 260px; +} + +@media screen and (max-device-width: 660px) { + #maincontent.container { + width: 98%; + margin: 30px 0 0 6px; + } +} + +@media screen and (max-device-width: 360px) { + #maincontent.container { + width: 96%; + margin: 30px 0 0 6px; + } +} + +@media screen and (max-device-width: 200px) { + #maincontent.container { + width: 94%; + margin: 40px 0 0 2px; + } +} diff --git a/luci-theme-ezengreen/htdocs/luci-static/ezengreen/outdoorrouter.png b/luci-theme-ezengreen/htdocs/luci-static/ezengreen/outdoorrouter.png new file mode 100755 index 000000000..eddd6fafc Binary files /dev/null and b/luci-theme-ezengreen/htdocs/luci-static/ezengreen/outdoorrouter.png differ diff --git a/luci-theme-ezengreen/luasrc/view/themes/ezengreen/footer.htm b/luci-theme-ezengreen/luasrc/view/themes/ezengreen/footer.htm new file mode 100644 index 000000000..47f467f03 --- /dev/null +++ b/luci-theme-ezengreen/luasrc/view/themes/ezengreen/footer.htm @@ -0,0 +1,29 @@ +<%# + Copyright 2008 Steven Barth + Copyright 2008 Jo-Philipp Wich + Copyright 2012 David Menting + Licensed to the public under the Apache License 2.0. +-%> + +<% + local ver = require "luci.version" + local disp = require "luci.dispatcher" + local request = disp.context.path + local category = request[1] + local tree = disp.node() + local categories = disp.node_childs(tree) +%> + + + + + diff --git a/luci-theme-ezengreen/luasrc/view/themes/ezengreen/header.htm b/luci-theme-ezengreen/luasrc/view/themes/ezengreen/header.htm new file mode 100644 index 000000000..4b5875d75 --- /dev/null +++ b/luci-theme-ezengreen/luasrc/view/themes/ezengreen/header.htm @@ -0,0 +1,206 @@ +<%# + Copyright 2008 Steven Barth + Copyright 2008-2016 Jo-Philipp Wich + Copyright 2012 David Menting + Licensed to the public under the Apache License 2.0. +-%> + +<% + local sys = require "luci.sys" + local util = require "luci.util" + local http = require "luci.http" + local disp = require "luci.dispatcher" + + local boardinfo = util.ubus("system", "board") + + local request = disp.context.path + local request2 = disp.context.request + + local category = request[1] + local cattree = category and disp.node(category) + + local leaf = request2[#request2] + + local tree = disp.node() + local node = disp.context.dispatched + + local categories = disp.node_childs(tree) + + local c = tree + local i, r + + -- tag all nodes leading to this page + for i, r in ipairs(request) do + if c.nodes and c.nodes[r] then + c = c.nodes[r] + c._menu_selected = true + end + end + + -- send as HTML5 + http.prepare_content("text/html") + + local function nodeurl(prefix, name, query) + local u = url(prefix, name) + if query then + u = u .. http.build_querystring(query) + end + return pcdata(u) + end + + local function render_tabmenu(prefix, node, level) + if not level then + level = 1 + end + + local childs = disp.node_childs(node) + if #childs > 0 then + if level > 2 then + write('
    ') + end + + local selected_node + local selected_name + local i, v + + for i, v in ipairs(childs) do + local nnode = node.nodes[v] + if nnode._menu_selected then + selected_node = nnode + selected_name = v + end + + if level > 2 then + write('
  • %s
    • ' %{ + v, (nnode._menu_selected or (node.leaf and v == leaf)) and 'active' or '', + nodeurl(prefix, v, nnode.query), + striptags(translate(nnode.title)) + }) + end + end + + if level > 2 then + write('
') + end + + if selected_node then + render_tabmenu(prefix .. "/" .. selected_name, selected_node, level + 1) + end + end + end + + local function render_submenu(prefix, node) + local childs = disp.node_childs(node) + if #childs > 0 then + write('
    ') + + for i, r in ipairs(childs) do + local nnode = node.nodes[r] + write('
  • %s
    • ' %{ + nodeurl(prefix, r, nnode.query), + pcdata(striptags(translate(nnode.title))) + }) + end + + write('
') + end + end + + local function render_topmenu() + local childs = disp.node_childs(cattree) + if #childs > 0 then + write('
    ') + + for i, r in ipairs(childs) do + local nnode = cattree.nodes[r] + local grandchildren = disp.node_childs(nnode) + + if #grandchildren > 0 then + write('
  • %s' % pcdata(striptags(translate(nnode.title)))) + render_submenu(category .. "/" .. r, nnode) + write('
    • ') + else + write('
  • %s
    • ' %{ + nodeurl(category, r, nnode.query), + pcdata(striptags(translate(nnode.title))) + }) + end + end + + write('
') + end + end + + local function render_changes() + -- calculate the number of unsaved changes + if tree.nodes[category] and tree.nodes[category].ucidata then + local ucichanges = 0 + + local i, j + for i, j in pairs(require("luci.model.uci").cursor():changes()) do + ucichanges = ucichanges + #j + end + + if ucichanges > 0 then + write('%s: %d' %{ + url(category, 'uci/changes'), + http.urlencode(http.formvalue('redir') or table.concat(disp.context.request, "/")), + translate('Unsaved Changes'), + ucichanges + }) + end + end + end +-%> + + + + + <%=striptags( (boardinfo.hostname or "?") .. ( (node and node.title) and ' - ' .. translate(node.title) or '')) %> - LuCI + + + + + <% if node and node.css then %> + + <% end -%> + <% if css then %> + + <% end -%> + + + + + +
+
+
+ <%=boardinfo.hostname or "?"%> + <% render_topmenu() %> +
+ +
+
+
+
+ +
+ <%- if luci.sys.process.info("uid") == 0 and luci.sys.user.getuser("root") and not luci.sys.user.getpasswd("root") then -%> +
+

<%:No password set!%>

+

<%:You are using the default router password. Please custom your router password to protect the web interface and enable SSH.%>

+
"><%:Custom router's admin password%>
+
+ <%- end -%> + + + + <% if category then render_tabmenu(category, cattree) end %> diff --git a/luci-theme-ezengreen/root/etc/uci-defaults/30_luci-theme-ezengreen b/luci-theme-ezengreen/root/etc/uci-defaults/30_luci-theme-ezengreen new file mode 100755 index 000000000..ad238fc36 --- /dev/null +++ b/luci-theme-ezengreen/root/etc/uci-defaults/30_luci-theme-ezengreen @@ -0,0 +1,7 @@ +#!/bin/sh +uci batch <<-EOF + set luci.themes.Ezengreen=/luci-static/ezengreen + set luci.main.mediaurlbase=/luci-static/ezengreen + commit luci +EOF +exit 0 diff --git a/luci-theme-lamatel/Makefile b/luci-theme-lamatel/Makefile new file mode 100644 index 000000000..530c15e06 --- /dev/null +++ b/luci-theme-lamatel/Makefile @@ -0,0 +1,16 @@ +# +# Copyright (C) 2008-2014 The LuCI Team +# +# This is free software, licensed under the Apache License, Version 2.0 . +# + +include $(TOPDIR)/rules.mk + +LUCI_TITLE:=Lamatel Theme +LUCI_DEPENDS:= + +PKG_LICENSE:=Apache-2.0 + +include ../../luci.mk + +# call BuildPackage - OpenWrt buildroot signature diff --git a/luci-theme-lamatel/htdocs/luci-static/lamatel/cascade.css b/luci-theme-lamatel/htdocs/luci-static/lamatel/cascade.css new file mode 100755 index 000000000..26bc66806 --- /dev/null +++ b/luci-theme-lamatel/htdocs/luci-static/lamatel/cascade.css @@ -0,0 +1,2022 @@ +/*! + * LuCI Bootstrap Theme + * Copyright 2012 Nut & Bolt + * By David Menting + * Based on Bootstrap v1.4.0 + * + * Copyright 2011 Twitter, Inc + * Licensed under the Apache License v2.0 + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Designed and built with all the love in the world @twitter by @mdo and @fat. + */ +/* Reset.less + * Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc). + * ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ +html { + margin: 0; + padding: 0; +} + +body { + margin: 0; + padding: 5px; +} + +h1, h2, h3, h4, h5, h6, p, pre, a, abbr, acronym, code, del, em, img, ins, q, s, +small, strike, strong, sub, sup, tt, var, dd, dl, dt, li, ol, ul, fieldset, +form, label, legend, button, table, caption, tbody, tfoot, thead, tr, th, td, +.table, .tbody, .tfoot, .thead, .tr, .th, .td { + margin: 0; + padding: 0; + border: 0; + font-weight: normal; + font-style: normal; + font-size: 100%; + line-height: 1; + font-family: inherit; +} + +abbr[title], acronym[title] { + border-bottom: 1px dotted; + font-weight: inherit; + cursor: help; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} + +ol, ul { + list-style: none; +} + +q:before, +q:after, +blockquote:before, +blockquote:after { + content: ""; +} + +html { + overflow-y: scroll; + font-size: 100%; + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; +} + +a:focus { + outline: thin dotted; +} + +a:hover, a:active { + outline: 0; +} + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +nav, +section { + display: block; +} + +sub, sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sup { + top: -0.5em; +} + +sub { + bottom: -0.25em; +} + +img { + border: 0; + -ms-interpolation-mode: bicubic; +} + +button, +input, +select, +option, +textarea { + font-size: 100%; + margin: 0; + box-sizing: border-box; + vertical-align: baseline; + *vertical-align: middle; +} + +button, input { + line-height: normal; + *overflow: visible; +} + +button::-moz-focus-inner, input::-moz-focus-inner { + border: 0; + padding: 0; +} + +button, +input[type="button"], +input[type="reset"], +input[type="submit"] { + cursor: pointer; + -webkit-appearance: button; +} + +button[disabled], +input[type="button"][disabled], +input[type="reset"][disabled], +input[type="submit"][disabled] { + opacity: 0.7; +} + +input[type="search"] { + -webkit-appearance: textfield; + box-sizing: content-box; +} + +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +textarea { + overflow: auto; + vertical-align: top; +} + +/* + * Scaffolding + * Basic and global styles for generating a grid system, structural layout, and page templates + * ------------------------------------------------------------------------------------------- */ +body { + background-color: #fff; + margin: 0; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 12px; + font-weight: normal; + line-height: 18px; + color: #404040; + padding-top: 75px; +} + +.container { + width: 100%; + max-width: 940px; + margin-left: auto; + margin-right: auto; + zoom: 1; +} + +.container:before, .container:after { + display: table; + content: ""; + zoom: 1; +} + +.container:after { + clear: both; +} + +a { + color: #f6943e; + text-decoration: none; + line-height: inherit; + font-weight: inherit; +} + +a:hover { + color: #000000; + text-decoration: none; +} + +.pull-right { + float: right; +} + +.pull-left { + float: left; +} + +/* Typography.less + * Headings, body text, lists, code, and more for a versatile and durable typography system + * ---------------------------------------------------------------------------------------- */ +p, +.cbi-map-descr, +.cbi-section-descr, +.table .tr.cbi-section-table-descr .th { + font-size: 12px; + font-weight: normal; + line-height: 18px; + margin-bottom: 9px; +} + +p small { + font-size: 11px; + color: #bfbfbf; +} + +h1, +h2, +h3, legend, +h4, +h5, +h6 { + font-weight: normal; + color: #404040; +} + +h1 small, +h2 small, +h3 small, +h4 small, +h5 small, +h6 small { + color: #bfbfbf; +} + +h1 { + margin-bottom: 18px; + font-size: 30px; + line-height: 36px; +} + +h1 small { + font-size: 18px; +} + +h2 { + font-size: 24px; + line-height: 58px; + text-transform: uppercase; + font-weight: normal; +} + +h2 small { + font-size: 14px; +} + +h3, legend, +h4, +h5, +h6 { + line-height: 48px; +} + +h3, legend { + font-size: 18px; +} + +h3 small { + font-size: 14px; +} + +h4 { + font-size: 16px; +} + +h4 small { + font-size: 12px; +} + +h5 { + font-size: 14px; +} + +h6 { + font-size: 13px; + color: #bfbfbf; + text-transform: uppercase; +} + +ul, ol { + margin: 0 0 18px 25px; +} + +ul ul, +ul ol, +ol ol, +ol ul { + margin-bottom: 0; +} + +ul { + list-style: disc; +} + +ol { + list-style: decimal; +} + +li { + line-height: 18px; + color: #808080; +} + +ul.unstyled { + list-style: none; + margin-left: 0; +} + +dl { + margin-bottom: 18px; +} + +dl dt, dl dd { + line-height: 18px; +} + +dl dt { + font-weight: bold; +} + +dl dd { + margin-left: 9px; +} + +hr { + margin: 20px 0 19px; + border: 0; + border-bottom: 1px solid #eee; +} + +strong { + font-style: inherit; + font-weight: bold; +} + +em { + font-style: italic; + font-weight: inherit; + line-height: inherit; +} + +small { font-size: 0.9em } + +address { + display: block; + line-height: 18px; + margin-bottom: 18px; +} + +code, pre { + padding: 0 3px 2px; + font-family: Monaco, Andale Mono, Courier New, monospace; + font-size: 12px; + border-radius: 2px; +} + +code { + background-color: #fee9cc; + color: rgba(0, 0, 0, 0.75); + padding: 1px 3px; +} + +pre { + background-color: #f5f5f5; + display: block; + padding: 8.5px; + margin: 0 0 18px; + line-height: 18px; + font-size: 12px; + border: 1px solid #ccc; + border: 1px solid rgba(0, 0, 0, 0.15); + border-radius: 2px; + white-space: pre; + white-space: pre-wrap; + word-wrap: break-word; +} + +/* Forms.less + * Base styles for various input types, form layouts, and states + * ------------------------------------------------------------- */ +form { + margin-bottom: 18px; +} + +fieldset { + margin-bottom: 9px; + padding-top: 9px; +} + +fieldset legend { + display: block; + font-size: 19.5px; + line-height: 1; + color: #404040; + padding-top: 20px; + *padding: 0 0 5px 0px; + /* IE6-7 */ + + *line-height: 1.5; + /* IE6-7 */ + +} +form .cbi-tab-descr { + line-height: 18px; + margin-bottom: 18px; +} + +form .clearfix, +form .cbi-value { + margin-bottom: 15px; + margin-top: 15px; + zoom: 1; +} + +form .clearfix:before, form .clearfix:after, +form .cbi-value:before, form .cbi-value:after { + display: table; + content: ""; + zoom: 1; +} + +form .clearfix:after, +form .cbi-value:after { + clear: both; +} + +label, +input, +select, +textarea { + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 12px; + font-weight: normal; + line-height: normal; +} + +form .input, +form .cbi-value-field { + margin-left: 120px; +} + +form .cbi-value label.cbi-value-title { + padding-top: 6px; + font-size: 12px; + line-height: 18px; + float: left; + width: 111px; + text-align: left; + color: #404040; +} + +input[type=checkbox], input[type=radio] { + cursor: pointer; +} + +input, +textarea, +select, +.cbi-dropdown, +.uneditable-input { + display: inline-block; + width: 200px; + height: 30px; + padding: 4px; + font-size: 12px; + line-height: 18px; + color: #808080; + border: 1px solid #ccc; + border-radius: 2px; + box-sizing: border-box; + margin: 2px 0; +} + +.cbi-dropdown { + min-width: 210px; + max-width: 400px; + width: auto; +} + +select { + padding: initial; + background: #fff; + box-shadow: inset 0 -1px 3px rgba(0, 0, 0, 0.1); +} + +input[type=checkbox], input[type=radio] { + width: auto; + height: auto; + padding: 0; + margin: 3px 0; + *margin-top: 0; + /* IE6-7 */ + + line-height: normal; + border: none; +} + +input[type=file] { + background-color: #fff; + padding: initial; + border: initial; + line-height: initial; + box-shadow: none; + width: auto !important; +} + +input[type=button], input[type=reset], input[type=submit] { + width: auto; + height: auto; +} + +select, input[type=file] { + *height: auto; + *margin-top: 4px; + /* For IE7, add top margin to align select with labels */ +} + +select[multiple] { + height: inherit; + background-color: #fff; +} + +textarea { + height: auto; +} + +.td > input[type=text], +.td > input[type=password], +.td > select, +.td > .cbi-dropdown { + width: 100%; +} + +.uneditable-input { + background-color: #fff; + display: block; + border-color: #eee; + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025); + cursor: not-allowed; +} + +::-moz-placeholder { + color: #bfbfbf; +} + +::-webkit-input-placeholder { + color: #bfbfbf; +} + +.btn, .cbi-button, input, textarea { + transition: border linear 0.2s, box-shadow linear 0.2s; + box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); + padding: 12px 6px; +} + +.btn:hover, .cbi-button:hover, +input:focus, textarea:focus { + outline: 0; + border-color: rgba(82, 168, 236, 0.8) !important; + box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6); + text-decoration: none; +} + +input[type=file]:focus, input[type=checkbox]:focus, select:focus { + box-shadow: none; + outline: 1px dotted #666; +} + +input[disabled], +select[disabled], +textarea[disabled], +input[readonly], +select[readonly], +textarea[readonly] { + background-color: #194119; + border-color: #ccc; + padding: 5px; + pointer-events: none; + cursor: default; +} + +select[readonly], +textarea[readonly] { + pointer-events: auto; + cursor: auto; +} + +.cbi-optionals, +.cbi-section-create { + padding: 0 0 10px 10px; +} + +.cbi-section-create { + margin: 10px 0 0 -10px; + display: inline-flex; + align-items: center; +} + +.cbi-section-create > * { + margin: 3px; + flex: 1 1 auto; +} + +.cbi-section-create > * > input { + width: 100%; +} + +.actions, +.cbi-page-actions { + background: #f5f5f5; + margin-bottom: 20px; + margin-top: 40px; + padding: 15px 20px 15px 20px; + border-radius: 0 0 2px 2px; + text-align: right; +} + +.actions .secondary-action, +.cbi-page-actions .secondary-action{ + float: right; +} + +.actions .secondary-action a, +.cbi-page-actions .secondary-action a { + line-height: 30px; +} + +.actions .secondary-action a:hover, +.cbi-page-actions .secondary-action a:hover { + text-decoration: none; +} + +.cbi-page-actions > form { + display: inline; + margin: 0; +} + +.help-inline, .help-block { + font-size: 12px; + line-height: 18px; + color: #bfbfbf; +} + +.help-inline { + padding-left: 5px; + *position: relative; + /* IE6-7 */ + + *top: -5px; + /* IE6-7 */ + +} + +.help-block { + display: block; + max-width: 600px; +} + +/* + * Tables.less + * Tables for, you guessed it, tabular data + * ---------------------------------------- */ +.tr { display: table-row; } +.table[width="33%"], .th[width="33%"], .td[width="33%"] { width: 33%; } +.table[width="100%"], .th[width="100%"], .td[width="100%"] { width: 100%; } + +.table { + display: table; + width: 100%; + margin: 12px 0 24px 0; + padding: 0; + font-size: 12px; + border-collapse: collapse; + position: relative; +} + +.table .th, .table .td { + display: table-cell; + vertical-align: middle; /* Fixme */ + padding: 6px 6px 6px 2px; + line-height: 18px; + text-align: left; +} + +.table .tr:first-child .th { + padding-top: 9px; + font-weight: normal; + vertical-align: top; +} + +.table .td, .table .th { + border-top: 1px solid #e7e7e7; +} + +.tr.placeholder { + height: calc(3em + 20px); +} + +.tr.placeholder > .td { + position: absolute; + left: 0; + right: 0; + bottom: 0; + text-align: center; + line-height: 3em; +} + +/* Patterns.less + * Repeatable UI elements outside the base styles provided from the scaffolding + * ---------------------------------------------------------------------------- */ +header { + height: 40px; + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: 10000; + overflow: visible; + color: #BFBFBF; +} + +header a { + color: #3f3f45; +} + +header h3 a:hover, header .brand:hover, header ul .active > a { + background-color: #fff; + text-decoration: none; +} + +header h3 { + position: relative; +} + +header h3 a, header .brand { + float: left; + display: block; + padding: 16px 20px 16px; + margin-left: -20px; + color: #3f3f45; + font-size: 24px; + font-weight: 440; + line-height: 1; +} + +header p { + margin: 0; + line-height: 40px; +} + +header .fill { + background-color: #e5e5e6; + background-repeat: repeat-x; + box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.05); + padding: 0 5px; +} + +header div > ul, .nav { + display: block; + float: left; + margin: 0 10px 0 20px; + position: relative; + left: 0; +} + +header div > ul > li, .nav > li { + display: block; + float: left; +} + +header div > ul a, .nav a { + display: block; + float: none; + padding: 22px 12px 14px 12px; + line-height: 19px; + letter-spacing: 0.4px; + text-decoration: none; + text-transform: uppercase; +} + +header div > ul a:hover, .nav a:hover { + text-decoration: none; +} + +header div > ul .active > a, .nav .active > a { + background-color: #fff; +} + +header div > ul.secondary-nav, .nav.secondary-nav { + float: right; + margin-left: 10px; + margin-right: 0; +} + +header div > ul.secondary-nav .menu-dropdown, +.nav.secondary-nav .menu-dropdown, +header div > ul.secondary-nav .dropdown-menu, +.nav.secondary-nav .dropdown-menu { + right: 0; + border: 0; +} + +header div > ul a.menu:hover, +.nav a.menu:hover, +header div > ul li.open .menu, +.nav li.open .menu, +header div > ul .dropdown-toggle:hover, +.nav .dropdown-toggle:hover, +header div > ul .dropdown.open .dropdown-toggle, +.nav .dropdown.open .dropdown-toggle { + background: #fff; +} + +header div > ul .menu-dropdown, +.nav .menu-dropdown, +header div > ul .dropdown-menu, +.nav .dropdown-menu { + background-color: #bebec0; +} + +header div > ul .menu-dropdown a.menu, +.nav .menu-dropdown a.menu, +header div > ul .dropdown-menu a.menu, +.nav .dropdown-menu a.menu, +header div > ul .menu-dropdown .dropdown-toggle, +.nav .menu-dropdown .dropdown-toggle, +header div > ul .dropdown-menu .dropdown-toggle, +.nav .dropdown-menu .dropdown-toggle { + color: #fff; +} + +header div > ul .menu-dropdown a.menu.open, +.nav .menu-dropdown a.menu.open, +header div > ul .dropdown-menu a.menu.open, +.nav .dropdown-menu a.menu.open, +header div > ul .menu-dropdown .dropdown-toggle.open, +.nav .menu-dropdown .dropdown-toggle.open, +header div > ul .dropdown-menu .dropdown-toggle.open, +.nav .dropdown-menu .dropdown-toggle.open { + background: #444; + background: rgba(255, 255, 255, 0.05); +} + +header div > ul .menu-dropdown li a, +.nav .menu-dropdown li a, +header div > ul .dropdown-menu li a, +.nav .dropdown-menu li a { + color: #3f3f45; +} + +header div > ul .menu-dropdown li a:hover, +.nav .menu-dropdown li a:hover, +header div > ul .dropdown-menu li a:hover, +.nav .dropdown-menu li a:hover { + background-color: #e5e5e6; + background-repeat: repeat-x; + color: #3f3f45; +} + +header div > ul .menu-dropdown .active a, +.nav .menu-dropdown .active a, +header div > ul .dropdown-menu .active a, +.nav .dropdown-menu .active a { + color: #fff; +} + +header div > ul .menu-dropdown .divider, +.nav .menu-dropdown .divider, +header div > ul .dropdown-menu .divider, +.nav .dropdown-menu .divider { + background-color: #222; + border-color: #444; +} + +header ul .menu-dropdown li a, header ul .dropdown-menu li a { + padding: 6px 12px; +} + +li.menu, .dropdown { + position: relative; +} + +.menu-dropdown, .dropdown-menu { + background-color: #fff; + float: left; + position: absolute; + top: 55px; + left: -9999px; + z-index: 900; + min-width: 200px; + max-width: 300px; + _width: 160px; + margin-left: 0; + margin-right: 0; + padding: 6px 0; + zoom: 1; + border-radius: 0 0 2px 2px; + background-clip: padding-box; +} + +.menu-dropdown li, .dropdown-menu li { + float: none; + display: block; + background-color: transparent; +} + +.menu-dropdown .divider, .dropdown-menu .divider { + height: 1px; + margin: 5px 0; + overflow: hidden; + background-color: #eee; + border-bottom: 1px solid #fff; +} + +header .dropdown-menu a, .dropdown-menu a { + display: block; + padding: 4px 15px; + clear: both; + font-weight: normal; + line-height: 18px; + text-transform: capitalize; + letter-spacing: 0.2px; + color: #808080; + zoom: 1.1; +} + +header .dropdown-menu a:hover, +.dropdown-menu a:hover, +header .dropdown-menu a.hover, +.dropdown-menu a.hover { + background-color: #ddd; + background-repeat: repeat-x; + color: #404040; + text-decoration: none; + box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0), inset 0 1px rgba(0, 0, 0, 0); +} + +.open .menu, +.dropdown.open .menu, +.open .dropdown-toggle, +.dropdown.open .dropdown-toggle { + color: #fff; + background: #ccc; + background: rgba(0, 0, 0, 0.3); +} + +.open .menu-dropdown, +.dropdown.open .menu-dropdown, +.open .dropdown-menu, +.dropdown.open .dropdown-menu { + left: 0; +} + +.dropdown:hover ul.dropdown-menu { + left: 0; +} + +.dropdown-menu .dropdown-menu { + position: absolute; + left: 159px; +} + +.dropdown-menu li { + position: relative; +} + +.tabs, .cbi-tabmenu { + margin: 0 0 18px; + padding: 0; + list-style: none; + zoom: 1; +} + +.tabs:before, +.cbi-tabmenu:before, +.tabs:after, +.cbi-tabmenu:after { + display: table; + content: ""; + zoom: 1; +} + +.tabs:after, .cbi-tabmenu:after { + clear: both; +} + +.tabs > li, .cbi-tabmenu > li { + float: left; +} + +.tabs > li > a, .cbi-tabmenu > li > a { + display: block; +} + +.tabs, +.cbi-tabmenu { + border-color: #ddd; + border-style: solid; + border-width: 0 0 1px; +} + +.tabs > li, +.cbi-tabmenu > li { + position: relative; + margin-bottom: -1px; +} + +.cbi-tabmenu.map { + margin: 0; +} + +.cbi-tabmenu.map > li { + font-size: 16.5px; + font-weight: bold; +} + +.cbi-tabcontainer > fieldset.cbi-section[id] > legend { + display: none; +} + +.tabs > li > a, +.cbi-tabmenu > li > a { + padding: 0 15px; + margin-right: 2px; + line-height: 34px; + border: 1px solid transparent; + border-radius: 2px 2px 0 0; +} + +.tabs > li > a:hover, +.cbi-tabmenu > li > a:hover { + text-decoration: none; + background-color: #eee; + border-color: #eee #eee #ddd; +} + +.tabs .active > a, .tabs .active > a:hover, +.cbi-tabmenu .active > a, .cbi-tabmenu .active > a:hover, +.cbi-tab > a:link, .cbi-tab > a:hover { + color: #000000; + background-color: #fff; + border: 1px solid #ddd; + border-bottom-color: transparent; + cursor: default; +} + +.tabs .menu-dropdown, .tabs .dropdown-menu, +.cbi-tabmenu .menu-dropdown, .cbi-tabmenu .dropdown-menu { + top: 35px; + border-width: 1px; + border-radius: 0 2px 2px 2px; +} + +.tabs a.menu:after, .tabs .dropdown-toggle:after, +.cbi-tabmenu a.menu:after, .cbi-tabmenu .dropdown-toggle:after { + border-top-color: #999; + margin-top: 15px; + margin-left: 5px; +} + +.tabs li.open.menu .menu, .tabs .open.dropdown .dropdown-toggle, +.cbi-tabmenu li.open.menu .menu, .cbi-tabmenu .open.dropdown .dropdown-toggle { + border-color: #999; +} + +.tabs li.open a.menu:after, .tabs .dropdown.open .dropdown-toggle:after, +.cbi-tabmenu li.open a.menu:after, .cbi-tabmenu .dropdown.open .dropdown-toggle:after { + border-top-color: #555; +} + +.tab-content > .tab-pane, +.tab-content > div { + display: none; +} + +.tab-content > .active { + display: block; +} + +.breadcrumb { + padding: 7px 14px; + margin: 0 0 18px; + background-color: #f5f5f5; + background-repeat: repeat-x; + border: 1px solid #ddd; + border-radius: 2px; + box-shadow: inset 0 1px 0 #fff; +} + +.breadcrumb li { + display: inline; +} + +.breadcrumb .divider { + padding: 0 5px; + color: #bfbfbf; +} + +.breadcrumb .active a { + color: #404040; +} + +footer { + margin-top: 30px; + padding-top: 20px; + padding-bottom: 20px; + border-top: 1px solid #404040; +} + +.btn.danger, +.alert-message.danger, +.btn.danger:hover, +.alert-message.danger:hover, +.btn.error, +.alert-message.error, +.btn.error:hover, +.alert-message.error:hover, +.btn.success, +.alert-message.success, +.btn.success:hover, +.alert-message.success:hover, +.btn.info, +.alert-message.info, +.btn.info:hover, +.alert-message.info:hover { + color: #fff; +} + +.btn .close, .alert-message .close { + font-family: Arial, sans-serif; + line-height: 18px; +} + +.btn.danger, +.alert-message.danger, +.btn.error, +.alert-message.error { + background: linear-gradient(to bottom, #ee5f5b, #c43c35) repeat-x; + border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); +} + +.btn.success, .alert-message.success { + background: linear-gradient(to bottom, #62c462, #57a957) repeat-x; + border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); +} + +.btn.info, .alert-message.info { + background: linear-gradient(to bottom, #5bc0de, #339bb9) repeat-x; + border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); +} + +.alert-message.notice { + background: linear-gradient(to bottom, #efefef, #fefefe) repeat-x; + border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); +} + +.btn, +.cbi-button { + cursor: pointer; + display: inline-block; + background: linear-gradient(#fff, #fff 25%, #e6e6e6) no-repeat; + padding: 5px 14px 6px; + color: #333; + font-size: 12px; + line-height: normal; + border: 1px solid #ccc; + border-bottom-color: #bbb; + border-radius: 2px; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); +} + +.btn:focus, +.cbi-button:focus { + outline: 1px dotted #666; +} + +.cbi-input-invalid, +.cbi-value-error input { + color: #f00; + border-color: #f00; +} + +.cbi-button-positive, +.cbi-button-fieldadd, +.cbi-button-add, +.cbi-button-save { + border-color: #4a4; + color: #4a4; +} + +.cbi-button-neutral, +.cbi-button-download, +.cbi-button-find, +.cbi-button-link, +.cbi-button-up, +.cbi-button-down { + color: #444; +} + +.btn.primary, +.cbi-button-action, +.cbi-button-apply, +.cbi-button-reload, +.cbi-button-edit { + border-color: #f6943e; + color: #f6943e; +} + +.cbi-button-negative, +.cbi-section-remove .cbi-button, +.cbi-button-reset, +.cbi-button-remove { + border-color: #c44; + color: #c44; +} + +.cbi-page-actions::after { + display: table; + content: ""; + clear: both; +} + +.cbi-page-actions > :not([method="post"]):not(.cbi-button-apply):not(.cbi-button-save):not(.cbi-button-reset) { + float: left; + margin-right: .4em; +} + +.btn.primary, +.cbi-button-action.important, +.cbi-page-actions .cbi-button-apply, +.cbi-section-actions .cbi-button-edit { + color: #fff; + background: #f6943e; +} + +.cbi-button-positive.important, +.cbi-page-actions .cbi-button-save { + color: #fff; + background: linear-gradient(to bottom, #4a4, #484) no-repeat; +} + +.cbi-button-negative.important { + color: #fff; + background: linear-gradient(to bottom, #c44, #c00) no-repeat; +} + +.cbi-page-actions .cbi-button-apply + .cbi-button-save { + background: linear-gradient(#fff, #fff 25%, #e6e6e6); + color: #4a4; +} + +.cbi-dropdown { + border: 1px solid #ccc; + border-radius: 2px; + display: inline-flex; + padding: 0; + cursor: pointer; + height: auto; + background: linear-gradient(#fff 0%, #e9e8e6 100%); + position: relative; + color: #404040; +} + +.cbi-dropdown:focus { + outline: 2px solid #f6943e; +} + +.cbi-dropdown > ul { + margin: 0 !important; + padding: 0; + list-style: none; + overflow-x: hidden; + overflow-y: auto; + display: flex; + width: 100%; +} + +.cbi-dropdown > ul.preview { + display: none; +} + +.cbi-dropdown > .open, +.cbi-dropdown > .more { + flex-grow: 0; + flex-shrink: 0; + display: flex; + flex-direction: column; + justify-content: center; + text-align: center; + line-height: 2em; + padding: 0 .25em; +} + +.cbi-dropdown > .more, +.cbi-dropdown > ul > li[placeholder] { + color: #777; + font-weight: bold; + display: none; +} + +.cbi-dropdown > ul > li { + display: none; + padding: .25em; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + flex-shrink: 1; + flex-grow: 1; + align-items: center; + align-self: center; + color: #404040; + min-height: 20px; +} + +.cbi-dropdown > ul > li .hide-open { display: block; display: initial; } +.cbi-dropdown > ul > li .hide-close { display: none; } + +.cbi-dropdown > ul > li[display]:not([display="0"]) { + border-left: 1px solid #ccc; +} + +.cbi-dropdown[empty] > ul { + max-width: 1px; +} + +.cbi-dropdown > ul > li > form { + display: none; + margin: 0; + padding: 0; + pointer-events: none; +} + +.cbi-dropdown > ul > li img { + vertical-align: middle; + margin-right: .25em; +} + +.cbi-dropdown > ul > li > form > input[type="checkbox"] { + margin: 0; +} + +.cbi-dropdown > ul > li input[type="text"] { + height: 20px; +} + +.cbi-dropdown[open] { + position: relative; +} + +.cbi-dropdown[open] > ul.dropdown { + display: block; + background: #f6f6f5; + border: 1px solid #918e8c; + box-shadow: 0 0 4px #918e8c; + position: absolute; + z-index: 1000; + max-width: none; + min-width: 100%; + width: auto; +} + +.cbi-dropdown > ul > li[display], +.cbi-dropdown[open] > ul.preview, +.cbi-dropdown[open] > ul.dropdown > li, +.cbi-dropdown[multiple] > ul > li > label, +.cbi-dropdown[multiple][open] > ul.dropdown > li, +.cbi-dropdown[multiple][more] > .more, +.cbi-dropdown[multiple][empty] > .more { + flex-grow: 1; + display: flex; +} + +.cbi-dropdown[empty] > ul > li, +.cbi-dropdown[optional][open] > ul.dropdown > li[placeholder], +.cbi-dropdown[multiple][open] > ul.dropdown > li > form { + display: block; +} + +.cbi-dropdown[open] > ul.dropdown > li .hide-open { display: none; } +.cbi-dropdown[open] > ul.dropdown > li .hide-close { display: block; display: initial; } + +.cbi-dropdown[open] > ul.dropdown > li { + border-bottom: 1px solid #ccc; +} + +.cbi-dropdown[open] > ul.dropdown > li[selected] { + background: #b0d0f0; +} + +.cbi-dropdown[open] > ul.dropdown > li.focus { + background: linear-gradient(90deg, #a3c2e8 0%, #84aad9 100%); +} + +.cbi-dropdown[open] > ul.dropdown > li:last-child { + margin-bottom: 0; + border-bottom: none; +} + +.cbi-dropdown[disabled] { + pointer-events: none; + opacity: .6; +} + +input[type="text"] + .cbi-button, +input[type="password"] + .cbi-button, +select + .cbi-button { + border-radius: 2px; + border-color: #ccc; + margin: 2px 0 2px 3px; + padding: 0 12px; + vertical-align: top; + height: 28px; + font-size: 13px; + font-weight: normal; + line-height: 28px; +} + +select + .cbi-button { + #border-left-color: transparent; +} + +.cbi-title-ref { + color: #f39800; +} + +.cbi-title-ref::after { + content: " ➙ "; +} + +.cbi-tooltip-container { + cursor: help; + padding: 5px 3px 5px 3px; +} + +.cbi-tooltip { + position: absolute; + z-index: 1000; + left: -1000px; + opacity: 0; + transition: opacity .25s ease-out; +} + +.cbi-tooltip-container:hover .cbi-tooltip:not(:empty) { + left: auto; + opacity: 1; + transition: opacity .25s ease-in; +} + +.zonebadge .cbi-tooltip { + padding: 1px; + background: inherit; + margin: -1.6em 0 0 -5px; + border-radius: 2px; + pointer-events: none; + box-shadow: 0 0 3px #444; +} + +.zonebadge .cbi-tooltip > * { + margin: 1px; +} + +.zone-forwards { + display: flex; + flex-wrap: wrap; +} + +.zone-forwards > * { + flex: 1 1 40%; + padding: 1px; +} + +.zone-forwards > span { + flex-basis: 10%; + text-align: center; +} + +.zone-forwards .zone-src, +.zone-forwards .zone-dest { + display: flex; + flex-direction: column; +} + +.btn.active, .btn:active { + box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05); +} + +.btn.disabled { + cursor: default; + background-image: none; + opacity: 0.65; + box-shadow: none; +} + +.btn[disabled] { + cursor: default; + background-image: none; + opacity: 0.65; + box-shadow: none; +} + +.btn.large { + font-size: 15px; + line-height: normal; + padding: 9px 14px 9px; + border-radius: 2px; +} + +.btn.small { + padding: 7px 9px 7px; + font-size: 11px; +} + +button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { + padding: 0; + border: 0; +} + +.close { + float: right; + color: #000; + font-size: 20px; + font-weight: bold; + line-height: 13.5px; + opacity: 0.25; +} + +.close:hover { + color: #000; + text-decoration: none; + opacity: 0.4; +} + +.alert-message { + position: relative; + padding: 30px; + margin-top: 25px; + margin-bottom: 25px; + color: #404040; + background: #f0e68c; + border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); + border-width: 1px; + border-style: solid; + border-radius: 2px; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); +} + +.alert-message .close { + margin-top: 1px; + *margin-top: 0; +} + +.alert-message a { + font-weight: bold; + color: #404040; +} + +.alert-message.danger p a, +.alert-message.error p a, +.alert-message.success p a, +.alert-message.info p a { + color: #fff; +} + +.alert-message h5 { + line-height: 18px; +} + +.alert-message p { + margin-bottom: 0; +} + +.alert-message div { + margin-top: 15px; + margin-bottom: 10px; + line-height: 28px; +} + +.label { + padding: 3px 3px 3px 3px; + font-size: 8px; + font-weight: normal; + color: #fff !important; + text-transform: uppercase; + white-space: nowrap; + background-color: #bfbfbf; + border-radius: 2px; + text-shadow: none; +} + +a.label:link, +a.label:visited { + color: #fff; +} + +a.label:hover { + text-decoration: none; +} + +.label.important { + background-color: #c43c35; +} + +.label.warning { + background-color: #f89406; +} + +.label.success { + background-color: #f6943e; +} + +.label.notice { + background-color: #62cffc; +} + +/* LuCI specific items */ +.hidden { display: none } + +#memtotal > div, +#memfree > div, +#memcache > div, +#membuff > div, +#conns > div { + border: 1px solid #ccc; + border-radius: 2px 2px 2px 2px; + color: #808080; + display: inline-block; + font-size: 12px; + line-height: 18px; +} + +#xhr_poll_status { + cursor: pointer; +} + +form.inline { display: inline; margin-bottom: 0; } + +header .pull-right { padding-top: 21px; } + +#modemenu li:last-child span.divider { display: none } + +#syslog { width: 100%; } + +.cbi-section-table .tr:hover .td, +.cbi-section-table .tr:hover .th, +.cbi-section-table .tr:hover::before { + background-color: #f5f5f5; +} + +.cbi-section-table .tr.cbi-section-table-descr .th { + font-weight: normal; +} + +.cbi-section-table-titles.named::before, +.cbi-section-table-descr.named::before, +.cbi-section-table-row[data-title]::before { + content: attr(data-title) " "; + display: table-cell; + padding: 10px 10px 9px; + line-height: 18px; + font-weight: bold; + vertical-align: middle; +} + +.cbi-section-table-titles.named::before, +.cbi-section-table-descr.named::before, +.cbi-section-table-row[data-title]::before { + border-top: 1px solid #ddd; +} + +.left { text-align: left !important; } +.right { text-align: right !important; } +.center { text-align: center !important; } +.top { vertical-align: top !important; } +.middle { vertical-align: middle !important; } +.bottom { vertical-align: bottom !important; } + +.cbi-value-field { line-height: 1.5em; } + +.cbi-value-field input[type=checkbox], +.cbi-value-field input[type=radio] { + margin-top: 8px; + margin-right: 6px; +} + +table table td, +.cbi-value-field table td { + border: none; +} + +.table.cbi-section-table input[type="password"], +.table.cbi-section-table input[type="text"], +.table.cbi-section-table textarea, +.table.cbi-section-table select { + width: 100%; +} + +.table.cbi-section-table .td.cbi-section-table-cell { + white-space: nowrap; + text-align: right; +} + +.table.cbi-section-table .td.cbi-section-table-cell select { + width: inherit; +} + +.td.cbi-section-actions { + text-align: right; + vertical-align: middle; +} + +.td.cbi-section-actions > * { + display: flex; +} + +.td.cbi-section-actions > * > *, +.td.cbi-section-actions > * > form > * { + flex: 1 1 4em; + margin: 0 1px; +} + +.td.cbi-section-actions > * > form { + display: inline-flex; + margin: 0; +} + +.table.valign-middle .td { + vertical-align: middle; +} + +.cbi-rowstyle-2, +.tr.table-titles, +.tr.cbi-section-table-titles { + background: #f9f9f9; +} + +.cbi-value-description { + background-image: url(/luci-static/resources/cbi/help.gif); + background-position: .25em .2em; + background-repeat: no-repeat; + margin: 10px 0 10px -5px; + padding: 0 0 0 26px; +} + +.cbi-section-error { + border: 1px solid #f00; + border-radius: 2px; + background-color: #fce6e6; + padding: 5px; + margin-bottom: 18px; +} + +.cbi-section-error ul { margin: 0 0 0 20px; } + +.cbi-section-error ul li { + color: #f00; + font-weight: bold; +} + +.ifacebox { + background-color: #fff; + border: 1px solid #ccc; + margin: 6px 4px; + text-align: center; + white-space: nowrap; + background-image: linear-gradient(#fff, #fff 25%, #f9f9f9); + border-radius: 2px; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); + display: inline-flex; + flex-direction: column; + line-height: 1.2em; + min-width: 100px; +} + +.ifacebox .ifacebox-head { + border-bottom: 1px solid #ccc; + padding: 10px; + line-height: 1.2em; + background: #eee; +} + +.ifacebox .ifacebox-head.active { + background: #f0e68c; +} + +.ifacebox .ifacebox-body { + padding: .25em; +} + +.ifacebadge { + display: inline-block; + flex-direction: row; + white-space: nowrap; + background-color: #fff; + border: 1px solid #ccc; + padding: 5px 5px 3px 5px; + background-image: linear-gradient(#fff, #fff 25%, #f9f9f9); + border-radius: 2px; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); + cursor: default; + line-height: 1.2em; +} + +.ifacebadge img { + width: 16px; + height: 16px; + vertical-align: middle; +} + +.ifacebadge-active { + border-color: #000; + font-weight: bold; +} + +.network-status-table { + display: flex; + flex-wrap: wrap; +} + +.network-status-table .ifacebox { + margin: 10px 10px 15px 2px; + flex-grow: 1; +} + +.network-status-table .ifacebox-body { + display: flex; + flex-direction: column; + height: 100%; + text-align: left; + padding: 8px; +} + +.network-status-table .ifacebox-body > * { + margin: .25em; +} + +.network-status-table .ifacebox-body > span { + flex: 10 10 auto; + height: 100%; +} + +.network-status-table .ifacebox-body > div { + display: flex; + flex-wrap: wrap; + margin: -.125em; +} + +#dsl_status_table .ifacebox-body > span > strong { + display: inline-block; + min-width: 35%; +} + +.ifacebadge.large, +.network-status-table .ifacebox-body .ifacebadge { + display: inline-flex; + flex: 1; + padding: 10px 4px 10px 4px; + min-width: 220px; + margin: 10px 6px 4px 4px; +} + +.ifacebadge > *, +.ifacebadge.large > * { + margin: 0 .125em; +} + +.zonebadge { + padding: 2px; + border-radius: 2px; + display: inline-block; + white-space: nowrap; + color: #666; +} + +.zonebadge > em, +.zonebadge > strong { + margin: 0 2px; + display: inline-block; +} + +.zonebadge input { + width: 6em; +} + +.zonebadge > .ifacebadge { + margin-left: 2px; +} + +.zonebadge-empty { + border: 1px dashed #aaa; + color: #aaa; + font-style: italic; + font-size: smaller; +} + +div.cbi-value var, +.td.cbi-value-field var { + font-style: italic; + color: #f6943e; +} + +.uci-change-list { + line-height: 170%; + white-space: pre; +} + +.uci-change-list del, +.uci-change-list ins, +.uci-change-list var, +.uci-change-legend-label del, +.uci-change-legend-label ins, +.uci-change-legend-label var { + text-decoration: none; + font-family: monospace; + font-style: normal; + border: 1px solid #ccc; + background: #eee; + padding: 2px; + display: block; + line-height: 15px; + margin-bottom: 1px; +} + +.uci-change-list ins, +.uci-change-legend-label ins { + border-color: #0f0; + background: #cfc; +} + +.uci-change-list del, +.uci-change-legend-label del { + border-color: #f00; + background: #fcc; +} + +.uci-change-list var, +.uci-change-legend-label var { + border-color: #ccc; + background: #eee; +} + +.uci-change-list var ins, +.uci-change-list var del { + display: inline-block; + border: none; + width: 100%; + padding: 0; +} + +.uci-change-legend { + padding: 5px; +} + +.uci-change-legend-label { + width: 150px; + float: left; +} + +.uci-change-legend-label > ins, +.uci-change-legend-label > del, +.uci-change-legend-label > var { + float: left; + margin-right: 4px; + width: 10px; + height: 10px; + display: block; + position: relative; +} + +.uci-change-legend-label var ins, +.uci-change-legend-label var del { + border: none; + position: absolute; + top: 2px; + left: 2px; + right: 2px; + bottom: 2px; +} + +html body.apply-overlay-active { + height: calc(100vh - 63px); +} + +#applyreboot-section { + line-height: 300%; +} + +.login{ + text-align: center; + background-color: #fff; + border-radius: 20px; + width: 300px; + height: 350px; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%,-50%); +} diff --git a/luci-theme-lamatel/htdocs/luci-static/lamatel/ezenlink.png b/luci-theme-lamatel/htdocs/luci-static/lamatel/ezenlink.png new file mode 100755 index 000000000..070a12b7d Binary files /dev/null and b/luci-theme-lamatel/htdocs/luci-static/lamatel/ezenlink.png differ diff --git a/luci-theme-lamatel/htdocs/luci-static/lamatel/favicon.ico b/luci-theme-lamatel/htdocs/luci-static/lamatel/favicon.ico new file mode 100755 index 000000000..674d8e5d0 Binary files /dev/null and b/luci-theme-lamatel/htdocs/luci-static/lamatel/favicon.ico differ diff --git a/luci-theme-lamatel/htdocs/luci-static/lamatel/footer.png b/luci-theme-lamatel/htdocs/luci-static/lamatel/footer.png new file mode 100755 index 000000000..ef3914007 Binary files /dev/null and b/luci-theme-lamatel/htdocs/luci-static/lamatel/footer.png differ diff --git a/luci-theme-lamatel/htdocs/luci-static/lamatel/logo.png b/luci-theme-lamatel/htdocs/luci-static/lamatel/logo.png new file mode 100755 index 000000000..2b7dd1c51 Binary files /dev/null and b/luci-theme-lamatel/htdocs/luci-static/lamatel/logo.png differ diff --git a/luci-theme-lamatel/htdocs/luci-static/lamatel/mobile.css b/luci-theme-lamatel/htdocs/luci-static/lamatel/mobile.css new file mode 100755 index 000000000..8c2ab1f25 --- /dev/null +++ b/luci-theme-lamatel/htdocs/luci-static/lamatel/mobile.css @@ -0,0 +1,61 @@ +#content-desktop {display: block;} +#content-mobile {display: none;} + +@media screen and (max-width: 600px) { + +#content-desktop {display: none;} +#content-mobile {display: block;} + +} + +header h3 a, header .brand { + float: left; + display: block; + padding: 12px 6px 12px 6px; + margin: 0 0 0 10px; + font-size: 22px; + font-weight: 240; +} + +header div > ul, .nav { + display: block; + float: left; + margin: 7px 8px 0 8px; + position: relative; + left: 0; +} + +header div > ul a, .nav a { + display: block; + float: left; + padding: 12px 6px 12px 6px; + line-height: 14px; + letter-spacing: 0.2px; +} + +.menu-dropdown, .dropdown-menu { + top: 38px; + min-width: 180px; + max-width: 260px; +} + +@media screen and (max-device-width: 660px) { + #maincontent.container { + width: 98%; + margin: 30px 0 0 6px; + } +} + +@media screen and (max-device-width: 360px) { + #maincontent.container { + width: 96%; + margin: 30px 0 0 6px; + } +} + +@media screen and (max-device-width: 200px) { + #maincontent.container { + width: 94%; + margin: 40px 0 0 2px; + } +} diff --git a/luci-theme-lamatel/luasrc/view/themes/lamatel/footer.htm b/luci-theme-lamatel/luasrc/view/themes/lamatel/footer.htm new file mode 100644 index 000000000..eb0994f74 --- /dev/null +++ b/luci-theme-lamatel/luasrc/view/themes/lamatel/footer.htm @@ -0,0 +1,29 @@ +<%# + Copyright 2008 Steven Barth + Copyright 2008 Jo-Philipp Wich + Copyright 2012 David Menting + Licensed to the public under the Apache License 2.0. +-%> + +<% + local ver = require "luci.version" + local disp = require "luci.dispatcher" + local request = disp.context.path + local category = request[1] + local tree = disp.node() + local categories = disp.node_childs(tree) +%> + +
+ + + diff --git a/luci-theme-lamatel/luasrc/view/themes/lamatel/header.htm b/luci-theme-lamatel/luasrc/view/themes/lamatel/header.htm new file mode 100644 index 000000000..cf042bb8c --- /dev/null +++ b/luci-theme-lamatel/luasrc/view/themes/lamatel/header.htm @@ -0,0 +1,206 @@ +<%# + Copyright 2008 Steven Barth + Copyright 2008-2016 Jo-Philipp Wich + Copyright 2012 David Menting + Licensed to the public under the Apache License 2.0. +-%> + +<% + local sys = require "luci.sys" + local util = require "luci.util" + local http = require "luci.http" + local disp = require "luci.dispatcher" + + local boardinfo = util.ubus("system", "board") + + local request = disp.context.path + local request2 = disp.context.request + + local category = request[1] + local cattree = category and disp.node(category) + + local leaf = request2[#request2] + + local tree = disp.node() + local node = disp.context.dispatched + + local categories = disp.node_childs(tree) + + local c = tree + local i, r + + -- tag all nodes leading to this page + for i, r in ipairs(request) do + if c.nodes and c.nodes[r] then + c = c.nodes[r] + c._menu_selected = true + end + end + + -- send as HTML5 + http.prepare_content("text/html") + + local function nodeurl(prefix, name, query) + local u = url(prefix, name) + if query then + u = u .. http.build_querystring(query) + end + return pcdata(u) + end + + local function render_tabmenu(prefix, node, level) + if not level then + level = 1 + end + + local childs = disp.node_childs(node) + if #childs > 0 then + if level > 2 then + write('
    ') + end + + local selected_node + local selected_name + local i, v + + for i, v in ipairs(childs) do + local nnode = node.nodes[v] + if nnode._menu_selected then + selected_node = nnode + selected_name = v + end + + if level > 2 then + write('
  • %s
    • ' %{ + v, (nnode._menu_selected or (node.leaf and v == leaf)) and 'active' or '', + nodeurl(prefix, v, nnode.query), + striptags(translate(nnode.title)) + }) + end + end + + if level > 2 then + write('
') + end + + if selected_node then + render_tabmenu(prefix .. "/" .. selected_name, selected_node, level + 1) + end + end + end + + local function render_submenu(prefix, node) + local childs = disp.node_childs(node) + if #childs > 0 then + write('
    ') + + for i, r in ipairs(childs) do + local nnode = node.nodes[r] + write('
  • %s
    • ' %{ + nodeurl(prefix, r, nnode.query), + pcdata(striptags(translate(nnode.title))) + }) + end + + write('
') + end + end + + local function render_topmenu() + local childs = disp.node_childs(cattree) + if #childs > 0 then + write('
    ') + + for i, r in ipairs(childs) do + local nnode = cattree.nodes[r] + local grandchildren = disp.node_childs(nnode) + + if #grandchildren > 0 then + write('
  • %s' % pcdata(striptags(translate(nnode.title)))) + render_submenu(category .. "/" .. r, nnode) + write('
    • ') + else + write('
  • %s
    • ' %{ + nodeurl(category, r, nnode.query), + pcdata(striptags(translate(nnode.title))) + }) + end + end + + write('
') + end + end + + local function render_changes() + -- calculate the number of unsaved changes + if tree.nodes[category] and tree.nodes[category].ucidata then + local ucichanges = 0 + + local i, j + for i, j in pairs(require("luci.model.uci").cursor():changes()) do + ucichanges = ucichanges + #j + end + + if ucichanges > 0 then + write('%s: %d' %{ + url(category, 'uci/changes'), + http.urlencode(http.formvalue('redir') or table.concat(disp.context.request, "/")), + translate('Unsaved Changes'), + ucichanges + }) + end + end + end +-%> + + + + + <%=striptags( (boardinfo.hostname or "?") .. ( (node and node.title) and ' - ' .. translate(node.title) or '')) %> - LuCI + + + + + <% if node and node.css then %> + + <% end -%> + <% if css then %> + + <% end -%> + + + + + +
+
+
+ Outdoor Router + <% render_topmenu() %> +
+ +
+
+
+
+ +
+ <%- if luci.sys.process.info("uid") == 0 and luci.sys.user.getuser("root") and not luci.sys.user.getpasswd("root") then -%> +
+

<%:No password set!%>

+

<%:You are using the default router password. Please custom your router password to protect the web interface and enable SSH.%>

+
"><%:Custom router's admin password%>
+
+ <%- end -%> + + + + <% if category then render_tabmenu(category, cattree) end %> diff --git a/luci-theme-lamatel/root/etc/uci-defaults/30_luci-theme-lametal b/luci-theme-lamatel/root/etc/uci-defaults/30_luci-theme-lametal new file mode 100755 index 000000000..3c64379bd --- /dev/null +++ b/luci-theme-lamatel/root/etc/uci-defaults/30_luci-theme-lametal @@ -0,0 +1,7 @@ +#!/bin/sh +uci batch <<-EOF + set luci.themes.lamtel=/luci-static/lamatel + set luci.main.mediaurlbase=/luci-static/lamatel + commit luci +EOF +exit 0