From 2014.igem.org
(Difference between revisions)
|
|
| Line 1: |
Line 1: |
| - | /* Set all parents to full height */
| |
| - | /* Smartphones (portrait and landscape) ----------- */
| |
| - | @media only screen
| |
| - | and (min-device-width : 320px)
| |
| - | and (max-device-width : 480px) {
| |
| - | .cbp-fbscroller > nav a {
| |
| - | display: block;
| |
| - | position: relative;
| |
| - | z-index: 9999;
| |
| - | color: transparent;
| |
| - | width: 30px;
| |
| - | height:30px;
| |
| - | outline: none;
| |
| - | margin: 31px 0;
| |
| - | border-radius: 50%;
| |
| - | border: 4px solid #ddd;
| |
| - | }
| |
| - | }
| |
| | | | |
| - | /* Smartphones (landscape) ----------- */
| |
| - | @media only screen
| |
| - | and (min-width : 321px) {
| |
| - | .cbp-fbscroller > nav a {
| |
| - | display: block;
| |
| - | position: relative;
| |
| - | z-index: 9999;
| |
| - | color: transparent;
| |
| - | width: 30px;
| |
| - | height:30px;
| |
| - | outline: none;
| |
| - | margin: 31px 0;
| |
| - | border-radius: 50%;
| |
| - | border: 4px solid #ddd;
| |
| - | }
| |
| - | }
| |
| - |
| |
| - | /* Smartphones (portrait) ----------- */
| |
| - | @media only screen
| |
| - | and (max-width : 320px) {
| |
| - | .cbp-fbscroller > nav a {
| |
| - | display: block;
| |
| - | position: relative;
| |
| - | z-index: 9999;
| |
| - | color: transparent;
| |
| - | width: 30px;
| |
| - | height:30px;
| |
| - | outline: none;
| |
| - | margin: 31px 0;
| |
| - | border-radius: 50%;
| |
| - | border: 4px solid #ddd;
| |
| - | }
| |
| - | }
| |
| - |
| |
| - | /* iPads (portrait and landscape) ----------- */
| |
| - | @media only screen
| |
| - | and (min-device-width : 768px)
| |
| - | and (max-device-width : 1024px) {
| |
| - | .cbp-fbscroller > nav a {
| |
| - | display: block;
| |
| - | position: relative;
| |
| - | z-index: 9999;
| |
| - | color: transparent;
| |
| - | width: 30px;
| |
| - | height:30px;
| |
| - | outline: none;
| |
| - | margin: 31px 0;
| |
| - | border-radius: 50%;
| |
| - | border: 4px solid #ddd;
| |
| - | }
| |
| - | }
| |
| - |
| |
| - | /* iPads (landscape) ----------- */
| |
| - | @media only screen
| |
| - | and (min-device-width : 768px)
| |
| - | and (max-device-width : 1024px)
| |
| - | and (orientation : landscape) {
| |
| - | .cbp-fbscroller > nav a {
| |
| - | display: block;
| |
| - | position: relative;
| |
| - | z-index: 9999;
| |
| - | color: transparent;
| |
| - | width: 30px;
| |
| - | height:30px;
| |
| - | outline: none;
| |
| - | margin: 31px 0;
| |
| - | border-radius: 50%;
| |
| - | border: 4px solid #ddd;
| |
| - | }
| |
| - | }
| |
| - |
| |
| - | /* iPads (portrait) ----------- */
| |
| - | @media only screen
| |
| - | and (min-device-width : 768px)
| |
| - | and (max-device-width : 1024px)
| |
| - | and (orientation : portrait) {
| |
| - | .cbp-fbscroller > nav a {
| |
| - | display: block;
| |
| - | position: relative;
| |
| - | z-index: 9999;
| |
| - | color: transparent;
| |
| - | width: 30px;
| |
| - | height:30px;
| |
| - | outline: none;
| |
| - | margin: 31px 0;
| |
| - | border-radius: 50%;
| |
| - | border: 4px solid #ddd;
| |
| - | }
| |
| - | }
| |
| | | | |
| | | | |
Latest revision as of 23:50, 16 October 2014
body,
.cbp-fbscroller,
.cbp-fbscroller {
height: 100%;
}
/* The nav is fixed on the right side and we center it by translating it 50%
(we don't know it's height so we can't use the negative margin trick) */
.cbp-fbscroller > nav {
position: fixed;
z-index: 9999;
right: 5%;
top: 50%;
width: 26px;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.cbp-fbscroller > nav a {
display: block;
position: relative;
z-index: 9999;
color: transparent;
width: 15px;
height: 15px;
outline: none;
margin: 16px 0;
border-radius: 50%;
border: 4px solid #ddd;
}
.no-touch .cbp-fbscroller > nav a:hover {
background: rgba(255,255,255,0.6);
}
.cbp-fbscroller > nav a.cbp-fbcurrent {
background: #eee;
}
/* background-attachment does the trick */
.cbp-fbscroller section {
position: relative;
background-position: top center;
background-repeat: no-repeat;
background-size: cover;
}
.no-touch .cbp-fbscroller section {
background-attachment: fixed;
}
"
