<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>@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700,900');
$white: #fff;
$padding: 18px;
$item-spacing: 8px;
%field {
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;
&:focus,
&:hover,
&:active {
outline: none;
}
}
.slack {
width: 100%;
height: 100%;
display: flex;
@supports (display: grid) {
display: grid;
grid-template-columns: 75px 250px 1fr;
grid-template-rows: 1fr;
}
}
.teams {
width: 75px;
position: relative;
height: 100%;
background: var(--column-bg, #ae0001);
&__list {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
background-color: rgba(#000, 0.4);
}
&__item {
counter-increment: team-counter;
font-size: 0.8rem;
color: $white;
text-align: center;
&:after {
content: '⌘'counter(team-counter);
}
}
&__button {
position: relative;
display: flex;
justify-content: center;
align-items: center;
margin: 1.4rem 0 0.5rem;
width: 40px;
height: 40px;
background: rgba($white, 0.1);
text-decoration: none;
border-radius: 5px;
line-height: 1;
color: rgba($white, 0.6);
font-size: 20px;
font-weight: 700;
&--active {
color: $white;
background: rgba($white, 0.4);
&:before {
content: "";
position: absolute;
left: -20px;
top: 0;
width: 7px;
height: 100%;
background: $white;
opacity: 0.7;
border-radius: 3px;
}
}
&:hover {
box-shadow: 0 0 0 5px rgba($white, 0.2);
}
}
}
.team-menu {
width: 100%;
display: flex;
justify-content: space-between;
padding: $padding $padding 0;
&:hover {
background: var(--menu-bg-hover, #680001);
}
&__name {
font-size: 18px;
font-weight: 900;
color: var(--text-color, $white);
}
&__status {
font-size: 15px;
line-height: 1.8;
color: var(--text-color, $white);
&:before {
content: "";
display: inline-block;
margin-right: 0.2rem;
width: 9px;
height: 9px;
background: var(--active-presence, #00FFBA);
border-radius: 50%;
}
}
&__username {
opacity: 0.6;
}
&__alarm {
display: flex;
font-size: 25px;
color: var(--text-color, $white);
}
}
.sidebar {
position: relative;
z-index: 1;
width: 250px;
background: var(--column-bg, #ae0001);
color: var(--text-color, $white);
}
.threads {
margin: 0.6rem 0;
padding: 0 $padding;
opacity: 0.7;
&__icon {
margin-right: 3px;
}
}
.channels,
.dm {
margin: 0.5rem 0 1.5rem;
padding-right: $padding;
&__button,
&__heading {
padding: 0 0 0 $padding;
width: 100%;
color: var(--text-color, $white);
}
&__number {
display: inline-block;
position: relative;
top: -1px;
margin-left: 2px;
font-size: 13px;
opacity: 0.5;
}
&__add {
font-size: 20px;
color: var(--text-color, $white);
}
&__heading {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 14px;
font-weight: 600;
line-height: 2.1;
text-transform: uppercase;
opacity: 0.6;
}
&__button {
padding: 4px 0 4px $padding;
display: flex;
align-items: center;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
span {
opacity: 0.7;
}
&:before {
padding: 0 0.3rem;
}
&:hover {
background: var(--hover-item, #BE0002);
}
&--active,
&--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;
}
&--online {
&:before {
content: "\f21b";
color: var(--active-presence, #00FFBA);
}
}
&--slackbot {
&:before {
content: "\f141";
color: var(--active-presence, #00FFBA);
font-size: 0.75rem;
}
}
&--active {
&.dm__button--online,
&.dm__button--slackbot {
&:before {
color: var(--active-item-text, #680001);
}
}
}
}
}
.main {
position: relative;
height: 100%;
flex: 1;
&__header {
position: absolute;
top: 0;
left: 0;
width: 100%;
display: flex;
justify-content: space-between;
padding: $padding;
box-shadow: 0 1px 4px rgba(0,0,0,.15);
background: $white;
}
&__h1 {
flex: 1;
font-size: 1.4rem;
font-weight: 900;
text-align: center;
}
&__h2 {
font-size: 1.5rem;
font-weight: 900;
}
&__h3 {
margin-bottom: 1rem;
font-size: 1.1rem;
font-weight: 900;
}
&__content {
position: relative;
top: 60px;
height: calc(100vh - 60px);
overflow-y: scroll;
}
&__container {
padding: 2rem;
margin: 0 auto;
width: 55%;
max-width: 860px;
min-width: 800px;
}
&__section {
padding: 2rem 0 0;
border-bottom: 1px solid #DDD;
&:last-of-type {
border-bottom: 0;
}
}
&__field {
position: relative;
margin-top: 1rem;
width: 25%;
max-width: 25%;
min-width: 25%;
padding-right: $padding;
&--full {
max-width: initial;
width: 100%;
margin-top: 2rem;
}
}
&__label {
font-weight: 700;
display: block;
font-size: 1.05rem;
line-height: 1.5rem;
}
&__color-pickers {
position: relative;
display: flex;
flex-wrap: wrap;
width: 98%;
}
&__color-field {
width: 100%;
display: flex;
margin-top: 0.25rem;
border: 1px solid #C5C5C5;
border-radius: .25rem;
padding: 0.25rem;
}
&__themes {
display: flex;
flex-wrap: wrap;
margin-top: 1rem;
}
&__colorpicker {
visibility: hidden;
}
&__hexcode {
@extend %field;
flex: 1;
border: none;
min-width: 0;
&:focus {
outline: none;
}
}
&__share-input {
@extend %field;
display: block;
width: 100%;
padding: 0 .75rem;
margin: 0.25rem 0 5rem;
border: 1px solid #C5C5C5;
border-radius: .25rem;
height: 40px;
line-height: 40px;
&:hover,
&:focus,
&:active {
border-color: #2780F8;
outline: none;
}
&:focus {
box-shadow: 0 0 7px rgba(39,128,248,.15);
}
}
&__input-wrapper {
width: 1.9rem;
height: 1.9rem;
display: inline-block;
padding: 0;
cursor: pointer;
border: 1px solid #C5C5C5;
border-radius: .25rem;
&--column-bg {
background: var(--column-bg, #ae0001);
}
&--menu-bg-hover {
background: var(--menu-bg-hover, #680001);
}
&--active-item {
background: var(--active-item, #D3A625);
}
&--active-item-text {
background: var(--active-item-text, #680001);
}
&--hover-item {
background: var(--hover-item, #BE0002);
}
&--text-color {
background: var(--text-color, $white);
}
&--active-presence {
background: var(--active-presence, #00FFBA);
}
&--mention-badge {
background: var(--mention-badge, #DE4C0D);
}
}
}
.radio {
margin: 0.5rem 4rem 2rem 0;
width: 130px;
cursor: pointer;
text-transform: capitalize;
&__input {
min-width: 15px;
margin: 0 0.75rem 0 0;
min-height: 1.5rem;
line-height: 1.5;
}
&__wrapper {
display: flex;
line-height: 1.5;
}
&__img {
position: relative;
border-radius: 6px;
margin: 0 0 0.5rem;
box-shadow: 0 1px 1px rgba(0,0,0,.2);
background-size: cover;
background-repeat: no-repeat;
&:after {
content: "";
display: block;
padding-top: 60/110 * 100%;
height: 0;
}
&--solanum {
background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/60485/solanum.png');
}
&--chocolate {
background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/60485/chocolate.png');
}
&--aubergine {
background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/60485/aubergine.png');
}
&--ochin {
background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/60485/ochin.png');
}
&--brinjal {
background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/60485/brinjal.png');
}
&--hoth {
background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/60485/hoth.png');
}
&--workhard {
background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/60485/workhard.png');
}
&--monument {
background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/60485/monument.png');
}
}
}
const colorPickers = document.querySelectorAll('.main__colorpicker');
const hexCodeInputs = document.querySelectorAll('.main__hexcode');
const shareInput = document.getElementById('share-colors');
const radioInputs = document.querySelectorAll('.radio__input');
function handleColorPickerUpdate() {
document.documentElement.style.setProperty(`--${this.id}`, this.value);
const hexcodeDiv = document.querySelectorAll(`.main__hexcode[data-color='${this.id}']`);
hexcodeDiv[0].value = this.value;
generateShareString();
}
colorPickers.forEach(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;
const 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() {
let shareArr = [];
colorPickers.forEach(input => {
const colorHex = window.getComputedStyle(document.body).getPropertyValue(`--${input.id}`).trim();
input.value = colorHex;
const hexcodeDiv = document.querySelectorAll(`.main__hexcode[data-color='${input.id}']`);
hexcodeDiv[0].value = colorHex;
shareArr.push(colorHex);
});
const themeStr = shareArr.join(',');
if (shareInput.value.toUpperCase() !== themeStr.toUpperCase()) updateShareInput(themeStr);
}
function handleShareUpdate() {
const newShareArr = shareInput.value.split(',');
newShareArr.forEach((hexcode, i) => {
const trimmedHex = hexcode.trim();
const colorPicker = colorPickers[i];
if (colorPicker.value === trimmedHex || !/^#[0-9a-f]{3}[0-9a-f]{3}?$/i.test(trimmedHex)) return;
colorPicker.value = trimmedHex;
const evt = new CustomEvent('change');
colorPicker.dispatchEvent(evt);
});
}
shareInput.addEventListener('keyup', handleShareUpdate);
shareInput.addEventListener('change', handleShareUpdate);
function handleHexCodeInputChange() {
const hexCode = this.value;
if (/^#[0-9a-f]{3}[0-9a-f]{3}?$/i.test(hexCode)) {
const colorPicker = document.getElementById(this.getAttribute('data-color'));
colorPicker.value = hexCode;
const evt = new CustomEvent('change');
colorPicker.dispatchEvent(evt);
}
}
hexCodeInputs.forEach(input => {
['keyup', 'change'].forEach(evt => {
input.addEventListener(evt, handleHexCodeInputChange);
});
});
function updateTheme() {
let hexString;
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(radio => {
radio.addEventListener('click', updateTheme);
});
updateShareInput(localStorage.getItem('slack-demo-theme'), localStorage.getItem('slack-demo-theme-id'));
External CSS
External JavaScript
This Pen doesn't use any external JavaScript resources.