1 files changed, 87 insertions, 10 deletions

diff --git a/p/themes/base-theme/template.css b/p/themes/base-theme/template.css
index b211d0516..099aee916 100644
--- a/p/themes/base-theme/template.css
+++ b/p/themes/base-theme/template.css
@@ -109,7 +109,7 @@ input[type="checkbox"] {
 	min-height: 15px !important;
 }
 .dropdown-menu label > input[type="text"] {
-	with: 150px;
+	width: 150px;
 	width: calc(99% - 5em);
 }
 .dropdown-menu input[type="checkbox"] {
@@ -143,7 +143,7 @@ td.numeric {
 /*===============*/
 
 [aria-hidden="true"] {
-	display: none;
+	display: none !important;
 }
 
 /*=== Forms */
@@ -168,6 +168,13 @@ td.numeric {
 	display: block;
 }
 
+@supports (position: sticky) {
+	#mark-read-aside {
+		position: sticky;
+		top: 0;
+	}
+}
+
 /*=== Buttons */
 .stick {
 	display: inline-block;
@@ -230,6 +237,11 @@ a.btn {
 	background: #fff;
 	border: 1px solid #aaa;
 }
+.dropdown-menu-scrollable {
+	max-height: 75vh;
+	overflow-x: hidden;
+	overflow-y: auto;
+}
 .dropdown-header {
 	display: block;
 }
@@ -256,7 +268,7 @@ a.btn {
 }
 .dropdown-target:target ~ .dropdown-menu {
 	display: block;
-	z-index: 10;
+	z-index: 1000;
 }
 .dropdown-close {
 	display: inline;
@@ -268,6 +280,7 @@ a.btn {
 	left: 0; right: 0;
 	display: block;
 	z-index: -10;
+    cursor: default;
 }
 .separator {
 	display: block;
@@ -368,16 +381,40 @@ a.btn {
 	cursor: grab;
 }
 
+/*=== Scrollbar */
+@supports (scrollbar-width: thin) {
+	#sidebar {
+		overflow-y: auto;
+		scrollbar-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.05);
+		scrollbar-width: thin;
+	}
+	#sidebar:hover {
+		scrollbar-color: rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.05);
+	}
+}
+
+@supports not (scrollbar-width: thin) {
+	#sidebar::-webkit-scrollbar {
+		background: rgba(0, 0, 0, 0.05);
+		width: 8px;
+	}
+	#sidebar::-webkit-scrollbar-thumb {
+		background: rgba(0, 0, 0, 0.1);
+		border-radius: 5px;
+		display: unset;
+	}
+	#sidebar:hover::-webkit-scrollbar-thumb {
+		background: rgba(0, 0, 0, 0.3);
+	}
+}
+
 /*=== Tree */
 .tree {
 	margin: 0;
-	padding: 0 0 2em 0;
+	max-height: 99vh;
 	list-style: none;
 	text-align: left;
-}
-
-.treepadding {
-	padding: 0 0 15em 0;
+	overflow-x: hidden;
 }
 
 .tree-folder-items {
@@ -407,6 +444,10 @@ a.btn {
 	white-space: nowrap;
 	text-overflow: ellipsis;
 }
+.tree-bottom {
+	visibility: hidden;
+	margin-bottom: 18em;
+}
 
 /*=== STRUCTURE */
 /*===============*/
@@ -445,7 +486,6 @@ a.btn {
 }
 .aside {
 	display: table-cell;
-	height: 100%;
 	width: 300px;
 	vertical-align: top;
 }
@@ -667,6 +707,21 @@ br + br + br {
 	height: 300px;
 }
 
+/*=== LOGIN VIEW */
+/*================*/
+.formLogin .header > .item {
+        padding: 10px 30px;
+}
+
+.formLogin .header > .item.title {
+        text-align: left;
+}
+
+.formLogin .header > .item.configure {
+        text-align: right;
+}
+
+
 /*=== GLOBAL VIEW */
 /*================*/
 #stream.global {
@@ -854,6 +909,29 @@ pre.enclosure-description {
 	white-space: pre-line;
 }
 
+/*=== READER */
+/*===========*/
+.reader .nav_menu .toggle_aside {
+	display: inline-block;
+}
+
+.reader .aside .toggle_aside {
+	display: block;
+	width: 100%;
+}
+
+.reader .aside {
+	width: 0;
+}
+
+.reader .aside:target {
+	width: 300px;
+}
+
+.reader .aside .stick {
+	display: none;
+}
+
 /*=== MOBILE */
 /*===========*/
 @media(max-width: 840px) {
@@ -894,7 +972,6 @@ pre.enclosure-description {
 	}
 	.aside:target {
 		width: 90%;
-		overflow: auto;
 	}
 
 	.flux_header .item.website {