Merge pull request #2069 from freifunk-gluon/web-theme-cleanup

gluon-config-mode-theme: cleanup and select box theming

package/gluon-config-mode-theme/sass/gluon.scss

@@ -24,7 +24,6 @@ $red:       #ee3300;
 	}
 
 	display: inline-block;
-  zoom: 1;
 	line-height: normal;
 	white-space: nowrap;
 	vertical-align: baseline;
@@ -36,8 +35,8 @@ $red:       #ee3300;
 	font-size: 100%;
 	padding: 0.5em 1em;
 	color: rgba(0, 0, 0, 0.80);
-  border: none rgba(0, 0, 0, 0);
 	background-color: #E6E6E6;
+	border: none;
 	text-decoration: none;
 	border-radius: 2px;
 
@@ -65,20 +64,6 @@ $red:       #ee3300;
 	}
 }
 
-@mixin button-primary {
-  background-color: $ffzusatz;
-  color: #fff;
-}
-
-.lang_he {
-  direction: RTL;
-  unicode-bidi: embed;
-}
-
-.hidden {
-  display: none;
-}
-
 html {
 	min-height: 100%;
 	height: auto;
@@ -100,11 +85,6 @@ body {
 	background-color: #f3f3f3;
 }
 
-a img {
-  border: none;
-  text-decoration: none;
-}
-
 .tabmenu1 {
 	text-align: center;
 }
@@ -142,38 +122,10 @@ ul.tabmenu li {
 	}
 }
 
-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;
 }
 
-.clear {
-  clear: both;
-}
-
 .error {
 	color: #ff0000;
 	background-color: white;
@@ -207,7 +159,7 @@ code {
 	}
 }
 
-#menubar div.hostinfo {
+#menubar .hostinfo {
 	position: relative;
 	margin: 0;
 	padding: 0.5em;
@@ -216,7 +168,7 @@ code {
 	font-size: 80%;
 }
 
-#menubar div.hostinfo a {
+#menubar .hostinfo a {
 	&:link, &:visited {
 		text-decoration: none;
 		font-weight: bold;
@@ -269,15 +221,15 @@ code {
 }
 
 .gluon-section h2 {
-  margin: 0em 0 0.5em -0.5em !important;
+	margin: 0em 0 0.5em -0.5em;
 }
 
 .gluon-section h3 {
-  text-decoration: none !important;
+	text-decoration: none;
-  font-weight: bold !important;
+	font-weight: bold;
-  color: #555555 !important;
+	color: #555555;
-  margin: 0.25em !important;
+	margin: 0.25em;
-  font-size: 100% !important;
+	font-size: 100%;
 }
 
 .gluon-section-descr {
@@ -290,19 +242,11 @@ code {
 	margin-bottom: 1em;
 }
 
-input:placeholder {
+input::placeholder {
 	color: #aaaaaa;
 }
 
-input:-webkit-input-placeholder {
+input::-webkit-input-placeholder {
-  color: #aaaaaa;
-}
-
-input:-moz-placeholder {
-  color: #aaaaaa;
-}
-
-input:-ms-input-placeholder {
 	color: #aaaaaa;
 }
 
@@ -317,7 +261,7 @@ input[type=checkbox] {
 		margin: 0;
 	}
 
-  &:checked + label:after {
+	&:checked + label::after {
 		content: '✔';
 		color: $ffmagenta;
 		vertical-align: middle;
@@ -347,7 +291,7 @@ input[type=radio] {
 		border-radius: 50%;
 	}
 
-  &:checked + label:after {
+	&:checked + label::after {
 		content: '•';
 		color: $ffmagenta;
 		vertical-align: middle;
@@ -363,7 +307,6 @@ input[type=radio] {
 
 input[type=submit],
 input[type=reset],
-input[type=image],
 input[type=button] {
 	cursor: pointer;
 }
@@ -383,37 +326,63 @@ input[type=checkbox] + label {
 	outline: 0;
 }
 
+.select-wrapper {
+	position: relative;
+	display: inline-block;
+
+	&::before {
+		position: absolute;
+		z-index: 1;
+		right: 0.05em;
+		top: calc(2px + 0.1em);
+		bottom: calc(2px + 0.1em);
+		width: 1.4em;
+		border-left: 0.05em solid rgba(0, 0, 0, 0.25);
+		pointer-events: none;
+		background:
+			url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="8" height="5"><path fill="none" stroke="black" stroke-linejoin="bevel" d="M1,1L4,4L7,1"/></svg>')
+			center / 0.8em 0.5em
+			no-repeat
+		;
+		content: '';
+	}
+
+	select {
+		-webkit-appearance: none;
+		-moz-appearance: none;
+		appearance: none;
+		cursor: pointer;
+	}
+}
+
 option {
 	color: darken($ffzusatz, 30);
 	background: lighten($ffyellow, 30);
 }
 
-input[type=image] {
-  border: none;
-}
-
 select,
 input[type=text],
 input[type=password] {
 	min-width: 20em;
 }
 
-input.gluon-button {
+.gluon-button {
 	@include button;
 
 	margin-left: 0.5em;
 	background-repeat: no-repeat;
 }
 
-input.gluon-button-reset {
+.gluon-button-reset {
 	background-color: $red;
 	color: #fff;
 }
-input.gluon-button-submit {
-  @include button-primary;
-}
 
-input.gluon-button-submit:active {
+.gluon-button-submit {
+	background-color: $ffzusatz;
+	color: #fff;
+}
+.gluon-button-submit:active {
 	background: grey;
 }
 
@@ -422,25 +391,12 @@ input.gluon-button-submit:active {
 	color: white;
 }
 
-div.gluon-section-remove input {
-  border-bottom: none;
-}
-
 textarea {
 	margin-left: -1px;
 	margin-bottom: 0.5em;
 }
 
-.gluon-section .gluon-rowstyle-1 h3 {
+.gluon-value {
-  background-color: #eeeeff;
-  color: #555555;
-}
-
-.gluon-rowstyle-2 {
-  color: #000000;
-}
-
-div.gluon-value {
 	display: flex;
 	flex-direction: row;
 	margin-bottom: 0.5em;
@@ -458,7 +414,7 @@ div.gluon-value {
 	font-weight: bold;
 }
 
-div.gluon-value-field {
+.gluon-value-field {
 	flex: 3;
 	position: relative;
 
@@ -467,12 +423,12 @@ div.gluon-value-field {
 	}
 }
 
-div.gluon-value-field-text {
+.gluon-value-field-text {
 	flex: 3;
 	padding-top: 0.39em;
 }
 
-div.gluon-value-field-long {
+.gluon-value-field-long {
 	flex: 10;
 	position: relative;
 	margin-top: 0.65em;
@@ -482,29 +438,15 @@ div.gluon-value-field-long {
 	}
 }
 
-div.gluon-value-field-long-after {
+.gluon-value-field-long-after {
 	flex: 2;
 }
 
-div.gluon-value-description {
+.gluon-value-description {
 	font-size: 8pt;
 }
 
-div.gluon-section-create {
+.gluon-form-descr {
-  clear: left;
-  white-space: nowrap;
-  vertical-align: top;
-}
-
-div.gluon-section-create .gluon-button {
-  margin: 0.25em;
-}
-
-input.gluon-section-create-name {
-  margin-right: -0.25em;
-}
-
-div.gluon-form-descr {
 	margin-bottom: 1em;
 }
 
@@ -523,42 +465,18 @@ div.gluon-form-descr {
 	flex-flow: row-reverse;
 }
 
-div.gluon-optionals {
-  padding: 0.25em;
-  border-bottom: 1px dotted #bbbbbb;
-}
-
-div.gluon-section-remove {
-  float: right;
-}
-
 .gluon-section-node {
 	clear: both;
 	position: relative;
 	border: none;
 }
 
-.gluon-section-node-tabbed {
-  border-top-left-radius: 0;
-}
-
-div.gluon-error {
-  font-size: 95%;
-  font-weight: bold;
-  color: #ff0000;
-  background-color: #ffffff;
-}
-
 .gluon-value-error input,
 .gluon-value-error select {
 	background-color: #ffcccc;
 }
 
-.gluon-value-field var {
+.gluon-add::after, .gluon-remove::after {
-  color: #2222FF;
-}
-
-.gluon-add:after, .gluon-remove:after {
 	cursor: pointer;
 	display: inline-block;
 	text-align: center;
@@ -584,7 +502,7 @@ div.gluon-error {
 		left: -0.08em;
 	}
 
-  &:after {
+	&::after {
 		content: '+';
 	}
 }
@@ -595,23 +513,11 @@ div.gluon-error {
 	position: relative;
 	top: -0.03em;
 
-  &:after {
+	&::after {
 		content: '–';
 	}
 }
 
-.left {
-  text-align: left !important;
-}
-
-.right {
-  text-align: right !important;
-}
-
-.inline {
-  display: inline;
-}
-
 .error500 {
 	border: 1px dotted #ff0000;
 	background-color: #ffffff;

package/gluon-web-admin/files/lib/gluon/config-mode/view/admin/upgrade.html

@@ -26,7 +26,7 @@ $Id$
 				<%:Firmware image%>
 			</label>
 			<div class="gluon-value-field">
-				<input class="gluon-input-file" type="file" name="image" />
+				<input type="file" name="image" />
 			</div>
 		</div>
 
@@ -36,13 +36,13 @@ $Id$
 			</label>
 
 			<div class="gluon-value-field">
-				<input id="keepcfg" class="gluon-input-checkbox" type="checkbox" name="keepcfg" value="1" checked="checked" />
+				<input id="keepcfg" type="checkbox" name="keepcfg" value="1" checked="checked" />
 				<label for="keepcfg"></label>
 			</div>
 		</div>
 	</div>
 
-	<div class="gluon-page-actions right">
+	<div class="gluon-page-actions">
 		<input type="hidden" name="step" value="2" />
 		<input type="hidden" name="token" value="<%=token%>" />
 		<input class="gluon-button gluon-button-submit" type="submit" value="<%:Upload image%>" />

package/gluon-web-mesh-vpn-fastd/files/lib/gluon/config-mode/view/mesh-vpn-fastd.html

@@ -1,6 +1,6 @@
 <div class="gluon-value">
   <div class="gluon-value-title">
-    <input class="gluon-input-radio" data-update="change" type="radio" value="security"<%= attr("id", id..'.1') .. attr("name", id) .. attr("checked", ((self:cfgvalue() or self.default) == "security") and "checked") %> />
+    <input data-update="change" type="radio" value="security"<%= attr("id", id..'.1') .. attr("name", id) .. attr("checked", ((self:cfgvalue() or self.default) == "security") and "checked") %> />
     <label<%= attr("for", id..'.1')%>></label>
   </div>
   <div class="gluon-value-field-long">
@@ -18,7 +18,7 @@
 
 <div class="gluon-value gluon-value-last">
   <div class="gluon-value-title">
-    <input class="gluon-input-radio" data-update="change" type="radio" value="performance"<%= attr("id", id..'.2') .. attr("name", id) .. attr("checked", ((self:cfgvalue() or self.default) == "performance") and "checked") %> />
+    <input data-update="change" type="radio" value="performance"<%= attr("id", id..'.2') .. attr("name", id) .. attr("checked", ((self:cfgvalue() or self.default) == "performance") and "checked") %> />
     <label<%= attr("for", id..'.2')%>></label>
   </div>
   <div class="gluon-value-field-long">

package/gluon-web-model/files/lib/gluon/web/view/model/dynlist.html

@@ -10,7 +10,7 @@
 <%
 	for i, val in ipairs(self:cfgvalue()) do
 %>
-	<input class="gluon-input-text" value="<%|val%>" data-update="change" type="text"<%=
+	<input value="<%|val%>" data-update="change" type="text"<%=
 		attr("id", id .. "." .. i) ..
 		attr("name", id) ..
 		attr("size", self.size) ..

package/gluon-web-model/files/lib/gluon/web/view/model/fvalue.html

@@ -1,4 +1,4 @@
-<input class="gluon-input-checkbox" data-update="click change" type="checkbox" value="1"<%=
+<input data-update="click change" type="checkbox" value="1"<%=
 	attr("id", id) .. attr("name", id) ..
 	attr("checked", self:cfgvalue() and "checked")
 %> />

package/gluon-web-model/files/lib/gluon/web/view/model/lvalue.html

@@ -4,7 +4,8 @@
 %>
 
 <% if self.widget == "select" then %>
-	<select class="gluon-input-select" data-update="change"<%=
+	<div class="select-wrapper">
+		<select data-update="change"<%=
 			attr("id", id) ..
 			attr("name", id) ..
 			attr("size", self.size) ..
@@ -21,6 +22,7 @@
 				%>><%|entry.value%></option>
 			<%- end %>
 		</select>
+	</div>
 <% elseif self.widget == "radio" then %>
 	<div>
 		<% for i, entry in pairs(entries) do %>
@@ -28,7 +30,7 @@
 				attr("data-index", i) ..
 				attr("data-depends", self:deplist(entry.deps))
 			%>>
-				<input class="gluon-input-radio" data-update="click change" type="radio"<%=
+				<input data-update="click change" type="radio"<%=
 					attr("id", id.."."..entry.key) ..
 					attr("name", id) ..
 					attr("value", entry.key) ..

package/gluon-web-model/files/lib/gluon/web/view/model/tvalue.html

@@ -1,3 +1,3 @@
-<textarea class="gluon-input-textarea" <% if not self.size then %> style="width: 100%"<% else %> cols="<%=self.size%>"<% end %> data-update="change"<%= attr("name", id) .. attr("id", id) .. attr("rows", self.rows) .. attr("wrap", self.wrap) %>>
+<textarea <% if not self.size then %> style="width: 100%"<% else %> cols="<%=self.size%>"<% end %> data-update="change"<%= attr("name", id) .. attr("id", id) .. attr("rows", self.rows) .. attr("wrap", self.wrap) %>>
 <%-|self:cfgvalue()-%>
 </textarea>

package/gluon-web-model/files/lib/gluon/web/view/model/value.html

@@ -2,7 +2,6 @@
 	attr("id", id) ..
 	attr("name", id) ..
 	attr("type", self.password and "password" or "text") ..
-	attr("class", self.password and "gluon-input-password" or "gluon-input-text") ..
 	attr("value", self:cfgvalue()) ..
 	attr("size", self.size) ..
 	attr("placeholder", self.placeholder) ..

package/gluon-web-model/javascript/gluon-web-model.js

@@ -276,7 +276,6 @@
 					t.value = values[i-1];
 					t.type = 'text';
 					t.index = i;
-					t.className = 'gluon-input-text';
 
 				if (attr.size)
 					t.size = attr.size;