https://files.catbox.moe/safuz8.mp4 ← styles showcase

restream chat beta styles.css

/* Messages padding */
.jss5672:last-child {
    padding: 2px;
}

/* Messages wrap with semitransparent bg */
.jss5671 {
    border-radius: 4px;
    background-color: rgba(37, 56, 88, .25) !important;
    transition: background-color .2s ease;
}

/* Margin between messages blocks */
.jss5670 {
    margin-bottom: 2px;
}

/* Message info [time][name][text] */
.jss5588 {
    justify-content: left;
    width: unset !important;
    float: left;
}

/* Time order before name */
.jss5675 {
    order: 1 !important;
}

/* Name order after time */
.jss5570 {
    order: 2;
    margin: 0 4px 0 0;
}

/* Unicode fix for names, so float will work for 2nd newline */
.jss5704 {
    line-height: 1.4;
}

/* More strong and less blurry shadows for [time][name] */
.jss5683, .jss5675 {
    text-shadow: -1px -1px 0 #000, 0px -1px 0 #000, 1px -1px 0 #000, -1px 0px 0 #000, 1px 0px 0 #000, -1px 1px 0 #000, 0px 1px 0 #000, 1px 1px 0 #000;
    opacity: .85 !important;
}

/* More strong shadow for text */
.jss5676 {
    text-shadow: 0 0 1px #000, 0 0 2px #000, 0 0 2px #000;
}

/* Semitransprent bg for icons in chat what send on multiple platforms */
.jss5723 {
    background: #091E4233;
}

/* As above but correction on hover message */
.jss5669:hover .jss5723 {
    background: #091E4295;
}

/* Correction for message bg when hover */
.jss5669:hover .jss5671 {
    background-color: rgba(37, 56, 88, .95) !important;
}

/* Transition on hovering closing buttons */
.jss6 {
    transition: background .2s ease;
}

/* Add simple background as indecation when you will focus on closing buttons */
.jss6:hover {
    background: #0002;
}

/* Styles for closing buttons with more square design */
.jss47 {
    border-radius: 2px;
    padding: 0 8px;
}

/* Wrapper for closing buttons */
.jss5 {
    min-height: 21px;
    height: 25px;
}

/* Header's padding (closing buttons not too far from right side) */
.jss44 {
    padding: 0 4px;
}

/* Headers compact height */
.jss4 {
    height: 25px;
}

/* Messages (+ other) wrapper with new height corrections */
.jss2 {
    height: calc(100vh - 25px);
    margin-top: 25px;
}

/* Messages wrapper inside wrapper above with height correction */
.jss5668 {
    height: calc(100vh - 42px - 24px - 25px);
    padding: 4px 8px;
}

/* Wrapper for sending buttons */
.jss5728 {
    height: 42px;
    bottom: 24px;
}

/* Padding box for sending buttons */
.jss5731 {
    padding: 2px;
}

/* Padding box for sending input (only) */
.jss5741 {
    margin: 5px 0 3px 0;
}

/* Padding box for switching platform in sending buttons group */
.jss5732 {
    padding: 4px 14px 4px 4px;
}

/* Correction for SVG position for button waht switch platforms */
.jss5750 {
    right: -5px;
}

/* Sending input's color (from white) */
.jss5774 {
    color: #DB512E;
}

/* Sending button color */
.jss47.jss51 {
    color: #db512e66;
}

/* Changing underline for input above to same color */
.jss5787:after, .jss5787:before {
    border-bottom-color: #DB512E;
}

/* Above for hover effect (:not() using default suggestion from current CSS) */
.jss5755:hover:not(.jss5754):not(.jss5753):not(.jss5756):before {
    border-bottom-color: #DB512E;
}

/* Bottom statusbar styles */
.jss5790 {
    padding: 0 4px;
    height: 24px;
}

/* Color for statusbar icons */
.jss5790 .jss63 {
    color: #DB512E;
}

/* Stronger shadow for statusbar text (with default opacity and shadow text hardly recognizeable on white backgrounds) */
.jss5792 {
    text-shadow: -1px -1px 0 #0008, 0px -1px 0 #0008, 1px -1px 0 #0008, -1px 0px 0 #000a, 1px 0px 0 #000a, -1px 1px 0 #0008, 0px 1px 0 #0008, 1px 1px 0 #0008;
}