Merge pull request #708 from FreshRSS/theme-selector

Theme selection redesign

6 files changed, 89 insertions, 0 deletions

diff --git a/p/themes/Dark/thumbs/original.png b/p/themes/Dark/thumbs/original.png
new file mode 100644
index 000000000..fd574319f
--- /dev/null
+++ b/p/themes/Dark/thumbs/original.png
diff --git a/p/themes/Flat/thumbs/original.png b/p/themes/Flat/thumbs/original.png
new file mode 100644
index 000000000..b9cafa9c8
--- /dev/null
+++ b/p/themes/Flat/thumbs/original.png
diff --git a/p/themes/Origine/thumbs/original.png b/p/themes/Origine/thumbs/original.png
new file mode 100644
index 000000000..d26d4fbed
--- /dev/null
+++ b/p/themes/Origine/thumbs/original.png
diff --git a/p/themes/Pafat/thumbs/original.png b/p/themes/Pafat/thumbs/original.png
new file mode 100644
index 000000000..fe05f7260
--- /dev/null
+++ b/p/themes/Pafat/thumbs/original.png
diff --git a/p/themes/Screwdriver/thumbs/original.png b/p/themes/Screwdriver/thumbs/original.png
new file mode 100644
index 000000000..ba9bacf90
--- /dev/null
+++ b/p/themes/Screwdriver/thumbs/original.png
diff --git a/p/themes/base-theme/template.css b/p/themes/base-theme/template.css
index f696ac237..80f76e80b 100644
--- a/p/themes/base-theme/template.css
+++ b/p/themes/base-theme/template.css
@@ -683,6 +683,95 @@ br + br + br {
 	left: 0;
 }
 
+/*=== SLIDESHOW */
+/*==============*/
+.slides {
+	padding: 0;
+	height: 320px;
+	display: block;
+	position: relative;
+	min-width: 260px;
+	max-width: 640px;
+	margin-bottom: 30px;
+}
+.slides * {
+	user-select: none;
+	-ms-user-select: none;
+	-moz-user-select: none;
+	-khtml-user-select: none;
+	-webkit-user-select: none;
+	-webkit-touch-callout: none;
+}
+.slides input {
+	display: none;
+}
+.slide-container {
+	display: block;
+}
+.slide {
+	top: 0;
+	opacity: 0;
+	width: 100%;
+	height: 100%;
+	display: block;
+	position: absolute;
+	transform: scale(0);
+	transition: all .7s ease-in-out;
+}
+.slide img {
+	width: 100%;
+	height: 100%;
+}
+.nav label {
+	width: 10%;
+	height: 100%;
+	display: none;
+	position: absolute;
+	opacity: 0;
+	z-index: 9;
+	cursor: pointer;
+	transition: opacity .2s;
+	color: #FFF;
+	font-size: 1000%;
+	text-align: center;
+	line-height: 225%;
+	font-family: "Varela Round", sans-serif;
+	background-color: rgba(255, 255, 255, .3);
+	text-shadow: 0px 0px 15px rgb(119, 119, 119);
+	padding: 0;
+}
+.properties {
+	bottom: -35px;
+	position: absolute;
+	width: 100%;
+	display: none;
+}
+.properties .page-number {
+	right: 0;
+	top: 0;
+	position: absolute;
+}
+.slide:hover + .nav label {
+	opacity: 0.5;
+}
+.nav label:hover {
+	opacity: 1;
+}
+.nav .next {
+	right: 0;
+}
+input:checked + .slide-container .slide {
+	opacity: 1;
+	transform: scale(1);
+	transition: opacity 1s ease-in-out;
+}
+input:checked + .slide-container .nav label {
+	display: block;
+}
+input:checked + .slide-container .properties {
+	display: block;
+}
+
 /*=== DIVERS */
 /*===========*/
 .category .title:not([data-unread="0"]):after {