Merge branch 'beta' into hotfixes

1 files changed, 137 insertions, 124 deletions

diff --git a/p/themes/Screwdriver/screwdriver.css b/p/themes/Screwdriver/screwdriver.css
index 37fa18e10..b6c2e670e 100644
--- a/p/themes/Screwdriver/screwdriver.css
+++ b/p/themes/Screwdriver/screwdriver.css
@@ -497,6 +497,88 @@ a.btn {
 	font-size: 0;
 }
 
+/*=== Boxes */
+.box {
+	background: #EDE7DE;
+	border-radius: 4px 4px 0 0;
+}
+.box .box-title {
+	margin: 0;
+	padding: 5px 10px;
+	background: linear-gradient(0deg, #EDE7DE 0%, #fff 100%) #171717;
+	background: -webkit-linear-gradient(bottom, #EDE7DE 0%, #fff 100%);
+	box-shadow: 0px -1px #fff inset,0 -2px #ccc inset;
+	color: #888;
+	text-shadow: 0 1px #ccc;
+	border-radius: 4px 4px 0 0;
+	font-size: 1.1rem;
+	font-weight: normal;
+}
+.box .box-content {
+	max-height: 260px;
+}
+
+.box .box-content .item {
+	padding: 0 10px;
+	font-size: 0.9rem;
+	line-height: 2.5em;
+}
+
+.box .box-content .item .configure {
+	visibility: hidden;
+}
+.box .box-content .item:hover .configure {
+	visibility: visible;
+}
+
+/*=== Tree */
+.tree {
+	margin: 10px 0;
+}
+.tree-folder-title {
+	position: relative;
+	padding: 0 10px;
+	line-height: 2.5rem;
+	font-size: 0.9rem;
+}
+.tree-folder-title .title {
+	background: inherit;
+	color: #fff;
+}
+.tree-folder-title .title:hover {
+	text-decoration: none;
+}
+.tree-folder.active .tree-folder-title {
+	background: linear-gradient(180deg, #222 0%, #171717 100%) #171717;
+	background: -webkit-linear-gradient(top, #222 0%, #171717 100%);
+	box-shadow: 0px 1px #171717, 0px 1px rgba(255, 255, 255, 0.08) inset;
+	text-shadow: 0 0 2px rgba(255,255,255,0.28);
+	color: #fff;
+}
+.tree-folder-items {
+    background: #171717;
+    padding: 8px 0;
+	box-shadow: 0 4px 4px #171717 inset, 0 1px rgba(255,255,255,0.08),0 -1px rgba(255,255,255,0.08);
+}
+.tree-folder-items > .item {
+	padding: 0 10px;
+	line-height: 2.5rem;
+	font-size: 0.8rem;
+}
+.tree-folder-items > .item.active {
+	background: linear-gradient(180deg, #222 0%, #171717 100%) #171717;
+	background: -webkit-linear-gradient(top, #222 0%, #171717 100%);
+	border-radius: 4px;
+	margin: 0px 8px;
+	box-shadow: 0px 1px #171717, 0px 1px rgba(255, 255, 255, 0.08) inset, 0 2px 2px #111;
+}
+.tree-folder-items > .item > a {
+	text-decoration: none;
+	color: #fff;
+}
+.tree-folder-items > .item.active > a {
+}
+
 /*=== STRUCTURE */
 /*===============*/
 /*=== Header */
@@ -535,7 +617,7 @@ a.btn {
 /*=== Body */
 #global {
 	background:#EDE7DE;
-	height: calc(100% - 85px);
+	height: calc(100% - 60px);
 }
 .aside {
 	border-radius: 0px 12px 0px 0px;
@@ -544,105 +626,44 @@ a.btn {
 	background: #222;
 	width: 235px;
 }
-.aside.aside_flux {
-	padding: 10px 0 50px;
-	background: #222;
-}
-
-/*=== Aside main page (categories) */
-.categories {
+.aside.aside_feed {
+	padding: 10px 0;
 	text-align: center;
 }
-.categories .btn-important {
-	border: none;
-}
-.category {
-	width: 235px;
-	margin: 10px auto 0;
-	text-align: left;
-}
-#aside_flux ul.feeds{
-    box-shadow: 0 4px 4px #171717 inset, 0 1px rgba(255,255,255,0.08),0 -1px rgba(255,255,255,0.08);
-}
-ul.feeds{
-    background:#171717;
-    padding:8px 0;
-    box-shadow: 0 4px 4px #EDE7DE inset;
-}
-ul.feeds.active{
-	box-shadow: 0 0 0 #171717 inset, 0 -2px 2px #111 inset,0 1px rgba(255,255,255,0.08),0 -1px rgba(255,255,255,0);
-}
-.category.stick.active{
-	background: linear-gradient(180deg, #222 0%, #171717 100%) #171717;
-	background: -webkit-linear-gradient(top, #222 0%, #171717 100%);
-	box-shadow: 0px 1px #171717, 0px 1px rgba(255, 255, 255, 0.08) inset;
-}
-.category .btn {
-	color: #fff;
-	border: none;
-	background: transparent;
-}
-.category .btn:first-child {
-	position: relative;
-	width: 213px;
-	background: transparent;
-}
-.category.stick .btn:first-child {
-	width: 176px;
+.aside.aside_feed .tree {
+	position: sticky;
+	top: 0;
+	margin: 10px 0 50px;
 }
-.category .btn:first-child:not([data-unread="0"]):after {
+
+/*=== Aside main page (categories) */
+.aside_feed .tree-folder-title > .title:not([data-unread="0"]):after {
 	position: absolute;
-	top: 3px; right: 3px;
+	right: 3px;
 	padding: 1px 5px;
-	background: transparent;
 	color: #fff;
 	text-shadow: 0 1px rgba(255,255,255,0.08);
 }
+.aside_feed .btn-important {
+	border: none;
+}
 
 /*=== Aside main page (feeds) */
-.categories .feeds .item.active {
-	background: linear-gradient(180deg, #222 0%, #171717 100%) #171717;
-	background: -webkit-linear-gradient(top, #222 0%, #171717 100%);
-	border-radius: 4px;
-	margin: 0px 8px;
-	box-shadow: 0px 1px #171717, 0px 1px rgba(255, 255, 255, 0.08) inset, 0 2px 2px #111;
-}
-.categories .feeds .item.active .feed {
-	color: #fff;
-}
-.categories .feeds .item.empty .feed {
+.feed.item.empty,
+.feed.item.empty > a {
 	color: #e67e22;
 }
-.categories .feeds .item.empty.active {
-	background: #e67e22;
-}
-.categories .feeds .item.empty.active .feed {
-	color: #fff;
-}
-.categories .feeds .item.error .feed {
+.feed.item.error,
+.feed.item.error > a {
 	color: #BD362F;
 }
-.categories .feeds .item .feed {
-	margin: 0;
-	width: 165px;
-	line-height: 3em;
-	font-size: 0.8em;
-	text-align: left;
-	text-decoration: none;
-	color:#ccc;
-}
-.categories .feeds .feed:not([data-unread="0"]) {
-	font-weight: bold;
-}
-.categories .feeds .dropdown-menu:after {
+.aside_feed .tree-folder-items .dropdown-menu:after {
 	left: 2px;
 }
-.categories .feeds .item .dropdown-target:target ~ .dropdown-toggle > .icon,
-.categories .feeds .item:hover .dropdown-toggle > .icon,
-.categories .feeds .item.active .dropdown-toggle > .icon {
-	background-color: transparent;
+.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 {
 	border-radius: 3px;
-	vertical-align: middle;
 }
 
 /*=== Configuration pages */
@@ -934,63 +955,50 @@ opacity: 1;
 
 /*=== GLOBAL VIEW */
 /*================*/
-#stream.global{
-	background:#222;
+#stream.global {
+	background: #222;
 	padding: 24px 0;
 	box-shadow: 0 1px #fff, 0 -2px 2px #171717 inset, 0 2px 2px #171717 inset;
 }
-#stream.global .box-category {
-	background: #fff;
-	border-radius: 4px 4px 0 0;
-	text-align: left;
-	box-shadow: 0 0 4px #171717;
-	overflow:hidden;
-}
-#stream.global .category {
-	margin: 0;
-}
-#stream.global .btn {
-	width: auto;
-	height: 2em;
-	margin: 0;
-	padding: 0 10px;
+
+.box.category .box-title {
 	background: linear-gradient(0deg, #EDE7DE 0%, #fff 100%) #171717;
 	background: -webkit-linear-gradient(bottom, #EDE7DE 0%, #fff 100%);
-	border: none;
 	box-shadow: 0px -1px #fff inset,0 -2px #ccc inset;
 	border-radius: none;
 	line-height: 2em;
 	font-size: 1.2rem;
-	color:#888;
 	text-shadow:0 1px #ccc;
 }
-#stream.global .btn:not([data-unread="0"]) {
+.box.category .box-title .title {
+	font-weight: normal;
+	text-decoration: none;
+	text-align: left;
+	color: #888;
+}
+.box.category:not([data-unread="0"]) .box-title {
+}
+.box.category:not([data-unread="0"]) .box-title:active {
+}
+.box.category:not([data-unread="0"]) .box-title .title {
 	color: #222;
 	font-weight: bold;
 }
-#stream.global .btn:first-child:not([data-unread="0"]):after {
-	top: 0;
-	right: 5px;
+.box.category .title:not([data-unread="0"]):after {
+	position: absolute;
+	top: 5px; right: 10px;
 	border: 0;
 	background: none;
-	color: #222;
 	font-weight: bold;
-	box-shadow: none;
-	text-shadow: none;
 }
-#stream.global .box-category .feeds {
-	max-height: 250px;
-	color:#222;
-	background:#EDE7DE;
-}
-#stream.global .box-category .feeds .item {
+.box.category .item.feed {
 	padding: 2px 10px;
-	font-size: 0.9rem;
-	overflow:hidden;
+	font-size: 0.8rem;
 }
-#stream.global .box-category .feed {
-	color:#222;
+.box.category .item.feed:not(.empty):not(.error) .item-title {
+	color: #222;
 }
+
 /*=== PANEL */
 /*===========*/
 #panel {
@@ -1101,12 +1109,10 @@ opacity: 1;
 	}
 	.aside .toggle_aside,
 	#panel .close {
-		position: absolute;
 		display: block;
-		top: 0; right: 0;
-		width: 30px;
-		height: 30px;
-		line-height: 30px;
+		width: 100%;
+		height: 40px;
+		line-height: 40px;
 		text-align: center;
 		background: #171717;
 		box-shadow: 0 1px rgba(255,255,255,0.08);
@@ -1117,6 +1123,13 @@ opacity: 1;
 		margin: 20px 0 0;
 	}
 
+	.aside.aside_feed {
+		padding: 0;
+	}
+	.aside.aside_feed .tree {
+		position: static;
+	}
+
 	.nav_menu .btn {
 		margin: 5px 10px;
 	}