|
|
(8 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 |
| } | | } |