gluon-luci-theme: new theme, still magenta/yellow

This is the initial version of our new configmode theme. It's far from
finished but at least configmode looks good. There are lots of
declarations copied from OpenWRT's default theme so most other luci
modules would be somewhat usable when shown using this theme.

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))

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
+	

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>

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>

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; }

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
+}