Difference between revisions of "Team:EPF Lausanne/Test/css"
| Line 320: | Line 320: | ||
.nav .nav .active:focus span { | .nav .nav .active:focus span { | ||
display: none; | display: none; | ||
| + | } | ||
| + | /* ========================================================================== | ||
| + | Timeline | ||
| + | ========================================================================== */ | ||
| + | .timeline-section { | ||
| + | color: transparent; | ||
| + | position: relative; | ||
| + | z-index: 17; | ||
| + | margin-top: 0px; | ||
| + | background-color: transparent; | ||
| + | border-style: none; | ||
| + | } | ||
| + | .timeline-section h3 { | ||
| + | text-align: center; | ||
| + | text-transform: uppercase; | ||
| + | font-weight: 500; | ||
| + | font-size: 24px; | ||
| + | color: #000066; | ||
| + | } | ||
| + | .timeline-section h2 { | ||
| + | text-align: center; | ||
| + | color: #333333; | ||
| + | font-weight: 400; | ||
| + | margin: 0; | ||
| + | } | ||
| + | .timeline-section h4 { | ||
| + | font-size: 16px; | ||
| + | font-weight: 600; | ||
| + | color: black; | ||
| + | } | ||
| + | .timeline-section p { | ||
| + | text-align: justify; | ||
| + | font-size: 16px; | ||
| + | color : #2F2F2F; | ||
| + | } | ||
| + | .timeline-section .image-holder { | ||
| + | margin-top: 50px; | ||
| + | overflow: hidden; | ||
| + | } | ||
| + | .timeline { | ||
| + | list-style: none; | ||
| + | padding: 20px 0 20px; | ||
| + | position: relative; | ||
| + | } | ||
| + | .timeline:before { | ||
| + | top: 0; | ||
| + | bottom: 0; | ||
| + | position: absolute; | ||
| + | content: " "; | ||
| + | width: 3px; | ||
| + | background-color: #333333; | ||
| + | left: 50%; | ||
| + | margin-left: -1.5px; | ||
| + | } | ||
| + | .timeline > li { | ||
| + | margin-bottom: 20px; | ||
| + | position: relative; | ||
| + | } | ||
| + | .timeline > li:before, | ||
| + | .timeline > li:after { | ||
| + | content: " "; | ||
| + | display: table; | ||
| + | } | ||
| + | .timeline > li:after { | ||
| + | clear: both; | ||
| + | } | ||
| + | .timeline > li:before, | ||
| + | .timeline > li:after { | ||
| + | content: " "; | ||
| + | display: table; | ||
| + | } | ||
| + | .timeline > li:after { | ||
| + | clear: both; | ||
| + | } | ||
| + | .timeline > li > .timeline-panel { | ||
| + | width: 46%; | ||
| + | float: left; | ||
| + | border: 1px solid #333333; | ||
| + | border-radius: 2px; | ||
| + | padding: 20px; | ||
| + | padding-top: 0px; | ||
| + | position: relative; | ||
| + | -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175); | ||
| + | box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175); | ||
| + | } | ||
| + | .timeline > li > .timeline-panel:before { | ||
| + | position: absolute; | ||
| + | top: 26px; | ||
| + | right: -15px; | ||
| + | display: inline-block; | ||
| + | border-top: 15px solid transparent; | ||
| + | border-left: 15px solid #ccc; | ||
| + | border-right: 0 solid #ccc; | ||
| + | border-bottom: 15px solid transparent; | ||
| + | content: " "; | ||
| + | } | ||
| + | .timeline > li > .timeline-panel:after { | ||
| + | position: absolute; | ||
| + | top: 27px; | ||
| + | right: -14px; | ||
| + | display: inline-block; | ||
| + | border-top: 14px solid transparent; | ||
| + | border-left: 14px solid #fff; | ||
| + | border-right: 0 solid #fff; | ||
| + | border-bottom: 14px solid transparent; | ||
| + | content: " "; | ||
| + | } | ||
| + | .timeline > li > .timeline-badge { | ||
| + | color: #fff; | ||
| + | width: 25px; | ||
| + | height: 25px; | ||
| + | line-height: 50px; | ||
| + | font-size: 2.5em; | ||
| + | text-align: center; | ||
| + | position: absolute; | ||
| + | top: 29px; | ||
| + | left: 50%; | ||
| + | margin-left: -12.5px; | ||
| + | background-color: #999999; | ||
| + | z-index: 100; | ||
| + | border-top-right-radius: 50%; | ||
| + | border-top-left-radius: 50%; | ||
| + | border-bottom-right-radius: 50%; | ||
| + | border-bottom-left-radius: 50%; | ||
| + | } | ||
| + | .timeline > li.timeline-inverted > .timeline-panel { | ||
| + | float: right; | ||
| + | } | ||
| + | .timeline > li.timeline-inverted > .timeline-panel:before { | ||
| + | border-left-width: 0; | ||
| + | border-right-width: 15px; | ||
| + | left: -15px; | ||
| + | right: auto; | ||
| + | } | ||
| + | .timeline > li.timeline-inverted > .timeline-panel:after { | ||
| + | border-left-width: 0; | ||
| + | border-right-width: 14px; | ||
| + | left: -14px; | ||
| + | right: auto; | ||
| + | } | ||
| + | .timeline-badge.primary { | ||
| + | background-color: #2e6da4 !important; | ||
| + | } | ||
| + | .timeline-badge.success { | ||
| + | background-color: #3f903f !important; | ||
| + | } | ||
| + | .timeline-badge.warning { | ||
| + | background-color: #f0ad4e !important; | ||
| + | } | ||
| + | .timeline-badge.danger { | ||
| + | background-color: #d9534f !important; | ||
| + | } | ||
| + | .timeline-badge.info { | ||
| + | background-color: #5bc0de !important; | ||
| + | } | ||
| + | .timeline-title { | ||
| + | font-size: 28px; | ||
| + | margin-top: 0; | ||
| + | color: inherit; | ||
| + | } | ||
| + | .timeline-body > p, | ||
| + | .timeline-body > ul { | ||
| + | margin-bottom: 0; | ||
| + | } | ||
| + | .timeline-body > p + p { | ||
| + | margin-top: 5px; | ||
} | } | ||
/* ========================================================================== | /* ========================================================================== | ||
Revision as of 12:10, 19 August 2015