diff --git a/.stylelintrc b/.stylelintrc new file mode 100644 index 0000000..73f1bdc --- /dev/null +++ b/.stylelintrc @@ -0,0 +1,9 @@ +{ + "extends": "stylelint-config-wikimedia", + "rules": { + "no-duplicate-selectors": null, + "selector-no-id": null, + "declaration-no-important": null, + "no-descending-specificity": null + } +} diff --git a/Gruntfile.js b/Gruntfile.js index 45d14da..60df3e6 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -3,6 +3,7 @@ module.exports = function ( grunt ) { grunt.loadNpmTasks( 'grunt-contrib-jshint' ); grunt.loadNpmTasks( 'grunt-jsonlint' ); grunt.loadNpmTasks( 'grunt-banana-checker' ); + grunt.loadNpmTasks( 'grunt-stylelint' ); grunt.initConfig( { jshint: { @@ -18,12 +19,21 @@ module.exports = function ( grunt ) { jsonlint: { all: [ '**/*.json', + '.stylelintrc', '!node_modules/**', '!vendor/**' ] + }, + stylelint: { + all: [ + '**/*.css', + '**/*.less', + '!resources/libraries/**', + '!node_modules/**' + ] } } ); - grunt.registerTask( 'test', [ 'jshint', 'jsonlint', 'banana' ] ); + grunt.registerTask( 'test', [ 'jshint', 'jsonlint', 'banana', 'stylelint' ] ); grunt.registerTask( 'default', 'test' ); }; diff --git a/package.json b/package.json index 407b969..5ab2fa7 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,8 @@ "grunt-cli": "0.1.13", "grunt-contrib-jshint": "0.11.3", "grunt-banana-checker": "0.4.0", - "grunt-jsonlint": "1.0.7" + "grunt-jsonlint": "1.0.7", + "grunt-stylelint": "0.7.0", + "stylelint-config-wikimedia": "0.4.1" } } diff --git a/resources/extensions/Echo.less b/resources/extensions/Echo.less index e91d039..3134059 100644 --- a/resources/extensions/Echo.less +++ b/resources/extensions/Echo.less @@ -1,4 +1,4 @@ -@import "../variables.less"; +@import '../variables.less'; /* Handle and position Echo icons */ @@ -12,7 +12,7 @@ } #personal-extra { // Position and keep it from randomly overflowing massively for no apparent reason - margin: .7em 0 -2em 0; + margin: 0.7em 0 -2em 0; ul { list-style: none; @@ -20,10 +20,11 @@ padding: 0; } li { - margin: 0 .75em 0 0; + margin: 0 0.75em 0 0; } } - @media (min-width: @desktop-small-floor) { + + @media ( min-width: @desktop-small-floor ) { #personal-extra { float: left; margin-left: -4.5em; @@ -41,7 +42,7 @@ } } - @media (min-width: @desktop-small-floor) and (max-width: @desktop-small-width) { + @media ( min-width: @desktop-small-floor ) and ( max-width: @desktop-small-width ) { .extension-icons #p-search { margin-right: 11em; } @@ -50,7 +51,7 @@ } } - @media (min-width: @desktop-mid-floor) and (max-width: @desktop-mid-width) { + @media ( min-width: @desktop-mid-floor ) and ( max-width: @desktop-mid-width ) { .extension-icons { #user-tools { width: auto; @@ -61,13 +62,13 @@ } } - @media(max-width: @mobile-width) { + @media ( max-width: @mobile-width ) { .mw-echo-ui-notificationBadgeButtonPopupWidget { z-index: 2; } #personal-extra { position: absolute; - top: .9em; + top: 0.9em; right: 11.75em; li { diff --git a/resources/extensions/VisualEditor.article.less b/resources/extensions/VisualEditor.article.less index 0f5e5a7..ff36465 100644 --- a/resources/extensions/VisualEditor.article.less +++ b/resources/extensions/VisualEditor.article.less @@ -1,24 +1,24 @@ -@import "../variables.less"; +@import '../variables.less'; @media screen { .client-js { .mw-editsection a { - .background-image-svg('../images/brackets-grey.svg', '../images/brackets-grey.png'); + .background-image-svg( '../images/brackets-grey.svg', '../images/brackets-grey.png' ); margin-right: 1.25em; } .mw-editsection a.mw-editsection-visualeditor { - .background-image-svg('../images/pencil-grey.svg', '../images/pencil-grey.png'); + .background-image-svg( '../images/pencil-grey.svg', '../images/pencil-grey.png' ); } .mw-editsection-divider { display: none; } - @media (max-width: @mobile-width) { + @media ( max-width: @mobile-width ) { #ca-ve-edit a { - .background-image-svg('../images/pencil-grey.svg', '../images/pencil-grey.png'); + .background-image-svg( '../images/pencil-grey.svg', '../images/pencil-grey.png' ); } #ca-edit a { - .background-image-svg('../images/brackets-grey.svg', '../images/brackets-grey.png'); + .background-image-svg( '../images/brackets-grey.svg', '../images/brackets-grey.png' ); } } } diff --git a/resources/extensions/VisualEditor.core.less b/resources/extensions/VisualEditor.core.less index a140fef..ae6798a 100644 --- a/resources/extensions/VisualEditor.core.less +++ b/resources/extensions/VisualEditor.core.less @@ -1,8 +1,8 @@ -@import "../variables.less"; +@import '../variables.less'; @media screen { .ve-ui-toolbar { - margin: -.8em -2em 0; + margin: -0.8em -2em 0; } // Still need a way to make it show up right away (instead of initially disappearin under the page header) @@ -21,12 +21,13 @@ padding-right: @content-padding; } - @media (min-width: @desktop-small-floor) and (max-width: @desktop-small-width) { + @media ( min-width: @desktop-small-floor ) and ( max-width: @desktop-small-width ) { .ve-ui-toolbar { - margin-top: -.5em; + margin-top: -0.5em; } } - @media (max-width: @mobile-width) { + + @media ( max-width: @mobile-width ) { .ve-ui-toolbar-floating > .oo-ui-toolbar-bar { top: 0; } diff --git a/resources/forms.less b/resources/forms.less index 3b13afa..7bb06d1 100644 --- a/resources/forms.less +++ b/resources/forms.less @@ -1,4 +1,4 @@ -@import "variables.less"; +@import 'variables.less'; /* * PREFERENCES AND FIELDSET STUFF @@ -25,7 +25,7 @@ min-height: 400px; .prefsection { - border: none; + border: 0; padding: 0; margin: 0; box-shadow: none; @@ -40,10 +40,10 @@ .mw-email-not-authenticated .mw-input, .mw-email-none .mw-input { display: block; - padding: .25em .5em; + padding: 0.25em 0.5em; } - input[type="checkbox"], - input[type="radio"] { + input[type='checkbox'], + input[type='radio'] { margin-left: 0; } } @@ -63,21 +63,21 @@ fieldset { background: @background; legend { - padding: .5em 1.25em; + padding: 0.5em 1.25em; background: @background; font-weight: bold; color: @blue-dark; } } label { - padding-left: .5em; + padding-left: 0.5em; } .mw-input label { padding: 0; margin-right: 1em; } .mw-label { - padding-right: .5em; + padding-right: 0.5em; } .mw-submit { padding-top: 2em; @@ -97,13 +97,13 @@ label { /* pile of bad hacks to try to catch all the different ones */ #searchInput, -input[name="target"], -input[name="user"], -input[name="mime"], -input[size$="0"], -input[type="text"], -input[type="checkbox"], -input[type="radio"], +input[name='target'], +input[name='user'], +input[name='mime'], +input[size$='0'], +input[type='text'], +input[type='checkbox'], +input[type='radio'], input#wpTemplateSandboxPage, input.mw-summary, input.mw-input, @@ -112,36 +112,36 @@ textarea, .mw-ui-input-inline, .mw-ui-input { box-sizing: border-box; - padding: .25em .35em; + padding: 0.25em 0.35em; border: solid 1px @grey; - margin: .5em 0; - box-shadow: inset 0 1px 1px 1px rgba(0, 0, 0, 0.05); + margin: 0.5em 0; + box-shadow: inset 0 1px 1px 1px rgba( 0, 0, 0, 0.05 ); font-size: 1em; min-height: 30px; font-family: @fonts; } select { - padding: .25em; - margin: .5em 0; + padding: 0.25em; + margin: 0.5em 0; } -input[type="checkbox"], -input[type="radio"] { +input[type='checkbox'], +input[type='radio'] { margin-left: 1em; min-height: 0; } -input[type="checkbox"] { +input[type='checkbox'] { border-radius: 2px; } -input[type="radio"] { +input[type='radio'] { border-radius: 8px; } .mw-ui-button.mw-ui-progressive, .mw-ui-button.mw-ui-progressive:active, .mw-ui-button.mw-ui-progressive.mw-ui-checked, -input[type="submit"], -input[type="button"], +input[type='submit'], +input[type='button'], button { - padding: .25em 1em .1em 1em; + padding: 0.25em 1em 0.1em 1em; border: solid 1px @grey; border-bottom-width: @border; text-shadow: 0 -1px 0 @grey; @@ -150,7 +150,7 @@ button { background: @background; color: @text; min-height: 30px; - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); + box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.05 ); &:active { background: @grey-bright; @@ -191,20 +191,19 @@ div.editOptions { fieldset, legend { background: inherit; - border: none; + border: 0; box-shadow: none; padding: 0; margin-top: 2em; } } - /* Extension:TemplateSandbox stuff */ .mw-templatesandbox-page label { padding: 0; } #wpTemplateSandboxPreview { - margin-left: .5em; + margin-left: 0.5em; } /* Recent changes and watchlist options */ @@ -222,7 +221,7 @@ div.editOptions { label { padding: 0 1em 0 0; } - input[type="submit"] { + input[type='submit'] { margin: 0 0 0 4em; } } @@ -230,15 +229,15 @@ div.editOptions { /* Related changes hacks */ .mw-special-Recentchangeslinked { .rcoptions { - input[type="submit"] { + input[type='submit'] { float: right; margin: 0 0 0 4em; } td.mw-label.mw-target-label { vertical-align: top; - padding-top: .75em; + padding-top: 0.75em; } - input[name="target"] { + input[name='target'] { float: left; } } @@ -246,8 +245,8 @@ div.editOptions { clear: left; float: left; } - label[for="showlinkedto"] { - padding: .4em; + label[for='showlinkedto'] { + padding: 0.4em; float: left; } } diff --git a/resources/screen-common.less b/resources/screen-common.less index 41b8427..4dc60a7 100644 --- a/resources/screen-common.less +++ b/resources/screen-common.less @@ -1,4 +1,4 @@ -@import "variables.less"; +@import 'variables.less'; /* Page layout */ @@ -32,7 +32,7 @@ div { } #mw-footer-container { border-top: solid 1px @background-dark2; - box-shadow: inset 0 7px 2px -4px rgba(0, 0, 0, .1); + box-shadow: inset 0 7px 2px -4px rgba( 0, 0, 0, 0.1 ); color: @text-inverse; a { @@ -54,7 +54,7 @@ div { height: 11em; background-repeat: no-repeat; background-position: 50% 50%; - margin: .75em auto 0; + margin: 0.75em auto 0; } #p-logo-text { width: @column-left-size; @@ -62,7 +62,7 @@ div { line-height: 1; a { - padding: .2em 1em; + padding: 0.2em 1em; color: @text; font-family: @fonts-secondary; font-variant: small-caps; @@ -72,8 +72,8 @@ div { /* 13+ character names */ &.long { font-size: 1.45em; - padding: 0 .75em 0 0; - line-height: .8; + padding: 0 0.75em 0 0; + line-height: 0.8; } } } @@ -81,16 +81,16 @@ div { /* Search */ #simpleSearch { - box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05); + box-shadow: inset 0 2px 4px 0 rgba( 0, 0, 0, 0.05 ); background: @background; position: relative; border: solid 1px @grey; } #searchInput { - border: none; + border: 0; margin: 0; height: 2.1em; - padding: .4em 4.5em .2em 2em; + padding: 0.4em 4.5em 0.2em 2em; box-shadow: none; background: transparent; width: 100%; @@ -104,20 +104,20 @@ div { width: 2.5em; height: 2.5em; .icon; - .background-image-svg('images/search-ltr.svg', 'images/search-ltr.png'); + .background-image-svg( 'images/search-ltr.svg', 'images/search-ltr.png' ); background-position: 50% 40%; box-shadow: none; } .suggestions { background: @background; - box-shadow: 0 2px 2px 1px rgba(0, 0, 0, 0.05); + box-shadow: 0 2px 2px 1px rgba( 0, 0, 0, 0.05 ); .suggestions-special { background-color: @background; border: 1px solid @grey; border-bottom-width: @border; - padding: .75em 2em; + padding: 0.75em 2em; } .suggestions-results { background-color: @background; @@ -126,7 +126,7 @@ div { } .suggestions-result { color: @text; - padding: .65em 2em .35em; + padding: 0.65em 2em 0.35em; } .suggestions-result-current { background-color: @blue; @@ -141,14 +141,14 @@ div.suggestions { /* Dropdown stuff */ .pokey, -.pokey::after { +.pokey:after { border-bottom: 10px solid @grey-bright; border-left: 10px solid transparent; border-right: 10px solid transparent; - content: ""; + content: ''; height: 0; position: absolute; - transform: rotate(360deg); // to force some smoothing in annoying browsers + transform: rotate( 360deg ); // to force some smoothing in annoying browsers width: 0; z-index: 4; } @@ -157,8 +157,8 @@ div.suggestions { right: 1px; display: none; } -.pokey::after { - border-bottom-color: #FFFFFF; +.pokey:after { + border-bottom-color: #fff; right: -10px; top: 2px; } @@ -170,7 +170,7 @@ div.suggestions { /* Footer */ #mw-footer { - padding-top: .5em; + padding-top: 0.5em; padding-bottom: 1em; ul, @@ -211,7 +211,7 @@ div.suggestions { padding: 0; } li { - margin: .25em 0 1em; + margin: 0.25em 0 1em; border-bottom: solid 3px @background; &:hover { @@ -243,11 +243,11 @@ div.suggestions { #ca-watch a { .ca-icon(); - .background-image-svg('images/star.svg', 'images/star.png'); + .background-image-svg( 'images/star.svg', 'images/star.png' ); } #ca-unwatch a { .ca-icon(); - .background-image-svg('images/star-filled.svg', 'images/star-filled.png'); + .background-image-svg( 'images/star-filled.svg', 'images/star-filled.png' ); } /* Misc */ @@ -275,11 +275,11 @@ a.new, font-family: @fonts; a { - .background-image-svg('images/pencil-grey.svg', 'images/pencil-grey.png'); + .background-image-svg( 'images/pencil-grey.svg', 'images/pencil-grey.png' ); background-repeat: no-repeat; background-position: 0 0; display: inline-block; - padding: .5em 0 .25em 1.75em; + padding: 0.5em 0 0.25em 1.75em; } } .mw-editsection-bracket { @@ -290,23 +290,30 @@ a.new, } .mw-indicators { float: right; - margin: .75em 0 0 1em; + margin: 0.75em 0 0 1em; } #mw-content { - h1, h2, h3, h4, h5, h6, dt { + h1, + h2, + h3, + h4, + h5, + h6, + dt { font-weight: normal; font-family: @fonts-secondary; line-height: 1.25; - margin: 1.5em 0 .5em; + margin: 1.5em 0 0.5em; } - h1, h2 { + h1, + h2 { border-bottom: solid 2px @blue; } h1.firstHeading { - margin: .25em 0 .5em; + margin: 0.25em 0 0.5em; border-bottom: solid 4px @red; } @@ -343,7 +350,7 @@ hr { border-width: 1px; border-color: @grey; border-style: solid none solid none; - margin: .5em 0; + margin: 0.5em 0; } pre { @@ -353,7 +360,7 @@ pre { } p { - margin: .9em 0 .8em; + margin: 0.9em 0 0.8em; } .center, @@ -364,23 +371,23 @@ p { /* Thumbnails */ .tright { - margin: 0 0 .5em .5em; + margin: 0 0 0.5em 0.5em; padding: 0 0 1em 1.5em; background: #fff; } .tleft { - margin: 0 .5em .5em 0; + margin: 0 0.5em 0.5em 0; padding: 0 1.5em 1em 0; background: #fff; } .thumbinner { .box; - padding: .75em; + padding: 0.75em; } .thumbcaption { font-size: 95%; - padding: .5em 1em; + padding: 0.5em 1em; } .thumbinner img{ border: solid 1px @grey-bright; @@ -392,16 +399,18 @@ p { /* Tables of contents */ ul#filetoc, -#toc, .toc, .mw-warning { +#toc, +.toc, +.mw-warning { display: inline-block; .box; padding: 1.25em 1.75em; - margin: 1em 0 ; + margin: 1em 0; min-width: 15em; } ul#filetoc { display: block; - border: none; + border: 0; } #toc ul, .toc ul { @@ -419,21 +428,21 @@ ul#filetoc { color: @background3; } #toc li:last-child { - margin-bottom: .5em; + margin-bottom: 0.5em; } .toclevel-1 { - margin-bottom: .25em; + margin-bottom: 0.25em; } .mw-changeslist-legend, #mw-content .mw-search-profile-tabs, #mw-content fieldset#mw-searchoptions, table.wikitable { - border: none; + border: 0; color: @text; .box; } #mw-content .mw-search-profile-tabs { - padding: .5em; + padding: 0.5em; } table.wikitable > tr > th, @@ -446,7 +455,7 @@ table.wikitable > * > tr > td { table.wikitable > tr > th, table.wikitable > * > tr > th { - border: none; + border: 0; } /* Color bars */ diff --git a/resources/screen-desktop-full.less b/resources/screen-desktop-full.less index a9c4e50..8aebea9 100644 --- a/resources/screen-desktop-full.less +++ b/resources/screen-desktop-full.less @@ -1,4 +1,4 @@ -@import "variables.less"; +@import 'variables.less'; #mw-site-navigation { .column-left(); diff --git a/resources/screen-desktop-mid.less b/resources/screen-desktop-mid.less index 9768e7f..4a6ed5c 100644 --- a/resources/screen-desktop-mid.less +++ b/resources/screen-desktop-mid.less @@ -1,4 +1,4 @@ -@import "variables.less"; +@import 'variables.less'; #mw-site-navigation, #mw-related-navigation { diff --git a/resources/screen-desktop-small.less b/resources/screen-desktop-small.less index 0a88dce..bf070ff 100644 --- a/resources/screen-desktop-small.less +++ b/resources/screen-desktop-small.less @@ -1,4 +1,4 @@ -@import "variables.less"; +@import 'variables.less'; // Redundant sidebar category list and stuff @@ -12,7 +12,6 @@ .categories-bottom(); - // Header navigation .sidebar-chunk { @@ -39,8 +38,8 @@ font-weight: normal; font-family: @fonts-secondary; font-size: 1.25em; - padding: .5em 0 .2em; - margin: 0; + padding: 0.5em 0 0.2em; + margin: 0; .dropdown-header(); } @@ -111,7 +110,7 @@ display: none; } h2:after { - margin-left: -.65em; + margin-left: -0.65em; } .dropdown { right: -1em; diff --git a/resources/screen-desktop.less b/resources/screen-desktop.less index e0f7501..35c0eae 100644 --- a/resources/screen-desktop.less +++ b/resources/screen-desktop.less @@ -1,4 +1,4 @@ -@import "variables.less"; +@import 'variables.less'; // Override menu display from mobile // This also requires !importants where they hover and stuff @@ -13,7 +13,7 @@ margin: auto; } #mw-content-container { - .background-image-svg('images/cat-grey.svg', 'images/cat-grey.png'); + .background-image-svg( 'images/cat-grey.svg', 'images/cat-grey.png' ); background-repeat: no-repeat; background-position: center 15em; } @@ -48,7 +48,7 @@ position: fixed; z-index: 97; top: @fixed-header-height; - box-shadow: 0 3px 3px 2px rgba(0, 0, 0, 0.075), 0 0 2px rgba(0, 0, 0, 0.2); + box-shadow: 0 3px 3px 2px rgba( 0, 0, 0, 0.075 ), 0 0 2px rgba( 0, 0, 0, 0.2 ); } #mw-header-nav-hack { display: none; @@ -56,7 +56,7 @@ /* Add offset to make anchor links work with the fixed header */ :target:before { - content: ""; + content: ''; display: block; height: @fixed-header-height; margin: -@fixed-header-height 0 0; @@ -82,11 +82,11 @@ } h2 { margin: 0; - padding: .7em 0 0 25px; + padding: 0.7em 0 0 25px; font-family: @fonts-secondary; font-weight: normal; font-size: 1.1em; - .background-image-svg('images/user-grey.svg', 'images/user-grey.png'); + .background-image-svg( 'images/user-grey.svg', 'images/user-grey.png' ); background-position: 0 7px; background-repeat: no-repeat; diff --git a/resources/screen-misc.less b/resources/screen-misc.less index 3278328..a8df5be 100644 --- a/resources/screen-misc.less +++ b/resources/screen-misc.less @@ -1,9 +1,9 @@ -@import "variables.less"; +@import 'variables.less'; // Let's add some unnecessary white space. Or grey, as it were. In the dumbest possible way. // Top end of large screens -@media screen and (min-width: 1425px) { +@media screen and ( min-width: 1425px ) { .color-middle-container, .ts-inner { padding: 0 3em; @@ -15,7 +15,7 @@ } // Top half end of mid screens -@media screen and (min-width: (@desktop-small-width + @desktop-mid-width) / 2) and (max-width: @desktop-mid-width) { +@media screen and ( min-width: ( @desktop-small-width + @desktop-mid-width ) / 2 ) and ( max-width: @desktop-mid-width ) { .ts-inner { padding: 0 3em; } diff --git a/resources/screen-mobile.less b/resources/screen-mobile.less index de13219..35a1ee4 100644 --- a/resources/screen-mobile.less +++ b/resources/screen-mobile.less @@ -1,4 +1,4 @@ -@import "variables.less"; +@import 'variables.less'; /* Layout */ @@ -26,13 +26,13 @@ #mw-header-container { background: @background; - padding: 3.75em @content-padding .35em; + padding: 3.75em @content-padding 0.35em; } #mw-header-hack { position: relative; z-index: 1; - box-shadow: 0 3px 3px 2px rgba(0, 0, 0, 0.075), 0 0 2px rgba(0, 0, 0, 0.2); + box-shadow: 0 3px 3px 2px rgba( 0, 0, 0, 0.075 ), 0 0 2px rgba( 0, 0, 0, 0.2 ); } /* Dropdowns */ @@ -45,7 +45,7 @@ .dropdown { .nav-block(); background: @background; - box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.05); + box-shadow: 0 2px 3px 1px rgba( 0, 0, 0, 0.05 ); position: absolute; padding: 2em 2.5em 1em; margin: 0; @@ -57,13 +57,13 @@ z-index: 100; h3 { - margin: .5em 0 1.5em; + margin: 0.5em 0 1.5em; } ul { margin: 1em 0 2em; } li { - margin: 0 0 .75em; + margin: 0 0 0.75em; } } @@ -76,7 +76,7 @@ width: 100%; height: 100%; background: @background2; - opacity: .8; + opacity: 0.8; overflow: hidden; } @@ -101,18 +101,18 @@ } &:after { position: absolute; - top: .65em; + top: 0.65em; left: 23px; } } #user-tools h2 { - right: @content-padding + .5em; - .background-image-svg('images/user-large-grey.svg', 'images/user-large-grey.png'); + right: @content-padding + 0.5em; + .background-image-svg( 'images/user-large-grey.svg', 'images/user-large-grey.png' ); } #site-navigation { h2 { left: @content-padding; - .background-image-svg('images/menu-large-grey.svg', 'images/menu-large-grey.png'); + .background-image-svg( 'images/menu-large-grey.svg', 'images/menu-large-grey.png' ); } .sidebar-inner { left: 0; @@ -121,14 +121,14 @@ } #site-tools h2 { right: 7em; - .background-image-svg('images/gear-large-grey.svg', 'images/gear-large-grey.png'); + .background-image-svg( 'images/gear-large-grey.svg', 'images/gear-large-grey.png' ); } /* Logo */ #p-logo-text { position: absolute; - top: .75em; + top: 0.75em; left: 6em; text-align: left; @@ -154,28 +154,28 @@ .ca-icon(); } #ca-edit a { - .background-image-svg('images/pencil-grey.svg', 'images/pencil-grey.png'); + .background-image-svg( 'images/pencil-grey.svg', 'images/pencil-grey.png' ); } #ca-history a { - .background-image-svg('images/clock-grey.svg', 'images/clock-grey.png'); + .background-image-svg( 'images/clock-grey.svg', 'images/clock-grey.png' ); } #ca-talk a { - .background-image-svg('images/talk-grey.svg', 'images/talk-grey.png'); + .background-image-svg( 'images/talk-grey.svg', 'images/talk-grey.png' ); } #t-contributions a { - .background-image-svg('images/puzzle-grey.svg', 'images/puzzle-grey.png'); + .background-image-svg( 'images/puzzle-grey.svg', 'images/puzzle-grey.png' ); } #ca-addsection a { - .background-image-svg('images/plus-grey.svg', 'images/plus-grey.png'); + .background-image-svg( 'images/plus-grey.svg', 'images/plus-grey.png' ); } *[id^='ca-nstab-'] a { - .background-image-svg('images/page-grey.svg', 'images/page-grey.png'); + .background-image-svg( 'images/page-grey.svg', 'images/page-grey.png' ); } #ca-more, #ca-languages { &:after { - margin-left: -.35em; + margin-left: -0.35em; } span { @@ -183,10 +183,10 @@ } } #ca-more span { - .background-image-svg('images/gear-grey.svg', 'images/gear-grey.png'); + .background-image-svg( 'images/gear-grey.svg', 'images/gear-grey.png' ); } #ca-languages span { - .background-image-svg('images/languages-grey.svg', 'images/languages-grey.png'); + .background-image-svg( 'images/languages-grey.svg', 'images/languages-grey.png' ); } /* Full-width thumbnails */ @@ -212,12 +212,12 @@ div.thumb { } .thumbimage { display: block; - margin: 0 auto .5em; + margin: 0 auto 0.5em; } #mw-content { overflow: auto; - border: none; + border: 0; } #mw-content-block { background: @background; @@ -232,7 +232,9 @@ div.thumb { /* Table of contents */ -#toc, .toc, .mw-warning { +#toc, +.toc, +.mw-warning { width: 100%; box-sizing: border-box; } diff --git a/resources/variables.less b/resources/variables.less index 04a8471..86583cb 100644 --- a/resources/variables.less +++ b/resources/variables.less @@ -1,4 +1,4 @@ -@import "mediawiki.mixins"; +@import 'mediawiki.mixins'; // Colours @@ -33,7 +33,6 @@ @link: @blue; @link-red: @red; - // Flair // Fonts are chosen for consistent metrics, not necessarily overall prettiness. @@ -43,10 +42,10 @@ // Based on information on https://wiki.archlinux.org/index.php/Metric-compatible_fonts @fonts-monospace: 'Consolas', 'Courier', 'Nimbus Mono', 'Liberation Mono', 'Courier New', monospace; -@border: .2em; -@radius: .2em; +@border: 0.2em; +@radius: 0.2em; -@font-size: .95em; +@font-size: 0.95em; // Widths @@ -69,8 +68,7 @@ @column-right-size: 16em; @fixed-header-height: 3.125em; -@color-height: .35em; - +@color-height: 0.35em; // Miscellaneous functions @@ -78,13 +76,13 @@ .hidden() { position: absolute; top: -9999px; - left: 0px; + left: 0; } // Icons - hides labels, but keep them accessible for screen-readers .icon() { text-indent: -99999px; - border: none; + border: 0; background-color: transparent; background-repeat: no-repeat; } @@ -94,7 +92,7 @@ border: solid @grey-bright; border-width: 1px 1px @border; padding: 1.25em 1.75em; - box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.02); + box-shadow: 0 1px 2px 1px rgba( 0, 0, 0, 0.02 ); overflow: auto; } @@ -105,7 +103,7 @@ width: 20px; height: 20px; box-sizing: border-box; - margin-bottom: -.5em; + margin-bottom: -0.5em; } // Navigation column blocks @@ -125,15 +123,15 @@ h3 { font-weight: normal; font-size: 1em; - margin: .25em 0 .75em 0; - padding-bottom: .15em; + margin: 0.25em 0 0.75em 0; + padding-bottom: 0.15em; border-bottom: solid 2px @grey; } ul { margin-bottom: 2em; } li { - margin: 0 0 .35em; + margin: 0 0 0.35em; } } @@ -171,7 +169,7 @@ content: ''; width: 22px; height: 12px; - .background-image-svg('images/arrow-down-grey.svg', 'images/arrow-down-grey.png'); + .background-image-svg( 'images/arrow-down-grey.svg', 'images/arrow-down-grey.png' ); background-position: center center; background-repeat: no-repeat; } @@ -179,7 +177,7 @@ .dropdown-menu( @direction: right ) { .nav-block(); background: @background; - box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.05); + box-shadow: 0 2px 3px 1px rgba( 0, 0, 0, 0.05 ); position: absolute; padding: 20px 2em 0; margin: 0; @@ -199,13 +197,13 @@ #catlinks { margin: 0 @content-padding; - padding: 1.5em 0 .5em; + padding: 1.5em 0 0.5em; li { - border-left: none; + border-left: 0; } div { - margin: 0 0 .35em; + margin: 0 0 0.35em; } } }