mirror/webslides
1
0
Fork 0
mirror of https://github.com/webslides/WebSlides.git synced 2025-08-26 14:34:27 +02:00
Code Issues Releases Wiki Activity

index of slides: min 100vh, hover, numbers...

Browse Source
This commit is contained in:
José Luis Antúnez
2017-04-09 19:47:54 +02:00
committed by GitHub
parent 708d5bfda6
commit 34fdc56eac
2 changed files with 86 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
static/css/base.css
View File

@@ -50,10 +50,9 @@
15. Longform Elements 15. Longform Elements
16. Safari Bug (flex-wrap) 16. Safari Bug (flex-wrap)
17. Print 17. Print
18. Zoom 18. Zoom: Index of slides (grid)
----------------------------------------------------------------------------------- */ ----------------------------------------------------------------------------------- */
/*========================================= /*=========================================
0. CSS Reset & Normalize 0. CSS Reset & Normalize
=========================================== */ =========================================== */
@@ -1594,7 +1593,7 @@ padding: 2.4rem;
bottom: 0; bottom: 0;
left: 0; left: 0;
/* hover/visibility */ /* hover/visibility */
z-index: 3; z-index: 4;
} }
#navigation { #navigation {
-webkit-animation: fadeIn 16s; -webkit-animation: fadeIn 16s;
@@ -3332,23 +3331,34 @@ Solution: stackoverflow.com/questions/34250282/flexbox-safari-bug-flex-wrap
} }
/*========================================= /*=========================================
18. ZOOM 18. Zoom: Index of slides (grid)
=========================================== */ =========================================== */
#webslides-zoomed.grid{
#webslides-zoomed.grid { -webkit-flex-direction: row;
background: #ccc; flex-direction: row;
} -webkit-justify-content: flex-start;
justify-content: flex-start;
#webslides-zoomed.grid > .column { -webkit-align-content: flex-start;
position: relative; align-content: flex-start;
-webkit-align-items: flex-start;
align-items: flex-start;
min-height: 100vh;
} }
#webslides-zoomed.grid > .column > .wrap-zoom { #webslides-zoomed.grid > .column > .wrap-zoom {
position: relative; position: relative;
background: #fff; -webkit-transition: .3s;
transition: .3s;
} }
#webslides-zoomed.grid > .column { #webslides-zoomed.grid > .column {
width: 25%; width: 25%;
-webkit-order: 0;
order: 0;
-webkit-flex: 0 1 auto;
flex: 0 1 auto;
-webkit-align-self: auto;
align-self: auto;
} }
#webslides-zoomed.grid > .column > .wrap-zoom > .slide { #webslides-zoomed.grid > .column > .wrap-zoom > .slide {
transform: scale(0.25) translate(-150%, -150vh); transform: scale(0.25) translate(-150%, -150vh);
display: flex !important; display: flex !important;
@@ -3357,6 +3367,7 @@ Solution: stackoverflow.com/questions/34250282/flexbox-safari-bug-flex-wrap
left: 0; left: 0;
clip: rect(0px auto auto 0); clip: rect(0px auto auto 0);
} }
#webslides-zoomed.grid > .column > .wrap-zoom > .zoom-layer { #webslides-zoomed.grid > .column > .wrap-zoom > .zoom-layer {
position: absolute; position: absolute;
background: transparent; background: transparent;
@@ -3364,3 +3375,14 @@ Solution: stackoverflow.com/questions/34250282/flexbox-safari-bug-flex-wrap
height: 100%; height: 100%;
cursor: pointer; cursor: pointer;
} }
#webslides-zoomed.grid > .column > .wrap-zoom:hover {
transform: scale(1.02);
}
.text-slide-number {
text-align: center;
display: inline-block;
/*border-radius: .3rem;
padding: 0 1.6rem;*/
margin: .8rem auto;
}

81
static/css/colors.css
View File

@@ -81,27 +81,27 @@ hr:after {
color: #333; color: #333;
} }
abbr, bbbr,
acronym { acronym {
border-bottom: 1px dotted #333; border-bottom: 1px dotted #333;
} }
mark, mark,
ins { ins {
background-color: rgba(221,238,255, 0.8); background-color: rgba(221,238,255, 0.8);
color: inherit; color: inherit;
} }
::-moz-selection { ::-moz-selection {
background-color: rgba(221,238,255, 0.8); background-color: rgba(221,238,255, 0.8);
} }
::-webkit-selection { ::-webkit-selection {
background-color: rgba(221,238,255, 0.8); background-color: rgba(221,238,255, 0.8);
} }
::selection { ::selection {
background-color: rgba(221,238,255, 0.8); background-color: rgba(221,238,255, 0.8);
} }
pre { pre {
@@ -119,7 +119,7 @@ code,[class*="bg-"] pre {
} }
.bg-white code{ .bg-white code{
background: rgba(0, 20, 80, 0.03); background: rgba(0, 20, 80, 0.03);
} }
/*================================================ /*================================================
Slides - Backgrounds <section class="bg-primary"> Slides - Backgrounds <section class="bg-primary">
@@ -218,7 +218,7 @@ Slides - Backgrounds <section class="bg-primary">
/*Covers/Longforms...*/ /*Covers/Longforms...*/
.bg-trans-gradient{ .bg-trans-gradient{
background: linear-gradient(to top, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%); background: linear-gradient(to top, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);
} }
/*Horizontal Gradient*/ /*Horizontal Gradient*/
@@ -250,9 +250,9 @@ Slides - Backgrounds <section class="bg-primary">
/*Gray Gradient (horizontal)*/ /*Gray Gradient (horizontal)*/
.bg-gradient-gray{ .bg-gradient-gray{
background: linear-gradient(90deg,#f7f9fb 0,#dee2e6 100%); background: linear-gradient(90deg,#f7f9fb 0,#dee2e6 100%);
color: #333; color: #333;
text-shadow: none; text-shadow: none;
} }
/*Border/Frame*/ /*Border/Frame*/
.frame { .frame {
@@ -261,7 +261,7 @@ Slides - Backgrounds <section class="bg-primary">
/*Layer/Box Shadow*/ /*Layer/Box Shadow*/
.shadow,.pre { .shadow,.pre {
position: relative; position: relative;
} }
.shadow:before,.shadow:after { .shadow:before,.shadow:after {
box-shadow: 0 16px 24px rgba(0, 20, 80, 0.3); box-shadow: 0 16px 24px rgba(0, 20, 80, 0.3);
@@ -274,13 +274,16 @@ TYPOGRAPHY
/* -- Horizontal separator -- */ /* -- Horizontal separator -- */
.text-separator:before { .text-separator:before {
background-color: rgba(170, 0, 0, 0.8); background-color: rgba(170, 0, 0, 0.8);
} }
/* -- Pull Quote (Right/Left) -- */ /* -- Pull Quote (Right/Left) -- */
[class*="text-pull-"] { [class*="text-pull-"] {
border-top: 4px solid rgba(0, 0, 0, 0.5); border-top: 4px solid rgba(0, 0, 0, 0.5);
}
img[class*="text-pull-"],figure[class*="text-pull-"] {
border-top: none;
} }
/* -- Context -- */ /* -- Context -- */
@@ -374,7 +377,7 @@ nav li.email a:hover {
} }
/*========================================= /*=========================================
Features & Clients List Features & Clients List
=========================================== */ =========================================== */
.features li,.clients li { .features li,.clients li {
@@ -387,7 +390,7 @@ Features & Clients List
} }
.features li:hover,.clients li:hover { .features li:hover,.clients li:hover {
box-shadow: 0 8px 16px rgba(0,20,80,.02),0 4px 16px rgba(0,0,0,.08); box-shadow: 0 8px 16px rgba(0,20,80,.02),0 4px 16px rgba(0,0,0,.08);
} }
/*.features li span,.features li svg{color: #44d;}*/ /*.features li span,.features li svg{color: #44d;}*/
@@ -410,7 +413,7 @@ Features & Clients List
} }
/*=========================================== /*===========================================
flexblock.steps flexblock.steps
============================================= */ ============================================= */
.steps li:nth-child(1) { .steps li:nth-child(1) {
@@ -519,7 +522,7 @@ Gallery li+.overlay+image
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.08); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.08);
} }
.gallery li footer { .gallery li footer {
border-top:1px solid rgba(0,20,80,0.1); border-top:1px solid rgba(0,20,80,0.1);
} }
.gallery li a { .gallery li a {
@@ -684,13 +687,13 @@ Cards
/*== Figure Background === */ /*== Figure Background === */
[class*="card-"][class*="bg-"] figure { [class*="card-"][class*="bg-"] figure {
background-color: rgba(0, 20, 80, 0.06); background-color: rgba(0, 20, 80, 0.06);
} }
/*== Ficaption Cards === */ /*== Ficaption Cards === */
[class*="card-"] figcaption, [class*="card"] figcaption,
[class*="card-"] figcaption a { [class*="card"] figcaption a {
color: #fff; color: #fff;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 100%); background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 100%);
} }
@@ -703,7 +706,7 @@ Cards
border-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.4) 50%, transparent) 1 100%; border-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.4) 50%, transparent) 1 100%;
-webkit-border-image: -webkit-linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.4) 50%, transparent) 1 100%; -webkit-border-image: -webkit-linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.4) 50%, transparent) 1 100%;
-moz-border-image: -moz-linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.4) 50%, transparent) 1 100%; -moz-border-image: -moz-linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.4) 50%, transparent) 1 100%;
} }
} }
@@ -737,7 +740,7 @@ tr:nth-child(even)>td:hover {
/*============================ /*============================
Browser (Screenshots) Browser (Screenshots)
============================== */ ============================== */
.browser { .browser {
@@ -783,10 +786,10 @@ input:focus::-moz-placeholder {
input:focus::-webkit-input-placeholder { input:focus::-webkit-input-placeholder {
color: #ddd; color: #ddd;
} }
a.button,[class*="badge-"], a.button,[class*="badge-"]
button[type="submit"], button[type="submit"],
input { input {
box-shadow: 0 10px 16px -8px rgba(0, 20, 80, 0.3); box-shadow: 0px 10px 16px -8px rgba(0, 20, 80, 0.3);
} }
button, button,
@@ -797,7 +800,7 @@ button[type="submit"],
input[type="submit"], input[type="submit"],
.button,.button:hover, .button,.button:hover,
button[type="submit"]:hover, button[type="submit"]:hover,
input[type="submit"]:hover input[type="submit"]:hover
{ {
border: 1px solid #44d; border: 1px solid #44d;
} }
@@ -810,7 +813,7 @@ input[type="submit"],
text-shadow: 0 1px 0 #123; text-shadow: 0 1px 0 #123;
} }
.button:active,button[type="submit"]:active,input[type="submit"]:active { .button:active,button[type="submit"]:active,input[type="submit"]:active {
background-color: #17d; background-color: #17d;
} }
.ghost,.ghost:hover {background: none;color: inherit;text-shadow: none;} .ghost,.ghost:hover {background: none;color: inherit;text-shadow: none;}
.bg-primary select, .bg-primary select,
@@ -818,7 +821,7 @@ input[type="submit"],
.bg-primary .button, .bg-primary .button,
.bg-primary button,.bg-primary button:hover, .bg-primary button,.bg-primary button:hover,
.bg-primary input, .bg-primary input,
[class*="bg-gradient-"] .button,[class*="bg-"] a.button.ghost [class*="bg-gradient-"] .button,[class*="bg-"] a.button.ghost
{ {
border-color: #fff; border-color: #fff;
} }
@@ -902,7 +905,6 @@ Slides (Counter/Arrows)
background-color: rgba(0, 0, 0, 0.9); background-color: rgba(0, 0, 0, 0.9);
} }
/*============================ /*============================
Footer Footer
============================== */ ============================== */
@@ -915,3 +917,24 @@ footer[role=contentinfo] {
background-color:rgba(255,255,255 , 0.3); background-color:rgba(255,255,255 , 0.3);
} }
*/ */
/*============================
Zoom: Index of slides
============================== */
#webslides-zoomed.grid {
background: #e3e5e9;
}
#webslides-zoomed.grid > .column > .wrap-zoom {
background: #fff;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.04);
}
#webslides-zoomed.grid > .column > .wrap-zoom:hover {
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.08);
}
.text-slide-number {
/*background-color: rgba(255, 255, 255, 0.1);*/
color: #456;
text-shadow: 0 1px 0 #fafafa;
}