Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<html>
​
<head>
    <title>Slack</title>
    <link href="https://a.slack-edge.com/bv1-8-8cacda2/slack-icons-v2-71d3b78.woff2" rel="preload" as="font" crossorigin="anonymous">
    <link href="https://a.slack-edge.com/bv1-8-8cacda2/lato-regular-d9ce515.woff2" rel="preload" as="font" crossorigin="anonymous">
    <link href="https://a.slack-edge.com/bv1-8-8cacda2/lato-black-b64f5e4.woff2" rel="preload" as="font" crossorigin="anonymous">
    <link href="https://a.slack-edge.com/bv1-8-8cacda2/lato-bold-4b1dc11.woff2" rel="preload" as="font" crossorigin="anonymous">
    <link rel="stylesheet" href="./styles.css">
</head>
​
<body class="sk-client-theme--dark">
    <div class="p-client_container">
        <div class="p-client">
            <div class="p-workspace p-workspace--context-pane-expanded p-workspace--classic-nav">
                <div class="p-workspace__banner"></div>
​
                <div class="p-workspace__top_nav">
                    <div class="p-classic_nav">
                        <div class="p-classic_nav__team_header"></div>
​
                        <div class="p-classic_nav__channel_header p-classic_nav__model_header"></div>
​
                        <div class="p-classic_nav__right_header p-classic_nav__right_header--context_pane"></div>
                    </div>
                </div>
​
                <div class="p-workspace__sidebar">
                    <nav class="p-channel_sidebar p-channel_sidebar--classic_nav">
                        <div class="p-channel_sidebar__navigation_bar">Navigation</div>
​
                        <div class="p-channel_sidebar__list">
                            <span>sidebar content first<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content last<br></span>
                        </div>
                    </nav>
                </div>
​
                <div class="p-workspace__primary_view">
                    <div class="p-workspace__primary_view_contents">
                        <div class="p-file_drag_drop__container">
                            <div class="p-message_pane p-message_pane--classic-nav">
                                <div class="c-virtual_list__item">
                                    <span>Primary View Content 1<br></span><span>Primary View Content<br></span>
                                </div>
​
                                <div class="c-virtual_list__item--sticky c-virtual_list__item" id="1572872400000.GLQ5WA3J7">
                                    <div class="c-message_list__day_divider__label">
                                        <div class="c-message_list__day_divider__label__pill">Sticky 1</div>
                                    </div>
                                </div>
​
                                <div class="c-virtual_list__item">
                                    <span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span>
                                </div>
​
                                <div class="c-virtual_list__item--sticky c-virtual_list__item" id="1572872400000.GLQ5WA3J7">
                                    <div class="c-message_list__day_divider__label">
                                        <div class="c-message_list__day_divider__label__pill">Sticky 2</div>
                                    </div>
                                </div>
​
                                <div class="c-virtual_list__item">
                                    <span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content Last<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content Last<br></span>
                                </div>
                            </div>
​
                            <footer class="workspace__primary_view_footer">Footer1<br>Footer2</footer>
                        </div>
                    </div>
                </div>
​
                <div class="p-workspace__secondary_view"></div>
            </div>
        </div>
    </div>
</body>
​
</html>
 
/************ reset ************/
​
*, ::after, ::before {
    box-sizing: inherit;
}
​
body, html {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
​
blockquote, body, caption, dd, dl, fieldset, figure, form, h1, h2, h3, h4, h5, h6, hr, legend, ol, p, pre, table, td, th, ul {
    margin: 0;
    padding: 0;
}
​
body {
    background-color: #1a1d21;
}
​
*, ::after, ::before {
    box-sizing: inherit;
}
​
a {
    color: rgba(var(--sk_highlight, 18, 100, 163), 1);
    text-decoration: none;
}
​
/************ fonts ************/
​
@font-face {
    font-family: Slack-Lato;
    font-style: normal;
    font-weight: 300;
    src: local("\263A"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-light-0b50f74.woff2) format("woff2"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-light-1475c14.woff) format("woff");
    unicode-range: U+0000-f8fe, U+f900-ffff
}
​
@font-face {
    font-family: Slack-Lato;
    font-style: normal;
    font-weight: 400;
    src: local("\263A"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-regular-d9ce515.woff2) format("woff2"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-regular-ea6d1e4.woff) format("woff");
    unicode-range: U+0000-f8fe, U+f900-ffff
}
​
@font-face {
    font-family: Slack-Lato;
    font-style: normal;
    font-weight: 700;
    src: local("\263A"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-bold-4b1dc11.woff2) format("woff2"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-bold-a532381.woff) format("woff");
    unicode-range: U+0000-f8fe, U+f900-ffff
}
​
@font-face {
    font-family: Slack-Lato;
    font-style: normal;
    font-weight: 900;
    src: local("\263A"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-black-b64f5e4.woff2) format("woff2"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-black-8857ce8.woff) format("woff");
    unicode-range: U+0000-f8fe, U+f900-ffff
}
​
@font-face {
    font-family: Slack-Lato;
    font-style: italic;
    font-weight: 300;
    src: local("\263A"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-italic-light-c593311.woff2) format("woff2"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-italic-light-354fb58.woff) format("woff");
    unicode-range: U+0000-2259, U+2261-f8fe, U+f900-ffff
}
​
@font-face {
    font-family: Slack-Lato;
    font-style: italic;
    font-weight: 400;
    src: local("\263A"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-italic-5bbcd6c.woff2) format("woff2"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-italic-d5261ac.woff) format("woff");
    unicode-range: U+0000-2259, U+2261-f8fe, U+f900-ffff
}
​
@font-face {
    font-family: Slack-Lato;
    font-style: italic;
    font-weight: 700;
    src: local("\263A"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-italic-bold-99def7d.woff2) format("woff2"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-italic-bold-2187a11.woff) format("woff");
    unicode-range: U+0000-2259, U+2261-f8fe, U+f900-ffff
}
​
@font-face {
    font-family: Slack-Lato;
    font-style: italic;
    font-weight: 900;
    src: local("\263A"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-italic-black-04aca50.woff2) format("woff2"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-italic-black-23c1971.woff) format("woff");
    unicode-range: U+0000-2259, U+2261-f8fe, U+f900-ffff
}
​
@font-face {
    font-family: Slack v2;
    src: url(https://a.slack-edge.com/bv1-8-8cacda2/slack-icons-v2-71d3b78.woff2) format("woff2"), url(https://a.slack-edge.com/bv1-8-8cacda2/slack-icons-v2-3e925bf.woff) format("woff");
    font-style: normal;
    font-weight: 400
}
​
body {
    font-family: Slack-Lato, appleLogo, sans-serif;
}
​
body {
    font-size: 15px;
    line-height: 1.46668;
    font-weight: 400;
    color: white;
    font-variant-ligatures: common-ligatures;
}
​
/************ client ************/
​
.p-client {
    overflow: hidden;
}
​
.p-client {
    background: rgba(var(--sk_primary_background, 255, 255, 255), 1);
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: auto;
    grid-template-areas: "p-client__workspace";
}
​
/************ workspace ************/
​
.p-workspace {
    grid-area: p-client__workspace;
}
​
.p-workspace, .p-workspace__primary_view, .p-workspace__primary_view_contents, .p-workspace__secondary_view {
    min-width: 0;
    min-height: 0;
}
​
.p-workspace {
    display: grid;
    grid-template-rows: min-content 60px auto
}
​
/*** workspace context pane ***/
​
.p-workspace--context-pane-collapsed {
    grid-template-columns: 220px auto;
    grid-template-areas: "p-workspace__banner p-workspace__banner" "p-workspace__top_nav p-workspace__top_nav" "p-workspace__sidebar p-workspace__primary_view"
}
​
.p-workspace--context-pane-expanded {
    grid-template-columns: 220px auto 312px;
    grid-template-areas: "p-workspace__banner p-workspace__banner p-workspace__banner" "p-workspace__top_nav p-workspace__top_nav p-workspace__top_nav" "p-workspace__sidebar p-workspace__primary_view p-workspace__secondary_view"
}
​
@media screen and (min-width:1440px) {
    .p-workspace--context-pane-expanded {
        grid-template-columns: 220px auto 492px
    }
}
​
@media screen and (max-width:1440px) {
    .p-workspace--context-pane-expanded {
        grid-template-columns: 220px auto 442px
    }
}
​
@media screen and (max-width:1366px) {
    .p-workspace--context-pane-expanded {
        grid-template-columns: 220px auto 392px
    }
}
​
@media screen and (max-width:1279px) {
    .p-workspace--context-pane-expanded {
        grid-template-columns: 220px auto 367px
    }
}
​
@media screen and (max-width:1070px) {
    .p-workspace--context-pane-expanded {
        grid-template-columns: 220px auto 337px
    }
}
​
@media screen and (max-width:860px) {
    .p-workspace--context-pane-expanded {
        grid-template-columns: 220px auto 312px
    }
}
​
/************ banner ************/
​
.p-workspace__banner {
    grid-area: p-workspace__banner;
}
​
/************ top nav ************/
​
.p-workspace__top_nav {
    background: #1abc9c;
    grid-area: p-workspace__top_nav;
    min-width: 0;
}
​
/************ classic nav ************/
​
.p-classic_nav {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}
​
/************ team header ************/
​
.p-classic_nav__team_header {
    background: #2ecc71;
}
​
.p-classic_nav__team_header {
    flex-shrink: 0;
    width: 220px;
    height: 60px;
}
​
/************ channel header ************/
​
.p-classic_nav__channel_header {
    background: #9b59b6;
    display: flex;
    flex: 1;
    height: 60px;
    min-width: 0;
    position: relative;
}
​
/************ right header ************/
​
.p-classic_nav__right_header {
    flex-shrink: 0;
    height: 60px;
    display: flex;
    align-items: center;
}
​
@media screen and (min-width:1440px) {
    .p-classic_nav__right_header {
        width: 415px
    }
    .p-classic_nav__right_header--context_pane {
        width: 492px
    }
}
​
@media screen and (max-width:1440px) {
    .p-classic_nav__right_header {
        width: 365px
    }
    .p-classic_nav__right_header--context_pane {
        width: 442px
    }
}
​
@media screen and (max-width:1366px) {
    .p-classic_nav__right_header {
        width: 315px
    }
    .p-classic_nav__right_header--context_pane {
        width: 392px
    }
}
​
@media screen and (max-width:1279px) {
    .p-classic_nav__right_header {
        width: 300px
    }
    .p-classic_nav__right_header--context_pane {
        width: 367px
    }
}
​
@media screen and (max-width:1070px) {
    .p-classic_nav__right_header {
        width: 280px
    }
    .p-classic_nav__right_header--context_pane {
        width: 337px
    }
}
​
@media screen and (max-width:860px) {
    .p-classic_nav__right_header {
        width: 250px
    }
    .p-classic_nav__right_header--context_pane {
        width: 312px
    }
}
​
/************ side bar ************/
​
.p-workspace__sidebar {
    grid-area: p-workspace__sidebar;
    display: grid;
    grid-template-columns: auto;
    position: relative;
}
​
.p-workspace--classic-nav .p-workspace__sidebar {
    grid-template-areas: "p-workspace__channel_sidebar";
    grid-template-rows: auto;
}
​
.p-workspace__channel_sidebar {
    grid-area: p-workspace__channel_sidebar;
}
​
.p-channel_sidebar {
    background: #34495e;
    width: 220px;
    flex: 1;
    height: 100%;
    position: relative;
    padding: 0;
    display: flex;
    flex-direction: column;
}
​
.p-channel_sidebar__navigation_bar {
    background: #f1c40f;
}
​
.p-channel_sidebar__list {
    flex: 1 1 auto;
    overflow-y: auto;
    height: 0;
}
​
/************ common ************/
​
.p-workspace, .p-workspace__primary_view, .p-workspace__primary_view_contents, .p-workspace__secondary_view {
    min-width: 0;
    min-height: 0;
}
​
/************ primary view ************/
​
.p-workspace--classic-nav .p-workspace__primary_view {
    grid-template-areas: "p-workspace__primary_view_contents";
    grid-template-rows: auto;
}
​
.p-workspace__primary_view {
    grid-area: p-workspace__primary_view;
    display: grid;
    grid-template-columns: auto;
    background: #e67e22;
}
​
.p-workspace__primary_view_contents {
    display: flex;
    flex-direction: column;
    grid-area: p-workspace__primary_view_contents;
}
​
.p-file_drag_drop__container {
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100%;
    background: red;
}
​
.p-message_pane {
    background: #3498db;
    flex: auto;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
}
​
.workspace__primary_view_footer {
    background: #bdc3c7;
}
​
/* sticky */
​
.c-virtual_list__item--sticky {
    position: sticky;
    top: -21px;
    z-index: 200;
}
​
.c-message_list__day_divider__label__pill {
    background:  white;
    display: inline-block;
    z-index: 201;
    padding: .25rem .75rem;
    border-radius: 24px;
    position: relative;
    color: black;
}
​
​
/************ secondary view ************/
​
.p-workspace--classic-nav .p-workspace__secondary_view {
    grid-template-areas: "p-workspace__secondary_view_contents";
    grid-template-rows: auto;
    background: #e74c3c;
}
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anindhapro
0viewers