diff options
1 files changed, 58 insertions, 19 deletions
| -rw-r--r-- | docs/css/spectre-exp.css | 77 |
diff --git a/docs/css/spectre-exp.css b/docs/css/spectre-exp.css index 7fecc56..f84744f 100644 --- a/docs/css/spectre-exp.css +++ b/docs/css/spectre-exp.css @@ -394,10 +394,10 @@ width: auto; } .parallax .parallax-content { - box-shadow: 0 2.5rem 5rem rgba(0, 0, 0, .45); + box-shadow: 0 2rem 4.2rem rgba(69, 77, 93, .3); height: auto; - -webkit-transform: perspective(50rem); - transform: perspective(50rem); + -webkit-transform: perspective(100rem); + transform: perspective(100rem); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; transition: all .4s ease; @@ -412,66 +412,105 @@ top: 0; width: 100%; } +.parallax .parallax-front { + -webkit-align-items: center; + align-items: center; + color: #fff; + display: flex; + display: -ms-flexbox; + display: -webkit-flex; + -ms-flex-align: center; + -ms-flex-pack: center; + height: 100%; + -webkit-justify-content: center; + justify-content: center; + left: 0; + position: absolute; + text-align: center; + text-shadow: 0 0 3rem rgba(69, 77, 93, .95); + top: 0; + -webkit-transform: translateZ(10rem); + transform: translateZ(10rem); + transition: all .4s ease; + width: 100%; + z-index: 1; +} .parallax .parallax-top-left { height: 50%; left: 0; position: absolute; top: 0; width: 50%; - z-index: 1; + z-index: 300; } .parallax .parallax-top-left:hover ~ .parallax-content { - -webkit-transform: perspective(50rem) rotateX(3deg) rotateY(-3deg); - transform: perspective(50rem) rotateX(3deg) rotateY(-3deg); + -webkit-transform: perspective(100rem) rotateX(-3deg) rotateY(3deg); + transform: perspective(100rem) rotateX(-3deg) rotateY(3deg); } .parallax .parallax-top-left:hover ~ .parallax-content::before { background: linear-gradient(135deg, rgba(255, 255, 255, .25) 0%, rgba(255, 255, 255, 0) 50%); } +.parallax .parallax-top-left:hover ~ .parallax-content .parallax-front { + -webkit-transform: translate3d(-.65rem, -.65rem, 10rem); + transform: translate3d(-.65rem, -.65rem, 10rem); +} .parallax .parallax-top-right { height: 50%; position: absolute; right: 0; top: 0; width: 50%; - z-index: 1; + z-index: 300; } .parallax .parallax-top-right:hover ~ .parallax-content { - -webkit-transform: perspective(50rem) rotateX(3deg) rotateY(3deg); - transform: perspective(50rem) rotateX(3deg) rotateY(3deg); + -webkit-transform: perspective(100rem) rotateX(-3deg) rotateY(-3deg); + transform: perspective(100rem) rotateX(-3deg) rotateY(-3deg); } .parallax .parallax-top-right:hover ~ .parallax-content::before { background: linear-gradient(-135deg, rgba(255, 255, 255, .25) 0%, rgba(255, 255, 255, 0) 50%); } +.parallax .parallax-top-right:hover ~ .parallax-content .parallax-front { + -webkit-transform: translate3d(.65rem, -.65rem, 10rem); + transform: translate3d(.65rem, -.65rem, 10rem); +} .parallax .parallax-bottom-left { bottom: 0; height: 50%; left: 0; position: absolute; width: 50%; - z-index: 1; + z-index: 300; } .parallax .parallax-bottom-left:hover ~ .parallax-content { - -webkit-transform: perspective(50rem) rotateX(-3deg) rotateY(-3deg); - transform: perspective(50rem) rotateX(-3deg) rotateY(-3deg); + -webkit-transform: perspective(100rem) rotateX(3deg) rotateY(3deg); + transform: perspective(100rem) rotateX(3deg) rotateY(3deg); } .parallax .parallax-bottom-left:hover ~ .parallax-content::before { background: linear-gradient(45deg, rgba(255, 255, 255, .25) 0%, rgba(255, 255, 255, 0) 50%); } +.parallax .parallax-bottom-left:hover ~ .parallax-content .parallax-front { + -webkit-transform: translate3d(-.65rem, .65rem, 10rem); + transform: translate3d(-.65rem, .65rem, 10rem); +} .parallax .parallax-bottom-right { bottom: 0; height: 50%; position: absolute; right: 0; width: 50%; - z-index: 1; + z-index: 300; } .parallax .parallax-bottom-right:hover ~ .parallax-content { - -webkit-transform: perspective(50rem) rotateX(-3deg) rotateY(3deg); - transform: perspective(50rem) rotateX(-3deg) rotateY(3deg); + -webkit-transform: perspective(100rem) rotateX(3deg) rotateY(-3deg); + transform: perspective(100rem) rotateX(3deg) rotateY(-3deg); } .parallax .parallax-bottom-right:hover ~ .parallax-content::before { background: linear-gradient(-45deg, rgba(255, 255, 255, .25) 0%, rgba(255, 255, 255, 0) 50%); } +.parallax .parallax-bottom-right:hover ~ .parallax-content .parallax-front { + -webkit-transform: translate3d(.65rem, .65rem, 10rem); + transform: translate3d(.65rem, .65rem, 10rem); +} .progress { -webkit-appearance: none; -moz-appearance: none; @@ -535,7 +574,7 @@ border: 0; border-radius: 50%; height: 1.2rem; - margin-top: -.4rem; + margin-top: -.5rem; transition: transform .2s ease, -webkit-transform .2s ease; transition: transform .2s ease; transition: -webkit-transform .2s ease; @@ -592,19 +631,19 @@ .slider::-webkit-slider-runnable-track { background: #f0f1f4; border-radius: .2rem; - height: .4rem; + height: .2rem; width: 100%; } .slider::-moz-range-track { background: #f0f1f4; border-radius: .2rem; - height: .4rem; + height: .2rem; width: 100%; } .slider::-ms-track { background: #f0f1f4; border-radius: .2rem; - height: .4rem; + height: .2rem; width: 100%; } .slider::-ms-fill-lower { |