MediaWiki:Mobile.css: Difference between revisions

From Sarkarverse
Jump to navigation Jump to search
m (Undo revision 54948 by Abhidevananda (talk))
m (Hiding two more tabs)
 
(6 intermediate revisions by 2 users not shown)
Line 1: Line 1:
/* CSS placed here will affect users of the mobile site */
/* CSS placed here will affect users of the mobile site */
 
#ca-history {
/**
     display: none;
You are editing the global css file for all mobile site users.
With Great Power Comes Great Responsibility.
 
Some words of caution:
* Avoid any changes which impact layout on a mobile device.
** Please be careful not to introduce any margin / padding rules. These should be done inside the template itself via an inline style.
** Be especially cautious when a template is likely to be used within the top 480px of the screen (the content that the user will see first on a mobile device)
* Do not use display:none. Instead edit the template and markup the element you want to hide with the `nomobile` class.
* Try to keep rules as generic and minimal as possible. Do not have 2 selectors doing the same thing. Introduce a common class and use that instead
* For big changes consult the [https://grafana.wikimedia.org/dashboard/db/mobile-2g grafana dashboard] to ensure you don't introduce any performance regressions.
* Group common css rules together where possible.
*/
 
/* Mobile template hacks (see bug 54176) */
.mobile-float-reset {
     float: none !important;
    width: 100% !important;
}
}
 
#ca-view {
/* Hide the images */
    display: none;
.geo-nondefault, .geo-multi-punct,
/* Hide stuff meant for accounts with special permissions. Made visible again in
  [[MediaWiki:Group-sysop.css]], [[MediaWiki:Group-accountcreator.css]] and
  [[MediaWiki:Group-autoconfirmed.css]]. */
.sysop-show,
.accountcreator-show,
.autoconfirmed-show,
/* Copied from Common.css - allow for hiding text in compact form e.g. clean up templates */
.hide-when-compact,
/* portal pages are badly formatted. Until this changes these should be hidden. (see https://phabricator.wikimedia.org/T86495) */
.noprint.portal {
display: none;
}
}
 
#ca-viewsource {
/* For linked citation numbers and document IDs, where
     display: none;
  the number need not be shown on a screen or a handheld,
  but should be included in the printed version
TODO: Move to Citation template when templates have stylesheets
See https://www.mediawiki.org/wiki/Requests_for_comment/Allow_styling_in_templates
*/
@media screen, handheld {
     .citation *.printonly {
        display: none;
    }
}
/* Styling for citations (CSS3). Breaks long urls, etc., rather than overflowing box
*/
.citation {
    word-wrap: break-word;
}
}


/* override default center aligning of th cells in some browsers,
/* MP3 Player */
* most th cells in infoboxes are row headers and left aligned */
.green-audio-player{
.infobox > th {
    width:320px;
/* @noflip */
    min-width:300px;
text-align: left;
    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{
/* Default styling for Navbar template
     outline:1px dotted #999
TODO: Move to Navbar template when templates have stylesheets
See https://www.mediawiki.org/wiki/Requests_for_comment/Allow_styling_in_templates
*/
.navbar {
    display: inline;
    font-size: 88%;
     font-weight: normal;
}
}
.navbar ul {
.green-audio-player img,.green-audio-player svg{
     display: inline;
     display:block
    white-space: nowrap;
}
}
.navbar li {
.green-audio-player .holder{
     word-spacing: -0.125em;
     position:relative
}
}
.navbar.mini li span {
.green-audio-player .holder .loading .loading__spinner{
  font-variant: small-caps;
    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
}
}
/* Navbar styling when nested in infobox and navbox */
.green-audio-player .holder .play-pause-btn{
.navbox .navbar,
     visibility:hidden;
.infobox .navbar {
    cursor:pointer;
     font-size: 100%;
    outline:none
}
}
.navbox .navbar {
.green-audio-player .holder .play-pause-btn:focus{
     display: block;
     outline:none
}
}
.navbox-title .navbar {
.green-audio-player .slider{
     /* @noflip */
     -webkit-box-flex:1;
     float: left;
     -ms-flex-positive:1;
     /* @noflip */
     flex-grow:1;
     text-align: left;
     background-color:#d8d8d8;
     /* @noflip */
     cursor:pointer;
    margin-right: 0.5em;
     position:relative
     width: 6em;
}
}
/* Unbulleted lists e.g. Barack Obama page */
.green-audio-player .slider .gap-progress{
.plainlist ul {
     background-color:#44bfa3;
     list-style: none;
    border-radius:inherit;
    position:absolute;
    pointer-events:none
}
}
 
.green-audio-player .slider .gap-progress .pin{
.visualhide {
     height:16px;
     position: absolute;
    width:16px;
     left: -10000px;
     border-radius:8px;
     top: auto;
    background-color:#44bfa3;
     width: 1px;
     position:absolute;
     height: 1px;
     pointer-events:all;
     overflow: hidden;
     -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:"";
Hatnotes and disambiguation notices
    display:block;
Please review the default hatnote styles provided by MobileFrontend before adding here.
    background:transparent;
*/
    width:200%;
.hatnote i {
    height:200%;
     font-style: normal;
    margin-left:-50%;
     margin-top:-50%;
    border-radius:50%
}
}
div.hatnote {
.green-audio-player .controls{
     /* @noflip */
     font-family:Roboto,sans-serif;
     /*padding-left: 1.6em;
    font-size:16px;
     margin-bottom: 0.5em;
    line-height:18px;
     commented out until https://phabricator.wikimedia.org/T130846 is resolved*/
    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{
/* Geographical coordinates defaults. See [[Template:Coord/link]]
    margin-left:16px;
  for how these are used. The classes "geo", "longitude", and
    margin-right:16px;
  "latitude" are used by the [[Geo microformat]]. */
    border-radius:2px;
.geo-default, .geo-dms, .geo-dec  { display: inline; }
    height:4px
 
.longitude, .latitude            { white-space: nowrap; }
 
/* Prevent line breaks in silly places:
  1) Where desired
  2) Links when we don't want them to
  3) Bold "links" to the page itself
  4) Ref tags with group names <ref group="Note"> --> "[Note 1]"
Please document here what pages use this
*/
.mw-parser-output table:not(.infobox) .nowrap,
.nowraplinks a,
.nowraplinks .selflink,
sup.reference a {
white-space: nowrap;
}
}
/* But allow wrapping where desired: */
.green-audio-player .controls .controls__slider .controls__progress{
.wrap,
     width:0;
.wraplinks a {
    height:100%
     white-space: normal;
}
}
 
.green-audio-player .controls .controls__slider .controls__progress .progress__pin{
/* hidden sortkey for tablesorter */
     right:-8px;
td .sortkey,
     top:-6px
th .sortkey {
     display: none;
     speak: none;
}
}
 
.green-audio-player .controls span{
/* Pie chart: Transparent borders */
     cursor:default
.transborder {
     border: solid transparent;
}
}
 
.green-audio-player .controls:focus{
/* Generic class for Times-based serif, texhtml class for inline math */
     outline:none
.times-serif,
span.texhtml {
     font-family: serif;
}
}
span.texhtml {
.green-audio-player .volume{
     white-space: nowrap;
     position:relative
}
}
 
.green-audio-player .volume .volume__button{
/*
     cursor:pointer;
Enable custom list style types for lists of references
    outline:none
*/
.reflist ol.references {
     list-style-type: inherit;
}
}
 
.green-audio-player .volume .volume__button:focus{
/* Hanging indentation for Template:Refbegin */
    outline:none
.refbegin-hanging-indents > ul,
.refbegin-hanging-indents > dl {
list-style-type: none;
margin-left: 0;
}
}
.refbegin-hanging-indents > ul > li,
.green-audio-player .volume .volume__button.open path{
.refbegin-hanging-indents > dl > dd {
    fill:#44bfa3
margin-left: 0;
padding-left: 1.0em;
text-indent: -1.0em;
list-style: none;
}
}
 
.green-audio-player .volume .volume__controls{
/* Prevent flags in tables from collapsing */
    width:30px;
.flagicon img {
    height:135px;
     min-width: 25px;
    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{
/* Prevent unnecessary margin at the bottom of centralnotices */
    margin-top:12px;
.cnotice {
    margin-bottom:12px;
margin-bottom: 0 !important;
    width:6px;
    border-radius:3px
}
}
 
.green-audio-player .volume .volume__controls .volume__slider .volume__progress{
/**
     bottom:0;
******************DEPRECATED STYLES ************************************
    height:100%;
These styles will be removed shortly. Please see inline comments.
    width:6px
**/
 
 
/*
Generate interpuncts
Should be removed and moved to templates once TemplateStyles is live
*/
#content .hlist dt:after {
     content: ": ";
}
}
/* Can be removed when T169315 is resolved */
.green-audio-player .volume .volume__controls .volume__slider .volume__progress .volume__pin{
#content .hlist-separated li:after {
    left:-5px;
  font-size: 0.8em;
    top:-8px
  color: #333;
}
}
/*
.green-audio-player .volume .volume__controls:focus{
Note the mobile skin provides a `hlist-separated` class for this purpose. Use this class name alongside the hlist class instead as this will result in a FOUC.
     outline:none
Should be removed and moved to templates once TemplateStyles is live
*/
#content .hlist dd:after {
     content: " · ";
    font-weight: bold;
}
}
/* Should be removed and moved to templates once TemplateStyles is live */
.green-audio-player .volume .volume__controls.hidden{
#content .hlist dd:last-child:after,
     display:none
#content .hlist dt:last-child:after,
#content .hlist li:last-child:after {
     content: none;
}
}
/* Add parentheses around nested lists */
.green-audio-player .volume .volume__controls.top{
/* Should be removed and moved to templates once TemplateStyles is live */
     bottom:52px;
#content .hlist dd dd:first-child:before, #content .hlist dd dt:first-child:before, #content .hlist dd li:first-child:before,
     left:-3px
#content .hlist dt dd:first-child:before, #content .hlist dt dt:first-child:before, #content .hlist dt li:first-child:before,
#content .hlist li dd:first-child:before, #content .hlist li dt:first-child:before, #content .hlist li li:first-child:before {
     content: " (";
     font-weight: normal;
}
}
/* Should be removed and moved to templates once TemplateStyles is live */
.green-audio-player .volume .volume__controls.middle{
#content .hlist dd dd:last-child:after, #content .hlist dd dt:last-child:after, #content .hlist dd li:last-child:after,
     bottom:-54px;
#content .hlist dt dd:last-child:after, #content .hlist dt dt:last-child:after, #content .hlist dt li:last-child:after,
     left:54px
#content .hlist li dd:last-child:after, #content .hlist li dt:last-child:after, #content .hlist li li:last-child:after {
     content: ") ";
     font-weight: normal;
}
}
/* Put ordinals in front of ordered list items */
.green-audio-player .volume .volume__controls.bottom{
/* Should be removed and moved to templates once TemplateStyles is live */
     bottom:-164px;
#content .hlist ol {
    left:-3px
     counter-reset: listitem;
}
}
/* Should be removed and moved to templates once TemplateStyles is live */
.green-audio-player .download{
#content .hlist ol > li {
     display:none;
     counter-increment: listitem;
    margin-left:16px;
    cursor:pointer;
    outline:none
}
}
/* Should be removed and moved to templates once TemplateStyles is live */
.green-audio-player .download:focus,.green-audio-player:focus{
#content .hlist ol > li:before {
     outline:none
     content: " " counter(listitem) " ";
    white-space: nowrap;
}
}
/* Should be removed and moved to templates once TemplateStyles is live */
.message__offscreen{
#content .hlist dd ol > li:first-child:before,
    border:0;
#content .hlist dt ol > li:first-child:before,
    clip:rect(1px,1px,1px,1px);
#content .hlist li ol > li:first-child:before {
    -webkit-clip-path:inset(50%);
     content: " (" counter(listitem) " ";
    clip-path:inset(50%);
    height:1px;
    margin:-1px;
    overflow:hidden;
    padding:0;
    position:absolute;
     width:1px;
    word-wrap:normal
}
}

Latest revision as of 13:56, 23 April 2021

/* CSS placed here will affect users of the mobile site */
#ca-history {
    display: none;
}
#ca-view {
    display: none;
}
#ca-viewsource {
    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
}
Retrieved from "https://sarkarverse.org/index.php?title=MediaWiki:Mobile.css&oldid=92150"