MediaWiki:Citizen.css：修订间差异

2024年4月5日 (五) 22:28的版本

/* 这里的任何CSS将为使用Citizen皮肤的用户加载 */
.skin-citizen-light .welcomeec {
background-color:#f9fafb;
font-size:80%;
width:100%;
margin:0 auto;
border-radius:5px;
}

.skin-citizen-dark .welcomeec {
background-color:#1e2830;
font-size:80%;
width:100%;
margin:0 auto;
border-radius:5px;
}

/*.skin-citizen-dark .info-class {
filter: invert(1) hue-rotate(180deg);
}*/

/*尝试黑幕的transition标签*/
.mask {
background-color:#000000;
color:#000000;
transition:color 0.1s;
}

.mask:hover {
color:#FFFFFF;
}

/*新主页的flex*/
.flexdiv {  
display: flex;  
flex-wrap: wrap;
}  
  
.wikibox {  
width:100%;  
box-sizing: border-box;
padding: 10px;
}  
  
@media (min-width: 601px) {  
.wikibox {  
width: 33.33%;  
}  
}  
  
.wikibox2 {  
width:100%; 
box-sizing: border-box; 
padding: 10px;
}  
  
@media (min-width: 601px) {  
.wikibox2 {  
width: 66.66%;  
}  
}  

.wikibox3 {  
width:100%; 
box-sizing: border-box;
padding: 10px;
} 
 
@media (min-width: 601px) {  
.wikibox3 {  
width: 50%;  
}  
} 

@media (max-width: 600px) {  
.wikibox, .wikibox2, .wikibox3 {  
width: 100%;  
}  
}

/* 首页隐藏页眉 */
.page-首页 .mw-body-header,
.page-首页 .page-info,
.page-首页 .cs-comments {
	display: none;
}
/* 首页BG */
.page-首页 .banner-image {
	--banner-image-url: url("http://wiki.easecation.net/images/1/1f/Background.jpg");
	--banner-image-height: 70vh;
	background-image: linear-gradient(to top, var(--color-surface-0) 15%, transparent 150%), var(--banner-image-url);
	background-size: cover;
	background-position: top;
	height: var(--banner-image-height);
	margin-bottom: calc(-1 * var(--banner-image-height));
}
/* 测试首页隐藏页眉 */
.page-IndexTest .mw-body-header,
.page-IndexTest .page-info,
.page-IndexTest .cs-comments {
	display: none;
}
/* 测试首页BG */
.page-IndexTest .page-EaseCation_Wiki:新手上路 .banner-image {
	--banner-image-url: url("http://wiki.easecation.net/images/1/1f/Background.jpg");
	--banner-image-height: 70vh;
	background-image: linear-gradient(to top, var(--color-surface-0) 15%, transparent 150%), var(--banner-image-url);
	background-size: cover;
	background-position: top;
	height: var(--banner-image-height);
	margin-bottom: calc(-1 * var(--banner-image-height));
}