“MediaWiki:Gadget-CustomSlider.css”的版本间的差异
来自小鱼君和他的朋友们
小 (机智的小鱼君移动页面MediaWiki:Gadget-CusttomSlider.css至MediaWiki:Gadget-CustomSlider.css,不留重定向) |
([InPageEdit] 没有编辑摘要) |
||
第27行: | 第27行: | ||
display: inline; | display: inline; | ||
float: left; | float: left; | ||
+ | position: relative; | ||
+ | } | ||
+ | |||
+ | .Sld h2 { | ||
+ | position: absolute; | ||
+ | bottom: 0; | ||
+ | width: 100%; | ||
+ | margin-bottom: 0; | ||
+ | padding: 12px; | ||
+ | background: rgba(0,0,0,0.7)!important; | ||
+ | text-shadow: none!important; | ||
} | } | ||
第34行: | 第45行: | ||
.SlideIMG img { | .SlideIMG img { | ||
display: block; | display: block; | ||
− | height: | + | height: 320px !important; |
margin: 0 auto; | margin: 0 auto; | ||
width: auto !important; | width: auto !important; |
2019年12月2日 (一) 16:35的最新版本
#SliderView {
background-color: #000;
width: 80%;
margin: 0 auto;
height: auto;
position: relative;
overflow: hidden;
user-select: none;
color: #fff;
}
#SliderWrapper {
position: relative;
transition: 1s;
transition-timing-function: cubic-bezier(.67,.01,.23,1);
}
#SliderWrapper, #SliderWrapper ul, #SliderWrapper li, #NavBtns, #NavBtns ul {
margin: 0px;
padding: 0px;
}
#NavBtns li {
margin: 0px;
}
.Sld {
height: auto;
list-style: none;
display: inline;
float: left;
position: relative;
}
.Sld h2 {
position: absolute;
bottom: 0;
width: 100%;
margin-bottom: 0;
padding: 12px;
background: rgba(0,0,0,0.7)!important;
text-shadow: none!important;
}
.SlideIMG {
width: 100%;
}
.SlideIMG img {
display: block;
height: 320px !important;
margin: 0 auto;
width: auto !important;
position: relative;
}
#NavBtns {
position: absolute;
display: block;
}
.NavBtn {
position: relative;
display: block;
top: 0px;
width: auto;
height: auto;
list-style: none;
margin: 0px;
background: transparent;
}
.nmLeft {
height: 100%;
left: 0px;
background: linear-gradient(to right, rgba(61,61,61,0.8), rgba(61,61,61,0.8), transparent);
}
.nmLeft li {
list-style: none;
padding: 10px 100px 10px 10px;
}
.nmLeft li:hover {
cursor: pointer;
background: linear-gradient(to right, rgba(81,81,81,0.8), rgba(81,81,81,0.8), transparent);
}
.nmRight {
height: 100%;
right: 0px;
background: linear-gradient(to left, rgba(61,61,61,0.8), rgba(61,61,61,0.8), transparent);
text-align: left;
}
.nmRight li {
list-style: none;
padding: 10px 10px 10px 100px;
}
.nmRight li:hover {
cursor: pointer;
background: linear-gradient(to left, rgba(81,81,81,0.8), rgba(81,81,81,0.8), transparent);
}
.nmTop {
width: 100%;
top: 0px;
background: linear-gradient(to bottom, rgba(61,61,61,0.8), rgba(61,61,61,0.8), transparent);
text-align: left;
}
.nmTop li {
display: inline-block;
list-style: none;
padding: 10px 10px 20px 10px;
}
.nmTop li:hover {
cursor: pointer;
background: linear-gradient(to bottom, rgba(81,81,81,0.8), rgba(81,81,81,0.8), transparent);
}
.nmBottom {
width: 100%;
bottom: 0px;
background: linear-gradient(to top, rgba(61,61,61,0.8), rgba(61,61,61,0.8), transparent);
text-align: left;
}
.nmBottom li {
display: inline-block;
list-style: none;
padding: 20px 10px 10px 10px;
}
.nmBottom li:hover {
cursor: pointer;
background: linear-gradient(to top, rgba(81,81,81,0.8), rgba(81,81,81,0.8), transparent);
}
.nbActiveLeft {
background: linear-gradient(to right, rgba(111,111,111,0.8), rgba(111,111,111,0.8), transparent);
}
.nbActiveRight {
background: linear-gradient(to left, rgba(111,111,111,0.8), rgba(111,111,111,0.8), transparent);
}
.nbActiveTop {
background: linear-gradient(to bottom, rgba(111,111,111,0.8), rgba(111,111,111,0.8), transparent);
}
.nbActiveBottom {
background: linear-gradient(to top, rgba(111,111,111,0.8), rgba(111,111,111,0.8), transparent);
}
@media screen and (max-width:850px) {
#SliderView {
width: 100%;
}
.SlideIMG img {
display: block;
height: 280px !important;
margin: 0 auto;
width: auto !important;
position: relative;
}
}