Team:UCC Ireland/component.css

From 2014.igem.org

(Difference between revisions)
(Created page with "- →Set all parents to full height: body, .cbp-fbscroller, .cbp-fbscroller { height: 100%; } /* The nav is fixed on the right side and we center it by translating it 50% (...")
Line 1: Line 1:
/* Set all parents to full height */
/* 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;
 +
}
 +
}
 +
 +
 +
body,
body,
.cbp-fbscroller,
.cbp-fbscroller,

Revision as of 23:45, 16 October 2014

/* 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; } }


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; }

Retrieved from "http://2014.igem.org/Team:UCC_Ireland/component.css"