%PDF- %PDF-
| Direktori : /data/www_bck/varak.net_bck/wiki.varak.net/extensions.old/MobileFrontend/less/content/ |
| Current File : //data/www_bck/varak.net_bck/wiki.varak.net/extensions.old/MobileFrontend/less/content/main.less |
@import "minerva.variables";
@import "minerva.mixins";
// Content formatting and typography
//
// Our content is predominately text, hence visual hierarchy must be clear.
//
// Styleguide 1.
html {
// prevent font scaling in landscape in Safari
-webkit-text-size-adjust: none;
font-size: 100% * @fontScalingFactor;
}
@bodyLineHeight: 1.4;
@headingLineHeight: 1.3;
@tableHeadBackgroundColor: #F2F2F2;
body {
font-family: @fontFamily;
line-height: @bodyLineHeight;
color: @grayDark;
background: #fff;
}
// Page title
// h1#section_0 is not inside .content...
#section_0 {
line-height: @headingLineHeight;
}
.content {
line-height: @contentLineHeight;
margin: .8em @contentMargin 0;
// Deal with long links (bug 60387)
word-wrap: break-word;
// Headings in mobile
//
// All headings styled in the content div will be styled like so.
//
// Markup:
// <div class="content">
// <h1>Heading 1</h2>
// <p>Paragraph of text</p>
// <h2>Heading 2</h2>
// <p>Paragraph of text</p>
// <h3>Heading 3</h3>
// <p>Paragraph of text</p>
// <h4>Heading 4</h4>
// <p>Paragraph of text</p>
// <h5>Heading 2</h5>
// <p>Paragraph of text</p>
// <h6>Heading 2</h6>
// <p>Paragraph of text</p>
// </div>
//
// Styleguide 1.1.
h1, h2, h3, h4, h5, h6 {
line-height: @headingLineHeight;
font-family: @fontFamilyHeading;
padding: @headingMargin 0;
}
p {
margin: .5em 0 1em 0;
}
// Thumbnails
//
// Thumbnail images should be rendered within a thumb class
//
// Markup:
// <div class="content">
// <div class="thumb"><img src="images/arrow-left.png"></div>
// </div>
//
// Styleguide 1.2.
.thumb {
margin: .6em 0;
// Linker.php
.thumbinner {
margin: 0 auto;
max-width: 100%;
> div {
float: none !important;
width: auto !important;
clear: both !important;
}
}
/* bug 20030 */
.noresize {
width: 100%;
overflow-x: auto;
img {
max-width: none !important;
}
}
}
.thumbcaption {
margin: .5em 0 0;
font-size: .8em;
line-height: 1.5;
padding: 0 !important;
color: @grayMediumDark;
width: auto !important;
}
.thumbborder {
border: 1px solid @colorGray12;
}
// Full-size images
//
// Inline and floated full-size images will be styled like so.
//
// Example wikitext:
// This is an [[File:Book.png]] inline image.
// [[File:Book.png|left]]Left-aligned image
// [[File:Book.png|right]]Right-aligned image
//
// Markup:
// <div class="content">
// <p>This is an <img src="images/arrow-left.png"> inline image.</p>
// <div class="floatleft"><img src="images/arrow-left.png">Left-aligned image</div>
// <div class="floatright"><img src="images/arrow-left.png">Right-aligned image</div>
// </div>
//
// Styleguide 1.3.
img {
// Matches commonElements.css
vertical-align: middle;
}
// Applied to divs containing aligned, full-size images
.floatright {
/* @noflip */
clear: right;
/* @noflip */
float: right;
/* @noflip */
margin: 0 0 .6em .6em;
}
// Applied to divs containing aligned, full-size images
.floatleft {
/* @noflip */
clear: left;
/* @noflip */
float: left;
/* @noflip */
margin: 0 .6em .6em 0;
}
ol,
ul {
ol,
ul {
margin-left: 1em;
}
}
// Prevent inline styles on images in wikitext
// Note we restrict to img's to avoid conflicts with VisualEditor shields
// See bug 62460
a > img {
// make sure that images in articles don't cause a horizontal scrollbar
// on small screens
max-width: 100% !important;
height: auto !important;
}
ul {
list-style: square inside;
}
ol {
list-style: decimal inside;
}
table {
margin: 1em 0;
/* following 4 rules are needed for scrolling */
overflow: auto; /* for browsers that don't support overflow-y */
overflow-y: hidden;
overflow-x: auto;
display: block;
width: 100% !important;
td,
th {
padding: 3px;
border: 1px @grayLight solid;
}
th {
font-weight: bold;
background-color: @colorGray14;
text-align: center;
}
caption {
display: block;
text-align: left;
}
}
// Hide the image magnification icon normally displayed in image captions
div.magnify {
display: none;
}
// Generic class name needed
.return-link,
#mw-mf-last-modified {
display: block;
font-size: .9em;
margin-top: 1.5em;
}
}
strong,
b {
font-weight: bold;
}
em,
i {
font-style: italic;
}
a.external {
/* @embed */
.background-image-svg( 'images/external-link-ltr-icon.svg', 'images/external-link-ltr-icon.png' );
background-repeat: no-repeat;
background-position: center right;
padding-right: 13px;
}
// Galleries
//
// FIXME: Doesn't support parameters in https://en.wikipedia.org/wiki/Help:Gallery_tag */
// See https://www.mediawiki.org/wiki/Help:Images#Rendering_a_gallery_of_images */
//
// Styleguide 1.4.
ul.gallery {
list-style: none;
max-width: 100%;
.gallerybox {
display: inline-block;
vertical-align: top;
max-width: 100%;
.thumb {
img {
display: block;
}
}
> div {
max-width: 100%;
> .thumb {
max-width: 100%;
}
}
.gallerytext {
overflow: hidden;
padding: 2px 4px;
word-wrap: break-word;
font-size: .8em;
}
}
}
.hlist > ul, // FIXME: to support hlists on enwiki projects - this should be deprecated
// Horizontal Lists
//
// Use hlist class when dealing with lists where items should be horizontal.
//
// Markup:
// <ul class="hlist">
// <li>item 1</li>
// <li>item 2</li>
// </ul>
//
// Styleguide 1.5.
ul.hlist {
li {
display: inline-block;
margin-right: 8px;
}
}
// Code
//
// Use this solely for blocks of computer code.
//
// Markup:
// <code>
// body {
// color:red;
// }
// </code>
//
// Styleguide 1.6.
// Preformatted text
//
// Use on text where whitespace is significant and the content should not be formatted.
//
// Markup:
// <pre>
// body {
// color:red;
// }
// </pre>
//
// Styleguide 1.7.
code,
pre {
padding: 1em;
font-family: monospace;
border: solid 1px @colorGray12;
white-space: pre-wrap;
}
dl {
margin-left: 1em;
dt {
font-weight: bold;
}
}
.pre-content h1,
.content h1 {
font-family: @fontFamilyHeading;
font-size: 1.7em;
}
h2 {
font-size: 1.5em;
}
h3 {
font-size: 1.2em;
font-weight: bold;
}
h4 {
font-weight: bold;
}
sup {
vertical-align: super;
}
sub {
vertical-align: sub;
}
sub,
sup {
font-size: 0.75em;
// Avoid line-height issues caused by sup and sub
line-height: 1;
}
@media all and (max-width: @wgMFDeviceWidthMobileSmall) {
body {
font-size: .8em;
}
.content {
margin: 0 12px;
}
}
// Blockquotes
//
// Use the blockquote tag for quoted text.
//
// Markup:
// <blockquote>In the end, it's not the years in your life that count. It's the life in your years.</blockquote>
//
// Styleguide 1.8.
blockquote {
font-family: @fontFamilyHeading;
font-size: 1.1em;
quotes: "\201C" "\201D";
padding: 1em @blockquotePaddingRight 1em @blockquotePaddingLeft;
position: relative;
overflow: hidden;
&:before {
content: open-quote;
font-size: 3em;
position: absolute;
left: 0;
top: 0;
}
&:after {
content: close-quote;
font-size: 3em;
line-height: 1;
position: absolute;
right: 0;
bottom: 0;
}
}
.nomobile {
display:none;
}
/* Plainlinks - this can be used to switch
* off special external link styling */
.plainlinks a {
background: none !important;
padding: 0 !important;
}