8dad1703af
The link change overrides link colors in last modified, talk button and main menu. This approach was obviously flawed. Rather than enter a specificity war let's instead limit the styles to links which do not have an href. Volker you were right... * Revert "Last modified links should not be progressive blue" This reverts commitbc045b78a2. * Revert "Do not style links without href attribute" This reverts commitdaa6ad5145. * Apply a not selector for links Certain links (including links inside navboxes) render links to themselves - for example the navbox on the San Francisco article (provided it is not removed by wgMFRemovableClasses) These links should be visually distinguished from normal links. The not selector has support from IE9 onwards and given our browser matrix and the low impact of if this fallback fails this is a perfectly acceptable usecase. Bug: T181472 Change-Id: I61b05e3c223f2ba5314aecdf26b8a0ee8caa6524
466 lines
9.0 KiB
Plaintext
466 lines
9.0 KiB
Plaintext
@import 'minerva.variables';
|
|
@import 'minerva.mixins';
|
|
@import 'mediawiki.mixins';
|
|
|
|
/* stylelint-disable no-descending-specificity */
|
|
html,
|
|
body {
|
|
// Ensure overlays take up full screen
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
background-color: @chromeColor;
|
|
}
|
|
|
|
// FIXME: should we use .mw-body here instead?
|
|
#content {
|
|
// avoid margin collapsing (see T147956)
|
|
border-top: 1px solid transparent;
|
|
padding-bottom: 32px;
|
|
}
|
|
|
|
.overlay-enabled,
|
|
#content {
|
|
background-color: @skinContentBgColor;
|
|
}
|
|
|
|
.header-container {
|
|
border-bottom: 1px solid @colorGray12;
|
|
|
|
&.header-chrome {
|
|
background-color: @chromeColor;
|
|
border: 0;
|
|
box-shadow: inset 0 -1px 3px rgba( 0, 0, 0, 0.08 );
|
|
}
|
|
}
|
|
|
|
// if footer has last modified line hide it (T173545)
|
|
#footer-info-lastmod {
|
|
display: none;
|
|
}
|
|
|
|
.last-modified-bar {
|
|
background-color: transparent;
|
|
display: block;
|
|
color: @colorGray5;
|
|
transition: background-color 0.2s ease, color 0.2s ease;
|
|
|
|
a,
|
|
a:visited {
|
|
color: @colorGray5;
|
|
// If browser supports
|
|
&:nth-child( 2 ) {
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
#mw-mf-last-modified {
|
|
padding-top: 5px;
|
|
padding-bottom: 5px;
|
|
background-color: @colorGray14;
|
|
}
|
|
|
|
&.active {
|
|
|
|
#mw-mf-last-modified {
|
|
background-color: @lastModifiedBarActiveBackgroundColor;
|
|
}
|
|
|
|
color: #fff;
|
|
a {
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
|
|
.header {
|
|
display: table;
|
|
width: 100%;
|
|
border-spacing: 0;
|
|
border-collapse: collapse;
|
|
height: @headerHeight;
|
|
white-space: nowrap;
|
|
// When banners are present we want to easily distinguish between them and the header so add border
|
|
border-top: 1px solid @colorGray12;
|
|
margin-top: @headerMarginTop;
|
|
|
|
> div {
|
|
width: @headerHeight;
|
|
position: relative;
|
|
vertical-align: middle;
|
|
display: table-cell;
|
|
}
|
|
|
|
// Menu and notifications button
|
|
> div a {
|
|
display: block;
|
|
}
|
|
|
|
.branding-box {
|
|
width: auto;
|
|
|
|
h1 {
|
|
margin-left: 5px;
|
|
font-size: 1em;
|
|
|
|
span {
|
|
line-height: 1;
|
|
font-size: inherit;
|
|
}
|
|
|
|
img {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
> * {
|
|
float: left;
|
|
}
|
|
|
|
sup {
|
|
color: @colorGray5;
|
|
display: none;
|
|
|
|
.beta & {
|
|
display: initial;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
> .header-title {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.header-action > * {
|
|
min-height: @headerHeight;
|
|
}
|
|
}
|
|
|
|
.header > form,
|
|
.overlay-header .overlay-title {
|
|
padding: 0.15em 0;
|
|
|
|
&:last-child {
|
|
// Reserve space to the right in case the search form in the header or
|
|
// overlay title in the overlay header is the last element. Use @iconGutterWidth
|
|
// because there is a hamburger or close/back icon next to this element and
|
|
// the space between them is exactly that.
|
|
padding-right: @iconGutterWidth;
|
|
}
|
|
}
|
|
|
|
#searchInput {
|
|
cursor: text;
|
|
}
|
|
|
|
.search-box,
|
|
// Selector is needed to override table-cell rules
|
|
.header .search-box {
|
|
display: none;
|
|
width: auto;
|
|
}
|
|
|
|
.search-box {
|
|
|
|
.search {
|
|
@searchIconSize: 20px;
|
|
@searchIconGutter: 6px;
|
|
// FIXME: input's cannot have child elements so not possible to use mw-ui-icon-before here
|
|
// How can we avoid multiple use of magnifying glass icon?
|
|
.background-image-svg( 'magnifying-glass.svg', 'magnifying-glass.png' );
|
|
outline: 0;
|
|
width: 100%;
|
|
// FIXME: unable to check but the important may not be needed for Nokia S60;
|
|
background-color: #fff !important; /* remove fennec default background also see bug 36490 */
|
|
// get rid of rounded corners in Safari
|
|
-webkit-appearance: none;
|
|
|
|
padding: 0.5em 0 0.5em @searchIconSize + (2 * @searchIconGutter);
|
|
background-position: left @searchIconGutter center;
|
|
background-repeat: no-repeat;
|
|
.background-size( @searchIconSize, @searchIconSize );
|
|
border-radius: @borderRadius;
|
|
box-shadow: 0 1px 1px rgba( 0, 0, 0, 0.05 );
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
|
|
/* Search */
|
|
input.search {
|
|
// [T139928] Hide all pseudo-elements added to search inputs in WebKit.
|
|
&::-webkit-search-decoration,
|
|
&::-webkit-search-cancel-button,
|
|
&::-webkit-search-results-button,
|
|
&::-webkit-search-results-decoration {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.content {
|
|
// Correct icon sizes of edit icon when using mw-ui-icon.
|
|
h1 {
|
|
.edit-page {
|
|
font-size: 1 / @fontSizeH1;
|
|
}
|
|
}
|
|
|
|
h2 {
|
|
// Clear table of contents and any other floated elements in desktop Minerva.
|
|
clear: both;
|
|
|
|
.edit-page {
|
|
font-size: 1 / @fontSizeH2;
|
|
}
|
|
}
|
|
|
|
h3 {
|
|
.edit-page {
|
|
font-size: 1 / @fontSizeH3;
|
|
}
|
|
}
|
|
|
|
.edit-page {
|
|
display: inline-block;
|
|
}
|
|
|
|
.collapsible-heading .edit-page {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.collapsible-heading.open-block {
|
|
// Restrict to child so that child section edit links do not get revealed.
|
|
.edit-page {
|
|
visibility: visible;
|
|
}
|
|
}
|
|
|
|
.mw-parser-output > h2,
|
|
.section-heading {
|
|
width: 100%;
|
|
border-bottom: 1px solid @colorGray14;
|
|
margin-bottom: @headingMargin;
|
|
|
|
.indicator {
|
|
font-size: @indicatorFontSize;
|
|
margin-left: -@iconGutterWidth;
|
|
}
|
|
}
|
|
|
|
.mw-parser-output > h1,
|
|
.mw-parser-output > h2,
|
|
.mw-parser-output > h3,
|
|
.mw-parser-output > h4,
|
|
.mw-parser-output > h5,
|
|
.section-heading,
|
|
.in-block {
|
|
// Safari needs this. @see T106347
|
|
display: table;
|
|
.mw-headline {
|
|
width: 100%;
|
|
}
|
|
> span {
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Toggling indicators are unusable without JavaScript
|
|
.client-nojs {
|
|
.section-heading .indicator {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
#page-secondary-actions {
|
|
// Clears floating on table of contents on stub pages.
|
|
clear: both;
|
|
|
|
a {
|
|
margin: 10px 2px 2px 0;
|
|
}
|
|
.language-selector {
|
|
margin-top: 1em;
|
|
}
|
|
}
|
|
|
|
.truncated-text {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
-webkit-text-overflow: ellipsis;
|
|
text-overflow: ellipsis;
|
|
|
|
// FIXME: this works only in WebKit
|
|
&.multi-line {
|
|
white-space: normal;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
|
|
&.two-line {
|
|
-webkit-line-clamp: 2;
|
|
// fallback for non-WebKit
|
|
max-height: 2.6em;
|
|
}
|
|
}
|
|
|
|
// FIXME: Create generic class to represent both of these headers
|
|
.overlay,
|
|
.header {
|
|
|
|
// need to specify id or else other rules are more important
|
|
// FIXME: simplify when .icon class from Overlay used instead
|
|
#secondary-button.user-button,
|
|
.user-button {
|
|
// Make sure count is positioned correctly in relation to bell icon
|
|
position: relative;
|
|
|
|
// can't use display:none class as icons must have a label to retain height
|
|
.label {
|
|
visibility: hidden;
|
|
}
|
|
|
|
&.loading span {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.notification-count {
|
|
@circleSize: 24px;
|
|
@borderSize: 2px;
|
|
margin: auto;
|
|
height: @circleSize;
|
|
background: @notificationBackgroundRead;
|
|
color: @notificationColorRead;
|
|
cursor: pointer;
|
|
|
|
.circle {
|
|
border-radius: 50%;
|
|
border: @borderSize solid @notificationColorRead;
|
|
margin: auto;
|
|
height: @circleSize - @borderSize;
|
|
width: @circleSize - @borderSize;
|
|
|
|
/* stylelint-disable declaration-block-no-duplicate-properties */
|
|
// Center the text number inside the circle
|
|
display: block; // Fallback for old iOS
|
|
text-align: center; // Fallback for old iOS
|
|
display: -webkit-box;
|
|
display: flex;
|
|
-webkit-box-align: center;
|
|
align-items: center;
|
|
-webkit-box-pack: center;
|
|
justify-content: center;
|
|
|
|
span {
|
|
font-weight: bold;
|
|
font-size: 13px;
|
|
line-height: 1;
|
|
letter-spacing: -0.5px;
|
|
}
|
|
}
|
|
|
|
&.notification-unseen {
|
|
color: @notificationColorUnread;
|
|
|
|
.circle {
|
|
background: @notificationBackgroundUnread;
|
|
border-color: @notificationBackgroundUnread;
|
|
}
|
|
}
|
|
|
|
// FIXME: There must be a better way of doing this
|
|
&.max {
|
|
right: 0.2em;
|
|
width: 2em;
|
|
height: 2em;
|
|
line-height: 2em;
|
|
font-size: 0.7em;
|
|
}
|
|
|
|
&:hover {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
// FIXME [mediawiki ui] These rules should not be needed in the mobile context
|
|
.mw-ui-button-group {
|
|
text-align: center;
|
|
|
|
* {
|
|
float: none !important;
|
|
}
|
|
|
|
// For talk and CTA drawer
|
|
.mw-ui-block {
|
|
width: auto;
|
|
}
|
|
}
|
|
|
|
// This is here rather than in mainmenu.less because we want to load these rules for non-js users too
|
|
// Transparent shield hidden by default
|
|
.transparent-shield,
|
|
.navigation-drawer {
|
|
// don't use display: none because it's not animatable
|
|
position: absolute;
|
|
z-index: @z-indexBase;
|
|
visibility: hidden;
|
|
}
|
|
|
|
.content .nojs-edit {
|
|
display: inline-block !important;
|
|
visibility: visible;
|
|
float: right;
|
|
}
|
|
|
|
// It may be better to express these in a single class
|
|
// or think about using extend or a mixin to stay with semantic selectors
|
|
// https://css-tricks.com/the-extend-concept/
|
|
.last-modified-bar #mw-mf-last-modified,
|
|
#bodyContent .panel .content,
|
|
.overlay .content-header,
|
|
.overlay .panel,
|
|
.page-list.side-list .list-thumb,
|
|
.editor-overlay .wikitext-editor,
|
|
.page-list li,
|
|
.topic-title-list li,
|
|
.site-link-list li,
|
|
.previewnote p,
|
|
.pointer-overlay,
|
|
.drawer,
|
|
.successbox,
|
|
.errorbox,
|
|
.list-header,
|
|
.warningbox,
|
|
.mw-revision {
|
|
padding-left: @contentPadding;
|
|
padding-right: @contentPadding;
|
|
}
|
|
|
|
.talk-overlay .comment .comment-content,
|
|
.backtotop,
|
|
.image-list,
|
|
.pre-content,
|
|
// Form only pages e.g Special:MobileOptions
|
|
#mw-content-text > form .oo-ui-fieldLayout-body,
|
|
// Save button on Special:MobileOptions
|
|
#mw-content-text > form > .oo-ui-widget,
|
|
.content,
|
|
.post-content {
|
|
margin: 0 @contentMargin;
|
|
}
|
|
|
|
@media all and ( min-width: @width-breakpoint-tablet ) {
|
|
// FIXME: this should be one generic class name
|
|
.page-summary-list,
|
|
.topic-title-list,
|
|
.site-link-list,
|
|
.overlay .panel,
|
|
.list-header {
|
|
padding-left: @contentPaddingTablet;
|
|
padding-right: @contentPaddingTablet;
|
|
}
|
|
}
|