添加的内容 删除的内容
imported>Wr 无编辑摘要 |
imported>Wr 无编辑摘要 |
||
| （未显示同一用户的2个中间版本） | |||
| 第1行： | 第1行： | ||
.banner-image { |
|||
.mainpage-shadowbox { |
|||
position: relative; |
|||
color: white; |
|||
overflow: hidden; |
|||
background: rgb(16,16,16); |
|||
max-width: 1800px; |
|||
background: rgba(0,0,0,0.3); |
|||
height: auto; |
|||
border-radius: 4px; |
|||
margin-bottom: .6em; |
|||
} |
} |
||
.mainpage-shadowbox h2, .mainpage-shadowbox h3 { |
|||
.banner-image img { |
|||
color: white; |
|||
max-width: 100%; |
|||
border:none; |
|||
height: auto; |
|||
font-family: sans-serif; |
|||
width: auto; |
|||
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 { |
|||
.banner-box { |
|||
position: absolute; |
|||
z-index: 2; |
|||
margin-top: 2.5em; |
|||
color: white; |
color: white; |
||
min-width: 20em; |
|||
text-shadow: black 0.3em 0.3em 1em, black -0.1em -0.1em 1em; |
|||
} |
} |
||
.banner-image { |
|||
position: relative; |
|||
max-width: 1125px; |
|||
height: auto; |
|||
margin-bottom: .6em; |
|||
} |
|||
.banner-image img { |
|||
max-width: 100%; |
|||
height: auto; |
|||
/* width: auto\9; */ /* ie8 */ |
|||
} |
|||
.banner-box-wide { |
.banner-box-wide { |
||
width: 80%; |
|||
} |
} |
||
.banner-box-left, |
|||
.banner-box-left { |
|||
left: 5%; |
|||
text-align: left; |
|||
} |
|||
.banner-box-right { |
.banner-box-right { |
||
right: 5%; |
|||
text-align: right; |
|||
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 .name { |
|||
@media screen and ( min-width: 720px ) { /* greater than or equal to */ |
|||
font-size: 3em; |
|||
.banner-image img.nolink { display: none; } /* can be removed when backward compat is no longer needed */ |
|||
white-space: nowrap; |
|||
.banner-image span[typeof~='mw:File/Frameless'].nolink { display: none; } |
|||
line-height: 1.2em; |
|||
.mainpage-shadowbox h2 { |
|||
font-size: 190%; |
|||
} |
|||
.mainpage-shadowbox h3 { |
|||
font-size: 150%; |
|||
} |
|||
.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: 80%; |
|||
line-height: 1.2em; |
|||
} |
|||
} |
} |
||
@media screen and ( max-width: 720px ) { |
|||
.banner-box .type { |
|||
.banner-image img:not(.nolink) { display: none; } /* can be removed when backward compat is no longer needed */ |
|||
font-size: 2em; |
|||
.banner-image span[typeof~='mw:File/Frameless'] img { display: inline-block; } /* can be removed when b/c is no longer needed */ |
|||
line-height: 1.2em; |
|||
.banner-image span[typeof~='mw:File/Frameless']: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 */ |
|||
} |
|||
img.interactiveIcon, /* can be removed when backward compat is no longer needed */ |
|||
.interactiveIcon img { |
|||
position: absolute; |
|||
opacity: 0.4; |
|||
height: 75% !important; |
|||
width: auto; |
|||
bottom: 0; |
|||
right: 0; |
|||
} |
|||
} |
} |
||
2022年10月2日 (日) 15:47的最新版本
.banner-image {
position: relative;
overflow: hidden;
max-width: 1800px;
height: auto;
margin-bottom: .6em;
}
.banner-image img {
max-width: 100%;
height: auto;
width: auto;
}
.banner-box {
position: absolute;
z-index: 2;
margin-top: 2.5em;
color: white;
min-width: 20em;
text-shadow: black 0.3em 0.3em 1em, black -0.1em -0.1em 1em;
}
.banner-box-wide {
width: 80%;
}
.banner-box-left {
left: 5%;
text-align: left;
}
.banner-box-right {
right: 5%;
text-align: right;
}
.banner-box .name {
font-size: 3em;
white-space: nowrap;
line-height: 1.2em;
}
.banner-box .type {
font-size: 2em;
line-height: 1.2em;
}