luci-theme-openwrt: modal/progressbar rules, mobile improvements

 - Add rules for modal dialogs and progress bar widgets
 - Increase button and input size on mobile devices
 - Convert pt to px units
 - Add label and h5 styles
 - Add common flash and spin utility classes

Signed-off-by: Jo-Philipp Wich <jo@mein.io>

1 files changed, 168 insertions, 35 deletions

diff --git a/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css b/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css
index a88d678f6d..acd711a1ea 100644
--- a/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css
+++ b/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css
@@ -19,7 +19,7 @@ body {
 	background-position: bottom center;
 	background-repeat: repeat-x;
 	font-family: Arial, Verdana, sans-serif;
-	font-size: 10pt;
+	font-size: 13px;
 	padding-bottom: 1.5em;
 }
 
@@ -86,7 +86,7 @@ a img {
 	background: #f5f5f5;
 	border: 1px solid #444;
 	border-width: 0 0 1px 1px;
-	font-size: 11pt;
+	font-size: 15px;
 	padding-bottom: 1em;
 }
 
@@ -199,6 +199,59 @@ hr {
 	margin-left: 2em;
 }
 
+#modal_overlay {
+	position: fixed;
+	top: 0;
+	bottom: 0;
+	left: -10000px;
+	right: 10000px;
+	background: rgba(0, 0, 0, 0.7);
+	z-index: 900;
+	overflow-y: scroll;
+	-webkit-overflow-scrolling: touch;
+	transition: opacity .125s ease-in;
+	opacity: 0;
+}
+
+.modal {
+	width: 90%;
+	margin: 5em auto;
+	display: flex;
+	flex-wrap: wrap;
+	min-height: 32px;
+	max-width: 600px;
+	align-items: center;
+	border-radius: 3px;
+	background: #f5f5f5;
+	border: 1px solid #000;
+	padding: .5em .5em .25em .5em;
+	max-height: 2400px;
+	min-width: 270px;
+	color: #444;
+}
+
+.modal > * {
+	flex-basis: 100%;
+	line-height: normal;
+	margin-bottom: .5em;
+}
+
+.modal > pre,
+.modal > textarea {
+	white-space: pre-wrap;
+	overflow: auto;
+}
+
+body.modal-overlay-active {
+	overflow: hidden;
+}
+
+body.modal-overlay-active #modal_overlay {
+	left: 0;
+	right: 0;
+	opacity: 1;
+}
+
 .warning {
 	color: red;
 	background-color: white;
@@ -234,19 +287,29 @@ hr {
 	margin: 0 0 .5em 0;
 }
 
-.alert-message, .cbi-tooltip.error {
+.label {
+	padding: 1px 2px;
+	font-size: 10px;
+	color: #fff;
+	text-transform: uppercase;
+	white-space: nowrap;
+	background-color: #aaa;
+	border-radius: 3px;
+}
+
+.alert-message, .cbi-tooltip.error, .label.error {
 	border-color: #a22;
 	background: #fee;
 	color: #a22;
 }
 
-.alert-message.notice, .cbi-tooltip.notice {
+.alert-message.notice, .cbi-tooltip.notice, .label.notice {
 	border-color: #15a;
 	background: #e6f6ff;
 	color: #15a;
 }
 
-.alert-message.warning, .cbi-tooltip.warning {
+.alert-message.warning, .cbi-tooltip.warning, .label.warning {
 	border-color: #ed5;
 	background: #fe9;
 	color: #650;
@@ -392,7 +455,7 @@ textarea#syslog {
 	direction: rtl;
 }
 
-h2, h3, h4, legend {
+h2, h3, h4, h5, legend {
 	font-size: 150%;
 	font-family: Trebuchet MS, Verdana, sans-serif;
 	font-weight: bold;
@@ -411,6 +474,10 @@ h4 {
 	font-size: 112%;
 }
 
+h5 {
+	font-size: 105%;
+}
+
 fieldset { border: none; }
 fieldset > legend { float: left; }
 fieldset > legend + * { clear: both; }
@@ -499,7 +566,7 @@ input[type=text],
 input[type=password],
 .cbi-dropdown {
 	width: 20em;
-	font-size: 10pt;
+	font-size: 12px;
 	height: 22px;
 }
 
@@ -514,6 +581,12 @@ input.cbi-input-password + img {
 	vertical-align: middle;
 }
 
+label > input[type="checkbox"],
+label > input[type="radio"] {
+	vertical-align: bottom;
+	margin: 0;
+}
+
 .td select,
 .td .cbi-dropdown,
 .td input[type=text],
@@ -543,8 +616,9 @@ img.cbi-image-button {
 	background: #fff;
 	text-align: center;
 	font-weight: bold;
-	line-height: 13pt;
-	height: 16pt;
+	line-height: 12px;
+	height: 22px;
+	line-height: 20px;
 	box-sizing: border-box;
 	cursor: pointer;
 }
@@ -777,16 +851,6 @@ div.cbi-optionals {
 	margin: 0;
 }
 
-@keyframes flash {
-	0% { opacity: 1; }
-	50% { opacity: .5; }
-	100% { opacity: 1; }
-}
-
-.tr.cbi-section-table-row.flash {
-	animation: flash .35s;
-}
-
 .tr.cbi-section-table-descr .th {
 	font-weight: normal;
 	font-size: 90%;
@@ -800,7 +864,6 @@ div.cbi-optionals {
 
 .th.cbi-section-actions,
 .td.cbi-section-actions {
-	overflow: visible;
 	align-self: center;
 	vertical-align: middle;
 }
@@ -1205,12 +1268,12 @@ input[type="password"] + .cbi-button,
 select + .cbi-button {
 	border-radius: 0 3px 3px 0;
 	border: 1px outset #000;
-	margin: 0 0 1px -2px;
+	margin: 0 0 0 -2px;
 	padding: 0 6px;
 	vertical-align: top;
 	display: inline-block;
 	height: 22px;
-	font-size: 10pt;
+	font-size: 12px;
 	line-height: 20px;
 }
 
@@ -1230,6 +1293,7 @@ select + .cbi-button {
 	transition: opacity .25s ease-out;
 	pointer-events: none;
 	box-shadow: 0 0 2px #444;
+	color: #444;
 }
 
 .cbi-tooltip-container:hover .cbi-tooltip {
@@ -1239,6 +1303,39 @@ select + .cbi-button {
 	white-space: normal;
 }
 
+.cbi-progressbar {
+	background: #ddd;
+	border: 1px solid #bbb;
+	border-radius: 3px;
+	position: relative;
+	min-width: 170px;
+	height: 20px;
+	margin: 4px 0;
+	line-height: 20px;
+}
+
+.cbi-progressbar > div {
+	background: #90c0e0;
+	height: 100%;
+	transition: width .25s ease-in;
+	width: 0%;
+}
+
+.cbi-progressbar::after {
+	position: absolute;
+	bottom: 0;
+	top: 0;
+	right: 0;
+	left: 0;
+	text-align: center;
+	text-shadow: 0 0 2px #fff;
+	content: attr(title);
+	white-space: pre;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+
 .zonebadge .cbi-tooltip {
 	padding: 1px;
 	background: inherit;
@@ -1332,7 +1429,7 @@ select + .cbi-button {
 }
 
 .ifacebadge > * {
-	align-self: flex-start;
+	align-self: center;
 }
 
 .ifacebadge > img,
@@ -1528,6 +1625,32 @@ select + .cbi-button {
 }
 
 
+@keyframes flash {
+	0% { opacity: 1; }
+	50% { opacity: .5; }
+	100% { opacity: 1; }
+}
+
+.flash {
+	animation: flash .35s;
+}
+
+.spinning {
+	position: relative;
+	padding-left: 32px !important;
+}
+
+.spinning::before {
+	position: absolute;
+	top: 0;
+	left: 0;
+	bottom: 0;
+	width: 32px;
+	content: " ";
+	background: url(../resources/icons/loading.gif) no-repeat center;
+	background-size: 16px;
+}
+
 }
 
 @media screen and (max-width: 992px) {
@@ -1732,29 +1855,36 @@ select + .cbi-button {
 
 @media screen and (max-width: 480px) {
 	body {
-		font-size: 12pt;
+		font-size: 16px;
 	}
 
-	input, textarea, select, .cbi-button {
-		font-size: 12pt !important;
+	input, textarea, select, .cbi-button, .cbi-dropdown {
+		font-size: 16px !important;
 		line-height: 30px;
 	}
 
 	select, input[type="text"], input[type="password"] {
 		width: 100%;
 		height: 30px;
+		border-radius: 3px;
 	}
 
 	input[type="text"] + .cbi-button,
 	input[type="password"] + .cbi-button,
 	select + .cbi-button {
 		height: 30px;
-		line-height: 28px;
+		line-height: 30px;
+		margin-left: -5px;
+		min-width: 30px;
 	}
 
 	input.cbi-input-password,
 	[data-dynlist] > .add-item > input {
-		width: calc(100% - 20px);
+		width: calc(100% - 25px);
+	}
+
+	.label {
+		font-size: 14px;
 	}
 
 	.cbi-dynlist,
@@ -1771,8 +1901,11 @@ select + .cbi-button {
 	}
 
 	.btn, .cbi-button {
-		font-size: 9pt !important;
-		line-height: 13pt;
+		font-size: 16px !important;
+		line-height: 30px;
+		height: 30px;
+		overflow: hidden;
+		text-overflow: ellipsis;
 	}
 
 	#maincontent {
@@ -1839,11 +1972,6 @@ select + .cbi-button {
 		padding: 0 3px;
 	}
 
-	ul.cbi-tabmenu li {
-		font-size: 90%;
-		margin: 0 1px -1px 0;
-	}
-
 	.hide-xs {
 		display: none;
 	}
@@ -1861,4 +1989,9 @@ select + .cbi-button {
 		width: 100%;
 		margin-top: .5em;
 	}
+
+	#cbi-firewall-rule .td[data-type="fvalue"],
+	#cbi-firewall-redirect .td[data-type="fvalue"] {
+		display: none;
+	}
 }