Team:Heidelberg/css/overrides

From 2014.igem.org

(Difference between revisions)
 
(85 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 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{
#navbar{
margin-bottom: 0;
margin-bottom: 0;
Line 17: Line 75:
.navbar-red li a {
.navbar-red li a {
-
color: #ad342a;
+
color: #DE4230;
}
}
Line 24: Line 82:
}
}
 +
.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 {
#navbar .container {
Line 47: Line 126:
}
}
 +
/* 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) {
@media (min-width: 992px) {
.title-wrapper{
.title-wrapper{
-
height:60px;
+
height:65px;
}
}
.title {
.title {
-
font-size: 60px;
+
font-size: 65px;
-
line-height: 60px;
+
line-height: 65px;
-
font-weight:bold;
+
}
}
.special-span{
.special-span{
display:inline-block;
display:inline-block;
-
height: 60px;
+
height: 65px;
}
}
Line 73: Line 177:
font-size: 80px;
font-size: 80px;
line-height: 80px;
line-height: 80px;
-
font-weight:bold;
 
}
}
Line 79: 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 85: 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: 12.5%;
+
width: 11.874%;
}
}
-
/* only use 85% of the total width, leaving space for logo */
+
/* only use 90% of the total width, leaving space for logo */
.navbar-nav {
.navbar-nav {
-
width: 85%;
+
width: 80%;
}
}
Line 101: Line 208:
}
}
-
.navbar-toggle .icon-bar {
+
.navbar-red .navbar-toggle .icon-bar {
-
background-color: #ad342a;
+
background-color: #DE4230;
}
}
-
/* Center Dropdowns */
+
.navbar-white .navbar-toggle .icon-bar {
-
.centerDropdown {
+
background-color: white;
-
    left: auto !important;
+
-
    right: -25% !important;
+
-
}
+
-
.centerDropdown::after {
+
-
  left: auto !important;
+
-
  right: 45% !important;
+
}
}
Line 128: Line 229:
.grey {
.grey {
 +
  background-color: #bfbfbf;
 +
}
 +
 +
.light-grey {
   background-color: #e0e0e0;
   background-color: #e0e0e0;
}
}
-
.red {
+
.light-red-text {
-
  background-color: #ad342a;
+
  color: #FF7E25;
-
  background-image: url(/wiki/images/8/85/Heidelberg_Firering_half.png);
+
-
  background-position-x: 90%;
+
-
  background-position-y: 100%;
+
-
  background-size: auto 300px;
+
-
  background-repeat: no-repeat;
+
-
  color: white;
+
}
}
 +
.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 {
.main {
-
margin-top: -2px;
+
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: #ad342a;
+
border-color: #DE4230;
}
}
Line 175: Line 304:
}
}
-
.hashtags{
+
.titles .label-default {
-
margin-bottom: -5px;
+
background-color: #E0E0E0;
-
}
+
-
.hashtags a.label-default {
+
-
background-color: #515151;
+
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;
}
}
-
.hashtags a.label-default:hover {
+
.titles .label-default:hover, .titles .label-default.active {
-
background-color: #ad342a;
+
background-color: #515151;
 +
color: white;
}
}
Line 207: Line 335:
.abstract {
.abstract {
margin-bottom: 0;
margin-bottom: 0;
-
background-color: #e0e0e0;
+
background-color: #E0E0E0;
}
}
Line 213: 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 */

  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"