Fix theme Origine2

It should be equivalent to Origine (modulo some improvements)

See https://github.com/marienfressinaud/FreshRSS/issues/320

3 files changed, 272 insertions, 68 deletions

diff --git a/p/themes/Origine2/origine.css b/p/themes/Origine2/origine.css
index ad97e11cf..31d1d4233 100644
--- a/p/themes/Origine2/origine.css
+++ b/p/themes/Origine2/origine.css
@@ -41,7 +41,7 @@ input, select, textarea {
 	border: 1px solid #bbb;
 	border-radius: 3px;
 	color: #666;
-	vertical-align: top;
+	vertical-align: middle;
 	box-shadow: 0 2px 2px #eee inset;
 }
 option {
@@ -59,8 +59,7 @@ input:invalid, select:invalid {
 input:disabled, select:disabled {
 	background: #eee;
 }
-input:focus.extend {
-	width: 300px;
+input.extend {
 	transition: width 200ms linear;
 	-moz-transition: width 200ms linear;
 	-webkit-transition: width 200ms linear;
@@ -68,6 +67,18 @@ input:focus.extend {
 	-ms-transition: width 200ms linear;
 }
 
+/*=== Tables */
+table {
+	border-collapse: collapse;
+	text-align: center;
+}
+
+tr, th, td {
+	padding: 0.5em;
+	border: 1px solid #ddd;
+	font-weight: normal;
+}
+
 /*=== COMPONENTS */
 /*===============*/
 /*=== Forms */
@@ -87,6 +98,9 @@ input:focus.extend {
 	min-height: 25px;
 	padding: 5px 0;
 }
+.form-group table {
+	margin: 10px 0 0 220px;
+}
 
 /*=== Buttons */
 .stick {
@@ -249,13 +263,6 @@ a.btn {
 .nav-list a:hover {
 	text-decoration: none;
 }
-.nav-list .item.error a {
-	color: #BD362F;
-}
-.nav-list .item.active.error a {
-	color: #fff;
-	background: #BD362F;
-}
 .nav-list .item.empty a {
 	color: #f39c12;
 }
@@ -263,6 +270,13 @@ a.btn {
 	color: #fff;
 	background: #f39c12;
 }
+.nav-list .item.error a {
+	color: #BD362F;
+}
+.nav-list .item.active.error a {
+	color: #fff;
+	background: #BD362F;
+}
 
 .nav-list .nav-header {
 	padding: 0 10px;
@@ -515,6 +529,7 @@ a.btn {
 	line-height: 3em;
 	font-size: 0.8em;
 	text-align: left;
+	text-decoration: none;
 }
 .categories .feeds .feed:not([data-unread="0"]) {
 	font-weight: bold;
@@ -635,21 +650,38 @@ a.btn {
 	background: #fff;
 }
 
+
 .flux_header {
 	border-top: 1px solid #ddd;
+	font-size: 0.8rem;
 	cursor: pointer;
 }
+.flux .website .favicon {
+	padding: 5px;
+}
+.flux .date {
+	color: #666;
+	font-size: 0.7rem;
+}
 .flux:not(.current):hover .item.title {
 	top: 1px;
 }
 
+.flux .bottom {
+	font-size: 0.8rem;
+	text-align: center;
+}
+
 /*=== Content of feed articles */
 .content {
 	padding: 20px 10px;
 }
+.content > h1.title > a {
+	color: #000;
+}
 
 /*=== Notification and actualize notification */
-#notification {
+.notification {
 	padding: 0 0 0 5px;
 	text-align: center;
 	border: 1px solid #eeb;
@@ -659,27 +691,33 @@ a.btn {
 	font-size: 0.9em;
 	line-height: 3em;
 	z-index: 10;
+	vertical-align: middle;
 }
-#notification.good {
+.notification.good {
 	background: #ffe;
 	border: 1px solid #eeb;
 	color: #c95;
 }
-#notification.bad {
+.notification.bad {
 	background: #fdd;
 	border: 1px solid #ecc;
 	color: #844;
 }
-#notification a.close {
+.notification a.close {
 	padding: 0 15px;
+	line-height: 3em;
 }
-#notification.good a.close:hover {
+.notification.good a.close:hover {
 	background: #eeb;
 }
-#notification.bad a.close:hover {
+.notification.bad a.close:hover {
 	background: #ecc;
 }
 
+.notification#actualizeProgress {
+	line-height: 2em;
+}
+
 /*=== "Load more" part */
 #bigMarkAsRead {
 	text-align: center;
@@ -701,6 +739,66 @@ a.btn {
 	table-layout: fixed;
 }
 
+/*=== READER VIEW */
+/*================*/
+#stream.reader .flux {
+	padding: 0 0 50px;
+	border: none;
+	background: #f0f0f0;
+	color: #333;
+}
+#stream.reader .flux .author {
+	margin: 0 0 10px;
+	font-size: 90%;
+	color: #666;
+}
+
+/*=== GLOBAL VIEW */
+/*================*/
+#stream.global .box-category {
+	background: #fff;
+	border-radius: 5px;
+	text-align: left;
+	box-shadow: 0 0 3px #bbb;
+}
+#stream.global .category {
+	margin: 0;
+}
+#stream.global .btn {
+	width: auto;
+	height: 2em;
+	margin: 0;
+	padding: 0 10px;
+	background: #f6f6f6;
+	border: none;
+	border-bottom: 1px solid #ddd;
+	border-radius: 5px 5px 0 0;
+	line-height: 2em;
+	font-size: 1.2rem;
+}
+#stream.global .btn:not([data-unread="0"]) {
+	background: #0084CC;
+	color: #fff;
+	font-weight: bold;
+	text-shadow: none;
+}
+#stream.global .btn:first-child:not([data-unread="0"]):after {
+	top: 0; right: 5px;
+	border: 0;
+	background: none;
+	color: #fff;
+	font-weight: bold;
+	box-shadow: none;
+	text-shadow: none;
+}
+#stream.global .box-category .feeds {
+	max-height: 250px;
+}
+#stream.global .box-category .feeds .item {
+	padding: 2px 10px;
+	font-size: 0.9rem;
+}
+
 
 /*=== DIVERS */
 /*===========*/
@@ -714,3 +812,61 @@ a.btn {
 .aside.aside_feed .nav-form .dropdown .dropdown-menu:after {
 	right: 33px;
 }
+
+
+/*=== MOBILE */
+/*===========*/
+@media(max-width: 840px) {
+	.aside {
+		box-shadow: 3px 0 3px #aaa;
+		transition: width 200ms linear;
+		-moz-transition: width 200ms linear;
+		-webkit-transition: width 200ms linear;
+		-o-transition: width 200ms linear;
+		-ms-transition: width 200ms linear;
+	}
+	.aside .toggle_aside,
+	#panel .close {
+		position: absolute;
+		display: block;
+		top: 0; right: 0;
+		width: 30px;
+		height: 30px;
+		line-height: 30px;
+		text-align: center;
+		background: #f6f6f6;
+		border-left: 1px solid #ddd;
+		border-bottom: 1px solid #ddd;
+		border-radius: 0 0 0 5px;
+	}
+
+	.nav_menu .btn {
+		margin: 5px 10px;
+	}
+	.nav_menu .stick {
+		margin: 0 10px;
+	}
+	.nav_menu .stick .btn {
+		margin: 5px 0;
+	}
+	.nav_menu .search {
+		display: inline-block;
+		max-width: 97%;
+	}
+	.nav_menu .search input {
+		max-width: 97%;
+		width: 90px;
+	}
+	.nav_menu .search input:focus {
+		width: 400px;
+	}
+
+	.day .name {
+		font-size: 1.1rem;
+		text-shadow: none;
+	}
+
+	.flux_header .item.website .favicon {
+		padding: 12px;
+	}
+}
diff --git a/p/themes/Origine2/template.css b/p/themes/Origine2/template.css
index c546a824d..d57f2cde3 100644
--- a/p/themes/Origine2/template.css
+++ b/p/themes/Origine2/template.css
@@ -169,8 +169,7 @@ a.btn {
 	position: absolute;
 	right: 0;
 	background: #fff;
-	border: 1px solid #aaa;	
-	overflow: auto;
+	border: 1px solid #aaa;
 }
 .dropdown-header {
 	display: block;
@@ -294,6 +293,10 @@ a.btn {
 }
 
 /*=== Aside main page (categories) */
+.categories {
+	list-style: none;
+	margin: 0;
+}
 .category {
 	display: block;
 	overflow: hidden;
@@ -359,10 +362,10 @@ a.btn {
 	position: relative;
 }
 .flux .item {
-	font-size: 0.9em;
 	line-height: 40px;
 	white-space: nowrap;
 	text-overflow: ellipsis;
+	overflow: hidden;
 }
 .flux .item.manage,
 .flux .item.link {
@@ -391,14 +394,16 @@ a.btn {
 }
 .flux .item.date {
 	width: 145px;
-	font-size: 0.7em;
 	text-align: right;
 }
-.flux .item:not(.title) > a {
+.flux .item > a {
 	display: block;
 }
-.flux .flux_header .item,
-.flux .bottom .item.date {
+.flux .item:not(.title) > a {
+	display: block;
+	text-decoration: none;
+	white-space: nowrap;
+	text-overflow: ellipsis;
 	overflow: hidden;
 }
 .flux .item.share > a {
@@ -417,6 +422,15 @@ a.btn {
 	line-height: 1.7em;
 	word-wrap: break-word;
 }
+.content.large {
+	max-width: 1000px;
+}
+.content.medium {
+	max-width: 800px;
+}
+.content.thin {
+	max-width: 550px;
+}
 .content ul,
 .content ol,
 .content dd {
@@ -428,7 +442,7 @@ a.btn {
 }
 
 /*=== Notification and actualize notification */
-#notification {
+.notification {
 	position: absolute;
 	top: 1em;
 	left: 25%; right: 25%;
@@ -436,24 +450,21 @@ a.btn {
 	background: #fff;
 	border: 1px solid #aaa;
 }
-#notification.closed {
+.notification.closed {
 	display: none;
 }
-#notification a.close {
+.notification a.close {
 	position: absolute;
 	right: 0;
 	display: inline-block;
 }
 
-.actualizeProgress {
-	position: fixed;
-	top: 1em;
-	left: 25%; right: 25%;
-	background: #fff;
-	border: 1px solid #aaa;
-}
-.actualizeProgress progress {
+#actualizeProgress progress {
 	max-width: 100%;
+	vertical-align: middle;
+}
+#actualizeProgress .progress {
+	vertical-align: middle;
 }
 
 /*=== Navigation menu (for articles) */
@@ -501,9 +512,10 @@ a.btn {
 /*=== Category boxes */
 #stream.global .box-category {
 	display: inline-block;
-	width: 20em;
+	width: 19em;
 	max-width: 95%;
-	border: 1px solid #aaa;
+	margin: 20px 10px;
+	border: 1px solid #ccc;
 	vertical-align: top;
 }
 #stream.global .category {
@@ -516,6 +528,10 @@ a.btn {
 	display: block;
 	overflow: auto;
 }
+#stream.global .box-category .feed {
+	width: 19em;
+	max-width: 90%;
+}
 
 /*=== Panel */
 #overlay {
@@ -571,27 +587,31 @@ a.btn {
 	.item.date, .day .date {
 		display: none;
 	}
-	.nav-login,
-	#panel .close img {
+	.nav-login {
 		display: block;
 	}
 	.nav_menu .toggle_aside,
 	.aside .toggle_aside,
-	.nav_menu .search {
+	.nav_menu .search,
+	#panel .close img {
 		display: inline-block;
 	}
 
 	.aside {
 		position: fixed;
-		top: 0; left: 0;
+		top: 0; bottom: 0;
+		left: 0;
 		width: 0;
 		overflow: hidden;
-		z-index: 10;
+		z-index: 100;
 	}
 	.aside:target {
-		width: 80%;
+		width: 90%;
 		overflow: auto;
 	}
+	.aside .categories {
+		margin: 10px 0 75px;
+	}
 
 	.flux_header .item.website {
 		width: 40px;
@@ -614,6 +634,10 @@ a.btn {
 		width: 100%;
 	}
 
+	#stream.global .box-category {
+		margin: 10px 0;
+	}
+
 	#panel {
 		top: 0; bottom: 0;
 		left: 0; right: 0;
diff --git a/p/themes/template/template.css b/p/themes/template/template.css
index c546a824d..d57f2cde3 100644
--- a/p/themes/template/template.css
+++ b/p/themes/template/template.css
@@ -169,8 +169,7 @@ a.btn {
 	position: absolute;
 	right: 0;
 	background: #fff;
-	border: 1px solid #aaa;	
-	overflow: auto;
+	border: 1px solid #aaa;
 }
 .dropdown-header {
 	display: block;
@@ -294,6 +293,10 @@ a.btn {
 }
 
 /*=== Aside main page (categories) */
+.categories {
+	list-style: none;
+	margin: 0;
+}
 .category {
 	display: block;
 	overflow: hidden;
@@ -359,10 +362,10 @@ a.btn {
 	position: relative;
 }
 .flux .item {
-	font-size: 0.9em;
 	line-height: 40px;
 	white-space: nowrap;
 	text-overflow: ellipsis;
+	overflow: hidden;
 }
 .flux .item.manage,
 .flux .item.link {
@@ -391,14 +394,16 @@ a.btn {
 }
 .flux .item.date {
 	width: 145px;
-	font-size: 0.7em;
 	text-align: right;
 }
-.flux .item:not(.title) > a {
+.flux .item > a {
 	display: block;
 }
-.flux .flux_header .item,
-.flux .bottom .item.date {
+.flux .item:not(.title) > a {
+	display: block;
+	text-decoration: none;
+	white-space: nowrap;
+	text-overflow: ellipsis;
 	overflow: hidden;
 }
 .flux .item.share > a {
@@ -417,6 +422,15 @@ a.btn {
 	line-height: 1.7em;
 	word-wrap: break-word;
 }
+.content.large {
+	max-width: 1000px;
+}
+.content.medium {
+	max-width: 800px;
+}
+.content.thin {
+	max-width: 550px;
+}
 .content ul,
 .content ol,
 .content dd {
@@ -428,7 +442,7 @@ a.btn {
 }
 
 /*=== Notification and actualize notification */
-#notification {
+.notification {
 	position: absolute;
 	top: 1em;
 	left: 25%; right: 25%;
@@ -436,24 +450,21 @@ a.btn {
 	background: #fff;
 	border: 1px solid #aaa;
 }
-#notification.closed {
+.notification.closed {
 	display: none;
 }
-#notification a.close {
+.notification a.close {
 	position: absolute;
 	right: 0;
 	display: inline-block;
 }
 
-.actualizeProgress {
-	position: fixed;
-	top: 1em;
-	left: 25%; right: 25%;
-	background: #fff;
-	border: 1px solid #aaa;
-}
-.actualizeProgress progress {
+#actualizeProgress progress {
 	max-width: 100%;
+	vertical-align: middle;
+}
+#actualizeProgress .progress {
+	vertical-align: middle;
 }
 
 /*=== Navigation menu (for articles) */
@@ -501,9 +512,10 @@ a.btn {
 /*=== Category boxes */
 #stream.global .box-category {
 	display: inline-block;
-	width: 20em;
+	width: 19em;
 	max-width: 95%;
-	border: 1px solid #aaa;
+	margin: 20px 10px;
+	border: 1px solid #ccc;
 	vertical-align: top;
 }
 #stream.global .category {
@@ -516,6 +528,10 @@ a.btn {
 	display: block;
 	overflow: auto;
 }
+#stream.global .box-category .feed {
+	width: 19em;
+	max-width: 90%;
+}
 
 /*=== Panel */
 #overlay {
@@ -571,27 +587,31 @@ a.btn {
 	.item.date, .day .date {
 		display: none;
 	}
-	.nav-login,
-	#panel .close img {
+	.nav-login {
 		display: block;
 	}
 	.nav_menu .toggle_aside,
 	.aside .toggle_aside,
-	.nav_menu .search {
+	.nav_menu .search,
+	#panel .close img {
 		display: inline-block;
 	}
 
 	.aside {
 		position: fixed;
-		top: 0; left: 0;
+		top: 0; bottom: 0;
+		left: 0;
 		width: 0;
 		overflow: hidden;
-		z-index: 10;
+		z-index: 100;
 	}
 	.aside:target {
-		width: 80%;
+		width: 90%;
 		overflow: auto;
 	}
+	.aside .categories {
+		margin: 10px 0 75px;
+	}
 
 	.flux_header .item.website {
 		width: 40px;
@@ -614,6 +634,10 @@ a.btn {
 		width: 100%;
 	}
 
+	#stream.global .box-category {
+		margin: 10px 0;
+	}
+
 	#panel {
 		top: 0; bottom: 0;
 		left: 0; right: 0;