• 你我推心置腹,岂能相负!
  • 欢迎访问天南星科wiki!我们正在努力完善wiki
  • 数据可能出现错误或者偏差
  • 图片版权©依然是图片作者所有本站仅供查看
  • 本站由个人搭建与其他网站/商家没有从属关系

模板:Banner/styles.css:修订间差异

爱自天南星科wiki的收集(づ。◕◡◡◕。)づ
无编辑摘要
标签已被回退
无编辑摘要
标签已被回退
第1行: 第1行:
.mainpage-shadowbox {
/* carousel */
color: white;
.jcarousel {
background: rgb(16,16,16);
    position: relative;
background: rgba(0,0,0,0.3);
    overflow: hidden;
border-radius: 4px;
}
}
.mainpage-shadowbox h2, .mainpage-shadowbox h3 {
color: white;
.jcarousel-wrapper {
border:none;
max-width: 1125px;
font-family: sans-serif;
    margin: 0;
line-height: 1.2em;
    position: relative;
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;
.jcarousel .jcarousel-list {
font-weight: bold;
    width: 20000em;
    position: relative;
    margin: 0;
    padding: 0;
}
}
 
.banner-image {
.jcarousel .jcarousel-item {
     position: relative;
     float: left;
    max-width: 1125px;
    height: auto;
    margin-bottom: .6em;
}
}
.banner-image img {
.jcarousel-item img {
    display: block;
     max-width: 100%;
     max-width: 100%;
     height: auto;
     height: auto !important;
    /* width: auto\9; */ /* ie8 */
}
}
.banner-box-wide {
     width: 80%
.jcarousel-control-prev,
.jcarousel-control-next {
    position: absolute;
    top: 45%;
     width: 30px;
    height: 30px;
    text-align: center;
    background: #fff;
    color: #fff;
    text-decoration: none;
    text-shadow: 0 0 1px #000;
    font: 24px/27px Arial, sans-serif;
    border-radius: 30px;
    box-shadow: 0 0 2px #999;
}
}
.banner-box-left,
.banner-box-right {
.jcarousel-control-prev {
padding: 8px 7px;
    left: -15px;
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; }
.jcarousel-control-next {
.banner-box-2 {
    right: -15px;
}
   
.jcarousel-control-prev:hover span,
.jcarousel-control-next:hover span {
    display: block;
}
.jcarousel-control-prev.inactive,
.jcarousel-control-next.inactive {
    opacity: .5;
    cursor: default;
}
.jcarousel-pagination {
     position: absolute;
     position: absolute;
     z-index: 2;
     bottom: 10px;
     min-width: 20em;
     left: 15px;
}
 
@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 */
.jcarousel-pagination a {
.banner-image span[typeof~='mw:File/Frameless'] img { display: inline-block; } /* can be removed when b/c is no longer needed */
    text-decoration: none;
.banner-image span[typeof~='mw:File/Frameless']:not(.nolink) { display: none; }
    display: inline-block;
.banner-image > .mainpage-shadowbox {
    font-size: 11px;
width: inherit !important;
    line-height: 14px;
min-height: 100%;
    min-width: 14px;
margin-left: -150%;
    background: #fff;
margin-right: 150%;
    color: #4E443C;
opacity: 0;
    border-radius: 14px;
background: black;
    padding: 3px;
}
    text-align: center;
.mainpage-shadowbox .quote > a:after {
    margin-right: 2px;
content: '\ATap to learn more.';
    opacity: .75;
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;
}
}
}
@media (max-width: 600px) {
  /* styles for screens smaller than 600px */
.jcarousel-pagination a.active {
    background: #4E443C;
    color: #fff;
    opacity: 1;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.75);
}
}

2023年6月27日 (二) 10:47的版本

/* carousel */
.jcarousel {
    position: relative;
    overflow: hidden;
}
 
.jcarousel-wrapper {
	max-width: 1125px;
    margin: 0;
    position: relative;
}
 
.jcarousel .jcarousel-list {
    width: 20000em;
    position: relative;
    margin: 0;
    padding: 0;
}
 
.jcarousel .jcarousel-item {
    float: left;
}
 
.jcarousel-item img {
    display: block;
    max-width: 100%;
    height: auto !important;
}
 
.jcarousel-control-prev,
.jcarousel-control-next {
    position: absolute;
    top: 45%;
    width: 30px;
    height: 30px;
    text-align: center;
    background: #fff;
    color: #fff;
    text-decoration: none;
    text-shadow: 0 0 1px #000;
    font: 24px/27px Arial, sans-serif;
    border-radius: 30px;
    box-shadow: 0 0 2px #999;
}
 
.jcarousel-control-prev {
    left: -15px;
}
 
.jcarousel-control-next {
    right: -15px;
}
 
.jcarousel-control-prev:hover span,
.jcarousel-control-next:hover span {
    display: block;
}
 
.jcarousel-control-prev.inactive,
.jcarousel-control-next.inactive {
    opacity: .5;
    cursor: default;
}
 
.jcarousel-pagination {
    position: absolute;
    bottom: 10px;
    left: 15px;
}
 
.jcarousel-pagination a {
    text-decoration: none;
    display: inline-block;
    font-size: 11px;
    line-height: 14px;
    min-width: 14px;
    background: #fff;
    color: #4E443C;
    border-radius: 14px;
    padding: 3px;
    text-align: center;
    margin-right: 2px;
    opacity: .75;
}
 
.jcarousel-pagination a.active {
    background: #4E443C;
    color: #fff;
    opacity: 1;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.75);
}
为了让您的浏览体验更加高效、方便和个性化,遵照《中华人民共和国网络安全法》和《信息安全技术个人信息安全规范》。 我们需要您允许本站使用Cookies。在某些情况下,Cookies是使网站正常运行的必要条件。