Template:UT-Tokyo/CSS
/*********************************************************************** / WIKI INITIALIZATION /**********************************************************************/
h1.firstHeading {
display: none !important;
}
- top_menu_14 .has_submenu{
height:16px;
}
- content{
width:100%; margin:0; padding:0;
}
- content a{
font-size:20px; line-height:1.2em;
}
.panel p, .panel a{
font-size:16px; line-height:1.3em;
}
/*********************************************************************** / GENERAL /**********************************************************************/ @font-face{
font-family:'Homenaje'; src: url("https://static.igem.org/mediawiki/2015/f/f1/UT_TOKYO_Homenaje-Regular.ttf");
} @font-face{
font-family:'Open Sans'; src: url("https://static.igem.org/mediawiki/2015/8/83/UT_TOKYO_OpenSans-Regular.ttf");
} @font-face{
font-family:'Open Sans'; src: url("https://static.igem.org/mediawiki/2015/a/a5/UT_TOKYO_OpenSans-Bold.ttf"); font-weight:bold;
} @font-face{
font-family:'Open Sans'; src: url("https://static.igem.org/mediawiki/2015/9/95/UT_TOKYO_OpenSans-Italic.ttf"); font-style:italic;
} @font-face{
font-family:'Open Sans'; src: url("https://static.igem.org/mediawiki/2015/6/6b/UT_TOKYO_OpenSans-BoldItalic.ttf"); font-weight: bold; font-style: italic;
}
- {
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
canvas{
display: block; margin: auto;
}
body{
width:100%;
background: #CCC; -webkit-font-smoothing: antialiased; }
body.is-loading *{
-moz-transition: none !important; -webkit-transition: none !important; -o-transition: none !important; -ms-transition: none !important; transition: none !important; -moz-animation: none !important; -webkit-animation: none !important; -o-animation: none !important; -ms-animation: none !important; animation: none !important;
}
p, h1, h2, h3, h4, h5, h6{
font-size:20pt; color:black; line-height:1.5em;
}
h1, h2{
font-family: 'Homenaje', 'Open Sans', "Century Gothic", sans-serif; background-image:url('https://static.igem.org/mediawiki/2015/4/45/UT_TOKYO_Head.png'); background-size:contain; background-repeat: no-repeat; padding-left:2em; text-align: center; font-size:2em; font-weight: Normal; margin:0.5em;
} h2{
text-align: left;
}
h3, h4, h5{
font-family: 'Open Sans', "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; text-align: left; font-size:1.5em; font-weight: bold; margin:0.5em;
} h4{
text-align:center; font-size:1em;
} h5{
font-size:1.2em;
}
h4 span{
font-weight:normal;
}
p{
font-family: 'Open Sans', "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; font-size:1em; margin:1em;
}
p i{
font-style:italic;
}
p span{
text-decoration: underline; color: #222;
}
p span q{
display: none;
}
p span:hover q, p span.hover q{
position:absolute; display: inline; margin-top:2em; margin-left:-100px; width:200px; height:auto; padding:5px; color:white; background:rgba(0,0,0,0.6);
}
.panel ul li{
border-left:solid 2px rgb(255,109,60);
}
.panel ul li p{
line-height:1.2em; margin:5px;
}
img.figure{
display: block; margin:0 auto; max-width:90%; max-height:500px;
}
.table{
display:block; margin:0 auto; max-width:90%; text-align:center;
}
.table img.figure{
display: inline; max-height:200px;
}
table{
margin:1em auto;
}
table tr.top{
border-top:solid 1px black;
}
table tr{
border-bottom:solid 1px black;
}
table td{
font-family: 'Open Sans', "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; font-size:16px; line-height:2em; text-align:left; padding-left:10px; padding-right:10px;
}
hr{
border: 0; height: 1px; background: #333; background-image: linear-gradient(to right, #ccc, #333, #ccc);
}
u{ }
- preload{
display:none;
}
- loader{
width:100%; position: fixed; top:40%; text-align: center;
}
.main{
position:absolute; transition: all 0.6s; width:100%; top:60px; margin:auto; overflow-x:hidden; overflow-y:auto;
}
.panel{
position:relative; width:90%; padding:20px; margin:50px auto; height:auto; background:rgba(255,255,255,0.6);
}
.panel img{
visibility: visible;
}
.panel-black{
background-color:rgba(0,0,0,0.6); width:100%; padding-top:10px; padding-bottom:10px; -webkit-box-shadow:inset 0px 0px 15px 1px rgba(0,0,0,0.8); box-shadow:inset 0px 0px 15px 1px rgba(0,0,0,0.8);
}
- footer h1{
font-family:'Homenaje'; background:none; padding:0px; font-size:1.8em; color:white; margin-bottom:0;
}
- footer img{
display:inline-block; margin:10px; width:200px; max-height:60px; filter: gray; -webkit-filter: grayscale(100%); opacity:0.5;
}
- footer img:hover{
filter: none; -webkit-filter: grayscale(0%); opacity:1;
}
- footer img.sns{
width:32px; height:32px; margin:5px;
}
- footer .copyright{
text-align:center; font-size:1em; line-height:2em; color:white;
}
- footer .sns{
} /*********************************************************************** / SWITCHS and BUTTONS /**********************************************************************/ .toggle-sw{
display:inline-block; height:40px; width:100px; position:relative; font-family: 'Homenaje'; font-size:18px; background:#888; -webkit-transition: all .2s ease; transition: all .2s ease;
} .toggle-sw:after{
content:; display:inline-block; height:30px; width:40px; background:#fff; position:absolute; top:5px; left:5px; -webkit-transition: all .2s ease; transition: all .2s ease; }
.toggle-sw:before{
content:'OFF'; position:absolute; right:11px; top:12px; color:#fff;
} .toggle-sw:hover:after{
left:10px;
} .toggle-sw.on:before{
content:'ON'; right:60px;
} .toggle-sw.on{
background:rgb(255, 109, 64);
} .toggle-sw.on:after{
left:55px;
} .toggle-sw.on:hover:after{
left:50px;
} .toggle-sw.mine:after{
background-size:cover; background-image:url('https://static.igem.org/mediawiki/2015/e/ee/UT_TOKYO_Mine.png')
}
.check{ position:relative; padding-left:30px; font-weight: bold; } .check::after{
content:""; background-image:url('https://static.igem.org/mediawiki/2015/1/17/UT_TOKYO_Check.png'); background-size:contain; position:absolute; top:0; left:0; width:1.5em; height:1.5em;
}
/*********************************************************************** / PATTERN /**********************************************************************/ .canvas-control{
display:block; position:absolute; top:1px; left:1px; width:298px; height:298px; background-color:rgba(255,255,255,0.3);
}
.canvas-control p{
line-height:300px !important; margin:0 auto; font-family: 'Homenaje'; font-size:24px; color: white; text-align:center; vertical-align: middle;
}
.canvas-control:hover{
animation:blink 0.3s ease-in-out infinite alternate; -webkit-animation:blink 0.3s ease-in-out infinite alternate;
}
.canvas-stats{
display:none; position:absolute; width:300px; padding:2px; z-index:500;
}
.canvas-stats:hover{
display:block !important;
}
.canvas-stats .onoff{
display:inline-block;
}
.canvas-stats .reset{
display:inline-block; width:40px; height:40px; background-size:cover; background-image:url('https://static.igem.org/mediawiki/2015/9/9c/UT_TOKYO_Reset.png');
}
.canvas-stats .reset:hover{
animation:blink 0.3s ease-in-out infinite alternate; -webkit-animation:blink 0.3s ease-in-out infinite alternate;
}
.canvas-stats .msonoff{
display:inline-block;
}
- debug{
position:absolute; width:300px; right:0px; top:0px; font-family: "Century Gothic", sans-serif; background-color: black; opacity: 0.5; color: white;
}
/**********************************************************************
/ MENU
/**********************************************************************/
.logo{
position: fixed; top:16px; margin:0; width:auto; height:60px;
}
.menu-panel{
font-family:'Homenaje', "Century Gothic", sans-serif; position:fixed; z-index: 500; left:0px; top:16px; width:100%; height:60px; margin:0px; background-color:rgba(255,255,255,0.6);
}
.menu-panel ul{
position:fixed; text-align:center; padding:0px; margin:0px; width:100%; height:60px;
}
.menu-panel li{
position:relative; display: inline-block; text-align:center; vertical-align:top; background-size:cover; width:120px; height:60px; font-size:20px; padding-top:10px; transition:border 0.3s;
} .menu-panel li:hover, .menu-panel li.hover{
border-bottom:solid 5px gray; color:gray;
} .menu-panel li.active{
border-bottom:solid 5px rgb(255,109,64); color:rgb(255,109,64);
}
.menu-panel li.home{
height:50px; width:50px; margin:5px; background-size:cover; background-image:url('https://static.igem.org/mediawiki/2015/8/8b/UT_TOKYO_home.png'); border:0; filter: gray; -webkit-filter: grayscale(100%); opacity:0.5; transition:all 0.3s;
} .menu-panel li.home:hover{
border:0; /* -webkit-animation:spin 3s cubic-bezier(0.8,0,1,0.2) infinite; animation:spin 3s cubic-bezier(0.8,0,1,0.2) infinite; */ filter: none; -webkit-filter: grayscale(0%); opacity:1;
} .menu-panel li.home.active{
border:0;
} .menu-panel li.home a{
display:block; margin-top:-10px; height:50px; width:50px;
} .menu-panel li.home a p{
display:none;
} .menu-panel li.home:hover a p{
display:block; position:absolute; width:50px; background-color:rgba(0,0,0,0.5); color:white; font-size:14px; text-decoration: none; margin:0; top:50px; left:0px;
}
.menu-panel li ol{
z-index:1000; position:fixed; display:block; text-align:center; padding:10px; background:rgba(255,255,255,0.8); top:-200px; left:0px; width:100%; height:auto; opacity:0; transition:opacity 0.3s; margin:0;
}
.menu-panel li:hover ol, .menu-panel li.hover ol{
top:76px; opacity:1;
}
.menu-panel li ol a{
font-family: 'Homenaje', 'Open Sans',"Century Gothic", sans-serif; display: inline-block; vertical-align:bottom; text-align:right;
width:120px; height:80px; margin:10px auto;
color:black; font-size:22px; opacity:0.7; padding:5px; background-size: contain;
text-decoration: none;
}
.menu-panel li ol a.big{
height:120px; margin-left:30px; opacity:1;
}
.menu-panel li.project ol a{
background:rgba(89,160,185,1); background-size:cover; color:white;
} .menu-panel li.modeling ol a{
background:rgba(22,79,207,1); background-size:cover; color:white;
} .menu-panel li.experiment ol a{
background:rgba(119,114,233,1); background-size:cover; color:white;
} .menu-panel li.achivement ol a{
background:rgba(183,183,183,1); background-size:cover;
} .menu-panel li.pp ol a{
background:rgba(1,0,216,1); background-size:cover; color:white;
} .menu-panel li.team ol a{
background:rgba(89,160,185,1); background-size:cover; color:white;
}
.menu-panel li ol a:hover{
color:rgb(255,109,64); animation:blink 0.3s ease-in-out infinite alternate; -webkit-animation:blink 0.3s ease-in-out infinite alternate;
}
.menu-panel li ol a.active{
opacity:1;
}
/********************************************************************** / NAVIGATION /**********************************************************************/ .posnav{
font-family:'Homenaje', "Century Gothic", sans-serif; position: fixed; top:76px; left:100%; display: block; -webkit-transform-origin:left top; transform-origin:left top; -webkit-transform:rotate(90deg); transform:rotate(90deg);
}
- breadcrumbs-one{
overflow-y: hidden; overflow-x: auto; white-space: nowrap; width:1000px; opacity:0.6;
}
- breadcrumbs-one a{
padding: .6em 1em .6em 2em;
font-size:14px;
display:inline-block; text-decoration: none; color: black; position: relative; background:white;
}
- breadcrumbs-one .posnav:first-child a{
padding-left: 1em; border-radius: 5px 0 0 5px;
}
- breadcrumbs-one a:hover,
- breadcrumbs-one a.hover{
background: yellow !important; color:black !important;
}
- breadcrumbs-one a.read{
background: red; color:white;
}
- breadcrumbs-one a::after,
- breadcrumbs-one a::before{
content: ""; position: absolute; top: 50%; margin-top: -1.5em; border-top: 1.5em solid transparent; border-bottom: 1.5em solid transparent; border-left: 1em solid; right: -1em;
}
- breadcrumbs-one a::after{
z-index: 2; border-left-color: white;
}
- breadcrumbs-one a::before{
border-left-color: white; right: -1.1em; z-index: 1;
}
- breadcrumbs-one a:hover::after,
- breadcrumbs-one a.hover::after{
border-left-color: yellow !important;
}
- breadcrumbs-one a.read::after{
border-left-color: red;
}
/********************************************************************** / ANIMATION /**********************************************************************/ @-webkit-keyframes blink{
0% {opacity:1;} 100% {opacity:0.7;}
} @keyframes blink{
0% {opacity:1;} 100% {opacity:0.7;}
}
@-webkit-keyframes iblink{
0% {opacity:0.1;} 100% {opacity:1;}
} @keyframes iblink{
0% {opacity:0.1;} 100% {opacity:1;}
}
@-webkit-keyframes spin { 0% {-webkit-transform: rotate(0deg);}
25% {-webkit-transform: rotate(90deg);} 50% {-webkit-transform: rotate(180deg);} 75% {-webkit-transform: rotate(270deg);}
100% {-webkit-transform: rotate(360deg);} }
@keyframes spin { 0% {transform: rotate(0deg);}
25% {transform: rotate(90deg);}
50% {transform: rotate(180deg);}
75% {transform: rotate(270deg);}
100% {transform: rotate(360deg);} }
/********************************************************************** / GRID /**********************************************************************/ /* ---- grid ---- */ .grid.team{
display:block; margin:auto; max-width: 1500px;
} .grid.home{
display:block; margin:auto; max-width: 1300px;
}
/* clear fix */ .grid:after{
content: ; display: block; clear: both;
}
/* ---- .grid-item ---- */
.grid-item{
font-family:'Homenaje', "Century Gothic", sans-serif; float: left; width: 200px; height: 200px; overflow:hidden; background-repeat:no-repeat; background-size:cover; padding:2px;
}
.grid-item img{
visibility:hidden;
}
.grid-item span{
display: block; width:100%; height:100%; background-repeat:no-repeat; background-size:cover;
}
.grid-item--size2{
width: 300px; height: 300px;
} .grid-item--size3{
width: 400px; height: 400px;
} .grid-item--size4{
width: 300px; height: 300px;
} .grid-item--title{
width: 100%; height: 50px;
} .grid-item--slide{
width: 600px; height: 300px;
} .grid-item--slide ul{
margin:0;
} .grid-item--small{
width: 100px; height: 100px;
}
/* HOME PAGE */ .grid-item.pattern{
overflow: visible;
}
.grid-item.link span:hover::after{
content: url('https://static.igem.org/mediawiki/2015/5/5c/UT_TOKYO_External.png'); position: absolute; right: 0; top: 0; opacity:0.6; animation:blink 0.3s ease-in-out infinite alternate; -webkit-animation:blink 0.3s ease-in-out infinite alternate;
}
.grid-item.home span:hover{
animation:blink 0.3s ease-in-out infinite alternate; -webkit-animation:blink 0.3s ease-in-out infinite alternate; cursor: pointer;
}
.grid-item.home ul{
margin-top:5px;
} .grid-item.opened.home{
width:396px; height:396px; margin:2px; background-color:rgba(255,255,255,0.2);
} .grid-item.opened.home span{
position:absolute; top:0; left:0; margin:10px; background-size: 180px auto; height:180px; width:180px;
}
.grid-item.opened.home ul{
position:absolute; display:inline-block; top:200px; left:0; margin:10px; padding:0; width:180px; height:180px;
}
.grid-item.opened.home ul li{
width:180px; background-color:rgba(0,0,0,0.5); margin-bottom:2px; padding:5px;
}
.grid-item.opened.home ul li:hover{
background-color:black;
}
.grid-item.opened.home ul li a{
display: block; font-family: 'Open Sans', "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; font-size:1.3em; color:white; text-decoration: none; width:180px;
}
.grid-item.opened.home ul li:hover a{
color:rgb(255,109,64);
}
.grid-item.opened.home ul li a p{
position:absolute; top:-200px; left:200px; width:180px; margin:0; visibility:hidden; font-size:0.7em; color:white; padding:5px;
}
.grid-item.opened.home ul li a:hover p{
visibility:visible;
}
/* TEAM PAGE */ .grid-item.team h1{
position:absolute; background:none; padding:0; top:0; font-size: 24px; font-weight:normal; visibility: hidden;
}
.grid-item.team span{
display: block; width:100%; height:100%; background:url('../images/team_r.png'); background-repeat:no-repeat; background-size:cover;
}
.grid-item.team span:hover{
animation:blink 0.4s ease-in-out infinite alternate; -webkit-animation:blink 0.4s ease-in-out infinite alternate;
}
.grid-item.opened.team{
width: 396px; height: 396px; margin: 2px; background: rgba(255, 255, 255, 0.6);
}
.grid-item.opened.team span{
display: none;
}
.grid-item.opened.team h1{
max-width:25%; font-size:1.2em; border-bottom:solid 1px white; visibility: visible;
}
.grid-item.opened.team img{
visibility:visible; position:absolute;
}
.grid-item.opened.team img.topright{
width:67%; height:67%; top:0px; left:33%;
}
.grid-item.opened.team img.bottomleft{
width:33%; height:33%; top:67%; left:0;
}
.grid-item.opened.team p.jobs{
position:absolute; bottom:33%; left:0; margin-left:10px; text-align:left; font-size: 16px; font-weight:normal;
}
.grid-item.opened.team p.description{
/*clear:right;*/ position:absolute; top:67%; left:33%; width:62%; margin-left:10px; text-align:left; font-size: 16px; font-weight:normal;
} /********************************************************************** / Slide Show /**********************************************************************/
- slide {
width:100%; height:100%; margin:0 auto; position:relative;
}
- slide ul,
- slide li{
width:100%; height:100%;
}
- slide img {
position:absolute; left:0; top:0; height:100%; width:100%; visibility: visible;
}
/********************************************************************** / For mobile /**********************************************************************/ @media only screen and (max-width: 1024px){
h1, h2, h3{ font-size:1.2em; }
p, h4{ font-size:0.8em; }
img.figure{ max-width:90%; }
.panel{ width:90%; }
.logo{ display:none; }
.menu-panel ul{ width:auto; text-align:left; left:60px; }
.menu-panel li{ width:80px; }
.menu-panel ul li.home{ position:fixed; top:16px; left:0px; }
.menu-panel ul li ol a{ font-size:0.8em; height:60px; width:80px; } .menu-panel ul li ol a.big{ height:100px; width:100px; }
.grid-item.opened.team{ width:300px; height:300px; }
.grid-item.opened.team p{ font-size:0.8em; }
.posnav{ font-size:14px; }
.grid-item--size3{ width: 300px; height: 300px; }
}
@media only screen and (max-width: 640px){
h1, h2{ text-align:right; }
.panel{ padding:10px; }
.menu-panel ul li{ padding:5px; font-size:15px; width:70px; height:30px; }
.menu-panel ul li ol a{ font-size:14px; height:40px; width:80px; margin:1px; }
.menu-panel ul li ol a.big{ margin-left:0; margin-right:80px; width:80px; height:80px; } .menu-panel li ol{ display:none; } .menu-panel li:hover ol{ display:block; background:none; position:relative; margin-top:-75px; margin-left:-20px; width:100px; }
.grid-item.opened.home{ width:296px; height:296px; }
.grid-item.opened.home span{ background-size: 130px auto; width:130px; }
.grid-item.opened.home ul{ top:140px; }
.grid-item.opened.home ul li{ width:130px; }
.grid-item.opened.home ul li a{ font-size:0.8em; }
.grid-item.opened.home ul li a p{ font-size:1em; width:130px; top:-140px; left:140px; }
.grid-item--size2{ width: 100px; height: 100px; } .grid-item--size3{ width: 200px; height: 200px; } .grid-item--size4{ width: 300px; height: 300px; } .grid-item--size5{ height: 40px; } .grid-item--slide{ width: 300px; height: 150px; padding:0; }
.grid-item.team{ width:96px; height:96px; margin:2px; }
.grid-item.opened.team{ width:296px; height:296px; margin:2px; }
.grid-item.team h1, .grid-item.opened.team h1{ font-size:1em; }
.grid-item.opened.team p.jobs, .grid-item.opened.team p.description{ font-size:0.8em; }
#footer h1{ font-size:1.5em; text-align:center; }
#footer img{ width:100px; max-height:50px; }
}