<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/ramenhog/pen/yXYNzz" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'><link rel='stylesheet prefetch' href='https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css'>
<style class="cp-pen-styles">@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Lato:300,400,700,900");
.main__hexcode, .main__share-input {
text-transform: uppercase;
font-size: 1rem;
font-weight: 400;
color: #555459;
padding: 0 0.5rem;
font-family: "Consolas", monaco, courier, monospace;
}
:root {
--column-bg: #ae0001;
--menu-bg-hover: #680001;
--active-item: #D3A625;
--active-item-text: #680001;
--hover-item: #BE0002;
--text-color: #FFFFFF;
--active-presence: #00FFBA;
--mention-badge: #DE4C0D;
}
* {
box-sizing: border-box;
}
html,
body {
position: relative;
width: 100%;
height: 100%;
font-size: 17px;
font-family: "Lato", Helvetica, sans-serif;
-webkit-font-smoothing: antialiased;
color: #555459;
overflow: hidden;
}
h1,
h2,
h3,
h4 {
color: #2C2D30;
}
strong {
font-weight: 700;
}
button {
border: none;
background: none;
padding: 0;
margin: 0;
font-size: inherit;
font-family: inherit;
text-align: left;
cursor: pointer;
}
button:focus, button:hover, button:active {
outline: none;
}
.slack {
width: 100%;
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
@supports ((display: -ms-grid) or (display: grid)) {
.slack {
display: -ms-grid;
display: grid;
-ms-grid-columns: 75px 250px 1fr;
grid-template-columns: 75px 250px 1fr;
-ms-grid-rows: 1fr;
grid-template-rows: 1fr;
}
}
.teams {
width: 75px;
position: relative;
height: 100%;
background: var(--column-bg, #ae0001);
}
.teams__list {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
}
.teams__item {
counter-increment: team-counter;
font-size: 0.8rem;
color: #fff;
text-align: center;
}
.teams__item:after {
content: "⌘" counter(team-counter);
}
.teams__button {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin: 1.4rem 0 0.5rem;
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.1);
text-decoration: none;
border-radius: 5px;
line-height: 1;
color: rgba(255, 255, 255, 0.6);
font-size: 20px;
font-weight: 700;
}
.teams__button--active {
color: #fff;
background: rgba(255, 255, 255, 0.4);
}
.teams__button--active:before {
content: "";
position: absolute;
left: -20px;
top: 0;
width: 7px;
height: 100%;
background: #fff;
opacity: 0.7;
border-radius: 3px;
}
.teams__button:hover {
box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.2);
}
.team-menu {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 18px 18px 0;
}
.team-menu:hover {
background: var(--menu-bg-hover, #680001);
}
.team-menu__name {
font-size: 18px;
font-weight: 900;
color: var(--text-color, #fff);
}
.team-menu__status {
font-size: 15px;
line-height: 1.8;
color: var(--text-color, #fff);
}
.team-menu__status:before {
content: "";
display: inline-block;
margin-right: 0.2rem;
width: 9px;
height: 9px;
background: var(--active-presence, #00FFBA);
border-radius: 50%;
}
.team-menu__username {
opacity: 0.6;
}
.team-menu__alarm {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
font-size: 25px;
color: var(--text-color, #fff);
}
.sidebar {
position: relative;
z-index: 1;
width: 250px;
background: var(--column-bg, #ae0001);
color: var(--text-color, #fff);
}
.threads {
margin: 0.6rem 0;
padding: 0 18px;
opacity: 0.7;
}
.threads__icon {
margin-right: 3px;
}
.channels,
.dm {
margin: 0.5rem 0 1.5rem;
padding-right: 18px;
}
.channels__button, .channels__heading,
.dm__button,
.dm__heading {
padding: 0 0 0 18px;
width: 100%;
color: var(--text-color, #fff);
}
.channels__number,
.dm__number {
display: inline-block;
position: relative;
top: -1px;
margin-left: 2px;
font-size: 13px;
opacity: 0.5;
}
.channels__add,
.dm__add {
font-size: 20px;
color: var(--text-color, #fff);
}
.channels__heading,
.dm__heading {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-size: 14px;
font-weight: 600;
line-height: 2.1;
text-transform: uppercase;
opacity: 0.6;
}
.channels__button,
.dm__button {
padding: 4px 0 4px 18px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.channels__button span,
.dm__button span {
opacity: 0.7;
}
.channels__button:before,
.dm__button:before {
padding: 0 0.3rem;
}
.channels__button:hover,
.dm__button:hover {
background: var(--hover-item, #BE0002);
}
.channels__button--active, .channels__button--active:hover,
.dm__button--active,
.dm__button--active:hover {
background: var(--active-item, #D3A625);
color: var(--active-item-text, #680001);
}
.channels__button:before {
content: "#";
opacity: 0.5;
}
.dm__button:before {
content: "\f401";
margin-right: 3px;
font-family: "Ionicons";
font-size: 0.6rem;
}
.dm__button--online:before {
content: "\f21b";
color: var(--active-presence, #00FFBA);
}
.dm__button--slackbot:before {
content: "\f141";
color: var(--active-presence, #00FFBA);
font-size: 0.75rem;
}
.dm__button--active.dm__button--online:before, .dm__button--active.dm__button--slackbot:before {
color: var(--active-item-text, #680001);
}
.main {
position: relative;
height: 100%;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.main__header {
position: absolute;
top: 0;
left: 0;
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 18px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
background: #fff;
}
.main__h1 {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
font-size: 1.4rem;
font-weight: 900;
text-align: center;
}
.main__h2 {
font-size: 1.5rem;
font-weight: 900;
}
.main__h3 {
margin-bottom: 1rem;
font-size: 1.1rem;
font-weight: 900;
}
.main__content {
position: relative;
top: 60px;
height: calc(100vh - 60px);
overflow-y: scroll;
}
.main__container {
padding: 2rem;
margin: 0 auto;
width: 55%;
max-width: 860px;
min-width: 800px;
}
.main__section {
padding: 2rem 0 0;
border-bottom: 1px solid #DDD;
}
.main__section:last-of-type {
border-bottom: 0;
}
.main__field {
position: relative;
margin-top: 1rem;
width: 25%;
max-width: 25%;
min-width: 25%;
padding-right: 18px;
}
.main__field--full {
max-width: initial;
width: 100%;
margin-top: 2rem;
}
.main__label {
font-weight: 700;
display: block;
font-size: 1.05rem;
line-height: 1.5rem;
}
.main__color-pickers {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
width: 98%;
}
.main__color-field {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-top: 0.25rem;
border: 1px solid #C5C5C5;
border-radius: .25rem;
padding: 0.25rem;
}
.main__themes {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-top: 1rem;
}
.main__colorpicker {
visibility: hidden;
}
.main__hexcode {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
border: none;
min-width: 0;
}
.main__hexcode:focus {
outline: none;
}
.main__share-input {
display: block;
width: 100%;
padding: 0 .75rem;
margin: 0.25rem 0 5rem;
border: 1px solid #C5C5C5;
border-radius: .25rem;
height: 40px;
line-height: 40px;
}
.main__share-input:hover, .main__share-input:focus, .main__share-input:active {
border-color: #2780F8;
outline: none;
}
.main__share-input:focus {
box-shadow: 0 0 7px rgba(39, 128, 248, 0.15);
}
.main__input-wrapper {
width: 1.9rem;
height: 1.9rem;
display: inline-block;
padding: 0;
cursor: pointer;
border: 1px solid #C5C5C5;
border-radius: .25rem;
}
.main__input-wrapper--column-bg {
background: var(--column-bg, #ae0001);
}
.main__input-wrapper--menu-bg-hover {
background: var(--menu-bg-hover, #680001);
}
.main__input-wrapper--active-item {
background: var(--active-item, #D3A625);
}
.main__input-wrapper--active-item-text {
background: var(--active-item-text, #680001);
}
.main__input-wrapper--hover-item {
background: var(--hover-item, #BE0002);
}
.main__input-wrapper--text-color {
background: var(--text-color, #fff);
}
.main__input-wrapper--active-presence {
background: var(--active-presence, #00FFBA);
}
.main__input-wrapper--mention-badge {
background: var(--mention-badge, #DE4C0D);
}
.radio {
margin: 0.5rem 4rem 2rem 0;
width: 130px;
cursor: pointer;
text-transform: capitalize;
}
.radio__input {
min-width: 15px;
margin: 0 0.75rem 0 0;
min-height: 1.5rem;
line-height: 1.5;
}
.radio__wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
line-height: 1.5;
}
.radio__img {
position: relative;
border-radius: 6px;
margin: 0 0 0.5rem;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
background-size: cover;
background-repeat: no-repeat;
}
.radio__img:after {
content: "";
display: block;
padding-top: 54.54545%;
height: 0;
}
.radio__img--solanum {
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/60485/solanum.png");
}
.radio__img--chocolate {
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/60485/chocolate.png");
}
.radio__img--aubergine {
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/60485/aubergine.png");
}
.radio__img--ochin {
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/60485/ochin.png");
}
.radio__img--brinjal {
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/60485/brinjal.png");
}
.radio__img--hoth {
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/60485/hoth.png");
}
.radio__img--workhard {
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/60485/workhard.png");
}
.radio__img--monument {
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/60485/monument.png");
}
</style></head><body>
<div class="slack">
<nav class="teams">
<ul class="teams__list">
<li class="teams__item">
<button class="teams__button teams__button--active">
DA
</button>
</li>
<li class="teams__item">
<button class="teams__button">
SS
</button>
</li>
<li class="teams__item">
<button class="teams__button">
CS
</button>
</li>
<li class="teams__item">
<button class="teams__button">
PA
</button>
</li>
<li class="teams__item">
<button class="teams__button">
GF
</button>
</li>
<li class="teams__item">
<button class="teams__button">
OP
</button>
</li>
<li class="teams__item">
<button class="teams__button">
HP
</button>
</li>
<li class="teams__item">
<button class="teams__button">
DH
</button>
</li>
</ul>
</nav>
<div class="sidebar">
<button class="team-menu">
<div class="team-menu__info">
<h1 class="team-menu__name">Dumbledore's Army</h1>
<div class="team-menu__status">
<span class="team-menu__username">ramenhog</span>
</div>
</div>
<span class="team-menu__alarm ion-ios-bell-outline"></span>
</button>
<div class="threads">
<span class="ion-chatbubble-working threads__icon"></span> All Threads
</div>
<div class="channels">
<h2 class="channels__heading">
<span>Channels <span class="channels__number">(16)</span>
</span>
<button class="ion-ios-plus-outline channels__add"></button>
</h2>
<ul class="channels__list">
<li class="channels__item">
<button class="channels__button"><span>general</span></button>
</li>
<li class="channels__item">
<button class="channels__button"><span>random</span></button>
</li>
<li class="channels__item">
<button class="channels__button"><span>self-defense</span></button>
</li>
<li class="channels__item">
<button class="channels__button"><span>charms</span></button>
</li>
<li class="channels__item">
<button class="channels__button"><span>potions</span></button>
</li>
</ul>
</div>
<div class="dm">
<h2 class="dm__heading">
<span>Direct messages <span class="dm__number">(29)</span>
</span>
<button class="ion-ios-plus-outline dm__add"></button>
</h2>
<ul class="dm__list">
<li class="dm__item">
<button class="dm__button dm__button--slackbot"><span>slackbot</span></button>
</li>
<li class="dm__item">
<button class="dm__button dm__button--online"><span>Harry Potter</span></button>
</li>
<li class="dm__item">
<button class="dm__button"><span>Hermoine Granger</span></button>
</li>
<li class="dm__item">
<button class="dm__button dm__button--online dm__button--active"><span>Ron Weasley</span></button>
</li>
<li class="dm__item">
<button class="dm__button dm__button--online"><span>Neville Longbottom</span></button>
</li>
<li class="dm__item">
<button class="dm__button"><span>Ginny Weasley</span></button>
</li>
<li class="dm__item">
<button class="dm__button dm__button--online"><span>Luna Lovegood</span></button>
</li>
<li class="dm__item">
<button class="dm__button"><span>Cho Chang</span></button>
</li>
<li class="dm__item">
<button class="dm__button"><span>Seamus Finnigan</span></button>
</li>
<li class="dm__item">
<button class="dm__button dm__button--online"><span>Lavender Brown</span></button>
</li>
</ul>
</div>
</div>
<div class="main">
<header class="main__header">
<h1 class="main__h1">Your preferences for Dumbledore's Army</h1>
<button class="ion-android-close"></button>
</header>
<div class="main__content">
<div class="main__container">
<h2 class="main__h2">Sidebar Theme</h2>
<section class="main__section">
<p>Customize the look of the <strong>Dumbledore's Army</strong> team. Only you will see this.</p>
<div class="main__themes">
<label for="aubergine" class="radio">
<div class="radio__img radio__img--aubergine"></div>
<div class="radio__wrapper">
<input id="aubergine" type="radio" name="theme" class="radio__input"/>
aubergine
</div>
</label>
<label for="hoth" class="radio">
<div class="radio__img radio__img--hoth"></div>
<div class="radio__wrapper">
<input id="hoth" type="radio" name="theme" class="radio__input"/>
hoth
</div>
</label>
<label for="monument" class="radio">
<div class="radio__img radio__img--monument"></div>
<div class="radio__wrapper">
<input id="monument" type="radio" name="theme" class="radio__input"/>
monument
</div>
</label>
<label for="chocolate" class="radio">
<div class="radio__img radio__img--chocolate"></div>
<div class="radio__wrapper">
<input id="chocolate" type="radio" name="theme" class="radio__input"/>
choco mint
</div>
</label>
<label for="ochin" class="radio">
<div class="radio__img radio__img--ochin"></div>
<div class="radio__wrapper">
<input id="ochin" type="radio" name="theme" class="radio__input"/>
ochin
</div>
</label>
<label for="workhard" class="radio">
<div class="radio__img radio__img--workhard"></div>
<div class="radio__wrapper">
<input id="workhard" type="radio" name="theme" class="radio__input"/>
work hard
</label>
</div>
</section>
<section class="main__section">
<h3 class="main__h3">Accessible Themes</h3>
<div class="main__themes">
<label for="solanum" class="radio">
<div class="radio__img radio__img--solanum"></div>
<div class="radio__wrapper">
<input id="solanum" type="radio" name="theme" class="radio__input"/>
Protanopia & Deuternopia
</div>
</label>
<label for="brinjal" class="radio">
<div class="radio__img radio__img--brinjal"></div>
<div class="radio__wrapper">
<input id="brinjal" type="radio" name="theme" class="radio__input"/>
tritanopia
</label>
</div>
</section>
<section class="main__section">
<h3 class="main__h3">Custom Theme</h3>
<div class="main__color-pickers">
<fieldset class="main__field">
<label for="column-bg" class="main__label">
Column BG
<div class="main__color-field">
<div class="main__input-wrapper main__input-wrapper--column-bg">
<input id="column-bg" type="color" class="main__colorpicker"/>
</div>
<input class="main__hexcode" maxlength="7" data-color="column-bg" />
</div>
</label>
</fieldset>
<fieldset class="main__field">
<label for="menu-bg-hover" class="main__label">
Menu BG Hover
<div class="main__color-field">
<div class="main__input-wrapper main__input-wrapper--menu-bg-hover">
<input id="menu-bg-hover" type="color" class="main__colorpicker"/>
</div>
<input class="main__hexcode" maxlength="7" data-color="menu-bg-hover" />
</div>
</label>
</fieldset>
<fieldset class="main__field">
<label for="active-item" class="main__label">
Active Item
<div class="main__color-field">
<div class="main__input-wrapper main__input-wrapper--active-item">
<input id="active-item" type="color" class="main__colorpicker"/>
</div>
<input class="main__hexcode" maxlength="7" data-color="active-item" />
</div>
</label>
</fieldset>
<fieldset class="main__field">
<label for="active-item-text" class="main__label">
Active Item Text
<div class="main__color-field">
<div class="main__input-wrapper main__input-wrapper--active-item-text">
<input id="active-item-text" type="color" class="main__colorpicker"/>
</div>
<input class="main__hexcode" maxlength="7" data-color="active-item-text" />
</div>
</label>
</fieldset>
<fieldset class="main__field">
<label for="hover-item" class="main__label">
Hover Item
<div class="main__color-field">
<div class="main__input-wrapper main__input-wrapper--hover-item">
<input id="hover-item" type="color" class="main__colorpicker"/>
</div>
<input class="main__hexcode" maxlength="7" data-color="hover-item" />
</div>
</label>
</fieldset>
<fieldset class="main__field">
<label for="text-color" class="main__label">
Text Color
<div class="main__color-field">
<div class="main__input-wrapper main__input-wrapper--text-color">
<input id="text-color" type="color" class="main__colorpicker"/>
</div>
<input class="main__hexcode" maxlength="7" data-color="text-color" />
</div>
</label>
</fieldset>
<fieldset class="main__field">
<label for="active-presence" class="main__label">
Active Presence
<div class="main__color-field">
<div class="main__input-wrapper main__input-wrapper--active-presence">
<input id="active-presence" type="color" class="main__colorpicker"/>
</div>
<input class="main__hexcode" maxlength="7" data-color="active-presence" />
</div>
</label>
</fieldset>
<fieldset class="main__field">
<label for="mention-badge" class="main__label">
Mention Badge
<div class="main__color-field">
<div class="main__input-wrapper main__input-wrapper--mention-badge">
<input id="mention-badge" type="color" class="main__colorpicker"/>
</div>
<input class="main__hexcode" maxlength="7" data-color="mention-badge" />
</div>
</label>
</fieldset>
</div>
<fieldset class="main__field--full">
<label class="main__label">
Copy and paste these values to share your custom theme with others:
<input id="share-colors" name="share-colors" class="main__share-input" />
</label>
</fieldset>
</section>
</div>
</div>
</div>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script>
<script >'use strict';
var colorPickers = document.querySelectorAll('.main__colorpicker');
var hexCodeInputs = document.querySelectorAll('.main__hexcode');
var shareInput = document.getElementById('share-colors');
var radioInputs = document.querySelectorAll('.radio__input');
function handleColorPickerUpdate() {
document.documentElement.style.setProperty('--' + this.id, this.value);
var hexcodeDiv = document.querySelectorAll('.main__hexcode[data-color=\'' + this.id + '\']');
hexcodeDiv[0].value = this.value;
generateShareString();
}
colorPickers.forEach(function (input) {
input.addEventListener('change', handleColorPickerUpdate);
});
function updateShareInput(newStr, presetThemeId) {
if (!newStr) newStr = '#4D394B,#3E313C,#4C9689,#FFFFFF,#3E313C,#FFFFFF,#38978D,#EB4D5C';
if (!presetThemeId) presetThemeId = 'aubergine';
shareInput.value = newStr;
var evt = new CustomEvent('change');
shareInput.dispatchEvent(evt);
localStorage.setItem('slack-demo-theme', newStr);
if (presetThemeId) {
document.getElementById(presetThemeId).checked = true;
localStorage.setItem('slack-demo-theme-id', presetThemeId);
} else {
localStorage.removeItem('slack-demo-theme-id');
}
}
function generateShareString() {
var shareArr = [];
colorPickers.forEach(function (input) {
var colorHex = window.getComputedStyle(document.body).getPropertyValue('--' + input.id).trim();
input.value = colorHex;
var hexcodeDiv = document.querySelectorAll('.main__hexcode[data-color=\'' + input.id + '\']');
hexcodeDiv[0].value = colorHex;
shareArr.push(colorHex);
});
var themeStr = shareArr.join(',');
if (shareInput.value.toUpperCase() !== themeStr.toUpperCase()) updateShareInput(themeStr);
}
function handleShareUpdate() {
var newShareArr = shareInput.value.split(',');
newShareArr.forEach(function (hexcode, i) {
var trimmedHex = hexcode.trim();
var colorPicker = colorPickers[i];
if (colorPicker.value === trimmedHex || !/^#[0-9a-f]{3}[0-9a-f]{3}?$/i.test(trimmedHex)) return;
colorPicker.value = trimmedHex;
var evt = new CustomEvent('change');
colorPicker.dispatchEvent(evt);
});
}
shareInput.addEventListener('keyup', handleShareUpdate);
shareInput.addEventListener('change', handleShareUpdate);
function handleHexCodeInputChange() {
var hexCode = this.value;
if (/^#[0-9a-f]{3}[0-9a-f]{3}?$/i.test(hexCode)) {
var colorPicker = document.getElementById(this.getAttribute('data-color'));
colorPicker.value = hexCode;
var evt = new CustomEvent('change');
colorPicker.dispatchEvent(evt);
}
}
hexCodeInputs.forEach(function (input) {
['keyup', 'change'].forEach(function (evt) {
input.addEventListener(evt, handleHexCodeInputChange);
});
});
function updateTheme() {
var hexString = undefined;
switch (this.id) {
case 'aubergine':
hexString = '#4D394B,#3E313C,#4C9689,#FFFFFF,#3E313C,#FFFFFF,#38978D,#EB4D5C';
break;
case 'hoth':
hexString = '#F8F8FA,#F8F8FA,#CAD1D9,#FFFFFF,#FFFFFF,#383F45,#60D156,#FF8669';
break;
case 'monument':
hexString = '#0D7E83,#076570,#F79F66,#FFFFFF,#D37C71,#FFFFFF,#F79F66,#F15340';
break;
case 'chocolate':
hexString = '#544538,#42362B,#5DB09D,#FFFFFF,#4A3C30,#FFFFFF,#FFFFFF,#5DB09D';
break;
case 'ochin':
hexString = '#303E4D,#2C3849,#6698C8,#FFFFFF,#4A5664,#FFFFFF,#94E864,#78AF8F';
break;
case 'workhard':
hexString = '#4D5250,#444A47,#D39B46,#FFFFFF,#434745,#FFFFFF,#99D04A,#DB6668';
break;
case 'solanum':
hexString = '#4F2F4C,#452842,#8C5888,#FFFFFF,#3E313C,#FFFFFF,#D0FF00,#889100';
break;
case 'brinjal':
hexString = '#4F2F4C,#452842,#8C5888,#FFFFFF,#3E313C,#FFFFFF,#00FFB7,#DE4C0D';
break;
}
updateShareInput(hexString, this.id);
}
radioInputs.forEach(function (radio) {
radio.addEventListener('click', updateTheme);
});
updateShareInput(localStorage.getItem('slack-demo-theme'), localStorage.getItem('slack-demo-theme-id'));
//# sourceURL=pen.js
</script>
</body></html>
