Difference between revisions of "Template:Franconia/CSS"

Revision as of 20:26, 10 July 2017

/**

• OUR CSS MODIFICATION GOES HERE
• COPY TO https://2017.igem.org/Template:Franconia/CSS
• /

@import url('https://fonts.googleapis.com/css?family=Open+Sans');

/* VARIABLES */ body { --tint-color: #449dd1; }

/* REMOVE IGEM STYLES */

1. globalWrapper{

padding-bottom: 0; }

.igem_2017_content_wrapper { margin: 100px 0 0 0 !important; width: auto !important; }

.igem_2017_content_wrapper p { font-size: 1em !important; }

.igem_2017_content_wrapper a { text-decoration: none !important; }

/* GENERAL STYLING */

• {

font-family: "Helvetica Neue", "Open Sans", sans-serif; }

div .dark { background-color: #333230; color: white; }

div .dark h1, h2 { color: inherit; }

div.light, div .dark { padding: 20px 10px; }

.anchor { padding-top: 100px; margin-top: -100px; }

/* NAVIGATION */ @media (max-width: 1024px) { /* Collapse Navbar earlier */ .navbar-header { float: none; }

.navbar-left, .navbar-right { float: none !important; }

.navbar-toggle { display: block; }

.navbar-collapse { border-top: 1px solid transparent; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); }

.navbar-fixed-top { top: 0; border-width: 0 0 1px; }

.navbar-collapse.collapse { display: none !important; }

.navbar-nav { float: none !important; margin-top: 7.5px; }

.navbar-nav > li { float: none; }

.navbar-nav > li > a { padding-top: 10px; padding-bottom: 10px; }

.collapse.in { display: block !important; } }

.navbar-default { padding-top: 20px; background-color: rgba(255, 255, 255, 0.95); border: none; }

.navbar > .container { margin-left: 0; }

.navbar-brand { background-image: url("/wiki/images/1/17/T--Erlangen_Nuremberg--Logo.png"); background-size: contain; width: 100px; height: 100px; margin-right: 20px; }

.navbar > .container .navbar-brand, .navbar > .container-fluid .navbar-brand { margin-left: 0; }

.nav li a { position: relative; display: block; border-radius: 0 20px 20px 20px; background-color: var(--tint-color); text-transform: uppercase; letter-spacing: 1.5px; margin-left: 10px; color: #fff; font-size: 70%; }

.navbar-default .navbar-nav > li > a { color: #fff; }

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus, .dropdown-menu > li > .active > a, .dropdown-menu > li > .active > a:focus, .dropdown-menu > li > .actice > a:hover, .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { background-color: #333230; color: #fff; }

.dropdown .dropdown-menu li a { color: white; }

.dropdown:hover .dropdown-menu { display: inline-block;

}

.dropdown-menu li { margin-top: 5px; margin-right: 15px; }

.navbar > .container { width: 100%; }

.dropdown-menu { background-color: transparent; border: none; box-shadow: none; }

.navbar-toggle { margin-top: 28px; }

.navbar-default .navbar-toggle { height: 50px; width: 50px; z-index: 1; border-color: var(--tint-color); }

.navbar-default .navbar-toggle .icon-bar { width: 28px; transition: .5s ease; background-color: var(--tint-color); }

.navbar-toggle.collapsed .icon-bar:nth-child(2) { transform: rotate(0) translateY(0) translateX(0); }

.navbar-toggle.collapsed .icon-bar:nth-child(3) { opacity: 1 }

.navbar-toggle.collapsed .icon-bar:nth-child(4) { transform: rotate(0) translateY(0) translateX(0); }

.navbar-toggle .icon-bar:nth-child(2) { transform: rotate(-45deg) translateY(5px) translateX(-5px); }

.navbar-toggle .icon-bar:nth-child(3) { opacity: 0 }

.navbar-toggle .icon-bar:nth-child(4) { transform: rotate(45deg) translateY(-4px) translateX(-3px); }

@media (min-width: 768px) { .navbar-nav { margin-top: 20px !important; float: right; } }

/* SIDE NAVIGATION */

.sidenav-wrapper { z-index: 10; }

@media (min-width: 768px) { #sidenav { position: fixed; } }