Team:Heidelberg/css/overrides
From 2014.igem.org
(77 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
+ | body { | ||
+ | background-color: black; | ||
+ | } | ||
+ | |||
+ | a { | ||
+ | color: #DE4230; | ||
+ | } | ||
+ | |||
+ | a:hover { | ||
+ | color: #AE2626; | ||
+ | } | ||
+ | |||
+ | .nopadding{ | ||
+ | padding:0; | ||
+ | } | ||
+ | |||
/* NavBar */ | /* NavBar */ | ||
/* Show text underneath img */ | /* Show text underneath img */ | ||
Line 10: | Line 26: | ||
} | } | ||
- | /* Disable color change on hover */ | + | /* Disable color change on hover or open */ |
- | .nav > li > a:hover, .nav > li > a:focus{ | + | /*.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; | 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{ | #navbar{ | ||
margin-bottom: 0; | margin-bottom: 0; | ||
Line 23: | Line 75: | ||
.navbar-red li a { | .navbar-red li a { | ||
- | color: # | + | color: #DE4230; |
} | } | ||
Line 31: | Line 83: | ||
.navbar-red .title-wrapper { | .navbar-red .title-wrapper { | ||
- | color: # | + | color: #DE4230; |
} | } | ||
Line 38: | Line 90: | ||
} | } | ||
+ | .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 { | #navbar .container { | ||
Line 48: | Line 113: | ||
.title-wrapper{ | .title-wrapper{ | ||
height:30px; | height:30px; | ||
- | |||
} | } | ||
Line 60: | Line 124: | ||
display:inline-block; | display:inline-block; | ||
height: 30px; | height: 30px; | ||
+ | } | ||
+ | |||
+ | /* Move Subtitle up a bit */ | ||
+ | |||
+ | .subtitle h2 { | ||
+ | margin-top:0; | ||
+ | margin-bottom: 15px; | ||
} | } | ||
@media (min-width: 768px) { | @media (min-width: 768px) { | ||
.title-wrapper{ | .title-wrapper{ | ||
- | height: | + | height: 47px; |
} | } | ||
.title { | .title { | ||
- | font-size: | + | font-size: 47px; |
- | line-height: | + | line-height: 47px; |
} | } | ||
.special-span{ | .special-span{ | ||
display:inline-block; | display:inline-block; | ||
- | height: | + | height: 47px; |
+ | } | ||
+ | |||
+ | .navbar-nav.navbar-right:last-child { | ||
+ | margin-right: 0; | ||
} | } | ||
} | } | ||
Line 80: | Line 155: | ||
@media (min-width: 992px) { | @media (min-width: 992px) { | ||
.title-wrapper{ | .title-wrapper{ | ||
- | height: | + | height:65px; |
} | } | ||
.title { | .title { | ||
- | font-size: | + | font-size: 65px; |
- | line-height: | + | line-height: 65px; |
} | } | ||
.special-span{ | .special-span{ | ||
display:inline-block; | display:inline-block; | ||
- | height: | + | height: 65px; |
} | } | ||
Line 107: | Line 182: | ||
display:inline-block; | display:inline-block; | ||
height: 80px; | height: 80px; | ||
+ | } | ||
+ | /* Prevent Wrap of linktext if enough space available */ | ||
+ | .nav > li > a{ | ||
+ | white-space: nowrap; | ||
} | } | ||
} | } | ||
Line 113: | Line 192: | ||
/* Spread list elements equaly over width of ul*/ | /* Spread list elements equaly over width of ul*/ | ||
.navbar-nav > li { | .navbar-nav > li { | ||
- | width: | + | width: 11.874%; |
} | } | ||
- | /* only use | + | /* only use 90% of the total width, leaving space for logo */ |
.navbar-nav { | .navbar-nav { | ||
- | width: | + | width: 80%; |
} | } | ||
Line 129: | Line 208: | ||
} | } | ||
- | .navbar-toggle .icon-bar { | + | .navbar-red .navbar-toggle .icon-bar { |
- | background-color: # | + | background-color: #DE4230; |
} | } | ||
- | + | .navbar-white .navbar-toggle .icon-bar { | |
- | . | + | background-color: white; |
- | + | ||
- | + | ||
- | + | ||
- | . | + | |
- | + | ||
- | + | ||
} | } | ||
Line 156: | Line 229: | ||
.grey { | .grey { | ||
+ | background-color: #bfbfbf; | ||
+ | } | ||
+ | |||
+ | .light-grey { | ||
background-color: #e0e0e0; | background-color: #e0e0e0; | ||
} | } | ||
- | .red { | + | .light-red-text { |
- | + | color: #FF7E25; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
.red-text { | .red-text { | ||
- | color: # | + | color: #DE4230; |
+ | } | ||
+ | |||
+ | .dark-red-text { | ||
+ | color: #AE2726; | ||
+ | } | ||
+ | |||
+ | .light-grey-text { | ||
+ | color: #e0e0e0; | ||
} | } | ||
.grey-text { | .grey-text { | ||
- | color: # | + | color: #bfbfbf; |
+ | } | ||
+ | |||
+ | .dark-grey-text { | ||
+ | color: #515151; | ||
+ | } | ||
+ | |||
+ | .middle { | ||
+ | font-size: 3em; | ||
+ | } | ||
+ | |||
+ | .large { | ||
+ | font-size: 5em; | ||
+ | font-weight: bold; | ||
} | } | ||
.main { | .main { | ||
- | margin-top: - | + | margin-top: 10px; |
+ | margin-bottom: 20px; | ||
+ | padding-left: 30px; | ||
+ | padding-right: 30px; | ||
} | } | ||
/* Change highlighting color of thumbnails */ | /* Change highlighting color of thumbnails */ | ||
a.thumbnail:hover, a.thumbnail:focus, a.thumbnail.active { | a.thumbnail:hover, a.thumbnail:focus, a.thumbnail.active { | ||
- | border-color: # | + | border-color: #DE4230; |
} | } | ||
Line 209: | Line 304: | ||
} | } | ||
- | . | + | .titles .label-default { |
- | + | background-color: #E0E0E0; | |
- | + | ||
- | + | ||
- | background-color: # | + | |
border-radius: 0; | border-radius: 0; | ||
font-weight: normal; | font-weight: normal; | ||
margin-bottom: 5px; | margin-bottom: 5px; | ||
display: inline-block; | display: inline-block; | ||
+ | color: #333; | ||
} | } | ||
- | . | + | .titles .label-default:hover, .titles .label-default.active { |
- | background-color: # | + | background-color: #515151; |
+ | color: white; | ||
} | } | ||
Line 241: | Line 335: | ||
.abstract { | .abstract { | ||
margin-bottom: 0; | margin-bottom: 0; | ||
- | background-color: # | + | background-color: #E0E0E0; |
} | } | ||
Line 247: | Line 341: | ||
border-bottom: 1px solid #515151; | border-bottom: 1px solid #515151; | ||
padding-bottom: 3px; | 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; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } |
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 */
- 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; }
.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; }