m (against Wikia's TOU) |
No edit summary |
||
Line 126: | Line 126: | ||
@rl-url: '/load.php?debug=true&lang=en&mode=articles'; |
@rl-url: '/load.php?debug=true&lang=en&mode=articles'; |
||
+ | /* Portable elements */ |
||
+ | @import url("@{rl-url}&articles=MediaWiki:Themes.css&only=styles"); |
||
/* calculators (stewbasic), switchinfobox */ |
/* calculators (stewbasic), switchinfobox */ |
Latest revision as of 18:47, 9 January 2019
//
/* ------------------------------------------------------------------------------------------------------ * This is the root LESS file that is parsed to produce MediaWiki:Common.css * * Eventually, this will be completely converted to native LESS * and will be a series of imports of easy to navigate LESS files * * All CSS found/imported here should ideally be moved to a subpage of this page * unless it's a user subpage * Converted subpages can be found at Special:PrefixIndex/MediaWiki:Custom-Common.less/ * * To update MediaWiki:Common.css from here, Oasis users can click the "Update CSS" button * found below the edit button. For monobook users, the link is in the toolbox in the sidebar. * * For more information, see <http://dev.wikia.com/wiki/Less> * ------------------------------------------------------------------------------------------------------ * LESS standard library: <http://lesscss.org/functions/> * Non-standard mixins: <http://dev.wikia.com/wiki/Less/mixins> * Online LESS tester: <http://lesstester.com/> * * Available themedesigner values: * - @theme-body -> body background colour (#90c2dd) * - @theme-buttons -> button colour (#438ab5) * - @theme-header -> collapsible footer bar colour (#90c2dd) * - @theme-links -> link colour (#438ab5) * - @theme-page -> article content background (#ffffff) * ------------------------------------------------------------------------------------------------------ */ /** * Set default colour palette, mainly for monobook usage * * @todo Remove all colour from this file and apply in monobook and oasis separately */ @default-page: #fff; /* ------------ LESS ------------ */ @dir: 'MediaWiki:Custom-Common.less'; // include fonts first @import '@{dir}/fonts.less'; // page specific styling @import '@{dir}/activediscussions.less'; // ... @import '@{dir}/mainpage.less'; // ... @import '@{dir}/specials.less'; // ... @import '@{dir}/yewgrove.less'; // ... // templates @import '@{dir}/actionbar.less'; // ... @import '@{dir}/attackspeedbar.less'; // ... @import '@{dir}/chatoptions.less'; // ... @import '@{dir}/clear.less'; // ... @import '@{dir}/coins.less'; // ... @import '@{dir}/disassembly.less'; // ... @import '@{dir}/documentation.less'; // ... @import '@{dir}/equipment.less'; // ... @import '@{dir}/external.less'; // ... @import '@{dir}/extimage.less'; // ... @import '@{dir}/fact.less'; // ... @import '@{dir}/fairycode.less'; // ... @import '@{dir}/infobox.less'; // ... @import '@{dir}/infoboxbonuses.less'; // ... @import '@{dir}/infotablebonuses.less'; // ... @import '@{dir}/inventory.less'; // ... @import '@{dir}/keypress.less'; // ... @import '@{dir}/listen.less'; // ... @import '@{dir}/messagebox.less'; // ... @import '@{dir}/menaphite.less'; // ... @import '@{dir}/navbox.less'; // ... @import '@{dir}/perk-link.less'; // ... @import '@{dir}/perk-suggestions.less'; // ... @import '@{dir}/pohroom.less'; // ... @import '@{dir}/portals.less'; // ... @import '@{dir}/questdetails.less'; // ... @import '@{dir}/questreq.less'; // implement thing we talked about in a forum a while back (requires js) @import '@{dir}/quotes.less'; @import '@{dir}/recolours.less'; @import '@{dir}/shortcut.less'; @import '@{dir}/tabber.less'; @import '@{dir}/toc.less'; @import '@{dir}/updatelist.less'; @import '@{dir}/updates.less'; @import '@{dir}/usesmateriallist.less'; // custom classes @import '@{dir}/censored.less'; @import '@{dir}/hovereffects.less'; // document usage better @import '@{dir}/tooltips.less'; @import '@{dir}/transcripts.less'; // script styles @import '@{dir}/gecharts.less'; // review after js is tidied @import '@{dir}/issues.less'; // MediaWiki:Common.js/issues.js // modifications @import '@{dir}/hilite.less'; // ... @import '@{dir}/WikiaRail.less'; // idk what to put this under /* ---------------------- CSS to convert ---------------------- */ /** * When adding CSS here, try to add it under the relevant 'section' * If it doesn't seem to fit anywhere, just stick at the bottom * * At some point this will be converted to LESS and * all these sections will becomes separate pages which will be much nicer to navigate :) * * Contents: * - Imports * - Page specific styling * - Templates * - Custom classes * - Script CSS * - Local modifications */ /* =============== IMPORTS =============== */ // Note: These show up as load.php during updating instead of the page title @rl-url: '/load.php?debug=true&lang=en&mode=articles'; /* Portable elements */ @import url("@{rl-url}&articles=MediaWiki:Themes.css&only=styles"); /* calculators (stewbasic), switchinfobox */ @import url( '@{rl-url}&articles=User:Stewbasic/calc.css&only=styles' ); @import url( '@{rl-url}&articles=User:-Matt/SwitchInfobox.css&only=styles' ); /* ================= TEMPLATES ================= */ table.underpasstable { margin-left: 3em; } table.underpasstable, table.underpasstable table.lighttable { border-collapse: collapse; } table.underpasstable td { padding: 0; margin: 0; width: 50px; height: 50px; border-spacing: 0; border-left: 1px solid black; border-right: 1px solid black; } table.underpasstable td td { border: none; border-top: 1px solid black; border-bottom: 1px solid black; } table.underpasstable tfoot { display: none; } /* ---------------------------- Template:Statbox ---------------------------- */ .statbox { width: 197px; height: 280px; cursor: default; font-family: runescape; font-size: 16px; color: #ff8c00; text-shadow: #000 1px 1px 0; background-color: #000; background-image: url('@{filepath}/Statstable_bg.png'); background-repeat: no-repeat; border-spacing: 0; padding: 7px; td { position: relative; background-image: url('@{filepath}/Statstable_background.png'); background-repeat: no-repeat; vertical-align: middle; text-align: right; width: 62px; height: 25px; padding: 0 10px 0 4px; border-spacing: 0; img { float: left; margin-bottom: -3px; margin-top: -1px; // fix for thieving and smithing icons &[height^="1"] { margin-top: 4px; } } .xpbox { display: none; z-index: 3; position: absolute; text-align: left; background-color: #0d0d0d; border: 1px solid #ebece6; color: #f5b241; text-shadow: none; padding: 2px 1px 0 1px; font-family: runescape; min-width: 119px; line-height: 15px; margin-left: 7px; span { float: right; } } &:hover .xpbox { display: inline-block; } &[colspan="3"] { background: none; text-align: left; padding: 20px 0 0 90px; color: #fff; } } } /* ------------------------------- Template:Redirect Template:Other uses ------------------------------- */ .seealso { margin: 0.5em 2em 1em 2em; font-style: italic; & + & { margin-top: -1em; } } /* ---------------------------- Template:License ---------------------------- */ .license { background: #cfd8eb; border: none; th { padding-right: 0.4em; background-color: #617ebc; color: #fff; width: 25%; &[colspan="2"] { font-size: 16px; } } a { color: #556d97; } } /* ---------------------------------- Template:Level up table ---------------------------------- */ .level-up-table { td li { padding: 0 10px 0 10px; } ul { list-style-type: disc; } .lvlupmem { background: #f6ab58; color: #582e00; } .lvlupfree { background: #98e553; color: #245200; } } /* ---------------------- Infobox monster ---------------------- */ .infobox-monster { text-align:center; } .infobox-monster th, .infobox-monster td { vertical-align:middle !important; } .infobox-monster .offensive-header { background-color: #861c10; color: #fff; font-variant: small-caps; } .infobox-monster .offensive-subheader { background-color: #ecccc6; font-variant: small-caps; } .infobox-monster .offensive-subheader a { color: #861c10 !important; } .infobox-monster .defensive-header { background-color: #438ab5; color: #fff; font-variant: small-caps; } .infobox-monster .defensive-subheader { background-color: #c1deed; font-variant: small-caps; } .infobox-monster .defensive-subheader a { color: #32637c !important; } .infobox-monster .slayer-header { background: #464646; color: #fff; font-variant: small-caps; } .infobox .nestedinfo td table { min-width: 263px; margin: -1px; width: ~"calc(100% + 2px)" !important; } .infobox .nestedinfo td { width:100%; padding:0; } /* ---------------------- Template:Perk link possibly move in-line styles here ---------------------- */ .navbox .perk-link img { padding: 2.5px 0 0 0 !important; border-spacing: 2px !important; } /* ====================== CUSTOM CLASSES ====================== */ /* ---------------- tooltips ---------------- */ .sic { color:#15F; font-style:italic; cursor:help; border-bottom:dotted 1px black; } /* ------------------- nowraplinks ------------------- */ .nowraplinks a { white-space: nowrap; } /* ----------------- boldlinks ----------------- */ .boldlinks a { font-weight: bold; } /* ----------------- alignment ----------------- */ .center, .centre { display: block; text-align: center; } .center table, table.center, .centre table, table.centre { margin: 0 auto; } .right table, span.right { float: right; } .left table, span.left { float: left; } /* -------------------- targethilite -------------------- */ /** * @example example * highlights when the url contains #caek. */ .targethilite:target { background-color: #def; } // @todo move to Wikia.css .skin-oasis .targethilite:target { background-color: #cda172; } /* ------------- small ------------- */ // class alternative to deprecated small tag .small { font-size: smaller; } /* ------------------------ hideRefBacklinks ------------------------ */ /* hiding backlinks for reflists, when there's loads of references to it. Mainly intended for Diango/Reclaimables. */ .hideRefBacklinks .references a { display: none; } /* ----------------------- non-mobile-hide ----------------------- */ /* hides stuff for non-mobile viewers, not to be confused with mobile-hide found in MediaWiki:Handheld.css */ .non-mobile-hide { display: none; } /* ------------------- sg-red sg-yellow sg-green
*/ // for skill calculators and interactive skill guides // includes modified link colour for accessibility // applies to a variety of templates used by a variety of scripts */ .sg-red, .nocell { background: #ecccc6; color: #861c10; } .sg-yellow, .maybecell { background: #f3f0b0; color: #6e5d45; } .sg-green, .yescell { background: #c3ebc5; color: #506553; } .sg-red, .sg-yellow, .sg-green, .nocell, .maybecell, .yescell { a { color: #04f; } } /* ----------------------- smalllistmargin ----------------------- */ ul.smalllistmargin, .smalllistmargin ul, ol.smalllistmargin, .smalllistmargin ol { margin-left: 1.5em; } /* ================== SCRIPT CSS ================== */ /* ------------------------------------------- MediaWiki:Common.js/spreport.js ------------------------------------------- */ #spreport { border: 1px solid #808080; padding: 10px; text-align: center; } /* dismiss link on sitenotice */ .rcsitenotice-dismiss { float: right; font-weight: normal; } /* --------------------------------------------------------- lighttable (MediaWiki:Common.js/highlightTable.js) --------------------------------------------------------- */ /* mouse over */ .lighttable .highlight-over, #pengLocations .highlight-over { background-color: #bce3a8; a { color: #4c7839; } } /* light on (light off = no class) */ .lighttable .highlight-on, #pengLocations .highlight-on { background-color: #c8f0b3; a { color: #4c7839; } } /* --------------------------------------- MediaWiki:Common.js/calc.js --------------------------------------- */ /* Hides configuration sections for dynamic templates (e.g. calculators). */ .jcConfig { display: none; } /* =========================== LOCAL MODIFICATIONS =========================== */ /* ------------------------------ Standard table styling ------------------------------ */ // .wikitable is defined in core scss as table.wikitable // Which forces us to use table.class in pretty much every table that uses .wikitable // yay.... // single pixel border between adjacent wikitables table.wikitable + table.wikitable { margin-top: -1px; } /* ------------------------------------ File background transparency ------------------------------------ */ #file img, table.filehistory img { background: url(/skins/common/images/Checker-16x16.png) repeat; } table.filehistory button img, #file button img { background: none; } /* -------------------- Category bar -------------------- */ #catlinks { background: url('@{filepath}/Category_sword.png') transparent no-repeat 99.7% 65% !important; } /* ---------------------------- Default link colours ---------------------------- */ table.wikitable a, table.messagebox a, table.navbox a, div.forumheader a, image a { color: #002bb8; } table.wikitable a:visited, table.messagebox a:visited, table.navbox a:visited, div.forumheader a:visited, image a:visited { color: #5a3696; } table.wikitable a:active, table.messagebox a:active, table.navbox a:active, div.forumheader a:active, image a:active { color: #faa700; } table.wikitable a.new, table.messagebox a.new, table.navbox a.new, div.forumheader a.new, image a.new { color: #ba0000; } table.wikitable a.new:visited, table.messagebox a.new:visited, table.navbox a.new:visited, div.forumheader a.new:visited, image a.new:visited { color: #a55858; } /* -------------------- pre and code -------------------- */ .WikiaArticle { pre { background-color: #f7f7f7; border: 1px solid #ddd; border-radius: 2px; white-space: pre-wrap; } code { background-color: #f7f7f7; border: 1px solid #ddd; border-radius: 2px; padding: 1px 4px; } } /* ------------------------- bold line margins ------------------------- */ /* @example ;foo */ /* @todo move to MediaWiki:Wikia.css */ .WikiaArticle dl { margin: 0; } /* ---------------------------------- Remove buttons from editor ---------------------------------- */ /* Main */ .ns-0 .cke_button_signature, .ns-0 #edittools_name, .ns-0 #mw-editbutton-signature, /* User */ .ns-2 #ImageUploadUpload, /* User talk */ .ns-3 #ImageUploadUpload, /* MediaWiki */ .ns-8 #edittools_name, .ns-8 #mw-editbutton-signature, /* Category */ .ns-14 .cke_button_signature, .ns-14 #edittools_name, .ns-14 #mw-editbutton-signature, /* Update */ .ns-100 .cke_button_signature, .ns-100 #edittools_name, .ns-100 #mw-editbutton-signature, /* Forum */ .ns-110 #ImageUploadUpload, /* Exchange */ .ns-112 .cke_button_signature, .ns-112 #edittools_name, .ns-112 #mw-editbutton-signature, /* Charm */ .ns-114 .cke_button_signature, .ns-114 #edittools_name, .ns-114 #mw-editbutton-signature, /* Beta */ .ns-120 .cke_button_signature, .ns-120 #edittools_name, .ns-120 #mw-editbutton-signature { display: none !important; } /* ------------------------- page title parenthesis styling override using 'no-parenthesis-styling' class somewhere on the page ------------------------- */ .title-parenthesis { color:#898989; font-size:80% } /* ------------------------- stuff to document ------------------------- */ /* Remove section title bar when editing charm logs */ .ns-0 #charmguide + div + form .mw-summary, .ns-0 #charmguide + div + form .module_content { display: none; } /* Letting headers inherit colors */ h2 { color: inherit; } /* @todo check if these still apply following thumbnail updates */ /* reapply/remove if so? */ .thumbcaption { word-wrap: break-word; padding: 0; } .article-thumb { padding: 2px; } /* Fix bullet points on Recommended Pages */ table.recommendedtasks { ul { margin: 0; padding: 0; } li { list-style-type: none; margin: 0; } } /* something for indents used in discussions to mimic threaded replies */ dd { min-width: 250px; } /* Small reference list */ ol.references { font-size: 100%; } .references-small { font-size: 90%; } /* Hide certain text (namely quote parameters) from the references section to shorten it and make it readable */ .WikiaArticle .hideQuotes .refhide { display:none; } /* fix q tags in content area */ #mw-content-text q:before { content: open-quote; } #mw-content-text q:after { content: close-quote; } /* global notifications */ #WikiaNotifications li div[data-type="5"] { display: none !important; } /* Overrides default colour for image borders * "File:Example.png|border" */ img.thumbborder { border: 1px solid #000 !important; } /* Lightbox changes */ .LightboxHeader .avatar { display: none !important; } .image-no-lightbox { line-height: initial !important; } /* Proper styling for block cells in family trees */ td { &.famtreesub { margin: 0; padding: 0; table { border-spacing: 0; margin: 0; padding: 0; td { height: 1em; width: 1em; } } } &.famtreeleaf { background: #dfdfdf; padding: .2em; } } /* Reduce font size for "Redirected from ..." */ .WikiaPageHeader h2 { color: #898989; font-size: 15px !important; } /* active/inactive colors for Module:Rotations */ .status-active { background-color: #98e553; color: #245200; a { color: inherit !important; } } .status-inactive { background-color: #ececec; color: #777777; a { color: inherit !important; } } /* Provide instructions on how to purge if a page is loaded blank (a failed build by the server) will only show when javascript is disabled; if javascript is enabled, the Common.js script provides a link instead mainspace only; if the first child of #mw-content-text is a <noscript> tag, the page is blank no way to test if a page is legitimately blank, but we shouldn't have those in mainspace anyway */ .ns-0 #mw-content-text > noscript:first-child::before { font-size: 120%; color: darkred; font-weight: bold; white-space: pre-wrap; content: "Oops! It looks like this page failed to build. Since you have javascript disabled, you'll need to purge by adding \"?action=purge\" to the URL:\A\A" url(https://dl.dropboxusercontent.com/u/45182859/purging.png); } /* adjacent clickpics */ .clickpic a.image { margin-left: 2px !important; margin-right: 2px !important; line-height: 34px; vertical-align: middle; } /* Lua error in Module:THGem at line 48: attempt to index local 'item' (a nil value). */ .TH_Gem-common img, .TH_Gem-fairly-common img, .TH_Gem-rare img, .TH_Gem-uncommon img, .TH_Gem-very-rare img, .TH_Gem-ultra-rare img, .TH_Gem-none img { image-rendering: pixelated; } /* */ .gifgallery img { background: #d9e7f0; border: 1px solid #438ab5; } /* give red links cute little box */ .gifgallery a[rel='nofollow'] { display: block; max-height: 187px; padding: 25px; background: #d9e7f0; border: 1px solid #438ab5; } .gifgallery a[rel='nofollow']:after { display: block; color: #999; content: '(File does not exist)'; } /* margins for captions */ .gifgallery div { margin: 10px auto 30px; } .gifgallery .lightbox-caption { display: block; margin: 8px 0 5px; } /* dropsline rarity */ .rarity-always { background: #8fd7fa; color: #083f66; a { color: #0b588f !important; } } .rarity-common { background: #98e553; color: #245200; a { color: #286801 !important; } } .rarity-uncommon { background: #f5eb4e; color: #524e00; a { color: #706b0d !important; } } .rarity-rare { background:#f6ab58; color:#582e00; a { color: #804200 !important; } } .rarity-very-rare { background: #f86c67; color: #520800; a { color: #7f0d03 !important; } } .rarity-random { background: #f3bff3; color: #651565; a { color: #882988 !important; } } .rarity-varies { background: #f3bff3; color: #651565; a { color: #882988 !important; } } .rarity-unknown { background: #fff; color: #000; } /* Module:Infobox css */ .infobox-wrapper { float: right; display: table; } .infobox-buttons { text-align: center; max-width: 250px; display: none; margin: 0 auto; padding: 0 0 0.5em 2em; .button { margin:0 3px; } } .infobox-switch-resources { display:none; } .infobox-bottom-links { float: right; font-size: xx-small; margin-top: -10px; clear: right; } /* template:na and similar */ .table-na { background: #ececec; color: gray; vertical-align: middle; text-align: center; cursor: default; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* per Forum:Portable infoboxes -- and you */ .ebs-container { display: none !important; } /* since we won't be using portable boxes, most of this is also just invalid */ .insights-module { display: none !important; } /* ponie request */ .infobox-item { max-width:300px; } .infobox-item th { white-space:nowrap; } .infobox-item th, .infobox-item td { vertical-align: middle !important; } .infobox .infobox-cell-hidden { display: none; } /* older switch infoboxes in preview mode #EditPageDialog .loading is specified in wikia core css with relative position */ #EditPageDialog .switch-infobox.loading { position: static; } /* infobox bonuses switch buttons */ .switch-infobox .switch-infobox-triggers, .switch-infobox .loading-button { clear: left; } /* hide border from image galleries */ .gallery-image-wrapper { border: none !important; } .accent { background-color: transparent !important; } /* table alignment help */ /* nth td from the left is right-aligned - ths are ignored */ table.align-right-1 td:nth-of-type(1), table.align-right-2 td:nth-of-type(2), table.align-right-3 td:nth-of-type(3), table.align-right-4 td:nth-of-type(4), table.align-right-5 td:nth-of-type(5), table.align-right-6 td:nth-of-type(6), table.align-right-7 td:nth-of-type(7), table.align-right-8 td:nth-of-type(8), table.align-right-9 td:nth-of-type(9), table.align-right-10 td:nth-of-type(10) { text-align: right; } /* center */ table.align-center-1 td:nth-of-type(1), table.align-center-2 td:nth-of-type(2), table.align-center-3 td:nth-of-type(3), table.align-center-4 td:nth-of-type(4), table.align-center-5 td:nth-of-type(5), table.align-center-6 td:nth-of-type(6), table.align-center-7 td:nth-of-type(7), table.align-center-8 td:nth-of-type(8), table.align-center-9 td:nth-of-type(9), table.align-center-10 td:nth-of-type(10) { text-align: center; } /* left */ table.align-left-1 td:nth-of-type(1), table.align-left-2 td:nth-of-type(2), table.align-left-3 td:nth-of-type(3), table.align-left-4 td:nth-of-type(4), table.align-left-5 td:nth-of-type(5), table.align-left-6 td:nth-of-type(6), table.align-left-7 td:nth-of-type(7), table.align-left-8 td:nth-of-type(8), table.align-left-9 td:nth-of-type(9), table.align-left-10 td:nth-of-type(10) { text-align: left; } /* alternating colours (similar to spreadsheets) */ /* rows */ table.alternating-rows tr:nth-child(even) { background: #f2f2f2; } /* columns*/ table.alternating-cols td:nth-child(even) { background: #f2f2f2; } /* smw display of large things */ .smwprops { width: 80% !important; max-width: 500px; white-space: nowrap; overflow: auto; display: inline-block; } /* poll changes */ .ajax-poll { border: none !important; margin-top: 0 !important; padding-right: 2em !important; } .pollAnswerVotes, .pollAnswerVotes div { margin-left: none !important; height: 14px !important; } .pollAnswerName input[type=radio] { margin-right: 5px !important; } /* ------------------------- System messages ------------------------- */ // MediaWiki:Revision-info // MediaWiki:Revision-info-current div#viewingold-warning, div#viewingnew-warning { background: #f9f9f9; border: 1px solid #eee; font-weight: bold; margin: 2em 0 .5em; padding: .5em 1em; vertical-align: middle; clear: both; } div#viewingold-plain { display: none; } div.mw-warning-with-logexcerpt, .WikiaArticle .noarticletext, .WikiaArticle fieldset, #sp-contributions-footer { .border-radius( 5px ); background-color: #f9f9f9; border: 1px solid #eee; margin-bottom: 0.5em; } .WikiaArticle .noarticletext { padding: 10px 20px; } #sp-contributions-footer { padding: 10px 20px; text-align: center; margin-top: 1.5em; } /* page history */ .WikiaArticle #pagehistory { margin-left: 0; li { list-style: none; padding: 0 10px; &.selected { background-color: #f9f9f9; border: none; } } } /* For showing double spaces in usernames (RS:WIKIAN, etc.) */ .prewrap p { white-space: pre-wrap; } /* make watchlist alert in page history stand out */ .updatedmarker { color: #1b8408; &:before { content: '('; } &:after { content: ')'; } } /* Table sorting, duplicated from https://github.com/Wikia/app/blob/dev/resources/jquery/jquery.tablesorter.css but for tablesorter2 */ table.jquery-tablesorter2 th.headerSort { cursor: pointer; text-align: center; } table.jquery-tablesorter2 th.headerSort div { display: inline-block; height: 14px; } table.jquery-tablesorter2 th.headerSort .chevron { border-top-color: #000; display: block; margin: 1px auto; } table.jquery-tablesorter2 th.headerSort .chevron:first-child { border-color: transparent transparent #000; } table.jquery-tablesorter2 th.headerSortUp .chevron { visibility: hidden; } table.jquery-tablesorter2 th.headerSortUp .chevron:first-child { visibility: visible; } table.jquery-tablesorter2 th.headerSortDown .chevron:first-child { visibility: hidden; } /* why is the
tag inset */ hr { border-color: #ccc; border-style: solid; border-width: 1px 0 0 0; } /* fix LESS button */ #less-update-button { background-color: @theme-buttons; border-color: @theme-buttons; &:hover { background-color: lighten( @theme-buttons, 20% ); border-color: lighten( @theme-buttons, 20% ); } } .wds-global-navigation { will-change: transform; transition: transform 200ms linear; &.showNav { transform: translateY(0%); } &.hideNav { transform: translateY(-100%); } }