Difference between revisions of "Template:Shanghaitech/css"
Wweeiiyyiinn (Talk | contribs) |
Wweeiiyyiinn (Talk | contribs) |
||
| Line 1: | Line 1: | ||
<html><style type="text/css"> | <html><style type="text/css"> | ||
| − | #main-content-wrapper{width:100%;max-width:1200px;height:auto;padding-bottom:480px;padding-top:150px;margin:0px auto;z-index:-1}#content #HQ_page #mw-content-text #content-block{max-width:900px;margin:0px;padding:50px;background:rgba(241,241,222,0.47)}#content #HQ_page #mw-content-text #content-block::after{height:480px;width:100%;content:''}#content #HQ_page #mw-content-text #content-block a{padding-right:0px}#content #HQ_page #mw-content-text #content-block h1{text-align:center;font-size:3em;margin-bottom:1em;line-height:1em}#content #HQ_page #mw-content-text #content-block h2{margin-top:1em;margin-bottom:1em}#content #HQ_page #mw-content-text #content-block p{text-indent:2em;font-family:'Roboto', "Arial", Helvetica, sans-serif;font-size:1.3em}#content #HQ_page #mw-content-text #content-block.no-indent p{text-indent:0}#content #HQ_page #mw-content-text #content-block img{max-width:100%;height:auto}#content #HQ_page #mw-content-text #content-block .image-text-container{position:relative}#content #HQ_page #mw-content-text #content-block .image-text-container p{text-indent:0px}#content #HQ_page #mw-content-text #content-block .image-text-container.image-text-centered p{text-align:center;margin:20px 30%}#content #HQ_page #mw-content-text #content-block .image-text-container.image-text-centered .image-container{margin-left:20%;margin-right:20%}#content #HQ_page #mw-content-text #content-block .image-text-container.image-text-centered .image-container img{width:100%;height:auto}#content #HQ_page #mw-content-text #content-block .image-text-container.image-left .image-left{width:50%;height:auto;vertical-align:middle}#content #HQ_page #mw-content-text #content-block .image-text-container.image-left span.text-wrapper{display:inline-block;vertical-align:middle;width:40%;padding:0 4%;position:relative}#content #HQ_page #mw-content-text #content-block .two-columns-img-text{width:100% | + | #main-content-wrapper{width:100%;max-width:1200px;height:auto;padding-bottom:480px;padding-top:150px;margin:0px auto;z-index:-1}#content #HQ_page #mw-content-text #content-block{max-width:900px;margin:0px;padding:50px;background:rgba(241,241,222,0.47)}#content #HQ_page #mw-content-text #content-block::after{height:480px;width:100%;content:''}#content #HQ_page #mw-content-text #content-block a{padding-right:0px}#content #HQ_page #mw-content-text #content-block h1{text-align:center;font-size:3em;margin-bottom:1em;line-height:1em;color:#0a190f}#content #HQ_page #mw-content-text #content-block h2{margin-top:1em;margin-bottom:1em}#content #HQ_page #mw-content-text #content-block p{text-indent:2em;font-family:'Roboto', "Arial", Helvetica, sans-serif;font-size:1.3em}#content #HQ_page #mw-content-text #content-block.no-indent p{text-indent:0}#content #HQ_page #mw-content-text #content-block img{max-width:100%;height:auto}#content #HQ_page #mw-content-text #content-block .image-text-container{position:relative}#content #HQ_page #mw-content-text #content-block .image-text-container p{text-indent:0px}#content #HQ_page #mw-content-text #content-block .image-text-container.image-text-centered p{text-align:center;margin:20px 30%}#content #HQ_page #mw-content-text #content-block .image-text-container.image-text-centered .image-container{margin-left:20%;margin-right:20%}#content #HQ_page #mw-content-text #content-block .image-text-container.image-text-centered .image-container img{width:100%;height:auto}#content #HQ_page #mw-content-text #content-block .image-text-container.image-left .image-left{width:50%;height:auto;vertical-align:middle}#content #HQ_page #mw-content-text #content-block .image-text-container.image-left span.text-wrapper{display:inline-block;vertical-align:middle;width:40%;padding:0 4%;position:relative}#content #HQ_page #mw-content-text #content-block .two-columns-img-text{width:100%}#content #HQ_page #mw-content-text #content-block .two-columns-img-text p{text-indent:0px;text-align:center}#content #HQ_page #mw-content-text #content-block .two-columns-img-text img{width:100%;height:auto}#content #HQ_page #mw-content-text #content-block .two-columns-img-text span{position:relative;display:inline-block;width:45%;padding:0px 2%} |
@font-face{font-family:'icomoon';src:url("https://static.igem.org/mediawiki/2017/c/c1/T--Shanghaitech--Font-wy-icomoon-eot.eot?w4nvbu");src:url("https://static.igem.org/mediawiki/2017/c/c1/T--Shanghaitech--Font-wy-icomoon-eot.eot?w4nvbu#iefix") format("embedded-opentype"),url("fonts/icomoon.ttf?w4nvbu") format("truetype"),url("https://static.igem.org/mediawiki/2017/a/a7/T--Shanghaitech--Font-wy-icomoon.woff?w4nvbu") format("woff"),url("https://static.igem.org/mediawiki/2017/f/fe/T--Shanghaitech--Font-wy-icomoon-svg.svg?w4nvbu#icomoon") format("svg");font-weight:normal;font-style:normal}[class^="icon-"]{font-family:'icomoon' !important;speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-bilibili:before{content:"\e902";color:#515151}.icon-youtube:before{content:"\e900"}.icon-wechat-1:before{content:"\e901"}.icon-office:before{content:"\e903"}.icon-facebook:before{content:"\ea90"}div#footer-container #footer-left #footer-icons>a{-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24)}div#footer-container #footer-left #footer-icons>a:hover{-webkit-box-shadow:0 2px 4px rgba(0,0,0,0.14),0 2px 4px rgba(0,0,0,0.235);box-shadow:0 2px 4px rgba(0,0,0,0.14),0 2px 4px rgba(0,0,0,0.235)}#bottom-footer{margin:80px 0px 0px 0px;width:100%;height:330px;position:absolute;bottom:-18px;z-index:0}#bottom-footer #footer-bg-img,#bottom-footer #footer-bg-color{width:100%;z-index:-2}#bottom-footer #footer-bg-img{padding-bottom:19.87889%;bottom:110px;background:url("https://static.igem.org/mediawiki/2017/6/69/T--Shanghaitech--UItest-wy-footer-bg.png") no-repeat 50% 0%/cover;opacity:0.8}@media screen and (max-width: 1007px){#bottom-footer #footer-bg-img{padding:0px;height:200px;background-size:cover}}#bottom-footer #footer-bg-color{z-index:-1;height:134px;bottom:-20px;background:#969593}div#footer-container{height:200px;bottom:30px;width:100%;position:absolute}div#footer-container .footer-part{margin:0px;padding:0px;height:100%;float:left;position:relative;color:white}div#footer-container .footer-part p{margin:0 0 30px 10%;line-height:1.5em}div#footer-container .footer-part h2{color:white}div#footer-container #footer-left{width:30%;padding-left:5%}div#footer-container #footer-left #footer-logo{width:auto;height:150px;max-width:100%}div#footer-container #footer-left #footer-icons>a{text-decoration:none;font-size:25px;width:2em;text-align:center;margin:5px;padding:0px;-webkit-transition:-webkit-transform 0.16s;transition:-webkit-transform 0.16s;transition:transform 0.16s;transition:transform 0.16s, -webkit-transform 0.16s;background:rgba(120,118,118,0.8);display:inline-block}div#footer-container #footer-left #footer-icons>a span::before{font-size:25px;line-height:2em;color:white}div#footer-container #footer-middle{width:40%}div#footer-container #footer-middle img{width:40%;margin:0 auto}div#footer-container #footer-right{width:25%}div#footer-container #footer-right #footer-addr{margin-right:10%}div#footer-container #footer-right #footer-addr::before{position:absolute;left:-1em} | @font-face{font-family:'icomoon';src:url("https://static.igem.org/mediawiki/2017/c/c1/T--Shanghaitech--Font-wy-icomoon-eot.eot?w4nvbu");src:url("https://static.igem.org/mediawiki/2017/c/c1/T--Shanghaitech--Font-wy-icomoon-eot.eot?w4nvbu#iefix") format("embedded-opentype"),url("fonts/icomoon.ttf?w4nvbu") format("truetype"),url("https://static.igem.org/mediawiki/2017/a/a7/T--Shanghaitech--Font-wy-icomoon.woff?w4nvbu") format("woff"),url("https://static.igem.org/mediawiki/2017/f/fe/T--Shanghaitech--Font-wy-icomoon-svg.svg?w4nvbu#icomoon") format("svg");font-weight:normal;font-style:normal}[class^="icon-"]{font-family:'icomoon' !important;speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-bilibili:before{content:"\e902";color:#515151}.icon-youtube:before{content:"\e900"}.icon-wechat-1:before{content:"\e901"}.icon-office:before{content:"\e903"}.icon-facebook:before{content:"\ea90"}div#footer-container #footer-left #footer-icons>a{-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24)}div#footer-container #footer-left #footer-icons>a:hover{-webkit-box-shadow:0 2px 4px rgba(0,0,0,0.14),0 2px 4px rgba(0,0,0,0.235);box-shadow:0 2px 4px rgba(0,0,0,0.14),0 2px 4px rgba(0,0,0,0.235)}#bottom-footer{margin:80px 0px 0px 0px;width:100%;height:330px;position:absolute;bottom:-18px;z-index:0}#bottom-footer #footer-bg-img,#bottom-footer #footer-bg-color{width:100%;z-index:-2}#bottom-footer #footer-bg-img{padding-bottom:19.87889%;bottom:110px;background:url("https://static.igem.org/mediawiki/2017/6/69/T--Shanghaitech--UItest-wy-footer-bg.png") no-repeat 50% 0%/cover;opacity:0.8}@media screen and (max-width: 1007px){#bottom-footer #footer-bg-img{padding:0px;height:200px;background-size:cover}}#bottom-footer #footer-bg-color{z-index:-1;height:134px;bottom:-20px;background:#969593}div#footer-container{height:200px;bottom:30px;width:100%;position:absolute}div#footer-container .footer-part{margin:0px;padding:0px;height:100%;float:left;position:relative;color:white}div#footer-container .footer-part p{margin:0 0 30px 10%;line-height:1.5em}div#footer-container .footer-part h2{color:white}div#footer-container #footer-left{width:30%;padding-left:5%}div#footer-container #footer-left #footer-logo{width:auto;height:150px;max-width:100%}div#footer-container #footer-left #footer-icons>a{text-decoration:none;font-size:25px;width:2em;text-align:center;margin:5px;padding:0px;-webkit-transition:-webkit-transform 0.16s;transition:-webkit-transform 0.16s;transition:transform 0.16s;transition:transform 0.16s, -webkit-transform 0.16s;background:rgba(120,118,118,0.8);display:inline-block}div#footer-container #footer-left #footer-icons>a span::before{font-size:25px;line-height:2em;color:white}div#footer-container #footer-middle{width:40%}div#footer-container #footer-middle img{width:40%;margin:0 auto}div#footer-container #footer-right{width:25%}div#footer-container #footer-right #footer-addr{margin-right:10%}div#footer-container #footer-right #footer-addr::before{position:absolute;left:-1em} | ||
body{margin:0px;padding:0px;background:#f8f5ec}header,footer{display:block;position:relative;margin:0px;padding:0px}.background{position:absolute}.container{position:relative}.normalized{margin:0px;padding:0px;list-style-type:none;list-style-image:none}.normalized ul{list-style-type:none;list-style-image:none}.horizontal>li{float:left}.link-btn{text-decoration:none;color:black;display:block}#top-header{height:100px;position:fixed;width:100%;top:18px;z-index:999}#header-container{height:100px;position:absolute;width:100%}#header-bg{background:url("https://static.igem.org/mediawiki/2017/8/8d/T--Shanghaitech--UItest-wy-header-bg.png");background-size:contain;background-repeat:repeat-x;height:120%;width:100%;z-index:-1}#bg-casual{position:absolute;background:url("https://static.igem.org/mediawiki/2017/b/b3/T--Shanghaitech--UItest-wy-casual.png");background-size:contain;background-repeat:no-repeat;top:100px;left:-8px;height:194px;width:100%;z-index:-2;opacity:.5}#header-bg-duplicate{background:url("https://static.igem.org/mediawiki/2017/8/8d/T--Shanghaitech--UItest-wy-header-bg.png");background-size:contain;background-repeat:repeat-x;height:120px;width:100%;z-index:-2;position:absolute;top:0px;opacity:.5}#logo-container{float:left;height:100px;top:0px}.img-contain{max-height:100%;max-width:100%;height:100px;width:auto}#menu-bar{top:0px;padding:0px;margin:auto;margin-right:100px;width:1201.5px;height:100px}#menu-bar>li{margin:0px;padding:auto;width:150px;text-align:center}#menu-bar ul{margin:0px;padding:0px;list-style-type:none}#menu-bar a{text-decoration:none;color:black;display:block}#menu-bar>li>a{height:100px;text-align:center;vertical-align:middle;font-size:large;position:relative}#menu-bar>li>a>span{position:absolute;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);font-weight:bolder;text-shadow:1px 1px 6px rgba(255,255,255,0.8)}#menu-bar>li:hover>a{background:rgba(244,230,207,0.8)}#menu-bar>li:hover>a>span{text-shadow:none}#menu-bar>li:hover>a:hover{background:rgba(251,198,168,0.8)}.dropdown-list{display:none}.dropdown-list a{padding:15px 8px;background:rgba(244,230,207,0.9)}.dropdown-list a:hover{background:#fbc6a8}.dropdown-list li{margin:0px;padding:auto;width:100%}#menu-bar>li:hover{-webkit-box-shadow:0 10px 20px rgba(0,0,0,0.19),0 6px 6px rgba(0,0,0,0.23);box-shadow:0 10px 20px rgba(0,0,0,0.19),0 6px 6px rgba(0,0,0,0.23)}.expanded #menu-bar>li:hover{-webkit-box-shadow:0 14px 28px rgba(0,0,0,0.25),0 10px 10px rgba(0,0,0,0.22);box-shadow:0 14px 28px rgba(0,0,0,0.25),0 10px 10px rgba(0,0,0,0.22)}#menu-bar>li:hover .dropdown-list{display:block}@media screen and (max-width: 1500px){.expanded #menu-bar{margin:0px;float:right}}@media screen and (max-width: 1400px){.expanded #logo-container{display:none;height:0px;width:0px}}@media screen and (max-width: 1201.5px){.expanded #menu-bar{float:none;width:100%}.expanded #menu-bar>li{width:12.5%}.expanded #menu-bar>li>a{font-size:medium}}.condensed#top-header{top:-37px}.condensed#top-header #header-bg{filter:drop-shadow(1px 1px 1px rgba(0,0,0,0.5));-webkit-filter:drop-shadow(1px 1px 1px rgba(0,0,0,0.5))}.condensed#top-header #logo-container{top:55px;height:45px}.condensed#top-header #menu-bar{top:55px;height:45px;width:801px}.condensed#top-header #menu-bar>li{width:100px}.condensed#top-header #menu-bar>li>a{height:45px;font-size:small}.condensed#top-header #menu-bar>li .dropdown-list{font-size:small}.condensed#top-header #menu-bar>li .dropdown-list li{width:100px}#top-header{-webkit-transition:top 0.3s ease-out;transition:top 0.3s ease-out;will-change:top}#logo-container,#menu-bar,#menu-bar>li,#menu-bar>li>a{-webkit-transition:top 0.3s ease-out, height 0.3s ease-out, width 0.3s ease-out;transition:top 0.3s ease-out, height 0.3s ease-out, width 0.3s ease-out;will-change:top, height, width}#header-bg{-webkit-transition:-webkit-filter 1s ease-out;transition:-webkit-filter 1s ease-out;transition:filter 1s ease-out;transition:filter 1s ease-out, -webkit-filter 1s ease-out;will-change:filter} | body{margin:0px;padding:0px;background:#f8f5ec}header,footer{display:block;position:relative;margin:0px;padding:0px}.background{position:absolute}.container{position:relative}.normalized{margin:0px;padding:0px;list-style-type:none;list-style-image:none}.normalized ul{list-style-type:none;list-style-image:none}.horizontal>li{float:left}.link-btn{text-decoration:none;color:black;display:block}#top-header{height:100px;position:fixed;width:100%;top:18px;z-index:999}#header-container{height:100px;position:absolute;width:100%}#header-bg{background:url("https://static.igem.org/mediawiki/2017/8/8d/T--Shanghaitech--UItest-wy-header-bg.png");background-size:contain;background-repeat:repeat-x;height:120%;width:100%;z-index:-1}#bg-casual{position:absolute;background:url("https://static.igem.org/mediawiki/2017/b/b3/T--Shanghaitech--UItest-wy-casual.png");background-size:contain;background-repeat:no-repeat;top:100px;left:-8px;height:194px;width:100%;z-index:-2;opacity:.5}#header-bg-duplicate{background:url("https://static.igem.org/mediawiki/2017/8/8d/T--Shanghaitech--UItest-wy-header-bg.png");background-size:contain;background-repeat:repeat-x;height:120px;width:100%;z-index:-2;position:absolute;top:0px;opacity:.5}#logo-container{float:left;height:100px;top:0px}.img-contain{max-height:100%;max-width:100%;height:100px;width:auto}#menu-bar{top:0px;padding:0px;margin:auto;margin-right:100px;width:1201.5px;height:100px}#menu-bar>li{margin:0px;padding:auto;width:150px;text-align:center}#menu-bar ul{margin:0px;padding:0px;list-style-type:none}#menu-bar a{text-decoration:none;color:black;display:block}#menu-bar>li>a{height:100px;text-align:center;vertical-align:middle;font-size:large;position:relative}#menu-bar>li>a>span{position:absolute;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);font-weight:bolder;text-shadow:1px 1px 6px rgba(255,255,255,0.8)}#menu-bar>li:hover>a{background:rgba(244,230,207,0.8)}#menu-bar>li:hover>a>span{text-shadow:none}#menu-bar>li:hover>a:hover{background:rgba(251,198,168,0.8)}.dropdown-list{display:none}.dropdown-list a{padding:15px 8px;background:rgba(244,230,207,0.9)}.dropdown-list a:hover{background:#fbc6a8}.dropdown-list li{margin:0px;padding:auto;width:100%}#menu-bar>li:hover{-webkit-box-shadow:0 10px 20px rgba(0,0,0,0.19),0 6px 6px rgba(0,0,0,0.23);box-shadow:0 10px 20px rgba(0,0,0,0.19),0 6px 6px rgba(0,0,0,0.23)}.expanded #menu-bar>li:hover{-webkit-box-shadow:0 14px 28px rgba(0,0,0,0.25),0 10px 10px rgba(0,0,0,0.22);box-shadow:0 14px 28px rgba(0,0,0,0.25),0 10px 10px rgba(0,0,0,0.22)}#menu-bar>li:hover .dropdown-list{display:block}@media screen and (max-width: 1500px){.expanded #menu-bar{margin:0px;float:right}}@media screen and (max-width: 1400px){.expanded #logo-container{display:none;height:0px;width:0px}}@media screen and (max-width: 1201.5px){.expanded #menu-bar{float:none;width:100%}.expanded #menu-bar>li{width:12.5%}.expanded #menu-bar>li>a{font-size:medium}}.condensed#top-header{top:-37px}.condensed#top-header #header-bg{filter:drop-shadow(1px 1px 1px rgba(0,0,0,0.5));-webkit-filter:drop-shadow(1px 1px 1px rgba(0,0,0,0.5))}.condensed#top-header #logo-container{top:55px;height:45px}.condensed#top-header #menu-bar{top:55px;height:45px;width:801px}.condensed#top-header #menu-bar>li{width:100px}.condensed#top-header #menu-bar>li>a{height:45px;font-size:small}.condensed#top-header #menu-bar>li .dropdown-list{font-size:small}.condensed#top-header #menu-bar>li .dropdown-list li{width:100px}#top-header{-webkit-transition:top 0.3s ease-out;transition:top 0.3s ease-out;will-change:top}#logo-container,#menu-bar,#menu-bar>li,#menu-bar>li>a{-webkit-transition:top 0.3s ease-out, height 0.3s ease-out, width 0.3s ease-out;transition:top 0.3s ease-out, height 0.3s ease-out, width 0.3s ease-out;will-change:top, height, width}#header-bg{-webkit-transition:-webkit-filter 1s ease-out;transition:-webkit-filter 1s ease-out;transition:filter 1s ease-out;transition:filter 1s ease-out, -webkit-filter 1s ease-out;will-change:filter} | ||
#mySidenav{position:fixed;top:100px;bottom:0px;width:250px;opacity:0.4;-webkit-transition:right 0.3s ease-out,opacity 0.2s ease-out,-webkit-filter 0.16s linear;transition:right 0.3s ease-out,opacity 0.2s ease-out,-webkit-filter 0.16s linear;transition:right 0.3s ease-out,opacity 0.2s ease-out,filter 0.16s linear;transition:right 0.3s ease-out,opacity 0.2s ease-out,filter 0.16s linear,-webkit-filter 0.16s linear;will-change:right, opacity, filter}#mySidenav:hover{opacity:1}#mySidenav #sidenav-wrapper{position:absolute;top:45%;-webkit-transform:translateY(-40%);transform:translateY(-40%);height:auto;width:100%}#mySidenav #sidenav-wrapper.narrow a[href^="#"]{padding:5px 10px;line-height:1em}#mySidenav #sidenav-wrapper.narrower a[href^="#"]{padding:0px;line-height:0.9em}#mySidenav #sidenav-wrapper.scroll{-webkit-transform:none;transform:none;top:40px;bottom:0px}#mySidenav a{display:block;margin:auto;padding:10px 20px;color:black;text-decoration:none;text-align:center;-webkit-transition:background 0.16s ease-out;transition:background 0.16s ease-out;background:#f4e6cf}#mySidenav a:hover{background:#f98e8e}#mySidenav.shown .scroll#sidenav-wrapper{overflow-y:scroll}#mySidenav.shown .scroll#sidenav-wrapper #hide-botton{position:relative;top:0px}#mySidenav #hide-botton{position:absolute;width:100%;height:40px;top:-40px;padding:0;text-align:center;line-height:40px;background:#f4e6cf;-webkit-transition:0.3s ease-out;transition:0.3s ease-out;will-change:left}#mySidenav #hide-botton>span{display:inline-block;vertical-align:middle;-webkit-transition:all 0.2s ease-out,-webkit-transform 0.3s ease-out;transition:all 0.2s ease-out,-webkit-transform 0.3s ease-out;transition:all 0.2s ease-out,transform 0.3s ease-out;transition:all 0.2s ease-out,transform 0.3s ease-out,-webkit-transform 0.3s ease-out;will-change:transform, left, opacity}#mySidenav #hide-botton #hide-botton-hint{position:absolute;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);opacity:0;-webkit-transition:all 0.2s ease-out;transition:all 0.2s ease-out}#mySidenav #hide-botton:hover #hide-botton-hint{opacity:1}#mySidenav.shown{right:0px}#mySidenav.shown #hide-botton{left:0px}#mySidenav.hide{-webkit-filter:none;filter:none;right:-250px}#mySidenav.hide #hide-botton{width:40px;left:-40px}#mySidenav.hide #hide-botton #hide-botton-icon{-webkit-transform:rotate(180deg);transform:rotate(180deg)}#mySidenav.hide #hide-botton #hide-botton-hint{opacity:0;display:none} | #mySidenav{position:fixed;top:100px;bottom:0px;width:250px;opacity:0.4;-webkit-transition:right 0.3s ease-out,opacity 0.2s ease-out,-webkit-filter 0.16s linear;transition:right 0.3s ease-out,opacity 0.2s ease-out,-webkit-filter 0.16s linear;transition:right 0.3s ease-out,opacity 0.2s ease-out,filter 0.16s linear;transition:right 0.3s ease-out,opacity 0.2s ease-out,filter 0.16s linear,-webkit-filter 0.16s linear;will-change:right, opacity, filter}#mySidenav:hover{opacity:1}#mySidenav #sidenav-wrapper{position:absolute;top:45%;-webkit-transform:translateY(-40%);transform:translateY(-40%);height:auto;width:100%}#mySidenav #sidenav-wrapper.narrow a[href^="#"]{padding:5px 10px;line-height:1em}#mySidenav #sidenav-wrapper.narrower a[href^="#"]{padding:0px;line-height:0.9em}#mySidenav #sidenav-wrapper.scroll{-webkit-transform:none;transform:none;top:40px;bottom:0px}#mySidenav a{display:block;margin:auto;padding:10px 20px;color:black;text-decoration:none;text-align:center;-webkit-transition:background 0.16s ease-out;transition:background 0.16s ease-out;background:#f4e6cf}#mySidenav a:hover{background:#f98e8e}#mySidenav.shown .scroll#sidenav-wrapper{overflow-y:scroll}#mySidenav.shown .scroll#sidenav-wrapper #hide-botton{position:relative;top:0px}#mySidenav #hide-botton{position:absolute;width:100%;height:40px;top:-40px;padding:0;text-align:center;line-height:40px;background:#f4e6cf;-webkit-transition:0.3s ease-out;transition:0.3s ease-out;will-change:left}#mySidenav #hide-botton>span{display:inline-block;vertical-align:middle;-webkit-transition:all 0.2s ease-out,-webkit-transform 0.3s ease-out;transition:all 0.2s ease-out,-webkit-transform 0.3s ease-out;transition:all 0.2s ease-out,transform 0.3s ease-out;transition:all 0.2s ease-out,transform 0.3s ease-out,-webkit-transform 0.3s ease-out;will-change:transform, left, opacity}#mySidenav #hide-botton #hide-botton-hint{position:absolute;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);opacity:0;-webkit-transition:all 0.2s ease-out;transition:all 0.2s ease-out}#mySidenav #hide-botton:hover #hide-botton-hint{opacity:1}#mySidenav.shown{right:0px}#mySidenav.shown #hide-botton{left:0px}#mySidenav.hide{-webkit-filter:none;filter:none;right:-250px}#mySidenav.hide #hide-botton{width:40px;left:-40px}#mySidenav.hide #hide-botton #hide-botton-icon{-webkit-transform:rotate(180deg);transform:rotate(180deg)}#mySidenav.hide #hide-botton #hide-botton-hint{opacity:0;display:none} | ||
</style></html> | </style></html> | ||
Revision as of 15:51, 1 November 2017
