css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <section id="main-color" class="colors">
	<div id="primary" class="swatch">
		<ul class="swatch-body">
			<li class="swatch-strip color-primary-dark"></li>
			<li class="swatch-strip color-primary"></li>
			<li class="swatch-strip color-primary-light"></li>
		</ul>
		<h4 class="swatch-title">
			Primary Colors
		</h4>
	</div>
	<div id="secondary" class="swatch">
		<ul class="swatch-body">
			<li class="swatch-strip color-secondary-dark"></li>
			<li class="swatch-strip color-secondary"></li>
			<li class="swatch-strip color-secondary-light"></li>
		</ul>
		<h4 class="swatch-title">
			Secondary Colors
		</h4>
	</div>
	<div id="accent" class="swatch">
		<ul class="swatch-body">
			<li class="swatch-strip color-accent-dark"></li>
			<li class="swatch-strip color-accent"></li>
			<li class="swatch-strip color-accent-light"></li>
		</ul>
		<h4 class="swatch-title">
			Accent Colors
		</h4>
	</div>
	<div id="ui" class="swatch">
		<ul class="swatch-body">
			<li class="swatch-strip color-ui-super-dark"></li>
			<li class="swatch-strip color-ui-dark"></li>
			<li class="swatch-strip color-ui"></li>
			<li class="swatch-strip color-ui-light"></li>
		</ul>
		<h4 class="swatch-title">
			Ui Colors
		</h4>
	</div>
</section>
<section class="colors">
	<div id="grayscale" class="swatch">
		<ul class="swatch-body">
			<li class="swatch-strip black"></li>
			<li class="swatch-strip gray-900"></li>
			<li class="swatch-strip gray-800"></li>
			<li class="swatch-strip gray-700"></li>
			<li class="swatch-strip gray-600"></li>
			<li class="swatch-strip gray-500"></li>
			<li class="swatch-strip gray-400"></li>
			<li class="swatch-strip gray-300"></li>
			<li class="swatch-strip gray-200"></li>
			<li class="swatch-strip gray-100"></li>
			<li class="swatch-strip gray-50"></li>
			<li class="swatch-strip white"></li>
		</ul>
		<h4 class="swatch-title">
			Grayscale Colors
		</h4>
	</div>
	<div id="highlight" class="swatch">
		<ul class="swatch-body">
			<li class="swatch-strip color-highlight"></li>
			<li class="swatch-strip color-blockquote"></li>
			<li class="swatch-strip color-blockquote-inner"></li>
		</ul>
		<h4 class="swatch-title">
			Highlight Color
		</h4>
	</div>
</section>
<section class="colors">
	<div id="bg" class="swatch">
		<ul class="swatch-body">
			<li class="swatch-strip color-bg-dark"></li>
			<li class="swatch-strip color-bg-3"></li>
			<li class="swatch-strip color-bg-dark-hover"></li>
			<li class="swatch-strip color-bg-2"></li>
			<li class="swatch-strip color-bg-1"></li>
			<li class="swatch-strip color-bg-4"></li>
			<li class="swatch-strip color-bg-light"></li>
		</ul>
		<h4 class="swatch-title">
			BG Colors
		</h4>
	</div>	
	<div id="link" class="swatch">
		<ul class="swatch-body">
			<li class="swatch-strip color-link-secondary-hover"></li>
			<li class="swatch-strip color-link"></li>
			<li class="swatch-strip color-link-accent"></li>
			<li class="swatch-strip color-link-secondary"></li>
			<li class="swatch-strip color-link-secondary-accent"></li>
			<li class="swatch-strip color-link-secondary-hover-highlight"></li>
			<li class="swatch-strip color-link-hover"></li>
			<li class="swatch-strip color-link-hover-highlight"></li>
		</ul>
		<h4 class="swatch-title">
			Link Colors
		</h4>
	</div>
	<div id="code" class="swatch">
		<ul class="swatch-body">
			<li class="swatch-strip color-code"></li>
		</ul>
		<h4 class="swatch-title">
			Code Color
		</h4>
	</div>
</section>
<section class="colors">
	<div id="pm" class="swatch">
		<ul class="swatch-body">
			<li class="swatch-strip color-pm-foe"></li>
			<li class="swatch-strip color-pm-reported"></li>
			<li class="swatch-strip color-pm-friend"></li>
			<li class="swatch-strip color-pm-marked"></li>
			<li class="swatch-strip color-pm-reply"></li>
		</ul>
		<h4 class="swatch-title">
			PM Colors
		</h4>
	</div>
	<div id="button" class="swatch">
		<ul class="swatch-body">
			<li class="swatch-strip color-button-text"></li>
			<li class="swatch-strip color-button-icon-hover"></li>
			<li class="swatch-strip color-button-icon"></li>
			<li class="swatch-strip color-button-border"></li>
			<li class="swatch-strip color-button-background"></li>
			<li class="swatch-strip color-button-background-light"></li>
		</ul>
		<h4 class="swatch-title">
			Button Colors
		</h4>
	</div>
	<div id="form-button" class="swatch">
		<ul class="swatch-body">
			<li class="swatch-strip color-button-form-text"></li>
			<li class="swatch-strip color-button-form-text-hover"></li>
			<li class="swatch-strip color-button-form-border"></li>
			<li class="swatch-strip color-button-form-input-text-focus"></li>
		</ul>
		<h4 class="swatch-title">
			Button Form Colors
		</h4>
	</div>
</section>
<section class="colors">
	<div id="tab" class="swatch">
		<ul class="swatch-body">
			<li class="swatch-strip color-tab-text-active"></li>
			<li class="swatch-strip color-tab-text-hover"></li>
			<li class="swatch-strip color-tab-text"></li>
			<li class="swatch-strip color-tab-bg"></li>
			<li class="swatch-strip color-tab-bg-active"></li>
			<li class="swatch-strip color-tab-bg-hover"></li>
			<li class="swatch-strip color-tab-bg-mini-active"></li>
		</ul>
		<h4 class="swatch-title">
			Tab Colors
		</h4>
	</div>
	<div id="poll" class="swatch">
		<ul class="swatch-body">
			<li class="swatch-strip color-poll-border1"></li>
			<li class="swatch-strip color-poll-border2"></li>
			<li class="swatch-strip color-poll-bg1"></li>
			<li class="swatch-strip color-poll-bg2"></li>
			<li class="swatch-strip color-poll-bg3"></li>
			<li class="swatch-strip color-poll-bg4"></li>
			<li class="swatch-strip color-poll-bg5"></li>
		</ul>
		<h4 class="swatch-title">
			Poll Colors
		</h4>
	</div>
</section>
<section class="colors">
	<div id="JS" class="swatch">
		<ul class="swatch-body">
			<li class="swatch-strip color-loader-blue"></li>
			<li class="swatch-strip color-loader-red"></li>
			<li class="swatch-strip color-loader-yellow"></li>
			<li class="swatch-strip color-loader-green"></li>
			<li class="swatch-strip color-online"></li>
		</ul>
		<h4 class="swatch-title">
			Misc Colors
		</h4>
	</div>
</section>
            
          
!
            
              // ProSilver 3.2 color.css Generator

	// EDIT THESE COLORS (Main Color Scheme) 
	$color-primary: hsl(200, 85%, 50%) !default;
	$color-accent: adjust-hue($color-primary, 145%) !default;
	$color-secondary: adjust-hue($color-primary, 10%) !default;
	$color-ui: desaturate(adjust-hue($color-primary, 20%), 65%) !default;


	// Additioanl UI Vars
	$color-links: desaturate(darken($color-secondary, 20%), 5%) !default;
	$color-highlight: hsl(55, 100%, 90%) !default;
	$color-code: hsl(125, 40%, 50%) !default;
	$color-bg: $color-primary !default;
	$color-polls: $color-accent !default;

	//============ ALL VARS BEYOND HERE ARE BASED ON THE VARS ABOVE ======================

	// Primary Colors
	$color-primary-light:					saturate(lighten($color-primary, 25%), 15%);
	$color-primary-dark:					saturate(darken($color-primary, 15%), 15%);

	// Secondary Colors
	$color-secondary-light:					saturate(lighten($color-secondary, 25%), 15%);
	$color-secondary-dark:					saturate(darken($color-secondary, 15%), 15%);

	// UI Colors
	$color-ui-light:						lighten($color-ui, 25%);
	$color-ui-dark:							darken($color-ui, 15%);
	$color-ui-super-dark:					darken($color-ui, 30%);

	// Accent Colors
	$color-accent-light:					saturate(lighten($color-accent, 25%), 15%);
	$color-accent-dark:						saturate(darken($color-accent, 15%), 15%);
	$color-accent-hover:					desaturate(lighten($color-accent, 40%), 45%);
	$color-accent-highlight:				lighten($color-accent-hover, 5%);

	// Grayscale Colors (Based on Material Design)
	$gray-50:								#fafafa !default; // hsl(0, 0%, 98%)
	$gray-100:								#f5f5f5 !default; // hsl(0, 0%, 96%)
	$gray-200:								#ededed !default; // hsl(0, 0%, 93%)
	$gray-300:								#dedede !default; // 12% hsl(0, 0%, 87%)
	$gray-400:								#bdbdbd !default; // hsl(0, 0%, 74%)
	$gray-500:								#9e9e9e !default; // 38% hsl(0, 0%, 62%)
	$gray-600:								#757575 !default; // 54% hsl(0, 0%, 46%)
	$gray-700:								#616161 !default; // hsl(0, 0%, 38%)
	$gray-800:								#424242 !default; // hsl(0, 0%, 26%)
	$gray-900:								#212121 !default; // 87% hsl(0, 0%, 13%)

	$black:									#000000 !default;
	$black-87:								$gray-900 !default;
	$black-54:								$gray-600 !default;
	$black-38:								$gray-500 !default;
	$black-12:								$gray-300 !default;
	$white:									#ffffff !default;

	// Background Colors
	$color-bg-1:							desaturate(lighten($color-primary, 45%), 45%);
	$color-bg-2:							darken($color-bg-1, 5%);
	$color-bg-3:							darken($color-bg-1, 10%);
	$color-bg-4:							desaturate($color-bg-1, 20%);
	$color-bg-light:						saturate($color-bg-1, 60%);
	$color-bg-dark:							desaturate(darken($color-bg-1, 14%), 10%);
	$color-bg-dark-hover:					lighten($color-bg-dark, 5%);

	// Link Colors
	$color-link:							$color-links;
	$color-link-accent:						saturate(lighten($color-links, 10%), 15%);
	$color-link-hover:						darken($color-accent, 5%);
	$color-link-hover-highlight:			desaturate(lighten($color-link-hover, 40%), 15%);

	$color-link-secondary:					desaturate(lighten($color-links, 20%), 15%);
	$color-link-secondary-accent:			desaturate($color-link-secondary, 30%);
	$color-link-secondary-hover:			darken($color-link-secondary, 25%);
	$color-link-secondary-hover-highlight:	saturate(lighten($color-link-secondary-hover, 65%), 5%);

	// Button Colors
	$color-button-border:					$gray-400;
	$color-button-box-shadow:				$white;
	$color-button-text-shadow:				$white;
	$color-button-text:						$color-link-hover;
	$color-button-background:				$gray-300;
	$color-button-background-light:			$white;
	$color-button-icon:						$gray-500;

	$color-button-icon-hover:				$color-primary-dark;
	$color-button-border-hover:				$color-primary-dark;
	$color-button-text-shadow-hover:		rgba(desaturate($color-button-text, 20%), 0.2);

	$color-button-form-text:				$gray-900;
	$color-button-form-border:				$gray-700;
	$color-button-form-text-hover:			$color-link-hover;
	$color-button-form-border-hover:		$color-link-hover;
	$color-button-form-input-border-focus:	$color-primary-dark;
	$color-button-form-input-text-focus:	$color-primary-dark;

	// Tab Colors
	$color-tab-text:						$color-ui-dark;
	$color-tab-background:					$color-bg-dark;

	$color-tab-text-hover:					$color-link-hover;
	$color-tab-background-hover:			$color-bg-light;

	$color-tab-text-active:					$gray-900;
	$color-tab-background-active:			$color-bg-3;
	$color-tab-border-active:				$color-tab-background-active;
	$color-tab-background-active-light:		$color-tab-background-hover;

	$color-tab-background-mini:				$color-bg-2;
	$color-tab-text-mini-active:			$gray-900;
	$color-tab-background-mini-active:		$gray-50;

	// Poll Colors
	$color-poll-bg1: 						desaturate(darken($color-polls, 10%), 10%);
	$color-poll-bg2: 						desaturate(darken($color-polls, 5%), 5%);
	$color-poll-bg3: 						$color-polls;
	$color-poll-bg4: 						saturate(lighten($color-polls, 5%), 5%);
	$color-poll-bg5: 						saturate(lighten($color-polls, 10%), 10%);

	$color-poll-border1:					desaturate(darken($color-poll-bg1, 10%), 5%);
	$color-poll-border2:					desaturate(darken($color-poll-bg2, 10%), 5%);
	$color-poll-border3:					desaturate(darken($color-poll-bg3, 5%), 5%);
	$color-poll-border4:					desaturate(darken($color-poll-bg4, 5%), 5%);
	$color-poll-border5:					desaturate(darken($color-poll-bg5, 5%), 5%);

	// Highlight colors
	$color-blockquote:						desaturate($color-highlight, 45%);
	$color-blockquote-inner:				desaturate($color-highlight, 30%);

	// PM Colors
	$color-pm-reply:						desaturate(lighten($color-primary, 20%), 65%);
	$color-pm-friend:						desaturate(darken($color-primary, 5%), 45%);
	$color-pm-reported:						$color-accent;
	$color-pm-marked:						adjust-hue(saturate($color-accent, 15%), -310%);
	$color-pm-foe:							$black;

	// Other Unique Colors
	$color-loader-blue:						#4285f4;
	$color-loader-red:						#de3e35;
	$color-loader-yellow:					#f7c223;
	$color-loader-green:					#1b9a59;
	$color-online:							#85de39;



// ##################################################################################################

/* -----------------------------------------------------------------------------
 *	#Colours
 *------------------------------------------------------------------------------

/* stylelint-disable selector-max-compound-selectors */
/* stylelint-disable selector-no-qualifying-type */

/*
// Common Colours
//--------------------------------------------------------------------------- */
html,
body {
	background-color: $gray-100;
	color: $color-ui-dark;
}

h1 { color: $white; }
h2 { color: $color-ui-super-dark; }

h3 {
	border-bottom-color: $gray-300;
	color: $color-secondary-dark;
}

hr {
	border-color: $white;
	border-top-color: $gray-300;
}


/*
// Link Colours
//--------------------------------------------------------------------------- */

a { color: $color-link; }
a:hover { color: $color-link-hover; }

/* links on gradient backgrounds */
.forumbg .header a,
.forabg .header a,
th a {
	color: $white;
}

.forumbg .header a:hover,
.forabg .header a:hover,
th a:hover {
	color: $color-secondary-light;
}

/* post body links */
.postlink {
	border-bottom-color: $color-link-secondary;
	color: $color-link-secondary;
}

.postlink:visited {
	border-bottom-color: $color-link-secondary-accent;
	color: $color-link-secondary-accent;
}

.postlink:hover {
	background-color: $color-link-secondary-hover-highlight;
	color: $color-link-secondary-hover;
}

.signature a,
.signature a:hover {
	background-color: transparent;
}

/* arrow links  */
.arrow-left:hover,
.arrow-right:hover {
	color: $color-link-secondary;
}

.post:target .content { color: $black; }
.post:target h3 a { color: $black; }

/* horizontal lists */
ul.navlinks { border-top-color: $white; }


/*
// Icon Colours
//--------------------------------------------------------------------------- */

.top i { color: $gray-500; }

.icon.icon-blue,
a:hover .icon.icon-blue {
	color: $color-secondary-dark;
}

.icon.icon-green,
a:hover .icon.icon-green {
	color: $color-code;
}

.icon.icon-red,
a:hover .icon.icon-red {
	color: $color-link-hover;
}

.icon.icon-orange,
a:hover .icon.icon-orange {
	color: $color-pm-marked;
}

.icon.icon-bluegray,
a:hover .icon.icon-bluegray {
	color: $color-ui-dark;
}

.icon.icon-gray,
a:hover .icon.icon-gray {
	color: $gray-600;
}

.icon.icon-lightgray,
a:hover .icon.icon-lightgray {
	color: $gray-500;
}

.icon.icon-black,
a:hover .icon.icon-black {
	color: $gray-900;
}


/*
// Button Colours
//--------------------------------------------------------------------------- */
.button {
	border-color: $color-button-border;
	box-shadow: 0 0 0 1px $color-button-box-shadow inset;
	color: $color-button-text;
}

.button:hover,
.button:focus {
	background-image: linear-gradient(to bottom, $color-button-background 0%, $color-button-background-light 100%);
	border-color: $color-button-border-hover;
	text-shadow: 1px 1px 0 $color-button-text-shadow, -1px -1px 0 $color-button-text-shadow, -1px -1px 0 $color-button-text-shadow-hover;
	color: $color-button-text;
}

.button .icon,
.button-secondary {
	color: $color-button-icon;
}

a.button1, input.button1, // form
a.button2, input.button2 { // form-bold
	background-color: $color-button-background-light;
	background-image: linear-gradient(to bottom, $color-button-background 0%, $color-button-background-light 100%);
	border-color: $color-button-form-border;
	color: $color-button-form-text;
}

a.button1:hover, input.button1:hover, // form
a.button2:hover, input.button2:hover { // form-bold
	text-shadow: none;
	background-color: $color-button-background;
	background-image: linear-gradient(to bottom, $color-button-background-light 0%, $color-button-background 100%);
	border-color: $color-button-form-border-hover;
	color: $color-button-form-text-hover;
}

input.button1:focus, // form
input.button2:focus { // form-bold
	text-shadow: none;
	border-color: $color-button-form-input-border-focus;
	color: $color-button-form-input-text-focus;
}

.button-secondary:focus,
.button-secondary:hover,
.button:focus .icon,
.button:hover .icon {
	color: $color-button-icon-hover;
}

.button-search:hover,
.button-search-end:hover {
	border-color: $color-button-border;
}

.caret { border-color: $gray-400; }
.contact-icons a { border-color: $gray-300; }
.contact-icons a:hover { background-color: $gray-200; }


/*
// Jumpbox Colours
//--------------------------------------------------------------------------- */
.jumpbox .dropdown li { border-top-color: $gray-300; }

.jumpbox-cat-link {
	background-color: $color-primary-dark;
	border-top-color: $color-primary-dark;
	color: $white;
}

.jumpbox-cat-link:hover,
.jumpbox-cat-link:focus {
	background-color: $color-primary;
	border-top-color: $color-primary;
	color: $white;
}

.jumpbox-forum-link { background-color: $color-bg-2; }
.jumpbox-forum-link:hover { background-color: $color-highlight; }
.jumpbox-sub-link { background-color: $color-bg-2; }
.jumpbox-sub-link:hover { background-color: $color-bg-light; }
.jumpbox .dropdown .pointer-inner { border-color: $color-bg-2 transparent; }


/*
// Content Block Colours
//--------------------------------------------------------------------------- */

/* Various Panel BG Colours */
.bg1 { background-color: $color-bg-1; }
.bg2 { background-color: $color-bg-2; }
.bg3 { background-color: $color-bg-3; }

.wrap {
	background-color: $white;
	border-color: $gray-200;
}

.content { color: $gray-900; }

.panel {
	background-color: $color-bg-4;
	color: $color-ui-super-dark;
}

.content h2,
.panel h2 {
	border-bottom-color: $gray-300;
	color: $color-secondary-dark;
}

.navbar { background-color: $color-bg-3; }

div.rules {
	background-color: $color-accent-hover;
	color: $color-link-hover;
}

p.post-notice {
	background-color: $color-accent-hover;
	background-image: none;
}

/* round cornered boxes and backgrounds */
.headerbar { color: $white; }

.headerbar,
.forumbg {
	background-color: $color-primary;
	background-image: linear-gradient(to bottom, $color-primary-light 0%, $color-primary-dark 0.1%, $color-primary 30%, $color-primary 100%);
	background-repeat: repeat-x;
}

.forabg {
	background-color: $color-primary-dark;
	background-image: linear-gradient(to bottom, $color-primary-light 0%, $color-primary 0.1%, $color-primary-dark 30%, $color-primary-dark 100%);
	background-repeat: repeat-x;
}


/*
// Forum & Topic Row Colours
//--------------------------------------------------------------------------- */

ul.forums {
	background-color: $color-bg-1;
	background-image: linear-gradient(to bottom, darken($color-bg-1, 15%) 0%, $color-bg-1 100%);
}

ul.topiclist li { color: $color-ui-dark; }
ul.topiclist dd { border-left-color: $white; }

.rtl ul.topiclist dd {
	border-right-color: $white;
	border-left-color: transparent;
}

li.row {
	border-top-color: $white;
	border-bottom-color: $color-primary-dark;
}

li.row strong { color: $black; }
li.row:hover { background-color: $color-highlight; }
li.row:hover dd { border-left-color: $gray-300; }

.rtl li.row:hover dd {
	border-right-color: $gray-300;
	border-left-color: transparent;
}

li.header dt,
li.header dd {
	color: $white;
}


/*
// Poll Colours
//--------------------------------------------------------------------------- */

fieldset.polls dl {
	border-top-color: $color-bg-3;
	color: $gray-700;
}

fieldset.polls dl.voted { color: $black; }
fieldset.polls dd div { color: $white; }

.rtl .pollbar1,
.rtl .pollbar2,
.rtl .pollbar3,
.rtl .pollbar4,
.rtl .pollbar5 {
	border-right-color: transparent;
}

.pollbar1 {
	background-color: $color-poll-bg1;
	border-right-color: $color-poll-border1;
	border-bottom-color: $color-poll-border1;
}

.pollbar2 {
	background-color: $color-poll-bg2;
	border-right-color: $color-poll-border2;
	border-bottom-color: $color-poll-border2;
}

.pollbar3 {
	background-color: $color-poll-bg3;
	border-right-color: $color-poll-border3;
	border-bottom-color: $color-poll-border3;
}

.pollbar4 {
	background-color: $color-poll-bg4;
	border-right-color: $color-poll-border4;
	border-bottom-color: $color-poll-border4;
}

.pollbar5 {
	background-color: $color-poll-bg5;
	border-right-color: $color-poll-border5;
	border-bottom-color: $color-poll-border5;
}

.rtl .pollbar1 { border-left-color: $color-poll-border1; }
.rtl .pollbar2 { border-left-color: $color-poll-border2; }
.rtl .pollbar3 { border-left-color: $color-poll-border3; }
.rtl .pollbar4 { border-left-color: $color-poll-border4; }
.rtl .pollbar5 { border-left-color: $color-poll-border5; }


/*
// Post Colours
//--------------------------------------------------------------------------- */

/* profile */
.postprofile {
	border-color: $white;
	color: $gray-700;
}

.pm .postprofile { border-color: $gray-300; }
.postprofile strong { color: $black; }
dd.profile-warnings { color: $color-link-hover; }

/* post body styles */
.postbody { color: $gray-900; }

.posthilit {
	background-color: $color-link-hover-highlight;
	color: $color-link-hover;
}

/* post signature */
.signature { border-top-color: $gray-300; }

/* post noticies */
.notice { border-top-color: $gray-300; }

/* quote block */
blockquote {
	background-color: $color-blockquote;
	border-color: desaturate($color-blockquote, 10%);
}

/* nested quotes */
blockquote blockquote { background-color: $color-blockquote-inner; }
blockquote blockquote blockquote { background-color: $color-blockquote; }

/* code block */
.codebox {
	background-color: $white;
	border-color: $color-bg-dark;
}

.codebox p { border-bottom-color: $gray-300; }
.codebox code { color: $color-code; }

/* attachments */
.attachbox {
	background-color: $white;
	border-color: $color-bg-dark;
}

.attachbox dd { border-top-color: $color-bg-dark; }
.attachbox p { color: $gray-700; }
.attachbox p.stats { color: $gray-700; }
.attach-image img { border-color: $gray-500; }

/* inline image thumbnails */
dl.thumbnail img {
	background-color: $white;
	border-color: $gray-700;
}

dl.file dd { color: $gray-700; }
dl.thumbnail dd { color: $gray-700; }
dl.thumbnail dt a:hover { background-color: $gray-200; }
dl.thumbnail dt a:hover img { border-color: $color-link-secondary; }


/*
// Pagination Colours
//--------------------------------------------------------------------------- */

.pagination li a {
	background: $gray-200;
	-webkit-filter: none;
	filter: none;
	border-color: $gray-400;
	-webkit-box-shadow: none;
	box-shadow: none;
	color: $gray-500;
}

.pagination li.ellipsis span {
	background: transparent;
	color: $black;
}

.pagination li.active span {
	background: $color-link-secondary;
	border-color: $color-link-secondary;
	color: $white;
}

.pagination li a:hover,
.pagination li a:hover .icon,
.pagination .dropdown-visible a.dropdown-trigger,
.nojs .pagination .dropdown-container:hover a.dropdown-trigger {
	background: $color-link-secondary;
	filter: none;
	border-color: $color-link-secondary;
	text-shadow: none;
	color: $white;
}


/*
// Search Box Colours
//--------------------------------------------------------------------------- */

.search-box .inputbox,
.search-box .inputbox:hover,
.search-box .inputbox:focus {
	border-color: $gray-400;
}

.search-header { box-shadow: 0 0 10px $color-primary-dark; }


/*
// CP Colours
//--------------------------------------------------------------------------- */

/* main cp box */
.panel-container h3,
.panel-container hr,
.cp-menu hr {
	border-color: $color-bg-3;
}

.panel-container .panel li.row {
	border-top-color: $gray-50;
	border-bottom-color: $color-bg-3;
}

ul.cplist { border-top-color: $color-bg-3; }

.panel-container .panel li.header dd,
.panel-container .panel li.header dt {
	color: $black;
}

.panel-container h2 { color: $gray-900; }
.panel-container .panel { background-color: $gray-50; }
.cp-main .pm { background-color: $white; }
.cp-mini { background-color: $color-bg-1; }
dl.mini dt { color: $color-ui-dark; }


/*
// Tab Colours
//--------------------------------------------------------------------------- */

.tabs .tab > a {
	background: $color-tab-background;
	color: $color-tab-text;
}

.tabs .tab > a:hover {
	background: $color-tab-background-hover;
	color: $color-tab-text-hover;
}

/* responsive tabs */
.responsive-tab .responsive-tab-link:before { border-color: $color-tab-text; }
.responsive-tab .responsive-tab-link:hover:before { border-color: $color-tab-text-hover; }

.tabs .activetab > a,
.tabs .activetab > a:hover {
	background-color: $color-tab-background-active;
	background-image: linear-gradient(to bottom, $color-tab-background-active-light 0%, $color-tab-background-active 100%);
	border-color: $color-tab-border-active;
	box-shadow: 0 1px 1px $color-bg-light inset;
	color: $color-tab-text-active;
}

/* mini tabbed menu used in mcp */
.minitabs .tab > a { background-color: $color-tab-background-mini; }

.minitabs .activetab > a,
.minitabs .activetab > a:hover {
	background-color: $color-tab-background-mini-active;
	color: $color-tab-text-mini-active;
}


/*
// UCP Nav Colours
//--------------------------------------------------------------------------- */

/* link styles for the sub-section links */
.navigation a {
	background: $color-tab-background;
	background-image: linear-gradient(to right, desaturate(darken($color-tab-background, 10%), 15%) 50%, $color-tab-background 100%);
	color: $color-tab-text-mini-active;
}

.rtl .navigation a { background-image: linear-gradient(to right, $color-tab-background 50%, desaturate(darken($color-tab-background, 10%), 15%) 100%); }

.navigation a:hover {
	background: desaturate(darken($color-tab-background, 10%), 15%);
	color: $color-tab-text-hover;
}

.navigation .active-subsection a {
	background: $color-tab-background-mini-active;
	color: $color-tab-text-hover;
}

.navigation .active-subsection a:hover { color: $color-tab-text-hover; }

@media only screen and (max-width: 900px), only screen and (max-device-width: 900px) {
	.navigation a,
	.rtl .navigation a {
		background: desaturate(darken($color-tab-background, 10%), 15%);
	}
}


/*
// PM Colours
//--------------------------------------------------------------------------- */

/* pm message history */
.current { color: $black !important; }

/* pm marking colours */
.pmlist li.pm_message_reported_colour,
.pm_message_reported_colour {
	border-right-color: $color-pm-reported;
	border-left-color: $color-pm-reported;
}

.pmlist li.pm_marked_colour,
.pm_marked_colour {
	border-color: $color-pm-marked;
}

.pmlist li.pm_replied_colour,
.pm_replied_colour {
	border-color: $color-pm-reply;
}

.pmlist li.pm_friend_colour,
.pm_friend_colour {
	border-color: $color-pm-friend;
}

.pmlist li.pm_foe_colour,
.pm_foe_colour {
	border-color: $color-pm-foe;
}


/*
// Avatar Gallery Colours
//--------------------------------------------------------------------------- */

.gallery label {
	background: $white;
	border-color: $gray-300;
}

.gallery label:hover { background-color: $gray-200; }


/*
// Table Colours
//--------------------------------------------------------------------------- */

table.zebra-list tr:nth-child(odd) td,
ul.zebra-list li:nth-child(odd) {
	background-color: $color-bg-1;
}

table.zebra-list tr:nth-child(even) td,
ul.zebra-list li:nth-child(even) {
	background-color: $color-bg-2;
}
table.table1 thead th { color: $white; }
table.table1 tbody tr { border-color: $color-bg-3; }

table.table1 tbody tr:hover,
table.table1 tbody tr.hover {
	background-color: $color-link-secondary-hover-highlight;
	color: $black;
}

table.table1 tbody th {
	background-color: $white;
	border-bottom-color: $black;
	color: $gray-900;
}

table.info tbody th { color: $black; }
table.table1 td { color: $color-ui-dark; }
table.table1 tbody td { border-top-color: $gray-50; }

.panel-container table.table1 thead th {
	border-bottom-color: $gray-900;
	color: $gray-900;
}


/*
// Form Colours
//--------------------------------------------------------------------------- */

/* general form styles */
select {
	background-color: $gray-50;
	border-color: $gray-700;
	color: $black;
}

label { color: $color-ui-dark; }

/* definition list layout for forms */
dd label { color: $gray-900; }
fieldset.fields1 { background-color: transparent; }

/* hover effects */
fieldset dl:hover dt label { color: $black; }
fieldset.fields2 dl:hover dt label { color: inherit; }

/* Quick-login on index page */
fieldset.quick-login input.inputbox { background-color: $gray-100; }

/* misc layout styles */
dl.details dt { color: $black; }
dl.details dd { color: $color-ui-dark; }

/* posting page styles */
.message-box textarea { color: $gray-900; }
.message-box textarea.drag-n-drop { outline-color: rgba($gray-700, 0.5); }
.message-box textarea.drag-n-drop-highlight { outline-color: rgba($color-primary, 0.5); }

/* input field styles */
.inputbox {
	background-color: $white;
	border-color: $gray-400;
	color: $gray-900;
}

.inputbox:-moz-placeholder,
.inputbox::-webkit-input-placeholder {
	color: $gray-900;
}

.inputbox:hover,
.inputbox:focus {
	border-color: $color-primary;
}

.inputbox:focus:-moz-placeholder,
.inputbox:focus::-webkit-input-placeholder {
	color: transparent;
}

input.disabled { color: $gray-600; }
option.disabled-option { color: $gray-600; }


/*
// JS Animation Colours
//--------------------------------------------------------------------------- */

.phpbb_alert {
	background-color: $white;
	border-color: $gray-500;
}

.alert_close .icon:before { background-color: $white; }
.darken { background-color: $black; }

/*
// Dropdowns Colours
//--------------------------------------------------------------------------- */
.dropdown-extended a.mark_read { background-color: $white; }
.dropdown-extended ul li { border-top-color: $gray-400; }

.dropdown-extended ul li:hover {
	background-color: $color-link-secondary-hover-highlight;
	color: $black;
}

.dropdown-extended .header,
.dropdown-extended .footer {
	border-color: $gray-400;
	color: $black;
}

.dropdown-extended .footer {
	border-top-width: 1px;
	border-top-style: solid;
}

.dropdown-extended .header {
	background-color: $color-bg-light;
	background-image: linear-gradient(to bottom, $color-bg-light 0%, $color-bg-3 100%);
}

.dropdown .pointer { border-color: $gray-400 transparent; }
.dropdown .pointer-inner { border-color: $white transparent; }
.dropdown-extended .pointer-inner { border-color: $color-bg-light transparent; }

.dropdown .dropdown-contents {
	background: $white;
	border-color: $gray-400;
	box-shadow: 1px 3px 5px rgba($black, 0.2);
}

.dropdown-up .dropdown-contents { box-shadow: 1px 0 5px rgba($black, 0.2); }

.dropdown li,
.dropdown li li {
	border-color: $gray-300;
}

.dropdown li.separator { border-color: $gray-300; }


/*
// Notification Colours
//--------------------------------------------------------------------------- */
.notification_list p.notification-time { color: $color-ui-dark; }

li.notification-reported strong,
li.notification-disapproved strong {
	color: $color-link-hover;
}

.badge {
	background-color: $color-link-hover;
	color: $white;
}


/*
// Misc Colours
//--------------------------------------------------------------------------- */
dl.faq dt { color: $gray-900; }
.copyright { color: $gray-800; }
.error { color: $color-link-hover; }
.reported { background-color: $color-accent-highlight; }
li.reported:hover { background-color: $color-accent-hover !important; }
.sep { color: $color-primary; }


/*
// Images
//--------------------------------------------------------------------------- */

.site_logo { background-image: url("./images/site_logo.gif"); }
.contact-icon { background-image: url("./images/icons_contact.png"); }
.online { background-image: url("./en/icon_user_online.gif"); }

.loading_indicator {
	background-color: $black;
	background-image: url("./images/loading.gif");
}

/*  Contact icons */
.pm-icon { background-position: 0 0; }
.email-icon { background-position: -21px 0; }
.jabber-icon { background-position: -80px 0; }
.phpbb_icq-icon { background-position: -61px 0; }
.phpbb_wlm-icon { background-position: -182px 0; }
.phpbb_aol-icon { background-position: -244px 0; }
.phpbb_website-icon { background-position: -40px 0; }
.phpbb_youtube-icon { background-position: -98px 0; }
.phpbb_facebook-icon { background-position: -119px 0; }
.phpbb_googleplus-icon { background-position: -140px 0; }
.phpbb_skype-icon { background-position: -161px 0; }
.phpbb_twitter-icon { background-position: -203px 0; }
.phpbb_yahoo-icon { background-position: -224px 0; }

/*  Imageset icons */
.global_read { background-image: url("./images/announce_read.gif"); }
.global_read_mine { background-image: url("./images/announce_read_mine.gif"); }
.global_read_locked { background-image: url("./images/announce_read_locked.gif"); }
.global_read_locked_mine { background-image: url("./images/announce_read_locked_mine.gif"); }
.global_unread { background-image: url("./images/announce_unread.gif"); }
.global_unread_mine { background-image: url("./images/announce_unread_mine.gif"); }
.global_unread_locked { background-image: url("./images/announce_unread_locked.gif"); }
.global_unread_locked_mine { background-image: url("./images/announce_unread_locked_mine.gif"); }

.announce_read { background-image: url("./images/announce_read.gif"); }
.announce_read_mine { background-image: url("./images/announce_read_mine.gif"); }
.announce_read_locked { background-image: url("./images/announce_read_locked.gif"); }
.announce_read_locked_mine { background-image: url("./images/announce_read_locked_mine.gif"); }
.announce_unread { background-image: url("./images/announce_unread.gif"); }
.announce_unread_mine { background-image: url("./images/announce_unread_mine.gif"); }
.announce_unread_locked { background-image: url("./images/announce_unread_locked.gif"); }
.announce_unread_locked_mine { background-image: url("./images/announce_unread_locked_mine.gif"); }

.forum_link { background-image: url("./images/forum_link.gif"); }
.forum_read { background-image: url("./images/forum_read.gif"); }
.forum_read_locked { background-image: url("./images/forum_read_locked.gif"); }
.forum_read_subforum { background-image: url("./images/forum_read_subforum.gif"); }
.forum_unread { background-image: url("./images/forum_unread.gif"); }
.forum_unread_locked { background-image: url("./images/forum_unread_locked.gif"); }
.forum_unread_subforum { background-image: url("./images/forum_unread_subforum.gif"); }

.sticky_read { background-image: url("./images/sticky_read.gif"); }
.sticky_read_mine { background-image: url("./images/sticky_read_mine.gif"); }
.sticky_read_locked { background-image: url("./images/sticky_read_locked.gif"); }
.sticky_read_locked_mine { background-image: url("./images/sticky_read_locked_mine.gif"); }
.sticky_unread { background-image: url("./images/sticky_unread.gif"); }
.sticky_unread_mine { background-image: url("./images/sticky_unread_mine.gif"); }
.sticky_unread_locked { background-image: url("./images/sticky_unread_locked.gif"); }
.sticky_unread_locked_mine { background-image: url("./images/sticky_unread_locked_mine.gif"); }

.pm_read,
.topic_read { background-image: url("./images/topic_read.gif"); }
.topic_moved { background-image: url("./images/topic_moved.gif"); }
.topic_read_mine { background-image: url("./images/topic_read_mine.gif"); }
.topic_read_hot { background-image: url("./images/topic_read_hot.gif"); }
.topic_read_hot_mine { background-image: url("./images/topic_read_hot_mine.gif"); }
.topic_read_locked { background-image: url("./images/topic_read_locked.gif"); }
.topic_read_locked_mine { background-image: url("./images/topic_read_locked_mine.gif"); }

.pm_unread,
.topic_unread { background-image: url("./images/topic_unread.gif"); }
.topic_unread_mine { background-image: url("./images/topic_unread_mine.gif"); }
.topic_unread_hot { background-image: url("./images/topic_unread_hot.gif"); }
.topic_unread_hot_mine { background-image: url("./images/topic_unread_hot_mine.gif"); }
.topic_unread_locked { background-image: url("./images/topic_unread_locked.gif"); }
.topic_unread_locked_mine { background-image: url("./images/topic_unread_locked_mine.gif"); }

/* stylelint-enable */







/************************************************************************\
/* DELETE EVERYTHING PAST HERE
/************************************************************************/

.color-primary { background-color: $color-primary; }
.color-accent { background-color: $color-accent; }
.color-secondary { background-color: $color-secondary; }
.color-ui { background-color: $color-ui; }
.color-links { background-color: $color-links; }
.color-highlight { background-color: $color-highlight; }
.color-code { background-color: $color-code; }
.color-bg { background-color: $color-bg; }
.color-polls { background-color: $color-polls; }

.color-primary-light { background-color: $color-primary-light; }
.color-primary-dark { background-color: $color-primary-dark; }

.color-secondary-light { background-color: $color-secondary-light; }
.color-secondary-dark { background-color: $color-secondary-dark; }

.color-accent-light { background-color: $color-accent-light; }
.color-accent-dark { background-color: $color-accent-dark; }
.color-accent-hover { background-color: $color-accent-hover; }
.color-accent-highlight { background-color: $color-accent-highlight; }

.color-ui-light { background-color: $color-ui-light; }
.color-ui-dark { background-color: $color-ui-dark; }
.color-ui-super-dark { background-color: $color-ui-super-dark; }

.gray-50 { background-color: $gray-50; }
.gray-100 { background-color: $gray-100; }
.gray-200 { background-color: $gray-200; }
.gray-300 { background-color: $gray-300; }
.gray-400 { background-color: $gray-400; }
.gray-500 { background-color: $gray-500; }
.gray-600 { background-color: $gray-600; }
.gray-700 { background-color: $gray-700; }
.gray-800 { background-color: $gray-800; }
.gray-900 { background-color: $gray-900; }

.black { background-color: $black; }
.black-87 { background-color: $black-87; }
.black-54 { background-color: $black-54; }
.black-38 { background-color: $black-38; }
.black-12 { background-color: $black-12; }
.white { background-color: $white; }

// Background Colors
.color-bg-1 { background-color: $color-bg-1; }
.color-bg-2 { background-color: $color-bg-2; }
.color-bg-3 { background-color: $color-bg-3; }
.color-bg-4 { background-color: $color-bg-4; }
.color-bg-light { background-color: $color-bg-light; }
.color-bg-dark { background-color: $color-bg-dark; }
.color-bg-dark-hover { background-color: $color-bg-dark-hover; }

.color-link { background-color: $color-links; }
.color-link-accent { background-color: $color-link-accent; }
.color-link-hover { background-color: $color-link-hover; }
.color-link-hover-highlight { background-color: $color-link-hover-highlight; }

.color-link-secondary { background-color: $color-link-secondary; }
.color-link-secondary-accent { background-color: $color-link-secondary-accent; }
.color-link-secondary-hover { background-color: $color-link-secondary-hover; }
.color-link-secondary-hover-highlight { background-color: $color-link-secondary-hover-highlight; }


.color-button-border { background-color: $color-button-border; }
.color-button-text { background-color: $color-button-text; }
.color-button-background { background-color: $color-button-background; }
.color-button-icon { background-color: $color-button-icon; }

.color-button-box-shadow { background-color: $color-button-box-shadow; }
.color-button-text-shadow { background-color: $color-button-text-shadow; }
.color-button-background-light { background-color: $color-button-background-light; }
.color-button-icon-hover { background-color: $color-button-icon-hover; }
.color-button-border-hover { background-color: $color-button-border-hover; }
.color-button-form-text { background-color: $color-button-form-text; }
.color-button-form-border { background-color: $color-button-form-border; }

.color-button-text-shadow-hover { background-color: $color-button-text-shadow-hover; }
.color-button-form-text-hover { background-color: $color-button-form-text-hover; }
.color-button-form-border-hover { background-color: $color-button-form-border-hover; }

.color-button-form-input-border-focus { background-color: $color-button-form-input-border-focus; }
.color-button-form-input-text-focus { background-color: $color-button-form-input-text-focus; }

.color-tab-text { background-color: $color-tab-text; }
.color-tab-bg { background-color: $color-tab-background; }

.color-tab-text-hover { background-color: $color-tab-text-hover; }
.color-tab-bg-hover { background-color: $color-tab-background-hover; }

.color-tab-text-active { background-color: $color-tab-text-active; }
.color-tab-bg-active { background-color: $color-tab-background-active; }
.color-tab-border-active { background-color: $color-tab-border-active; }

.color-tab-bg-active-light { background-color: $color-tab-background-active-light; }
.color-tab-box-shadow-active { background-color: $color-bg-light; }

.color-tab-text-mini-active { background-color: $color-tab-text-mini-active; }
.color-tab-bg-mini-active { background-color: $color-tab-background-mini-active; }
.color-tab-bg-mini { background-color: $color-tab-background-mini; }

.color-poll-bg1 { background-color: $color-poll-bg1; }
.color-poll-bg2 { background-color: $color-poll-bg2; }
.color-poll-bg3 { background-color: $color-poll-bg3; }
.color-poll-bg4 { background-color: $color-poll-bg4; }
.color-poll-bg5 { background-color: $color-poll-bg5; }

.color-poll-border1 { background-color: $color-poll-border1; }
.color-poll-border2 { background-color: $color-poll-border2; }
.color-poll-border3 { background-color: $color-poll-border3; }
.color-poll-border4 { background-color: $color-poll-border4; }
.color-poll-border5 { background-color: $color-poll-border5; }

// Highlight colors
.color-blockquote { background-color: $color-blockquote; }
.color-blockquote-inner { background-color: $color-blockquote-inner; }

.color-pm-reply { background-color: $color-pm-reply; }
.color-pm-friend { background-color: $color-pm-friend; }
.color-pm-reported { background-color: $color-pm-reported; }
.color-pm-marked { background-color: $color-pm-marked; }
.color-pm-foe { background-color: $color-pm-foe; }

.color-loader-blue { background-color: $color-loader-blue; }
.color-loader-red { background-color: $color-loader-red; }
.color-loader-yellow { background-color: $color-loader-yellow; }
.color-loader-green { background-color: $color-loader-green; }
.color-online { background-color: $color-online; }



.colors {
	margin: 8px;
	display: flex;
}

.swatch {
	font-family: sans-serif;
	border-radius: 3px;
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
	margin: 8px;
	
	&-body {
		margin: 0;
		padding: 0;
		list-style: none;
		display: flex;
		align-items: center;
  		justify-content: center;
	}
	
	&-strip {
		font-size: 16px;
		letter-spacing: 0.04em;
		font-weight: normal;
		line-height: 20px;
		color: #ffffff;
		text-align: center;
		padding: 24px 16px;
		display: flex;
		flex: 1;
		flex-direction: column;
		justify-content: center;
		align-self: center;
		// min-width: 80px;
		
		&:first-of-type {
			border-top-left-radius: 3px;
		}
		
		&:last-of-type {
			border-top-right-radius: 3px;
		}
	}
	
	&-title {
		font-size: 20px;
		letter-spacing: 0.02em;
		font-weight: 500;
		line-height: 24px;
		margin: 0;
		padding: 8px 8px 8px 16px;
		color: $gray-800;
	}
	
	&-subtitle {
		font-size: 16px;
		letter-spacing: 0.04em;
		font-weight: normal;
		line-height: 20px;
		display: block;
	}
}
            
          
!
            
              $(function() {
	$.cssHooks.backgroundColor = {
		get: function(elem) {
			if (elem.currentStyle) {
				var bg = elem.currentStyle["backgroundColor"];
			} else if (window.getComputedStyle) {
				var bg = document.defaultView.getComputedStyle(elem, null).getPropertyValue("background-color");
				if (bg.search("rgb") == -1) {
					return bg;
				} else {
					bg = bg.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);

					function hex(x) {
						return ("0" + parseInt(x).toString(16)).slice(-2);
					}

					return "#" + hex(bg[1]) + hex(bg[2]) + hex(bg[3]);
				}
			}
		}
	}

	var getRGB = function(b) {
		var a;
		if (b && b.constructor == Array && b.length == 3) return b;
		if (a = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(b)) return [parseInt(a[1]), parseInt(a[2]), parseInt(a[3])];
		if (a = /rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(b)) return [parseFloat(a[1]) * 2.55, parseFloat(a[2]) * 2.55, parseFloat(a[3]) * 2.55];
		if (a = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(b)) return [parseInt(a[1], 16), parseInt(a[2], 16), parseInt(a[3],
			16)];
		if (a = /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(b)) return [parseInt(a[1] + a[1], 16), parseInt(a[2] + a[2], 16), parseInt(a[3] + a[3], 16)];
		return (typeof(colors) != "undefined") ? colors[jQuery.trim(b).toLowerCase()] : null
	};

	var luminance_get = function(color) {
		var rgb = getRGB(color);
		if (!rgb) return null;
		return Math.round(0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2]);
	}

	$('.swatch-strip').text(function() {
		var color = $(this).css("background-color");
		if (luminance_get(color) > 235) {
			$(this).css("color", "#333333")
		}
		return color;
	});
});
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console