1 files changed, 69 insertions, 101 deletions

diff --git a/p/themes/Mapco/mapco.rtl.css b/p/themes/Mapco/mapco.rtl.css
index 21cc44222..b962e5fe0 100644
--- a/p/themes/Mapco/mapco.rtl.css
+++ b/p/themes/Mapco/mapco.rtl.css
@@ -17,7 +17,7 @@
 	font-style: normal;
 	font-stretch: normal;
 	font-weight: 700;
-	src: url("../fonts/LatoLatin-Regular.woff") format("woff");
+	src: url("../fonts/LatoLatin-Bold.woff") format("woff");
 }
 @font-face {
 	font-family: "lato";
@@ -163,22 +163,16 @@ input:disabled, select:disabled {
 	background: #eff0f2;
 }
 
-input.extend {
-	transition: width 200ms linear;
-}
-
 .form-group {
 	padding: 5px;
 	border-radius: 3px;
 }
 .form-group::after {
-	content: "";
 	display: block;
 	clear: both;
 }
 .form-group .group-name {
 	padding: 10px 0;
-	text-align: left;
 }
 .form-group .group-controls {
 	min-height: 25px;
@@ -200,8 +194,7 @@ table {
 	border-collapse: collapse;
 }
 
-tr, th, td {
-	padding: 0.5em;
+th, td {
 	border: 1px solid #d5d8db;
 }
 
@@ -227,6 +220,10 @@ form th {
 }
 
 /*=== Dropdown */
+.dropdown .dropdown-target:target + .btn {
+	background-color: #d5d8db;
+}
+
 .dropdown-menu {
 	margin: 9px 0 0 0;
 	padding: 0.5rem 0 1rem 0;
@@ -241,8 +238,9 @@ form th {
 	border: none;
 	left: 18px;
 }
-.dropdown-menu .dropdown-header {
-	padding: 1rem 1rem 1rem 0.5rem;
+.dropdown-menu .dropdown-header,
+.dropdown-menu .dropdown-section .dropdown-section-title {
+	padding: 1rem 1.5rem;
 	font-weight: bold;
 	text-align: right;
 	color: #5b6871;
@@ -252,21 +250,37 @@ form th {
 .dropdown-menu .item {
 	transition: all 0.075s ease-in-out;
 }
-.dropdown-menu .item a, .dropdown-menu .item span, .dropdown-menu .item .as-link {
+.dropdown-menu .item > a,
+.dropdown-menu .item > span,
+.dropdown-menu .item > .as-link {
 	padding: 0 2rem;
 	color: #303136;
-	font-size: 1rem;
+	font-size: inherit;
 	line-height: 2.5em;
 }
-.dropdown-menu .item:not(.addItem) a:hover,
-.dropdown-menu .item:not(.addItem) button:hover {
+.dropdown-menu .item > a span.icon,
+.dropdown-menu .item > span span.icon,
+.dropdown-menu .item > .as-link span.icon {
+	padding: 0 0.25rem !important;
+}
+.dropdown-menu .item > a:not(.addItem):hover,
+.dropdown-menu .item > .as-link:not(.addItem):hover {
 	background: #36c;
 	color: #fff;
 }
-.dropdown-menu .item:not(.addItem) a:hover .icon,
-.dropdown-menu .item:not(.addItem) button:hover .icon {
+.dropdown-menu .item > a:not(.addItem):hover .icon,
+.dropdown-menu .item > .as-link:not(.addItem):hover .icon {
 	filter: brightness(3);
 }
+.dropdown-menu .item.dropdown-section {
+	margin-top: 0.75rem;
+}
+.dropdown-menu .item.dropdown-section ~ .dropdown-section {
+	border-top-color: #eff0f2;
+}
+.dropdown-menu .item.dropdown-section .item a, .dropdown-menu .item.dropdown-section .item .as-link {
+	padding-right: 2rem;
+}
 .dropdown-menu .item[aria-checked=true] a::before {
 	margin: 0 -14px 0 0;
 	font-weight: bold;
@@ -303,8 +317,6 @@ form th {
 
 /*=== Alerts */
 .alert {
-	margin: 1rem 0;
-	padding: 1rem;
 	background: #f9fafb;
 	color: #5b6871;
 	font-size: 1rem;
@@ -530,7 +542,7 @@ form th {
 .stick .btn:first-child {
 	border-radius: 0 5px 5px 0;
 }
-.stick .btn:last-child, .stick input:last-child, .stick .btn + .dropdown > .btn {
+.stick .btn:last-child, .stick input:last-child, .stick .dropdown:last-child > .btn {
 	border-radius: 5px 0 0 5px;
 }
 .stick .btn + .btn,
@@ -559,33 +571,30 @@ form th {
 
 /* Sidebar des pages de configuration */
 /*=== Navigation */
-.nav-list .nav-header,
+.nav-list {
+	font-size: 1rem;
+}
+.nav-list .item.nav-header,
 .nav-list .item {
-	height: 2.5em;
+	min-height: 2.5em;
 	line-height: 2.5em;
-	font-size: 1rem;
 }
 .nav-list .item {
 	background: #303136;
 	color: #fff;
+	min-height: 2.5em;
+	line-height: 2.5em;
+}
+.nav-list .item.nav-header {
+	min-height: 2.5em;
+	line-height: 2.5em;
 }
 .nav-list .item a {
 	padding: 0 1rem;
 	color: #ffffff;
 	transition: all 0.15s ease-in-out;
 }
-.nav-list .item .error a {
-	color: #f5633e;
-}
-.nav-list .item:hover .error a {
-	background: #36c;
-	color: #ffffff;
-}
-.nav-list .item:hover .empty a {
-	background: #f4f762;
-	color: #ffffff;
-}
-.nav-list .item:hover a {
+.nav-list .item a:hover {
 	background: #17181a;
 	text-decoration: none;
 }
@@ -593,24 +602,13 @@ form th {
 	background: #36c;
 	color: #fff;
 }
-.nav-list .item.active .error a {
-	background: #36c;
-	color: #fff;
-}
-.nav-list .item.active .empty a {
-	background: #f4f762;
-	color: #fff;
-}
 .nav-list .item.active a {
 	background: #36c;
 	color: #fff;
 	text-decoration: none;
 }
-.nav-list.empty a {
-	color: #f4f762;
-}
 .nav-list .nav-header {
-	padding: 0 10px;
+	padding: 0 1rem;
 	font-weight: bold;
 	color: #5b6871;
 	text-transform: uppercase;
@@ -680,29 +678,22 @@ form th {
 /*===============*/
 /*=== Header */
 .header {
-	padding: 0.5rem 1.35rem;
 	background: #303136;
-	display: block;
-	width: auto;
-	height: 3.5rem;
-	table-layout: none;
-}
-.header .logo {
-	margin: 11px 0 5px;
-	filter: grayscale(100%) brightness(100);
 }
 .header .item {
 	vertical-align: middle;
 }
-.header .item.title {
-	width: 280px;
-	font-weight: 400;
+.header .item.title a {
+	padding: 0.5rem 1rem;
 }
-.header .item.title a img {
-	margin-left: 0.5rem;
+.header .item.title a .logo {
+	filter: grayscale(100%) brightness(3);
+}
+.header .item.title a:hover .logo {
+	filter: grayscale(100%) brightness(2.2);
 }
 .header .item.search input {
-	width: 230px;
+	width: 350px;
 	color: #ffffff;
 	border: none;
 	border-radius: 0 2px 2px 0;
@@ -713,7 +704,6 @@ form th {
 	background-color: #17181a;
 }
 .header .item.search input:focus {
-	width: 350px;
 	color: #5b6871;
 	background-color: #fff;
 }
@@ -739,10 +729,6 @@ form th {
 	filter: brightness(3);
 }
 .header .item.configure {
-	width: 3rem;
-	position: absolute;
-	left: 1rem;
-	top: 1rem;
 	text-align: center;
 }
 .header .item.configure .btn .icon,
@@ -759,7 +745,7 @@ form th {
 
 /*=== Body */
 #global {
-	height: calc(100% - 3.5rem);
+	height: calc(100vh - (3rem + 2 * var(--frss-padding-top-bottom)));
 }
 
 /*=== Prompt (centered) */
@@ -867,13 +853,16 @@ main.prompt {
 .nav_menu .stick .btn.read_all:hover {
 	background-color: #d5d8db;
 }
-.nav_menu .stick .dropdown a.dropdown-toggle {
+.nav_menu .stick .dropdown:not(#dropdown-search-wrapper) a.dropdown-toggle {
 	border-right-width: 0;
 	background-image: url(icons/more.svg);
 }
-.nav_menu .stick .dropdown a.dropdown-toggle .icon {
+.nav_menu .stick .dropdown:not(#dropdown-search-wrapper) a.dropdown-toggle .icon {
 	display: none;
 }
+.nav_menu .stick #dropdown-search-wrapper.dropdown a.dropdown-toggle {
+	border-right-width: 0;
+}
 
 /*=== Content of feed articles */
 .content, .content.thin {
@@ -969,9 +958,7 @@ main.prompt {
 	color: #fff;
 }
 .notification a.close {
-	padding: 0 15px;
 	border-radius: 3px 0 0 3px;
-	line-height: 3em;
 }
 .notification.good a.close:hover {
 	background: #0c7540;
@@ -979,12 +966,12 @@ main.prompt {
 .notification.bad a.close:hover {
 	background: #73341f;
 }
-.notification#actualizeProgress {
-	line-height: 2em;
-}
 .notification#actualizeProgress br {
 	display: none;
 }
+.notification#actualizeProgress .title {
+	margin: 0 2rem;
+}
 
 /*=== Navigation menu (for articles) */
 #nav_entries {
@@ -1000,10 +987,10 @@ main.prompt {
 	background: #fff;
 	transition: all 0.15s ease-in-out;
 }
-.flux:hover {
+.flux .flux_header:hover {
 	background: #f9fafb;
 }
-.flux:hover:not(.current):hover .item.title {
+.flux .flux_header:hover:not(.current):hover .item.title {
 	background: #f9fafb;
 }
 .flux.current {
@@ -1212,9 +1199,6 @@ main.prompt {
 /*=== MOBILE */
 /*===========*/
 @media (max-width: 840px) {
-	.form-group .group-name {
-		text-align: right;
-	}
 	.aside {
 		transition: all 0.2s ease-in-out;
 	}
@@ -1242,25 +1226,13 @@ main.prompt {
 #slider .toggle_aside .icon {
 		filter: grayscale(100%) brightness(2.5);
 	}
-	.header {
-		padding: 0.5rem;
-		height: 8rem;
-	}
 	.header .item.search {
-		display: block;
-	}
-	.header .item.search form {
-		display: inherit;
-	}
-	.header .item.search .stick {
-		display: flex;
-	}
-	.header .item.search input {
-		width: 90%;
-		height: 3.5rem;
+		display: none;
 	}
-	.header .item.search input:focus {
-		width: 100%;
+	.header .item.configure {
+		position: absolute;
+		top: 0;
+		left: 0;
 	}
 	#global {
 		height: calc(100% - 8rem);
@@ -1288,10 +1260,6 @@ main.prompt {
 	.nav_menu .stick .btn.read_all {
 		padding: 0.85rem 1.25rem;
 	}
-	.nav_menu .search {
-		display: none;
-		max-width: 97%;
-	}
 	.nav_menu .search .input {
 		max-width: 97%;
 		width: 90px;