Difference between revisions of "Template:Cologne-Duesseldorf/css"
| Line 1: | Line 1: | ||
<html> | <html> | ||
<style> | <style> | ||
| − | @import url('https://fonts.googleapis.com/css?family=Lato|Roboto'); | + | @import url('https://fonts.googleapis.com/css?family=Lato|Roboto'); |
| − | + | /******Wiki Styles*************************************/ | |
| − | + | ||
| − | /******Wiki Styles*************************************/ | + | html { |
| − | + | font-size: 16px; | |
| − | html { | + | } |
| − | + | ||
| − | } | + | |
body { | body { | ||
background-color: #fff; | background-color: #fff; | ||
| Line 15: | Line 13: | ||
margin: 0; | margin: 0; | ||
/*margin-top: 20px;*/ | /*margin-top: 20px;*/ | ||
| + | |||
margin-top: 18px; | margin-top: 18px; | ||
padding: 0; | padding: 0; | ||
| Line 32: | Line 31: | ||
} | } | ||
/*the igem menu bar*/ | /*the igem menu bar*/ | ||
| − | + | ||
#top_menu_14 { | #top_menu_14 { | ||
position: fixed; | position: fixed; | ||
| Line 52: | Line 51: | ||
position: relative; | position: relative; | ||
} | } | ||
| − | |||
#content * { | #content * { | ||
| − | box-sizing: border-box; | + | box-sizing: border-box; |
} | } | ||
#top_title { | #top_title { | ||
| Line 98: | Line 96: | ||
z-index: 100; | z-index: 100; | ||
} | } | ||
| − | |||
#footer { | #footer { | ||
| − | font-size:100%; | + | font-size: 100%; |
} | } | ||
| − | |||
| − | |||
/*************WIKI FONTS**************/ | /*************WIKI FONTS**************/ | ||
| Line 144: | Line 139: | ||
margin: 0 0 0.5rem 0; | margin: 0 0 0.5rem 0; | ||
} | } | ||
| − | |||
#HQ_page p { | #HQ_page p { | ||
font-family: 'Roboto', sans-serif; | font-family: 'Roboto', sans-serif; | ||
| Line 150: | Line 144: | ||
text-align: justify; | text-align: justify; | ||
} | } | ||
| − | |||
#HQ_page table { | #HQ_page table { | ||
| − | + | border: none; | |
| − | + | border-collapse: collapse; | |
| − | + | width: 100%; | |
| − | + | margin: 0; | |
| − | + | ||
} | } | ||
table { | table { | ||
| Line 163: | Line 155: | ||
color: black; | color: black; | ||
} | } | ||
| − | |||
#HQ_page th { | #HQ_page th { | ||
| − | + | background-color: inherit; | |
| − | + | padding: 0; | |
| − | + | color: black; | |
| − | + | border: none; | |
| − | + | border-collapse: collapse; | |
| − | + | vertical-align: text-top; | |
} | } | ||
| − | |||
#HQ_page td { | #HQ_page td { | ||
| − | + | padding: 0; | |
| − | + | border: none; | |
| − | + | border-collapse: collapse; | |
| − | + | vertical-align: text-top; | |
} | } | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
/****************** SITE STYLES ****** | /****************** SITE STYLES ****** | ||
*************************************/ | *************************************/ | ||
| − | + | body { | |
| − | + | margin: 0px; | |
| − | + | padding: 0px; | |
| − | body{ | + | |
| − | margin:0px; | + | |
| − | padding:0px; | + | |
font-family: 'Roboto', sans-serif; | font-family: 'Roboto', sans-serif; | ||
background: #149375; | background: #149375; | ||
overflow-x: hidden; | overflow-x: hidden; | ||
} | } | ||
| − | + | body.inactive { | |
| − | body.inactive{ | + | background-color: rgba(0, 0, 0, 0.5); |
| − | background-color: rgba(0,0,0,0.5); | + | |
} | } | ||
| − | + | img { | |
| − | + | display: flex; | |
| − | img{ | + | margin: auto; |
| − | + | height: auto; | |
| − | + | max-width: 100%; | |
| − | + | ||
| − | + | ||
} | } | ||
| − | |||
#container .flex { | #container .flex { | ||
| − | + | display: flex; | |
} | } | ||
| − | |||
#container .col50 { | #container .col50 { | ||
width: 50%; | width: 50%; | ||
} | } | ||
| − | |||
#container .col33 { | #container .col33 { | ||
width: 33%; | width: 33%; | ||
} | } | ||
| − | |||
#container .col66 { | #container .col66 { | ||
width: 66%; | width: 66%; | ||
} | } | ||
| − | |||
#container .flex-gallery { | #container .flex-gallery { | ||
| − | + | display: flex; | |
| − | + | flex-flow: row wrap; | |
| − | + | justify-content: flex-start; | |
} | } | ||
| − | |||
#container .flex-gallery a { | #container .flex-gallery a { | ||
| − | + | margin: 10px; | |
} | } | ||
| − | |||
#container .flex-gallery a img { | #container .flex-gallery a img { | ||
| − | + | width: 200px; | |
| − | + | height: auto; | |
| − | + | filter: grayscale(100%); | |
| − | + | transition: all 0.5s ease; | |
} | } | ||
| − | |||
#container .flex-gallery a img:hover { | #container .flex-gallery a img:hover { | ||
| − | + | filter: grayscale(0%); | |
} | } | ||
| − | |||
#container .modalDialog { | #container .modalDialog { | ||
| − | + | position: fixed; | |
| − | + | top: 0; | |
| − | + | right: 0; | |
| − | + | bottom: 0; | |
| − | + | left: 0; | |
| − | + | background: rgba(0, 0, 0, 0.8); | |
| − | + | z-index: 99999; | |
| − | + | opacity: 0; | |
| − | + | transition: opacity 400ms ease-in; | |
| − | + | pointer-events: none; | |
} | } | ||
| − | |||
#container .modalDialog:target { | #container .modalDialog:target { | ||
| − | + | opacity: 1; | |
| − | + | pointer-events: auto; | |
} | } | ||
| − | |||
#container .modalDialog>div { | #container .modalDialog>div { | ||
| − | + | position: absolute; | |
| − | + | width: 70vw; | |
| − | + | top: 15vw; | |
| − | + | left: 15vw; | |
| − | + | border-radius: 20px; | |
| − | + | background: #fff; | |
} | } | ||
| − | + | #container .modalDialog > .flex { | |
| − | #container .modalDialog > .flex{ | + | flex-direction: row; |
| − | + | ||
} | } | ||
| − | #container .modalDialog > .flex > div{ | + | #container .modalDialog > .flex > div { |
| − | + | padding: 25px; | |
} | } | ||
| − | |||
#container a.close { | #container a.close { | ||
| − | + | font-size: 24pt; | |
| − | + | z-index: 3; | |
| − | + | position: fixed; | |
| − | + | right: 10vw; | |
| − | + | top: 10vw; | |
| − | + | display: flex; | |
| − | + | flex-direction: row; | |
| − | + | justify-content: center; | |
| − | + | align-items: center; | |
| − | + | width: 20px; | |
| − | + | height: 20px; | |
| − | + | cursor: pointer; | |
| − | + | padding: 28px; | |
| − | + | border: 3px solid white; | |
| − | + | border-radius: 100%; | |
| − | + | box-shadow: 0px 4px 12px 2px rgba(0, 0, 0, 0.3); | |
} | } | ||
| − | |||
#container a.close { | #container a.close { | ||
background: #149375; | background: #149375; | ||
color: white; | color: white; | ||
} | } | ||
| − | |||
#container a.close:visited { | #container a.close:visited { | ||
color: white; | color: white; | ||
} | } | ||
| − | |||
| − | |||
#container a.close:hover { | #container a.close:hover { | ||
border: 3px solid black; | border: 3px solid black; | ||
color: black; | color: black; | ||
} | } | ||
| − | |||
#container h1, | #container h1, | ||
h2, | h2, | ||
| Line 327: | Line 288: | ||
} | } | ||
#container h1 { | #container h1 { | ||
| − | + | font-size: 2.986em; | |
| − | + | margin-top: 0; | |
| − | + | margin-bottom: .5rem | |
} | } | ||
#container h2 { | #container h2 { | ||
| − | + | font-size: 2.488em; | |
| − | + | margin-top: 0; | |
| − | + | margin-bottom: .5rem | |
} | } | ||
#container h3 { | #container h3 { | ||
| − | + | font-size: 2.074em; | |
| − | + | margin-top: 0; | |
| − | + | margin-bottom: .5rem | |
} | } | ||
#container h4 { | #container h4 { | ||
| − | + | font-size: 1.728em; | |
| − | + | margin-top: 0; | |
| − | + | margin-bottom: .5rem | |
} | } | ||
#container h5 { | #container h5 { | ||
| − | + | font-size: 1.44em; | |
| − | + | margin-top: 0; | |
| − | + | margin-bottom: .5rem | |
} | } | ||
#container h6 { | #container h6 { | ||
| − | + | font-size: 1.2em; | |
| − | + | margin-top: 0; | |
| − | + | margin-bottom: .5rem | |
} | } | ||
| − | |||
#container p { | #container p { | ||
margin: 0; | margin: 0; | ||
| − | + | line-height: 1.7; | |
} | } | ||
#container a { | #container a { | ||
| Line 381: | Line 341: | ||
color: #149375; | color: #149375; | ||
} | } | ||
| − | |||
#container hr { | #container hr { | ||
| − | + | height: 1px; | |
| − | + | color: #aaa; | |
| − | + | margin: 16px 0; | |
} | } | ||
| − | + | #sidebar { | |
| − | #sidebar{ | + | |
font-size: 16px; | font-size: 16px; | ||
z-index: 3; | z-index: 3; | ||
| − | background:#151718; | + | background: #151718; |
| − | width:250px; | + | width: 250px; |
| − | height:100%; | + | height: 100%; |
| − | display:block; | + | display: block; |
| − | position:fixed; | + | position: fixed; |
top: 18px; | top: 18px; | ||
| − | transition:0.5s linear; | + | transition: 0.5s linear; |
visibility: hidden; | visibility: hidden; | ||
opacity: 0; | opacity: 0; | ||
| Line 403: | Line 361: | ||
overflow-y: auto; | overflow-y: auto; | ||
} | } | ||
| − | + | #sidebar.visible { | |
| − | #sidebar.visible{ | + | |
visibility: visible; | visibility: visible; | ||
opacity: 1; | opacity: 1; | ||
} | } | ||
| − | + | #sidebar ul { | |
| − | #sidebar ul{ | + | margin: 0px; |
| − | margin:0px; | + | padding: 0px; |
| − | padding:0px; | + | |
} | } | ||
| − | + | #sidebar ul li { | |
| − | #sidebar ul li{ | + | list-style: none; |
| − | list-style:none; | + | |
| − | + | ||
transition: all 2s ease; | transition: all 2s ease; | ||
} | } | ||
| − | + | #sidebar ul li a { | |
| − | #sidebar ul li a{ | + | background: #1C1E1F; |
| − | background:#1C1E1F; | + | color: #ccc; |
| − | color:#ccc; | + | border-bottom: 1px solid #111; |
| − | border-bottom:1px solid #111; | + | display: block; |
| − | display:block; | + | width: 250px; |
| − | width:250px; | + | padding: 10px; |
| − | padding:10px; | + | |
text-decoration: none; | text-decoration: none; | ||
} | } | ||
| − | + | #sidebar ul li a:hover { | |
| − | #sidebar ul li a:hover{ | + | background-color: rgba(255, 255, 255, 0.3) |
| − | background-color: rgba(255,255,255,0.3) | + | |
} | } | ||
| − | |||
abbr { | abbr { | ||
| − | + | vertical-align: baseline; | |
font-size: inherit; | font-size: inherit; | ||
text-decoration: none; | text-decoration: none; | ||
color: rgba(0, 0, 0, 0.4); | color: rgba(0, 0, 0, 0.4); | ||
} | } | ||
| − | + | abbr[title], | |
| − | + | .explain[title] { | |
| − | abbr[title], .explain[title] { | + | border-bottom: none; |
| − | + | cursor: help; | |
| − | + | ||
} | } | ||
| + | /*** Accordion Menu ***/ | ||
| − | + | #sidebar ul ul a { | |
| − | + | background: #1C1E1F; | |
| − | + | color: #ccc; | |
| − | + | border-bottom: 1px solid #111; | |
| − | + | display: block; | |
| − | #sidebar ul ul a { | + | width: 250px; |
| − | background:#1C1E1F; | + | padding: 10px; |
| − | color:#ccc; | + | |
| − | border-bottom:1px solid #111; | + | |
| − | display:block; | + | |
| − | width:250px; | + | |
| − | padding:10px; | + | |
text-decoration: none; | text-decoration: none; | ||
} | } | ||
| − | + | #sidebar ul ul a:hover { | |
| − | #sidebar ul ul a:hover{ | + | background-color: rgba(255, 255, 255, 0.3) |
| − | background-color: rgba(255,255,255,0.3) | + | |
} | } | ||
| − | + | #sidebar ul ul.sub li { | |
| − | #sidebar ul ul.sub li{ | + | display: none; |
| − | display:none; | + | |
padding-left: 15px; | padding-left: 15px; | ||
} | } | ||
| − | + | #sidebar ul ul.sub li.active { | |
| − | #sidebar ul ul.sub li.active{ | + | |
display: block; | display: block; | ||
} | } | ||
| − | + | #overlay { | |
| − | #overlay{ | + | position: fixed; |
| − | + | width: 100%; | |
| − | + | height: 100%; | |
| − | + | top: 0; | |
| − | + | left: 250px; | |
| − | + | right: 0; | |
| − | + | bottom: 0; | |
| − | + | background-color: rgba(0, 0, 0, 0.5); | |
| − | + | z-index: 1; | |
| − | + | cursor: pointer; | |
| − | + | ||
visibility: hidden; | visibility: hidden; | ||
opacity: 0; | opacity: 0; | ||
transition: all 0.5s ease; | transition: all 0.5s ease; | ||
} | } | ||
| − | + | #overlay.active { | |
| − | #overlay.active{ | + | |
visibility: visible; | visibility: visible; | ||
opacity: 1; | opacity: 1; | ||
} | } | ||
| − | + | #container { | |
| − | #container{ | + | transition: 0.5s linear; |
| − | transition:0.5s linear; | + | display: flex; |
| − | display: flex; | + | |
flex-direction: column; | flex-direction: column; | ||
align-items: center; | align-items: center; | ||
padding: 5vw; | padding: 5vw; | ||
} | } | ||
| − | |||
#paper { | #paper { | ||
| − | + | display: flex; | |
flex-direction: column; | flex-direction: column; | ||
| − | + | max-width: 1366px; | |
| − | + | background: white; | |
| − | + | box-shadow: 0 0 12px 0px rgba(0, 0, 0, 0.4); | |
padding: 5vw; | padding: 5vw; | ||
} | } | ||
| − | + | #sidebar-btn { | |
| − | #sidebar-btn{ | + | font-size: 24pt; |
| − | + | z-index: 2; | |
| − | + | position: fixed; | |
| − | + | right: 2vw; | |
| − | + | top: 4vw; | |
| − | + | display: flex; | |
| − | + | flex-direction: row; | |
| − | + | justify-content: center; | |
| − | + | align-items: center; | |
| − | + | width: 20px; | |
| − | + | height: 20px; | |
| − | + | cursor: pointer; | |
| − | + | background: #149375; | |
| − | + | padding: 28px; | |
| − | + | color: white; | |
| − | + | border: 3px solid white; | |
| − | + | border-radius: 100%; | |
| − | + | box-shadow: 0px 4px 12px 2px rgba(0, 0, 0, 0.3); | |
| − | + | ||
} | } | ||
| − | + | #sidebar-btn:hover { | |
| − | #sidebar-btn:hover{ | + | |
border: 3px solid black; | border: 3px solid black; | ||
} | } | ||
| − | + | #sidebar-btn:hover i { | |
| − | #sidebar-btn:hover i{ | + | color: black; |
| − | color:black; | + | |
} | } | ||
| − | + | section { | |
| − | section{ | + | |
margin: 8px; | margin: 8px; | ||
} | } | ||
| − | + | section#header { | |
| − | section#header{ | + | |
justify-content: center; | justify-content: center; | ||
margin-bottom: 5vw; | margin-bottom: 5vw; | ||
} | } | ||
| − | + | section#footer { | |
| − | section#footer{ | + | display: flex; |
| − | + | flex-direction: row; | |
| − | + | justify-content: center; | |
| − | + | align-items: center; | |
| − | + | height: 15vw; | |
| − | + | ||
max-height: 250px; | max-height: 250px; | ||
| − | + | margin: 0; | |
| − | + | background: #1C1E1F; | |
| − | + | position: absolute; | |
| − | + | left: 0; | |
| − | + | right: 0; | |
} | } | ||
| − | + | section#footer i { | |
| − | section#footer i{ | + | color: rgba(255, 255, 255, 0.3); |
| − | color:rgba(255,255,255,0.3); | + | |
padding: 20px; | padding: 20px; | ||
font-size: 5vw; | font-size: 5vw; | ||
} | } | ||
| − | + | section#footer i:hover { | |
| − | section#footer i:hover{ | + | color: rgba(255, 255, 255, 1); |
| − | color: rgba(255,255,255,1); | + | |
} | } | ||
| − | + | button.accordion { | |
| − | button.accordion { | + | background: #fefefe; |
| − | background:#fefefe; | + | color: #444; |
| − | + | cursor: pointer; | |
| − | + | padding: 18px; | |
| − | + | width: 100%; | |
| − | + | border: none; | |
| − | + | text-align: left; | |
| − | + | outline: none; | |
| − | + | font-size: 15px; | |
| − | + | transition: 0.4s; | |
| − | + | ||
} | } | ||
| − | + | button.accordion.active, | |
| − | button.accordion.active, button.accordion:hover { | + | button.accordion:hover { |
| − | + | background-color: rgba(20, 147, 117, 0.7); | |
} | } | ||
| − | |||
button.accordion:after { | button.accordion:after { | ||
| − | + | content: '\002B'; | |
| − | + | color: #777; | |
| − | + | font-weight: bold; | |
| − | + | float: right; | |
| − | + | margin-left: 5px; | |
} | } | ||
| − | |||
button.accordion.active:after { | button.accordion.active:after { | ||
| − | + | content: "\2212"; | |
} | } | ||
| − | |||
div.panel { | div.panel { | ||
| − | + | padding: 0 18px; | |
| − | + | background-color: white; | |
| − | + | max-height: 0; | |
| − | + | overflow: hidden; | |
| − | + | transition: max-height 0.2s ease-out; | |
} | } | ||
| − | + | span.label { | |
| − | span.label { | + | display: inline-block; |
| − | + | padding: 0 6px; | |
| − | + | border-radius: 20px; | |
| − | + | white-space: nowrap; | |
| − | + | cursor: default; | |
| − | + | background: #149375; | |
| − | + | color: #fefefe; | |
| − | + | ||
} | } | ||
| − | + | b, | |
| − | b, strong { | + | strong { |
| − | + | font-weight: bold; | |
| − | + | line-height: inherit; | |
| − | + | color: #149375; | |
} | } | ||
| − | + | div.callout { | |
| − | div.callout { | + | margin: 24px 0; |
| − | + | padding: 10px; | |
| − | + | border: 2px solid rgba(20, 147, 117, 0.5); | |
| − | + | border-radius: 0; | |
| − | + | ||
} | } | ||
| − | |||
#container table { | #container table { | ||
| − | + | width: 100%; | |
| − | + | margin-bottom: 1rem; | |
} | } | ||
| − | + | #container table thead { | |
| − | #container table thead{ | + | background-color: inherit; |
| − | + | background: rgba(20, 147, 117, 0.2); | |
| − | + | color: #263238 | |
| − | + | ||
} | } | ||
#container table thead tr { | #container table thead tr { | ||
| − | background:inherit; | + | background: inherit; |
} | } | ||
#container table thead th { | #container table thead th { | ||
| − | + | padding: .5rem .625rem .625rem | |
| − | + | } | |
#container table thead td { | #container table thead td { | ||
| − | + | padding: .5rem .625rem .625rem | |
| − | + | } | |
| − | + | ||
| − | + | ||
#container table tbody { | #container table tbody { | ||
| − | + | background-color: inherit; | |
} | } | ||
| − | #container table tbody tr { | + | #container table tbody tr { |
| − | background:inherit; | + | background: inherit; |
} | } | ||
#container table tbody tr:nth-child(even) { | #container table tbody tr:nth-child(even) { | ||
| − | + | background-color: rgba(20, 147, 117, 0.08) | |
} | } | ||
#container table tbody th { | #container table tbody th { | ||
| − | + | padding: .5rem .625rem .625rem | |
| − | + | } | |
#container table tbody td { | #container table tbody td { | ||
| − | + | padding: .5rem .625rem .625rem | |
| − | + | } | |
| − | + | ||
#container table.hover thead tr:hover { | #container table.hover thead tr:hover { | ||
| − | + | background-color: rgba(17, 125, 99, 0.2); | |
} | } | ||
#container table.hover tbody tr:hover { | #container table.hover tbody tr:hover { | ||
| − | + | background-color: rgba(17, 125, 99, 0.2); | |
} | } | ||
| − | |||
.card { | .card { | ||
min-width: 250px; | min-width: 250px; | ||
| − | + | margin-bottom: 1rem; | |
| − | + | border: 1px solid #eceff1; | |
| − | + | border-radius: 0; | |
| − | + | background: #eceff1; | |
| − | + | box-shadow: none; | |
| − | + | overflow: hidden; | |
| − | + | color: #263238 | |
} | } | ||
.card>:last-child { | .card>:last-child { | ||
| − | + | margin-bottom: 0 | |
} | } | ||
.card-divider { | .card-divider { | ||
| − | + | padding: 1rem; | |
| − | + | background: #eceff1 | |
} | } | ||
.card-divider>:last-child { | .card-divider>:last-child { | ||
| − | + | margin-bottom: 0 | |
} | } | ||
.card-section { | .card-section { | ||
| − | + | padding: 1rem | |
} | } | ||
.card-section>:last-child { | .card-section>:last-child { | ||
| − | + | margin-bottom: 0 | |
} | } | ||
| − | |||
| − | |||
.row { | .row { | ||
| − | display:flex; | + | display: flex; |
flex-direction: row; | flex-direction: row; | ||
| − | flex-wrap:wrap; | + | flex-wrap: wrap; |
} | } | ||
| − | |||
.row > div { | .row > div { | ||
flex: 1; | flex: 1; | ||
margin: 10px; | margin: 10px; | ||
} | } | ||
| − | |||
#mega-menu { | #mega-menu { | ||
justify-content: space-around; | justify-content: space-around; | ||
| − | margin: 5vw 0; | + | margin: 5vw 0; |
} | } | ||
| − | + | #mega-menu i { | |
| − | #mega-menu i{ | + | font-size: 10vw; |
| − | font-size: 10vw; | + | } |
| + | #mega-menu a { | ||
| + | color: #263238; | ||
| + | } | ||
| + | #mega-menu a:link { | ||
| + | color: #263238; | ||
| + | } | ||
| + | #mega-menu a:visited { | ||
| + | color: #263238; | ||
} | } | ||
| − | + | #mega-menu a:hover, | |
| − | + | a:focus, | |
| − | + | a:active { | |
| − | + | ||
| − | + | ||
| − | #mega-menu a:hover,a:focus,a:active{ | + | |
color: #149375; | color: #149375; | ||
} | } | ||
| − | |||
.tabs { | .tabs { | ||
| − | + | margin: 0; | |
| − | + | border: 1px solid #eceff1; | |
| − | + | background: #fefefe; | |
| − | + | list-style-type: none | |
} | } | ||
.tabs::before, | .tabs::before, | ||
.tabs::after { | .tabs::after { | ||
| − | + | display: table; | |
| − | + | content: ' ' | |
} | } | ||
.tabs::after { | .tabs::after { | ||
| − | + | clear: both | |
} | } | ||
.tabs.primary { | .tabs.primary { | ||
| − | + | background: #149375 | |
} | } | ||
.tabs.primary>li>a { | .tabs.primary>li>a { | ||
| − | + | color: #fefefe | |
} | } | ||
.tabs.primary>li>a:hover, | .tabs.primary>li>a:hover, | ||
.tabs.primary>li>a:focus { | .tabs.primary>li>a:focus { | ||
| − | + | background: #16a281 | |
} | } | ||
.tabs-title { | .tabs-title { | ||
| − | + | float: left | |
} | } | ||
.tabs-title>a { | .tabs-title>a { | ||
| − | + | display: block; | |
| − | + | padding: 1.25rem 1.5rem; | |
| − | + | font-size: .75rem; | |
| − | + | line-height: 1; | |
| − | + | color: #149375 | |
} | } | ||
.tabs-title>a:hover { | .tabs-title>a:hover { | ||
| − | + | background: #fefefe; | |
| − | + | color: #117e65 | |
} | } | ||
.tabs-title>a:focus, | .tabs-title>a:focus, | ||
.tabs-title>a[aria-selected='true'] { | .tabs-title>a[aria-selected='true'] { | ||
| − | + | background: #eceff1; | |
| − | + | color: #149375 | |
} | } | ||
.tabs-content { | .tabs-content { | ||
| − | + | border: 1px solid #eceff1; | |
| − | + | border-top: 0; | |
| − | + | background: #fefefe; | |
| − | + | color: #263238; | |
| − | + | transition: all 0.5s ease | |
} | } | ||
.tabs-panel { | .tabs-panel { | ||
| − | + | display: none; | |
| − | + | padding: 1rem | |
} | } | ||
.tabs-panel[aria-hidden="false"] { | .tabs-panel[aria-hidden="false"] { | ||
| − | + | display: block | |
} | } | ||
| − | |||
| − | |||
| − | |||
| − | |||
/****************** MEDIA QUERIES ** | /****************** MEDIA QUERIES ** | ||
**********************************/ | **********************************/ | ||
| − | @media (max-width: 768px){ | + | @media (max-width: 768px) { |
| − | body{ | + | body { |
| − | background: white; | + | background: white; |
| − | } | + | } |
#container h1 { | #container h1 { | ||
| − | + | font-size: 1.602em; | |
} | } | ||
#container h2 { | #container h2 { | ||
| Line 827: | Line 742: | ||
justify-content: flex-end; | justify-content: flex-end; | ||
} | } | ||
| − | #sidebar-btn:hover{ | + | #sidebar-btn:hover { |
border: none; | border: none; | ||
} | } | ||
| − | #sidebar-btn:hover i{ | + | #sidebar-btn:hover i { |
color: #149375; | color: #149375; | ||
} | } | ||
| Line 836: | Line 751: | ||
margin-top: 68px; | margin-top: 68px; | ||
padding: 0; | padding: 0; | ||
| − | |||
| − | |||
| − | |||
} | } | ||
| − | #sidebar-btn.inactive{ | + | #container.inactive { |
| − | + | transform: translate(250px, 0) | |
| + | } | ||
| + | #sidebar-btn.inactive { | ||
| + | #background: rgba(0, 0, 0, 0.5); | ||
} | } | ||
#container .modalDialog > .flex { | #container .modalDialog > .flex { | ||
flex-direction: column; | flex-direction: column; | ||
} | } | ||
| − | #container .col33{ | + | #container .col33 { |
width: 100%; | width: 100%; | ||
} | } | ||
| − | #container .col66{ | + | #container .col66 { |
width: 100%; | width: 100%; | ||
} | } | ||
} | } | ||
| − | + | @media (min-width: 1024px) { | |
| − | @media (min-width: 1024px){ | + | |
| − | + | ||
| − | + | ||
section#footer i { | section#footer i { | ||
font-size: 50pt; | font-size: 50pt; | ||
} | } | ||
| − | #mega-menu i{ | + | #mega-menu i { |
| − | + | font-size: 100pt; | |
| − | } | + | } |
| − | + | ||
} | } | ||
| + | </style> | ||
| − | |||
| − | |||
</html> | </html> | ||
Revision as of 08:27, 5 June 2017
