mediawiki-skins-MinervaNeue/resources/skins.minerva.base.styles/ui.less
Umherirrender 211a54b568 Update and run existing stylelint
stylelint is part of config, but not run by default
Also update to 0.4.1, it is the current default in many wmf extensions

Change-Id: I55f81489182628c088e362e081417514e252e6d6
2017-07-19 20:31:24 +00:00

462 lines
9.3 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: solid 1px transparent;
padding-bottom: 32px;
}
.overlay-enabled,
#content {
background-color: @skinContentBgColor;
}
.header-container {
border-bottom: solid 1px @chromeContentSeparator;
&.header-chrome {
background-color: @chromeColor;
border: 0;
box-shadow: inset 0 -1px 3px rgba( 0, 0, 0, 0.08 );
}
}
.last-modified-bar {
background-color: transparent;
display: block;
color: @colorGray5;
transition: background-color 0.2s ease, color 0.2s ease;
a,
a:visited {
color: @colorGray6;
// 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;
}
}
// Make search input more visible for users on small screens.
// Opera Mini doesn't support placeholders.
// FIXME: As soon as HeaderV2 feature flag is removed this entire block can disappear as a search icon
// will now be shown on Opera Mini instead.
@media all and ( max-width: @wgMFDeviceWidthMobileSmall ) {
.header {
.search {
border: 1px solid @grayLight;
// Remove the space for the search icon inside the search bar and increase height to size of button
padding: 0.5em 0.1em;
background: none; // so that the icon doesn't overlap with the placeholder
}
}
}
.search-box,
// Selector is needed to override table-cell rules
.header .search-box {
display: none;
width: auto;
}
.search-box {
// FIXME: remove when micro.tap in stable and rule from common-js.less too
-webkit-tap-highlight-color: rgba( 255, 255, 255, 0 );
.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;
visibility: hidden;
}
.open-block {
// Restrict to child so that child section edit links do not get revealed.
.edit-page {
visibility: visible;
}
}
.section-heading {
width: 100%;
border-bottom: solid 1px @colorGray14;
margin-bottom: @headingMargin;
.indicator {
font-size: @indicatorFontSize;
margin-left: -@iconGutterWidth;
}
}
.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;
}
}