diff --git a/package/gluon-config-mode/Makefile b/package/gluon-config-mode/Makefile
index 75a87826e26d586211cf05d975b2c86b33ad11ab..dfd252eff0226b73a6a693372fbea910cd79a03c 100644
--- a/package/gluon-config-mode/Makefile
+++ b/package/gluon-config-mode/Makefile
@@ -15,7 +15,7 @@ define Package/gluon-config-mode
SECTION:=gluon
CATEGORY:=Gluon
TITLE:=Luci based config mode for user friendly setup of new meshnodes
- DEPENDS:=+gluon-core +gluon-lock-password +gluon-location +gluon-simple-tc +uhttpd +dnsmasq +luci-mod-admin-core +ip +luci-theme-openwrt
+ DEPENDS:=+gluon-core +gluon-lock-password +gluon-location +gluon-simple-tc +gluon-luci-theme +uhttpd +dnsmasq +luci-mod-admin-core +ip
endef
define Package/gluon-config-mode/description
diff --git a/package/gluon-config-mode/files/usr/lib/lua/luci/model/cbi/gluon-config-mode/wizard.lua b/package/gluon-config-mode/files/usr/lib/lua/luci/model/cbi/gluon-config-mode/wizard.lua
index 9c1ee2fbb99d412f2a2ba4b3445e6e04ae7a0f43..a7d13490029a4af3ee8587345bff930e4b7dd400 100644
--- a/package/gluon-config-mode/files/usr/lib/lua/luci/model/cbi/gluon-config-mode/wizard.lua
+++ b/package/gluon-config-mode/files/usr/lib/lua/luci/model/cbi/gluon-config-mode/wizard.lua
@@ -9,7 +9,7 @@ configmode.setup_fastd_secret(meshvpn_name)
f = SimpleForm("wizard", "Willkommen!", "Willkommen zum Einrichtungsassistenten für deinen neuen Lübecker Freifunk-Knoten. Fülle das folgende Formular deinen Vorstellungen entsprechend aus und klicke anschließend auf den „Senden“-Button.")
f.reset = false
-s = f:section(SimpleSection, "Grundeinstellungen", nil)
+s = f:section(SimpleSection, nil, nil)
o = s:option(Value, "_hostname", "Knotenname")
o.value = uci:get_first("system", "system", "hostname")
@@ -22,7 +22,7 @@ o.default = uci:get_bool("autoupdater", "settings", "enabled") and o.enabled or
o.rmempty = false
o.description = "Aktiviert automatische Updates der Firmware (empfohlen)"
-s = f:section(SimpleSection, "Mesh-VPN", "Nutzt die Internet-Verbindung, um diesem Knoten auch dann Zugang zum Freifunknetz zu geben, wenn er außerhalb der Funkreichweite anderer Freifunk-Knoten ist.")
+s = f:section(SimpleSection, nil, "Nutzt die Internet-Verbindung, um diesem Knoten auch dann Zugang zum Freifunknetz zu geben, wenn er außerhalb der Funkreichweite anderer Freifunk-Knoten ist.")
o = s:option(Flag, "_meshvpn", "Mesh-VPN aktivieren?")
o.default = uci:get_bool("fastd", meshvpn_name, "enabled") and o.enabled or o.disabled
@@ -46,7 +46,7 @@ o.value = uci:get("gluon-simple-tc", meshvpn_name, "limit_egress")
o.rmempty = false
o.datatype = "integer"
-s = f:section(SimpleSection, "GPS Koordinaten", "Hier kannst du die GPS-Koordinaten deines Knotens eintragen, um ihn in der Knotenkarte anzeigen zu lassen.")
+s = f:section(SimpleSection, nil, "Hier kannst du die GPS-Koordinaten deines Knotens eintragen, um ihn in der Knotenkarte anzeigen zu lassen.")
o = s:option(Flag, "_location", "Koordinaten veröffentlichen?")
o.default = uci:get_first("gluon-locaton", "location", "share_location", o.disabled)
diff --git a/package/gluon-config-mode/generate/usr/lib/lua/luci/view/gluon-config-mode/reboot.htm b/package/gluon-config-mode/generate/usr/lib/lua/luci/view/gluon-config-mode/reboot.htm
index 7d192b6a67c7a0434bc5ddde306d67601599de71..27be938512dc001f46319c86644dde6f60e29430 100644
--- a/package/gluon-config-mode/generate/usr/lib/lua/luci/view/gluon-config-mode/reboot.htm
+++ b/package/gluon-config-mode/generate/usr/lib/lua/luci/view/gluon-config-mode/reboot.htm
@@ -27,7 +27,7 @@ $Id$
<p>
@config_mode.msg_pubkey@
</p>
- <div style="text-align: left;font-size: 2em;line-height: 1em; background: #f5f5f5; border: 1px solid #ececec; margin-bottom: 0.5em; padding: 0.5em">
+ <div class="the-key">
# <%=luci.sys.hostname()%>
<br/>
<%=pubkey%>
diff --git a/package/gluon-luci-admin/Makefile b/package/gluon-luci-admin/Makefile
index 45a849dc6a96174cd6951125840c03fdb8615eac..d9d963814a264dfd33f7c9092352591770f4139e 100644
--- a/package/gluon-luci-admin/Makefile
+++ b/package/gluon-luci-admin/Makefile
@@ -15,7 +15,7 @@ define Package/gluon-luci-admin
SECTION:=gluon
CATEGORY:=Gluon
TITLE:=Luci based simple administration interface for mesh nodes
- DEPENDS:=+gluon-core +luci-mod-admin-core +luci-theme-openwrt
+ DEPENDS:=+gluon-core +gluon-luci-theme +luci-mod-admin-core
endef
define Package/gluon-luci-admin/description
diff --git a/package/gluon-luci-theme/Makefile b/package/gluon-luci-theme/Makefile
new file mode 100644
index 0000000000000000000000000000000000000000..4fc947c46ac3498c656445c31b67ec20ef8365ff
--- /dev/null
+++ b/package/gluon-luci-theme/Makefile
@@ -0,0 +1,39 @@
+# Copyright (C) 2013 Nils Schneider <nils at nilsschneider.net>
+# This is free software, licensed under the Apache 2.0 license.
+
+include $(TOPDIR)/rules.mk
+
+PKG_NAME:=gluon-luci-theme
+PKG_VERSION:=0.1
+PKG_RELEASE:=1
+
+PKG_BUILD_DIR := $(BUILD_DIR)/$(PKG_NAME)
+
+include $(INCLUDE_DIR)/package.mk
+
+define Package/gluon-luci-theme
+ SECTION:=gluon
+ CATEGORY:=Gluon
+ TITLE:=Luci theme for Gluon
+ DEPENDS:=
+endef
+
+define Package/gluon-luci-theme/description
+ Luci based config mode
+endef
+
+define Build/Prepare
+ mkdir -p $(PKG_BUILD_DIR)
+endef
+
+define Build/Configure
+endef
+
+define Build/Compile
+endef
+
+define Package/gluon-luci-theme/install
+ $(CP) ./files/* $(1)/
+endef
+
+$(eval $(call BuildPackage,gluon-luci-theme))
diff --git a/package/gluon-luci-theme/files/etc/uci-defaults/luci-theme-gluon b/package/gluon-luci-theme/files/etc/uci-defaults/luci-theme-gluon
new file mode 100755
index 0000000000000000000000000000000000000000..795bd186ae160441ac77bf902eb5ae01163e1bf7
--- /dev/null
+++ b/package/gluon-luci-theme/files/etc/uci-defaults/luci-theme-gluon
@@ -0,0 +1,6 @@
+#!/bin/sh
+uci batch <<-EOF
+ set luci.themes.Gluon=/luci-static/gluon
+ commit luci
+EOF
+
diff --git a/package/gluon-luci-theme/files/usr/lib/lua/luci/view/themes/gluon/footer.htm b/package/gluon-luci-theme/files/usr/lib/lua/luci/view/themes/gluon/footer.htm
new file mode 100644
index 0000000000000000000000000000000000000000..6b7090307a0f447b2a6192678972ec8fa420e0c3
--- /dev/null
+++ b/package/gluon-luci-theme/files/usr/lib/lua/luci/view/themes/gluon/footer.htm
@@ -0,0 +1,19 @@
+<%#
+LuCI - Lua Configuration Interface
+Copyright 2008 Steven Barth <steven@midlink.org>
+Copyright 2008 Jo-Philipp Wich <xm@leipzig.freifunk.net>
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+$Id$
+
+-%>
+</div>
+</div>
+
+</body>
+</html>
diff --git a/package/gluon-luci-theme/files/usr/lib/lua/luci/view/themes/gluon/header.htm b/package/gluon-luci-theme/files/usr/lib/lua/luci/view/themes/gluon/header.htm
new file mode 100644
index 0000000000000000000000000000000000000000..c0f10b7547fda6eecbf05a1d3b8ca7d32550caf6
--- /dev/null
+++ b/package/gluon-luci-theme/files/usr/lib/lua/luci/view/themes/gluon/header.htm
@@ -0,0 +1,164 @@
+<%#
+LuCI - Lua Configuration Interface
+Copyright 2008 Steven Barth <steven@midlink.org>
+Copyright 2008-2010 Jo-Philipp Wich <xm@subsignal.org>
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+$Id$
+
+-%>
+<%
+ local sys = require "luci.sys"
+ local http = require "luci.http"
+ local disp = require "luci.dispatcher"
+
+ local hostname = sys.hostname()
+ local load1, load5, load15 = sys.loadavg()
+
+ 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
+
+ http.prepare_content("application/xhtml+xml")
+
+ local function nodeurl(prefix, name, query)
+ local url = controller .. prefix .. name .. "/"
+ if query then
+ url = url .. http.build_querystring(query)
+ end
+ return pcdata(url)
+ end
+
+ local function subtree(prefix, node, level)
+ if not level then
+ level = 1
+ end
+
+ local childs = disp.node_childs(node)
+ if #childs > 0 then
+%>
+ <div class="tabmenu<%=level%>">
+ <ul class="tabmenu l<%=level%>">
+ <%
+ 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
+ %>
+ <li class="tabmenu-item-<%=v%><% if nnode._menu_selected or (node.leaf and v == leaf) then %> active<% end %>">
+ <a href="<%=nodeurl(prefix, v, nnode.query)%>"><%=striptags(translate(nnode.title))%></a>
+ </li>
+ <%
+ end
+ %>
+ </ul>
+ <br style="clear:both" />
+<%
+ if selected_node then
+ subtree(prefix .. selected_name .. "/", selected_node, level + 1)
+ end
+%>
+ </div>
+<%
+ end
+ end
+-%>
+
+<?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">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<%=luci.i18n.context.lang%>" lang="<%=luci.i18n.context.lang%>">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<meta http-equiv="Content-Script-Type" content="text/javascript" />
+<link rel="stylesheet" type="text/css" media="screen" href="<%=media%>/cascade.css" />
+<% if node and node.css then %><link rel="stylesheet" type="text/css" media="screen" href="<%=resource%>/<%=node.css%>" />
+<% end -%>
+<% if css then %><style title="text/css">
+<%= css %>
+</style>
+<% end -%>
+<script type="text/javascript" src="<%=resource%>/xhr.js"></script>
+<title><%=striptags( hostname .. ( (node and node.title) and ' - ' .. translate(node.title) or '')) %> - LuCI</title>
+</head>
+<body class="lang_<%=luci.i18n.context.lang%>">
+
+<div id="menubar">
+<div class="hostinfo">
+ <%=hostname%>
+ <span id="xhr_poll_status" style="display:none" onclick="XHR.running() ? XHR.halt() : XHR.run()">
+ | <%:Auto Refresh%>:
+ <span id="xhr_poll_status_on"><%:on%></span>
+ <span id="xhr_poll_status_off" style="display:none"><%:off%></span>
+ </span>
+</div>
+
+<% if #categories > 1 then %>
+ <ul id="modemenu">
+ <% for i, r in ipairs(categories) do %>
+ <li><a<% if request[1] == r then %> class="active"<%end%> href="<%=controller%>/<%=r%>/"><%=striptags(translate(tree.nodes[r].title))%></a></li>
+ <% 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 id="savemenu">
+ <% if ucic > 0 then %>
+ <a class="warning" href="<%=controller%>/<%=category%>/uci/changes/?redir=<%=luci.http.urlencode(luci.http.formvalue("redir") or REQUEST_URI)%>"><%:Unsaved Changes%>: <%=ucic%></a>
+ <%- else -%>
+ <a href="#"><%:Changes%>: 0</a>
+ <% end -%>
+</div><% end %>
+
+</div>
+
+<div id="maincontainer">
+ <% if category then subtree("/" .. category .. "/", cattree) end %>
+
+ <div id="maincontent">
+ <noscript>
+ <div class="errorbox">
+ <strong><%:Java Script required!%></strong><br />
+ <%:You must enable Java Script in your browser or LuCI will not work properly.%>
+ </div>
+ </noscript>
diff --git a/package/gluon-luci-theme/files/www/luci-static/gluon/cascade.css b/package/gluon-luci-theme/files/www/luci-static/gluon/cascade.css
new file mode 100644
index 0000000000000000000000000000000000000000..e8fa9f7deccd1805a4c53d388c093b830800f24e
--- /dev/null
+++ b/package/gluon-luci-theme/files/www/luci-static/gluon/cascade.css
@@ -0,0 +1,804 @@
+@charset "UTF-8";
+.lang_he {
+ direction: RTL;
+ unicode-bidi: embed; }
+
+.hidden {
+ display: none; }
+
+html {
+ min-height: 100%;
+ height: auto;
+ position: relative; }
+
+body {
+ font-family: 'Open Sans', Arial, sans-serif;
+ font-size: 12pt;
+ color: #4d4e53;
+ line-height: 1.5em;
+ margin: 0;
+ display: flex;
+ flex-direction: column;
+ min-height: 100vh;
+ background-color: #f3f3f3; }
+
+a img {
+ border: none;
+ text-decoration: none; }
+
+.tabmenu1 {
+ text-align: center; }
+
+ul.tabmenu {
+ list-style: none;
+ padding: 0;
+ margin: 2em 0;
+ display: inline-flex; }
+
+ul.tabmenu li {
+ white-space: nowrap;
+ margin: 0 0.5em;
+ padding: 0;
+ text-align: center; }
+ ul.tabmenu li a {
+ display: block;
+ text-decoration: none;
+ padding: 1em;
+ margin: 0;
+ color: #333;
+ border-radius: 2em; }
+ ul.tabmenu li a:hover {
+ background: #ffe9b3; }
+ ul.tabmenu li.active a {
+ font-weight: bold;
+ background: white;
+ color: #333; }
+
+abbr,
+acronym {
+ font-style: normal;
+ font-variant: normal; }
+
+abbr[title],
+acronym[title] {
+ border-bottom: 1px dotted;
+ cursor: help; }
+
+a:link abbr[title],
+a:visited abbr[title],
+a:link acronym[title],
+a:visited acronym[title] {
+ cursor: pointer; }
+
+code {
+ font-family: monospace;
+ white-space: pre; }
+
+#maincontent ul {
+ margin-left: 2em; }
+
+.warning {
+ color: red;
+ background-color: white;
+ font-weight: bold; }
+
+.clear {
+ clear: both; }
+
+.error {
+ color: #ff0000;
+ background-color: white; }
+
+div.hostinfo {
+ margin: 0;
+ padding: 0;
+ font-size: 80%;
+ padding: 0.5em;
+ flex: 1;
+ font-weight: bold; }
+
+#xhr_poll_status {
+ cursor: pointer; }
+
+#xhr_poll_status #xhr_poll_status_off {
+ font-weight: bold;
+ color: #FF0000; }
+
+#xhr_poll_status #xhr_poll_status_on {
+ font-weight: bold;
+ color: #00FF00; }
+
+#menubar {
+ display: flex;
+ background: #dc0067;
+ color: #ffffff; }
+
+#menubar .warning {
+ color: red;
+ background-color: #557788; }
+
+#menubar a:link,
+#menubar a:visited {
+ position: relative;
+ display: block;
+ padding: 0.5em;
+ text-decoration: none;
+ font-size: 80%;
+ font-weight: normal;
+ color: white; }
+
+#menubar a:link:hover,
+#menubar a:visited:hover,
+#menubar a:link:focus,
+#menubar a:visited:focus {
+ background: #ffb400;
+ color: black; }
+
+#menubar a:link.active,
+#menubar a:visited.active {
+ background: #ffb400;
+ color: black;
+ font-weight: bold; }
+
+#menubar a:link.warning,
+#menubar a:visited.warning {
+ background: #000000;
+ color: red;
+ font-weight: bold; }
+
+#modemenu {
+ list-style: none;
+ margin: 0;
+ padding: 0; }
+
+#modemenu li {
+ display: inline-block; }
+
+.lang_de #submenu_admin_uci {
+ width: 12em; }
+
+.lang_ru #submenu_admin_uci {
+ width: 11.5em; }
+
+textarea#syslog {
+ width: 98%;
+ min-height: 500px;
+ border: 3px solid #cccccc;
+ padding: 5px;
+ font-family: monospace; }
+
+#maincontent {
+ padding: 0 1em 2em;
+ max-width: 60em;
+ min-width: 40em;
+ margin: 1em auto; }
+
+.lang_he #maincontent {
+ direction: rtl; }
+
+#maincontent p {
+ margin-bottom: 1em; }
+
+.cbi-section {
+ margin: 0;
+ padding: 0;
+ border: none; }
+
+.cbi-section legend {
+ font-size: 1.4em;
+ font-weight: bold;
+ color: #dc0067;
+ position: relative;
+ padding: 0;
+ margin-bottom: 0.5em; }
+
+.cbi-section h2 {
+ margin: 0em 0 0.5em -0.5em !important; }
+
+.cbi-section h3 {
+ text-decoration: none !important;
+ font-weight: bold !important;
+ color: #555555 !important;
+ margin: 0.25em !important;
+ font-size: 100% !important; }
+
+.cbi-section-descr {
+ margin-bottom: 2em; }
+
+.cbi-title-ref {
+ color: inherit;
+ text-decoration: none;
+ padding-right: 18px;
+ background: url("../resources/cbi/link.gif") no-repeat scroll right center;
+ background-color: inherit; }
+
+ul.cbi-apply {
+ font-size: 90%; }
+
+input:-webkit-input-placeholder {
+ color: #AAAAAA; }
+
+input:-moz-placeholder {
+ color: #AAAAAA; }
+
+input:-ms-input-placeholder {
+ color: #AAAAAA; }
+
+input[type=checkbox] {
+ -moz-appearance: none;
+ -webkit-appearance: none;
+ -o-appearance: none;
+ appearance: none;
+ width: 2em;
+ height: 2em;
+ margin: 0; }
+ input[type=checkbox]:checked {
+ position: relative; }
+ input[type=checkbox]:checked::after {
+ content: '✔';
+ color: #dc0067;
+ vertical-align: middle;
+ position: absolute;
+ top: 50%;
+ left: 0;
+ margin-top: -0.5em;
+ width: 100%;
+ text-align: center;
+ font-size: 1.7em; }
+
+input[type=submit],
+input[type=reset],
+input[type=image],
+input[type=button] {
+ cursor: pointer; }
+
+select,
+input,
+textarea {
+ color: #003247;
+ border: none;
+ background: #ffe199;
+ border-radius: 3pt;
+ padding: 0.5em; }
+
+input[type=image] {
+ border: none; }
+
+select,
+input[type=text],
+input[type=password] {
+ width: 20em; }
+
+td select,
+td input[type=text],
+td input[type=password] {
+ width: 99%; }
+
+img.cbi-image-button {
+ cursor: pointer;
+ margin: 0 2px;
+ vertical-align: middle; }
+
+input.cbi-button {
+ display: inline-block;
+ zoom: 1;
+ line-height: normal;
+ white-space: nowrap;
+ vertical-align: baseline;
+ text-align: center;
+ cursor: pointer;
+ -webkit-user-drag: none;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ font-size: 100%;
+ padding: 0.5em 1em;
+ color: rgba(0, 0, 0, 0.8);
+ border: none rgba(0, 0, 0, 0);
+ background-color: #E6E6E6;
+ text-decoration: none;
+ border-radius: 2px;
+ /* Transitions */
+ -webkit-transition: 0.1s linear -webkit-box-shadow;
+ -moz-transition: 0.1s linear -moz-box-shadow;
+ -ms-transition: 0.1s linear box-shadow;
+ -o-transition: 0.1s linear box-shadow;
+ transition: 0.1s linear box-shadow;
+ background-repeat: no-repeat; }
+ input.cbi-button::-moz-focus-inner {
+ padding: 0;
+ border: 0; }
+ input.cbi-button:active {
+ box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset, 0 0 6px rgba(0, 0, 0, 0.2) inset; }
+ input.cbi-button:focus {
+ outline: 0; }
+ input.cbi-button:hover, input.cbi-button:focus {
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(40%, rgba(0, 0, 0, 0.05)), to(rgba(0, 0, 0, 0.1)));
+ background-image: -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1));
+ background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.1));
+ background-image: -o-linear-gradient(transparent, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1));
+ background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1)); }
+ input.cbi-button[disabled] {
+ border: none;
+ background-image: none;
+ opacity: 0.40;
+ cursor: not-allowed;
+ box-shadow: none; }
+
+input.cbi-input-user {
+ background-image: url("../resources/cbi/user.gif");
+ background-repeat: no-repeat;
+ background-position: 1px center;
+ color: #000000;
+ text-indent: 17px; }
+
+input.cbi-input-find,
+input.cbi-button-find {
+ background-image: url("../resources/cbi/find.gif");
+ color: #000000;
+ padding-left: 17px; }
+
+input.cbi-input-reload {
+ background-image: url("../resources/cbi/reload.gif");
+ color: #000000;
+ padding-left: 17px; }
+
+input.cbi-input-add,
+input.cbi-button-add {
+ background-image: url("../resources/cbi/add.gif");
+ color: #000000;
+ padding-left: 17px;
+ padding-right: 1px; }
+
+input.cbi-input-fieldadd,
+input.cbi-button-fieldadd {
+ background-image: url(../resources/cbi/fieldadd.gif);
+ color: #000000;
+ padding-left: 17px;
+ padding-right: 1px; }
+
+input.cbi-input-reset,
+input.cbi-button-reset {
+ background-color: #ee3300;
+ color: #fff; }
+
+input.cbi-input-save,
+input.cbi-button-save {
+ background-color: #009ee0;
+ color: #fff; }
+
+input.cbi-input-apply,
+input.cbi-button-apply {
+ background-color: #009ee0;
+ color: #fff; }
+
+input.cbi-input-link,
+input.cbi-button-link {
+ background-image: url("../resources/cbi/link.gif");
+ color: #000000;
+ padding-left: 17px;
+ padding-right: 1px; }
+
+input.cbi-input-download,
+input.cbi-button-download {
+ background-image: url("../resources/cbi/download.gif");
+ color: #000000;
+ padding-left: 17px;
+ padding-right: 1px; }
+
+input.cbi-input-remove,
+div.cbi-section-remove input {
+ background-image: url("../resources/cbi/remove.gif");
+ color: #000000;
+ padding-left: 17px;
+ padding-right: 1px; }
+
+input.cbi-button-up {
+ background-image: url("../resources/cbi/up.gif");
+ padding-left: 11px;
+ padding-right: 1px; }
+
+input.cbi-button-down {
+ background-image: url("../resources/cbi/down.gif");
+ padding-left: 11px;
+ padding-right: 1px; }
+
+input.cbi-button-edit {
+ background-image: url("../resources/cbi/edit.gif");
+ color: #000000;
+ padding-left: 17px;
+ padding-right: 1px; }
+
+input.cbi-button-reload {
+ background-image: url("../resources/cbi/reload.gif");
+ color: #000000;
+ padding-left: 17px;
+ padding-right: 1px; }
+
+input.cbi-button-remove {
+ background-image: url("../resources/cbi/remove.gif");
+ color: #000000;
+ padding-left: 17px;
+ padding-right: 1px; }
+
+.cbi-input-invalid {
+ background: #ee3300 !important;
+ color: white; }
+
+div.cbi-section-remove input {
+ border-bottom: none; }
+
+textarea {
+ margin-left: -1px;
+ margin-bottom: 0.5em; }
+
+form > div > input[type=submit],
+form > div > input[type=reset] {
+ margin-left: 0.5em; }
+
+table td,
+table th {
+ color: #000000; }
+
+table.smalltext {
+ background: #f5f5f5;
+ color: #000000;
+ border-top: 1px solid #666666;
+ border-right: 1px solid #666666;
+ border-bottom: 1px solid #666666;
+ font-size: 90%;
+ width: 80%;
+ margin-left: auto;
+ margin-right: auto;
+ border-collapse: collapse; }
+
+table.smalltext tr:hover td {
+ background-color: #bbddee;
+ color: #000000; }
+
+table.smalltext tr th {
+ padding: 0 0.25em;
+ border-left: 1px solid #666666;
+ text-align: left; }
+
+table.smalltext tr td {
+ padding: 0 0.25em;
+ border-top: 1px solid #666666;
+ border-left: 1px solid #666666; }
+
+table.cbi-section-table .cbi-rowstyle-1 {
+ background-color: #eeeeff;
+ color: #000000; }
+
+table.cbi-section-table .cbi-rowstyle-1:hover,
+table.cbi-section-table .cbi-rowstyle-2:hover {
+ background-color: #b2c8d4;
+ color: #000000; }
+
+table.cbi-section-table .cbi-section-table-cell {
+ padding: 3px;
+ white-space: nowrap; }
+
+.cbi-section .cbi-rowstyle-1 h3 {
+ background-color: #eeeeff;
+ color: #555555; }
+
+.cbi-rowstyle-2 {
+ color: #000000; }
+
+div.cbi-value {
+ display: flex;
+ flex-direction: row;
+ margin-bottom: 0.5em; }
+
+.cbi-value-title {
+ flex: 2;
+ text-align: right;
+ padding-top: 0.39em;
+ padding-right: 1em;
+ font-weight: bold; }
+
+div.cbi-value-field {
+ flex: 3; }
+
+div.cbi-value-description {
+ font-size: 8pt; }
+
+div.cbi-section-create {
+ clear: left;
+ white-space: nowrap;
+ vertical-align: top; }
+
+div.cbi-section-create .cbi-button {
+ margin: 0.25em; }
+
+input.cbi-section-create-name {
+ margin-right: -0.25em; }
+
+div.cbi-map-descr {
+ margin-bottom: 1em; }
+
+.cbi-map-descr:empty, .cbi-section-descr:empty {
+ display: none; }
+
+.cbi-map-descr, .cbi-section-descr, .cbi-page-actions {
+ padding: 1em;
+ background: #ececec; }
+
+.cbi-page-actions {
+ text-align: right;
+ display: flex;
+ display: -moz-flex;
+ -moz-flex-flow: row-reverse;
+ flex-flow: row-reverse; }
+
+div.cbi-optionals {
+ padding: 0.25em;
+ border-bottom: 1px dotted #bbbbbb; }
+
+div.cbi-section-remove {
+ float: right; }
+
+.cbi-section-node {
+ clear: both;
+ position: relative;
+ border: none; }
+
+.cbi-section-node-tabbed {
+ border-top-left-radius: 0; }
+
+.cbi-section-node .cbi-value-last {
+ border-bottom: none; }
+
+.cbi-section-node table div {
+ padding-bottom: 0;
+ border-bottom: none; }
+
+.cbi-section-node div.cbi-section-table-row {
+ margin: 0.25em; }
+
+table.cbi-section-table {
+ width: 100%;
+ font-size: 95%; }
+
+table.cbi-section-table th,
+table.cbi-section-table td {
+ text-align: center; }
+
+tr.cbi-section-table-descr th {
+ font-weight: normal;
+ font-size: 90%;
+ vertical-align: top; }
+
+td.cbi-section-table-optionals {
+ text-align: left !important;
+ padding-top: 1em; }
+
+.cbi-value-helpicon img {
+ display: none; }
+
+div.cbi-error {
+ font-size: 95%;
+ font-weight: bold;
+ color: #ff0000;
+ background-color: #ffffff; }
+
+td.cbi-value-error {
+ border-color: red; }
+
+.cbi-value-error input,
+.cbi-value-error select {
+ color: red;
+ background-color: #ffcccc; }
+
+.cbi-section-error {
+ color: red;
+ background-color: white;
+ font-size: 95%;
+ border: 1px dotted red;
+ margin: 3px;
+ padding: 3px; }
+
+.cbi-value-field var {
+ color: #2222FF; }
+
+ul.cbi-tabmenu {
+ padding: 3px 0;
+ margin-left: 0 !important;
+ list-style-type: none;
+ position: relative;
+ z-index: 10;
+ top: 4px;
+ line-height: 20px; }
+
+ul.cbi-tabmenu li.cbi-tab,
+ul.cbi-tabmenu li.cbi-tab-disabled {
+ display: inline;
+ margin: 0; }
+
+ul.cbi-tabmenu li.cbi-tab a,
+ul.cbi-tabmenu li.cbi-tab-disabled a {
+ text-decoration: none;
+ padding: 3px 7px;
+ margin-right: 3px;
+ border: 1px solid #BBBBBB;
+ border-bottom: none;
+ border-radius: 3px 3px 0 0;
+ background-color: #EEEEEE;
+ color: #BBBBBB; }
+
+ul.cbi-tabmenu li.cbi-tab-highlighted a {
+ color: #000000;
+ background-color: #FFEEAA; }
+
+ul.cbi-tabmenu li a:hover {
+ color: #000000; }
+
+ul.cbi-tabmenu li.cbi-tab a {
+ padding-top: 4px;
+ color: #000000;
+ background-color: #FFFFFF; }
+
+div.cbi-tab-descr {
+ background-image: url(/luci-static/resources/cbi/help.gif);
+ background-position: 0.25em 50%;
+ background-repeat: no-repeat;
+ border-bottom: 1px solid #CCCCCC;
+ margin: 0.25em 0.25em 2em;
+ padding: 0.5em 0.5em 0.5em 2em; }
+
+.left {
+ text-align: left !important; }
+
+.right {
+ text-align: right !important; }
+
+.luci {
+ position: absolute;
+ bottom: 0;
+ left: 1em;
+ height: 1.5em;
+ font-size: 80%; }
+
+.luci a:link,
+.luci a:visited {
+ background-color: transparent;
+ color: #666666;
+ text-decoration: none;
+ font-size: 70%; }
+
+.inline {
+ display: inline; }
+
+.error500 {
+ white-space: normal;
+ border: 1px dotted #ff0000;
+ background-color: #ffffff;
+ color: #000000;
+ padding: 0.5em; }
+
+.errorbox {
+ border: 1px solid #FF0000;
+ background-color: #FFCCCC;
+ padding: 5px;
+ margin-bottom: 5px; }
+
+.errorbox a {
+ color: #000000 !important; }
+
+.ifacebox {
+ background-color: #FFFFFF;
+ border: 1px solid #CCCCCC;
+ margin: 0 10px;
+ text-align: center;
+ white-space: nowrap; }
+
+.ifacebox .ifacebox-head {
+ border-bottom: 1px solid #CCCCCC;
+ padding: 2px; }
+
+.ifacebox .ifacebox-body {
+ padding: 2px; }
+
+.ifacebadge {
+ background-color: #FFFFFF;
+ border: 1px solid #CCCCCC;
+ padding: 2px;
+ margin-left: 2px;
+ display: inline-block; }
+
+.ifacebadge-active {
+ border-color: #000000;
+ font-weight: bold; }
+
+.zonebadge {
+ padding: 2px;
+ display: inline-block;
+ white-space: nowrap;
+ cursor: pointer; }
+
+.zonebadge em,
+.zonebadge strong {
+ margin: 3px;
+ display: inline-block; }
+
+.zonebadge input {
+ width: 6em;
+ height: 1.5em; }
+
+.zonebadge-empty {
+ border: 1px dashed #AAAAAA;
+ color: #AAAAAA;
+ font-style: italic;
+ font-size: smaller; }
+
+.uci-change-list {
+ font-family: monospace; }
+
+.uci-change-list ins,
+.uci-change-legend-label ins {
+ text-decoration: none;
+ border: 1px solid #00FF00;
+ background-color: #CCFFCC;
+ display: block;
+ padding: 2px; }
+
+.uci-change-list del,
+.uci-change-legend-label del {
+ text-decoration: none;
+ border: 1px solid #FF0000;
+ background-color: #FFCCCC;
+ display: block;
+ font-style: normal;
+ padding: 2px; }
+
+.uci-change-list var,
+.uci-change-legend-label var {
+ text-decoration: none;
+ border: 1px solid #CCCCCC;
+ background-color: #EEEEEE;
+ display: block;
+ font-style: normal;
+ padding: 2px; }
+
+.uci-change-list var ins,
+.uci-change-list var del {
+ /*display: inline;*/
+ border: none;
+ white-space: pre;
+ font-style: normal;
+ padding: 0px; }
+
+.uci-change-legend {
+ padding: 5px; }
+
+.uci-change-legend-label {
+ width: 150px;
+ float: left;
+ font-size: 80%; }
+
+.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; }
+
+.uci-change-legend-label var ins,
+.uci-change-legend-label var del {
+ line-height: 6px;
+ border: none; }
+
+.cbi-input-password + img {
+ display: none; }
+
+.the-key {
+ text-align: left;
+ font-size: 1.4em;
+ background: #ffe9b3;
+ border: 3pt dashed #dc0067;
+ margin-bottom: 0.5em;
+ padding: 0.5em; }
diff --git a/package/gluon-luci-theme/sass/cascade.scss b/package/gluon-luci-theme/sass/cascade.scss
new file mode 100644
index 0000000000000000000000000000000000000000..eb0e1bc27e8829e1bee760c698a818a7728bd064
--- /dev/null
+++ b/package/gluon-luci-theme/sass/cascade.scss
@@ -0,0 +1,1014 @@
+/* ATTENTION: This file is not compiled when building gluon.
+ The compiled version is at ../files/www/luci-static/gluon/cascade.css
+
+ Use sass like this to update it:
+
+ sass cascade.scss ../files/www/luci-static/gluon/cascade.css
+
+ When commiting changes to this file make sure to commit the respective
+ changes to the compilid version within the same commit!
+ */
+
+@charset "utf-8";
+
+$ffyellow: #ffb400;
+$ffmagenta: #dc0067;
+$ffzusatz: #009ee0;
+$red: #ee3300;
+
+@mixin button {
+ &::-moz-focus-inner {
+ padding: 0;
+ border: 0;
+ }
+
+ display: inline-block;
+ zoom: 1;
+ line-height: normal;
+ white-space: nowrap;
+ vertical-align: baseline;
+ text-align: center;
+ cursor: pointer;
+ -webkit-user-drag: none;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+
+
+ font-size: 100%;
+ padding: 0.5em 1em;
+ color: rgba(0, 0, 0, 0.80);
+ border: none rgba(0, 0, 0, 0);
+ background-color: #E6E6E6;
+ text-decoration: none;
+ border-radius: 2px;
+
+ /* Transitions */
+ -webkit-transition: 0.1s linear -webkit-box-shadow;
+ -moz-transition: 0.1s linear -moz-box-shadow;
+ -ms-transition: 0.1s linear box-shadow;
+ -o-transition: 0.1s linear box-shadow;
+ transition: 0.1s linear box-shadow;
+
+ &:active {
+ box-shadow: 0 0 0 1px rgba(0,0,0, 0.15) inset, 0 0 6px rgba(0,0,0, 0.20) inset;
+ }
+
+ &:focus {
+ outline: 0;
+ }
+
+ &:hover, &:focus {
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(40%, rgba(0,0,0, 0.05)), to(rgba(0,0,0, 0.10)));
+ background-image: -webkit-linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10));
+ background-image: -moz-linear-gradient(top, rgba(0,0,0, 0.05) 0%, rgba(0,0,0, 0.10));
+ background-image: -o-linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10));
+ background-image: linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10));
+ }
+
+ &[disabled] {
+ border: none;
+ background-image: none;
+ opacity: 0.40;
+ cursor: not-allowed;
+ box-shadow: none;
+ }
+}
+
+@mixin button-primary {
+ background-color: $ffzusatz;
+ color: #fff;
+}
+
+.lang_he {
+ direction: RTL;
+ unicode-bidi: embed;
+}
+
+.hidden {
+ display: none;
+}
+
+html {
+ min-height: 100%;
+ height: auto;
+ position:relative;
+}
+
+body {
+ font-family: 'Open Sans', Arial, sans-serif;
+ font-size: 12pt;
+ color: rgb(77, 78, 83);
+ line-height: 1.5em;
+ margin: 0;
+ display: flex;
+ flex-direction: column;
+ min-height: 100vh;
+ background-color: #f3f3f3;
+}
+
+a img {
+ border: none;
+ text-decoration: none;
+}
+
+.tabmenu1 {
+ text-align: center;
+}
+
+ul.tabmenu {
+ list-style: none;
+ padding: 0;
+ margin: 2em 0;
+ display: inline-flex;
+}
+
+ul.tabmenu li {
+ white-space: nowrap;
+ margin: 0 0.5em;
+ padding: 0;
+ text-align: center;
+
+ a {
+ display: block;
+ text-decoration: none;
+ padding: 1em;
+ margin: 0;
+ color: #333;
+ border-radius: 2em;
+
+ &:hover {
+ background: lighten($ffyellow, 35);
+ }
+ }
+
+ &.active a {
+ font-weight: bold;
+ background: white;
+ color: #333;
+ }
+}
+
+abbr,
+acronym {
+ font-style: normal;
+ font-variant: normal;
+}
+
+abbr[title],
+acronym[title] {
+ border-bottom: 1px dotted;
+ cursor: help;
+}
+
+a:link abbr[title],
+a:visited abbr[title],
+a:link acronym[title],
+a:visited acronym[title] {
+ cursor: pointer;
+}
+
+code {
+ font-family: monospace;
+ white-space: pre;
+}
+
+#maincontent ul {
+ margin-left: 2em;
+}
+
+.warning {
+ color: red;
+ background-color: white;
+ font-weight: bold;
+}
+
+.clear {
+ clear: both;
+}
+
+.error {
+ color: #ff0000;
+ background-color: white;
+}
+
+div.hostinfo {
+ margin: 0;
+ padding: 0;
+ font-size: 80%;
+ padding: 0.5em;
+ flex: 1;
+ font-weight: bold;
+}
+
+#xhr_poll_status {
+ cursor: pointer;
+}
+
+#xhr_poll_status #xhr_poll_status_off {
+ font-weight: bold;
+ color: #FF0000;
+}
+
+#xhr_poll_status #xhr_poll_status_on {
+ font-weight: bold;
+ color: #00FF00;
+}
+
+#menubar {
+ display: flex;
+ background: $ffmagenta;
+ color: #ffffff;
+}
+
+#menubar .warning {
+ color: red;
+ background-color: #557788;
+}
+
+#menubar a:link,
+#menubar a:visited {
+ position: relative;
+ display: block;
+ padding: 0.5em;
+ text-decoration: none;
+ font-size: 80%;
+ font-weight: normal;
+ color: white;
+}
+
+#menubar a:link:hover,
+#menubar a:visited:hover,
+#menubar a:link:focus,
+#menubar a:visited:focus {
+ background: $ffyellow;
+ color: black;
+}
+
+#menubar a:link.active,
+#menubar a:visited.active {
+ background: $ffyellow;
+ color: black;
+ font-weight: bold;
+}
+
+#menubar a:link.warning,
+#menubar a:visited.warning {
+ background: #000000;
+ color: red;
+ font-weight: bold;
+}
+
+#modemenu {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+}
+
+#modemenu li {
+ display: inline-block;
+}
+
+#savemenu {
+}
+
+.lang_he #savemenu {
+}
+
+.lang_de #submenu_admin_uci {
+ width: 12em;
+}
+
+.lang_ru #submenu_admin_uci {
+ width: 11.5em;
+}
+
+textarea#syslog {
+ width: 98%;
+ min-height: 500px;
+ border: 3px solid #cccccc;
+ padding: 5px;
+ font-family: monospace;
+}
+
+#maincontent {
+ padding: 0 1em 2em;
+ max-width: 60em;
+ min-width: 40em;
+ margin: 1em auto;
+}
+
+.lang_he #maincontent {
+ direction: rtl;
+}
+
+#maincontent h2 {
+}
+
+#maincontent h3 {
+}
+
+#maincontent p {
+ margin-bottom: 1em;
+}
+
+.cbi-section {
+ margin: 0;
+ padding: 0;
+ border: none;
+}
+
+.cbi-section legend {
+ font-size: 1.4em;
+ font-weight: bold;
+ color: $ffmagenta;
+ position: relative;
+ padding: 0;
+ margin-bottom: 0.5em;
+}
+
+.cbi-section h2 {
+ margin: 0em 0 0.5em -0.5em !important;
+}
+
+.cbi-section h3 {
+ text-decoration: none !important;
+ font-weight: bold !important;
+ color: #555555 !important;
+ margin: 0.25em !important;
+ font-size: 100% !important;
+}
+
+.cbi-section-descr {
+ margin-bottom: 2em;
+}
+
+.cbi-title-ref {
+ color: inherit;
+ text-decoration: none;
+ padding-right: 18px;
+ background: url('../resources/cbi/link.gif') no-repeat scroll right center;
+ background-color: inherit;
+}
+
+ul.cbi-apply {
+ font-size: 90%;
+}
+
+input:-webkit-input-placeholder {
+ color: #AAAAAA;
+}
+
+input:-moz-placeholder {
+ color: #AAAAAA;
+}
+
+input:-ms-input-placeholder {
+ color: #AAAAAA;
+}
+
+input[type=checkbox] {
+ -moz-appearance:none;
+ -webkit-appearance:none;
+ -o-appearance:none;
+ appearance: none;
+ width: 2em;
+ height: 2em;
+ margin: 0;
+
+ &:checked {
+ position: relative;
+
+ &::after {
+ content: '✔';
+ color: $ffmagenta;
+ vertical-align: middle;
+ position: absolute;
+ top: 50%;
+ left: 0;
+ margin-top: -0.5em;
+ width: 100%;
+ text-align: center;
+ font-size: 1.7em;
+ }
+ }
+}
+
+input[type=submit],
+input[type=reset],
+input[type=image],
+input[type=button] {
+ cursor: pointer;
+}
+
+select,
+input,
+textarea {
+ color: darken($ffzusatz, 30);
+ border: none;
+ background: lighten($ffyellow, 30);
+ border-radius: 3pt;
+ padding: 0.5em;
+}
+
+input[type=image] {
+ border: none;
+}
+
+select,
+input[type=text],
+input[type=password] {
+ width: 20em;
+}
+
+td select,
+td input[type=text],
+td input[type=password] {
+ width: 99%;
+}
+
+img.cbi-image-button {
+ cursor: pointer;
+ margin: 0 2px;
+ vertical-align: middle;
+}
+
+input.cbi-button {
+ @include button;
+
+ background-repeat: no-repeat;
+}
+
+input.cbi-input-user {
+ background-image: url('../resources/cbi/user.gif');
+ background-repeat: no-repeat;
+ background-position: 1px center;
+ color: #000000;
+ text-indent: 17px;
+}
+
+input.cbi-input-find,
+input.cbi-button-find {
+ background-image: url('../resources/cbi/find.gif');
+ color: #000000;
+ padding-left: 17px;
+}
+
+input.cbi-input-reload {
+ background-image: url('../resources/cbi/reload.gif');
+ color: #000000;
+ padding-left: 17px;
+}
+
+input.cbi-input-add,
+input.cbi-button-add {
+ background-image: url('../resources/cbi/add.gif');
+ color: #000000;
+ padding-left: 17px;
+ padding-right: 1px;
+}
+
+input.cbi-input-fieldadd,
+input.cbi-button-fieldadd {
+ background-image: url(../resources/cbi/fieldadd.gif);
+ color: #000000;
+ padding-left: 17px;
+ padding-right: 1px;
+}
+
+input.cbi-input-reset,
+input.cbi-button-reset {
+ background-color: $red;
+ color: #fff;
+}
+
+input.cbi-input-save,
+input.cbi-button-save {
+ @include button-primary;
+}
+
+input.cbi-input-apply,
+input.cbi-button-apply {
+ @include button-primary;
+}
+
+input.cbi-input-link,
+input.cbi-button-link {
+ background-image: url('../resources/cbi/link.gif');
+ color: #000000;
+ padding-left: 17px;
+ padding-right: 1px;
+}
+
+input.cbi-input-download,
+input.cbi-button-download {
+ background-image: url('../resources/cbi/download.gif');
+ color: #000000;
+ padding-left: 17px;
+ padding-right: 1px;
+}
+
+input.cbi-input-remove,
+div.cbi-section-remove input {
+ background-image: url('../resources/cbi/remove.gif');
+ color: #000000;
+ padding-left: 17px;
+ padding-right: 1px;
+}
+
+input.cbi-button-up {
+ background-image: url('../resources/cbi/up.gif');
+ padding-left: 11px;
+ padding-right: 1px;
+}
+
+input.cbi-button-down {
+ background-image: url('../resources/cbi/down.gif');
+ padding-left: 11px;
+ padding-right: 1px;
+}
+
+input.cbi-button-edit {
+ background-image: url('../resources/cbi/edit.gif');
+ color: #000000;
+ padding-left: 17px;
+ padding-right: 1px;
+}
+
+input.cbi-button-reload {
+ background-image: url('../resources/cbi/reload.gif');
+ color: #000000;
+ padding-left: 17px;
+ padding-right: 1px;
+}
+
+input.cbi-button-remove {
+ background-image: url('../resources/cbi/remove.gif');
+ color: #000000;
+ padding-left: 17px;
+ padding-right: 1px;
+}
+
+.cbi-input-invalid {
+ background: $red !important;
+ color: white;
+}
+
+div.cbi-section-remove input {
+ border-bottom: none;
+}
+
+textarea {
+ margin-left: -1px;
+ margin-bottom: 0.5em;
+}
+
+form > div > input[type=submit],
+form > div > input[type=reset] {
+ margin-left: 0.5em;
+}
+
+table td,
+table th {
+ color: #000000;
+}
+
+table.smalltext {
+ background: #f5f5f5;
+ color: #000000;
+ border-top: 1px solid #666666;
+ border-right: 1px solid #666666;
+ border-bottom: 1px solid #666666;
+ font-size: 90%;
+ width: 80%;
+ margin-left: auto;
+ margin-right: auto;
+ border-collapse: collapse;
+}
+
+table.smalltext tr:hover td {
+ background-color: #bbddee;
+ color: #000000;
+}
+
+table.smalltext tr th {
+ padding: 0 0.25em;
+ border-left: 1px solid #666666;
+ text-align: left;
+}
+
+table.smalltext tr td {
+ padding: 0 0.25em;
+ border-top: 1px solid #666666;
+ border-left: 1px solid #666666;
+}
+
+table.cbi-section-table .cbi-rowstyle-1 {
+ background-color: #eeeeff;
+ color: #000000;
+}
+
+table.cbi-section-table .cbi-rowstyle-1:hover,
+table.cbi-section-table .cbi-rowstyle-2:hover {
+ background-color: #b2c8d4;
+ color: #000000;
+}
+
+table.cbi-section-table .cbi-section-table-cell {
+ padding: 3px;
+ white-space: nowrap;
+}
+
+.cbi-section .cbi-rowstyle-1 h3 {
+ background-color: #eeeeff;
+ color: #555555;
+}
+
+.cbi-rowstyle-2 {
+ color: #000000;
+}
+
+div.cbi-value {
+ display: flex;
+ flex-direction: row;
+ margin-bottom: 0.5em;
+}
+
+.cbi-value-title {
+ flex: 2;
+ text-align: right;
+ padding-top: 0.39em;
+ padding-right: 1em;
+ font-weight: bold;
+}
+
+div.cbi-value-field {
+ flex: 3;
+}
+
+div.cbi-value-description {
+ font-size: 8pt;
+}
+
+div.cbi-section-create {
+ clear: left;
+ white-space: nowrap;
+ vertical-align: top;
+}
+
+div.cbi-section-create .cbi-button {
+ margin: 0.25em;
+}
+
+input.cbi-section-create-name {
+ margin-right: -0.25em;
+}
+
+div.cbi-map-descr {
+ margin-bottom: 1em;
+}
+
+.cbi-map-descr:empty, .cbi-section-descr:empty {
+ display: none;
+}
+
+.cbi-map-descr, .cbi-section-descr, .cbi-page-actions {
+ padding: 1em;
+ background: #ececec;
+}
+
+.cbi-page-actions {
+ text-align: right;
+ display: flex;
+ display: -moz-flex;
+ -moz-flex-flow: row-reverse;
+ flex-flow: row-reverse;
+}
+
+div.cbi-optionals {
+ padding: 0.25em;
+ border-bottom: 1px dotted #bbbbbb;
+}
+
+div.cbi-section-remove {
+ float: right;
+}
+
+.cbi-section-node {
+ clear: both;
+ position: relative;
+ border: none;
+}
+
+.cbi-section-node-tabbed {
+ border-top-left-radius: 0;
+}
+
+.cbi-section-node .cbi-value-last {
+ border-bottom: none;
+}
+
+.cbi-section-node table div {
+ padding-bottom: 0;
+ border-bottom: none;
+}
+
+.cbi-section-node div.cbi-section-table-row {
+ margin: 0.25em;
+}
+
+table.cbi-section-table {
+ width: 100%;
+ font-size: 95%;
+}
+
+table.cbi-section-table th,
+table.cbi-section-table td {
+ text-align: center;
+}
+
+tr.cbi-section-table-descr th {
+ font-weight: normal;
+ font-size: 90%;
+ vertical-align: top;
+}
+
+td.cbi-section-table-optionals {
+ text-align: left !important;
+ padding-top: 1em;
+}
+
+.cbi-value-helpicon img {
+ display: none;
+}
+
+div.cbi-error {
+ font-size: 95%;
+ font-weight: bold;
+ color: #ff0000;
+ background-color: #ffffff;
+}
+
+td.cbi-value-error {
+ border-color: red;
+}
+
+.cbi-value-error input,
+.cbi-value-error select {
+ color: red;
+ background-color: #ffcccc;
+}
+
+.cbi-section-error {
+ color: red;
+ background-color: white;
+ font-size: 95%;
+ border: 1px dotted red;
+ margin: 3px;
+ padding: 3px;
+}
+
+.cbi-value-field var {
+ color: #2222FF;
+}
+
+ul.cbi-tabmenu {
+ padding: 3px 0;
+ margin-left: 0 !important;
+ list-style-type: none;
+ position: relative;
+ z-index: 10;
+ top: 4px;
+ line-height: 20px;
+}
+
+ul.cbi-tabmenu li.cbi-tab,
+ul.cbi-tabmenu li.cbi-tab-disabled {
+ display: inline;
+ margin: 0;
+}
+
+ul.cbi-tabmenu li.cbi-tab a,
+ul.cbi-tabmenu li.cbi-tab-disabled a {
+ text-decoration: none;
+ padding: 3px 7px;
+ margin-right: 3px;
+ border: 1px solid #BBBBBB;
+ border-bottom: none;
+ border-radius: 3px 3px 0 0;
+ background-color: #EEEEEE;
+ color: #BBBBBB;
+}
+
+ul.cbi-tabmenu li.cbi-tab-highlighted a {
+ color: #000000;
+ background-color: #FFEEAA;
+}
+
+ul.cbi-tabmenu li a:hover {
+ color: #000000;
+}
+
+ul.cbi-tabmenu li.cbi-tab a {
+ padding-top: 4px;
+ color: #000000;
+ background-color: #FFFFFF;
+}
+
+div.cbi-tab-descr {
+ background-image: url(/luci-static/resources/cbi/help.gif);
+ background-position: 0.25em 50%;
+ background-repeat: no-repeat;
+ border-bottom: 1px solid #CCCCCC;
+ margin: 0.25em 0.25em 2em;
+ padding: 0.5em 0.5em 0.5em 2em;
+}
+
+.left {
+ text-align: left !important;
+}
+
+.right {
+ text-align: right !important;
+}
+
+.luci {
+ position: absolute;
+ bottom: 0;
+ left: 1em;
+ height: 1.5em;
+ font-size: 80%;
+}
+
+.luci a:link,
+.luci a:visited {
+ background-color: transparent;
+ color: #666666;
+ text-decoration: none;
+ font-size: 70%;
+}
+
+.inline {
+ display: inline;
+}
+
+.error500 {
+ white-space: normal;
+ border: 1px dotted #ff0000;
+ background-color: #ffffff;
+ color: #000000;
+ padding: 0.5em;
+}
+
+.errorbox {
+ border: 1px solid #FF0000;
+ background-color: #FFCCCC;
+ padding: 5px;
+ margin-bottom: 5px;
+}
+
+.errorbox a {
+ color: #000000 !important;
+}
+
+
+.ifacebox {
+ background-color: #FFFFFF;
+ border: 1px solid #CCCCCC;
+ margin: 0 10px;
+ text-align: center;
+ white-space: nowrap;
+}
+
+.ifacebox .ifacebox-head {
+ border-bottom: 1px solid #CCCCCC;
+ padding: 2px;
+}
+
+.ifacebox .ifacebox-body {
+ padding: 2px;
+}
+
+
+.ifacebadge {
+ background-color: #FFFFFF;
+ border: 1px solid #CCCCCC;
+ padding: 2px;
+ margin-left: 2px;
+ display: inline-block;
+}
+
+.ifacebadge-active {
+ border-color: #000000;
+ font-weight: bold;
+}
+
+
+.zonebadge {
+ padding: 2px;
+ display: inline-block;
+ white-space: nowrap;
+ cursor: pointer;
+}
+
+.zonebadge em,
+.zonebadge strong {
+ margin: 3px;
+ display: inline-block;
+}
+
+.zonebadge input {
+ width: 6em;
+ height: 1.5em;
+}
+
+.zonebadge-empty {
+ border: 1px dashed #AAAAAA;
+ color: #AAAAAA;
+ font-style: italic;
+ font-size: smaller;
+}
+
+
+.uci-change-list {
+ font-family: monospace;
+}
+
+.uci-change-list ins,
+.uci-change-legend-label ins {
+ text-decoration: none;
+ border: 1px solid #00FF00;
+ background-color: #CCFFCC;
+ display: block;
+ padding: 2px;
+}
+
+.uci-change-list del,
+.uci-change-legend-label del {
+ text-decoration: none;
+ border: 1px solid #FF0000;
+ background-color: #FFCCCC;
+ display: block;
+ font-style: normal;
+ padding: 2px;
+}
+
+.uci-change-list var,
+.uci-change-legend-label var {
+ text-decoration: none;
+ border: 1px solid #CCCCCC;
+ background-color: #EEEEEE;
+ display: block;
+ font-style: normal;
+ padding: 2px;
+}
+
+.uci-change-list var ins,
+.uci-change-list var del {
+ /*display: inline;*/
+ border: none;
+ white-space: pre;
+ font-style: normal;
+ padding: 0px;
+}
+
+.uci-change-legend {
+ padding: 5px;
+}
+
+.uci-change-legend-label {
+ width: 150px;
+ float: left;
+ font-size: 80%;
+}
+
+.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;
+}
+
+.uci-change-legend-label var ins,
+.uci-change-legend-label var del {
+ line-height: 6px;
+ border: none;
+}
+
+// Hide show/hide password toggle image
+.cbi-input-password + img {
+ display: none;
+}
+
+.the-key {
+ text-align: left;
+ font-size: 1.4em;
+ background: lighten($ffyellow, 35);
+ border: 3pt dashed $ffmagenta;
+ margin-bottom: 0.5em;
+ padding: 0.5em
+}