添加的内容 删除的内容
imported>Wr (创建页面,内容为“.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…”) |
imported>Wr 无编辑摘要 |
||
第1行: | 第1行: | ||
.mainpage-shadowbox { |
|||
.banner-image { |
|||
color: white; |
|||
position: relative; |
|||
background: rgb(16,16,16); |
|||
overflow: hidden; |
|||
background: rgba(0,0,0,0.3); |
|||
max-width: 1800px; |
|||
border-radius: 4px; |
|||
height: auto; |
|||
margin-bottom: .6em; |
|||
} |
} |
||
.mainpage-shadowbox h2, .mainpage-shadowbox h3 { |
|||
color: white; |
|||
.banner-image img { |
|||
border:none; |
|||
max-width: 100%; |
|||
font-family: sans-serif; |
|||
height: auto; |
|||
line-height: 1.2em; |
|||
width: auto; |
|||
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; |
||
font-weight: bold; |
|||
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 { |
||
padding: 8px 7px; |
|||
background: rgb(16,16,16); |
|||
text-align: right; |
|||
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-box .name { |
|||
.banner-image img.nolink { display: none; } /* can be removed when backward compat is no longer needed */ |
|||
font-size: 3em; |
|||
.banner-image span[typeof~='mw:File/Frameless'].nolink { display: none; } |
|||
white-space: nowrap; |
|||
.mainpage-shadowbox h2 { |
|||
line-height: 1.2em; |
|||
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-image img:not(.nolink) { display: none; } /* can be removed when backward compat is no longer needed */ |
|||
.banner-box .type { |
|||
.banner-image span[typeof~='mw:File/Frameless'] img { display: inline-block; } /* can be removed when b/c is no longer needed */ |
|||
font-size: 2em; |
|||
.banner-image span[typeof~='mw:File/Frameless']:not(.nolink) { display: none; } |
|||
line-height: 1.2em; |
|||
.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:45的版本
.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;
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;
}
@media screen and ( min-width: 720px ) { /* greater than or equal to */
.banner-image img.nolink { display: none; } /* can be removed when backward compat is no longer needed */
.banner-image span[typeof~='mw:File/Frameless'].nolink { display: none; }
.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-image img:not(.nolink) { display: none; } /* can be removed when backward compat is no longer needed */
.banner-image span[typeof~='mw:File/Frameless'] img { display: inline-block; } /* can be removed when b/c is no longer needed */
.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;
}
}