diff --git a/app/assets/stylesheets/card-perma.css b/app/assets/stylesheets/card-perma.css index 3dc16d5a2..e204547b4 100644 --- a/app/assets/stylesheets/card-perma.css +++ b/app/assets/stylesheets/card-perma.css @@ -511,4 +511,12 @@ } } } + + .card-perma__account-limit-message { + background-color: var(--color-canvas); + border: 2px solid var(--color-container); + border-radius: 4px; + margin-block-start: calc(var(--padding-block) / -2); + padding: 1ch 2ch; + } } diff --git a/app/assets/stylesheets/comments.css b/app/assets/stylesheets/comments.css index 2369d62b3..21578572b 100644 --- a/app/assets/stylesheets/comments.css +++ b/app/assets/stylesheets/comments.css @@ -1,4 +1,7 @@ @layer components { + /* List + /* ------------------------------------------------------------------------ */ + .comments { --avatar-size: 2.33em; --comment-padding-block: var(--block-space-half); @@ -21,10 +24,8 @@ } } - .comments__subscribers { - max-inline-size: var(--comment-max); - padding-inline: calc(var(--comment-padding-block) + var(--inline-space-double)); - } + /* Comment + /* ------------------------------------------------------------------------ */ .comment { /* Distinguish from the .comment class used for code formatting without extra specificity */ @@ -35,52 +36,6 @@ position: relative; } - .comment-by-system & { - --comment-padding-block: var(--block-space-half); - - text-align: center; - - &::before { - /* Make up space for lack of avatar */ - content: ""; - display: flex; - inline-size: calc(var(--comment-padding-inline) * 0.9); - } - - .comment__avatar { - display: none; - } - - .comment__author { - a { margin: 0 auto; } - h3 { margin-inline: auto; } - strong { display: none; } - } - - .comment__body { - padding: 0; - text-align: center; - } - - .comment__content { - --stripe-color: var(--color-ink-lightest); - - background-image: repeating-linear-gradient( - 45deg in srgb, - var(--color-canvas) 0 1px, - var(--stripe-color) 1px 10px); - padding-inline: var(--comment-padding-inline); - - .comments--system-expanded .comment-by-system & { - --stripe-color: color-mix(in srgb, var(--card-color) 10%, var(--color-canvas)); - } - } - - .reactions { - display: none !important; - } - } - .reactions { margin-block-start: var(--block-space-half); margin-inline: calc(var(--column-gap) / -1); @@ -195,7 +150,12 @@ } } + /* System comment + /* ------------------------------------------------------------------------ */ + .comment-by-system { + --stripe-color: var(--color-ink-lightest); + display: none; transition: var(--dialog-duration) allow-discrete; transition-property: display; @@ -203,6 +163,50 @@ .comments--system-expanded & { display: contents; } + + .comment { + --comment-padding-block: var(--block-space-half); + + text-align: center; + + &::before { + /* Make up space for lack of avatar */ + content: ""; + display: flex; + inline-size: calc(var(--comment-padding-inline) * 0.9); + } + } + + .comment__avatar { + display: none; + } + + .comment__author { + a { margin: 0 auto; } + h3 { margin-inline: auto; } + strong { display: none; } + } + + .comment__body { + padding: 0; + text-align: center; + } + + .comment__content { + background-image: repeating-linear-gradient( + 45deg in srgb, + var(--color-canvas) 0 1px, + var(--stripe-color) 1px 10px); + padding-inline: var(--comment-padding-inline); + + .comments--system-expanded .comment-by-system & { + --stripe-color: color-mix(in srgb, var(--card-color) 10%, var(--color-canvas)); + } + } + + .reactions { + display: none !important; + } } /* Show the last system comment */ @@ -220,4 +224,20 @@ display: none; } } + + .comment-by-system--account-limit { + --stripe-color: oklch(var(--lch-blue-lightest)); + + .comment__content { + padding: 3ch; + } + } + + /* Subscribers + /* ------------------------------------------------------------------------ */ + + .comments__subscribers { + max-inline-size: var(--comment-max); + padding-inline: calc(var(--comment-padding-block) + var(--inline-space-double)); + } } diff --git a/saas/app/views/cards/comments/saas/_storage_limit_exceeded.html.erb b/saas/app/views/cards/comments/saas/_storage_limit_exceeded.html.erb index 6be5fb587..82ab7f25e 100644 --- a/saas/app/views/cards/comments/saas/_storage_limit_exceeded.html.erb +++ b/saas/app/views/cards/comments/saas/_storage_limit_exceeded.html.erb @@ -1,4 +1,12 @@ -