Fix: Ansum theme cleaning (#4538)

* icons

* login screen

* fix login screen input in .stick

* <legend> in the same height like input

* simplefy the search bar button

* header height improved

* improve the config menu button

* navigation bar: border radius

* navigation bar: btn hover improved to darker grey, when not within .stick

* delete unused code ul.nav

* delete outcommented code + translate EN-> FR

* fix syntax

* fixed and RTL

* RTL

1 files changed, 37 insertions, 116 deletions

diff --git a/p/themes/Ansum/_layout.scss b/p/themes/Ansum/_layout.scss
index b35b1ded7..4d099ab4a 100644
--- a/p/themes/Ansum/_layout.scss
+++ b/p/themes/Ansum/_layout.scss
@@ -10,15 +10,12 @@
 	background: variables.$sid-bg;
 	display: block;
 	width: auto;
-	height: 3rem;
+	height: 3.5rem;
 	table-layout: none;
 
 	.item {
 		vertical-align: middle;
-		// text-align: center;
-		// display: flex;
-		// justify-content: space-between;
-		// flex-direction: row;
+
 		&.title {
 			width: 280px;
 			font-weight: 400;
@@ -32,8 +29,6 @@
 		}
 
 		&.search {
-			// text-align: center;
-			// width: 50%;
 			input {
 				width: 230px;
 				color: variables.$sid-font-color;
@@ -55,50 +50,46 @@
 				}
 			}
 
-			.btn {
-				img {display: none;}
+			input:focus ~ .btn,
+			input:hover ~ .btn {
+				background-color: variables.$main-first;
 
+				.icon {
+					filter: brightness(3);
+				}
+			}
+
+			.btn {
 				width: 3rem;
 				border-radius: 0 2px 2px 0;
-
-				background-color: variables.$main-first;
-				background-position: center;
-				background-repeat: no-repeat;
-				background-image: url(icons/magnifier.svg);
-
+				background-color: variables.$sid-bg-alt;
 				border-left-width: 0;
 				min-height: 35px;
 
+				.icon {
+					filter: invert(49%) sepia(13%) saturate(2426%) hue-rotate(346deg) brightness(99%) contrast(95%);
+				}
+
 				&:hover {
 					background-color: variables.$main-first-alt;
+
+					.icon {
+						filter: brightness(3);
+					}
 				}
 			}
 		}
 
 		&.configure {
-			width: 2rem;
+			width: 3rem;
 			position: absolute;
 			right: 1rem;
-			top: 1.25rem;
+			top: 1rem;
 			text-align: center;
-			// float: right;
-			.btn {
-				img {display: none;}
-
-				padding: 0 0.5rem;
-				// border-radius: 0 2px 2px 0;
 
+			.btn {
+				padding: 0.25rem 1rem;
 				background-color: transparent;
-				background-position: center;
-				background-repeat: no-repeat;
-				background-image: url(icons/cog.svg);
-
-				// border-left-width: 0;
-
-				// width: 3rem;
-				&:hover {
-					// background-color: $main-first-alt;
-				}
 			}
 		}
 	}
@@ -106,12 +97,13 @@
 
 /*=== Body */
 #global {
-	height: calc(100% - 4rem);
+	height: calc(100% - 3.5rem);
 }
 
 /*=== Prompt (centered) */
-.prompt input {
-	margin: 5px auto;
+main.prompt {
+	background: variables.$grey-light;
+	border-radius: 5px;
 }
 
 /*=== New article notification */
@@ -141,16 +133,13 @@
 	line-height: 3em;
 	letter-spacing: 1px;
 	text-transform: uppercase;
-	// border-left: 2px solid #ecf0f1;
+
 	.name {
 		padding: 0 1rem 0 1rem;
-		// font-weight: 700;
 		color: variables.$main-font-color;
 		font-size: 0.875rem;
 		position: relative;
 		left: 0;
-
-		// letter-spacing: 1px;
 		text-transform: uppercase;
 	}
 }
@@ -186,13 +175,11 @@
 		background-repeat: no-repeat;
 
 		&:hover {
-			background-color: variables.$grey-light;
+			background-color: variables.$grey-medium-light;
 		}
 	}
 
 	.stick {
-		background: variables.$grey-lighter;
-
 		.btn {
 			border-left-width: 0;
 			padding: 0.5rem 1rem;
@@ -208,48 +195,14 @@
 
 			&.active {
 				background-color: variables.$main-first;
-			}
-
-			img.icon {display: none;} // on efface pour afficher nos icones, mouhahaha !!
-
-
-			// actions
-			&#toggle-read {
-				background-image: url(icons/read.svg);
-			}
-
-			&#toggle-read.active {
-				background-image: url(icons/read-white.svg);
-			}
 
-			&#toggle-unread {
-				background-image: url(icons/unread.svg);
-			}
-
-			&#toggle-unread.active {
-				background-image: url(icons/unread-white.svg);
-			}
-
-			&#toggle-starred {
-				background-image: url(icons/starred.svg);
-			}
-
-			&#toggle-starred.active {
-				background-image: url(icons/starred-white.svg);
-			}
-
-			&#toggle-non-starred {
-				background-image: url(icons/non-starred.svg);
-			}
-
-			&#toggle-non-starred.active {
-				background-image: url(icons/non-starred-white.svg);
+				.icon {
+					filter: brightness(5);
+				}
 			}
 
-			// read all
 			&.read_all {
 				padding: 5px 16px;
-				// min-height: 0;
 				color: variables.$main-font-color;
 				background-color: variables.$grey-lighter;
 
@@ -259,42 +212,16 @@
 					background-color: variables.$grey-medium-light;
 				}
 			}
-
-			// views
-			&.view-normal {
-				background-image: url(icons/view-list.svg);
-			}
-
-			&.view-normal.active {
-				background-image: url(icons/view-list-white.svg);
-			}
-
-			&.view-global {
-				background-image: url(icons/view-global.svg);
-			}
-
-			&.view-global.active {
-				background-image: url(icons/view-global-white.svg);
-			}
-
-			&.view-reader {
-				background-image: url(icons/view-reader.svg);
-			}
-
-			&.view-reader.active {
-				background-image: url(icons/view-reader-white.svg);
-			}
-
-			&.view-rss {
-				background-image: url(icons/rss.svg);
-			}
-
 		}
 
 		.dropdown {
 			a.dropdown-toggle {
 				border-left-width: 0;
 				background-image: url(icons/more.svg);
+
+				.icon {
+					display: none;
+				}
 			}
 		}
 	}
@@ -368,7 +295,6 @@
 		border-radius: 3px;
 	}
 
-
 	blockquote {
 		margin: 0;
 		padding: 5px 20px;
@@ -382,21 +308,17 @@
 			margin: 0;
 		}
 	}
-
 }
 
 
 /*=== Notification and actualize notification */
 .notification {
-
 	padding: 1rem 0;
 	background: variables.$grey-medium-light;
 	width: 100%;
 	height: 3rem;
 	color: variables.$grey-dark;
-	// font-weight: bold;
 	font-size: 1em;
-	// border-radius: 3px;
 	border: none;
 	position: fixed;
 	top: auto;
@@ -448,7 +370,6 @@
 	}
 }
 
-
 /*=== Navigation menu (for articles) */
 #nav_entries {
 	margin: 0;