luci-app-travelmate: consolidate css

* fix IE Edge rendering issues
* merge external styles in central css

Signed-off-by: Dirk Brenken <dev@brenken.org>

applications/luci-app-travelmate/luasrc/model/cbi/travelmate/cfg_firewall_tab.lua

@@ -11,7 +11,7 @@ if not fs.access(input) then
 end
 
 m = SimpleForm("input", nil)
-m:append(Template("travelmate/config_css"))
+m:append(Template("travelmate/travelmate_css"))
 m.submit = translate("Save")
 m.reset = false
 

applications/luci-app-travelmate/luasrc/model/cbi/travelmate/cfg_network_tab.lua

@@ -11,7 +11,7 @@ if not fs.access(input) then
 end
 
 m = SimpleForm("input", nil)
-m:append(Template("travelmate/config_css"))
+m:append(Template("travelmate/travelmate_css"))
 m.submit = translate("Save")
 m.reset = false
 

applications/luci-app-travelmate/luasrc/model/cbi/travelmate/cfg_wireless_tab.lua

@@ -11,7 +11,7 @@ if not fs.access(input) then
 end
 
 m = SimpleForm("input", nil)
-m:append(Template("travelmate/config_css"))
+m:append(Template("travelmate/travelmate_css"))
 m.submit = translate("Save")
 m.reset = false
 

applications/luci-app-travelmate/luasrc/model/cbi/travelmate/configuration_tab.lua

@@ -13,7 +13,7 @@ if not fs.access(input) then
 end
 
 m = SimpleForm("input", nil)
-m:append(Template("travelmate/config_css"))
+m:append(Template("travelmate/travelmate_css"))
 m.submit = translate("Save")
 m.reset = false
 

applications/luci-app-travelmate/luasrc/view/travelmate/config_css.htm

@@ -1,13 +0,0 @@
-<style type="text/css">
-	textarea
-	{
-		border: 1px solid #cccccc;
-		padding: 5px;
-		font-size: 12px;
-		font-family: monospace;
-		resize: none;
-		white-space: pre;
-		overflow-wrap: normal;
-		overflow-x: scroll;
-	}
-</style>

applications/luci-app-travelmate/luasrc/view/travelmate/logread.htm

@@ -4,22 +4,7 @@ This is free software, licensed under the Apache License, Version 2.0
 -%>
 
 <%+header%>
-
+<%+travelmate/travelmate_css%>
-<style type="text/css">
-	select[readonly],
-	textarea[readonly]
-	{
-		width: 100%;
-		height: 450px;
-		border: 1px solid #cccccc;
-		padding: 5px;
-		font-size: 12px;
-		font-family: monospace;
-		resize: none;
-		pointer-events: auto;
-		cursor: auto;
-	}
-</style>
 
 <script type="text/javascript">
 //<![CDATA[

applications/luci-app-travelmate/luasrc/view/travelmate/runtime.htm

@@ -3,17 +3,7 @@ Copyright 2017-2018 Dirk Brenken (dev@brenken.org)
 This is free software, licensed under the Apache License, Version 2.0
 -%>
 
-<style type="text/css">
+<%+travelmate/travelmate_css%>
-	.runtime
-	{
-		color: #37c;
-		font-weight: bold;
-		display: inline-block;
-		width: 100%;
-		padding-top: 0.5rem;
-	}
-</style>
-
 <script type="text/javascript">
 //<![CDATA[
 	function status_update(json)
@@ -148,7 +138,7 @@ This is free software, licensed under the Apache License, Version 2.0
 	<label class="cbi-value-title" for="button_1"><%:Restart Travelmate%></label>
 	<div class="cbi-value-field">
 		<input class="cbi-button cbi-button-reset" id="btn1" type="button" name="do_restart" value="<%:Restart%>" onclick="btn_action(this)" />
-		<span id="btn1_running" style="display:inline-block; width:16px; height:16px; margin:0 5px"></span>
+		<span id="btn1_running" class="btn_running"></span>
 	</div>
 </div>
 <div class="cbi-value" id="button_2">
@@ -200,10 +190,10 @@ This is free software, licensed under the Apache License, Version 2.0
 					if fs.access("/usr/bin/qrencode") then
 						qrcode = luci.sys.exec("/usr/bin/qrencode --inline --8bit --type=SVG --output=- 'WIFI:S:\"'" .. e_ssid .. "'\";T:'" .. enc .. "';P:\"'" .. e_key .. "'\";H:'" .. hidden .. "';'")
 -%>
-		<div class="cbi-value" style="border-bottom: 0px; margin-bottom: 0px; padding: 0.25em 0.6em; text-align: left">
+		<div class="qr-code">
 			<%=qrcode%>
 		</div>
-		<div class="cbi-value" style="border-bottom: 0px; margin-bottom: 0px; padding: 0.25em 0.6em; text-align: left">
+		<div class="qr-code">
 			<em><%:AP on %><%=device%><%: with SSID %>"<%=ssid%>"</em>
 			<hr />
 		</div>
@@ -214,7 +204,7 @@ This is free software, licensed under the Apache License, Version 2.0
 		end)
 		if not qrcode then
 -%>
-		<div class="cbi-value" style="border-bottom: 0px; margin-bottom: 0px; padding: 0.25em 0.6em; text-align: left">
+		<div class="qr-code">
 			<em><%:For QR-Code support please install package 'qrencode'!%></em>
 		</div>
 <%-

applications/luci-app-travelmate/luasrc/view/travelmate/travelmate_css.htm

@@ -0,0 +1,116 @@
+<style type="text/css">
+	textarea
+	{
+		width: 100%;
+		height: 450px;
+		border: 1px solid #cccccc;
+		padding: 5px;
+		font-size: 12px;
+		font-family: monospace;
+		resize: none;
+		white-space: pre;
+		overflow-wrap: normal;
+		overflow-x: scroll;
+	}
+
+	select[readonly],
+	textarea[readonly]
+	{
+		width: 100%;
+		height: 450px;
+		border: 1px solid #cccccc;
+		padding: 5px;
+		font-size: 12px;
+		font-family: monospace;
+		resize: none;
+		pointer-events: auto;
+		cursor: auto;
+	}
+
+	.table.cbi-section-table .th,
+	.table.cbi-section-table .td,
+	.cbi-section-table-cell,
+	.cbi-section-table-row,
+	.tr[data-title]::before
+	{
+		text-align: left;
+		vertical-align: top;
+		margin-left: 0px;
+		padding-left: 2px;
+	}
+
+	.table.cbi-section-table .th
+	{
+		white-space: nowrap;
+	}
+
+	.cbi-section-table-row > .cbi-value-field .cbi-input-select,
+	.table.cbi-section-table select
+	{
+		width: 70px;
+	}
+
+	.cbi-section-table-row > .cbi-value-field [data-dynlist] > input,
+	.table.cbi-section-table input[type="text"],
+	.cbi-dynlist > .item,
+	.table.cbi-section-table input,
+	.cbi-dynlist
+	{
+		display: inline-block;
+		width: 7em;
+		margin: 1px;
+	}
+
+	.td.cbi-value-field .cbi-button
+	{
+		width: auto;
+		margin: 1px 0 1px -2px;
+	}
+
+	.btn,
+	.cbi-button,
+	.item::after
+	{
+		-webkit-appearance: menulist;
+	}
+
+	.cbi-input-checkbox
+	{
+		height: 1em;
+	}
+
+	.cbi-input-text
+	{
+		text-align: left;
+		padding-left: 2px;
+		outline: none;
+		box-shadow: none;
+		background: transparent;
+		width: 7em;
+	}
+
+	.runtime
+	{
+		color: #37c;
+		font-weight: bold;
+		display: inline-block;
+		width: 100%;
+		padding-top: 0.5rem;
+	}
+
+	.button_running
+	{
+		display: inline-block;
+		width: 16px;
+		height: 16px;
+		margin: 0 5px;
+	}
+
+	.qr-code
+	{
+		border-bottom: 0px;
+		margin-bottom: 0px;
+		padding: 0.25em 0.6em;
+		text-align: left
+	}
+</style>