diff options
Diffstat (limited to 'static/css/slider.css')
| -rw-r--r-- | static/css/slider.css | 496 |
1 files changed, 496 insertions, 0 deletions
diff --git a/static/css/slider.css b/static/css/slider.css new file mode 100644 index 0000000..d7c98a4 --- /dev/null +++ b/static/css/slider.css @@ -0,0 +1,496 @@ +/* Copyright © 2022 Codeconvey + * + * PLEASE READ THIS POLICY CAREFULLY. BY ACCESSING THIS WEBSITE YOU + * AGREE TO BE BOUND BY THE TERMS AND CONDITIONS BELOW. + * THESE TERMS AND CONDITIONS ARE SUBJECT TO CHANGE WITHOUT NOTICE, + * FROM TIME TO TIME IN OUR SOLE DISCRETION. IF YOU DO NOT + * AGREE WITH THESE TERMS AND CONDITIONS, PLEASE DO NOT + * ACCESS THIS WEBSITE. + * + * Permission is hereby granted, free of charge, to any person obtaining + * a copy of this software and associated documentation files (the “Software”), + * to deal in the Software without restriction, including without limitation the + * rights to use, copy, modify, merge, publish, distribute, sublicense, + * and/or sell copies of the Software, and to permit persons to whom the Software + * is furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included + * in all copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, + * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF + * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. + * IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, + * DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR + * OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR + * THE USE OR OTHER DEALINGS IN THE SOFTWARE. + */ + +.csslider { + display: inline-block; + text-align: left; + position: relative; + margin-bottom: 22px; +} + +.csslider>input { + display: none; +} + +.csslider>input:nth-of-type(10):checked~ul li:first-of-type { + margin-left: -900.6%; +} + +.csslider>input:nth-of-type(9):checked~ul li:first-of-type { + margin-left: -800.4%; +} + +.csslider>input:nth-of-type(8):checked~ul li:first-of-type { + margin-left: -700.2%; +} + +.csslider>input:nth-of-type(7):checked~ul li:first-of-type { + margin-left: -601%; +} + +.csslider>input:nth-of-type(6):checked~ul li:first-of-type { + margin-left: -500.8%; +} + +.csslider>input:nth-of-type(5):checked~ul li:first-of-type { + margin-left: -400.6%; +} + +.csslider>input:nth-of-type(4):checked~ul li:first-of-type { + margin-left: -300.4%; +} + +.csslider>input:nth-of-type(3):checked~ul li:first-of-type { + margin-left: -200.2%; +} + +.csslider>input:nth-of-type(2):checked~ul li:first-of-type { + margin-left: -100.1%; +} + +.csslider>input:nth-of-type(1):checked~ul li:first-of-type { + margin-left: 0%; +} + +@media (max-width: 992px) { + .csslider>ul { + max-width: 100%; + } +} + +@media (min-width: 992px) { + .csslider>ul { + max-width: 80%; + } +} + +.csslider>ul { + position: relative; + /*height: 420px;*/ + z-index: 1; + font-size: 0; + line-height: 0; + background-color: #3A3A3A; + border: 2px solid #3A3A3A; + border-radius: 4px; + margin: 0 auto; + padding: 0; + overflow: hidden; + white-space: nowrap; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +.csslider>ul>li { + position: relative; + display: inline-block; + width: 100%; + height: 100%; + overflow: hidden; + font-size: 15px; + font-size: initial; + line-height: normal; + -moz-transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1); + -o-transition: all 0.5s ease-out; + -webkit-transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1); + transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1); + vertical-align: top; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + white-space: normal; +} + +.csslider>ul>li.scrollable { + overflow-y: scroll; +} + +.csslider>.navigation { + position: absolute; + bottom: 30px; + left: 50%; + z-index: 10; + margin-bottom: -10px; + font-size: 0; + line-height: 0; + text-align: center; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.csslider>.navigation>div { + margin-left: -100%; +} + +.csslider>.navigation label { + position: relative; + display: inline-block; + cursor: pointer; + border-radius: 50%; + margin: 0 4px; + padding: 4px; + background: transparent none repeat scroll 0 0; +} + +.csslider>.navigation label:hover:after { + opacity: 1; +} + +.csslider>.navigation label:after { + content: ''; + position: absolute; + left: 50%; + top: 50%; + margin-left: -6px; + margin-top: -6px; + background: transparent none repeat scroll 0 0; + border-radius: 50%; + padding: 6px; + opacity: 0; +} + +.csslider>.arrows { + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.csslider.inside .navigation { + bottom: 10px; + margin-bottom: 10px; +} + +.csslider.inside .navigation label { + border: 1px solid #7e7e7e; +} + +.csslider>input:nth-of-type(1):checked~.navigation label:nth-of-type(1):after, +.csslider>input:nth-of-type(2):checked~.navigation label:nth-of-type(2):after, +.csslider>input:nth-of-type(3):checked~.navigation label:nth-of-type(3):after, +.csslider>input:nth-of-type(4):checked~.navigation label:nth-of-type(4):after, +.csslider>input:nth-of-type(5):checked~.navigation label:nth-of-type(5):after, +.csslider>input:nth-of-type(6):checked~.navigation label:nth-of-type(6):after, +.csslider>input:nth-of-type(7):checked~.navigation label:nth-of-type(7):after, +.csslider>input:nth-of-type(8):checked~.navigation label:nth-of-type(8):after, +.csslider>input:nth-of-type(9):checked~.navigation label:nth-of-type(9):after, +.csslider>input:nth-of-type(10):checked~.navigation label:nth-of-type(10):after, +.csslider>input:nth-of-type(11):checked~.navigation label:nth-of-type(11):after { + opacity: 1; +} + +.csslider>.arrows { + position: absolute; + left: -16px; + top: 50%; + width: 100%; + height: 26px; + padding: 0 16px; + z-index: 0; + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; + box-sizing: content-box; +} + +.csslider>.arrows label { + display: none; + position: absolute; + top: -50%; + padding: 13px; + box-shadow: inset 2px -2px 0 1px #f0f0f0; + cursor: pointer; + -moz-transition: box-shadow 0.15s, margin 0.15s; + -o-transition: box-shadow 0.15s, margin 0.15s; + -webkit-transition: box-shadow 0.15s, margin 0.15s; + transition: box-shadow 0.15s, margin 0.15s; +} + +.csslider>.arrows label:hover { + box-shadow: inset 3px -3px 0 2px #5ac3ab; + margin: 0 0px; +} + +.csslider>.arrows label:before { + content: ''; + position: absolute; + top: -100%; + left: -100%; + height: 300%; + width: 300%; +} + +.csslider.infinity>input:first-of-type:checked~.arrows label.goto-last, +.csslider>input:nth-of-type(1):checked~.arrows>label:nth-of-type(0), +.csslider>input:nth-of-type(2):checked~.arrows>label:nth-of-type(1), +.csslider>input:nth-of-type(3):checked~.arrows>label:nth-of-type(2), +.csslider>input:nth-of-type(4):checked~.arrows>label:nth-of-type(3), +.csslider>input:nth-of-type(5):checked~.arrows>label:nth-of-type(4), +.csslider>input:nth-of-type(6):checked~.arrows>label:nth-of-type(5), +.csslider>input:nth-of-type(7):checked~.arrows>label:nth-of-type(6), +.csslider>input:nth-of-type(8):checked~.arrows>label:nth-of-type(7), +.csslider>input:nth-of-type(9):checked~.arrows>label:nth-of-type(8), +.csslider>input:nth-of-type(10):checked~.arrows>label:nth-of-type(9), +.csslider>input:nth-of-type(11):checked~.arrows>label:nth-of-type(10) { + display: block; + left: 0; + right: auto; + -moz-transform: rotate(45deg); + -ms-transform: rotate(45deg); + -o-transform: rotate(45deg); + -webkit-transform: rotate(45deg); + transform: rotate(45deg); +} + +.csslider.infinity>input:last-of-type:checked~.arrows label.goto-first, +.csslider>input:nth-of-type(1):checked~.arrows>label:nth-of-type(2), +.csslider>input:nth-of-type(2):checked~.arrows>label:nth-of-type(3), +.csslider>input:nth-of-type(3):checked~.arrows>label:nth-of-type(4), +.csslider>input:nth-of-type(4):checked~.arrows>label:nth-of-type(5), +.csslider>input:nth-of-type(5):checked~.arrows>label:nth-of-type(6), +.csslider>input:nth-of-type(6):checked~.arrows>label:nth-of-type(7), +.csslider>input:nth-of-type(7):checked~.arrows>label:nth-of-type(8), +.csslider>input:nth-of-type(8):checked~.arrows>label:nth-of-type(9), +.csslider>input:nth-of-type(9):checked~.arrows>label:nth-of-type(10), +.csslider>input:nth-of-type(10):checked~.arrows>label:nth-of-type(11), +.csslider>input:nth-of-type(11):checked~.arrows>label:nth-of-type(12) { + display: block; + right: 0; + left: auto; + -moz-transform: rotate(225deg); + -ms-transform: rotate(225deg); + -o-transform: rotate(225deg); + -webkit-transform: rotate(225deg); + transform: rotate(225deg); +} + +.slide { + max-width: 100%; + max-height: 100%; +} + +/*#region MODULES */ +/*#endregion */ +/*___________________________________ LAYOUT ___________________________________ */ +* { + margin: 0; + padding: 0; +} + +::-webkit-scrollbar { + width: 2px; + background: rgba(255, 255, 255, 0.1); +} + +::-webkit-scrollbar-track { + background: none; +} + +::-webkit-scrollbar-thumb { + background: rgba(74, 168, 0, 0.6); +} + +ul, +ol { + padding-left: 40px; +} + +html, +body { + + + text-align: center; + /*font: 400 100% 'Raleway', 'Lato';*/ + background-color: #282828; + color: #CCC; +} + +h1 { + font-weight: 700; + font-size: 310%; +} + +#slider1>h2 { + font-weight: 400; + font-size: 120%; + color: #5ac3ab; +} + +#slider1 { + margin: 20px; + font-family: 'Lato'; +} +/* +#slider1>ul>li:nth-of-type(3) { + background: url(https://raw.github.com/drygiel/csslider/master/examples/themes/fruit.jpg); +} +*/ +#slider1>input:nth-of-type(3):checked~ul #bg { + width: 80%; + padding: 22px; + -moz-transition: .5s .5s; + -o-transition: .5s .5s; + -webkit-transition: .5s .5s; + transition: .5s .5s; +} + +#slider1>input:nth-of-type(3):checked~ul #bg div { + -moz-transform: translate(0); + -ms-transform: translate(0); + -o-transform: translate(0); + -webkit-transform: translate(0); + transform: translate(0); + -moz-transition: .5s .9s; + -o-transition: .5s .9s; + -webkit-transition: .5s .9s; + transition: .5s .9s; +} + + +#bg { + color: #000; + padding: 22px 0; + position: absolute; + left: 0; + top: 16%; + height: 20%; + width: 0; + z-index: 10; + overflow: hidden; +} + +#bg:before { + content: ''; + position: absolute; + left: -1px; + top: 1px; + height: 100%; + width: 100%; + z-index: -1; + /*background: url(https://raw.github.com/drygiel/csslider/master/examples/themes/fruit.jpg) 1px 23%;*/ + -webkit-filter: blur(7px); +} + +#bg:after { + content: ''; + position: absolute; + left: 0; + top: 0; + height: 100%; + width: 100%; + z-index: 20; + background: rgba(0, 0, 0, 0.35); + pointer-events: none; +} + +#bg div { + -moz-transform: translate(120%); + -ms-transform: translate(120%); + -o-transform: translate(120%); + -webkit-transform: translate(120%); + transform: translate(120%); +} + +.scrollable p { + padding: 30px; + text-align: justify; + line-height: 140%; + font-size: 120%; +} + +#center { + text-align: center; + margin-top: 25%; +} + +#center a { + text-decoration: none; + text-transform: uppercase; + letter-spacing: 2px; + font-variant: small-caps; +} + +/*___________________________________ LINK ___________________________________ */ +a.nice-link { + position: relative; + color: #5ac3ab; +} + +h1 a.nice-link:after { + border-bottom: 1px solid #a5ff0e; +} + +a.nice-link:after { + text-align: justify; + display: inline-block; + content: attr(data-text); + position: absolute; + left: 0; + top: 0; + white-space: nowrap; + overflow: hidden; + color: #a5ff0e; + min-height: 100%; + width: 0; + max-width: 100%; + background: #3A3A3A; + -moz-transition: .3s; + -o-transition: .3s; + -webkit-transition: .3s; + transition: .3s; +} + +a.nice-link:hover { + color: #5ac3ab; +} + +a.nice-link:hover:after { + width: 100%; +} + +/*___________________________________ SIGN ___________________________________ */ +#dex-sign { + width: 255px; + height: 84px; + position: absolute; + left: 33%; + top: 45%; + opacity: .7; + /*background: url(http://www.drygiel.com/projects/sign/frames-255-white.png) 0 0 no-repeat;*/ +} + +#dex-sign:hover { + opacity: 1; + -webkit-filter: invert(30%) brightness(80%) sepia(100%) contrast(110%) saturate(953%) hue-rotate(45deg); +} |