diff --git a/app/javascript/styles/tangerineui/chingerine.scss b/app/javascript/styles/tangerineui/chingerine.scss index 4779e52ad..4196aa25d 100644 --- a/app/javascript/styles/tangerineui/chingerine.scss +++ b/app/javascript/styles/tangerineui/chingerine.scss @@ -1,6 +1,6 @@ /* Chinwag Meta */ :root { - --version-tag: 'cw1'; + --version-tag: 'cw999'; --variant-name: 'Chinwag'; --variant-emoji: '\1F986\00A0'; --variant: var(--variant-emoji) var(--variant-name); @@ -285,3 +285,198 @@ body { .app-body .navigation-bar .account__display-name { font-size: 15px; } + +/* Trial 4.5.x changes */ +.app-body .status:not(.compose-form .status) { + margin-left: 56px; + padding: 0 10px; + border-bottom: 0; +} + +.app-body .status__info:not(.compose-form .status__info) { + height: 22px; + width: calc(100% + 56px); + gap: 2px; + margin-inline-start: -56px; + padding: 0; + margin-bottom: 0; + line-height: 0.625; + align-items: start; +} + +.app-body .status__info:not(.compose-form .status__info) .status__display-name { + overflow: visible; + align-items: start; + max-height: 22px; +} + +.app-body + .status__info:not(.compose-form .status__info) + .status__display-name + .display-name + bdi, +.app-body + .status__info:not(.compose-form .status__info) + .status__display-name + .display-name__account { + vertical-align: top; +} + +.app-body + .status__info:not(.compose-form .status__info) + .status__display-name + .display-name__account { + display: inline; + opacity: 0.6; +} + +.app-body .status__relative-time:not(.compose-form .status__relative-time) { + height: 22px; + color: var(--color-content-fg); + display: flex; + position: absolute; + inset-inline-end: 20px; + z-index: 1; +} + +.app-body .status__avatar:not(.compose-form .status__avatar) { + margin-bottom: -10px; + z-index: 2; + border-radius: 50%; + outline: 6px solid var(--color-post-bg); + background-color: var(--color-post-bg); + transition: outline 0.3s; +} + +.app-body .status__quote:not(.compose-form .status__quote) { + margin-inline-start: 0; + border-radius: 10px; + border: 1px solid var(--color-lines); + transition: all 0.3s; +} + +.app-body .status--is-quote:not(.compose-form .status--is-quote) { + margin-inline-start: 0; + padding: 0; + overflow: hidden; +} + +.app-body .status--is-quote:not(.compose-form .status--is-quote) .status__info { + margin-inline-start: 0; + margin-block-end: 5px; +} + +.app-body + .status--is-quote:not(.compose-form .status--is-quote) + .status__info + .status__display-name { + gap: 6px; +} + +.app-body + .status--is-quote:not(.compose-form .status--is-quote) + .status__relative-time { + inset-inline-end: 10px; +} + +/* Temporary Mastodon 4.5.0 fixes pending TangerineUI 2.5.0 release */ +.app-body .status--has-quote .status__content { + display: block; +} + +.app-body .status__quote-author-button { + background: var(--color-accent-bg); + color: var(--color-accent); +} + +.app-body .notification-ungrouped--quote .status--is-quote .status__avatar, +.app-body .notification-ungrouped--quote .status--is-quote .account__avatar { + width: 16px !important; + height: 16px !important; +} + +.app-body .notification-bar__action { + color: var(--color-accent); +} + +.app-body .notification-bar__action:hover, +.app-body .notification-bar__action:focus, +.app-body .notification-bar__action:active { + background: var(--color-accent-bg); +} + +.app-body .dialog-modal__header { + border-bottom-color: var(--color-lines); +} + +.app-body .dialog-modal__content__description { + color: var(--color-content-fg); +} + +.app-body .visibility-dropdown__button { + background: var(--color-accent-bg); + color: var(--color-content-fg); + border-color: var(--color-accent-lines); +} + +.app-body .privacy-dropdown__dropdown, +.app-body .language-dropdown__dropdown, +.app-body .visibility-dropdown__dropdown { + background: var(--color-content-secondary-bg); + border-color: var(--color-content-secondary-separator); +} + +.app-body .privacy-dropdown__option__content strong, +.app-body .visibility-dropdown__option__content strong { + color: var(--color-content-fg-bold); +} + +.app-body .privacy-dropdown__option__content, +.app-body .visibility-dropdown__option__content { + color: var(--color-content-fg); +} + +.app-body .privacy-dropdown__option:focus, +.app-body .privacy-dropdown__option.active, +.app-body .visibility-dropdown__option:focus, +.app-body .visibility-dropdown__option.active { + background: var(--color-accent); + color: var(--color-accent-fg); +} + +.app-body .privacy-dropdown__option:hover, +.app-body .privacy-dropdown__option:active, +.app-body .visibility-dropdown__option:hover, +.app-body .visibility-dropdown__option:active { + background: var(--color-accent-focus); +} + +.app-body .visibility-dropdown__option:is(:active, .active) .icon-globe { + background-image: var(--icon-globe-visibility-inv); +} + +.app-body .visibility-dropdown__option:is(:active, .active) .icon-unlock { + background-image: var(--icon-unlock-inv); +} + +.app-body .visibility-dropdown__option:is(:active, .active) .icon-lock { + background-image: var(--icon-lock-inv); +} + +.app-body .visibility-dropdown__option:is(:active, .active) .icon-at { + background-image: var(--icon-at-inv); +} + +.app-body .compose-form .status__quote { + margin-bottom: 8px; + border-color: var(--color-accent-lines); +} + +.app-body .compose-form .status__wrapper { + padding: 0; +} + +.app-body .notification-ungrouped .status:not(.status--is-quote) { + border: 0; + padding: 0; +}