From 9344e4d4e556d815714a8bc379e1f6b1cdb6f6fb Mon Sep 17 00:00:00 2001 From: daudix Date: Tue, 18 Jun 2024 06:34:01 +0300 Subject: [PATCH] Ditto for comments.scss --- sass/_comments.scss | 316 ++++++++++++++++++++++---------------------- 1 file changed, 158 insertions(+), 158 deletions(-) diff --git a/sass/_comments.scss b/sass/_comments.scss index 12733de..88f2670 100644 --- a/sass/_comments.scss +++ b/sass/_comments.scss @@ -1,4 +1,4 @@ -section#comments { +#comments { #qrcode { float: right; box-sizing: content-box; @@ -18,202 +18,202 @@ section#comments { } } - #comments-wrapper { - display: flex; - flex-direction: column; - gap: 2rem; - margin-top: 2rem; - } - .dialog-buttons { justify-content: start; gap: 0.25rem; margin-top: 2rem; } - .comment { - display: grid; - grid-template-columns: min-content; - grid-template-areas: - "avatar name " - "avatar time " - "avatar post " - "...... interactions"; - column-gap: 1rem; - justify-items: start; + #comments-wrapper { + display: flex; + flex-direction: column; + gap: 2rem; + margin-top: 2rem; - &.comment-reply { - position: relative; - border-left: 0.25rem solid var(--fg-muted-2); - border-radius: 0.25rem; - padding-left: 1rem; + .comment { + display: grid; + grid-template-columns: min-content; + grid-template-areas: + "avatar name " + "avatar time " + "avatar post " + "...... interactions"; + column-gap: 1rem; + justify-items: start; - body[dir="rtl"] & { - border-right: 0.25rem solid var(--fg-muted-2); - border-left: unset; - padding-right: 1rem; - padding-left: unset; - } - } + &.comment-reply { + position: relative; + border-left: 0.25rem solid var(--fg-muted-2); + border-radius: 0.25rem; + padding-left: 1rem; - .avatar-link { - position: relative; - grid-area: avatar; - width: 4rem; - height: 4rem; - - .avatar { - transition: var(--transition); - margin: 0; - background-size: cover; - background-color: var(--fg-muted-1); - - &:hover { - transform: rotate(10deg) scale(1.1); - border-radius: var(--rounded-corner); - } - - &:active { - transform: scale(var(--active)); + body[dir="rtl"] & { + border-right: 0.25rem solid var(--fg-muted-2); + border-left: unset; + padding-right: 1rem; + padding-left: unset; } } - } - .author { - display: flex; - grid-area: name; - align-items: center; - gap: 0.25rem; - font-weight: bold; + .avatar-link { + position: relative; + grid-area: avatar; + width: 4rem; + height: 4rem; - .instance { - transition: var(--transition); - box-shadow: var(--edge-highlight); - border-radius: 999px; - background-color: var(--fg-muted-1); - padding: 0.25rem 0.75rem; - color: var(--fg-color); - font-size: 0.875rem; - text-decoration: none; + .avatar { + transition: var(--transition); + margin: 0; + background-size: cover; + background-color: var(--fg-muted-1); - &:hover { - background-color: var(--fg-muted-2); + &:hover { + transform: rotate(10deg) scale(1.1); + border-radius: var(--rounded-corner); + } + + &:active { + transform: scale(var(--active)); + } + } + } + + .author { + display: flex; + grid-area: name; + align-items: center; + gap: 0.25rem; + font-weight: bold; + + .instance { + transition: var(--transition); + box-shadow: var(--edge-highlight); + border-radius: 999px; + background-color: var(--fg-muted-1); + padding: 0.25rem 0.75rem; + color: var(--fg-color); + font-size: 0.875rem; text-decoration: none; - } - &:active { - transform: scale(var(--active)); - } + &:hover { + background-color: var(--fg-muted-2); + text-decoration: none; + } - &.op { - box-shadow: none; + &:active { + transform: scale(var(--active)); + } + + &.op { + box-shadow: none; + background-color: transparent; + color: var(--primary-color); + + &:hover { + box-shadow: var(--edge-highlight); + background-color: var(--primary-color-alpha); + } + + &::before { + margin-inline-end: 0.25rem; + content: "✓"; + } + } + } + } + + .emoji { + all: unset; + display: inline; + vertical-align: middle; + width: 1.5em; + height: 1.5em; + } + + time { + grid-area: time; + color: var(--fg-muted-5); + font-size: 0.875rem; + } + + main { + grid-area: post; + + p:last-child { + margin-bottom: 0; + } + } + + footer { + display: flex; + grid-area: interactions; + gap: 0.25rem; + margin-top: 1rem; + + .boosts, + .faves { + transition: var(--transition); + border-radius: 999px; background-color: transparent; - color: var(--primary-color); + padding: 0.25rem 0.75rem; + font-variant-numeric: tabular-nums; + text-decoration: none; + + .icon { + vertical-align: -0.125em; + transition: transform var(--transition-longer); + margin-inline-end: 0.25rem; + width: 1rem; + height: 1rem; + } &:hover { box-shadow: var(--edge-highlight); - background-color: var(--primary-color-alpha); + text-decoration: none; } - &::before { - margin-inline-end: 0.25rem; - content: "✓"; + &:active { + transform: scale(var(--active)); } } - } - } - .emoji { - all: unset; - display: inline; - vertical-align: middle; - width: 1.5em; - height: 1.5em; - } + .boosts { + color: var(--boosts-fg); - time { - grid-area: time; - color: var(--fg-muted-5); - font-size: 0.875rem; - } + &:hover { + background-color: var(--boosts-bg); - main { - grid-area: post; - - p:last-child { - margin-bottom: 0; - } - } - - footer { - display: flex; - grid-area: interactions; - gap: 0.25rem; - margin-top: 1rem; - - .boosts, - .faves { - transition: var(--transition); - border-radius: 999px; - background-color: transparent; - padding: 0.25rem 0.75rem; - font-variant-numeric: tabular-nums; - text-decoration: none; - - .icon { - vertical-align: -0.125em; - transition: transform var(--transition-longer); - margin-inline-end: 0.25rem; - width: 1rem; - height: 1rem; - } - - &:hover { - box-shadow: var(--edge-highlight); - text-decoration: none; - } - - &:active { - transform: scale(var(--active)); - } - } - - .boosts { - color: var(--boosts-fg); - - &:hover { - background-color: var(--boosts-bg); + .icon { + transform: rotate(180deg); + } + } .icon { - transform: rotate(180deg); + $icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M8 1v2H4C1.8 3 0 4.8 0 7v2a4 4 0 0 0 1.02 2.672 1 1 0 1 0 1.488-1.336A1.97 1.97 0 0 1 2 9V7c0-1.125.875-2 2-2h4v2h1v-.008a1 1 0 0 0 .707-.285l2-2a1 1 0 0 0 0-1.414l-2-2A1 1 0 0 0 9 1.008V1zm6.29 3a1 1 0 0 0-.72.258.993.993 0 0 0-.078 1.41c.317.355.508.816.508 1.34v2c0 1.125-.875 2-2 2H8V9H7v.008a1 1 0 0 0-.707.285l-2 2a1 1 0 0 0 0 1.414l2 2c.187.184.441.29.707.285V15h1v-1.992h4c2.2 0 4-1.805 4-4v-2a4 4 0 0 0-1.02-2.676A1 1 0 0 0 14.29 4m0 0'/%3E%3C/svg%3E"); + -webkit-mask-image: $icon; + mask-image: $icon; + background-color: var(--boosts-fg); } } - .icon { - $icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M8 1v2H4C1.8 3 0 4.8 0 7v2a4 4 0 0 0 1.02 2.672 1 1 0 1 0 1.488-1.336A1.97 1.97 0 0 1 2 9V7c0-1.125.875-2 2-2h4v2h1v-.008a1 1 0 0 0 .707-.285l2-2a1 1 0 0 0 0-1.414l-2-2A1 1 0 0 0 9 1.008V1zm6.29 3a1 1 0 0 0-.72.258.993.993 0 0 0-.078 1.41c.317.355.508.816.508 1.34v2c0 1.125-.875 2-2 2H8V9H7v.008a1 1 0 0 0-.707.285l-2 2a1 1 0 0 0 0 1.414l2 2c.187.184.441.29.707.285V15h1v-1.992h4c2.2 0 4-1.805 4-4v-2a4 4 0 0 0-1.02-2.676A1 1 0 0 0 14.29 4m0 0'/%3E%3C/svg%3E"); - -webkit-mask-image: $icon; - mask-image: $icon; - background-color: var(--boosts-fg); - } - } + .faves { + color: var(--faves-fg); - .faves { - color: var(--faves-fg); + &:hover { + background-color: var(--faves-bg); - &:hover { - background-color: var(--faves-bg); + .icon { + transform: rotate(72deg); + } + } .icon { - transform: rotate(72deg); + $icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M8 0a1 1 0 0 0-.95.684l-1.448 4.34-4.59-.016C.032 5.004-.371 6.266.43 6.828l3.625 2.555-1.5 4.285c-.317.902.687 1.691 1.492 1.172l4.004-2.594 3.894 2.586c.801.531 1.817-.258 1.5-1.16l-1.504-4.29 3.645-2.577c.789-.563.394-1.809-.574-1.813l-4.66-.015L8.949.69A1 1 0 0 0 8 0m0 0'/%3E%3C/svg%3E"); + -webkit-mask-image: $icon; + mask-image: $icon; + background-color: var(--faves-fg); } } - - .icon { - $icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M8 0a1 1 0 0 0-.95.684l-1.448 4.34-4.59-.016C.032 5.004-.371 6.266.43 6.828l3.625 2.555-1.5 4.285c-.317.902.687 1.691 1.492 1.172l4.004-2.594 3.894 2.586c.801.531 1.817-.258 1.5-1.16l-1.504-4.29 3.645-2.577c.789-.563.394-1.809-.574-1.813l-4.66-.015L8.949.69A1 1 0 0 0 8 0m0 0'/%3E%3C/svg%3E"); - -webkit-mask-image: $icon; - mask-image: $icon; - background-color: var(--faves-fg); - } } } }