.review { display: block; margin-top: 1em; } .review-title { font-size: x-large; display: flex; justify-content: space-between; align-items: center; padding-left: 1em; padding-right: 1em; } .review-title img { max-width: 1.5em; height: 1.5em; } .review-rating img { max-width: 1em; height: 1em; } .review-by-current-user { border: 5px solid var(--catch-detail-color); } .review-rating { display: flex; flex-direction: row; width: 5em; margin-right: 0.5em; flex-shrink: 0; } .review-date { color: var(--subtle-detail-color-light-contrast); } .review-stars-comment { display: flex; margin-bottom: 0.5em; } .review-author { font-weight: bold; } .review-author-date { display: flex; margin-bottom: 0.5em; justify-content: flex-end; } .review-element { padding: 1em; margin: 0.5em; display: block; border-radius: 1em; background-color: var(--subtle-detail-color); color: var(--subtle-detail-color-contrast); } .review-attribution { display: flex; color: var(--subtle-detail-color-light-contrast); justify-content: flex-end; margin-right: 1em; } .review-attribution span { width: calc(75% - 3em); text-align: right; max-width: 20em; } .review-attribution img { height: 3em; margin-left: 0.5em; } .review-form { display: block; border-radius: 1em; padding: 1em; background-color: var(--subtle-detail-color); color: var(--subtle-detail-color-contrast); border: 2px solid var(--subtle-detail-color-contrast) } .review-form-bottom { display: flex; justify-content: space-between; margin-top: 0.5em; } .review-form-top { display: flex; flex-wrap: wrap; justify-content: space-between; } .review-form-rating { display: block ruby; } .review-form .save { display: block ruby; } .review-form .save-non-active { display: block ruby; } .review-form textarea { resize: unset; } .review-form-rating svg { width: 2em; height: 2em; margin: 0; padding: 0; display: inline-block; }