diff --git a/app/javascript/flavours/glitch/styles/components/status.scss b/app/javascript/flavours/glitch/styles/components/status.scss index 010c8486a..486c3cde6 100644 --- a/app/javascript/flavours/glitch/styles/components/status.scss +++ b/app/javascript/flavours/glitch/styles/components/status.scss @@ -48,13 +48,11 @@ .status__content { position: relative; - margin: 10px 0; font-size: 15px; line-height: 20px; word-wrap: break-word; font-weight: 400; overflow: visible; - padding-top: 5px; clear: both; &:focus { @@ -122,16 +120,6 @@ font-size: 0.8em; } } - - .status__content__spoiler-link { - background: lighten($ui-base-color, 30%); - - &:hover, - &:focus { - background: lighten($ui-base-color, 33%); - text-decoration: none; - } - } } .translate-button { @@ -143,36 +131,6 @@ color: $dark-text-color; } -.status__content__spoiler-link { - display: inline-block; - border-radius: 2px; - background: lighten($ui-base-color, 30%); - border: 0; - color: $inverted-text-color; - font-weight: 700; - font-size: 11px; - padding: 0 5px; - text-transform: uppercase; - line-height: inherit; - cursor: pointer; - vertical-align: top; - - &:hover { - background: lighten($ui-base-color, 33%); - text-decoration: none; - } - - .status__content__spoiler-icon { - display: inline-block; - margin-inline-start: 5px; - border-inline-start: 1px solid currentColor; - padding: 0; - padding-inline-start: 4px; - font-size: 16px; - vertical-align: -2px; - } -} - .notif-cleaning { .status, .notification { @@ -227,6 +185,9 @@ } .status { + display: flex; + flex-direction: column; + gap: 10px; padding: 15px; position: relative; height: auto; @@ -401,45 +362,6 @@ overflow: hidden; } -.status__info__account .status__display-name { - display: block; - max-width: 100%; -} - -.status__info { - display: flex; - justify-content: space-between; - font-size: 15px; - - > span { - text-overflow: ellipsis; - overflow: hidden; - } - - .notification__message > span { - word-wrap: break-word; - } -} - -.status__info__icons { - display: flex; - align-items: center; - height: 1em; - color: $action-button-color; - - .status__media-icon, - .status__visibility-icon, - .status__reply-icon, - .text-icon { - padding-inline-start: 2px; - padding-inline-end: 2px; - } - - .status__collapse-button.active > .svg-icon { - transform: rotate(-180deg); - } -} - .no-reduce-motion .status__collapse-button { &.activate { & > .fa-angle-double-up { @@ -454,12 +376,6 @@ } } -.status__info__account { - display: flex; - align-items: center; - justify-content: flex-start; -} - .status-check-box__status { display: block; box-sizing: border-box; @@ -499,11 +415,16 @@ display: flex; gap: 10px; align-items: center; - margin-top: 8px; svg.gts-icon { --size: 20px; } + + &.detailed-status__action-bar { + svg.gts-icon { + --size: 24px; + } + } } .status__action-bar-button, diff --git a/app/javascript/flavours/glitch/styles/gts/_config.scss b/app/javascript/flavours/glitch/styles/gts/_config.scss index 97513fc21..f52cf0f1c 100644 --- a/app/javascript/flavours/glitch/styles/gts/_config.scss +++ b/app/javascript/flavours/glitch/styles/gts/_config.scss @@ -10,4 +10,4 @@ @import 'sizes'; /* 🧩 Components */ -@import 'status-prepend'; +@import 'status'; diff --git a/app/javascript/flavours/glitch/styles/gts/colors.scss b/app/javascript/flavours/glitch/styles/gts/colors.scss index fa078b791..3bcc618d0 100644 --- a/app/javascript/flavours/glitch/styles/gts/colors.scss +++ b/app/javascript/flavours/glitch/styles/gts/colors.scss @@ -8,7 +8,11 @@ --color-accent-fg: #9baec8; --color-fg: #d6d2e0; + --color-secondary-fg: #9c9ba6; --color-secondary-bg: #13111f; --color-content-fg: var(--color-fg); --color-content-secondary-bg: var(--color-secondary-bg); + + --color-status-fg: ; + --color-status-bg: #282c37; } diff --git a/app/javascript/flavours/glitch/styles/gts/status.scss b/app/javascript/flavours/glitch/styles/gts/status.scss new file mode 100644 index 000000000..b926e2902 --- /dev/null +++ b/app/javascript/flavours/glitch/styles/gts/status.scss @@ -0,0 +1,15 @@ +/* 🚥 Status */ +@import 'status/status-account'; +@import 'status/status-display-name'; +@import 'status/status-icons'; +@import 'status/status-info'; +@import 'status/status-prepend'; +@import 'status/status-spoiler'; + +.status__content { + line-height: 1.5; +} + +.status__action-bar :is(a, button) { + color: var(--color-secondary-fg); +} diff --git a/app/javascript/flavours/glitch/styles/gts/status/status-account.scss b/app/javascript/flavours/glitch/styles/gts/status/status-account.scss new file mode 100644 index 000000000..196953a82 --- /dev/null +++ b/app/javascript/flavours/glitch/styles/gts/status/status-account.scss @@ -0,0 +1,6 @@ +/* 🚥 Status: Account */ +.status__info__account { + display: grid; + grid-template-columns: auto 1fr; + gap: 10px; +} diff --git a/app/javascript/flavours/glitch/styles/gts/status/status-display-name.scss b/app/javascript/flavours/glitch/styles/gts/status/status-display-name.scss new file mode 100644 index 000000000..db8db7fbd --- /dev/null +++ b/app/javascript/flavours/glitch/styles/gts/status/status-display-name.scss @@ -0,0 +1,29 @@ +/* 🚥 Status: Display name */ +.status__display-name { + align-self: start; + justify-self: start; + color: var(--color-content-fg); + font-size: 15px; + text-decoration: none; + overflow: hidden; + + .display-name { + font-weight: 700; + text-overflow: clip; + } + + .display-name__html { + font-weight: 700; + } + + .display-name__account { + color: var(--color-secondary-fg); + } + + &:hover .display-name__html { + text-decoration-line: underline; + text-decoration-color: currentColor; + text-decoration-thickness: 2px; + text-underline-offset: 2px; + } +} diff --git a/app/javascript/flavours/glitch/styles/gts/status/status-icons.scss b/app/javascript/flavours/glitch/styles/gts/status/status-icons.scss new file mode 100644 index 000000000..4d97a119f --- /dev/null +++ b/app/javascript/flavours/glitch/styles/gts/status/status-icons.scss @@ -0,0 +1,45 @@ +/* 🚥 Status: Icons */ +.status__info__icons { + position: relative; + display: flex; + gap: 5px; + align-items: start; + color: var(--color-secondary-fg); + + svg.gts-icon { + display: block; + --size: 18px; + } + + .text-icon { + line-height: 20px; + } + + &::before { + position: absolute; + top: 0; + right: calc(100% + 5px); + width: 20px; + height: 100%; + content: ''; + background: linear-gradient(90deg, transparent, var(--color-status-bg)); + transition: all 0.2s; + } +} + +.status__info__icons button.icon-button { + display: block; + color: inherit; + + svg.gts-icon { + transition: transform ease-in-out 0.2s; + } + + &.active svg.gts-icon { + transform: rotate(-180deg); + } + + &:hover { + color: var(--color-accent-hover); + } +} diff --git a/app/javascript/flavours/glitch/styles/gts/status/status-info.scss b/app/javascript/flavours/glitch/styles/gts/status/status-info.scss new file mode 100644 index 000000000..52a13843e --- /dev/null +++ b/app/javascript/flavours/glitch/styles/gts/status/status-info.scss @@ -0,0 +1,10 @@ +/* 🚥 Status: Info */ +.status__info { + display: grid; + gap: 5px; + grid-template-columns: 1fr auto; + + .notification__message { + grid-column: 1/-1; + } +} diff --git a/app/javascript/flavours/glitch/styles/gts/status-prepend.scss b/app/javascript/flavours/glitch/styles/gts/status/status-prepend.scss similarity index 96% rename from app/javascript/flavours/glitch/styles/gts/status-prepend.scss rename to app/javascript/flavours/glitch/styles/gts/status/status-prepend.scss index 70cef0468..a506b4ae6 100644 --- a/app/javascript/flavours/glitch/styles/gts/status-prepend.scss +++ b/app/javascript/flavours/glitch/styles/gts/status/status-prepend.scss @@ -4,7 +4,6 @@ align-items: center; align-self: start; gap: 5px; - margin-block-end: 10px; padding: 5px 10px; border: 1px solid var(--color-accent-lines); border-radius: 50px; diff --git a/app/javascript/flavours/glitch/styles/gts/status/status-spoiler.scss b/app/javascript/flavours/glitch/styles/gts/status/status-spoiler.scss new file mode 100644 index 000000000..5bd875753 --- /dev/null +++ b/app/javascript/flavours/glitch/styles/gts/status/status-spoiler.scss @@ -0,0 +1,23 @@ +/* 🚥 Status: Spoiler link */ +.status__content__spoiler-link { + display: flex; + gap: 5px; + margin-top: 5px; + padding: 5px 8px; + border: 1px solid var(--color-secondary-fg); + border-radius: 8px; + color: var(--color-secondary-fg); + font-size: 12px; + font-weight: 500; + background: transparent; + transition: all 0.3s; + + .gts-icon { + --size: 14px; + } + + &:hover { + border-color: var(--color-fg); + color: var(--color-fg); + } +}