mirror of
https://github.com/webslides/WebSlides.git
synced 2025-08-24 13:53:21 +02:00
index of slides: min 100vh, hover, numbers...
This commit is contained in:
José Luis Antúnez
committed by
GitHub
GitHub
parent
708d5bfda6
commit
34fdc56eac
@@ -50,10 +50,9 @@
|
||||
15. Longform Elements
|
||||
16. Safari Bug (flex-wrap)
|
||||
17. Print
|
||||
18. Zoom
|
||||
18. Zoom: Index of slides (grid)
|
||||
|
||||
----------------------------------------------------------------------------------- */
|
||||
|
||||
/*=========================================
|
||||
0. CSS Reset & Normalize
|
||||
=========================================== */
|
||||
@@ -1594,7 +1593,7 @@ padding: 2.4rem;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
/* hover/visibility */
|
||||
z-index: 3;
|
||||
z-index: 4;
|
||||
}
|
||||
#navigation {
|
||||
-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 {
|
||||
background: #ccc;
|
||||
}
|
||||
|
||||
#webslides-zoomed.grid > .column {
|
||||
position: relative;
|
||||
#webslides-zoomed.grid{
|
||||
-webkit-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-justify-content: flex-start;
|
||||
justify-content: flex-start;
|
||||
-webkit-align-content: flex-start;
|
||||
align-content: flex-start;
|
||||
-webkit-align-items: flex-start;
|
||||
align-items: flex-start;
|
||||
min-height: 100vh;
|
||||
}
|
||||
#webslides-zoomed.grid > .column > .wrap-zoom {
|
||||
position: relative;
|
||||
background: #fff;
|
||||
-webkit-transition: .3s;
|
||||
transition: .3s;
|
||||
}
|
||||
#webslides-zoomed.grid > .column {
|
||||
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 {
|
||||
transform: scale(0.25) translate(-150%, -150vh);
|
||||
display: flex !important;
|
||||
@@ -3357,6 +3367,7 @@ Solution: stackoverflow.com/questions/34250282/flexbox-safari-bug-flex-wrap
|
||||
left: 0;
|
||||
clip: rect(0px auto auto 0);
|
||||
}
|
||||
|
||||
#webslides-zoomed.grid > .column > .wrap-zoom > .zoom-layer {
|
||||
position: absolute;
|
||||
background: transparent;
|
||||
@@ -3364,3 +3375,14 @@ Solution: stackoverflow.com/questions/34250282/flexbox-safari-bug-flex-wrap
|
||||
height: 100%;
|
||||
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,27 +81,27 @@ hr:after {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
abbr,
|
||||
bbbr,
|
||||
acronym {
|
||||
border-bottom: 1px dotted #333;
|
||||
}
|
||||
|
||||
mark,
|
||||
ins {
|
||||
background-color: rgba(221,238,255, 0.8);
|
||||
color: inherit;
|
||||
background-color: rgba(221,238,255, 0.8);
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
::-moz-selection {
|
||||
background-color: rgba(221,238,255, 0.8);
|
||||
background-color: rgba(221,238,255, 0.8);
|
||||
}
|
||||
|
||||
::-webkit-selection {
|
||||
background-color: rgba(221,238,255, 0.8);
|
||||
background-color: rgba(221,238,255, 0.8);
|
||||
}
|
||||
|
||||
::selection {
|
||||
background-color: rgba(221,238,255, 0.8);
|
||||
background-color: rgba(221,238,255, 0.8);
|
||||
}
|
||||
|
||||
pre {
|
||||
@@ -119,7 +119,7 @@ code,[class*="bg-"] pre {
|
||||
}
|
||||
|
||||
.bg-white code{
|
||||
background: rgba(0, 20, 80, 0.03);
|
||||
background: rgba(0, 20, 80, 0.03);
|
||||
}
|
||||
/*================================================
|
||||
Slides - Backgrounds <section class="bg-primary">
|
||||
@@ -218,7 +218,7 @@ Slides - Backgrounds <section class="bg-primary">
|
||||
|
||||
/*Covers/Longforms...*/
|
||||
.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*/
|
||||
@@ -250,9 +250,9 @@ Slides - Backgrounds <section class="bg-primary">
|
||||
|
||||
/*Gray Gradient (horizontal)*/
|
||||
.bg-gradient-gray{
|
||||
background: linear-gradient(90deg,#f7f9fb 0,#dee2e6 100%);
|
||||
color: #333;
|
||||
text-shadow: none;
|
||||
background: linear-gradient(90deg,#f7f9fb 0,#dee2e6 100%);
|
||||
color: #333;
|
||||
text-shadow: none;
|
||||
}
|
||||
/*Border/Frame*/
|
||||
.frame {
|
||||
@@ -261,7 +261,7 @@ Slides - Backgrounds <section class="bg-primary">
|
||||
|
||||
/*Layer/Box Shadow*/
|
||||
.shadow,.pre {
|
||||
position: relative;
|
||||
position: relative;
|
||||
}
|
||||
.shadow:before,.shadow:after {
|
||||
box-shadow: 0 16px 24px rgba(0, 20, 80, 0.3);
|
||||
@@ -274,13 +274,16 @@ TYPOGRAPHY
|
||||
/* -- Horizontal separator -- */
|
||||
|
||||
.text-separator:before {
|
||||
background-color: rgba(170, 0, 0, 0.8);
|
||||
background-color: rgba(170, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
/* -- Pull Quote (Right/Left) -- */
|
||||
|
||||
[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 -- */
|
||||
|
||||
@@ -374,7 +377,7 @@ nav li.email a:hover {
|
||||
}
|
||||
|
||||
/*=========================================
|
||||
Features & Clients List
|
||||
Features & Clients List
|
||||
=========================================== */
|
||||
|
||||
.features li,.clients li {
|
||||
@@ -387,7 +390,7 @@ Features & Clients List
|
||||
}
|
||||
|
||||
.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;}*/
|
||||
|
||||
@@ -410,7 +413,7 @@ Features & Clients List
|
||||
}
|
||||
|
||||
/*===========================================
|
||||
flexblock.steps
|
||||
flexblock.steps
|
||||
============================================= */
|
||||
|
||||
.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);
|
||||
}
|
||||
.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 {
|
||||
@@ -684,13 +687,13 @@ Cards
|
||||
/*== Figure Background === */
|
||||
|
||||
[class*="card-"][class*="bg-"] figure {
|
||||
background-color: rgba(0, 20, 80, 0.06);
|
||||
background-color: rgba(0, 20, 80, 0.06);
|
||||
}
|
||||
|
||||
/*== Ficaption Cards === */
|
||||
|
||||
[class*="card-"] figcaption,
|
||||
[class*="card-"] figcaption a {
|
||||
[class*="card"] figcaption,
|
||||
[class*="card"] figcaption a {
|
||||
color: #fff;
|
||||
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%;
|
||||
-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%;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@@ -737,7 +740,7 @@ tr:nth-child(even)>td:hover {
|
||||
|
||||
|
||||
/*============================
|
||||
Browser (Screenshots)
|
||||
Browser (Screenshots)
|
||||
============================== */
|
||||
|
||||
.browser {
|
||||
@@ -783,10 +786,10 @@ input:focus::-moz-placeholder {
|
||||
input:focus::-webkit-input-placeholder {
|
||||
color: #ddd;
|
||||
}
|
||||
a.button,[class*="badge-"],
|
||||
a.button,[class*="badge-"]
|
||||
button[type="submit"],
|
||||
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,
|
||||
@@ -797,7 +800,7 @@ button[type="submit"],
|
||||
input[type="submit"],
|
||||
.button,.button:hover,
|
||||
button[type="submit"]:hover,
|
||||
input[type="submit"]:hover
|
||||
input[type="submit"]:hover
|
||||
{
|
||||
border: 1px solid #44d;
|
||||
}
|
||||
@@ -810,7 +813,7 @@ input[type="submit"],
|
||||
text-shadow: 0 1px 0 #123;
|
||||
}
|
||||
.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;}
|
||||
.bg-primary select,
|
||||
@@ -818,7 +821,7 @@ input[type="submit"],
|
||||
.bg-primary .button,
|
||||
.bg-primary button,.bg-primary button:hover,
|
||||
.bg-primary input,
|
||||
[class*="bg-gradient-"] .button,[class*="bg-"] a.button.ghost
|
||||
[class*="bg-gradient-"] .button,[class*="bg-"] a.button.ghost
|
||||
{
|
||||
border-color: #fff;
|
||||
}
|
||||
@@ -902,7 +905,6 @@ Slides (Counter/Arrows)
|
||||
background-color: rgba(0, 0, 0, 0.9);
|
||||
}
|
||||
|
||||
|
||||
/*============================
|
||||
Footer
|
||||
============================== */
|
||||
@@ -915,3 +917,24 @@ footer[role=contentinfo] {
|
||||
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;
|
||||
}
|
||||
Reference in New Issue
Block a user