Difference between revisions of "Template:TAS Taipei/CSS"

(Undo revision 37695 by Averyw17113532 (talk))
(Undo revision 37709 by Averyw17113532 (talk))
Line 609: Line 609:
 
}
 
}
 
nav li.dropdown:nth-child(1) {
 
nav li.dropdown:nth-child(1) {
   background-color: #00ff7f;
+
   background-color: #ff0000;
 
}
 
}
 
nav li.dropdown:nth-child(1) > .dropdown-menu {
 
nav li.dropdown:nth-child(1) > .dropdown-menu {
   background-color: #00ff7f;
+
   background-color: #ff0000;
 
   background-size: 400px;
 
   background-size: 400px;
 
   width: 1080px;
 
   width: 1080px;
Line 620: Line 620:
 
}
 
}
 
nav li.dropdown:nth-child(2) {
 
nav li.dropdown:nth-child(2) {
   background-color: #00ff7f;
+
   background-color: #ff0000;
 
}
 
}
 
nav li.dropdown:nth-child(2) > .dropdown-menu {
 
nav li.dropdown:nth-child(2) > .dropdown-menu {
   background-color: #00ff7f;
+
   background-color: #ff0000;
 
   background-size: 1080;
 
   background-size: 1080;
 
   width: 1080px;
 
   width: 1080px;
Line 632: Line 632:
 
}
 
}
 
nav li.dropdown:nth-child(3) {
 
nav li.dropdown:nth-child(3) {
   background-color: #00ff7f;
+
   background-color: #ff0000;
 
}
 
}
 
nav li.dropdown:nth-child(3) > .dropdown-menu {
 
nav li.dropdown:nth-child(3) > .dropdown-menu {
   background-color: #00ff7f;
+
   background-color: #ff0000;
 
   background-size: 400px;
 
   background-size: 400px;
 
   width: 1080px;
 
   width: 1080px;
Line 644: Line 644:
 
}
 
}
 
nav li.dropdown:nth-child(4) {
 
nav li.dropdown:nth-child(4) {
   background-color: #00ff7f;
+
   background-color: #ff0000;
 
}
 
}
 
nav li.dropdown:nth-child(4) > .dropdown-menu {
 
nav li.dropdown:nth-child(4) > .dropdown-menu {
   background-color: #00ff7f;
+
   background-color: #ff0000;
 
   background-size: 400px;
 
   background-size: 400px;
 
   margin-left: -540px;
 
   margin-left: -540px;
Line 656: Line 656:
 
}
 
}
 
nav li.dropdown:nth-child(5) {
 
nav li.dropdown:nth-child(5) {
   background-color: #00ff7f;
+
   background-color: #ff0000;
 
}
 
}
 
nav li.dropdown:nth-child(5) > .dropdown-menu {
 
nav li.dropdown:nth-child(5) > .dropdown-menu {
   background-color: #00ff7f;
+
   background-color: #ff0000;
 
   background-size: 300px;
 
   background-size: 300px;
 
   margin-left: -720px;
 
   margin-left: -720px;
Line 668: Line 668:
 
}
 
}
 
nav li.dropdown:nth-child(6) {
 
nav li.dropdown:nth-child(6) {
   background-color: #00ff7f;
+
   background-color: #ff0000;
 
}
 
}
 
nav li.dropdown:nth-child(6) > .dropdown-menu {
 
nav li.dropdown:nth-child(6) > .dropdown-menu {
   background-color: #00ff7f;
+
   background-color: #ff0000;
 
   background-size: 300px;
 
   background-size: 300px;
 
   width: 1080px;
 
   width: 1080px;

Revision as of 18:49, 11 July 2016

.container{

 padding:0px !important;

}

@import url(http://fonts.googleapis.com/css?family=Lato:400,700);

  1. content {
 margin: 0;
 margin-top:-10px;
 padding: 0;
 width: auto;
 border: 0;
 outline: 0;
 font-size: 100%;
 vertical-align: baseline;
 background: transparent;
 position: static;

} h1, h2, h3, h4, h5, h6 {

 margin: 0;
 padding: 0;
 border: 0;
 outline: 0;
 background: transparent;

} .printfooter,

  1. menubar,
  2. siteSub,
  3. contentSub,
  4. search-controls,

.firstHeading,

  1. footer-box,
  2. catlinks,
  3. p-logo {
 display: none;

} body,#bodyContent {

 margin: 0px 0 0 0;
 padding: 0;
 top:0px;

}

  1. top-section {
 width: 965px;
 height: 0;
 margin: 0 auto;
 padding: 0;
 border: none;

}

  1. menubar {
 font-size: 65%;
 top: -14px;

} .left-menu:hover {

 background-color: transparent;

}

  1. menubar li a {
 background-color: transparent;

}

  1. menubar:hover {
 color: white;

}

  1. menubar li a {
 color: transparent;

}

  1. menubar:hover li a {
 color: white;

} body,#bodyContent html {

 height: 100%;

} body,#bodyContent {

 background-attachment: fixed;
 background-repeat: repeat;

} html {

 overflow-y: scroll;

} header > .container {

 padding-top: 25px;
 padding-bottom: 15px;

} .container {

 max-width: 1080px;

} .absolute_center {

 margin: auto;
 position: absolute;
 top: 0;
 left: 0;
 bottom: 0;
 right: 0;

} .sketch {

 display: none;
 opacity: 1;
 position: fixed;
 top: 0;

}

  1. masthead #big-video-wrap {
 position: static;

}

  1. masthead #head_text {
 margin: auto;
 position: absolute;
 top: 0;
 left: 0;
 bottom: 0;
 right: 0;
 height: 100px;

}

  1. masthead h1,
  2. masthead h2 {
 font-family: Lato;
 color: white;
 opacity: 0.99;
 text-align: center;
 margin: 0;

}

  1. masthead h1 {
 letter-spacing: 6px;
 margin-bottom: 5px;
 font-size: 60px;

}

  1. masthead h2 {
 font-size: 15px;

} .nav #nav_left {

 display: inline-block;
 vertical-align: bottom;

} .nav #nav_left img {

 width: 170px;

} .nav #nav_right {

 margin-left: 15px;
 display: inline-block;
 vertical-align: bottom;

} .nav #nav_right h2 {

 color: white;
 font-size: 70px;
 margin-top: 0;
 margin-bottom: 0;

} .nav ul {

 padding: 0;
 margin-top: 0;

} .nav ul li {

 list-style-type: none;
 display: inline-block;
 color: white;
 border-right: 1px solid white;
 padding: 0 10px;
 margin-left: -4px;

} .nav ul li:last-child {

 border: 0;

} .quotespacer {

 border-top: 1px solid white;
 width: 150px;
 height: 1px;
 display: block;
 margin: 0 auto;

}

  1. missionquote {
 -webkit-animation: 20s huerotate linear infinite;
 margin: 15px auto;

}

  1. telomere {
 width: 100%;
 height: 360px;
 background-size: 100%;
 background-repeat: no-repeat;
 transition: 1s ease;

}

  1. telomere:hover {
 -webkit-transform: scale(1.1);

}

  1. portrait_container {
 border-right: 1px solid white;

}

  1. portrait_container img {
 width: 15%;
 padding: 5px;
 transition: 0.2s ease;

}

  1. portrait_container img:hover {
 cursor: pointer;
 -webkit-transform: scale(1.3);

}

  1. portrait_container > .row {
 padding-top: 5px;

}

  1. portrait_container > .row:last-child {
 padding-bottom: 5px;

} @-webkit-keyframes huerotate {

 0% {
   -webkit-filter: hue-rotate(0deg);
 }
 100% {
   -webkit-filter: hue-rotate(360deg);
 }

} .SVG_igem_logo .PATH_tiger_logo {

 fill: none;
 stroke: #fdd700;
 stroke-width: 2.5;
 stroke-linecap: round;
 stroke-linejoin: miter;
 stroke-miterlimit: 4;
 stroke-opacity: 1;
 stroke-dashoffset: 0;

} .SVG_igem_logo .PATH_igem_logo_text {

 fill: none;
 stroke: #252f62;
 stroke-width: 2.5;
 stroke-linecap: round;
 stroke-linejoin: miter;
 stroke-miterlimit: 4;
 stroke-opacity: 1;
 stroke-dashoffset: 0;

} .SVG_igem_logo .PATH_igem_logo_darkgreen {

 fill: none;
 stroke: #096836;
 stroke-width: 2.5;
 stroke-linecap: round;
 stroke-linejoin: miter;
 stroke-miterlimit: 4;
 stroke-opacity: 1;
 stroke-dashoffset: 0;

} .SVG_igem_logo .PATH_igem_logo_lightgreen {

 fill: none;
 stroke: #99cc99;
 stroke-width: 2.5;
 stroke-linecap: round;
 stroke-linejoin: miter;
 stroke-miterlimit: 4;
 stroke-opacity: 1;
 stroke-dashoffset: 0;

} /******************* SLDIESJS ******************/

  1. slides {
 display: none;

}

  1. slides .slidesjs-navigation {
 margin-top: 3px;

}

  1. slides .slidesjs-previous {
 margin-right: 5px;
 float: left;

}

  1. slides .slidesjs-next {
 margin-right: 5px;
 float: left;

} .slidesjs-pagination {

 margin: 6px 0 0;
 float: right;
 list-style: none;

} .slidesjs-pagination li {

 float: left;
 margin: 0 1px;

} .slidesjs-pagination li a {

 display: block;
 width: 13px;
 height: 0;
 padding-top: 13px;
 background-position: 0 0;
 float: left;
 overflow: hidden;

} .slidesjs-pagination li a.active, .slidesjs-pagination li a:hover.active {

 background-position: 0 -13px;

} .slidesjs-pagination li a:hover {

 background-position: 0 -26px;

}

  1. slides a:link,
  2. slides a:visited {
 color: #333;

}

  1. slides a:hover,
  2. slides a:active {
 color: #9e2020;

} .navbar {

 overflow: hidden;

} .slideContainer {

 margin: 0 auto;

}

  1. projIntroContainer {
 padding: 0px 0px 0px 0px;
 text-align: center;

}

  1. projIntro {
 margin-top: -8px;
 padding-top: 0px;
 text-align: justify;
 padding-right: 40px;
 font-size: 19px;
 font-family: 'Poiret One', cursive;

} /*************** BIGVIDEO.JS **************/

  1. big-video-wrap {
 overflow: hidden;
 height: 100%;
 width: 100%;
 top: 0;
 left: 0;

}

  1. big-video-vid,
  2. big-video-image {
 position: absolute;

}

  1. big-video-control-container {
 position: fixed;
 bottom: 0;
 padding: 10px;
 width: 100%;
 background: rgba(0, 0, 0, 0.25);
 -webkit-transition-duration: 0.6s;
 -moz-transition-duration: 0.6s;
 -ms-transition-duration: 0.6s;
 -o-transition-duration: 0.6s;
 transition-duration: 0.6s;

}

  1. big-video-control {
 width: 100%;
 height: 16px;
 position: relative;

}

  1. big-video-control-middle {
 margin: 0 56px 0 24px;

}

  1. big-video-control-bar {
 width: 100%;
 height: 16px;
 position: relative;
 cursor: pointer;

}

  1. big-video-control-progress {
 position: absolute;
 top: 7px;
 height: 3px;
 width: 0%;
 background: #fff;

}

  1. big-video-control-track {
 position: absolute;
 top: 8px;
 height: 1px;
 width: 100%;
 background: #fff;

}

  1. big-video-control-bound-left {
 left: 0;

}

  1. big-video-control-bound-right {
 right: -1px;

}

  1. big-video-control-track .ui-slider-handle {
 opacity: 0;

}

  1. big-video-control-playhead {
 left: 30%;

}

  1. big-video-control-play {
 position: absolute;
 top: 0;
 left: 0;
 height: 16px;
 width: 16px;

}

  1. big-video-control-timer {
 position: absolute;
 top: 1px;
 right: 0;
 color: #fff;
 font-size: 11px;

}

  1. big-video-control-playhead,
  2. big-video-control-bound-left,
  3. big-video-control-bound-right {
 position: absolute;
 top: 0;
 height: 16px;
 width: 1px;
 background: #fff;

}

  1. big-video-control .ui-slider-handle {
 border-left: solid 1px #fff;
 width: 16px;
 height: 16px;
 position: absolute;
 top: -8px;

} .transparent {

 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
 filter: alpha(opacity=0);
 -moz-opacity: 0;
 -khtml-opacity: 0;
 opacity: 0;

} .vjs-big-play-button {

 display: none !important;

} canvas {

 position: fixed;
 top: 0px;
 left: 0px;

} .card {

 margin-left: auto;
 margin-right: auto;
 background-color: white;
 box-shadow: 0px 0px 5px black;
 padding: 50px;

} .card_pic {

 margin-left: auto;
 margin-right: auto;
 background-color: white;
 box-shadow: 0px 0px 5px black;
 padding: 0px;

} .container {

 padding: 0px;
 min-width: 1080px;

} .container div nav {

 min-width: 1080px;

} button:focus {

 outline: 0 !important;

} a:focus {

 outline: 0 !important;

} img {

 max-width: 100%;

} a {

 text-decoration: none;
 color: inherit !important;

} a:hover {

 color: inherit;

} .full {

 padding: 0;

} .slidesjs-pagination {

 margin-top: -25px;
 margin-right: 10px;
 z-index: 10;
 position: relative;

}

  1. slides .heroImageContainer {
 background-size: cover;
 padding-top: 54%;
 background-position: 50% 50%;
 background-repeat: no-repeat;

}

  1. slides .heroImageContainer h3 {
 opacity: 0.85;
 max-width: 400px;
 position: absolute;
 padding: 10px 20px;
 font-weight: normal;
 color: black;
 font-size: 35px;
 font-family: Lato;

}

  1. slides .heroImageContainer h3 span {
 font-size: 21px;
 display: block;

}

  1. slides .heroImageContainer h3.topleft {
 top: 0;
 left: 0;
 margin-left: 20px;

}

  1. slides .heroImageContainer h3.topright {
 top: 0;
 right: 5px;
 margin-right: 20px;

}

  1. slides .heroImageContainer h3.bottomleft {
 bottom: 0;
 left: 0;
 margin-bottom: 35px;
 margin-left: 20px;

}

  1. slides .heroImageContainer h3.bottomright {
 bottom: 0;
 right: 5px;
 margin-bottom: 35px;
 margin-right: 20px;

}

  1. slides .heroImageContainer h3.red {
 background-color: #d10000;

}

  1. slides .heroImageContainer h3.purple {
 background-color: #8e44ad;

}

  1. slides .heroImageContainer h3.blue {
 background-color: #2c3e50;

}

  1. slides .heroImageContainer h3.belize {
 background-color: #2980b9;

}

  1. slides .heroImageContainer h3.green {
 background-color: #27ae60;

}

  1. slides .heroImageContainer h3.orange {
 background-color: #f39c12;

}

  1. slides .heroImageContainer h3.hide {
 display: none;

}

  1. slides .heroImageContainer .slidesjs-control,
  2. slides .heroImageContainer .slidesjs-container {
 width: 100% !important;

} nav ul {

 margin: 0;
 padding: 0;

} nav .dropdown-menu {

 border: 0px;
 margin-top: 0px;
 padding: 10px;
 box-shadow: 0px 0px 5px black;
 z-index: -1;

} nav .dropdown-menu img {

 width: 90px;
 opacity: 0.85;
 float: left;
 margin-right: 5px;

} nav .dropdown-menu h4 {

 color: white;
 padding: 5px;
 margin: 0;
 font-family: Lato;
 font-size: 20px;

} nav .dropdown-menu .subcategories_container {

 display: inline-block;
 width: 100%;
 cursor: pointer;

} nav .dropdown-menu .subcategories_container > div {

 min-width: 200px;
 display: inline-block;
 text-align: center;
 border: 1px solid white;
 padding-left:15px;
 padding-right:15px;

} nav .dropdown-menu .subcategories_container h5 {

 font-family: Lato;
 text-transform: uppercase;
 font-size: 16px;
 color: white;

} nav li.dropdown {

 width: 180px;
 display: inline-block;
 margin-right: -4px;
 height: 40px;
 margin-bottom: 0px;

} nav li.dropdown > a {

 height:35px;
 text-decoration: none;
 display: block;
 text-align: center;
 margin: 10px;

} nav li.dropdown a > h4 {

 color: white;
 font-weight: normal;
 font-size: 16px;
 padding: 0;
 margin: 0;
 text-align: center;

} nav li.dropdown {

 color: white;

} nav li.dropdown:nth-child(1) {

 background-color: #ff0000;

} nav li.dropdown:nth-child(1) > .dropdown-menu {

 background-color: #ff0000;
 background-size: 400px;
 width: 1080px;

} nav li.dropdown:nth-child(1) > .dropdown-menu .subcategories_container > div {

 background-color: rgba(33, 150, 243, 0.6);

} nav li.dropdown:nth-child(2) {

 background-color: #ff0000;

} nav li.dropdown:nth-child(2) > .dropdown-menu {

 background-color: #ff0000;
 background-size: 1080;
 width: 1080px;
 margin-left: -180px;

} nav li.dropdown:nth-child(2) > .dropdown-menu .subcategories_container > div {

 background-color: rgba(33, 150, 243, 0.6);

} nav li.dropdown:nth-child(3) {

 background-color: #ff0000;

} nav li.dropdown:nth-child(3) > .dropdown-menu {

 background-color: #ff0000;
 background-size: 400px;
 width: 1080px;
 margin-left: -360px;

} nav li.dropdown:nth-child(3) > .dropdown-menu .subcategories_container > div {

 background-color: rgba(33, 150, 243, 0.6);

} nav li.dropdown:nth-child(4) {

 background-color: #ff0000;

} nav li.dropdown:nth-child(4) > .dropdown-menu {

 background-color: #ff0000;
 background-size: 400px;
 margin-left: -540px;
 width: 1080px;

} nav li.dropdown:nth-child(4) > .dropdown-menu .subcategories_container > div {

 background-color: rgba(33, 150, 243, 0.6);

} nav li.dropdown:nth-child(5) {

 background-color: #ff0000;

} nav li.dropdown:nth-child(5) > .dropdown-menu {

 background-color: #ff0000;
 background-size: 300px;
 margin-left: -720px;
 width: 1080px;

} nav li.dropdown:nth-child(5) > .dropdown-menu .subcategories_container > div {

 background-color: rgba(33, 150, 243, 0.6);

} nav li.dropdown:nth-child(6) {

 background-color: #ff0000;

} nav li.dropdown:nth-child(6) > .dropdown-menu {

 background-color: #ff0000;
 background-size: 300px;
 width: 1080px;
 margin-left: -900px;

} nav li.dropdown:nth-child(6) > .dropdown-menu .subcategories_container > div {

 background-color: rgba(33, 150, 243, 0.6);

} footer {

 height: 20px;
 background-color: #2c3e50;

} footer .cornered {

 float: left;
 width: 300px;
 height: 0px;
 border-top: 20px solid #bdc3c7;
 border-right: 45px solid transparent;

} footer .footer_right {

 color: white;
 padding: 25px;
 float: right;
 height: 100%;

} footer .footer_right span {

 opacity: 0.5;

}

  1. bodycontainer {
 min-width: 1080px;
 margin: auto;
 padding: 10px 0;
 text-align:left;

}

  1. bodycontainer .overview_header {
 text-align: center;

}

  1. bodycontainer h3,
  2. bodycontainer h4,
  3. bodycontainer h5 {
 font-family: Lato;
 text-transform: uppercase;
 margin: 0px 0px 0px 0px;
 padding-top: 30px;

}

  1. bodycontainer h1,
  2. bodycontainer h2{
 font-family: Lato;
 text-transform: uppercase;
 margin: 0px 0px 0px 0px;
 padding-top: 80px;  

}

  1. bodycontainer .buttonrow {
 margin-bottom: 20px;

}

  1. bodycontainer .igem_button {
 position: relative;
 overflow: hidden;

}

  1. bodycontainer .igem_button img {
 transition: 0.4s ease;
 -webkit-filter: grayscale(0%);

}

  1. bodycontainer .igem_button .button_description {
 transition: 0.5s ease;
 background: rgba(44, 62, 80, 0.75);
 position: absolute;
 top: 100%;
 left: 0;
 width: 100%;
 height: 100%;

}

  1. bodycontainer .igem_button h2 {
 margin: 0 auto;
 margin-top: -27px;
 color: #dddddd;
 font-size: 16px;
 text-align: center;
 width: 100%;
 padding: 5px 0px;
 background: rgba(0, 0, 0, 0.41);
 font-family: Lato;
 text-transform: uppercase;
 border-bottom: 1px solid rgba(255, 255, 255, 0.3);

}

  1. bodycontainer .igem_button p {
 color: #dddddd;
 padding: 5px;

}

  1. bodycontainer .igem_button:hover > .button_description {
 top: 27px;

}

  1. bodycontainer .igem_button:hover > img {
 -webkit-filter: grayscale(100%);

}

  1. bodycontainer .red h2 {
 background: #d10000;

}

  1. bodycontainer .purple h2 {
 background: #8e44ad;

}

  1. bodycontainer .blue h2 {
 background: #2c3e50;

}

  1. bodycontainer .belize h2 {
 background: #2980b9;

}

  1. bodycontainer .green h2 {
 background: #27ae60;

}

  1. bodycontainer .orange h2 {
 background: #f39c12;

}

  1. category_navbar {
 color: black;
 padding-left: 0;
 padding: 5px;

}

  1. category_navbar .active {
 background: rgba(255, 156, 0, 0.17);
 border: 1px solid rgba(0, 0, 0, 0.17);

}

  1. category_navbar .nav > li > a {
 text-transform: uppercase;
 font-size: 16px;
 font-family: Lato;

}

  1. category_navbar .nav > ul > li,
  2. category_navbar .nav > ul > ul > li {
 list-style-type: none;
 display: block;
 color: inherit;
 border: 0;
 margin-left: 10px;
 padding-top: 4px;
 padding-bottom: 4px;

}

  1. category_navbar .nav > ul > li a,
  2. category_navbar .nav > ul > ul > li a {
 font-size: 14px;
 font-family: Lato;        

}

  1. category_navbar .nav > ul > ul > li {
 margin-left: 35px;

}

  1. category_navbar .nav > ul > li:hover,
  2. category_navbar .nav > ul > ul > li:hover {
 background: rgba(255, 255, 255, 0.5);

}

  1. member_spotlight h5 {
 padding: 5px 7px;
 color: white;

}

  1. member_spotlight .intro_large h5 {
 font-size: 20px;
 padding: 15px 15px;
 margin-bottom: 10px;

}

  1. member_spotlight #spotlight_question_1 h5 {
 background: #c0392b;
 width:auto;

}

  1. member_spotlight #spotlight_question_2 h5 {
 background: #8e44ad;
 width:auto;

}

  1. member_spotlight #spotlight_question_3 h5 {
 background: #2980b9;
 width:auto;

}

  1. member_spotlight #spotlight_question_intro h5 {
 background: #e67e22;
 width:auto;

}

  1. lab_notes {
 text-align: center;

}

  1. lab_notes img {
 margin: 0 auto;
 display: block;

}

  1. lab_notes :hover img {
 -webkit-transform: scale(1.1);

} .block_header {

 display: inline-block;
 color: white;
 padding: 7px 11px;
 padding-bottom: 5px;

} .affix {

 top: 60px;

} .container {

 min-width: 1080px;

} .container div nav {

 min-width: 1080px;

} p, ol > li, td, th, caption, .ulstyled > li, .calendar > li {

 font-family: Lato;
 font-size: 15px;

} p a, ol > li a, td a, th a, caption a, .ulstyled > li a, .calendar > li a {

 text-decoration: underline;
 color: #3b5998;

} .calendar {

 padding-left: 10px;

} .calendar > li {

 font-size: 13px;

} figcaption {

 color: white;
 padding: 4px 5px;
 display: inline-block;
 font-size:14px;

} figure {

 margin-bottom: 10px;

} .red {

 background: #c0392b;

} .purple {

 background: #8e44ad;

} .blue {

 background: #2c3e50;

} .belize {

 background: #2980b9;

} .green {

 background: #27ae60;

} .orange {

 background: #f39c12;

} .darkblue {

 background: #34495e;

} .table-bordered, .table-bordered > thead > tr > th, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > th, .table-bordered > thead > tr > td, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td {

 border: 1px solid black;

} .col-lg-offset-1half {

 margin-left: 11.111111111111%;

} .clearfix:after {

 content: " ";
 display: block;
 height: 0;
 clear: both;

}

@import url("/wiki/skins/igem/top_menu_14.css")