luci-theme-bootstrap: add responsive CSS

Add responsive CSS to improve the rendering on small screen devices.

Tested on Mobile Safari using an iPhone 5 and iPhone 6, ymmv for other
platforms.

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

1 files changed, 41 insertions, 62 deletions

diff --git a/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css b/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css
index 2322a7385..394361ecd 100644
--- a/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css
+++ b/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css
@@ -500,8 +500,12 @@ select,
 	display: flex;
 }
 
-.cbi-dynlist > .add-item > input {
+.cbi-dynlist > .add-item > input,
+.cbi-dynlist > .add-item > button {
 	flex: 1 1 auto;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
 }
 
 select {
@@ -1012,44 +1016,47 @@ header .dropdown-menu a.hover,
 }
 
 .tabs, .cbi-tabmenu {
-	margin: 0 0 18px;
-	padding: 0;
+	margin: 0 -5px 18px;
+	padding: 0 2px;
 	list-style: none;
-	zoom: 1;
-}
-
-.tabs:before,
-.cbi-tabmenu:before,
-.tabs:after,
-.cbi-tabmenu:after {
-	display: table;
-	content: "";
-	zoom: 1;
-}
-
-.tabs:after, .cbi-tabmenu:after {
-	clear: both;
+	display: flex;
+	background: linear-gradient(#ddd 0%, #ddd 100%) repeat-x;
+	background-size: 1px 1px;
+	background-position: left bottom;
 }
 
 .tabs > li, .cbi-tabmenu > li {
-	float: left;
+	flex: 0 1 auto;
+	display: flex;
+	align-items: center;
+	height: 25px;
+	max-width: 48%;
+	margin: 4px 2px 0 2px;
+	background: #fff;
+	border: 1px solid #ddd;
+	border-bottom: none;
+	border-radius: 4px 4px 0 0;
+	color: #0069d6;
 }
 
 .tabs > li > a, .cbi-tabmenu > li > a {
-	display: block;
+	padding: 4px 6px;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	color: inherit;
+	text-decoration: none;
+	border-radius: 4px 4px 0 0;
+	line-height: 25px;
 }
 
-.tabs,
-.cbi-tabmenu {
-	border-color: #ddd;
-	border-style: solid;
-	border-width: 0 0 1px;
+.tabs > li:not(.active):hover, .cbi-tabmenu > .cbi-tab-disabled:hover {
+	background: linear-gradient(#fff 90%, #ddd 100%);
 }
 
-.tabs > li,
-.cbi-tabmenu > li {
-	position: relative;
-	margin-bottom: -1px;
+.tabs > li:not(.active), .cbi-tabmenu > .cbi-tab-disabled {
+	color: #999;
+	background: linear-gradient(#eee 90%, #ddd 100%);
 }
 
 .cbi-tabmenu.map {
@@ -1065,53 +1072,23 @@ header .dropdown-menu a.hover,
 	display: none;
 }
 
-.tabs > li > a,
-.cbi-tabmenu > li > a {
-	padding: 0 15px;
-	margin-right: 2px;
-	line-height: 34px;
-	border: 1px solid transparent;
-	border-radius: 4px 4px 0 0;
-}
-
-.tabs > li > a:hover,
-.cbi-tabmenu > li > a:hover {
-	text-decoration: none;
-	background-color: #eee;
-	border-color: #eee #eee #ddd;
-}
-
-.tabs .active > a, .tabs .active > a:hover,
-.cbi-tabmenu .active > a, .cbi-tabmenu .active > a:hover,
-.cbi-tab > a:link, .cbi-tab > a:hover {
-	color: #808080;
-	background-color: #fff;
-	border: 1px solid #ddd;
-	border-bottom-color: transparent;
-	cursor: default;
-}
-
-.tabs .menu-dropdown, .tabs .dropdown-menu,
-.cbi-tabmenu .menu-dropdown, .cbi-tabmenu .dropdown-menu {
+.tabs .menu-dropdown, .tabs .dropdown-menu {
 	top: 35px;
 	border-width: 1px;
 	border-radius: 0 6px 6px 6px;
 }
 
-.tabs a.menu:after, .tabs .dropdown-toggle:after,
-.cbi-tabmenu a.menu:after, .cbi-tabmenu .dropdown-toggle:after {
+.tabs a.menu:after, .tabs .dropdown-toggle:after {
 	border-top-color: #999;
 	margin-top: 15px;
 	margin-left: 5px;
 }
 
-.tabs li.open.menu .menu, .tabs .open.dropdown .dropdown-toggle,
-.cbi-tabmenu li.open.menu .menu, .cbi-tabmenu .open.dropdown .dropdown-toggle {
+.tabs li.open.menu .menu, .tabs .open.dropdown .dropdown-toggle {
 	border-color: #999;
 }
 
-.tabs li.open a.menu:after, .tabs .dropdown.open .dropdown-toggle:after,
-.cbi-tabmenu li.open a.menu:after, .cbi-tabmenu .dropdown.open .dropdown-toggle:after {
+.tabs li.open a.menu:after, .tabs .dropdown.open .dropdown-toggle:after {
 	border-top-color: #555;
 }
 
@@ -1167,6 +1144,7 @@ footer {
 	-webkit-overflow-scrolling: touch;
 	transition: opacity .125s ease-in;
 	opacity: 0;
+	visibility: hidden;
 }
 
 .modal {
@@ -1206,6 +1184,7 @@ body.modal-overlay-active #modal_overlay {
 	left: 0;
 	right: 0;
 	opacity: 1;
+	visibility: visible;
 }
 
 .btn.danger,