Difference between revisions of "Template:Shanghaitech/css"

m (header-draft-1)
m (header-draft-1)
Line 1: Line 1:
 
<html><style type="text/css">
 
<html><style type="text/css">
body{margin:0px;padding:0px;background:#f8f5ec}header{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}#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}#top-space-holder{display:block;position:relative;padding-top:170px;width:100%;z-index:-3}#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>li{margin:0px;padding:auto;width:100%;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%;transform:translate(-50%, -50%)}#menu-bar>li:hover>a{background:rgba(255,100,100,0.5)}#menu-bar>li:hover>a:hover{background:rgba(255,150,100,0.5)}.dropdown-list{display:none}.dropdown-list a{padding:15px 8px;background:rgba(255,100,100,0.5)}.dropdown-list a:hover{background:rgba(255,150,100,0.5)}#menu-bar>li:hover{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{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))}.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{transition:top 0.3s ease-out;will-change:top}#logo-container,#menu-bar,#menu-bar>li,#menu-bar>li>a{transition:top 0.3s ease-out, height 0.3s ease-out, width 0.3s ease-out;will-change:top, height, width}#header-bg{transition:filter 1s ease-out;will-change:filter}
+
body{margin:0px;padding:0px;background:#f8f5ec}header{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}#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}#top-space-holder{display:block;position:relative;padding-top:170px;width:100%;z-index:-3}#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%;transform:translate(-50%, -50%)}#menu-bar>li:hover>a{background:rgba(255,100,100,0.5)}#menu-bar>li:hover>a:hover{background:rgba(255,150,100,0.5)}.dropdown-list{display:none}.dropdown-list a{padding:15px 8px;background:rgba(255,100,100,0.5)}.dropdown-list a:hover{background:rgba(255,150,100,0.5)}.dropdown-list li{margin:0px;padding:auto;width:100%}#menu-bar>li:hover{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{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))}.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{transition:top 0.3s ease-out;will-change:top}#logo-container,#menu-bar,#menu-bar>li,#menu-bar>li>a{transition:top 0.3s ease-out, height 0.3s ease-out, width 0.3s ease-out;will-change:top, height, width}#header-bg{transition:filter 1s ease-out;will-change:filter}
 
</style></html>
 
</style></html>

Revision as of 09:15, 28 October 2017