Team:Heidelberg/css/overrides

From 2014.igem.org

(Difference between revisions)
 
(131 intermediate revisions not shown)
Line 1: Line 1:
 +
body {
 +
background-color: black;
 +
}
 +
 +
a {
 +
color: #DE4230;
 +
}
 +
 +
a:hover {
 +
color: #AE2626;
 +
}
 +
 +
.nopadding{
 +
padding:0;
 +
}
 +
 +
/* NavBar */
 +
/* Show text underneath img */
nav li a img {
nav li a img {
-
display:block;
+
display:block;
 +
margin: 0 auto;
 +
height: 40px;
}
}
nav li a {
nav li a {
 +
text-align: center;
 +
}
 +
 +
/* Disable color change on hover or open */
 +
 +
/*.nav > li > a:hover, .nav > li > a:focus, .nav > li > a.active {
 +
background-image: url(/wiki/images/1/18/Heidelberg_Hover-light-bg.png);
 +
background-color: rgba(255,126,37, 0.5);
 +
}*/
 +
 +
.nav > li > a:hover, .nav > li > a:focus, .nav > li > a.active {
 +
background-color: transparent;
 +
border-color: transparent;
 +
}
 +
 +
/* Enlarge Icons on hover */
 +
.nav > li > a:hover > img {
 +
transform: scale(1.15);
 +
-webkit-transform: scale(1.15);
 +
-moz-transform: scale(1.15);
 +
-o-transform: scale(1.15);
 +
-ms-transform: scale(1.15);
 +
}
 +
 +
.nav > li > a > img {
 +
transition:transform 0.15s ease;
 +
-webkit-transition:-webkit-transform 0.15s ease;
 +
-moz-transition:-moz-transform 0.15s ease;
 +
-o-transition:-o-transform 0.15s ease;
 +
}
 +
 +
.nav .open > a, .nav .open > a:hover, .nav .open > a:focus, .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
 +
background-color: transparent;
 +
border-color: transparent;
 +
}
 +
 +
/* less space for iGEM logo */
 +
#logo {
 +
width: 5%;
 +
}
 +
 +
#logo a {
 +
padding-left:0;
 +
padding-right:0;
 +
}
 +
#navbar{
 +
margin-bottom: 0;
 +
}
 +
 +
/* Change Text color dependent on background */
 +
 +
.navbar-red li a {
 +
color: #DE4230;
 +
}
 +
 +
.navbar-white li a {
 +
color: white;
 +
}
 +
 +
.navbar-red .title-wrapper {
 +
color: #DE4230;
 +
}
 +
 +
.navbar-white .title-wrapper {
 +
color: white;
 +
}
 +
 +
.dropdown-menu li a {
 +
color: #333;
 +
}
 +
 +
.dropdown-menu li a:hover {
 +
background-color: #e0e0e0;
 +
}
 +
 +
/* Override Bootstrap Dropdown positioning */
 +
.navbar-right .dropdown-menu {
 +
left: auto;
 +
right: auto;
 +
}
 +
/*
 +
#navbar .container {
 +
border-bottom: solid 5px #ce432e;
 +
}
 +
*/
 +
 +
/* Align Title Baseline to start of container */
 +
 +
.title-wrapper{
 +
height:30px;
 +
}
 +
 +
.title {
 +
font-size: 30px;
 +
line-height: 30px;
 +
font-weight:bold;
 +
}
 +
 +
.special-span{
 +
display:inline-block;
 +
height: 30px;
 +
}
 +
 +
/* Move Subtitle up a bit */
 +
 +
.subtitle h2 {
 +
margin-top:0;
 +
margin-bottom: 15px;
 +
}
 +
 +
@media (min-width: 768px) {
 +
.title-wrapper{
 +
height: 47px;
 +
}
 +
 +
.title {
 +
font-size: 47px;
 +
line-height: 47px;
 +
}
 +
 +
.special-span{
 +
display:inline-block;
 +
height: 47px;
 +
}
 +
 +
.navbar-nav.navbar-right:last-child {
 +
margin-right: 0;
 +
}
 +
}
 +
 +
@media (min-width: 992px) {
 +
.title-wrapper{
 +
height:65px;
 +
}
 +
 +
.title {
 +
font-size: 65px;
 +
line-height: 65px;
 +
}
 +
 +
.special-span{
 +
display:inline-block;
 +
height: 65px;
 +
}
 +
 +
}
 +
@media (min-width: 1200px) {
 +
.title-wrapper{
 +
height:80px;
 +
}
 +
 +
.title {
 +
font-size: 80px;
 +
line-height: 80px;
 +
}
 +
 +
.special-span{
 +
display:inline-block;
 +
height: 80px;
 +
}
 +
/* Prevent Wrap of linktext if enough space available */
 +
.nav > li > a{
 +
white-space: nowrap;
 +
}
 +
}
 +
 +
 +
/* Spread list elements equaly over width of ul*/
 +
.navbar-nav > li {
 +
width: 11.874%;
 +
}
 +
 +
/* only use 90% of the total width, leaving space for logo */
 +
.navbar-nav {
 +
width: 80%;
 +
}
 +
 +
.navbar-header img {
 +
height: 70px;
 +
}
 +
/* Display collapse button */
 +
.navbar-toggle {
 +
padding: 30px 10px;
 +
}
 +
 +
.navbar-red .navbar-toggle .icon-bar {
 +
background-color: #DE4230;
 +
}
 +
 +
.navbar-white .navbar-toggle .icon-bar {
 +
background-color: white;
 +
}
 +
 +
/* Display Navigation Dropdown on hover */
 +
 +
@media (min-width: 768px) {
 +
.dropdown:hover .dropdown-menu {
 +
display: block;
 +
}
 +
}
 +
 +
.dark-grey {
 +
  background-color: #515151;
 +
}
 +
 +
.grey {
 +
  background-color: #bfbfbf;
 +
}
 +
 +
.light-grey {
 +
  background-color: #e0e0e0;
 +
}
 +
 +
.light-red-text {
 +
  color: #FF7E25;
 +
}
 +
 +
.red-text {
 +
  color: #DE4230;
 +
}
 +
 +
.dark-red-text {
 +
  color: #AE2726;
 +
}
 +
 +
.light-grey-text {
 +
  color: #e0e0e0;
 +
}
 +
 +
.grey-text {
 +
  color: #bfbfbf;
 +
}
 +
 +
.dark-grey-text {
 +
  color: #515151;
 +
}
 +
 +
.middle {
 +
font-size: 3em;
 +
}
 +
 +
.large {
 +
font-size: 5em;
 +
font-weight: bold;
 +
}
 +
 +
.main {
 +
margin-top: 10px;
 +
margin-bottom: 20px;
 +
padding-left: 30px;
 +
padding-right: 30px;
 +
}
 +
 +
/* Change highlighting color of thumbnails */
 +
a.thumbnail:hover, a.thumbnail:focus, a.thumbnail.active {
 +
border-color: #DE4230;
 +
}
 +
 +
/* remove overrides above, so img is next to text in collapsed view */
 +
@media (max-width: 768px) {
 +
nav li a {
 +
text-align: left !important;
 +
}
 +
nav li span {
 +
display: inline-block;
 +
width: 60px;
 +
text-align: center;
 +
}
 +
nav li img {
 +
display:inline !important;
 +
margin: 0 !important;
 +
padding-right: 5px !important;
 +
}
 +
.navbar-nav > li {
 +
width: auto !important;
 +
}
 +
.navbar-nav {
 +
width: 100%;
 +
}
 +
}
 +
 +
.titles .label-default {
 +
background-color: #E0E0E0;
 +
border-radius: 0;
 +
font-weight: normal;
 +
margin-bottom: 5px;
 +
display: inline-block;
 +
color: #333;
 +
}
 +
 +
.titles .label-default:hover, .titles .label-default.active {
 +
background-color: #515151;
 +
color: white;
 +
}
 +
 +
.pageicon {
 +
position:absolute;
 +
top: -50%;
 +
}
 +
 +
/* Hide Edit and Table of contents generated by Mediawiki */
 +
 +
#toc {
 +
display:none;
 +
}
 +
 +
.editsection {
 +
display:none;
 +
}
 +
 +
.abstract {
 +
margin-bottom: 0;
 +
background-color: #E0E0E0;
 +
}
 +
 +
.underline {
 +
border-bottom: 1px solid #515151;
 +
padding-bottom: 3px;
 +
}
 +
blockquote {
 +
border-left: 5px solid #DE4230;
 +
}
 +
 +
/* Color in buttons */
 +
.btn-hd {
 +
background-color: #DE4230;
 +
color: white;
 +
}
 +
 +
.btn-hd:hover {
 +
background-color: #AE2726;
 +
color: white;
 +
}
 +
 +
.btn-hd.active {
 +
background-color: #AE2726;
 +
color: white;
 +
}
 +
 +
.toolbox-icons-bar {
text-align: center;
text-align: center;
 +
}
 +
 +
.toolbox-icons-bar a {
 +
display:block;
 +
margin-bottom:15px;
 +
white-space: nowrap;
 +
color: white;
 +
font-size: 1.7em;
 +
}
 +
 +
.toolbox-icons-bar a:hover {
 +
color: #FF7E25;
 +
}
 +
 +
.toolbox-icons-bar img {
 +
margin-bottom: 10px;
 +
}
 +
 +
.nofloat {
 +
float: none;
 +
display: block;
 +
}
 +
 +
/* Reduce font size in thumbnails */
 +
.caption {
 +
font-size: 12px;
}
}

Latest revision as of 15:45, 14 October 2014

body { background-color: black; }

a { color: #DE4230; }

a:hover { color: #AE2626; }

.nopadding{ padding:0; }

/* NavBar */ /* Show text underneath img */ nav li a img { display:block; margin: 0 auto; height: 40px; } nav li a { text-align: center; }

/* Disable color change on hover or open */

/*.nav > li > a:hover, .nav > li > a:focus, .nav > li > a.active { background-image: url(/wiki/images/1/18/Heidelberg_Hover-light-bg.png); background-color: rgba(255,126,37, 0.5); }*/

.nav > li > a:hover, .nav > li > a:focus, .nav > li > a.active { background-color: transparent; border-color: transparent; }

/* Enlarge Icons on hover */ .nav > li > a:hover > img { transform: scale(1.15); -webkit-transform: scale(1.15); -moz-transform: scale(1.15); -o-transform: scale(1.15); -ms-transform: scale(1.15); }

.nav > li > a > img { transition:transform 0.15s ease; -webkit-transition:-webkit-transform 0.15s ease; -moz-transition:-moz-transform 0.15s ease; -o-transition:-o-transform 0.15s ease; }

.nav .open > a, .nav .open > a:hover, .nav .open > a:focus, .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { background-color: transparent; border-color: transparent; }

/* less space for iGEM logo */

  1. logo {

width: 5%; }

  1. logo a {

padding-left:0; padding-right:0; }

  1. navbar{

margin-bottom: 0; }

/* Change Text color dependent on background */

.navbar-red li a { color: #DE4230; }

.navbar-white li a { color: white; }

.navbar-red .title-wrapper { color: #DE4230; }

.navbar-white .title-wrapper { color: white; }

.dropdown-menu li a { color: #333; }

.dropdown-menu li a:hover { background-color: #e0e0e0; }

/* Override Bootstrap Dropdown positioning */ .navbar-right .dropdown-menu { left: auto; right: auto; } /*

  1. navbar .container {

border-bottom: solid 5px #ce432e; }

  • /

/* Align Title Baseline to start of container */

.title-wrapper{ height:30px; }

.title { font-size: 30px; line-height: 30px; font-weight:bold; }

.special-span{ display:inline-block; height: 30px; }

/* Move Subtitle up a bit */

.subtitle h2 { margin-top:0; margin-bottom: 15px; }

@media (min-width: 768px) { .title-wrapper{ height: 47px; }

.title { font-size: 47px; line-height: 47px; }

.special-span{ display:inline-block; height: 47px; }

.navbar-nav.navbar-right:last-child { margin-right: 0; } }

@media (min-width: 992px) { .title-wrapper{ height:65px; }

.title { font-size: 65px; line-height: 65px; }

.special-span{ display:inline-block; height: 65px; }

} @media (min-width: 1200px) { .title-wrapper{ height:80px; }

.title { font-size: 80px; line-height: 80px; }

.special-span{ display:inline-block; height: 80px; } /* Prevent Wrap of linktext if enough space available */ .nav > li > a{ white-space: nowrap; } }


/* Spread list elements equaly over width of ul*/ .navbar-nav > li { width: 11.874%; }

/* only use 90% of the total width, leaving space for logo */ .navbar-nav { width: 80%; }

.navbar-header img { height: 70px; } /* Display collapse button */ .navbar-toggle { padding: 30px 10px; }

.navbar-red .navbar-toggle .icon-bar { background-color: #DE4230; }

.navbar-white .navbar-toggle .icon-bar { background-color: white; }

/* Display Navigation Dropdown on hover */

@media (min-width: 768px) { .dropdown:hover .dropdown-menu { display: block; } }

.dark-grey { 

 background-color: #515151;

}

.grey { 

 background-color: #bfbfbf;

}

.light-grey { 

 background-color: #e0e0e0;

}

.light-red-text { 

  color: #FF7E25;

}

.red-text { 

  color: #DE4230;

}

.dark-red-text { 

  color: #AE2726;

}

.light-grey-text { 

 color: #e0e0e0;

}

.grey-text { 

  color: #bfbfbf;

}

.dark-grey-text { 

 color: #515151;

}

.middle { font-size: 3em; }

.large { font-size: 5em; font-weight: bold; }

.main { margin-top: 10px; margin-bottom: 20px; padding-left: 30px; padding-right: 30px; }

/* Change highlighting color of thumbnails */ a.thumbnail:hover, a.thumbnail:focus, a.thumbnail.active { border-color: #DE4230; }

/* remove overrides above, so img is next to text in collapsed view */ @media (max-width: 768px) { nav li a { text-align: left !important; } nav li span { display: inline-block; width: 60px; text-align: center; } nav li img { display:inline !important; margin: 0 !important; padding-right: 5px !important; } .navbar-nav > li { width: auto !important; } .navbar-nav { width: 100%; } }

.titles .label-default { background-color: #E0E0E0; border-radius: 0; font-weight: normal; margin-bottom: 5px; display: inline-block; color: #333; }

.titles .label-default:hover, .titles .label-default.active { background-color: #515151; color: white; }

.pageicon { position:absolute; top: -50%; }

/* Hide Edit and Table of contents generated by Mediawiki */

  1. toc {

display:none; }

.editsection { display:none; }

.abstract { margin-bottom: 0; background-color: #E0E0E0; }

.underline { border-bottom: 1px solid #515151; padding-bottom: 3px; } blockquote { border-left: 5px solid #DE4230; }

/* Color in buttons */ .btn-hd { background-color: #DE4230; color: white; }

.btn-hd:hover { background-color: #AE2726; color: white; }

.btn-hd.active { background-color: #AE2726; color: white; }

.toolbox-icons-bar { text-align: center; }

.toolbox-icons-bar a { display:block; margin-bottom:15px; white-space: nowrap; color: white; font-size: 1.7em; }

.toolbox-icons-bar a:hover { color: #FF7E25; }

.toolbox-icons-bar img { margin-bottom: 10px; }

.nofloat { float: none; display: block; }

/* Reduce font size in thumbnails */ .caption { font-size: 12px; }

Retrieved from "http://2014.igem.org/Team:Heidelberg/css/overrides"