1 files changed, 66 insertions, 84 deletions

diff --git a/p/themes/base-theme/template.css b/p/themes/base-theme/template.css
index 1a96f1e2f..a79d539d8 100644
--- a/p/themes/base-theme/template.css
+++ b/p/themes/base-theme/template.css
@@ -179,6 +179,7 @@ a.btn {
 .dropdown {
 	position: relative;
 	display: inline-block;
+	vertical-align: middle;
 }
 .dropdown-target {
 	display: none;
@@ -289,10 +290,14 @@ a.btn {
 	vertical-align: top;
 }
 .box .box-title {
+	position: relative;
 	font-size: 1.2rem;
 	font-weight: bold;
 	text-align: center;
 }
+.box .box-title a {
+	display: block;
+}
 .box .box-title form {
 	margin: 0;
 }
@@ -325,6 +330,39 @@ a.btn {
 	cursor: grab;
 }
 
+/*=== Tree */
+.tree {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+	text-align: left;
+}
+.tree-folder-items {
+	padding: 0;
+	list-style: none;
+}
+.tree-folder-title {
+	display: block;
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+}
+.tree-folder-title .title {
+	vertical-align: middle;
+}
+.tree-folder-items > .item {
+	display: block;
+	white-space: nowrap;
+}
+.tree-folder-items > .item > a {
+	display: inline-block;
+	vertical-align: middle;
+	width: calc(100% - 32px);
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+}
+
 /*=== STRUCTURE */
 /*===============*/
 /*=== Header */
@@ -366,57 +404,21 @@ a.btn {
 	width: 250px;
 	vertical-align: top;
 }
-.aside.aside_flux {
-	background: #fff;
-}
-
-/*=== Aside main page (categories) */
-.categories {
-	list-style: none;
-	margin: 0;
-}
-.state_unread li:not(.active)[data-unread="0"] {
-	display: none;
-}
-.category {
-	display: block;
-	overflow: hidden;
-	white-space: nowrap;
-	text-overflow: ellipsis;
-}
-.category .btn:not([data-unread="0"]):after {
-	content: attr(data-unread);
-}
 
 /*=== Aside main page (feeds) */
-.categories .feeds {
-	width: 100%;
-	list-style: none;
-}
-.categories .feeds:not(.active) {
+.aside_feed .tree-folder-items:not(.active) {
 	display: none;
 }
-.categories .feeds .feed {
-	display: inline-block;
-	overflow: hidden;
-	white-space: nowrap;
-	text-overflow: ellipsis;
-	vertical-align: middle;
-}
-.categories .feeds .feed:not([data-unread="0"]):before {
-	content: "(" attr(data-unread) ") ";
-}
-.categories .feeds .dropdown-menu {
+.aside_feed .tree-folder-items .dropdown-menu {
 	left: 0;
 }
-.categories .feeds .item .dropdown-toggle > .icon {
+.aside_feed .tree-folder-items .item .dropdown-toggle > .icon {
 	visibility: hidden;
 	cursor: pointer;
-	vertical-align: top;
 }
-.categories .feeds .item .dropdown-target:target ~ .dropdown-toggle > .icon,
-.categories .feeds .item:hover .dropdown-toggle > .icon,
-.categories .feeds .item.active .dropdown-toggle > .icon {
+.aside_feed .tree-folder-items .item .dropdown-target:target ~ .dropdown-toggle > .icon,
+.aside_feed .tree-folder-items .item:hover .dropdown-toggle > .icon,
+.aside_feed .tree-folder-items .item.active .dropdown-toggle > .icon {
 	visibility: visible;
 }
 
@@ -603,32 +605,13 @@ br + br + br {
 
 /*=== GLOBAL VIEW */
 /*================*/
-/*=== Category boxes */
-
-/* TODO <delete> */
-#stream.global .box-category {
-	display: inline-block;
-	width: 19em;
-	max-width: 95%;
-	margin: 20px 10px;
-	border: 1px solid #ccc;
-	vertical-align: top;
-}
-#stream.global .category {
-	width: 100%;
-}
-#stream.global .btn {
-	display: block;
-}
-#stream.global .box-category .feeds {
-	display: block;
-	overflow: auto;
+#stream.global {
+	text-align: center;
 }
-#stream.global .box-category .feed {
-	width: 19em;
-	max-width: 90%;
+
+#stream.global .box {
+	text-align: left;
 }
-/* TODO </delete */
 
 /*=== Panel */
 #overlay {
@@ -685,39 +668,45 @@ br + br + br {
 
 /*=== DIVERS */
 /*===========*/
+.category .title:not([data-unread="0"]):after {
+	content: attr(data-unread);
+}
+.feed .item-title:not([data-unread="0"]):before {
+	content: "(" attr(data-unread) ") ";
+}
+.feed .item-title:not([data-unread="0"]) {
+	font-weight: bold;
+}
+
+.state_unread .category:not(.active)[data-unread="0"],
+.state_unread .feed:not(.active)[data-unread="0"] {
+	display: none;
+}
+
 .nav-login,
 .nav_menu .search,
+.aside .toggle_aside,
 .nav_menu .toggle_aside {
 	display: none;
 }
 
-.aside .toggle_aside {
-	position: absolute;
-	right: 0;
-	display: none;
-	width: 30px;
-	height: 30px;
-	line-height: 30px;
-	text-align: center;
-}
 
 /*=== MOBILE */
 /*===========*/
 @media(max-width: 840px) {
 	.header,
 	.aside .btn-important,
-	.aside .feeds .dropdown,
 	.flux_header .item.website span,
 	.item.date, .day .date,
 	.dropdown-menu > .no-mobile,
 	.no-mobile {
 		display: none;
 	}
+	.aside .toggle_aside,
 	.nav-login {
 		display: block;
 	}
 	.nav_menu .toggle_aside,
-	.aside .toggle_aside,
 	.nav_menu .search,
 	#panel .close img {
 		display: inline-block;
@@ -735,9 +724,6 @@ br + br + br {
 		width: 90%;
 		overflow: auto;
 	}
-	.aside .categories {
-		margin: 10px 0 75px;
-	}
 
 	.flux_header .item.website {
 		width: 40px;
@@ -759,10 +745,6 @@ br + br + br {
 		width: 100%;
 	}
 
-	#stream.global .box-category {
-		margin: 10px 0;
-	}
-
 	#panel {
 		top: 0; bottom: 0;
 		left: 0; right: 0;