mediawiki-skins-MinervaNeue/resources/skins.minerva.base.styles/ui.less

325 lines
6.4 KiB
Plaintext
Raw Normal View History

@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 {
a,
a:visited {
color: @colorGray5;
// If browser supports
&:nth-child( 2 ) {
font-weight: bold;
}
}
}
.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: left;
.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 {
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;
}
}
.truncated-text {
white-space: nowrap;
overflow: hidden;
-webkit-text-overflow: ellipsis;
text-overflow: ellipsis;
}
// 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;
}
// 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/
#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 > .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;
}
}