From 483192e936a8c1a176988a7c9287fb4e43a3a9e1 Mon Sep 17 00:00:00 2001 From: nileane Date: Sun, 10 Dec 2023 21:08:07 +0000 Subject: [PATCH] Copy CSS files to installation folder --- .../tangerineui-cherry.scss | 84 ++++++++++--------- .../tangerineui-purple.scss | 84 ++++++++++--------- .../styles/tangerineui/tangerineui.scss | 84 ++++++++++--------- 3 files changed, 138 insertions(+), 114 deletions(-) diff --git a/mastodon/app/javascript/styles/tangerineui-cherry/tangerineui-cherry.scss b/mastodon/app/javascript/styles/tangerineui-cherry/tangerineui-cherry.scss index c72e29d..cfe8532 100644 --- a/mastodon/app/javascript/styles/tangerineui-cherry/tangerineui-cherry.scss +++ b/mastodon/app/javascript/styles/tangerineui-cherry/tangerineui-cherry.scss @@ -840,6 +840,29 @@ body.app-body { +@keyframes fadein { + from { + opacity: 0; + transform: translateY(-10%); + } + to { + opacity: 1; + transform: translateY(0); + } +} +@keyframes fadein-short { + from { + transform: translate(0, -10px); + opacity: 0; + } + to { + transform: translate(0, 0); + opacity: 1; + } +} + + + /* 📝 Compose panel ---------------- */ .app-body .compose-form { @@ -962,10 +985,12 @@ body.app-body { box-sizing: border-box; border-left: 1px solid var(--color-lines); border-right: 1px solid var(--color-lines); + padding: 5px; } .app-body .compose-form .poll__option .autosuggest-input { border-left: 0; border-right: 0; + padding: 0; } .app-body .compose-form .spoiler-input.spoiler-input--visible { margin-bottom: 0; @@ -976,16 +1001,11 @@ body.app-body { background-color: var(--color-accent-bg); color: var(--color-accent); margin-bottom: 0; - border-radius: 10px; + border-radius: 8px; padding: 12px 15px; - box-shadow: - 0 0 0 4px inset var(--color-content-bg); } .app-body .compose-form .spoiler-input__input:focus { - box-shadow: - 0 0 0 4px inset var(--color-content-bg), - 0 0 0 6px inset var(--color-accent), - 0 0 0 1px inset var(--color-content-bg); + box-shadow: 0 0 0 1px inset var(--color-accent); } .app-body .display-name { color: var(--color-content-fg); @@ -1006,6 +1026,11 @@ body.app-body { } } +.app-body .compose-form .attachment-list.compact .icon { + color: var(--color-content-fg-muted); + vertical-align: bottom; +} + /* Publish button */ .app-body .compose-form .compose-form__publish .compose-form__publish-button-wrapper { padding-top: 10px; @@ -1036,9 +1061,7 @@ body.app-body { overflow: hidden; border-radius: 8px; background-color: var(--color-content-bg); - box-shadow: - 0 0 0 1px var(--color-lines), - 0 0 5px rgba(0, 0, 0, .15); + border: 1px solid var(--color-lines); } .app-body .emoji-mart { width: 100% !important; @@ -2650,16 +2673,6 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu animation: fadein .5s 1; } } -@keyframes fadein { - from { - opacity: 0; - transform: translateY(-10%); - } - to { - opacity: 1; - transform: translateY(0); - } -} @media screen and (max-width:1174px) { .app-body .columns-area__panels__pane--navigational .columns-area__panels__pane__inner { width: 100vw; @@ -2921,6 +2934,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu } .app-body .account__header__bio .account__header__fields .verified :is(a, dd) { color: var(--color-accent); + gap: 5px; } .app-body .account__header__bio .account__header__fields :is(.verified dt, dt) { color: var(--color-content-fg); @@ -3265,24 +3279,16 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu } .app-body .account .account__details .verified-badge span { font-weight: 500; -} -@keyframes fadein-short { - from { - transform: translate(0, -10px); - opacity: 0; - } - to { - transform: translate(0, 0); - opacity: 1; - } +} +.app-body .compose-panel:has(> .search.active) { + overflow: visible; } .app-body .search__popout { background-color: var(--color-content-bg); border-radius: 8px; - box-shadow: none; margin-top: 10px; border: 1px solid var(--color-lines); - animation: .3s fadein-short 1; + animation: fadein-short .2s 1; } .app-body .search__popout h4 { font-weight: bold; @@ -3298,6 +3304,9 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .app-body .search__popout__menu__item mark { color: var(--color-content-fg-bold); } +.app-body .search__popout__menu__item:is(.selected, :active, :focus, :hover) .icon-button { + color: var(--color-accent-fg); +} .app-body .search__popout__menu__item .icon-button:is(:active, :focus, :hover) { background-color: var(--color-content-secondary-bg); color: var(--color-accent); @@ -3762,8 +3771,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu } -/* ⏺️ Other UI components : buttons, toggles, ... - ----------------------------------------- */ + .app-body .button, .app-body .account__header__tabs__buttons .icon-button { border-radius: 8px; @@ -3837,7 +3845,6 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu background-color: var(--color-content-bg); border-radius: 8px; border: 1px solid var(--color-lines); - box-shadow: 0 0 5px rgba(0, 0, 0, .15); } .app-body .language-dropdown__dropdown__results__item { border-radius: 8px; @@ -3879,7 +3886,6 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu background-color: var(--color-accent-focus); } -/* ⏺️ Toggles */ .app-body .setting-toggle__label { vertical-align: top; } @@ -3906,8 +3912,6 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu background-color: var(--color-accent-focus); } - -/* ⏺️ Radio buttons */ .app-body .radio-button { color: var(--color-content-fg); } @@ -3994,6 +3998,10 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu background-image: var(--icon-at-inv); } +.app-body .dropdown-animation { + animation: fadein-short .2s 1; +} + .app-body .button.button-tertiary:is(.button--confirmation, .button--destructive) { background-color: transparent; } diff --git a/mastodon/app/javascript/styles/tangerineui-purple/tangerineui-purple.scss b/mastodon/app/javascript/styles/tangerineui-purple/tangerineui-purple.scss index f1d60df..aadab80 100644 --- a/mastodon/app/javascript/styles/tangerineui-purple/tangerineui-purple.scss +++ b/mastodon/app/javascript/styles/tangerineui-purple/tangerineui-purple.scss @@ -839,6 +839,29 @@ body.app-body { +@keyframes fadein { + from { + opacity: 0; + transform: translateY(-10%); + } + to { + opacity: 1; + transform: translateY(0); + } +} +@keyframes fadein-short { + from { + transform: translate(0, -10px); + opacity: 0; + } + to { + transform: translate(0, 0); + opacity: 1; + } +} + + + /* 📝 Compose panel ---------------- */ .app-body .compose-form { @@ -961,10 +984,12 @@ body.app-body { box-sizing: border-box; border-left: 1px solid var(--color-lines); border-right: 1px solid var(--color-lines); + padding: 5px; } .app-body .compose-form .poll__option .autosuggest-input { border-left: 0; border-right: 0; + padding: 0; } .app-body .compose-form .spoiler-input.spoiler-input--visible { margin-bottom: 0; @@ -975,16 +1000,11 @@ body.app-body { background-color: var(--color-accent-bg); color: var(--color-accent); margin-bottom: 0; - border-radius: 10px; + border-radius: 8px; padding: 12px 15px; - box-shadow: - 0 0 0 4px inset var(--color-content-bg); } .app-body .compose-form .spoiler-input__input:focus { - box-shadow: - 0 0 0 4px inset var(--color-content-bg), - 0 0 0 6px inset var(--color-accent), - 0 0 0 1px inset var(--color-content-bg); + box-shadow: 0 0 0 1px inset var(--color-accent); } .app-body .display-name { color: var(--color-content-fg); @@ -1005,6 +1025,11 @@ body.app-body { } } +.app-body .compose-form .attachment-list.compact .icon { + color: var(--color-content-fg-muted); + vertical-align: bottom; +} + /* Publish button */ .app-body .compose-form .compose-form__publish .compose-form__publish-button-wrapper { padding-top: 10px; @@ -1035,9 +1060,7 @@ body.app-body { overflow: hidden; border-radius: 8px; background-color: var(--color-content-bg); - box-shadow: - 0 0 0 1px var(--color-lines), - 0 0 5px rgba(0, 0, 0, .15); + border: 1px solid var(--color-lines); } .app-body .emoji-mart { width: 100% !important; @@ -2649,16 +2672,6 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu animation: fadein .5s 1; } } -@keyframes fadein { - from { - opacity: 0; - transform: translateY(-10%); - } - to { - opacity: 1; - transform: translateY(0); - } -} @media screen and (max-width:1174px) { .app-body .columns-area__panels__pane--navigational .columns-area__panels__pane__inner { width: 100vw; @@ -2920,6 +2933,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu } .app-body .account__header__bio .account__header__fields .verified :is(a, dd) { color: var(--color-accent); + gap: 5px; } .app-body .account__header__bio .account__header__fields :is(.verified dt, dt) { color: var(--color-content-fg); @@ -3264,24 +3278,16 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu } .app-body .account .account__details .verified-badge span { font-weight: 500; -} -@keyframes fadein-short { - from { - transform: translate(0, -10px); - opacity: 0; - } - to { - transform: translate(0, 0); - opacity: 1; - } +} +.app-body .compose-panel:has(> .search.active) { + overflow: visible; } .app-body .search__popout { background-color: var(--color-content-bg); border-radius: 8px; - box-shadow: none; margin-top: 10px; border: 1px solid var(--color-lines); - animation: .3s fadein-short 1; + animation: fadein-short .2s 1; } .app-body .search__popout h4 { font-weight: bold; @@ -3297,6 +3303,9 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .app-body .search__popout__menu__item mark { color: var(--color-content-fg-bold); } +.app-body .search__popout__menu__item:is(.selected, :active, :focus, :hover) .icon-button { + color: var(--color-accent-fg); +} .app-body .search__popout__menu__item .icon-button:is(:active, :focus, :hover) { background-color: var(--color-content-secondary-bg); color: var(--color-accent); @@ -3761,8 +3770,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu } -/* ⏺️ Other UI components : buttons, toggles, ... - ----------------------------------------- */ + .app-body .button, .app-body .account__header__tabs__buttons .icon-button { border-radius: 8px; @@ -3836,7 +3844,6 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu background-color: var(--color-content-bg); border-radius: 8px; border: 1px solid var(--color-lines); - box-shadow: 0 0 5px rgba(0, 0, 0, .15); } .app-body .language-dropdown__dropdown__results__item { border-radius: 8px; @@ -3878,7 +3885,6 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu background-color: var(--color-accent-focus); } -/* ⏺️ Toggles */ .app-body .setting-toggle__label { vertical-align: top; } @@ -3905,8 +3911,6 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu background-color: var(--color-accent-focus); } - -/* ⏺️ Radio buttons */ .app-body .radio-button { color: var(--color-content-fg); } @@ -3993,6 +3997,10 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu background-image: var(--icon-at-inv); } +.app-body .dropdown-animation { + animation: fadein-short .2s 1; +} + .app-body .button.button-tertiary:is(.button--confirmation, .button--destructive) { background-color: transparent; } diff --git a/mastodon/app/javascript/styles/tangerineui/tangerineui.scss b/mastodon/app/javascript/styles/tangerineui/tangerineui.scss index 7ee8823..fcabdad 100644 --- a/mastodon/app/javascript/styles/tangerineui/tangerineui.scss +++ b/mastodon/app/javascript/styles/tangerineui/tangerineui.scss @@ -839,6 +839,29 @@ body.app-body { +@keyframes fadein { + from { + opacity: 0; + transform: translateY(-10%); + } + to { + opacity: 1; + transform: translateY(0); + } +} +@keyframes fadein-short { + from { + transform: translate(0, -10px); + opacity: 0; + } + to { + transform: translate(0, 0); + opacity: 1; + } +} + + + /* 📝 Compose panel ---------------- */ .app-body .compose-form { @@ -961,10 +984,12 @@ body.app-body { box-sizing: border-box; border-left: 1px solid var(--color-lines); border-right: 1px solid var(--color-lines); + padding: 5px; } .app-body .compose-form .poll__option .autosuggest-input { border-left: 0; border-right: 0; + padding: 0; } .app-body .compose-form .spoiler-input.spoiler-input--visible { margin-bottom: 0; @@ -975,16 +1000,11 @@ body.app-body { background-color: var(--color-accent-bg); color: var(--color-accent); margin-bottom: 0; - border-radius: 10px; + border-radius: 8px; padding: 12px 15px; - box-shadow: - 0 0 0 4px inset var(--color-content-bg); } .app-body .compose-form .spoiler-input__input:focus { - box-shadow: - 0 0 0 4px inset var(--color-content-bg), - 0 0 0 6px inset var(--color-accent), - 0 0 0 1px inset var(--color-content-bg); + box-shadow: 0 0 0 1px inset var(--color-accent); } .app-body .display-name { color: var(--color-content-fg); @@ -1005,6 +1025,11 @@ body.app-body { } } +.app-body .compose-form .attachment-list.compact .icon { + color: var(--color-content-fg-muted); + vertical-align: bottom; +} + /* Publish button */ .app-body .compose-form .compose-form__publish .compose-form__publish-button-wrapper { padding-top: 10px; @@ -1035,9 +1060,7 @@ body.app-body { overflow: hidden; border-radius: 8px; background-color: var(--color-content-bg); - box-shadow: - 0 0 0 1px var(--color-lines), - 0 0 5px rgba(0, 0, 0, .15); + border: 1px solid var(--color-lines); } .app-body .emoji-mart { width: 100% !important; @@ -2649,16 +2672,6 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu animation: fadein .5s 1; } } -@keyframes fadein { - from { - opacity: 0; - transform: translateY(-10%); - } - to { - opacity: 1; - transform: translateY(0); - } -} @media screen and (max-width:1174px) { .app-body .columns-area__panels__pane--navigational .columns-area__panels__pane__inner { width: 100vw; @@ -2920,6 +2933,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu } .app-body .account__header__bio .account__header__fields .verified :is(a, dd) { color: var(--color-accent); + gap: 5px; } .app-body .account__header__bio .account__header__fields :is(.verified dt, dt) { color: var(--color-content-fg); @@ -3264,24 +3278,16 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu } .app-body .account .account__details .verified-badge span { font-weight: 500; -} -@keyframes fadein-short { - from { - transform: translate(0, -10px); - opacity: 0; - } - to { - transform: translate(0, 0); - opacity: 1; - } +} +.app-body .compose-panel:has(> .search.active) { + overflow: visible; } .app-body .search__popout { background-color: var(--color-content-bg); border-radius: 8px; - box-shadow: none; margin-top: 10px; border: 1px solid var(--color-lines); - animation: .3s fadein-short 1; + animation: fadein-short .2s 1; } .app-body .search__popout h4 { font-weight: bold; @@ -3297,6 +3303,9 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .app-body .search__popout__menu__item mark { color: var(--color-content-fg-bold); } +.app-body .search__popout__menu__item:is(.selected, :active, :focus, :hover) .icon-button { + color: var(--color-accent-fg); +} .app-body .search__popout__menu__item .icon-button:is(:active, :focus, :hover) { background-color: var(--color-content-secondary-bg); color: var(--color-accent); @@ -3761,8 +3770,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu } -/* ⏺️ Other UI components : buttons, toggles, ... - ----------------------------------------- */ + .app-body .button, .app-body .account__header__tabs__buttons .icon-button { border-radius: 8px; @@ -3836,7 +3844,6 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu background-color: var(--color-content-bg); border-radius: 8px; border: 1px solid var(--color-lines); - box-shadow: 0 0 5px rgba(0, 0, 0, .15); } .app-body .language-dropdown__dropdown__results__item { border-radius: 8px; @@ -3878,7 +3885,6 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu background-color: var(--color-accent-focus); } -/* ⏺️ Toggles */ .app-body .setting-toggle__label { vertical-align: top; } @@ -3905,8 +3911,6 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu background-color: var(--color-accent-focus); } - -/* ⏺️ Radio buttons */ .app-body .radio-button { color: var(--color-content-fg); } @@ -3993,6 +3997,10 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu background-image: var(--icon-at-inv); } +.app-body .dropdown-animation { + animation: fadein-short .2s 1; +} + .app-body .button.button-tertiary:is(.button--confirmation, .button--destructive) { background-color: transparent; }