MediaWiki:Citizen.css

注意：在发布之后，您可能需要清除浏览器缓存才能看到所作出的变更的影响。

• Firefox或Safari：按住Shift的同时单击刷新，或按Ctrl-F5或Ctrl-R（Mac为⌘-R）
• Google Chrome：按Ctrl-Shift-R（Mac为⌘-Shift-R）
• Internet Explorer或Edge：按住Ctrl的同时单击刷新，或按Ctrl-F5
• Opera：按 Ctrl-F5。

/* 这里的任何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 (max-width: 600px) {
    .wikibox {
        width: 100%;
    }  
}  
  
@media (min-width: 601px) and (max-width: 900px) {  
    .wikibox {  
        width: 50%;  
    }  
}  
  
@media (min-width: 901px) {  
    .wikibox {  
        width: 33.33%;  
    }  
}

.wikibox2 {  
    width: 100%;  
    box-sizing: border-box;  
    padding: 10px; 
}  
  
@media (max-width: 600px) {  
    .wikibox2:nth-child(2) {  
        width: 100%;  
    }  
}  
  
@media (min-width: 601px) {  
    .wikibox2:nth-child(1) {  
        width: 66.66%;  
    }  
    .wikibox2:nth-child(2) {  
        width: 33.33%;  
    }  
}

/*限定勋章的动画效果*/
.medalcontainer 
{
  height: 80px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000000;
}

.medalcontainer>span
{
  margin: 1px;  
  display: inline-block;
  font-size: 300%;  
  color: white;
  text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
  animation-name: anim;
  animation-timing-function: linear;
  animation-direction: alternate-reverse;
  animation-iteration-count: infinite;
}

.medalcontainer>span:nth-child(1) 
{
	animation-delay: 0.1s;
	animation-duration: 1s;
}

.medalcontainer>span:nth-child(2) 
{
	animation-delay: 0.2s;
	animation-duration: 1s;
}

.medalcontainer>span:nth-child(3) 
{
	animation-delay: 0.3s;
	animation-duration: 1s;
}

.medalcontainer>span:nth-child(4) 
{
	animation-delay: 0.4s;
	animation-duration: 1s;
}

.medalcontainer>span:nth-child(5) 
{
	animation-delay: 0.5s;
	animation-duration: 1s;
}

.medalcontainer>span:nth-child(6) 
{
	animation-delay: 0.6s;
	animation-duration: 1s;
}

.medalcontainer>span:nth-child(7) 
{
	animation-delay: 0.7s;
	animation-duration: 1s;
}

.medalmedalcontainer>span:nth-child(8) 
{
	animation-delay: 0.8s;
	animation-duration: 1s;
}

.medalcontainer>span:nth-child(9) 
{
	animation-delay: 0.9s;
	animation-duration: 1s;
}

.medalcontainer>span:nth-child(10) 
{
	animation-delay: 1.0s;
	animation-duration: 1s;
}

.medalcontainer>span:nth-child(11) 
{
	animation-delay: 1.1s;
	animation-duration: 1s;
}

.medalcontainer>span:nth-child(12) 
{
	animation-delay: 1.2s;
	animation-duration: 1s;
}

.medalcontainer>span:nth-child(13) 
{
	animation-delay: 1.3s;
	animation-duration: 1s;
}

.medalcontainer>span:nth-child(14) 
{
	animation-delay: 1.4s;
	animation-duration: 1s;
}

.medalcontainer>span:nth-child(16) 
{
	animation-delay: 1.5s;
	animation-duration: 1s;
}

.medalcontainer>span:nth-child(17) 
{
	animation-delay: 1.6s;
	animation-duration: 1s;
}

.medalcontainer>span:nth-child(18) 
{
	animation-delay: 1.7s;
	animation-duration: 1s;
}

.medalcontainer>span:nth-child(19) 
{
	animation-delay: 1.8s;
	animation-duration: 1s;
}

@keyframes anim 
{
	0% 
	{
	opacity: .1;
	background-position: 0 0;
	filter: hue-rotate(0deg);
	}
	10% { background-position: 5px 0; }
	20% { background-position: -5px 0; }
	30% { background-position: 15px 0; }
	40% { background-position: -5px 0; }
	50% { background-position: -25px 0; }
	60% { background-position: -50px 0; }
	70% { background-position: 0 -20px; }
	80% { background-position: -60px -20px;}
	81% { background-position: 0 0; }
	100% 
	{
		opacity: 1;
		background-position: 0 0;
		filter: hue-rotate(360deg);
	}
}