Source

/aya.waifu.ist/public/stylesheets/pages/comments.sass

Modified ago
$green: #14D790
$light-green: #9eff93
$yellow: #eaee77
$black: #333
$grey: #BBB

.thread
    margin-bottom: 25px
    padding-left: 40px

.comments
    display: flex
    flex-direction: column
    padding: 20px

.comment
    background-color: $white
    border-radius: 8px
    box-shadow: 0 0 15px #006941
    margin-bottom: 25px
    padding: 20px

.comment__name
    font-weight: 700

.comment__date
    color: $grey

.comment__id
    color: $grey
    cursor: pointer
    float: right
    user-select: none

.comment__emoji
    height: 1.1em
    vertical-align: middle

// Comment form elements
.comment-form
    display: flex
    height: 8em
    padding: 20px
    position: relative
    transform-origin: bottom

.comment-form__input
    background-color: $white
    border: 2px solid transparent
    color: inherit
    font: inherit
    outline: none
    padding: 0 20px
    &::placeholder
        color: $grey
    &:focus
        border: 2px solid $black

.comment-form__input_type_name
    border-bottom-left-radius: 8px
    border-top-left-radius: 8px
    
.comment-form__input_type_main
    border: none
    min-height: 100%
    padding: 0
    padding-bottom: inherit
    &:focus
        border: none

.comment-form__input_type_submit
    border-bottom-right-radius: 8px
    border-top-right-radius: 8px
    cursor: pointer

.comment-form__reply
    background-color: $black
    border-radius: 6px
    color: $white
    cursor: pointer
    font-size: 0.7em
    left: 0
    padding: 5px
    position: absolute
    top: 0
    transform: scale(1)
    transition: 0.4s
.comment-form__reply_hidden
    transform: scale(0)

/*
 *  OVERWRITES
 */

.body_page_comments
    background-image: radial-gradient(ellipse at center, $light-green 0%, $green 100%)
    color: $black
    font-weight: 400
    text-shadow: none
    -webkit-text-stroke: 0

// Title
.title_comments
    color: $yellow
    -webkit-text-stroke: 0.031em $black

// Scroller
.scroller_comments
    height: 100%

.scroller_comment
    background-color: $white
    border: 2px solid transparent
    margin: 0 1px
    width: 100%

.scrollbar_comment
    background-color: $grey
    border-radius: 0

.scrollbar__handle_comment
    border: 1px solid $grey

// Menu
.menu_comments
    background-color: $light-green
    border-color: $yellow
    color: $black
    font-weight: 900

.menu__button_comments
    background-color: $light-green
    border: 8px solid $yellow
    border-left-color: $light-green
    border-top-color: $yellow

.hamburger_comments
    &, &:before, &:after
        background-color: $green