模板:Banner/sandbox/styles.css檢視原始碼檢視歷史
< Template:Banner | sandbox
.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: sans-serif;
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;
overflow: hidden;
max-width: 1125px;
height: auto;
margin-bottom: .6em;
}
.banner-image img {
max-width: 100%;
height: auto;
/* width: auto\9; */ /* ie8 */
}
.banner-box-wide {
width: 80%
}
.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;
}
.banner-box-2 .quote {
font-size: 80%;
line-height: 1.2em;
}
@media screen and ( min-width: 720px ) { /* greater than or equal to */
.mainpage-shadowbox h2 {
font-size: 190%;
}
.mainpage-shadowbox h3 {
font-size: 150%;
}
.banner-box-left {
left: 3%;
}
.banner-box-right {
right: 3%;
}
.banner-box-2 {
margin-top: 2em;
}
}
@media screen and ( max-width: 720px ) {
.mainpage-shadowbox {
width: inherit !important;
}
.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 */
}
}