MediaWiki:Common.css:修订间差异
来自The Land of StarLight
页面内容被替换为“→这里放置的CSS将应用于所有皮肤: #ca-talk { display: none !important; } #pt-mytalk{ display: none !important; } #site-tools{ display: none !important; } #page-tools{ display: none !important; } →悬浮: .iteminfo {display:none;} .itemhover:hover .iteminfo{display:block;} →黑幕: .heimu,.blackcurtain{ transition: all .3s; background: var(--heimu); color: var(--heimu); /* 黑幕:一块黑色区域,鼠标移入…” 标签:替换 |
增加磁贴/轮播图/软重定向 |
||
第30行: | 第30行: | ||
.heimu:hover,.blackcurtain:hover{ /*黑幕,鼠标移入后文字背景透明*/ | .heimu:hover,.blackcurtain:hover{ /*黑幕,鼠标移入后文字背景透明*/ | ||
background: transparent; | background: transparent; | ||
} | |||
/* 模板:主页磁贴 */ | |||
.block-container-frame.mainpage-tile>div img{ | |||
position: absolute; | |||
max-width: 80%; | |||
max-height: calc(100% - 3.5em); | |||
/*特殊的居中操作*/ | |||
left: 50%; | |||
bottom: calc(50% - 3em); | |||
transform: translate(-50%,calc(50% - 4.5em)); | |||
transition: 0.3s ease; | |||
/* border: 1px solid grey; */ | |||
} | |||
.block-container-frame.mainpage-tile>div>center{ | |||
/*文字说明*/ | |||
margin-top: calc(50% - 3.5em); | |||
} | |||
.block-container-frame.mainpage-tile>div>center>a{ | |||
/*文字超出部分自动截取*/ | |||
display: inline-block; | |||
max-width: 100%; | |||
overflow: hidden; | |||
white-space: nowrap; | |||
text-overflow: ellipsis; | |||
} | |||
.block-container-frame.mainpage-tile>div>center>a:hover{ | |||
/*取消文字的下划线装饰*/ | |||
text-decoration: none; | |||
} | |||
.block-container-frame.mainpage-tile>div>center>a>span[class]:after{ | |||
/*用after使得整个div变得可点击*/ | |||
content: ''; | |||
position: absolute; | |||
width: 100%; | |||
height: calc(50% + 4em); /*使底下的API一栏不被这个after遮挡*/ | |||
top: 0; | |||
left: 0; | |||
} | |||
.block-container-frame.mainpage-tile>div:hover img{ | |||
/*鼠标移入放大图片*/ | |||
/*transform: translate(-50%,-25%) scale(1.2);*/ | |||
max-width: 100%; | |||
max-height: 100%; | |||
} | |||
.block-container-frame.mainpage-tile>div{ | |||
z-index: 211; | |||
transition: 0.3s ease; | |||
} | |||
.block-container-frame.mainpage-tile>div:hover{ | |||
/*鼠标移入放大*/ | |||
/*transform: scale(1.05);*/ | |||
z-index: 233; | |||
} | |||
/*主页磁贴拓展*/ | |||
.block-container-frame.mainpage-tile.main-tile-single-img>div>center{ | |||
margin-top: calc(50% - 1.5em); | |||
} | |||
.block-container-frame.mainpage-tile.main-tile-single-img>div img{ | |||
max-height: calc(100% - 1.5em); | |||
transform: translate(-50%,calc(50% - 3.5em)); | |||
-webkit-filter: brightness(1.0) drop-shadow(0px 0px 3px #888); | |||
filter: brightness(1.0) drop-shadow(0px 0px 3px #888); | |||
} | |||
.block-container-frame.mainpage-tile.main-tile-single-img:hover>div img{ | |||
max-width: 80%; | |||
max-height: calc(100% - 1.5em); | |||
} | |||
.block-container-frame.mainpage-tile.main-tile-single-img>div:hover img{ | |||
-webkit-filter: brightness(1.1) drop-shadow(0px 0px 5px #222); | |||
filter: brightness(1.1) drop-shadow(0px 0px 5px #222); | |||
} | |||
/* 首页轮播图 */ | |||
.carousel.big-carousel .carousel-indicators li, .carousel.big-carousel .carousel-indicators li.active { | |||
width: 10px; | |||
height: 10px; | |||
box-shadow: 0 0 4px #FAFAFA; | |||
} | |||
/* 软重定向 */ | |||
.SoftRedirect{ | |||
display: inline; | |||
padding: 0; | |||
padding-left: 47px; | |||
background: transparent url(/resources/src/mediawiki.action/images/redirect-ltr.png?926f7) bottom left no-repeat; | |||
} | } |
2022年10月26日 (三) 21:18的版本
/* 这里放置的CSS将应用于所有皮肤 */
#ca-talk {
display: none !important;
}
#pt-mytalk{
display: none !important;
}
#site-tools{
display: none !important;
}
#page-tools{
display: none !important;
}
/* 悬浮 */
.iteminfo {display:none;}
.itemhover:hover .iteminfo{display:block;}
/* 黑幕 */
.heimu,.blackcurtain{
transition: all .3s;
background: var(--heimu);
color: var(--heimu);
/* 黑幕:一块黑色区域,鼠标移入后显示内容
使用方法:将heimu类或者blackcurtain类附加到你想实现黑幕的元素上
彩色黑幕:将元素的--heimu变量变为你想要的颜色 */
}
.heimu:hover,.blackcurtain:hover{ /*黑幕,鼠标移入后文字背景透明*/
background: transparent;
}
/* 模板:主页磁贴 */
.block-container-frame.mainpage-tile>div img{
position: absolute;
max-width: 80%;
max-height: calc(100% - 3.5em);
/*特殊的居中操作*/
left: 50%;
bottom: calc(50% - 3em);
transform: translate(-50%,calc(50% - 4.5em));
transition: 0.3s ease;
/* border: 1px solid grey; */
}
.block-container-frame.mainpage-tile>div>center{
/*文字说明*/
margin-top: calc(50% - 3.5em);
}
.block-container-frame.mainpage-tile>div>center>a{
/*文字超出部分自动截取*/
display: inline-block;
max-width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.block-container-frame.mainpage-tile>div>center>a:hover{
/*取消文字的下划线装饰*/
text-decoration: none;
}
.block-container-frame.mainpage-tile>div>center>a>span[class]:after{
/*用after使得整个div变得可点击*/
content: '';
position: absolute;
width: 100%;
height: calc(50% + 4em); /*使底下的API一栏不被这个after遮挡*/
top: 0;
left: 0;
}
.block-container-frame.mainpage-tile>div:hover img{
/*鼠标移入放大图片*/
/*transform: translate(-50%,-25%) scale(1.2);*/
max-width: 100%;
max-height: 100%;
}
.block-container-frame.mainpage-tile>div{
z-index: 211;
transition: 0.3s ease;
}
.block-container-frame.mainpage-tile>div:hover{
/*鼠标移入放大*/
/*transform: scale(1.05);*/
z-index: 233;
}
/*主页磁贴拓展*/
.block-container-frame.mainpage-tile.main-tile-single-img>div>center{
margin-top: calc(50% - 1.5em);
}
.block-container-frame.mainpage-tile.main-tile-single-img>div img{
max-height: calc(100% - 1.5em);
transform: translate(-50%,calc(50% - 3.5em));
-webkit-filter: brightness(1.0) drop-shadow(0px 0px 3px #888);
filter: brightness(1.0) drop-shadow(0px 0px 3px #888);
}
.block-container-frame.mainpage-tile.main-tile-single-img:hover>div img{
max-width: 80%;
max-height: calc(100% - 1.5em);
}
.block-container-frame.mainpage-tile.main-tile-single-img>div:hover img{
-webkit-filter: brightness(1.1) drop-shadow(0px 0px 5px #222);
filter: brightness(1.1) drop-shadow(0px 0px 5px #222);
}
/* 首页轮播图 */
.carousel.big-carousel .carousel-indicators li, .carousel.big-carousel .carousel-indicators li.active {
width: 10px;
height: 10px;
box-shadow: 0 0 4px #FAFAFA;
}
/* 软重定向 */
.SoftRedirect{
display: inline;
padding: 0;
padding-left: 47px;
background: transparent url(/resources/src/mediawiki.action/images/redirect-ltr.png?926f7) bottom left no-repeat;
}