div#comments {
margin-top: 10px; h3#comment-count, h2 { padding: 8px; } img.avatar { border-radius: 4px; float: left; height: 48px; padding-right: 10px; } #comments-list { list-style-type: none; margin-block-start: 0px; padding-inline-start: 0px; li { padding: 8px; clear: both; min-height: 48px; font-size: 15px; line-height: 21px; margin-top: 8px; blockquote { margin-left: 60px; margin-top: 0px; cite { font-style: normal; font-size: 12px; span.author { font-weight: 700; font-size: 13px; } a.muted { color: #656c7a; font-size: 12px; } } div.comment-body { line-height: 21px; font-size: 15px; } } &.byauthor { border-radius: 4px; } } .bullet { padding: 0; color: $secundary-color; line-height: 1.4; } } // #comments-list form#commentform { padding: 8px; display:flex; flex-direction:column; flex-wrap: wrap; .personalInfo{ display:flex; justify-content: space-around; padding:0px; margin:0px; flex-flow: row wrap; } input, textarea { transition: all .2s linear; padding: 5px 9px; margin: 10px 0 0 0; font-size: 13px; border-radius: 4px; height: 32px; width: 100%; font-family: "Open Sans Condensed","Helvetica Neue",Helvetica,Arial,sans-serif; } input:focus, textarea:focus, button#commentbutton:active, button#commentbutton:focus { outline:none; box-shadow: 0 0 8px rgba(230, 210, 180, 1); border-color: #FF8984; } textarea, div.status { border-radius: 4px; height: auto; line-height: 1.4; font-size: 14px; padding: 6px 10px 8px; } textarea { width: 100%; transition: all .15s ease-in-out; overflow: auto; word-wrap: break-word; color: #2a2e2e; cursor: text; display: block; padding:0; margin:0; min-height: 100px; resize: none; outline: none; height: 100%; } div.status:not(:empty) { margin-bottom: 10px; border: solid 1px #eaa; background-color: #ecc; } div.status:empty { display: none; } div#commenttext { float:right; width:100%; } div#comment-box { min-height: 48px; display:flex; flex-direction: row; } div#comment-author { margin-left: 60px; } button#commentbutton, input, textarea { border: 1px solid #caced3; } button#commentbutton { margin: 10px 0 0 0; padding: 5px 9px; height: 44px; color: #505050; border-radius: 4px; -webkit-appearance: none; appearance: none; background-color: 1px solid #dbdfe4; background-image: linear-gradient(-180deg, #eceff5 0%, #dbdfe4 90%); &:hover { border: 1px solid #b0b0c0; background-color: 1px solid #dbdfe4; background-image: linear-gradient(-180deg, #eceff5 0%, #dbdfe4 90%); } &:active { border: 1px solid #a8acc2; background-color: 1px #cbcfd4; background-image: none; } &.confirm-button { background-color: 1px solid #ffffee; background-image: linear-gradient(-180deg, #ffffee 0%, #eeeedd 90%) } } }
}