MediaWiki:Common.css: Difference between revisions

no edit summary
No edit summary
Tag: Reverted
No edit summary
Tag: Manual revert
 
(26 intermediate revisions by the same user not shown)
Line 1:
/* CSS placed here will be applied to all skins on desktop */
 
/********* Portable infobox theme *********/
.portable-infobox .pi-title {
.portable-infobox {
background-color: #d62020;
--pi-border-color:white #d62020;
border: 2px solid #d62020;
font-style:bold;
border-radius: 8px;
font-size: 16px;
padding: 0px;
text-align: center;
font-size: 12px;
background-color: #ffffff;
line-height: 1.5;
width: 22.5em;
}
 
.portable-infobox .pi-header {
background-color: #d62020;
text-align: center;
color: white;
width: 17em;
}
.portable-infobox .pi-navigation {
background-color: #ffffff;
font-size: 12px;
text-align: center;
text-color: darkred;
}
 
.portable-infobox .pi-title {
background: #d62020;
color:white;
border-color: var(--theme-box-border-color-inner);
font-size: 14px;
border-radius: var(--theme-box-border-radius-inner);
text-align: center;
font-style: bold;
}
 
.portable-infobox .pi-navigationtitle {
font-weight: bold;
background-color: #ffffff;
font-size: 15px;
padding: 6px 3px;
line-height: 1.2;
text-align: center;
}
 
Line 170 ⟶ 193:
margin-bottom: 1px;
}
 
/* CSS for Audio buttons */
 
.audio-button .video-js .vjs-control-bar,
.audio-lilia .video-js .vjs-control-bar {
background: transparent;
position: inherit;
}
 
.audio-button .video-js,
.audio-button .video-js .vjs-play-control,
.audio-button .mw-tmh-player.audio {
width: 14px !important;
height: 14px !important;
background: transparent;
}
 
.audio-button .vjs-icon-play,
.audio-button .video-js .vjs-play-control .vjs-icon-placeholder,
.audio-button .video-js .vjs-big-play-button .vjs-icon-placeholder,
.audio-button .vjs-icon-replay,
.audio-button .video-js .vjs-play-control.vjs-ended .vjs-icon-placeholder,
.audio-button .mw-tmh-player.audio .mw-tmh-play .mw-tmh-play-icon {
width: 14px;
height: 14px;
background-color: #ffb8b8;
border: none;
border-radius: 5px;
background-image: url('https://static.miraheze.org/twistedwonderlandwiki/8/85/OggPlayer_Play.png');
background-position: 0;
display: inline-block;
background-size: 14px auto;
animation: none;
}
.audio-button .vjs-icon-pause,
.audio-button .video-js .vjs-play-control.vjs-playing .vjs-icon-placeholder,
.audio-button .mw-tmh-player.audio .mw-tmh-play .mw-tmh-play-icon:hover {
background-color: #bd9964 !important;
}
.audio-button .vjs-icon-pause,
.audio-button .video-js .vjs-play-control.vjs-playing .vjs-icon-placeholder {
width: 14px;
height: 14px;
background-image: url('https://static.miraheze.org/twistedwonderlandwiki/3/3e/OggPlayer_Stop.png');
background-size: 14px auto;
}
.audio-button.no-audio img {
background-color: #f78181;
vertical-align: top;
border: none;
border-radius: 5px;
}
 
.audio-lilia .video-js,
.audio-lilia .video-js .vjs-play-control,
.audio-lilia .mw-tmh-player.audio {
width: 50px !important;
height: 50px !important;
background: transparent;
}
 
.audio-lilia .vjs-icon-play,
.audio-lilia .video-js .vjs-play-control .vjs-icon-placeholder,
.audio-lilia .video-js .vjs-big-play-button .vjs-icon-placeholder,
.audio-lilia .vjs-icon-replay,
.audio-lilia .video-js .vjs-play-control.vjs-ended .vjs-icon-placeholder,
.audio-lilia .mw-tmh-player.audio .mw-tmh-play .mw-tmh-play-icon {
width: 50px ;
height: 50px ;
background-color: transparent;
border: none;
background-image: url('https://static.miraheze.org/twistedwonderlandwiki/d/d1/Lilia_Music_1.png');
background-position: 0;
display: inline-block;
background-size: 50px auto;
animation: none;
filter: grayscale(50%);
transition: filter 1s,
background-image 1s,
}
 
.audio-lilia .vjs-icon-pause,
.audio-lilia .video-js .vjs-play-control.vjs-playing .vjs-icon-placeholder,
.audio-lilia .mw-tmh-player.audio .mw-tmh-play .mw-tmh-play-icon:hover {
width: 50px ;
height: 50px ;
background-color: transparent !important;
background-image: url('https://static.miraheze.org/twistedwonderlandwiki/7/71/Lilia_Music_2.png') !important;
background-size: 50px auto;
filter: none;
}
.audio-lilia .vjs-icon-pause,
.audio-lilia .video-js .vjs-play-control.vjs-playing .vjs-icon-placeholder {
animation-duration: 3s;
animation-name: wiggle;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
 
@keyframes wiggle {
0% {transform: rotate(0deg);}
25% {transform: rotate(10deg);}
75% {transform: rotate(-20deg);}
}
.audio-lilia.no-audio {
background-color: transparent;
background-size: 50px auto;
filter: grayscale(100%);
vertical-align: top;
}
 
.audio-button .vjs-icon-play:before,
.audio-button .video-js .vjs-play-control .vjs-icon-placeholder:before,
.audio-button .video-js .vjs-big-play-button .vjs-icon-placeholder:before,
.audio-button .vjs-icon-pause:before,
.audio-button .video-js .vjs-play-control.vjs-playing .vjs-icon-placeholder:before,
.audio-button .vjs-icon-replay:before,
.audio-button .video-js .vjs-play-control.vjs-ended .vjs-icon-placeholder:before,
.audio-lilia .vjs-icon-play:before,
.audio-lilia .video-js .vjs-play-control .vjs-icon-placeholder:before,
.audio-lilia .video-js .vjs-big-play-button .vjs-icon-placeholder:before,
.audio-lilia .vjs-icon-pause:before,
.audio-lilia .video-js .vjs-play-control.vjs-playing .vjs-icon-placeholder:before,
.audio-lilia .vjs-icon-replay:before,
.audio-lilia .video-js .vjs-play-control.vjs-ended .vjs-icon-placeholder:before {
content: none;
}
 
/* Audio Button CSS End */