MediaWiki:Mobile.css
Jump to navigation
Jump to search
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
/* CSS placed here will affect users of the mobile site */
#ca-history {
display: none;
}
/* MP3 Player */
.green-audio-player{
width:320px;
min-width:300px;
height:36px;
-webkit-box-shadow:0 4px 16px 0 rgba(0,0,0,.07);
box-shadow:0 4px 16px 0 rgba(0,0,0,.07);
display:-webkit-box!important;
display:-ms-flexbox!important;
display:fålex!important;
-webkit-box-pack:justify;
-ms-flex-pack:justify;
justify-content:space-between;
-webkit-box-align:center;
-ms-flex-align:center;
align-items:center;
padding-left:24px;
padding-right:24px;
border-radius:4px;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
background-color:#fff;
-webkit-box-sizing:border-box;
box-sizing:border-box;
outline:none
}
.green-audio-player.player-accessible .controls:hover,.green-audio-player.player-accessible .download:hover,.green-audio-player.player-accessible .play-pause-btn:hover,.green-audio-player.player-accessible .volume__button:hover,.green-audio-player.player-accessible .volume__controls:hover{
outline:1px dotted #999
}
.green-audio-player img,.green-audio-player svg{
display:block
}
.green-audio-player .holder{
position:relative
}
.green-audio-player .holder .loading .loading__spinner{
position:absolute;
left:-3px;
bottom:2px;
width:16px;
height:16px;
border:2px solid #b0b0b0;
border-right-color:transparent;
border-radius:50%;
-webkit-animation:spin .4s linear infinite;
animation:spin .4s linear infinite
}
.green-audio-player .holder .play-pause-btn{
visibility:hidden;
cursor:pointer;
outline:none
}
.green-audio-player .holder .play-pause-btn:focus{
outline:none
}
.green-audio-player .slider{
-webkit-box-flex:1;
-ms-flex-positive:1;
flex-grow:1;
background-color:#d8d8d8;
cursor:pointer;
position:relative
}
.green-audio-player .slider .gap-progress{
background-color:#44bfa3;
border-radius:inherit;
position:absolute;
pointer-events:none
}
.green-audio-player .slider .gap-progress .pin{
height:16px;
width:16px;
border-radius:8px;
background-color:#44bfa3;
position:absolute;
pointer-events:all;
-webkit-box-shadow:0 1px 1px 0 rgba(0,0,0,.32);
box-shadow:0 1px 1px 0 rgba(0,0,0,.32)
}
.green-audio-player .slider .gap-progress .pin:after{
content:"";
display:block;
background:transparent;
width:200%;
height:200%;
margin-left:-50%;
margin-top:-50%;
border-radius:50%
}
.green-audio-player .controls{
font-family:Roboto,sans-serif;
font-size:16px;
line-height:18px;
color:#55606e;
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-flex:1;
-ms-flex-positive:1;
flex-grow:1;
-webkit-box-pack:justify;
-ms-flex-pack:justify;
justify-content:space-between;
-webkit-box-align:center;
-ms-flex-align:center;
align-items:center;
margin-left:15px;
margin-right:15px;
outline:none
}
.green-audio-player .controls .controls__slider{
margin-left:16px;
margin-right:16px;
border-radius:2px;
height:4px
}
.green-audio-player .controls .controls__slider .controls__progress{
width:0;
height:100%
}
.green-audio-player .controls .controls__slider .controls__progress .progress__pin{
right:-8px;
top:-6px
}
.green-audio-player .controls span{
cursor:default
}
.green-audio-player .controls:focus{
outline:none
}
.green-audio-player .volume{
position:relative
}
.green-audio-player .volume .volume__button{
cursor:pointer;
outline:none
}
.green-audio-player .volume .volume__button:focus{
outline:none
}
.green-audio-player .volume .volume__button.open path{
fill:#44bfa3
}
.green-audio-player .volume .volume__controls{
width:30px;
height:135px;
background-color:rgba(0,0,0,.62);
border-radius:7px;
position:absolute;
left:-3px;
bottom:52px;
-webkit-box-orient:vertical;
-webkit-box-direction:normal;
-ms-flex-direction:column;
flex-direction:column;
-webkit-box-align:center;
-ms-flex-align:center;
align-items:center;
display:-webkit-box;
display:-ms-flexbox;
display:flex;
z-index:2;
outline:none
}
.green-audio-player .volume .volume__controls .volume__slider{
margin-top:12px;
margin-bottom:12px;
width:6px;
border-radius:3px
}
.green-audio-player .volume .volume__controls .volume__slider .volume__progress{
bottom:0;
height:100%;
width:6px
}
.green-audio-player .volume .volume__controls .volume__slider .volume__progress .volume__pin{
left:-5px;
top:-8px
}
.green-audio-player .volume .volume__controls:focus{
outline:none
}
.green-audio-player .volume .volume__controls.hidden{
display:none
}
.green-audio-player .volume .volume__controls.top{
bottom:52px;
left:-3px
}
.green-audio-player .volume .volume__controls.middle{
bottom:-54px;
left:54px
}
.green-audio-player .volume .volume__controls.bottom{
bottom:-164px;
left:-3px
}
.green-audio-player .download{
display:none;
margin-left:16px;
cursor:pointer;
outline:none
}
.green-audio-player .download:focus,.green-audio-player:focus{
outline:none
}
.message__offscreen{
border:0;
clip:rect(1px,1px,1px,1px);
-webkit-clip-path:inset(50%);
clip-path:inset(50%);
height:1px;
margin:-1px;
overflow:hidden;
padding:0;
position:absolute;
width:1px;
word-wrap:normal
}