Kendracorral (Talk | contribs) |
Kendracorral (Talk | contribs) |
||
Line 808: | Line 808: | ||
#modalSlider .carousel-indicators.left li { | #modalSlider .carousel-indicators.left li { | ||
display: block; | display: block; | ||
+ | } | ||
+ | |||
+ | #bodyContent p.strong, p.strong { | ||
+ | font-size: 18px; | ||
+ | font-weight: 800; | ||
+ | } | ||
+ | |||
+ | .std-section ul { | ||
+ | padding-left: 30px; | ||
+ | } | ||
+ | |||
+ | .std-section li { | ||
+ | font-size: 16px; | ||
+ | list-style: initial; | ||
+ | } | ||
+ | |||
+ | .std-section td, .std-section th { | ||
+ | font-size: 16px; | ||
+ | } | ||
+ | |||
+ | .social-media { | ||
+ | text-align: center; | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | .social-media img { | ||
+ | display: inline-block; | ||
+ | margin: 20px 5px; | ||
+ | transition: all 0.3s; | ||
+ | border-radius: 50%; | ||
+ | max-width: 50px; | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | |||
+ | .social-media img:hover { | ||
+ | background-color: #3399cc; | ||
} | } | ||
Revision as of 19:06, 15 October 2016
@import 'https://fonts.googleapis.com/css?family=Lato%7COpen+Sans';
body {
background-color: #fafafa;
}
.black-overlay {
position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(0,0,0,0.4); z-index: 7000;
}
.traslucent {
opacity: 0;
}
.main-nav, .nav-backdrop {
position: fixed; top: 0; width: 100%; z-index: 20; height: 48px;
}
- globalWrapper .main-nav, #globalWrapper .nav-backdrop {
top: 14px;
}
.blue-bg {
background-color: rgb(7, 135, 148);
}
p.attention, #content .std-section p.attention {
margin: 40px auto; display: block; text-align: center; font-size: 24px;
}
.page-preview {
max-width: 70%; max-height: 70vh; height: auto; margin: 100px auto; display: block;
}
.page-ender {
max-width: 80%; max-height: 300px; margin: 20px auto; display: block;
}
.margin {
margin: 40px;
}
.parallax {
margin: 50px 0; width: 100%; max-height: 300px; background-size: cover; background-repeat: no-repeat; background-position: 50% 0%; padding: 130px 10px;
}
.parallax p {
font-size: 40px; margin: 0; text-align: center; color: #fff; text-shadow: 2px 2px #333;
}
/* BEGIN NAV */ .nav-backdrop {
background-color: #078794; z-index: 1;
}
.main-nav a {
color: #fff; -webkit-transition: color 0.3s; -moz-transition: color 0.3s; transition: color 0.3s; display: block;
}
.main-nav .logo {
position: absolute; right: 5px; top: 5px;
}
.main-nav a:focus {
text-decoration: none;
}
.main-nav a:hover, .main-nav .option.header:hover {
text-decoration: none; color: #ddd; cursor: pointer;
}
.main-nav .options-wrapper {
display: flex; width: 100%; margin-top: 8px;
}
.main-nav .option-item {
position: relative; flex-grow: 1; color: #fff; padding: 4px 8px; left: 0px; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s;
}
.main-nav .option-item.active {
border-bottom: #fff solid 2px;
}
.main-nav .option.header {
text-align: center; -webkit-transition: color 0.3s; -moz-transition: color 0.3s; transition: color 0.3s;
}
.main-nav .option-dropdown {
display: none; opacity: 0; -webkit-transition: opacity 0.5s; -moz-transition: opacity 0.5s; transition: opacity 0.5s;
}
.main-nav .option.header.active-menu {
font-weight: 600; border-right: #fff solid 1px; display: inline-block; padding-right: 15px;
}
.main-nav .active .option.header.active-menu {
padding-bottom: 3px; border-bottom: #fff solid 2px; border-right: #fff solid 1px;
}
.main-nav .option.header.active-menu + .option-dropdown {
top: 1px; display: block; opacity: 1; position: absolute; width: 100vw;
}
.main-nav .option.header+ .option-dropdown .option {
transform: translate(200px); -webkit-transition: transform 0.3s; -moz-transition: transform 0.3s; transition: transform 0.3s;
}
.main-nav .option.header.active-menu + .option-dropdown .option {
display: inline-block; padding: 3px 15px;
}
.cover {
z-index: 5; display: block; background: url() center 0% no-repeat; background-size: cover; background-color: #333; height: 600px; max-height: 100vh; width: 100%; position: relative;
}
.mini-cover {
z-index: 5; display: block; background: url(); background-repeat: no-repeat; background-position: center center; background-size: cover; background-color: #333; height: 200px; max-height: 100vh; width: 100%; position: relative;
}
.cover .overlay, .mini-cover .overlay {
position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0,0,0,0.3);
}
.mini-cover .gradient-overlay {
position: absolute; top: 0; right: 0; bottom: 0; left: 0; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,3163c6+100&0+0,0+65,0.55+100 */ background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0) 0%, rgba(121,154,218,0) 65%, rgba(0,0,0,0.55) 100%); /* FF3.6-15 */ background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0) 0%,rgba(121,154,218,0) 65%,rgba(0,0,0,0.55) 100%); /* Chrome10-25,Safari5.1-6 */ background: radial-gradient(ellipse at center, rgba(255,255,255,0) 0%,rgba(121,154,218,0) 65%,rgba(0,0,0,0.55) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#8c3163c6',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.cover .gradient-overlay {
position: absolute; top: 0; right: 0; bottom: 0; left: 0; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7db9e8+0,da4e5b+65,e96f2e+100&0+0,0.2+65,0.6+100 */ background: -moz-linear-gradient(top, rgba(125,185,232,0) 0%, rgba(218,78,91,0.2) 65%, rgba(233,111,46,0.2) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(125,185,232,0) 0%,rgba(218,78,91,0.2) 65%,rgba(233,111,46,0.2) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(125,185,232,0) 0%,rgba(218,78,91,0.2) 65%,rgba(233,111,46,0.2) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#007db9e8', endColorstr='#99e96f2e',GradientType=0 ); /* IE6-9 */
}
.cover .content, .mini-cover .content {
position: relative; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); text-align: center;
}
.cover .content h1, .mini-cover .content h1 {
margin-top: 0px; font-size: 48px;
}
.cover .content, .mini-cover .content {
color: #fff;
}
.cover .content h3, .mini-cover .content h3 {
font-size: 24px;
}
.slide-menu {
position: fixed; bottom: 20px; left: 20px; padding-left: 0px; list-style: none; z-index: 5000; opacity: 0; -webkit-transition: opacity 0.3s; -moz-transition: opacity 0.3s; transition: opacity 0.3s;
}
.slide-menu.show {
opacity: 1; -webkit-transition: opacity 0.7s; -moz-transition: opacity 0.7s; transition: opacity 0.7s;
}
.slide-menu li {
position: relative; margin: 10px; color: #000; background: rgba(255,255,255,.5); -webkit-border-radius: 10px; border-radius: 10px;
}
.slide-menu li:hover {
background: rgba(255,255,255,.7);
}
.slide-menu li:after {
content: ""; background: rgba(255,255,255,.5); position: absolute; bottom: -10px; height: 10px; width: 5px; left: 50%; transform: translate(-50%);
}
.slide-menu li:last-child:after {
height: 0px;
}
.slide-menu li.active {
background: rgba(0,0,0,.5); color: #fff;
}
.slide-menu li a {
color: inherit; padding: 9px 18px; display: block;
}
.slide-menu li a:hover, .slide-menu li a:focus, .slide-menu li a:active {
text-decoration: none;
}
.control-arrows {
position: fixed; right: 20px; bottom: 20px; padding: 5px;
}
.control-arrows span {
display: block; font-size: 36px; color: #fff; -webkit-transition: all 0.7s; -moz-transition: all 0.7s; transition: all 0.7s;
}
.control-arrows span:hover {
cursor: pointer; color: #bcbcbc;
}
.control-arrows span.nope {
opacity: 0; pointer-events: none; cursor: initial;
}
.control-arrows span.go-down {
transform: translate(0, 100%);
}
.section h1 {
color: #fff; text-align: center; margin: 0;
}
.sorted {
display: block;
}
.sorted div {
display: inline-block; vertical-align: middle; text-align: center; width: 49%;
}
.sorted .left {
float: left; width: 50%;
}
.sorted .right {
float: right; width: 50%;
}
.sorted img {
display: inline-block; max-height: 30vh; width: auto; margin: 10px auto;
}
- bodyContent .section p, .section p, #bodyContent .footer p, .footer p {
color: #fff; text-align: center; margin: 0 5vw; font-size: 30px;
}
.footer ul {
color: #fff; list-style: none; padding-left: 20px;
}
.footer li ul li:before {
content: "- "
}
.footer a {
color: #fff;
}
.footer a:hover {
color: #ccc; text-decoration: none;
}
- bodyContent .section p.small, .section p.small, #bodyContent .footer p.small, .footer p.small {
font-size: 18px; margin-bottom: 10px;
}
.modal-title {
font-family: 'Open Sans', sans-serif;; text-align: center; font-size: 30px;
}
.modal-text {
font-size: 16px;
}
.std-section h2 {
text-align: center; font-family: 'Open Sans', sans-serif;; margin-top: 60px; padding-bottom: 10px;
}
.std-section h2:after, .modal-title:after {
content: ""; display: block; margin-top: 10px; height: 1px; width: 100%; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+20,cccccc+20,cccccc+80,000000+100&0+0,0.65+20,0.65+80,0+100 */ background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(204,204,204,0.65) 20%, rgba(204,204,204,0.65) 80%, rgba(0,0,0,0) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(204,204,204,0.65) 20%,rgba(204,204,204,0.65) 80%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(204,204,204,0.65) 20%,rgba(204,204,204,0.65) 80%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 */
}
.team-member {
font-family: 'Lato', sans-serif; margin-bottom: 30px; position: relative;
}
.team-member img {
margin: 0px auto;
}
.member-description p.meta {
color: #555; font-weight: 600;
}
.member-description p.meta::nth-child(2) {
margin-top: 80px;
}
.footer {
padding: 30px 0; background-color: #333;
}
.footer .logo {
display: block; margin: 40px auto; max-width: 100%; max-height: 20vh;
}
.footer .outlier {
position: absolute; bottom: -10px; text-align: center;
}
.section p a {
color: #ddd;
}
.section p a:hover, .section p a:visited, .section p a:active {
color: #eee; border-bottom: #eee solid 1px; text-decoration: none;
}
.section p a:visited, .section p a:active { border-bottom: none; }
.calendar-wrapper {
position: relative;
}
.calendar-wrapper.left {
-webkit-transition: transform 0.6s; transition: transform 0.6s; -webkit-transform: translate(-100%); transform: translate(-100%);
}
.calendar-wrapper.right {
-webkit-transition: transform 0.6s; transition: transform 0.6s; -webkit-transform: translate(100%); transform: translate(100%);
}
.calendar {
display: block; margin: 5vh auto;
}
.calendar-header {
color: #f0f0f0; text-align: center; font-size: 26px; padding: 10px; margin-bottom: 10px;
}
.calendar-header .controls {
float: right;
}
.calendar .event p {
font-size: 8px; text-align: left;
}
.calendar-header .controls span {
-webkit-user-select: none; user-select: none; -webkit-transition: transform 0.3s; transition: transform 0.3s; -webkit-transform: translate(0); transform: translate(0);
}
.calendar-header .controls span.disabled {
color: #aaa; cursor: not-allowed !important;
}
.calendar-header .controls span:first-child:hover:not(.disabled) {
cursor: pointer; -webkit-transform: translate(-5px); transform: translate(-5px);
}
.calendar-header .controls span:last-child:hover:not(.disabled) {
cursor: pointer; -webkit-transform: translate(5px); transform: translate(5px);
}
.calendar-header .controls span:active:not(.disabled) {
color: #ccc;
}
.calendar-grid.has-event {
background-color: #006400; cursor: pointer;
}
.calendar-header .month-name {
display: inline-block;
}
.calendar-row {
display: block; text-align: center;
}
.calendar-grid {
position: relative; float: left; width: 14.28%; height: 100px; border: #f0f0f0 solid 1px; margin: 0; border-left: none; border-top: none; color: #f0f0f0; padding: 2px;
}
.calendar-row:last-child .calendar-grid {
border-bottom: none;
}
.calendar-row .calendar-grid:last-child {
border-right: none;
}
.calendar-grid .day-number {
position: absolute; margin: 0; bottom: 2px; right: 8px; font-size: 18px;
}
.calendar-grid .event {
position: absolute; text-align: center; width: 100%; top: 50%; -webkit-transform: translate(0, -50%); transform: translate(0, -50%);
}
.calendar-grid .event img {
transition: all 0.3s ease-in-out; max-height: 25px; display: inline-block; margin: 3px; cursor: pointer;
}
.calendar-grid .event img:hover {
max-height: 40px;
}
.calendar-header .dropdown {
display: inline-block;
}
.calendar-header .dropdown button {
width: 130px; white-space: nowrap; position: relative; font-size: 20px; background-color: transparent; border: none; top: -5px;
}
.calendar-header .dropdown ul {
background-color: rgba(0,0,0,0.4); left: -14px;
}
.calendar-header .dropdown ul li {
padding: 5px 10px; font-size: 18px;
}
.calendar-header .dropdown ul li:hover {
cursor: pointer; background-color: rgba(0,0,0,0.4);
}
.calendar-legend {
display: block; margin: 30px auto;
}
.calendar-legend h2 {
color: #fff;
}
.calendar-legend ul {
text-align: center; padding-left: 0;
}
.calendar-legend li {
position: relative; display: inline-block;
}
.calendar-legend li .igemtooltip, .calendar-grid .igemtooltip {
color: #333; position: absolute; top: 0; left: 0; right: 0; background-color: #fff; border: #bcbcbc solid 1px; display: none; z-index: 50;
}
.calendar-legend li .igemtooltip p, .calendar-grid .igemtooltip p {
color: #333;
}
.calendar-legend li img, .calendar-legend li p {
margin: 0px 5px; display: inline-block; color: #fff;
}
.calendar-legend li img {
max-width: 50px;
}
.calendar-legend li:not(:last-child):after {
content: "-"; color: #fff; margin: 0px 20px;
}
.modal-content {
border-radius: 0;
}
.modal-header {
border-bottom: none; padding: 15px;
}
.modal-body {
padding: 0 15px 15px 15px;
}
.modal-body br {
margin: 20px;
}
.modal-main-image {
max-width: 100%; margin: 0px auto; display: block;
}
.modal-image-wrapper {
margin: 0px auto 25px auto;
}
.modal-footer {
border-top: none;
}
.slider-img {
background-repeat: no-repeat; background-size: cover; background-position: center; width: 100%; height: 0; padding-bottom: 75%;
}
- modalSlider .carousel-control {
background-image: none; color: #5bc0de;
}
- modalSlider .carousel-indicators {
bottom: 3.5%;
}
- modalSlider .carousel-indicators li {
border-color: #5bc0de; margin: 3px;
}
- modalSlider .carousel-indicators li.active {
background-color: #5bc0de;
}
- modalSlider .carousel-control span {
top: auto; bottom: 5%;
}
- modalSlider .carousel-inner:not(.no-after):after {
content: ""; position: absolute; height: 20%; width: 100%; bottom: 0; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.65+100 */ background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */
}
- modalSlider .carousel-inner.no-after .carousel-control {
opacity: 0.3;
}
- modalSlider .carousel-indicators.left {
bottom: initial; top: 50%; left: 0; margin-left: 0;
}
- modalSlider .carousel-indicators.left li {
display: block;
}
- bodyContent p.strong, p.strong {
font-size: 18px; font-weight: 800;
}
.std-section ul {
padding-left: 30px;
}
.std-section li {
font-size: 16px; list-style: initial;
}
.std-section td, .std-section th {
font-size: 16px;
}
.social-media {
text-align: center; display: block;
}
.social-media img {
display: inline-block; margin: 20px 5px; transition: all 0.3s; border-radius: 50%; max-width: 50px; cursor: pointer;
}
.social-media img:hover {
background-color: #3399cc;
}
@media (max-width: 767px) {
.main-nav, .nav-backdrop { height: 38px; }
.main-nav { z-index: 9500; }
.nav-backdrop { z-index: 9499; }
.logo img { height: 27px; }
.toggle-menu { width: 38px; height: 38px; padding: 6px 0; cursor: pointer; }
.burger { width: 22px; height: 3px; background-color: #fff; margin: 4px auto; }
.cover { background-attachment: scroll; height: 100vh; }
.main-nav .options-wrapper { display: block; position: fixed; left: 0; top: 0; bottom: 0; width: 200px; background: #333; margin-top: 0; -webkit-transform: translate(-100%); transform: translate(-100%); -webkit-transition: transform 0.3s; -moz-transition: transform 0.3s; transition: transform 0.3s; padding-top: 14px; }
.main-nav.open .options-wrapper { -webkit-transform: translate(0%); transform: translate(0%); } .main-nav .option.header { padding: 5px; text-align: left; }
.main-nav .option-item.active { border: 0; background-color: #33c; }
.main-nav .option-dropdown { display: block; opacity: 1; top: 0; border: none; padding: 0; background-color: #fafafa; max-height: 0; min-width: 100%; position: relative; overflow-y: hidden; -webkit-transition: max-height 0.3s; -moz-transition: max-height 0.3s; transition: max-height 0.3s; }
.main-nav .option-dropdown.open { border: #bcbcbc solid 1px; }
.main-nav .option-dropdown .option { padding: 5px; color: #333; white-space: nowrap; }
.main-nav .option-dropdown .option:hover { background-color: #ddd; }
.main-nav .option-dropdown a.option { color: #333; }
.main-nav .option-dropdown .option { display: block; }
.main-nav .option-item { padding: 4px 0; }
.main-nav .option.header+ .option-dropdown .option { transform: translate(0px); }
.slide-menu { left: 0; width: 100%; text-align: center; margin: 0 !important; }
.slide-menu li { display: inline-block; margin: 3px; }
.slide-menu li:after { bottom: 50%; height: 5px; width: 10px; left: 100%; transform: translate(0, 50%); }
.slide-menu li a { padding: 5px 10px; }
#bodyContent .section p, .section p { font-size: 20px; }
#bodyContent .section p.small, .section p.small { font-size: 14px; }
.control-arrows { display: none; }
}
@media (max-width: 550px) {
.parallax { max-height: 200px; padding: 45px 10px; }
.calendar-header .month-name { display: block; }
.calendar-header .controls { display: block; float: none; }
.calendar-grid { height: 120px; }
.calendar-legend li { display: block; margin: 20px; }
.calendar-legend li:not(:last-child):after { content: ""; }
}
@media (max-width: 450px) {
.slide-menu { bottom: 5px; }
.slide-menu li { margin: 0; }
.slide-menu li:after { width: 4px; }
.slide-menu li a { padding: 4px 8px; font-size: 10px; }
.section .sorted > div:not(.grow) { width: 24%; }
.section .sorted .grow { width: 74%; }
#bodyContent .section p, .section p { font-size: 14px; }
#bodyContent .section p.small, .section p.small { font-size: 12px; }
}
/* Collaboration CSS */
- vgemcollaboration {
margin: 0px auto; display: block;
background-image:url('https://static.igem.org/mediawiki/2016/d/de/T--Virginia--collabopen.png');
position: relative;
background-size:180px 220px; /*Adjust background-size and the width and height properties here if you wish to resize the icon*/ width:180px; height:220px; }
- vgemcollaboration:hover {
background-image:url('https://static.igem.org/mediawiki/2016/a/a5/T--Virginia--collabclosed.png'); }
- vgemcollaboration a {
display:inline-block; width:100%; height:100%; }