From ec55aa94bfb30cdb0cd701785189215dfaf2094a Mon Sep 17 00:00:00 2001 From: Alexis Degrugillier Date: Sat, 15 Nov 2014 18:02:22 -0500 Subject: Theme selection redesign I made a CSS3 gallery to select the theme. Now you can see the theme before applying it. Comments are welcome. See #571 --- p/themes/Dark/thumbs/original.png | Bin 0 -> 123928 bytes p/themes/Flat/thumbs/original.png | Bin 0 -> 133420 bytes p/themes/Origine/thumbs/original.png | Bin 0 -> 135886 bytes p/themes/Pafat/thumbs/original.png | Bin 0 -> 129220 bytes p/themes/Screwdriver/thumbs/original.png | Bin 0 -> 133107 bytes p/themes/base-theme/template.css | 92 +++++++++++++++++++++++++++++++ 6 files changed, 92 insertions(+) create mode 100644 p/themes/Dark/thumbs/original.png create mode 100644 p/themes/Flat/thumbs/original.png create mode 100644 p/themes/Origine/thumbs/original.png create mode 100644 p/themes/Pafat/thumbs/original.png create mode 100644 p/themes/Screwdriver/thumbs/original.png (limited to 'p') diff --git a/p/themes/Dark/thumbs/original.png b/p/themes/Dark/thumbs/original.png new file mode 100644 index 000000000..fd574319f Binary files /dev/null and b/p/themes/Dark/thumbs/original.png differ diff --git a/p/themes/Flat/thumbs/original.png b/p/themes/Flat/thumbs/original.png new file mode 100644 index 000000000..b9cafa9c8 Binary files /dev/null and b/p/themes/Flat/thumbs/original.png differ diff --git a/p/themes/Origine/thumbs/original.png b/p/themes/Origine/thumbs/original.png new file mode 100644 index 000000000..d26d4fbed Binary files /dev/null and b/p/themes/Origine/thumbs/original.png differ diff --git a/p/themes/Pafat/thumbs/original.png b/p/themes/Pafat/thumbs/original.png new file mode 100644 index 000000000..fe05f7260 Binary files /dev/null and b/p/themes/Pafat/thumbs/original.png differ diff --git a/p/themes/Screwdriver/thumbs/original.png b/p/themes/Screwdriver/thumbs/original.png new file mode 100644 index 000000000..ba9bacf90 Binary files /dev/null and b/p/themes/Screwdriver/thumbs/original.png differ diff --git a/p/themes/base-theme/template.css b/p/themes/base-theme/template.css index f696ac237..aab511fb9 100644 --- a/p/themes/base-theme/template.css +++ b/p/themes/base-theme/template.css @@ -683,6 +683,98 @@ br + br + br { left: 0; } +/*=== SLIDESHOW */ +/*==============*/ +.slides { + padding: 0; + height: 320px; + display: block; + position: relative; + min-width: 260px; + max-width: 640px; +} +.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: 15px; + display: none; + left: 15%; + padding: 5px; + position: absolute; + text-align: center; + width: 70%; + font-size: 15pt; + text-shadow: 0px 0px 15px rgb(119, 119, 119); + border-radius: 5px; + box-shadow: 5px 5px 10px; + border: 1px solid; + background-color: #fff; +} +.slide:hover + .nav label { + opacity: 0.5; +} +.slide:hover ~ .properties { + display: block; +} +.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; +} + /*=== DIVERS */ /*===========*/ .category .title:not([data-unread="0"]):after { -- cgit v1.2.3 From 91388c5b7602af44894e8283c18ca76b5b06ed43 Mon Sep 17 00:00:00 2001 From: Alexis Degrugillier Date: Sun, 16 Nov 2014 08:55:19 -0500 Subject: Theme properties are more visible --- app/views/configure/display.phtml | 4 +++- p/themes/base-theme/template.css | 25 +++++++++++-------------- 2 files changed, 14 insertions(+), 15 deletions(-) (limited to 'p') diff --git a/app/views/configure/display.phtml b/app/views/configure/display.phtml index 39582249e..1c925a5ca 100644 --- a/app/views/configure/display.phtml +++ b/app/views/configure/display.phtml @@ -38,7 +38,9 @@
- +
+
+
diff --git a/p/themes/base-theme/template.css b/p/themes/base-theme/template.css index aab511fb9..80f76e80b 100644 --- a/p/themes/base-theme/template.css +++ b/p/themes/base-theme/template.css @@ -692,6 +692,7 @@ br + br + br { position: relative; min-width: 260px; max-width: 640px; + margin-bottom: 30px; } .slides * { user-select: none; @@ -740,26 +741,19 @@ br + br + br { padding: 0; } .properties { - bottom: 15px; + bottom: -35px; + position: absolute; + width: 100%; display: none; - left: 15%; - padding: 5px; +} +.properties .page-number { + right: 0; + top: 0; position: absolute; - text-align: center; - width: 70%; - font-size: 15pt; - text-shadow: 0px 0px 15px rgb(119, 119, 119); - border-radius: 5px; - box-shadow: 5px 5px 10px; - border: 1px solid; - background-color: #fff; } .slide:hover + .nav label { opacity: 0.5; } -.slide:hover ~ .properties { - display: block; -} .nav label:hover { opacity: 1; } @@ -774,6 +768,9 @@ input:checked + .slide-container .slide { input:checked + .slide-container .nav label { display: block; } +input:checked + .slide-container .properties { + display: block; +} /*=== DIVERS */ /*===========*/ -- cgit v1.2.3