MediaWiki:Citizen.css：修订间差异

MediaWiki界面页面
小 （1）
（修正flexdiv,将特殊的动画转移到common.css）
第33行： 第33行：
/*新主页的flex*/
/*新主页的flex*/
.flexdiv {   
.flexdiv {   
    display: flex;   
display: flex;   
    flex-wrap: wrap;
flex-wrap: wrap;
width:100%
}   
}   
    
    
.wikibox {   
.wikibox {   
    width: 100%;   
width:33.33%;   
    box-sizing: border-box;
box-sizing: border-box;
    padding: 10px;
}   
}   
    
    
@media (max-width: 600px) {
@media (min-width: 601px) {
    .wikibox {
.wikibox {
        width: 100%;
width: 33.33%;
    }   
}   
}   
}   
    
    
@media (min-width: 601px) and (max-width: 900px) { 
.wikibox2 {   
    .wikibox {   
width:33.33%;  
        width: 50%;
box-sizing: border-box;  
    }  
}   
}   
    
    
@media (min-width: 901px) {   
@media (min-width: 601px) {   
    .wikibox { 
        width: 33.33%; 
    } 
}
 
.wikibox2 {   
.wikibox2 {   
    width: 100%;   
width: 66.66%;   
    box-sizing: border-box; 
    padding: 10px;
}   
}   
 
@media (max-width: 600px) { 
    .wikibox2:nth-child(2) { 
        width: 100%; 
    } 
}   
}   
 
 
.wikibox3 { 
width:33.33%;
box-sizing: border-box; 
}
@media (min-width: 601px) {   
@media (min-width: 601px) {   
    .wikibox2:nth-child(1) { 
.wikibox3 {   
        width: 66.66%; 
width: 50%;   
    } 
}   
    .wikibox2:nth-child(2) {   
}  
        width: 33.33%;   
    }   
}


/*限定勋章的动画效果*/
@media (max-width: 600px) {
.medalcontainer
.wikibox, .wikibox2, .wikibox3 {
{
width: 100%;
  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);
}
}
}

2023年12月27日 (三) 23:00的版本

/* 这里的任何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;
width:100%
}  
  
.wikibox {  
width:33.33%;  
box-sizing: border-box;  
}  
  
@media (min-width: 601px) {  
.wikibox {  
width: 33.33%;  
}  
}  
  
.wikibox2 {  
width:33.33%; 
box-sizing: border-box;  
}  
  
@media (min-width: 601px) {  
.wikibox2 {  
width: 66.66%;  
}  
}  

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

@media (max-width: 600px) {  
.wikibox, .wikibox2, .wikibox3 {  
width: 100%;  
}  
}
取自“http://wiki.easecation.net/index.php?title=MediaWiki:Citizen.css&oldid=7841”