mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/MinervaNeue
synced 2024-12-01 09:16:34 +00:00
463 lines
8.9 KiB
Plaintext
463 lines
8.9 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,
|
|
.overlay .cleanup li .issue-notice,
|
|
.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,
|
|
.content,
|
|
.post-content {
|
|
margin: 0 @contentMargin;
|
|
}
|
|
|
|
@media all and ( min-width: @deviceWidthTablet ) {
|
|
// 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;
|
|
}
|
|
}
|