123

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.

            
              <!-- Discord App template made by Odin: https://codepen.io/thesbros/pen/vxpMPp -->
<main class="container">
	<aside class="servers">
		<div class="servers-collection">
			<div class="server focusable server-friends unread" role="button" aria-label="Friends unread">
				<div class="server-icon"><svg><use xlink:href="#icon-friends" /></svg></div>
			</div>
		</div>
		
		<div class="servers-collection">
			<div class="server focusable unread" role="button" aria-label="Discord Developers unread">
				<div class="server-icon"><img src="https://cdn.discordapp.com/icons/41771983423143937/edc44e98a690a1f76c5ddec68a0a6b9e.png" /></div>
			</div>
		</div>
		
		<div class="servers-collection">
			<div class="server focusable active" role="button" aria-label="My Server" aria-selected="true">
				<div class="server-icon"><img src="https://discordapp.com/assets/0e291f67c9274a1abdddeb3fd919cbaa.png" /></div>
			</div>
		</div>
	</aside>
	
	<aside class="channels">
		<header class="channels-header focusable">
			<h3 role="header" class="channels-header-name">My Server</h3>
			<svg role="button" aria-label="Dropdown" class="channels-header-dropdown"><use xlink:href="#icon-dropdown" /></svg>
		</header>
				
		<section class="channels-list">
			<header class="channels-list-header focusable">
				<h5>Text Channels</h5>
			</header>
			
			<ul class="channels-list-text">
				<li class="channel focusable channel-text active">
					<span class="channel-name">general</span>
					<button class="button" role="button" aria-label="Invite"><svg><use xlink:href="#icon-invite" /></svg></button>
					<button class="button" role="button" aria-label="settings"><svg><use xlink:href="#icon-channel-settings" /></svg></button>
				</li>
				
				<li class="channel focusable channel-text">
					<span class="channel-name">help</span>
					<button class="button" role="button" aria-label="Invite"><svg><use xlink:href="#icon-invite" /></svg></button>
					<button class="button" role="button" aria-label="settings"><svg><use xlink:href="#icon-channel-settings" /></svg></button>
				</li>
			</ul>
			
			<header class="channels-list-header focusable">
				<h5>Voice Channels</h5>
			</header>
		</section>
		
		<footer class="channels-footer">
			<img class="avatar" alt="Avatar" src="https://discordapp.com/assets/0e291f67c9274a1abdddeb3fd919cbaa.png" />
			<div class="channels-footer-details">
				<span class="username">yourself</span>
				<span class="tag">#0001</span>
			</div>
			<div class="channels-footer-controls button-group">
				<button role="button" aria-label="Mute" class="button button-mute"><svg><use xlink:href="#icon-mute" /></svg></button>
				<button role="button" aria-label="Deafen" class="button button-deafen"><svg><use xlink:href="#icon-deafen" /></svg></button>
				<button role="button" aria-label="Settings" class="button button-settings"><svg><use xlink:href="#icon-settings" /></svg></button>
			</div>
		</footer>
	</aside>
		
	<div class="vert-container">
		<menu type="toolbar" class="menu">
			<h2 class="menu-name">general</h2>
		</menu>

		<section class="chat">
		<h2 class="chat-username">User testing collapsible sections:</h2>
		<button class="collapsible">
<img src=https://media.discordapp.net/attachments/268811439588900865/342358492092432386/picturetopeople.org-342367c4cc4694e2272650737d1d728d1046354574feb6e686.png alt="Rules" height="50">
</button>
		<div class="content">

<p>  1) Any harmful material (viruses, pornographic images/links, links to Discord servers that involve the aforementioned, etc.) results in an immediate and permanent ban.</p>

<p>2) Inappropriate language (excessive swears, racial slurs, deliberate attempts to instigate negative reactions, etc) will be removed and the User(s) in question will be given a written warning, kicked or banned depending on severity.</p>

<p>Conversations regarding a specific aspect of discord should go to their relevant channels (I want my phone to do this! --> go to #mobile) otherwise they  are directed to #feedback-discussions  as appropriate.  User(s) that repeatedly post off-topic in other channels deliberately will be kicked or banned depending on severity. </p>

<p>4) Repeatedly (@)mentioning the Developers, Support or the Bot Devs can result in a kick/ban at that persons discretion.  General rule of thumb: If you wouldn't want someone messaging you like that, don't do it to us.</p>

<p>5)  No advertising Discord Servers (any server listed in #discord-resources is OK to link to), or other programs, websites or services.</p>

<p>6)  While driving, if your car is not going to stay in the lane it is currently in, use your turn signal.</p>

<p>7)  This list does not constitute the full list of rules. At all times try to use common sense and good judgement for any action you're about to take.</p>
</div>
		<button class="collapsible">
<img src=https://media.discordapp.net/attachments/268811439588900865/342358651069267979/picturetopeople.org-900e5e9831036fbcbea8203fb3bab122f20c0be3cb31d8f628.png alt="Legal Stuff" height="50">
</button>
		<div class="content">
<p>Use of the service and bot is governed by our TOS (https://discordapp.com/tos#feedback).  All information submitted here is considered Feedback under the TOS.  For reference, the feedback provision is as follows:</p>

<p>We appreciate hearing from our users and welcome your comments regarding the Service. Please be advised, however, that if you send to us any comments, suggestions or recommendations regarding the Service (“Feedback“ ) you hereby assign to us all rights, title and interest in and to the Feedback. Accordingly, your Feedback will not be subject to any obligation of confidentiality and we will not be liable to you for any use or disclosure of any Feedback. Also, we will be entitled to unrestricted use of the Feedback for any purpose whatsoever, commercial or otherwise, without compensation to you or any other person.</p>
</div>
		<h1 class="chat-text">
			<p>Possible notation: curly + square to contain title</p>
			
			<p> { [TITLE] stuff } </p>
			</h1>

			
		</section>
	</div>
</main>


<!-- ICONS -->
<svg id="icon-friends" viewBox="-289 382 32 27.1"><style id="style3">.st0{fill:#FFFFFF;} .st1{opacity:0.6;}</style><g id="g4145" fill="#fff"><path id="path5" d="M-273 409.1c-4.1 0-6.8-.6-7.9-1.7-.5-.6-.6-1.1-.6-1.3 0-.7.1-2.9.6-3.8.1-.3.5-1 4.5-2.4-1.6-1.4-2.6-4-2.6-7.1 0-4.2 2.3-7 5.9-7.1h.1c3.6.1 5.9 2.8 5.9 7.1 0 3.1-1 5.7-2.6 7.1 4 1.4 4.4 2.1 4.5 2.4.4.9.5 3.1.6 3.8 0 .2 0 .7-.6 1.3-1.1 1.1-3.7 1.7-7.8 1.7zm0-2c5.1 0 6.2-.9 6.4-1.1-.1-1.1-.2-2.3-.3-2.7-.6-.4-2.9-1.3-4.8-1.9l-.7-.2-.1-2 .7-.3c1.7-.6 2.8-3.1 2.8-6.1 0-3.1-1.5-5-3.9-5.1-2.5 0-4 2-4 5.1 0 3 1.1 5.5 2.8 6.1l.7.3-.1 2-.7.2c-1.9.6-4.2 1.5-4.8 1.9-.1.4-.3 1.6-.3 2.7.1.2 1.3 1.1 6.3 1.1z" class="st0"/><g id="g7" class="st1" opacity=".6"><path id="path9" d="M-257 402.4c0-.7-.1-2.9-.6-3.8-.1-.3-.5-1-4.5-2.4 1.6-1.4 2.6-4 2.6-7.1 0-4.2-2.3-7-5.9-7.1h-.1c-1.9 0-3.5.8-4.5 2.2.6.3 1.2.6 1.8 1 .7-.8 1.6-1.3 2.8-1.3 2.4 0 3.9 2 3.9 5.1 0 3-1.1 5.5-2.8 6.1l-.7.3.1 2 .7.2c1.9.6 4.3 1.5 4.8 1.9.1.4.3 1.6.3 2.7-.2.2-1 .8-3.8 1 .1.6.2 1.2.2 2 2.5-.2 4.2-.8 5-1.6.7-.5.7-1 .7-1.2z" class="st0"/><path id="path11" d="M-287 402.3c.1-1.1.2-2.3.3-2.7.6-.4 2.9-1.3 4.8-1.9l.7-.2.1-2-.7-.3c-1.6-.6-2.8-3.1-2.8-6.1 0-3.1 1.5-5 4-5.1 1.2 0 2.1.5 2.8 1.3.5-.4 1.1-.8 1.8-1-1-1.4-2.6-2.2-4.5-2.2h-.1c-3.6 0-5.9 2.8-5.9 7.1 0 3.1 1 5.7 2.6 7.1-4 1.4-4.4 2.1-4.5 2.4-.4.9-.5 3.1-.6 3.8 0 .2 0 .7.6 1.3.8.9 2.5 1.4 5.1 1.6 0-.7.1-1.4.2-2-2.9-.3-3.7-.9-3.9-1.1z" class="st0"/></g></g></svg>
<svg id="icon-mute" viewBox="0 0 16 16"><path fill="#5D6063" d="M12.5,8v1c0,2.2-1.8,4-4,4h-1c-2.2,0-4-1.8-4-4V8h-1v1 c0,2.8,2.2,5,5,5v1H7c-0.3,0-0.5,0.2-0.5,0.5C6.5,15.8,6.7,16,7,16h2c0.3,0,0.5-0.2,0.5-0.5C9.5,15.2,9.3,15,9,15H8.5v-1 c2.8,0,5-2.2,5-5V8H12.5z M8,12c1.9,0,3.5-1.6,3.5-3.5v-5C11.5,1.6,9.9,0,8,0C6.1,0,4.5,1.6,4.5,3.5v5C4.5,10.4,6.1,12,8,12z M5.5,3.5C5.5,2.1,6.6,1,8,1c1.4,0,2.5,1.1,2.5,2.5v5C10.5,9.9,9.4,11,8,11c-1.4,0-2.5-1.1-2.5-2.5V3.5z"/></svg>
<svg id="icon-deafen" viewBox="0 0 16 16"><path fill="#5D6063" d="M15.9,9C16,8.7,16,8.3,16,8c0-4.4-3.6-8-8-8C3.6,0,0,3.6,0,8 c0,0.3,0,0.7,0.1,1h0C0,9.2,0,9.3,0,9.5v4C0,14.3,0.7,15,1.5,15h2C4.3,15,5,14.3,5,13.5v-4C5,8.7,4.3,8,3.5,8h-2 C1.3,8,1.2,8,1,8.1C1,8.1,1,8,1,8c0-3.9,3.1-7,7-7c3.9,0,7,3.1,7,7c0,0,0,0.1,0,0.1C14.8,8,14.7,8,14.5,8h-2C11.7,8,11,8.7,11,9.5 v4c0,0.8,0.7,1.5,1.5,1.5h2c0.8,0,1.5-0.7,1.5-1.5v-4C16,9.3,16,9.2,15.9,9L15.9,9z M1.5,9h2C3.8,9,4,9.2,4,9.5v4 C4,13.8,3.8,14,3.5,14h-2C1.2,14,1,13.8,1,13.5v-4C1,9.2,1.2,9,1.5,9z M15,13.5c0,0.3-0.2,0.5-0.5,0.5h-2c-0.3,0-0.5-0.2-0.5-0.5 v-4C12,9.2,12.2,9,12.5,9h2C14.8,9,15,9.2,15,9.5V13.5z"/></svg>
<svg id="icon-settings" viewBox="0 0 16 16"><path fill="#5D6063" d="M8,5C6.3,5,5,6.3,5,8c0,1.7,1.3,3,3,3c1.7,0,3-1.3,3-3 C11,6.3,9.7,5,8,5z M8,10c-1.1,0-2-0.9-2-2c0-1.1,0.9-2,2-2s2,0.9,2,2C10,9.1,9.1,10,8,10z M16,8c0-1-0.8-1.9-1.8-2 c-0.1-0.3-0.3-0.7-0.4-1c0.7-0.8,0.6-1.9-0.1-2.7c-0.7-0.7-1.9-0.8-2.7-0.1c-0.3-0.2-0.6-0.3-1-0.4C9.9,0.8,9,0,8,0 C7,0,6.1,0.8,6,1.8C5.7,1.9,5.3,2.1,5,2.2C4.2,1.6,3.1,1.6,2.3,2.3C1.6,3.1,1.6,4.2,2.2,5C2.1,5.3,1.9,5.7,1.8,6C0.8,6.1,0,7,0,8 c0,1,0.8,1.9,1.8,2c0.1,0.3,0.3,0.7,0.4,1c-0.7,0.8-0.6,1.9,0.1,2.7c0.7,0.7,1.9,0.8,2.7,0.1c0.3,0.2,0.6,0.3,1,0.4 C6.1,15.2,7,16,8,16c1,0,1.9-0.8,2-1.8c0.3-0.1,0.7-0.3,1-0.4c0.8,0.7,1.9,0.6,2.7-0.1c0.7-0.7,0.8-1.9,0.1-2.7 c0.2-0.3,0.3-0.6,0.4-1C15.2,9.9,16,9,16,8z M13.4,9c-0.1,0.8-0.5,1.5-0.9,2.1l0.4,0.4c0.4,0.4,0.4,1,0,1.4c-0.4,0.4-1,0.4-1.4,0 l-0.4-0.4C10.5,13,9.8,13.3,9,13.4V14c0,0.6-0.4,1-1,1c-0.6,0-1-0.4-1-1v-0.6c-0.8-0.1-1.5-0.5-2.1-0.9l-0.4,0.4 c-0.4,0.4-1,0.4-1.4,0c-0.4-0.4-0.4-1,0-1.4l0.4-0.4C3,10.5,2.7,9.8,2.6,9H2C1.4,9,1,8.6,1,8c0-0.6,0.4-1,1-1h0.6 C2.7,6.2,3,5.5,3.5,4.9L3.1,4.5c-0.4-0.4-0.4-1,0-1.4c0.4-0.4,1-0.4,1.4,0l0.4,0.4C5.5,3,6.2,2.7,7,2.6V2c0-0.6,0.4-1,1-1 c0.6,0,1,0.4,1,1v0.6c0.8,0.1,1.5,0.5,2.1,0.9l0.4-0.4c0.4-0.4,1-0.4,1.4,0c0.4,0.4,0.4,1,0,1.4l-0.4,0.4C13,5.5,13.3,6.2,13.4,7 H14c0.6,0,1,0.4,1,1c0,0.6-0.4,1-1,1H13.4z"/></svg>
<svg id="icon-dropdown" viewBox="0 0 18 18"><style>.dd{stroke:#ABADAF;stroke-width:2px;stroke-dashoffset:1;stroke-dasharray:inherit}</style><path class="dd" stroke="#FFF" d="M4.5 4.5l9 9" stroke-linecap="round"></path><path class="dd" stroke="#FFF" d="M13.5 4.5l-9 9" stroke-linecap="round"></path></svg>
<svg id="icon-invite" viewBox="0 0 16 16"><path fill="#fff" d="M6.3,3.4L8,1.7v9.8C8,11.8,8.2,12,8.5,12C8.8,12,9,11.8,9,11.5V1.7l1.7,1.7c0.2,0.2,0.5,0.2,0.7,0c0.2-0.2,0.2-0.5,0-0.7L8.9,0.2c0,0,0,0,0-0.1C8.8,0,8.6,0,8.5,0c0,0,0,0,0,0c0,0,0,0,0,0C8.4,0,8.2,0,8.1,0.1c0,0,0,0,0,0.1L5.6,2.7c-0.2,0.2-0.2,0.5,0,0.7C5.8,3.5,6.1,3.5,6.3,3.4z M14,4h-1.5v1h1C13.8,5,14,5.2,14,5.5v9c0,0.3-0.2,0.5-0.5,0.5h-10C3.2,15,3,14.8,3,14.5v-9C3,5.2,3.2,5,3.5,5h1V4H3C2.4,4,2,4.4,2,5v10c0,0.6,0.4,1,1,1h11c0.6,0,1-0.4,1-1V5C15,4.4,14.6,4,14,4z"/></svg>
<svg id="icon-channel-settings" viewBox="0 0 16 16"><path fill="#fff" d="M8,5C6.3,5,5,6.3,5,8c0,1.7,1.3,3,3,3c1.7,0,3-1.3,3-3 C11,6.3,9.7,5,8,5z M8,10c-1.1,0-2-0.9-2-2c0-1.1,0.9-2,2-2s2,0.9,2,2C10,9.1,9.1,10,8,10z M16,8c0-1-0.8-1.9-1.8-2 c-0.1-0.3-0.3-0.7-0.4-1c0.7-0.8,0.6-1.9-0.1-2.7c-0.7-0.7-1.9-0.8-2.7-0.1c-0.3-0.2-0.6-0.3-1-0.4C9.9,0.8,9,0,8,0 C7,0,6.1,0.8,6,1.8C5.7,1.9,5.3,2.1,5,2.2C4.2,1.6,3.1,1.6,2.3,2.3C1.6,3.1,1.6,4.2,2.2,5C2.1,5.3,1.9,5.7,1.8,6C0.8,6.1,0,7,0,8 c0,1,0.8,1.9,1.8,2c0.1,0.3,0.3,0.7,0.4,1c-0.7,0.8-0.6,1.9,0.1,2.7c0.7,0.7,1.9,0.8,2.7,0.1c0.3,0.2,0.6,0.3,1,0.4 C6.1,15.2,7,16,8,16c1,0,1.9-0.8,2-1.8c0.3-0.1,0.7-0.3,1-0.4c0.8,0.7,1.9,0.6,2.7-0.1c0.7-0.7,0.8-1.9,0.1-2.7 c0.2-0.3,0.3-0.6,0.4-1C15.2,9.9,16,9,16,8z M13.4,9c-0.1,0.8-0.5,1.5-0.9,2.1l0.4,0.4c0.4,0.4,0.4,1,0,1.4c-0.4,0.4-1,0.4-1.4,0 l-0.4-0.4C10.5,13,9.8,13.3,9,13.4V14c0,0.6-0.4,1-1,1c-0.6,0-1-0.4-1-1v-0.6c-0.8-0.1-1.5-0.5-2.1-0.9l-0.4,0.4 c-0.4,0.4-1,0.4-1.4,0c-0.4-0.4-0.4-1,0-1.4l0.4-0.4C3,10.5,2.7,9.8,2.6,9H2C1.4,9,1,8.6,1,8c0-0.6,0.4-1,1-1h0.6 C2.7,6.2,3,5.5,3.5,4.9L3.1,4.5c-0.4-0.4-0.4-1,0-1.4c0.4-0.4,1-0.4,1.4,0l0.4,0.4C5.5,3,6.2,2.7,7,2.6V2c0-0.6,0.4-1,1-1 c0.6,0,1,0.4,1,1v0.6c0.8,0.1,1.5,0.5,2.1,0.9l0.4-0.4c0.4-0.4,1-0.4,1.4,0c0.4,0.4,0.4,1,0,1.4l-0.4,0.4C13,5.5,13.3,6.2,13.4,7 H14c0.6,0,1,0.4,1,1c0,0.6-0.4,1-1,1H13.4z"/></svg>
            
          
!
            
              @import url("https://fonts.googleapis.com/css?family=Roboto:200,400,500");

$body-bg: #121416;
$body-color: #FFF;
$servers-bg: #1E2124;
$channels-bg: #2E3136;
$border-accent: darken($channels-bg, 7.7%);
$chat-bg: #36393E;
$menu-bg: $chat-bg;
$server-bg: $channels-bg;
$server-bg-active: #7289DA;
$server-marker-unread: #8A8E94;
$server-marker-active: #FFF;
$button-bg: #2E3136;
$button-bg-active: lighten($button-bg, 5%);
$chat-spacing-top: 10px;
$chat-spacing-left: 30px;
$chat-spacing-step: 30px;


// GLOBAL
*
{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    
    // we override focus on specific elements
    &:focus
    {
        outline: 0;
    }
}

html, body
{
    height: 100%;
    background: $body-bg;
    color: $body-color;
    font-size: 16px;
    font-family: "Roboto";
}

// CONTAINERS
.container
{
    height: 100%;
    display: flex;
}

.vert-container
{
    display: flex;
    flex: 1;
    flex-direction: column;
}

// SERVERS
.servers
{
    height: 100%;
    background: $servers-bg;
    flex: 0 0 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: auto;
    padding: 18px 0 18px 0;
    
    // no scrollbar
    -ms-overflow-style: none;
    &::-webkit-scrollbar
    {
        display: none;
    }
}

// CHANNELS
.channels
{
    background: $channels-bg;
    display: flex;
    flex-direction: column;
    flex: 0 0 240px;
    
    .channels-header
    {
        cursor: pointer;
        display: flex;
        align-items: center;
        flex: 0 0 56px;
        padding: 28px 24px;
        box-shadow: 0 1px 0 darken($channels-bg, 4.1%), inset 0 -1px 0 rgba(#000, 0.1);
        transition: background 0.15s ease;
        
        .channels-header-dropdown
        {
            width: 18px;
            height: 18px;
            margin-left: auto;
            pointer-events: none;
            
            use
            {
                stroke-dasharray: 7;
                transform-origin: 50%;
                transition: stroke-dasharray 0.2s ease, transform 0.2s ease;
            }
        }
        
        &:hover, &:focus
        {
            background: darken($channels-bg, 2.5%);
        }
        
        &:focus use
        {
            stroke-dasharray: 14;
            transform: rotate(-90deg);
        }
    }
    
    .channels-list-text, .channels-list-voice
    {
        margin: 0 -20px 0 -20px;
    }
    
    .channels-header-name
    {
        font-size: 1rem;
        font-weight: 500;
    }
    
    .channel
    {
        cursor: pointer;
        display: flex;
        align-items: center;
        padding: 8px 20px 10px 20px;
        opacity: 0.3;
        width: 100%;
                
        .button
        {
            display: none;
            opacity: 0.2;
            
            &:hover, &:focus
            {
                opacity: 1;
            }
        }
        
        &.active, &:hover, &:focus
        {
            opacity: 1;
            
            .button { display: block; }
        }
        
        .channel-name
        {
            font-size: 0.9rem;
            font-weight: 300;
        }
        
        .button:first-of-type
        {
            margin-left: auto;
            margin-right: 8px;
        }
        
        .button
        {
            width: 16px;
            height: 16px;
        }
    }
    
    .channel-text
    {
        position: relative;
        
        &.active, &:hover, &:focus
        {
            background: linear-gradient(to right, #282b30 85%, #2e3136);
            
            &::before
            {
                content: " ";
                width: 2px;
                height: 100%;
                position: absolute;
                left: 0;
                background: #7289DA;
            }
        }
        
        &:not(.active) { &:focus::before, &:hover::before { opacity: 0.25; } }
        
        .channel-name
        {
            @extend .hash-before;
            &::before { font-weight: 400 !important; }
        }
    }
    
    .channels-list
    {
        flex: 1 1;
        overflow-y: auto;
        padding: 0 20px;
        
        ul
        {
            list-style: none;
        }
        
        .channels-list-header
        {
            cursor: pointer;
            margin-top: 20px;
            text-transform: uppercase;
            color: rgba($body-color, 0.3);
            font-size: 0.87rem;
            letter-spacing: 0.04rem;
            transition: color 0.2s linear;
            line-height: 30px;
            position: relative;
            
            &:hover, &:focus
            {
                color: $body-color;
                
                &::after
                {
                    opacity: 1;
                }
            }
            
            &::after
            {
                position: absolute;
                top: 10px;
                right: 0;
                content: " ";
                width: 10px;
                height: 10px;
                opacity: 0.3;
                transition: opacity 0.2s linear;
                background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMCAxMCI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTguOTksMy45OUg2LjAxVjEuMDFDNi4wMSwwLjQ1Miw1LjU1OCwwLDUsMFMzLjk5LDAuNDUyLDMuOTksMS4wMVYzLjk5SDEuMDFDMC40NTIsMy45OSwwLDQuNDQyLDAsNWMwLDAuNTU4LDAuNDUyLDEuMDEsMS4wMSwxLjAxSDMuOTlWOC45OUMzLjk5LDkuNTQ4LDQuNDQyLDEwLDUsMTBzMS4wMS0wLjQ1MiwxLjAxLTEuMDFWNi4wMUg4Ljk5QzkuNTQ4LDYuMDEsMTAsNS41NTgsMTAsNUMxMCw0LjQ0Miw5LjU0OCwzLjk5LDguOTksMy45OXoiLz48L3N2Zz4=) no-repeat 50%;
            }
        }
    }
    
    .channels-footer
    {
        display: flex;
        align-items: center;
        flex: 0 0 70px;
        margin-top: auto;
        background: darken($channels-bg, 2.35%);
        border-top: 1px solid $border-accent;
        padding: 0 10px;
        
        .channels-footer-details
        {
            margin-left: 10px;
        }
        
        .channels-footer-controls
        {
            margin-left: auto;
            border: 1px solid $border-accent;
            border-radius: 4px;
            display: flex;
            
            .button
            {
                display: block;
                width: 32px;
                height: 32px;
                
                svg { width: 16px; }
                
                &:hover svg, &:focus svg { filter: brightness(200%); }
            }
        }
        
        .avatar
        {
            width: 30px;
            height: 30px;
            border-radius: 50%;
        }
        
        .username, .tag { display: block; font-weight: 300; }

        .username
        {
            font-size: 0.9rem;
        }
        
        .tag
        {
            color: rgba($body-color, 0.45);
            font-size: 0.7rem;
        }
    }
}

// MENU
.menu
{
    flex: 0 0 57px;
    padding: 0 20px 0 20px;
    background: $menu-bg;
    border-bottom: 1px solid darken($menu-bg, 7.5%);
    display: flex;
    align-items: center;
    
    .menu-name
    {
        font-weight: bold;
        font-size: 1.3rem;
        letter-spacing: 0.05rem;
        
        @extend .hash-before;
    }
}

.hash-before::before
{
    content: "#";
    margin-right: 2px;
    font-weight: 300;
    color: #8A8E94;
}

// CHAT
.chat
{
    background: $chat-bg;
    flex: 1;
    
    .chat-username
    {
		padding-top: $chat-spacing-top;
        font-weight: bold;
        font-size: 1.3rem;
        letter-spacing: 0.05rem;
		padding-left: $chat-spacing-left;
    }
	
	.chat-text
	{
		padding-top: $chat-spacing-top;
		font-weight: normal;
        font-size: 1.3rem;
        letter-spacing: 0.05rem;
		padding-left: $chat-spacing-left+$chat-spacing-step;
	}
}

// SERVER
.server
{
    width: 50px;
    height: 50px;
    border-radius: 25px;
    background-color: $server-bg;
    background-repeat: no-repeat;
    margin-bottom: 8px;
    cursor: pointer;
    position: relative;
    
    &:not(.active)
    {
        animation: server-hover-out 0.6s ease;
        
        &:hover, &:focus
        {
            animation: server-hover-in 0.8s ease forwards;
        }
    }
    
    .server-icon
    {
        border-radius: inherit;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .server-icon > img
    {
        border-radius: inherit;
        max-width: 100%;
    }
    
    &.server-friends
    {
        margin-bottom: 46px;
        text-align: center;
        
        svg { max-width: 60%; max-height: 60%; }
        
        &.active::before { display: none; }
        
        &::after
        {
            content: "2 ONLINE";
            color: rgba($body-color, 0.3);
            pointer-events: none;
            font-weight: 300;
            font-size: 0.65rem;
            position: absolute;
            bottom: -35px;
            left: 3px;
            padding-bottom: 10px;
            border-bottom: 2px solid lighten($servers-bg, 5%);
        }
    }
    
    // unread/active
    &::before
    {
        position: absolute;
        top: 20px;
        left: -15px;
        content: " ";
        display: block;
        width: 10px;
        height: 10px;
        border-radius: 25px;
    }
    
    &.active
    {
        border-radius: 15px;
        background-color: $server-bg-active;
    }
    
    &.unread::before
    {
        background: $server-marker-unread;
    }
    
    &.active::before
    {
        background: $server-marker-active;
        height: 40px;
        top: 5px;
    }
    
    &.active.unread::before { transition: all 0.2s ease-in-out; }
}

// BUTTON
.button
{
    background: $button-bg;
    border: 0;
    color: inherit;
    cursor: pointer;
    font: inherit;
    line-height: normal;
    overflow: visible;
    appearance: none;
    user-select: none;
    
    > svg, > img
    {
        max-width: 100%;
        max-height: 100%;
    }
}

.button-group
{
    .button:focus, .button:active
    {
        background: $button-bg-active;
    }
    
    .button:not(:last-of-type)
    {
        border-right: 1px solid $border-accent;
    }
    
    .button + .button
    {
        box-shadow: inset 1px 0 0 #393c41;
    }
}

// ICONS
svg[id]
{
    width: 0;
    position: absolute;
}

// ANIMATIONS
@keyframes server-hover-in
{
    0% {
        border-radius: 25px;
        background-color: $server-bg;
    }
    
    40% {
        border-radius: 12px;
    }
    
    70% {
        border-radius: 16.7px;
    }
    
    80% {
        background-color: $server-bg-active;
    }
    
    100% {
        border-radius: 15px;
        background-color: $server-bg-active;
    }
}

@keyframes server-hover-out
{
    0% {
        border-radius: 15px;
        background-color: $server-bg-active;
    }
    
    45% {
        border-radius: 25px;
        background-color: $server-bg;
    }
    
    65% {
        border-radius: 25px;
    }
    
    75% {
        border-radius: 23.5px;
    }
    
    100% {
        border-radius: 25px;
    }
}

// Collapsable CSS

.collapsible {
  background: $chat-bg;
  padding: 5px;
  padding-left: $chat-spacing-left + $chat-spacing-step;
  width: 100%;
  border: none;
  border-bottom: 1px solid #333;
  text-align: left;
  outline: none;
}

.active, .collapsible:hover {
  background: $chat-bg;
}

.content {
  padding-left: $chat-spacing-left + $chat-spacing-step + 5;
  display: none;
  overflow: hidden;
  background: $chat-bg;
}
            
          
!
            
              const $ = document.querySelectorAll.bind(document);

$(".focusable, .button").forEach(el => {
	// blur only on mouse click
	// for accessibility, keep focus when keyboard focused
	el.addEventListener("mousedown", e => e.preventDefault());
	el.setAttribute("tabindex", "0");
});

$(".server").forEach(el => {
	el.addEventListener("click", () => {
		const activeServer = $(".server.active")[0];
		activeServer.classList.remove("active");
		activeServer.removeAttribute("aria-selected");
		
		el.classList.add("active");
		el.setAttribute("aria-selected", true);
	});
})

$(".channel-text").forEach(el => {
	el.addEventListener("click", () => {
		$(".channel-text.active")[0].classList.remove("active");
		el.classList.add("active");
	});
})

// focus/blur on channel header click
$(".channels-header")[0].addEventListener("click", e => {
	e.preventDefault();
	
	const focused = document.activeElement === e.target;
	focused ? e.target.blur() : e.target.focus();
});

// Collapsable code

var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}
            
          
!
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.

Console