Skip to content

Instantly share code, notes, and snippets.

@martinrue

martinrue/subreply.css Secret

Created Jul 13, 2020
Embed
What would you like to do?
:root {
--gray: #eee;
}
body, textarea {
font-family: "Menlo", Monaco, Consolas, monospace;
font-family: -apple-system, Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 22px;
}
textarea {
margin-bottom: 30px;
background: rgb(27,32,43);
}
* {
transition: none !important;
}
.container {
grid-template-columns: 2fr minmax(200px, 1fr) minmax(700px, 3fr) 3fr;
}
.leftside, .sidebar {
background-color: rgb(42,47,58);
}
.main, .rightside {
background-color: rgb(37,42,53);
}
.logo {
margin-right: 25px;
}
.links a {
background-color: rgb(42,47,58);
border-bottom-color: rgb(37,42,53);
height: auto;
padding: 7px 25px;
}
.links a.on {
border-top-color: rgb(37,42,53);
background-color: rgb(37,42,53);
}
.links a:first-child {
border-top: rgb(37,42,53) 1px solid;
}
.links a:hover {
background-color: rgb(37,42,53);
}
.links a svg {
display: none;
}
.main {
padding: 0 30px;
}
.main .extra {
margin-top: 5px;
color: #aaa;
}
.main .status {
color: #aaa;
}
.main .list {
margin-top: 25px;
}
.main .reply .placeholder {
display: none;
}
.entry {
border-top: none;
padding: 12px 0;
}
.author .here {
color: #33ff33;
}
.author, .content {
margin-bottom: 5px;
}
.author .handle, .author .ago {
color: rgb(200,200,200);
}
.main .list .entry .small {
font-size: 13px;
}
.main .list .entry .small a,
.main .list .entry .small b {
color: #aaa;
}
.main .list .entry .small a:hover {
color: #fff;
}
@dvaun

This comment has been minimized.

Copy link

@dvaun dvaun commented Jul 13, 2020

Thanks again for posting this!

I had to slightly modify this to ensure white text on my end. Also modified the font-family to use some system defaults and Inter if you have it installed:

:root {
    --gray: #eee;
}

body,
textarea {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-family: -apple-system, Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 22px;
    color: #d9d8dc;
    text-rendering: optimizeLegibility;
    font-style: normal;
    font-variant-numeric: proportional-nums;
    font-feature-settings: "pnum";
}

textarea {
    margin-bottom: 30px;
    background: rgb(27, 32, 43);
}

a {
    color: #d9d8dc;
}

* {
    transition: none !important;
}

.container {
    grid-template-columns: 2fr minmax(200px, 1fr) minmax(700px, 3fr) 3fr;
}

.leftside,
.sidebar {
    background-color: rgb(42, 47, 58);
}

.main,
.rightside {
    background-color: rgb(37, 42, 53);
}

.logo {
    margin-right: 25px;
}

.links a {
    background-color: rgb(42, 47, 58);
    border-bottom-color: rgb(37, 42, 53);
    height: auto;
    padding: 7px 25px;
    color: #d9d8dc;
}

.links a.on {
    border-top-color: rgb(37, 42, 53);
    background-color: rgb(37, 42, 53);
}

.links a:first-child {
    border-top: rgb(37, 42, 53) 1px solid;
}

.links a:hover {
    background-color: rgb(37, 42, 53);
}

.links a svg {
    display: none;
}

.main {
    padding: 0 30px;
}

.main .extra {
    margin-top: 5px;
    color: #aaa;
}

.main .status {
    color: #aaa;
}

.main .list {
    margin-top: 25px;
}

.main .reply .placeholder {
    display: none;
}

.entry {
    border-top: none;
    padding: 12px 0;
}

.author .here {
    color: #33ff33;
}

.author,
.content {
    margin-bottom: 5px;
}

.author .handle,
.author .ago {
    color: rgb(200, 200, 200);
}

.main .list .entry .small {
    font-size: 13px;
}

.main .list .entry .small a,
.main .list .entry .small b {
    color: #aaa;
}

.main .list .entry .small a:hover {
    color: #fff;
}
@martinrue

This comment has been minimized.

Copy link
Owner Author

@martinrue martinrue commented Jul 13, 2020

Awesome, thanks for the additions!

@dvaun

This comment has been minimized.

Copy link

@dvaun dvaun commented Jul 15, 2020

Added a stylesheet for https://subreply.com/trending which allows for collapsible comments. Have only tested it in Firefox 78.
It can be added into Stylus or another editor.

Edits (each bullet point is an additional edit—click on edited above to view history):

  • Included scrollbar behavior for long comment lists
  • Moved scrollbar to the right side. Hid scrollbar on hover over div.main but now it should look more compact and clean
  • Added CSS for <textarea> elements to adjust their width and setup height/padding to look decent again
  • Additional edits to make <div class="main"> not cause us to zoom back to the top of the page
  • Combined all of the CSS into one file for all pages. When I have some time I'll continue to fix small inconveniences caused by these changes (including working out a calculation to get the replies pane to match the site's original grid size for <div class="container">: grid-template-columns: calc(50% - 340px) 170px 510px calc(50% - 340px);)
:root {
    --gray: #eee;
}

body,
textarea {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-family: -apple-system, Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 22px;
    color: #d9d8dc;
    text-rendering: optimizeLegibility;
    font-style: normal;
    font-variant-numeric: proportional-nums;
    font-feature-settings: "pnum";
    font-weight: 400;
}

body {
    background-color: rgb(37, 42, 53);
}

textarea {
    margin-bottom: 30px;
    background: rgb(27, 32, 43);
}

a {
    color: #d9d8dc;
}

* {
    transition: none !important;
}

.container {
    grid-template-columns: 2fr minmax(200px, 1fr) minmax(700px, 3fr) 3fr;
}

.leftside,
.sidebar {
    background-color: rgb(42, 47, 58);
}

.main,
.rightside {
    background-color: rgb(37, 42, 53);
}

.logo {
    margin-right: 25px;
}

.links a {
    background-color: rgb(42, 47, 58);
    border-bottom-color: rgb(37, 42, 53);
    height: auto;
    padding: 7px 25px;
    color: #d9d8dc;
}

.links a.on {
    border-top-color: rgb(37, 42, 53);
    background-color: rgb(37, 42, 53);
}

.links a:first-child {
    border-top: rgb(37, 42, 53) 1px solid;
}

.links a:hover {
    background-color: rgb(37, 42, 53);
}

.links a svg {
    display: none;
}

.main {
    padding: 0 30px;
}

.main .extra {
    margin-top: 5px;
    color: #aaa;
}

.main .status {
    color: #aaa;
}

.main .list {
    margin-top: 25px;
}

.main .reply .placeholder {
    display: none;
}

.entry {
    border-top: none;
    padding: 12px 0;
}

.author .here {
    color: #33ff33;
}

.author,
.content {
    margin-bottom: 5px;
}

.author .handle,
.author .ago {
    color: rgb(200, 200, 200);
}

.main .list .entry .small {
    font-size: 1.125em;
    line-height: 1.4em;
}

.main .list .entry .small a,
.main .list .entry .small b {
    color: #aaa;
}

.main .list .entry .small a:hover {
    color: #fff;
}

/*
 *
 *
 *
 *
 * Collapsing replies and stuff
 *
 *
 *
 *
*/

* {
    transition: none;
    box-sizing: border-box;
}

body {
    overflow: hidden;
}

div.main {
    overflow: hidden;
    overflow-y: scroll;
    margin: 0 30px;
    padding: 0;
    width: 100%;
    max-height: 100vh;
    overflow-y: scroll;
}
.main .list {
    grid-template-columns: [posts] 50% [replies] 50%;
    grid-template-rows: repeat(auto-fit, 100%);
    display: grid;
}
div.entry + div.sublist {
    transition: none;
    user-select: none;
    height: 0px;
    max-height: 100vh;
    direction: ltr;
    grid-column: replies;
    grid-row: start / end;
    display: flex;
    flex-direction: column;
    padding-right: 24px;
    z-index: 2;
    top: 0px;
}
div.container {
    grid-template-columns: 12px 20ch 1fr 12px;
}
div.entry + div.sublist > .entry {
    visibility: hidden;
    opacity: 0;
    direction: ltr;
}
div.entry + div.sublist:hover > .entry,
div.entry:hover + div.sublist > .entry,
div.sublist > .entry:hover {
    opacity: 1;
    transition: 1s all;
    user-select: all;
    background-color: rgb(50, 44, 99);
    padding-left: 3%;
}
div.entry:hover + div.sublist + div.entry,
div.sublist:hover + div.entry {
    grid-column-start: 1;
    grid-column-end: 2;
}
div.entry:hover + div.sublist,
div.entry + div.sublist:hover {
    width: calc((((100%) - 20ch - 12px - 30px) / 2) + 0px);
    left: calc((((100%) - 20ch - 12px - 30px) / 2) + 12px + 20ch + 30px);
    position: absolute;
    height: 100%;
    float: right;
    grid-row: 1 / end;
    margin: 0 auto;
    padding: 0;
}

div.entry + div.sublist:hover {
    padding-right: 0px;
    margin-right: 24px;
    z-index: 3;
}

div.entry + div.sublist:hover {
    overflow-y: scroll;
}

div.main {
    background-color: rgba(0,0,0,0);
}

div.main:hover {
    margin: 0 30px;
    padding: 0;
    width: 100%;
    max-height: 100vh;
    overflow-y: scroll;
}

div.list {
    z-index: 1;
    opacity: 1;
}

div.entry + div.sublist:hover > .entry,
div.entry:hover + div.sublist > .entry,
div.sublist > .entry:hover {
    visibility: visible;
    grid-row: 1;
    grid-column: 2;
}
div.list > div.entry {
    grid-column: posts;
    grid-row: auto;
    display: flex;
    flex-direction: column;
    transition: 1s all;
    width: auto;
    height: 100%;
    position: relative;
}
div.list > div.entry:hover {
}
div.entry:hover + div.sublist > div.entry:last-child,
div.entry + div.sublist:hover > div.entry:last-child {
    height: 100vh;
}
div.list > div.entry > div {
    padding: 0px 0.75% 0px 0.75%;
    width: 100%;
}
.sublist {
    margin-left: 0px;
}

div.reply textarea {
    width: 45%;
    line-height: 30px;
    height: 50px;
    padding: 14px 1.35% 16px 1.35%;
}



/******* S H I T T Y ::after selectors *******/

div.list > div.entry + div.sublist:hover + div.entry::after {

    content: "";
    position: absolute;
    width: 110%;
    z-index: 1;
    color: white;
    height: 10px;
    bottom: 100%;
    left: 0%;
    background-color: rgb(50, 44, 99);
}
div.list > div.entry:hover::after {
    content: "";
    position: absolute;
    width: 110%;
    z-index: 1;
    color: white;
    background-color: rgb(50, 44, 99);
    height: 10px;
    bottom: 0px;
}

div.sublist:hover ~ div.entry::after {

    content: "";
    position: absolute;

}
div.sublist:hover ~ div.entry::after {

}
div.list > div.entry::after {

    content: "";
    position: absolute;
    width: calc(((100% - 24px - 20ch) / 2) - 60px + 24px);
    z-index: 3;
    color: white;
    background-color: white;
    height: 0px;

}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.