Swage theme cleanup (#4493)

* some general.prompt styles now in template.css

* login button

* same layout for login and register form

* improve input and select

* legend with dark background instead grey

* fix config icon z-index

* remove unused code

* improve .prompt

* set header also on login and register page

* fix: show passwort button

* improve login button on login and register screen

* dropdown menu: smaller line height

* improve layout sidebar closer

* remove double code

* swage.css

* fix nits

* fix nits

* nits nits nits

* nits are all around us....

* better position of config button

* show header in mobile view + beauty the login button

* CSS files

* style the about FreshRSS link

* delete unused import.svg

* fix config sidebar padding

* fix position of user query button in mobile view

* improve config button in user query dropdown

* fix global view overlay

* fix close button aside bar in reader view

* generated CSS files

* Update swage.scss

* fix nav_menu icon color of unread and favorite

* improve search bar positioning in mobile view

* read-all dropdown menu opens to left side in mobile view

* restyle the new-article banner

* improve big read button

* make the header fixed while scrolling

* fix search input while scrolling

* improve config icons layout in .box

* fix scrollbar:hover in template.css

* improve article footer dropdowns

* swage.css

* Update main.js

* Update main.js

* fix (S)CSS

* config navigation improved

* left feed navigation: hover color added

* CSS files

* Update swage.scss

* New Article banner improved margin

* textarea: removed grey background

* remove unnecessary line

* Revert new-article banner layout

* Remove :hover in slider

* fix select height in sharing config

* Fix scrollbar for slider with white background

* fix: slider close button with theme color

* fixed scrollbar CSS

app/views/helpers/index/normal/entry_bottom.phtml

@@ -37,7 +37,7 @@
 	}
 	// @phpstan-ignore-next-line
 	if ($bottomline_labels) {
-	?><li class="item">
+	?><li class="item labels">
 		<div class="dropdown dynamictags">
 			<div id="dropdown-labels-<?= $this->entry->id() ?>" class="dropdown-target"></div>
 			<a class="dropdown-toggle" href="#dropdown-labels-<?= $this->entry->id() ?>">
@@ -58,7 +58,7 @@
 	}
 	$tags = $bottomline_tags ? $this->entry->tags() : null;
 	if (!empty($tags)) {
-	?><li class="item">
+	?><li class="item tags">
 		<div class="dropdown">
 			<div id="dropdown-tags-<?= $this->entry->id() ?>" class="dropdown-target"></div>
 			<a class="dropdown-toggle" href="#dropdown-tags-<?= $this->entry->id() ?>">
@@ -74,7 +74,7 @@
 		</div>
 	</li><?php
 	}
-	?><li class="item"><?php
+	?><li class="item share"><?php
 			if ($bottomline_sharing) {
 		?><div class="dropdown">
 			<div id="dropdown-share-<?= $this->entry->id() ?>" class="dropdown-target"></div>

p/scripts/main.js

@@ -426,10 +426,17 @@ function toggleContent(new_active, old_active, skipping) {
 
 	if (context.sticky_post) {	// Stick the article to the top when opened
 		const prev_article = new_active.previousElementSibling;
-		let new_pos = new_active.offsetParent.offsetTop + new_active.offsetTop;
+		const nav_menu = document.querySelector('.nav_menu');
+		let nav_menu_height = 0;
+
+		if (getComputedStyle(nav_menu).position === 'fixed' || getComputedStyle(nav_menu).position === 'sticky') {
+			nav_menu_height = nav_menu.offsetHeight;
+		}
+
+		let new_pos = new_active.offsetParent.offsetTop + new_active.offsetTop - nav_menu_height;
 
 		if (prev_article && new_active.offsetTop - prev_article.offsetTop <= 150) {
-			new_pos = prev_article.offsetParent.offsetTop + prev_article.offsetTop;
+			new_pos = prev_article.offsetParent.offsetTop + prev_article.offsetTop - nav_menu_height;
 			if (relative_move) {
 				new_pos -= box_to_move.offsetTop;
 			}
@@ -1213,7 +1220,13 @@ function init_nav_entries() {
 			const windowTop = document.scrollingElement.scrollTop;
 			const item_top = active_item.offsetParent.offsetTop + active_item.offsetTop;
 
-			document.scrollingElement.scrollTop = windowTop > item_top ? item_top : 0;
+			const nav_menu = document.querySelector('.nav_menu');
+			let nav_menu_height = 0;
+
+			if (getComputedStyle(nav_menu).position === 'fixed' || getComputedStyle(nav_menu).position === 'sticky') {
+				nav_menu_height = nav_menu.offsetHeight;
+			}
+			document.scrollingElement.scrollTop = windowTop > item_top ? item_top - nav_menu_height : 0 - nav_menu_height;
 			return false;
 		};
 	}

p/themes/Swage/icons/import.svg

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg enable-background="new 0 0 16 16" version="1.1" viewBox="0 0 16 16" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
-<style type="text/css">.st0{fill:#FFFFFF;}</style>
-<path class="st0" d="M15,16v-2H1v2H15z M15,6h-4V0H5v6H1l7,7L15,6z"/>
-</svg>
-

p/themes/Swage/swage.css

@@ -2,17 +2,19 @@ input,
 select, textarea {
 	min-height: 25px;
 	margin-top: 4px;
-	line-height: 25px;
+	line-height: 29px;
 	vertical-align: middle;
 	background: #fcfcfc;
-	border: none;
-	padding-left: 5px;
+	border: 2px solid #e3e3e3;
+	padding-left: 8px;
 }
 
 input:invalid,
 select:invalid {
+	padding-left: 5px;
 	color: #b0425b;
-	border-color: #b0425b;
+	border-left-color: #b0425b;
+	border-left-width: 5px;
 	box-shadow: none;
 }
 
@@ -56,9 +58,6 @@ a.btn {
 	line-height: 25px;
 	text-decoration: none;
 }
-a.btn:hover {
-	background: #00488b;
-}
 a.btn .icon {
 	filter: brightness(3);
 }
@@ -74,7 +73,7 @@ img.icon:hover {
 }
 
 main#stream {
-	margin-top: 35px;
+	margin-top: 2rem;
 }
 
 sup {
@@ -84,9 +83,10 @@ sup {
 legend {
 	margin: 20px 0 5px;
 	padding: 5px 20px;
-	background: #e3e3e3;
+	background: #22303d;
 	display: inline-block;
 	width: auto;
+	color: #fcfcfc;
 	font-size: 1.4em;
 	clear: both;
 }
@@ -96,7 +96,6 @@ label {
 }
 
 textarea {
-	background: #e3e3e3;
 	width: 360px;
 	height: 100px;
 }
@@ -114,7 +113,8 @@ select:disabled {
 }
 
 select {
-	background: #e3e3e3;
+	padding-top: 7px;
+	padding-bottom: 8px;
 }
 
 input.extend {
@@ -146,6 +146,57 @@ form th {
 	text-align: center;
 }
 
+@supports (scrollbar-width: thin) {
+	#sidebar,
+.scrollbar-thin {
+		scrollbar-color: rgba(255, 255, 255, 0) rgba(255, 255, 255, 0);
+		scrollbar-width: thin;
+	}
+
+	#sidebar:hover,
+.scrollbar-thin:hover {
+		scrollbar-color: rgba(255, 255, 255, 0.5) rgba(255, 255, 255, 0.2);
+	}
+
+	#slider.scrollbar-thin {
+		scrollbar-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.05);
+	}
+
+	#slider.scrollbar-thin:hover {
+		scrollbar-color: rgba(0, 0, 0, 0.4) rgba(0, 0, 0, 0.1);
+	}
+}
+@supports not (scrollbar-width: thin) {
+	#sidebar::-webkit-scrollbar,
+.scrollbar-thin::-webkit-scrollbar {
+		background: rgba(255, 255, 255, 0);
+		width: 8px;
+	}
+
+	#sidebar::-webkit-scrollbar-thumb,
+.scrollbar-thin::-webkit-scrollbar-thumb {
+		background: rgba(255, 255, 255, 0);
+		display: unset;
+		border-radius: 5px;
+	}
+
+	#sidebar:hover::-webkit-scrollbar-thumb,
+.scrollbar-thin:hover::-webkit-scrollbar-thumb {
+		background: rgba(255, 255, 255, 0.5);
+	}
+
+	#slider.scrollbar-thin::-webkit-scrollbar {
+		background: rgba(0, 0, 0, 0.05);
+	}
+
+	#slider.scrollbar-thin::-webkit-scrollbar-thumb {
+		background: rgba(0, 0, 0, 0.1);
+	}
+
+	#slider.scrollbar-thin:hover::-webkit-scrollbar-thumb {
+		background: rgba(0, 0, 0, 0.3);
+	}
+}
 .category .title.error::before {
 	display: inline-block;
 	padding-right: 7px;
@@ -186,6 +237,9 @@ form th {
 	vertical-align: middle;
 	font-size: 0;
 }
+.stick select {
+	margin-top: 0;
+}
 .btn {
 	margin: 0;
 	padding: 5px 10px;
@@ -200,12 +254,13 @@ form th {
 	cursor: pointer;
 	overflow: hidden;
 }
-.btn.active,
-.btn :active,
-.btn :hover {
+.btn.active, .btn:active, .btn:hover {
 	background: #00488b;
 	text-decoration: none;
 }
+.btn .icon {
+	filter: brightness(3);
+}
 
 .btn-important, .btn-attention {
 	font-weight: normal;
@@ -226,7 +281,7 @@ form th {
 }
 
 .nav-list .nav-header {
-	padding: 0 10px;
+	padding: 0 1rem;
 	font-weight: bold;
 	background: #22303d;
 	color: #fcfcfc;
@@ -254,7 +309,7 @@ form th {
 	background: #c46178;
 }
 .nav-list .item > a {
-	padding: 0 10px;
+	padding: 0 1.5rem;
 }
 .nav-list .item.empty a {
 	color: #fa8052;
@@ -302,7 +357,7 @@ form th {
 }
 
 .dropdown-menu {
-	padding: 5px 0;
+	padding: 0.5rem 0 1rem 0;
 	font-size: 0.8rem;
 	text-align: left;
 	border: none;
@@ -310,6 +365,17 @@ form th {
 }
 .dropdown-menu .dropdown-header {
 	cursor: default;
+	padding: 0 0.5rem 0.5rem;
+	font-weight: bold;
+	color: #fcfcfc;
+}
+.dropdown-menu .dropdown-header a {
+	padding: 0 5px;
+	position: absolute;
+	right: 5px;
+}
+.dropdown-menu .dropdown-header a:hover {
+	background-color: #0062be;
 }
 .dropdown-menu::after {
 	content: none;
@@ -337,11 +403,10 @@ form th {
 	padding: 2px 5px;
 }
 
-.dropdown-header {
-	padding: 0 5px 5px;
-	font-weight: bold;
-	text-align: left;
-	color: #fcfcfc;
+.labels .dropdown-menu,
+.tags .dropdown-menu,
+.share .dropdown-menu {
+	right: auto;
 }
 
 .separator {
@@ -452,14 +517,20 @@ form th {
 }
 .box .box-title {
 	margin: 0;
-	padding: 5px 10px;
-	background: #e3e3e3;
-	color: #969696;
+	padding: 7px 10px;
+	background: #22303d;
+	color: #fcfcfc;
 	border-bottom: 1px solid #e3e3e3;
 }
+.box .box-title a {
+	color: #fcfcfc;
+}
 .box .box-title .configure {
 	margin-right: 4px;
 }
+.box .box-title .configure .icon:hover {
+	filter: invert(56%) sepia(87%) saturate(1185%) hue-rotate(327deg) brightness(104%) contrast(96%);
+}
 .box .box-content {
 	padding-left: 30px;
 	max-height: 260px;
@@ -471,7 +542,10 @@ form th {
 }
 .box .box-content .item .configure .icon {
 	vertical-align: middle;
-	background-color: #e3e3e3;
+	filter: invert(1);
+}
+.box .box-content .item .configure .icon:hover {
+	filter: invert(56%) sepia(87%) saturate(1185%) hue-rotate(327deg) brightness(104%) contrast(96%);
 }
 .box.category .box-title .title {
 	font-weight: normal;
@@ -502,6 +576,9 @@ form th {
 	padding: 2px 10px;
 	font-size: 0.8rem;
 }
+.box.visible-semi {
+	border-style: solid;
+}
 
 .tree {
 	margin: 10px 0;
@@ -513,7 +590,7 @@ form th {
 	height: 35px;
 	font-size: 1rem;
 	position: relative;
-	line-height: 2.3rem;
+	line-height: 2rem;
 }
 .tree-folder-title .title {
 	background: inherit;
@@ -575,9 +652,6 @@ form th {
 	top: 5px;
 	filter: grayscale(100%) brightness(100);
 }
-.header > .item.search input {
-	width: 230px;
-}
 .header .item.search input:focus {
 	width: 350px;
 }
@@ -587,8 +661,15 @@ form th {
 .header .item.configure {
 	position: fixed;
 	right: 0;
-	z-index: 1000;
+	z-index: 95;
 	width: 35px;
+	text-align: center;
+	line-height: 0.8rem;
+}
+.header .item.configure > .icon {
+	filter: brightness(3);
+	margin-right: 5px;
+	margin-top: 3px;
 }
 .header .item.configure .dropdown .icon {
 	filter: brightness(3);
@@ -601,6 +682,10 @@ form th {
 .aside.aside_feed .tree {
 	margin: 0 0 50px;
 }
+.aside.aside_feed .tree-folder .tree-folder-title:hover,
+.aside.aside_feed .tree-folder .item.feed:hover {
+	background-color: #00488b;
+}
 .aside.aside_feed .nav-form input,
 .aside.aside_feed .nav-form select {
 	width: 140px;
@@ -623,14 +708,33 @@ form th {
 .aside_feed .tree-folder-items .dropdown-menu::after {
 	left: 2px;
 }
+.aside_feed .about {
+	padding: 1rem;
+	display: block;
+	text-align: center;
+	font-size: 0.8em;
+	font-style: italic;
+}
+
+.reader .aside .toggle_aside {
+	background: #22303d;
+	display: block;
+	width: 100%;
+	height: 50px;
+	line-height: 50px;
+	text-align: center;
+}
+.reader .aside .toggle_aside .icon {
+	filter: brightness(3);
+}
+.reader .aside .toggle_aside:hover {
+	background-color: #0062be;
+}
 
 .post {
 	padding: 10px 50px;
 	font-size: 0.9em;
 }
-.post input {
-	background: #e3e3e3;
-}
 .post input.long {
 	height: 33px;
 	margin-top: 0px;
@@ -644,7 +748,6 @@ form th {
 
 .prompt input {
 	margin: 5px auto;
-	width: 100%;
 }
 
 #global {
@@ -662,6 +765,7 @@ form th {
 	line-height: 1.5em;
 }
 #new-article > a {
+	padding: 1rem;
 	line-height: 1.5em;
 	font-weight: bold;
 	color: #fcfcfc;
@@ -689,14 +793,23 @@ form th {
 	width: 100%;
 	font-size: 0;
 	background-color: #0062be;
-	position: fixed;
-	z-index: 900;
+	position: sticky;
+	top: 0;
+	z-index: 90;
 }
 .nav_menu .item.search {
 	display: inline-block;
-	position: fixed;
+	position: absolute;
 	right: 40px;
 }
+.nav_menu .item.search input {
+	border-width: 0;
+	line-height: 25px;
+}
+.nav_menu #toggle-unread .icon,
+.nav_menu #toggle-starred .icon {
+	filter: brightness(1);
+}
 
 .flux {
 	padding-right: 10px;
@@ -830,26 +943,44 @@ form th {
 	width: 270px;
 }
 
-.formLogin #global {
+#overlay {
+	z-index: 100;
+}
+
+#panel {
+	z-index: 100;
+}
+#panel .nav_menu {
+	position: relative;
+}
+
+.formLogin #global,
+.register #global {
 	height: 0;
 }
-.formLogin .header {
-	background: #22303d;
-	height: 55px;
+.formLogin .header,
+.register .header {
+	background: #0062be;
+	height: 35px;
+	position: relative;
 }
-.formLogin .header > .item.configure {
-	width: 200px;
-	position: unset;
+.formLogin .header > .item.configure,
+.register .header > .item.configure {
+	padding: 8px;
+	width: auto;
+	position: absolute;
+	right: 0;
+	white-space: nowrap;
+	bottom: 0;
 }
-.formLogin a.signin {
-	color: #fcfcfc;
-	padding-left: 5px;
+.formLogin .header > .item.configure .icon,
+.register .header > .item.configure .icon {
+	filter: brightness(3);
 }
-.formLogin input {
-	border-top: 1px #e3e3e3;
-	border-right: 1px #e3e3e3;
-	border-bottom: 1px #e3e3e3;
-	border-left: 5px solid;
+
+a.signin {
+	color: #fcfcfc;
+	font-size: 70%;
 }
 
 .loglist {
@@ -885,7 +1016,7 @@ form th {
 }
 
 @media (max-width: 840px) {
-	.formLogin .header {
+	body:not(.formLogin, .register) .header .item.title {
 		display: none;
 	}
 
@@ -894,33 +1025,28 @@ form th {
 		text-align: left;
 	}
 
-	.dropdown-header, .dropdown-menu > .item {
-		padding: 12px;
+	.dropdown {
+		position: relative;
 	}
 
 	#new-article {
+		margin-top: 2rem;
 		width: 100%;
-		position: sticky;
-		top: 0;
 	}
 
 	.header {
 		display: table;
 	}
-	.header .item.title .logo {
-		display: none;
+	.header .item {
+		padding: 0;
 	}
 	.header .item.configure {
 		padding: 0;
-		position: absolute;
-		right: 77px;
+		position: fixed;
+		right: 76px;
 	}
-
-	.header > .item.title a {
-		display: block;
-		position: absolute;
-		top: -35px;
-		left: 10px;
+	.header .item.configure > .icon {
+		margin-top: 5px;
 	}
 
 	button.read_all.btn {
@@ -934,6 +1060,7 @@ form th {
 	}
 
 	.aside {
+		padding: 0;
 		width: 0;
 		transition: width 200ms linear;
 	}
@@ -942,11 +1069,14 @@ form th {
 		display: block;
 		height: 50px;
 		line-height: 50px;
-		text-align: right;
+		text-align: center;
 		padding-right: 10px;
 	}
-	.aside.aside_feed {
-		padding: 0;
+	.aside .toggle_aside:hover {
+		background-color: #0062be;
+	}
+	.aside .toggle_aside .icon {
+		filter: brightness(3);
 	}
 	.aside.aside_feed .configure-feeds {
 		display: flex;
@@ -959,8 +1089,22 @@ form th {
 		z-index: 1000;
 	}
 
+	#slider .toggle_aside {
+		background: #22303d;
+		display: block;
+		height: 50px;
+		line-height: 50px;
+		text-align: center;
+		padding-right: 10px;
+	}
+	#slider .toggle_aside:hover {
+		background-color: #0062be;
+	}
+	#slider .toggle_aside .icon {
+		filter: brightness(3);
+	}
+
 	.nav_menu {
-		position: initial;
 		height: 71px;
 	}
 	.nav_menu .btn {
@@ -972,16 +1116,17 @@ form th {
 	.nav_menu .stick .btn {
 		margin: 0;
 	}
-	.nav_menu .search {
-		position: absolute !important;
+	.nav_menu .item.search {
 		top: 3px;
-		left: 37px;
+		margin-left: 77px;
+		width: calc(100% - 152px);
+		position: relative;
 	}
-	.nav_menu .search form {
+	.nav_menu .item.search form {
 		display: block;
 	}
-	.nav_menu .search input {
-		width: 85%;
+	.nav_menu .item.search input {
+		width: 100%;
 	}
 
 	#panel .close,
@@ -990,14 +1135,24 @@ form th {
 		display: block;
 		height: 50px;
 		line-height: 50px;
-		text-align: right;
+		text-align: center;
 		padding-right: 10px;
 	}
+	#panel .close:hover,
+.dropdown-menu .toggle_aside:hover {
+		background-color: #0062be;
+	}
 
-	.dropdown-target:target ~ .dropdown-toggle.btn::after {
+	.dropdown-target:target ~ .dropdown-toggle::after,
+.dropdown-target:target ~ .dropdown-toggle.btn::after {
 		display: none;
 	}
 
+	.share .dropdown-menu {
+		right: 3%;
+		left: auto;
+	}
+
 	.day .name {
 		font-size: 1.1rem;
 	}
@@ -1082,7 +1237,6 @@ div#nav_menu_views {
 	}
 }
 button.as-link {
-	color: #fcfcfc;
 	outline: none;
 }
 
@@ -1122,11 +1276,6 @@ button.as-link {
 	color: #c46178;
 }
 
-#dropdown-query ~ .dropdown-menu .dropdown-header .icon {
-	vertical-align: middle;
-	float: right;
-}
-
 #stream.reader .flux {
 	padding: 0 0 50px;
 	background: #fcfcfc;
@@ -1139,15 +1288,17 @@ button.as-link {
 	font-size: 90%;
 }
 
-#nav_menu_actions ul.dropdown-menu, #nav_menu_read_all ul.dropdown-menu {
-	left: 0px;
+#nav_menu_actions ul.dropdown-menu {
+	left: 0;
+}
+
+#nav_menu_read_all ul.dropdown-menu {
+	right: 0;
+	left: auto;
 }
 
 #slider label {
 	min-height: initial;
 }
-#slider .form-group:hover {
-	background: initial;
-}
 
 /*# sourceMappingURL=swage.css.map */

p/themes/Swage/swage.rtl.css

@@ -2,17 +2,19 @@ input,
 select, textarea {
 	min-height: 25px;
 	margin-top: 4px;
-	line-height: 25px;
+	line-height: 29px;
 	vertical-align: middle;
 	background: #fcfcfc;
-	border: none;
-	padding-right: 5px;
+	border: 2px solid #e3e3e3;
+	padding-right: 8px;
 }
 
 input:invalid,
 select:invalid {
+	padding-right: 5px;
 	color: #b0425b;
-	border-color: #b0425b;
+	border-right-color: #b0425b;
+	border-right-width: 5px;
 	box-shadow: none;
 }
 
@@ -56,9 +58,6 @@ a.btn {
 	line-height: 25px;
 	text-decoration: none;
 }
-a.btn:hover {
-	background: #00488b;
-}
 a.btn .icon {
 	filter: brightness(3);
 }
@@ -74,7 +73,7 @@ img.icon:hover {
 }
 
 main#stream {
-	margin-top: 35px;
+	margin-top: 2rem;
 }
 
 sup {
@@ -84,9 +83,10 @@ sup {
 legend {
 	margin: 20px 0 5px;
 	padding: 5px 20px;
-	background: #e3e3e3;
+	background: #22303d;
 	display: inline-block;
 	width: auto;
+	color: #fcfcfc;
 	font-size: 1.4em;
 	clear: both;
 }
@@ -96,7 +96,6 @@ label {
 }
 
 textarea {
-	background: #e3e3e3;
 	width: 360px;
 	height: 100px;
 }
@@ -114,7 +113,8 @@ select:disabled {
 }
 
 select {
-	background: #e3e3e3;
+	padding-top: 7px;
+	padding-bottom: 8px;
 }
 
 input.extend {
@@ -146,6 +146,57 @@ form th {
 	text-align: center;
 }
 
+@supports (scrollbar-width: thin) {
+	#sidebar,
+.scrollbar-thin {
+		scrollbar-color: rgba(255, 255, 255, 0) rgba(255, 255, 255, 0);
+		scrollbar-width: thin;
+	}
+
+	#sidebar:hover,
+.scrollbar-thin:hover {
+		scrollbar-color: rgba(255, 255, 255, 0.5) rgba(255, 255, 255, 0.2);
+	}
+
+	#slider.scrollbar-thin {
+		scrollbar-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.05);
+	}
+
+	#slider.scrollbar-thin:hover {
+		scrollbar-color: rgba(0, 0, 0, 0.4) rgba(0, 0, 0, 0.1);
+	}
+}
+@supports not (scrollbar-width: thin) {
+	#sidebar::-webkit-scrollbar,
+.scrollbar-thin::-webkit-scrollbar {
+		background: rgba(255, 255, 255, 0);
+		width: 8px;
+	}
+
+	#sidebar::-webkit-scrollbar-thumb,
+.scrollbar-thin::-webkit-scrollbar-thumb {
+		background: rgba(255, 255, 255, 0);
+		display: unset;
+		border-radius: 5px;
+	}
+
+	#sidebar:hover::-webkit-scrollbar-thumb,
+.scrollbar-thin:hover::-webkit-scrollbar-thumb {
+		background: rgba(255, 255, 255, 0.5);
+	}
+
+	#slider.scrollbar-thin::-webkit-scrollbar {
+		background: rgba(0, 0, 0, 0.05);
+	}
+
+	#slider.scrollbar-thin::-webkit-scrollbar-thumb {
+		background: rgba(0, 0, 0, 0.1);
+	}
+
+	#slider.scrollbar-thin:hover::-webkit-scrollbar-thumb {
+		background: rgba(0, 0, 0, 0.3);
+	}
+}
 .category .title.error::before {
 	display: inline-block;
 	padding-left: 7px;
@@ -186,6 +237,9 @@ form th {
 	vertical-align: middle;
 	font-size: 0;
 }
+.stick select {
+	margin-top: 0;
+}
 .btn {
 	margin: 0;
 	padding: 5px 10px;
@@ -200,12 +254,13 @@ form th {
 	cursor: pointer;
 	overflow: hidden;
 }
-.btn.active,
-.btn :active,
-.btn :hover {
+.btn.active, .btn:active, .btn:hover {
 	background: #00488b;
 	text-decoration: none;
 }
+.btn .icon {
+	filter: brightness(3);
+}
 
 .btn-important, .btn-attention {
 	font-weight: normal;
@@ -226,7 +281,7 @@ form th {
 }
 
 .nav-list .nav-header {
-	padding: 0 10px;
+	padding: 0 1rem;
 	font-weight: bold;
 	background: #22303d;
 	color: #fcfcfc;
@@ -254,7 +309,7 @@ form th {
 	background: #c46178;
 }
 .nav-list .item > a {
-	padding: 0 10px;
+	padding: 0 1.5rem;
 }
 .nav-list .item.empty a {
 	color: #fa8052;
@@ -302,7 +357,7 @@ form th {
 }
 
 .dropdown-menu {
-	padding: 5px 0;
+	padding: 0.5rem 0 1rem 0;
 	font-size: 0.8rem;
 	text-align: right;
 	border: none;
@@ -310,6 +365,17 @@ form th {
 }
 .dropdown-menu .dropdown-header {
 	cursor: default;
+	padding: 0 0.5rem 0.5rem;
+	font-weight: bold;
+	color: #fcfcfc;
+}
+.dropdown-menu .dropdown-header a {
+	padding: 0 5px;
+	position: absolute;
+	left: 5px;
+}
+.dropdown-menu .dropdown-header a:hover {
+	background-color: #0062be;
 }
 .dropdown-menu::after {
 	content: none;
@@ -337,11 +403,10 @@ form th {
 	padding: 2px 5px;
 }
 
-.dropdown-header {
-	padding: 0 5px 5px;
-	font-weight: bold;
-	text-align: right;
-	color: #fcfcfc;
+.labels .dropdown-menu,
+.tags .dropdown-menu,
+.share .dropdown-menu {
+	left: auto;
 }
 
 .separator {
@@ -452,14 +517,20 @@ form th {
 }
 .box .box-title {
 	margin: 0;
-	padding: 5px 10px;
-	background: #e3e3e3;
-	color: #969696;
+	padding: 7px 10px;
+	background: #22303d;
+	color: #fcfcfc;
 	border-bottom: 1px solid #e3e3e3;
 }
+.box .box-title a {
+	color: #fcfcfc;
+}
 .box .box-title .configure {
 	margin-left: 4px;
 }
+.box .box-title .configure .icon:hover {
+	filter: invert(56%) sepia(87%) saturate(1185%) hue-rotate(327deg) brightness(104%) contrast(96%);
+}
 .box .box-content {
 	padding-right: 30px;
 	max-height: 260px;
@@ -471,7 +542,10 @@ form th {
 }
 .box .box-content .item .configure .icon {
 	vertical-align: middle;
-	background-color: #e3e3e3;
+	filter: invert(1);
+}
+.box .box-content .item .configure .icon:hover {
+	filter: invert(56%) sepia(87%) saturate(1185%) hue-rotate(327deg) brightness(104%) contrast(96%);
 }
 .box.category .box-title .title {
 	font-weight: normal;
@@ -502,6 +576,9 @@ form th {
 	padding: 2px 10px;
 	font-size: 0.8rem;
 }
+.box.visible-semi {
+	border-style: solid;
+}
 
 .tree {
 	margin: 10px 0;
@@ -513,7 +590,7 @@ form th {
 	height: 35px;
 	font-size: 1rem;
 	position: relative;
-	line-height: 2.3rem;
+	line-height: 2rem;
 }
 .tree-folder-title .title {
 	background: inherit;
@@ -575,9 +652,6 @@ form th {
 	top: 5px;
 	filter: grayscale(100%) brightness(100);
 }
-.header > .item.search input {
-	width: 230px;
-}
 .header .item.search input:focus {
 	width: 350px;
 }
@@ -587,8 +661,15 @@ form th {
 .header .item.configure {
 	position: fixed;
 	left: 0;
-	z-index: 1000;
+	z-index: 95;
 	width: 35px;
+	text-align: center;
+	line-height: 0.8rem;
+}
+.header .item.configure > .icon {
+	filter: brightness(3);
+	margin-left: 5px;
+	margin-top: 3px;
 }
 .header .item.configure .dropdown .icon {
 	filter: brightness(3);
@@ -601,6 +682,10 @@ form th {
 .aside.aside_feed .tree {
 	margin: 0 0 50px;
 }
+.aside.aside_feed .tree-folder .tree-folder-title:hover,
+.aside.aside_feed .tree-folder .item.feed:hover {
+	background-color: #00488b;
+}
 .aside.aside_feed .nav-form input,
 .aside.aside_feed .nav-form select {
 	width: 140px;
@@ -623,14 +708,33 @@ form th {
 .aside_feed .tree-folder-items .dropdown-menu::after {
 	right: 2px;
 }
+.aside_feed .about {
+	padding: 1rem;
+	display: block;
+	text-align: center;
+	font-size: 0.8em;
+	font-style: italic;
+}
+
+.reader .aside .toggle_aside {
+	background: #22303d;
+	display: block;
+	width: 100%;
+	height: 50px;
+	line-height: 50px;
+	text-align: center;
+}
+.reader .aside .toggle_aside .icon {
+	filter: brightness(3);
+}
+.reader .aside .toggle_aside:hover {
+	background-color: #0062be;
+}
 
 .post {
 	padding: 10px 50px;
 	font-size: 0.9em;
 }
-.post input {
-	background: #e3e3e3;
-}
 .post input.long {
 	height: 33px;
 	margin-top: 0px;
@@ -644,7 +748,6 @@ form th {
 
 .prompt input {
 	margin: 5px auto;
-	width: 100%;
 }
 
 #global {
@@ -662,6 +765,7 @@ form th {
 	line-height: 1.5em;
 }
 #new-article > a {
+	padding: 1rem;
 	line-height: 1.5em;
 	font-weight: bold;
 	color: #fcfcfc;
@@ -689,14 +793,23 @@ form th {
 	width: 100%;
 	font-size: 0;
 	background-color: #0062be;
-	position: fixed;
-	z-index: 900;
+	position: sticky;
+	top: 0;
+	z-index: 90;
 }
 .nav_menu .item.search {
 	display: inline-block;
-	position: fixed;
+	position: absolute;
 	left: 40px;
 }
+.nav_menu .item.search input {
+	border-width: 0;
+	line-height: 25px;
+}
+.nav_menu #toggle-unread .icon,
+.nav_menu #toggle-starred .icon {
+	filter: brightness(1);
+}
 
 .flux {
 	padding-left: 10px;
@@ -830,26 +943,44 @@ form th {
 	width: 270px;
 }
 
-.formLogin #global {
+#overlay {
+	z-index: 100;
+}
+
+#panel {
+	z-index: 100;
+}
+#panel .nav_menu {
+	position: relative;
+}
+
+.formLogin #global,
+.register #global {
 	height: 0;
 }
-.formLogin .header {
-	background: #22303d;
-	height: 55px;
+.formLogin .header,
+.register .header {
+	background: #0062be;
+	height: 35px;
+	position: relative;
 }
-.formLogin .header > .item.configure {
-	width: 200px;
-	position: unset;
+.formLogin .header > .item.configure,
+.register .header > .item.configure {
+	padding: 8px;
+	width: auto;
+	position: absolute;
+	left: 0;
+	white-space: nowrap;
+	bottom: 0;
 }
-.formLogin a.signin {
-	color: #fcfcfc;
-	padding-right: 5px;
+.formLogin .header > .item.configure .icon,
+.register .header > .item.configure .icon {
+	filter: brightness(3);
 }
-.formLogin input {
-	border-top: 1px #e3e3e3;
-	border-left: 1px #e3e3e3;
-	border-bottom: 1px #e3e3e3;
-	border-right: 5px solid;
+
+a.signin {
+	color: #fcfcfc;
+	font-size: 70%;
 }
 
 .loglist {
@@ -885,7 +1016,7 @@ form th {
 }
 
 @media (max-width: 840px) {
-	.formLogin .header {
+	body:not(.formLogin, .register) .header .item.title {
 		display: none;
 	}
 
@@ -894,33 +1025,28 @@ form th {
 		text-align: right;
 	}
 
-	.dropdown-header, .dropdown-menu > .item {
-		padding: 12px;
+	.dropdown {
+		position: relative;
 	}
 
 	#new-article {
+		margin-top: 2rem;
 		width: 100%;
-		position: sticky;
-		top: 0;
 	}
 
 	.header {
 		display: table;
 	}
-	.header .item.title .logo {
-		display: none;
+	.header .item {
+		padding: 0;
 	}
 	.header .item.configure {
 		padding: 0;
-		position: absolute;
-		left: 77px;
+		position: fixed;
+		left: 76px;
 	}
-
-	.header > .item.title a {
-		display: block;
-		position: absolute;
-		top: -35px;
-		right: 10px;
+	.header .item.configure > .icon {
+		margin-top: 5px;
 	}
 
 	button.read_all.btn {
@@ -934,6 +1060,7 @@ form th {
 	}
 
 	.aside {
+		padding: 0;
 		width: 0;
 		transition: width 200ms linear;
 	}
@@ -942,11 +1069,14 @@ form th {
 		display: block;
 		height: 50px;
 		line-height: 50px;
-		text-align: left;
+		text-align: center;
 		padding-left: 10px;
 	}
-	.aside.aside_feed {
-		padding: 0;
+	.aside .toggle_aside:hover {
+		background-color: #0062be;
+	}
+	.aside .toggle_aside .icon {
+		filter: brightness(3);
 	}
 	.aside.aside_feed .configure-feeds {
 		display: flex;
@@ -959,8 +1089,22 @@ form th {
 		z-index: 1000;
 	}
 
+	#slider .toggle_aside {
+		background: #22303d;
+		display: block;
+		height: 50px;
+		line-height: 50px;
+		text-align: center;
+		padding-left: 10px;
+	}
+	#slider .toggle_aside:hover {
+		background-color: #0062be;
+	}
+	#slider .toggle_aside .icon {
+		filter: brightness(3);
+	}
+
 	.nav_menu {
-		position: initial;
 		height: 71px;
 	}
 	.nav_menu .btn {
@@ -972,16 +1116,17 @@ form th {
 	.nav_menu .stick .btn {
 		margin: 0;
 	}
-	.nav_menu .search {
-		position: absolute !important;
+	.nav_menu .item.search {
 		top: 3px;
-		right: 37px;
+		margin-right: 77px;
+		width: calc(100% - 152px);
+		position: relative;
 	}
-	.nav_menu .search form {
+	.nav_menu .item.search form {
 		display: block;
 	}
-	.nav_menu .search input {
-		width: 85%;
+	.nav_menu .item.search input {
+		width: 100%;
 	}
 
 	#panel .close,
@@ -990,14 +1135,24 @@ form th {
 		display: block;
 		height: 50px;
 		line-height: 50px;
-		text-align: left;
+		text-align: center;
 		padding-left: 10px;
 	}
+	#panel .close:hover,
+.dropdown-menu .toggle_aside:hover {
+		background-color: #0062be;
+	}
 
-	.dropdown-target:target ~ .dropdown-toggle.btn::after {
+	.dropdown-target:target ~ .dropdown-toggle::after,
+.dropdown-target:target ~ .dropdown-toggle.btn::after {
 		display: none;
 	}
 
+	.share .dropdown-menu {
+		left: 3%;
+		right: auto;
+	}
+
 	.day .name {
 		font-size: 1.1rem;
 	}
@@ -1082,7 +1237,6 @@ div#nav_menu_views {
 	}
 }
 button.as-link {
-	color: #fcfcfc;
 	outline: none;
 }
 
@@ -1122,11 +1276,6 @@ button.as-link {
 	color: #c46178;
 }
 
-#dropdown-query ~ .dropdown-menu .dropdown-header .icon {
-	vertical-align: middle;
-	float: left;
-}
-
 #stream.reader .flux {
 	padding: 0 0 50px;
 	background: #fcfcfc;
@@ -1139,13 +1288,15 @@ button.as-link {
 	font-size: 90%;
 }
 
-#nav_menu_actions ul.dropdown-menu, #nav_menu_read_all ul.dropdown-menu {
-	right: 0px;
+#nav_menu_actions ul.dropdown-menu {
+	right: 0;
+}
+
+#nav_menu_read_all ul.dropdown-menu {
+	left: 0;
+	right: auto;
 }
 
 #slider label {
 	min-height: initial;
 }
-#slider .form-group:hover {
-	background: initial;
-}

p/themes/Swage/swage.scss

@@ -19,16 +19,18 @@ $color_hover:	#fff;
 %input {
 	min-height: 25px;
 	margin-top: 4px;
-	line-height: 25px;
+	line-height: 29px;
 	vertical-align: middle;
 	background: $color_light;
-	border: none;
-	padding-left: 5px;
+	border: 2px solid #e3e3e3;
+	padding-left: 8px;
 }
 
 %invalid {
+	padding-left: 5px;
 	color: $color_bad;
-	border-color: $color_bad;
+	border-left-color: $color_bad;
+	border-left-width: 5px;
 	box-shadow: none;
 }
 
@@ -70,10 +72,6 @@ a {
 		line-height: 25px;
 		text-decoration: none;
 
-		&:hover {
-			background: color.adjust( $color_nav, $lightness: -10%);
-		}
-
 		.icon {
 			filter: brightness(3);
 		}
@@ -95,7 +93,7 @@ img {
 }
 
 main#stream {
-	margin-top: 35px;
+	margin-top: 2rem;
 }
 
 sup {
@@ -105,9 +103,10 @@ sup {
 legend {
 	margin: 20px 0 5px;
 	padding: 5px 20px;
-	background: color.adjust( $color_light, $lightness: -10%);
+	background: $color_aside;
 	display: inline-block;
 	width: auto;
+	color: $color_light;
 	font-size: 1.4em;
 	clear: both;
 }
@@ -117,7 +116,6 @@ label {
 }
 
 textarea {
-	background: color.adjust( $color_light, $lightness: -10% );
 	width: 360px;
 	height: 100px;
 
@@ -148,7 +146,8 @@ select {
 }
 
 select {
-	background: color.adjust( $color_light, $lightness: -10% );
+	padding-top: 7px;
+	padding-bottom: 8px;
 }
 
 input {
@@ -184,6 +183,65 @@ form {
 	}
 }
 
+
+@supports (scrollbar-width: thin) {
+	// scrollbar for the sliders (with blue/dark background color)
+	#sidebar,
+	.scrollbar-thin {
+		scrollbar-color: rgba(255, 255, 255, 0) rgba(255, 255, 255, 0);
+		scrollbar-width: thin;
+	}
+
+	#sidebar:hover,
+	.scrollbar-thin:hover {
+		scrollbar-color: rgba(255, 255, 255, 0.5) rgba(255, 255, 255, 0.2);
+	}
+
+	// scrollbar for the sliders (with white background color)
+	#slider.scrollbar-thin {
+		scrollbar-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.05);
+	}
+
+	#slider.scrollbar-thin:hover {
+		scrollbar-color: rgba(0, 0, 0, 0.4) rgba(0, 0, 0, 0.1);
+	}
+}
+
+@supports not (scrollbar-width: thin) {
+	// scrollbar for the sliders (with blue/dark background color)
+	#sidebar::-webkit-scrollbar,
+	.scrollbar-thin::-webkit-scrollbar {
+		background: rgba(255, 255, 255, 0);
+		width: 8px;
+	}
+
+	#sidebar::-webkit-scrollbar-thumb,
+	.scrollbar-thin::-webkit-scrollbar-thumb {
+		background: rgba(255, 255, 255, 0);
+		display: unset;
+		border-radius: 5px;
+	}
+
+	#sidebar:hover::-webkit-scrollbar-thumb,
+	.scrollbar-thin:hover::-webkit-scrollbar-thumb {
+		background: rgba(255, 255, 255, 0.5);
+	}
+
+	// scrollbar for the sliders (with white background color)
+	#slider.scrollbar-thin::-webkit-scrollbar {
+		background: rgba(0, 0, 0, 0.05);
+	}
+
+	#slider.scrollbar-thin::-webkit-scrollbar-thumb {
+		background: rgba(0, 0, 0, 0.1);
+	}
+
+	#slider.scrollbar-thin:hover::-webkit-scrollbar-thumb {
+		background: rgba(0, 0, 0, 0.3);
+	}
+}
+
+
 .category {
 	.title.error::before {
 		display: inline-block;
@@ -238,6 +296,10 @@ form {
 	vertical-align: middle;
 	font-size: 0;
 
+	select {
+		margin-top: 0;
+	}
+
 	&.configure-feeds {
 
 		@extend %aside-width;
@@ -259,11 +321,15 @@ form {
 	overflow: hidden;
 
 	&.active,
-	:active,
-	:hover {
+	&:active,
+	&:hover {
 		background: color.adjust( $color_nav, $lightness: -10%);
 		text-decoration: none;
 	}
+
+	.icon {
+		filter: brightness(3);
+	}
 }
 
 .btn-important, .btn-attention {
@@ -289,7 +355,7 @@ form {
 	.nav-header {
 
 		@extend %nav-list;
-		padding: 0 10px;
+		padding: 0 1rem;
 		font-weight: bold;
 		background: $color_aside;
 		color: $color_light;
@@ -328,7 +394,7 @@ form {
 		}
 
 		> a {
-			padding: 0 10px;
+			padding: 0 1.5rem;
 		}
 
 		&.empty a {
@@ -387,7 +453,7 @@ form {
 }
 
 .dropdown-menu {
-	padding: 5px 0;
+	padding: 0.5rem 0 1rem 0;
 	font-size: 0.8rem;
 	text-align: left;
 	border: none;
@@ -395,6 +461,19 @@ form {
 
 	.dropdown-header {
 		cursor: default;
+		padding: 0 0.5rem 0.5rem;
+		font-weight: bold;
+		color: $color_light;
+
+		a {
+			padding: 0 5px;
+			position: absolute;
+			right: 5px;
+
+			&:hover {
+				background-color: $color_nav;
+			}
+		}
 	}
 
 	&::after {
@@ -443,11 +522,12 @@ form {
 	}
 }
 
-.dropdown-header {
-	padding: 0 5px 5px;
-	font-weight: bold;
-	text-align: left;
-	color: $color_light;
+.labels,
+.tags,
+.share {
+	.dropdown-menu {
+		right: auto;
+	}
 }
 
 .separator {
@@ -568,19 +648,26 @@ form {
 
 	.box-title {
 		margin: 0;
-		padding: 5px 10px;
-		background: color.adjust( $color_light, $lightness: -10%);
-		color: color.adjust( $color_light, $lightness: -40% );
+		padding: 7px 10px;
+		background: $color_aside;
+		color: $color_light;
 		border-bottom: 1px solid color.adjust( $color_light, $lightness: -10%);
 
+		a {
+			color: $color_light;
+		}
+
 		.configure {
 			margin-right: 4px;
+
+			.icon {
+				&:hover {
+					filter: invert(56%) sepia(87%) saturate(1185%) hue-rotate(327deg) brightness(104%) contrast(96%);
+				}
+			}
 		}
 	}
 
-
-
-
 	.box-content {
 		padding-left: 30px;
 		max-height: 260px;
@@ -593,7 +680,11 @@ form {
 			.configure {
 				.icon {
 					vertical-align: middle;
-					background-color: color.adjust( $color_light, $lightness: -10%);
+					filter: invert(1);
+
+					&:hover {
+						filter: invert(56%) sepia(87%) saturate(1185%) hue-rotate(327deg) brightness(104%) contrast(96%);
+					}
 				}
 			}
 		}
@@ -635,6 +726,10 @@ form {
 			font-size: 0.8rem;
 		}
 	}
+
+	&.visible-semi {
+		border-style: solid;
+	}
 }
 
 .tree {
@@ -647,7 +742,7 @@ form {
 	height: 35px;
 	font-size: 1rem;
 	position: relative;
-	line-height: 2.3rem;
+	line-height: 2rem;
 
 	.title {
 		background: inherit;
@@ -719,10 +814,6 @@ form {
 				filter: grayscale(100%) brightness(100);
 			}
 		}
-
-		&.search input {
-			width: 230px;
-		}
 	}
 
 	.item.search input:focus {
@@ -736,8 +827,16 @@ form {
 	.item.configure {
 		position: fixed;
 		right: 0;
-		z-index: 1000;
+		z-index: 95;
 		width: 35px;
+		text-align: center;
+		line-height: 0.8rem;
+
+		> .icon {
+			filter: brightness(3);
+			margin-right: 5px;
+			margin-top: 3px;
+		}
 
 		.dropdown .icon {
 			filter: brightness(3);
@@ -756,6 +855,15 @@ form {
 			margin: 0 0 50px;
 		}
 
+		.tree-folder {
+			.tree-folder-title,
+			.item.feed {
+				&:hover {
+					background-color: color.adjust( $color_nav, $lightness: -10%);
+				}
+			}
+		}
+
 		.nav-form {
 			input,
 			select {
@@ -789,6 +897,35 @@ form {
 	.tree-folder-items .dropdown-menu::after {
 		left: 2px;
 	}
+
+	.about {
+		padding: 1rem;
+		display: block;
+		text-align: center;
+		font-size: 0.8em;
+		font-style: italic;
+	}
+}
+
+.reader {
+	.aside {
+		.toggle_aside {
+			background: $color_aside;
+			display: block;
+			width: 100%;
+			height: 50px;
+			line-height: 50px;
+			text-align: center;
+
+			.icon {
+				filter: brightness(3);
+			}
+
+			&:hover {
+				background-color: color.adjust( $color_nav, $lightness: 0%);
+			}
+		}
+	}
 }
 
 .post {
@@ -796,8 +933,6 @@ form {
 	font-size: 0.9em;
 
 	input {
-		background: color.adjust( $color_light, $lightness: -10% );
-
 		&.long {
 			height: 33px;
 			margin-top: 0px;
@@ -816,7 +951,6 @@ form {
 .prompt {
 	input {
 		margin: 5px auto;
-		width: 100%;
 	}
 }
 
@@ -837,6 +971,7 @@ form {
 	@extend %aside-width;
 
 	> a {
+		padding: 1rem;
 		line-height: 1.5em;
 		font-weight: bold;
 		color: $color_light;
@@ -870,13 +1005,26 @@ form {
 	width: 100%;
 	font-size: 0;
 	background-color: $color_nav;
-	position: fixed;
-	z-index: 900;
+	position: sticky;
+	top: 0;
+	z-index: 90;
 
 	.item.search {
 		display: inline-block;
-		position: fixed;
+		position: absolute;
 		right: 40px;
+
+		input {
+			border-width: 0;
+			line-height: 25px;
+		}
+	}
+
+	#toggle-unread,
+	#toggle-starred {
+		.icon {
+			filter: brightness(1);
+		}
 	}
 }
 
@@ -1047,34 +1195,49 @@ form {
 	}
 }
 
-.formLogin {
+#overlay {
+	z-index: 100;
+}
+
+#panel {
+	z-index: 100;
+
+	.nav_menu {
+		position: relative;
+	}
+}
+
+.formLogin,
+.register {
 	#global {
 		height: 0;
 	}
 
 	.header {
-		background: $color_aside;
-		height: 55px;
+		background: $color_nav;
+		height: 35px;
+		position: relative;
 
 		> .item {
 			&.configure {
-				width: 200px;
-				position: unset;
+				padding: 8px;
+				width: auto;
+				position: absolute;
+				right: 0;
+				white-space: nowrap;
+				bottom: 0;
+
+				.icon {
+					filter: brightness(3);
+				}
 			}
 		}
 	}
+}
 
-	a.signin {
-		color: $color_light;
-		padding-left: 5px;
-	}
-
-	input {
-		border-top: 1px color.adjust( $color_light, $lightness: -10%);
-		border-right: 1px color.adjust( $color_light, $lightness: -10%);
-		border-bottom: 1px color.adjust( $color_light, $lightness: -10%);
-		border-left: 5px solid;
-	}
+a.signin {
+	color: $color_light;
+	font-size: 70%;
 }
 
 .loglist {
@@ -1115,8 +1278,12 @@ form {
 }
 
 @media (max-width: 840px) {
-	.formLogin .header {
-		display: none;
+	body:not(.formLogin, .register) {
+		.header {
+			.item.title {
+				display: none;
+			}
+		}
 	}
 
 	.form-group .group-name {
@@ -1124,35 +1291,31 @@ form {
 		text-align: left;
 	}
 
-	.dropdown-header, .dropdown-menu > .item {
-		padding: 12px;
+	.dropdown {
+		position: relative;
 	}
 
 	#new-article {
+		margin-top: 2rem;
 		width: 100%;
-		position: sticky;
-		top: 0;
 	}
 
 	.header {
 		display: table;
 
-		.item.title .logo {
-			display: none;
+		.item {
+			padding: 0;
 		}
 
 		.item.configure {
 			padding: 0;
-			position: absolute;
-			right: 77px;
-		}
-	}
+			position: fixed;
+			right: 76px;
 
-	.header > .item.title a {
-		display: block;
-		position: absolute;
-		top: -35px;
-		left: 10px;
+			> .icon {
+				margin-top: 5px;
+			}
+		}
 	}
 
 	button.read_all.btn {
@@ -1166,6 +1329,7 @@ form {
 	}
 
 	.aside {
+		padding: 0;
 		width: 0;
 		transition: width 200ms linear;
 
@@ -1174,12 +1338,16 @@ form {
 			display: block;
 			height: 50px;
 			line-height: 50px;
-			text-align: right;
+			text-align: center;
 			padding-right: 10px;
-		}
 
-		&.aside_feed {
-			padding: 0;
+			&:hover {
+				background-color: color.adjust( $color_nav, $lightness: 0%);
+			}
+
+			.icon {
+				filter: brightness(3);
+			}
 		}
 
 		&.aside_feed .configure-feeds {
@@ -1195,8 +1363,26 @@ form {
 		}
 	}
 
+	#slider {
+		.toggle_aside {
+			background: $color_aside;
+			display: block;
+			height: 50px;
+			line-height: 50px;
+			text-align: center;
+			padding-right: 10px;
+
+			&:hover {
+				background-color: color.adjust( $color_nav, $lightness: 0%);
+			}
+
+			.icon {
+				filter: brightness(3);
+			}
+		}
+	}
+
 	.nav_menu {
-		position: initial;
 		height: 71px;
 
 		.btn {
@@ -1211,17 +1397,18 @@ form {
 			}
 		}
 
-		.search {
-			position: absolute !important;
+		.item.search {
 			top: 3px;
-			left: 37px;
+			margin-left: 77px;
+			width: calc(100% - 4 * 38px);
+			position: relative;
 
 			form {
 				display: block;
 			}
 
 			input {
-				width: 85%;
+				width: 100%;
 			}
 		}
 	}
@@ -1232,14 +1419,24 @@ form {
 		display: block;
 		height: 50px;
 		line-height: 50px;
-		text-align: right;
+		text-align: center;
 		padding-right: 10px;
+
+		&:hover {
+			background-color: color.adjust( $color_nav, $lightness: 0%);
+		}
 	}
 
+	.dropdown-target:target ~ .dropdown-toggle::after,
 	.dropdown-target:target ~ .dropdown-toggle.btn::after {
 		display: none;
 	}
 
+	.share .dropdown-menu {
+		right: 3%;
+		left: auto;
+	}
+
 	.day .name {
 		font-size: 1.1rem;
 	}
@@ -1330,7 +1527,6 @@ form {
 }
 
 button.as-link {
-	color: $color_light;
 	outline: none;
 }
 
@@ -1379,11 +1575,6 @@ button.as-link {
 	}
 }
 
-#dropdown-query ~ .dropdown-menu .dropdown-header .icon {
-	vertical-align: middle;
-	float: right;
-}
-
 #stream.reader .flux {
 	padding: 0 0 50px;
 	background: $color_light;
@@ -1397,9 +1588,16 @@ button.as-link {
 	}
 }
 
-#nav_menu_actions, #nav_menu_read_all {
+#nav_menu_actions {
 	ul.dropdown-menu {
-		left: 0px;
+		left: 0;
+	}
+}
+
+#nav_menu_read_all {
+	ul.dropdown-menu {
+		right: 0;
+		left: auto;
 	}
 }
 
@@ -1407,11 +1605,4 @@ button.as-link {
 	label {
 		min-height: initial;
 	}
-
-	.form-group {
-		&:hover {
-			background: initial;
-		}
-	}
-
 }

p/themes/base-theme/template.css

@@ -22,6 +22,15 @@ html, body {
 	font-size: 100%;
 }
 
+main.prompt {
+	margin: 3rem auto;
+	padding: 2rem;
+	max-width: 400px;
+	min-width: 300px;
+	width: 33%;
+	text-align: center;
+}
+
 /*=== Links */
 a {
 	text-decoration: none;
@@ -64,6 +73,7 @@ p {
 
 p.help, .prompt p.help {
 	margin: 5px 0 0.5em;
+	text-align: left;
 }
 
 p.help .icon {
@@ -210,6 +220,15 @@ input[type="checkbox"] {
 	min-height: 15px !important;
 }
 
+.prompt textarea,
+.prompt input,
+.prompt select,
+.prompt .stick {
+	margin: 5px auto;
+	width: 100%;
+	box-sizing: border-box;
+}
+
 .dropdown-menu label > input[type="text"] {
 	width: 150px;
 	width: calc(99% - 5em);
@@ -746,6 +765,8 @@ input[type="checkbox"]:focus-visible {
 .box .box-content {
 	padding: 8px 8px 8px 16px;
 	display: block;
+	min-height: 2.5em;
+	max-height: 260px;
 	overflow: auto;
 }
 
@@ -835,7 +856,7 @@ li.drag-hover {
 	}
 
 	#sidebar:hover,
-	.scrollbar-thin {
+	.scrollbar-thin:hover {
 		scrollbar-color: rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.05);
 	}
 }

p/themes/base-theme/template.rtl.css

@@ -22,6 +22,15 @@ html, body {
 	font-size: 100%;
 }
 
+main.prompt {
+	margin: 3rem auto;
+	padding: 2rem;
+	max-width: 400px;
+	min-width: 300px;
+	width: 33%;
+	text-align: center;
+}
+
 /*=== Links */
 a {
 	text-decoration: none;
@@ -64,6 +73,7 @@ p {
 
 p.help, .prompt p.help {
 	margin: 5px 0 0.5em;
+	text-align: right;
 }
 
 p.help .icon {
@@ -210,6 +220,15 @@ input[type="checkbox"] {
 	min-height: 15px !important;
 }
 
+.prompt textarea,
+.prompt input,
+.prompt select,
+.prompt .stick {
+	margin: 5px auto;
+	width: 100%;
+	box-sizing: border-box;
+}
+
 .dropdown-menu label > input[type="text"] {
 	width: 150px;
 	width: calc(99% - 5em);
@@ -746,6 +765,8 @@ input[type="checkbox"]:focus-visible {
 .box .box-content {
 	padding: 8px 16px 8px 8px;
 	display: block;
+	min-height: 2.5em;
+	max-height: 260px;
 	overflow: auto;
 }
 
@@ -835,7 +856,7 @@ li.drag-hover {
 	}
 
 	#sidebar:hover,
-	.scrollbar-thin {
+	.scrollbar-thin:hover {
 		scrollbar-color: rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.05);
 	}
 }