mediawiki-skins-MinervaNeue/resources/skins.minerva.base.styles/common.less
jdlrobson 006dfaaa12 Hide table of contents temporarily on Minerva desktop
Currently appears unstyled, so in lieu of some styles it would be
better to hide that for the time being and revisit later.

Change-Id: If0f4f02868b1344746affcec5116c325c612d145
2017-10-30 18:11:32 -07:00

95 lines
2.1 KiB
Plaintext

@import 'mediawiki.mixins.less';
@import 'minerva.variables.less';
@import 'minerva.mixins.less';
// Reusable components
//
// Styleguide 6.
// Cloaked element
//
// Use this for elements that are clickable but not visible
// Examples: A file input who's parent is styled with an icon
// A shield that covers the entire screen and is made more opaque
// under a different circumstance
//
// Markup:
// <div style="width:50px; height:50px; border:1px solid red;">
// <input type="file" class="cloaked-element">
// </div>
//
// Styleguide 6.1.
.cloaked-element {
opacity: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.view-border-box *,
.view-border-box {
.box-sizing( border-box );
}
.mw-mf-image-replacement {
font-style: italic;
color: @colorGray7;
text-decoration: underline;
border: dotted 1px @colorGray12;
padding: 10px;
display: inline-block;
}
textarea {
padding: 5px 0 5px 5px;
width: 100%;
resize: none;
}
// We hide the table of contents unless the user is viewing in tablet resolution or higher
.toc-mobile,
// Table of contents as provided by parser has no styling, this is a temporary measure until we are able
// to commit more time to Minerva on desktop
#toc,
// We also need a more specific rule for tablet non-JS users who will load skins.minerva.tablet.styles
.client-nojs .toc-mobile,
.client-js .no-js-only,
.client-js .mw-redirectedfrom,
// FIXME: Use generic rule for print stylesheets
.printfooter,
.jsonly {
display: none;
}
/* TODO: Fix specificity */
/* stylelint-disable no-descending-specificity */
.no-js-only,
.client-js .jsonly {
display: inherit;
}
/* stylelint-enable no-descending-specificity */
.position-fixed {
// use !important to override more specific rules (e.g. in Overlay.less)
position: fixed !important;
}
.touch-events {
:focus {
outline: 0;
}
}
// currently used to hide talk button
.hidden {
display: none !important;
}
// We need to ensure the content has the chrome background - otherwise it will
// overlap the menu during the main menu reveal/hide animation
#mw-mf-page-center {
background-color: @chromeColor;
}