Difference between revisions of "Template:UT-Tokyo/CSS"

Line 1: Line 1:
−
<html>
 
−
<style type="text/css">
 
 
/***********************************************************************
 
/***********************************************************************
 
/  GENERAL
 
/  GENERAL
Line 920: Line 918:
  
 
}
 
}
−
</style>
 
−
</html>
 

Revision as of 06:56, 26 August 2015

/*********************************************************************** / GENERAL /**********************************************************************/ @font-face{ 

   font-family:'Homenaje';
   src: url("https://2015.igem.org/File:UT_TOKYO_Homenaje-Regular.ttf");

}

@font-face{ 

   font-family:'Open Sans';
   src: url("https://2015.igem.org/File:UT_TOKYO_OpenSans-Regular.ttf");

}

@font-face{ 

   font-family:'Open Sans';
   src: url("https://2015.igem.org/File:UT_TOKYO_OpenSans-Bold.ttf");
   font-weight:bold;

}

@font-face{ 

   font-family:'Open Sans';
   src: url("https://2015.igem.org/File:UT_TOKYO_OpenSans-Italic.ttf");
   font-style:italic;

}

@font-face{ 

   font-family:'Open Sans';
   src: url("https://2015.igem.org/File: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: white; -webkit-font-smoothing: antialiased; 

   background-color:#DDDDDD;

}

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 { 

 font-family: 'Homenaje', 'Open Sans', "Century Gothic", sans-serif;
 background-image:url('https://2015.igem.org/File: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 { 

 font-family: 'Homenaje', 'Open Sans', "Century Gothic", sans-serif;
 background-image:url('https://2015.igem.org/File:UT_TOKYO_Head.png');
 background-size:contain;
 background-repeat: no-repeat;
 padding-left:2em;
 text-align: left;
 font-size:2em;
 font-weight: Normal;
 margin:0.5em;

}

h3 { 

 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 { 

 font-family: 'Open Sans', "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
 text-align:center;
 font-weight:bold;
 font-size:1em;
 margin:0.5em;

}

h5 { 

 font-family: 'Open Sans', "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
 text-align:left;
 font-weight:bold;
 font-size:1.2em;
 margin:0.5em;

}

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 5px red;

}

.panel ul li p{ 

 line-height:1em;
 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-width:50%;

}

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:1em;
 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);

}

/*********************************************************************** / SWITCHS and BUTTONS /**********************************************************************/ .toggle-sw{ 

 display:inline-block;
 height:40px;
 width:100px;
 position:relative;
 font-family: 'Open Sans', "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
 font-size:18px;
 background:#ccc;
 -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, 79, 0);

} .toggle-sw.on:after{ 

 left:55px;

} .toggle-sw.on:hover:after{ 

 left:50px;

}

.square-sw{ 

 display:inline-block;
 height:40px;
 width:40px;
 position:relative;
 font-family: 'Open Sans', "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
 font-size:18px;
 background:rgb(255,79,0);
 -webkit-transition: all .2s ease;
 transition: all .2s ease;

} .square-sw:hover{ 

 animation:blink 0.4s ease-in-out infinite alternate;
 -webkit-animation:blink 0.4s ease-in-out infinite alternate;

}

/*********************************************************************** / PATTERN /**********************************************************************/ .canvas-control { 

 display:block;
 margin:auto;
 width:300px;
 height:45px;
 margin-top:5px;
 margin-bottom:5px;
 font-family: 'Homenaje';
 text-align:center;
 border-right:solid 2px rgb(255, 79, 0);
 border-bottom:solid 2px rgb(255, 79, 0);

}

  1. debug {
   position:absolute;
   width:300px;
   right:0px;
   top:0px;
   font-family: "Century Gothic", sans-serif;
   background-color: black;
   opacity: 0.5;
   color: white;

}

  1. panel{
 position: relative;
 float:left;
 width:98px;
 height:98px;
 left:50%;
 margin-top:1px;
 margin-bottom:1px;
 background-color: rgb(1, 215, 215);

}

  1. panel:hover{
 background-color: white;

}

.button{ 

 font-family: 'Open Sans',"Century Gothic", sans-serif;
 position: relative;
 margin: auto;
 margin-top:1px;
 margin-bottom:1px;
 text-align: center;
 font-size: 50px;
 color: white;
 width: 598px;
 background-color: rgb(1, 215, 215);

} .button:hover{ 

 background-color: yellow;
 color: red

}

/********************************************************************** / MENU /**********************************************************************/ .menu-panel { 

 font-family:'Homenaje', "Century Gothic", sans-serif;
 position:fixed;
 z-index: 500;
 left:0px;
 top:0px;
 width:100%;
 min-height:0px;
 height:80px;
 margin:0px;
 background-color:rgba(255,255,255,0.6);

}

.menu-panel ul{ 

 position:fixed;
 text-align:center;
 padding:0px;
 margin-top:10px;
 width:100%;
 height:80px;

}

.menu-panel li{ 

 position:relative;
 display: inline-block;
 text-align:center;
 vertical-align:top;
 background-size:cover;
 width:120px;
 height:70px;
 font-size:20px;
 padding-top:10px;
 transition:top 0.4s;
 transition-timing-function:ease-in-out;

}

.menu-panel li.home{ 

 height:60px;
 width:60px;
 background-size:cover;
 background-image:url('https://2015.igem.org/File:UT_TOKYO_Home.png');
 border:0;

}

.menu-panel li.home a{ 

 display:block;
 margin-top:-10px;
 height:60px;
 width:60px;

}

.menu-panel li:hover, .menu-panel li.hover{ 

 border-top:solid 5px white;
 color:white;

}

.menu-panel li.home:hover{ 

 border:0;
 animation:blink 0.3s ease-in-out infinite alternate;
 -webkit-animation:blink 0.3s ease-in-out infinite alternate;

}

.menu-panel li.active { 

 border-top:solid 5px red;

}

.menu-panel li.home.active{ 

 opacity:0.3;
 border:0;

}

.menu-panel li ol { 

 position:fixed;
 display:none;
 text-align:center;
 padding:10px;
 background:rgba(255,255,255,0.6);
 top:80px;
 left:0px;
 width:100%;
 height:auto;

}

.menu-panel li:hover ol, .menu-panel li.hover ol{ 

 display:block;

}

.menu-panel li ol a{ 

 font-family: 'Homenaje', 'Open Sans',"Century Gothic", sans-serif;
 position:relative;
 display: inline-block;
 vertical-align:top;

 width:120px;
 height:80px;
 margin:10px auto;

 color:black;
 font-size:22px;

 text-decoration: none;

}

.menu-panel li ol a:first-child{ 

 height:120px;

}

.menu-panel li.project ol a{ 

 background:rgba(29,78,184,1);
 background-size:cover;
 color:white;

} .menu-panel li.modeling ol a{ 

 background:rgba(242,66,2,1);
 background-size:cover;

} .menu-panel li.experiment ol a{ 

 background:rgba(207,234,241,1);
 background-size:cover;

} .menu-panel li.parts 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(255,109,64);
 background-size:cover;

}

.menu-panel li ol a:hover { 

 color:red;
 animation:blink 0.3s ease-in-out infinite alternate;
 -webkit-animation:blink 0.3s ease-in-out infinite alternate;

}

/********************************************************************** / NAVIGATION /**********************************************************************/ .posnav{ 

 font-family:'Homenaje', "Century Gothic", sans-serif;
 font-size:20px;
 position:fixed;
 bottom:0px;

}

  1. breadcrumbs-one{
 overflow-y: hidden;
 overflow-x: auto;
 white-space: nowrap;
 opacity:0.6;
 width: 100%;

}

  1. breadcrumbs-one a{
 padding: .7em 1em .7em 2em;
 display:inline-block;
 text-decoration: none;
 color: black;
 position: relative;
 background:white;

}

  1. breadcrumbs-one .posnav:first-child a{
 padding-left: 1em;
 border-radius: 5px 0 0 5px;

}

  1. breadcrumbs-one a:hover,
  2. breadcrumbs-one a.hover{
 background: yellow;

}

  1. breadcrumbs-one a.read{
 background: red;
 color:white;

}

  1. breadcrumbs-one a::after,
  2. 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;

}

  1. breadcrumbs-one a::after{
 z-index: 2;
 border-left-color: white;

}

  1. breadcrumbs-one a::before{
 border-left-color: white;
 right: -1.1em;
 z-index: 1;

}

  1. breadcrumbs-one a:hover::after,
  2. breadcrumbs-one a.hover::after{
 border-left-color: yellow;

}

  1. breadcrumbs-one a.read::after{
 border-left-color: red;

}

/********************************************************************** / MAIN /**********************************************************************/ .main { 

 position:absolute;
 transition: all 0.6s;
 width:100%;
 top:100px;
 margin:auto;
 overflow-x:hidden;
 overflow-y:auto;

}

.panel { 

 position:relative;
 width:80%;
 padding:20px;
 margin:50px auto;
 height:auto;
 background:rgba(255,255,255,0.6);

}

.panel img{ 

 visibility: visible;

}

/********************************************************************** / 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;}

}


/********************************************************************** / 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;
 /*border:solid 2px white;*/
 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--width2 { width: 300px; } .grid-item--height2 { height: 300px; } .grid-item--width3 { width: 400px; } .grid-item--height3 { height: 400px; } .grid-item--width4 { width: 300px; } .grid-item--height4 { height: 400px; }

/* HOME PAGE */ .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 { 

 padding:20px;
 background-color:rgba(0,0,0,0.3);
 width: 100%;
 height:300px;

} .grid-item.opened.home span{ 

 display:inline-block;
 background-size: 260px auto;
 width:260px;

}

.grid-item.opened.home ul{ 

 display:inline-block;
 vertical-align: top;
 height:auto;
 width:auto;
 margin-left:20px;

}

.grid-item.opened.home ul li a{ 

 font-family: 'Open Sans', "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
 font-size:1.5em;
 color:white;
 line-height: 1.3em;
 text-decoration: none;

}

.grid-item.opened.home ul li a:hover{ 

 color:yellow;

}

.grid-item.opened.home ul li a p{ 

 position:absolute;
 visibility:hidden;
 font-size:0.7em;
 color:white;
 top:20px;
 left:50%;

}

.grid-item.opened.home ul li a:hover p{ 

 visibility:visible;

}

/* TEAM PAGE */ .grid-item.team h1{ 

 position:absolute;
 background:none;
 padding:0px;
 top:0;
 font-size: 1.5em;
 font-weight:normal;

}

.grid-item.team span{ 

 display: block;
 width:100%;
 height:100%;
 background:url('https://2015.igem.org/File:UT_TOKYO_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{ 

 font-size:1.2em;
 border-bottom:solid 1px white;

}

.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{ 

 /*clear:right;*/
 position:absolute;
 top:2.5em;
 left:0;
 margin-left:10px;
 text-align:left;
 font-size: 1em;
 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: 1em;
 font-weight:normal;

}

/********************************************************************** / 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%;
 }

 .menu-panel ul{
   width:auto;
   text-align:left;
   left:80px;
 }

 .menu-panel li{
   width:80px;
 }

 .menu-panel ul li.home{
   position:fixed;
   top:10px;
   left:10px;
 }

 .grid-item.opened.home{
   height:200px;
 }

 .grid-item.opened.home span{
   background-size: 160px auto;
   width:160px;
 }

 .grid-item.opened.home ul li a{
   font-size:1.2em;
 }

 .grid-item.opened.home ul li a p{
   left:350px;
 }

 .grid-item.opened.team{
   width:300px;
   height:300px;
 }

 .grid-item.opened.team p{
   font-size:0.8em;
 }

 .posnav{
   font-size:14px;
 }

}

@media only screen and (max-width: 640px) { 

 h1, h2 {
   text-align:right;
 }

 .menu-panel ul li{
   padding:5px;
   font-size:15px;
   width:60px;
   height:30px;
 }

 .menu-panel ul li ol a{
   font-size:14px;
   height:40px;
   width:80px;
   margin:1px;
 }

 .menu-panel ul li ol a:first-child{
   margin-right:80px;
   height:80px;
 }

 .menu-panel li ol{
   z-index:1000;
   background:none;
   position:relative;
   margin-top:-80px;
   margin-left:-25px;
   width:100px;
 }

 .grid-item.opened.home span{
   background-size: 80px auto;
   width:80px;
 }

 .grid-item.opened.home ul{
   margin-top:0;
 }

 .grid-item.opened.home ul li a{
   font-size:1em;
 }

 .grid-item.opened.home ul li a p{
   left:20px;
   top:120px;
 }

 .grid-item--width2 { width: 200px; }
 .grid-item--height2 { height: 200px; }
 .grid-item--width3 { width: 200px; }
 .grid-item--height3 { height: 200px; }
 .grid-item--width4 { width: 300px; }
 .grid-item--height4 { height: 400px; }

}