Template:Banner/styles.css
From GATE
< Template:Banner
Revision as of 11:27, 6 April 2020 by Lorenzo Mancini (talk | contribs)
.mainpage-shadowbox {
color: white;
background: rgb(16,16,16);
background: rgba(0,0,0,0.3);
border-radius: 4px;
}
.mainpage-shadowbox h2, .mainpage-shadowbox h3 {
color: white;
border:none;
font-family: georgia;
line-height: 1.2em;
margin:0;
padding: 0; /* was previously set only for h3, and skin styles would do the same for h2. however, cannot rely on skin to do this on mobile */
}
.mainpage-shadowbox a {
color: white;
font-weight: bold;
}
.banner-image {
position: relative;
max-width: 100%;
height: 350px;
margin-bottom: .6em;
}
.banner-image img {
max-width: 100%;
height: 600px;
/* width: auto\9; */ /* ie8 */
}
.banner-box-wide {
width: 45%;
}
.banner-box-left,
.banner-box-right {
padding: 8px 7px;
background: rgb(16,16,16);
background: rgba(0,0,0,0.3);
border-radius: 4px;
width: 40%;
}
.banner-box-left { text-align: left; }
.banner-box-right { text-align: right; }
.banner-box-2 {
position: absolute;
z-index: 2;
min-width: 20em;
}
@media screen and ( min-width: 720px ) { /* greater than or equal to */
.banner-image img.nolink { display: none; }
.mainpage-shadowbox h2 {
font-size: 190%;
}
.mainpage-shadowbox h3 {
font-size: 125%;
}
.banner-image {
overflow: hidden;
}
.banner-box-left {
left: 3%;
}
.banner-box-right {
right: 3%;
}
.banner-box-2 {
margin-top: 2em;
}
.banner-box-2 .quote {
font-size: 95%;
line-height: 1.2em;
}
}
@media screen and ( max-width: 720px ) {
.banner-image img:not(.nolink) { display: none; }
.banner-image > .mainpage-shadowbox {
width: inherit !important;
min-height: 100%;
margin-left: -150%;
margin-right: 150%;
opacity: 0;
background: black;
}
.mainpage-shadowbox .quote > a:after {
content: '\ATap to learn more.';
white-space: pre; /* needed to make content work. if content is disabled, this can be, too */
}
.jcarousel-item:hover .mainpage-shadowbox {
margin: unset;
opacity: 1;
transition: margin 0.5s; /* without this, problem with tap on image still activating links - speed may matter here */
bottom: 50%; /* relative vertical position; change to top to lower, negative percentages do not work as naively expected */
}
.jcarousel-control-prev, .jcarousel-control-next {
display: none;
/* hide the carousel arrows */
/* a kludge resulting from gadgets not working on mobile */
/* unforunately also targets very narrow desktops, but there can't be too many of those */
/* and besides, the number buttons still work */
}
.interactiveIcon {
position: absolute;
opacity: 0.4;
height: 75% !important;
width: auto;
bottom: 0;
right: 0;
}
}