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

Revision as of 09:02, 15 August 2015

* { -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-image:url('../images/windows7.jpg'); background-size:cover; background-attachment:fixed;*/ 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('../images/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('../images/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', "Century Gothic", 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; } 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); } .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; } .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); } #debug { position:absolute; width:300px; right:0px; top:0px; font-family: "Century Gothic", sans-serif; background-color: black; opacity: 0.5; color: white; } #panel{ position: relative; float:left; width:98px; height:98px; left:50%; margin-top:1px; margin-bottom:1px; background-color: rgb(1, 215, 215); } #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-panel { font-family:'Homenaje', "Century Gothic", sans-serif; position:fixed; z-index: 500; left:0px; top:20px; 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('../images/home.png'); border:0; } .menu-panel li.home a{ display:block; 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:120px; margin:10px auto; background-color:red; background-size:cover; color:white; font-size:20px; text-decoration: none; } .menu-panel li ol a:hover { color:yellow; animation:blink 0.3s ease-in-out infinite alternate; -webkit-animation:blink 0.3s ease-in-out infinite alternate; } .menu-panel .posnav{ font-family: 'Open Sans',"Century Gothic", sans-serif; font-size:20px; position:fixed; bottom:0px; height:30px; width:100%; padding-left:10px; background:rgba(255,255,255,0.6); color:dimgray; display:none; } .menu-panel .posnav.current{ display:block; } .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; } @-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.team{ display:block; margin:auto; max-width: 1500px; } .grid.home{ display:block; margin:auto; max-width: 1000px; } /* clear fix */ .grid:after { content: ''; display: block; clear: both; } /* ---- .grid-item ---- */ .grid-item { font-family:'Homenaje', "Century Gothic", sans-serif; float: left; width: 100px; height: 100px; overflow:hidden; background-repeat:no-repeat; background-size:cover; /*border:solid 2px white;*/ padding:2px; } .grid-item h1, img{ visibility:hidden; } .grid-item span{ display: block; width:100%; height:100%; background-repeat:no-repeat; background-size:cover; } .grid-item--width2 { width: 200px; } .grid-item--height2 { height: 200px; } .grid-item--width3 { width: 300px; } .grid-item--height3 { height: 300px; } .grid-item--width4 { width: 300px; } .grid-item--height4 { height: 400px; } .grid-item--column1 { width:100%; } .grid-item--column2 { width:50%; } /* 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 span{ display: block; width:100%; height:100%; background:url('../images/team.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; cursor: pointer; } .grid-item.opened.team { width: 300px; height: 300px; background: rgba(255, 255, 255, 0.6); } .grid-item.opened.team span{ display: none; } .grid-item.opened.team h1{ visibility: visible; background:none; padding:5px; font-size: 1em; font-weight:normal; border-bottom:solid 1px white; } .grid-item.opened.team img{ display:inline-block; float:right; visibility: visible; width:120px; height:240px; } .grid-item.opened.team p{ /*clear:right;*/ width:180px; margin-left:10px; text-align:left; font-size: 1em; font-weight:normal; } /* COLUMN */ .grid-item.opened.grid-item--column1{ width: 100%; height: 300px; background: rgba(255, 79, 0, 1); } .grid-item.opened.grid-item--column2{ width: 50%; height: 300px; background: rgba(255, 79, 0, 1); } @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; } } @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:10px; height:80px; width:80px; margin-top:5px; margin-bottom:5px; } .menu-panel li ol{ z-index:1000; position:relative; margin-top:-80px; margin-left:-100px; width:200px; } .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; } /* .menu-panel{ background:none; } .menu-panel ul{ position:fixed; left:10px; width:60px; height:60px; background:url('../images/home.png'); background-size: cover; } .menu-panel ul li{ display:none; } .menu-panel ul li.home{ display:none; } */ }