main.css

:root {
    --top-color: #ff6600;
}

/* Orange bar left to the active thing */
.title {
    /* overflow: hidden hides the ::before element of the sibling */
    overflow: visible !important;
}
/* NOTE: The interesting <td> might be the second or third one, but it is
 * always the last one (see DOCUMENTATION.md) */
/* NOTE: Comments are wrapped in a single <td><table><tbody>; to avoid adding
 * an orange bar on this <td>, we make sure there are two <td>s. */
/* NOTE: to apply the orange bar to the subtext of stories, we look at :not(.comtr) + tr */
/* Make the parent of the actual orange bar relatively positioned to allow
 * moving the orange bar where we want with position: absolute. */
:is(.activething, .activething:not(.comtr) + tr, .fatitem .activething ~ tr) td+td:last-child {
    position: relative;
}
/* The actual orange bar */
:is(.activething, .activething:not(.comtr) + tr, .fatitem .activething ~ tr) td+td:last-child::before {
    content: " ";
    display: block;
    background-color:var(--top-color);
    position: absolute;
    left:-3px;
    width:2px;
    /* Extend the bar slightly upwards and downwards to bridge the table cell borders between <tr>s */
    top:-1px;
    bottom:-1px;
}
.fatitem tr+tr td::before {
    /* Cover the empty <tr>s in .fatitem */
    top:-13px !important;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}
.inprogress-votelink:last-of-type::before {
    /* Put it above the vote links */
    position: absolute;
    /* Override nosee */
    visibility: visible;
    /* Make a spinner */
    content:"↻";
    display:block;
    animation:spin 3s linear infinite;
}

/* Highlight op */
.op {
    color: var(--top-color) !important;
}
.op::after {
    content: " [op]";
}

/* List of comments from newest to oldest*/
#newest-items {
    height:100%;
    overflow:auto;
    scrollbar-width:none;
    font-family: monospace;
    font-size: 8pt;
    padding:2px;
}
#newest-items ul {
    list-style: none;
    padding:0;
}
#newest-items li {
    padding:0;
}
.active-newest {
    position: relative;
    color:var(--top-color);
}
#newest-items.active-newest-items h3 {
    color: var(--top-color);
}
@media (min-width:1600px) {
    #newest-items {
        position: fixed;
        top:0;
        left:0;
        border-left:2px solid white;
    }
    #newest-items.active-newest-items {
        border-left:2px solid var(--top-color);
    }
    .active-newest::after {
        content: " ";
        display: block;
        background-color: var(--top-color);
        position: absolute;
        right:-2px;
        width:2px;
        top: 0px;
        bottom: 0px;
    }
}
@media (max-width:1599px) {
    #newest-items {
        display: none;
        border-right: 2px solid var(--top-color);
    }
    #newest-items.active-newest-items {
        display: block;
        position:fixed;
        top:0;
        right:0;
        background-color:white;
    }
    #newest-items li {
        border-left: 2px solid white;
    }
    #newest-items li.active-newest {
        border-left: 2px solid var(--top-color);
    }
}

/* Help page */
#help {
    /* Display help above content */
    width:100%;
    height:100%;
    position:fixed;
    top:0;
    left:0;
    background-color:rgba(0, 0, 0, .5);
    /* Put it above Newest Items */
    z-index:1;
}
#help-inner {
    height:calc(100vh - 2em);
    max-width: 50em;
    margin: 1em auto;
    background-color: white;
    padding: 0 1em 1em 1em;
    overflow: auto;
    /* Avoid scrolling content by mistake */
    overscroll-behavior: contain;
}
/* Imitate GitHub README */
#help * {
    color: #1F2328
}
#help h2 {
    padding-bottom: .3em;
    font-size: 1.5em;
    border-bottom: 1px solid hsla(210,18%,87%,1);
}
#help h3 {
    font-size: 1.25em;
}
#help table {
    border-spacing: 0;
    border-collapse: collapse;
}
#help tr {
    background-color: #ffffff;
    border-top: 1px solid hsla(210,18%,87%,1);
}
#help tr:nth-child(2n) {
    background-color: #f6f8fa;
}
#help th {
    font-weight: 600;
}
#help th, #help td {
    padding: 6px 13px;
    border: 1px solid #d0d7de;
}
kbd {
    display: inline-block;
    padding: 3px 5px;
    font: 11px ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;
    line-height: 10px;
    vertical-align: middle;
    background-color: #f6f8fa;
    border: solid 1px rgba(175,184,193,0.2);
    border-bottom-color: rgba(175,184,193,0.2);
    border-radius: 6px;
    box-shadow: inset 0 -1px 0 rgba(175,184,193,0.2);
}

/* In-comment link counter */
body { counter-reset: link; }
a.numbered-link::after {
    /* Display link number */
    counter-increment: link;
    content: " " counter(link);
    color: var(--top-color);
    /* Put it in superscript, without moving anything else */
    font-weight: bold;
    font-variant-position: super;
    /* I have considered using absolute positioning within an absolute parent
     * to avoid moving the comment's content.
     *
     * However, this generally risks overlapping content. The safest place to
     * position the counter would be right after the link, expecting either the
     * end of the line, and period or a space, which would leave enough room
     * for a single digit number.
     *
     * However, links are inline elements and so can be broken over several
     * lines in multiple fragments. The positioning of an absolutely positioned
     * element in a relatively positioned inline element is set around the
     * bounding box of the first fragment. That means that we can only position
     * our counter on the first line of the link, when it is over multiple
     * lines.
     *
     * See also https://bugzilla.mozilla.org/show_bug.cgi?id=489100
     *
     * Positioning the counter on the left of the link would also be possible,
     * but that overlaps with the orange bar that indicates the active items,
     * when the link is the first thing in the line.
     *
     * No overlaying the counter should minimize incompatibilities, and
     * hopefully won't cause too much reflow. At least, it should only happen
     * on user interaction or with a targeted link.
     */
}

/* NOTE: see Reply Link Bug in DOCUMENTATION.md */
.reply a:after {
    /* Avoid showing a link count on reply link (see remark above) */
    content: none !important;
}