From 8aa44738d5573446102b56e75ad92649cad03e01 Mon Sep 17 00:00:00 2001 From: nileane Date: Fri, 15 Dec 2023 16:15:25 +0000 Subject: [PATCH] Copy CSS files to installation folder --- .../tangerineui-cherry.scss | 63 +++++++++++++------ .../tangerineui-purple.scss | 63 +++++++++++++------ .../styles/tangerineui/tangerineui.scss | 63 +++++++++++++------ 3 files changed, 129 insertions(+), 60 deletions(-) diff --git a/mastodon/app/javascript/styles/tangerineui-cherry/tangerineui-cherry.scss b/mastodon/app/javascript/styles/tangerineui-cherry/tangerineui-cherry.scss index 3dec9dd..ded0ef4 100644 --- a/mastodon/app/javascript/styles/tangerineui-cherry/tangerineui-cherry.scss +++ b/mastodon/app/javascript/styles/tangerineui-cherry/tangerineui-cherry.scss @@ -327,6 +327,7 @@ body.app-body { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; border: 0; + padding-bottom: 1px; } .app-body .dismissable-banner + .scrollable { border-top-left-radius: 0; @@ -2826,6 +2827,12 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .app-body .account__header__bar { border: 0; } +.app-body .account__header__bar .avatar { + transition: transform .3s; +} +.app-body .account__header__bar .avatar:active { + transform: scale(.92); +} .app-body .account__header__bar .avatar .account__avatar { border-radius: 50%; border-width: 5px; @@ -4035,6 +4042,9 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu } .app-body .interaction-modal { background-color: var(--color-content-bg); + box-shadow: + 0 20px 25px -5px rgba(0, 0, 0, .25), + 0 8px 10px -6px rgba(0, 0, 0, .25); } .app-body .interaction-modal, .app-body .interaction-modal__lead h3 { @@ -4088,14 +4098,14 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu padding: 8px 18px; } .app-body .modal-root__overlay { - background-color: hsla(0, 0%, 23.5%, 0.7); + background-color: rgba(255, 255, 255, .9) !important; } @media (prefers-color-scheme: dark) { .app-body .modal-root__overlay { - background-color: hsla(0, 0%, 0%, 0.7); + background-color: rgba(3, 3, 3, .8) !important; } } -.app-body .modal-root__modal, +.app-body .interaction-modal, .app-body .boost-modal__container, .app-body .mute-modal__container, .app-body .block-modal__container { @@ -4146,12 +4156,6 @@ a:is(.active, /* Media modals */ -.app-body .modal-root__overlay { - background-color: transparent !important; -} -.app-body .modal-root__modal.media-modal { - background-color: rgba(255, 255, 255, .9); -} .app-body .media-modal__overlay .picture-in-picture__footer { background-color: transparent; } @@ -4172,11 +4176,6 @@ a:is(.active, .app-body .media-modal__page-dot { background-color: var(--color-content-fg); } -@media (prefers-color-scheme: dark) { - .app-body .modal-root__modal.media-modal { - background-color: rgba(3, 3, 3, .8); - } -} .app-body .media-modal__overlay .icon-external-link path { fill: var(--color-accent); } @@ -4367,6 +4366,10 @@ a:is(.active, .app-body .button:is(.button-secondary, .button-tertiary) { padding: 10px 18px; } +.app-body .sign-in-banner .button:active, +.app-body .button:is(.button-secondary, .button-tertiary):active { + transform: scale(.95); +} @media screen and (max-width:1174px) { .app-body .button.button-tertiary { padding: 7px 18px; @@ -4630,6 +4633,7 @@ a:is(.active, border: 1px solid var(--color-lines); display: flex; flex-flow: column; + padding-bottom: 20px; } @media screen and (max-width:889px) { .app-body .scrollable.about { @@ -4659,8 +4663,6 @@ a:is(.active, .app-body .about__footer { order: 7; } -.app-body .about__header h1, -.app-body .about__header p, .app-body #mastodon > div > div > div.columns-area__panels > div.columns-area__panels__main > div.columns-area.columns-area--mobile > div > div > div.about__section.active:nth-of-type(3) > div.about__section__title { display: none; } @@ -4678,8 +4680,20 @@ a:is(.active, .app-body .about__meta { margin-bottom: 10px; } -.app-body .about__header h1 { - margin-bottom: 0; +.app-body .about__header > h1 { + color: var(--color-content-fg); + margin: 30px 0 0 20px; + text-align: left; + font-variant: small-caps; + font-size: 20px; +} +.app-body .about__header > h1 + p { + color: var(--color-content-fg); + opacity: .8; + text-align: left; + margin-left: 20px; + margin-bottom: 15px; + font-size: 14px; } @media screen and (min-width:890px) { .app-body .scrollable.about { @@ -4765,10 +4779,13 @@ a:is(.active, .app-body .about__section__body .prose a:hover, .app-body .prose a strong { color: var(--color-accent); - text-decoration: none; + text-decoration-line: underline; + text-decoration-color: var(--color-accent-bg); + text-decoration-thickness: 2px; + text-underline-offset: 2px; } .app-body .about__section__body .prose a:hover { - text-decoration: underline; + text-decoration-color: var(--color-accent); } .app-body .about__section__body .prose small.lang_label { margin-left: -2em; @@ -4801,6 +4818,12 @@ a:is(.active, background-color: var(--color-content-secondary-bg); } +@media screen and (min-width:1175px) { + .app-body .about :is(.link-footer, .about__footer) { + display: none; + } +} + /* Privacy Policy page */ diff --git a/mastodon/app/javascript/styles/tangerineui-purple/tangerineui-purple.scss b/mastodon/app/javascript/styles/tangerineui-purple/tangerineui-purple.scss index 3495e55..18707c3 100644 --- a/mastodon/app/javascript/styles/tangerineui-purple/tangerineui-purple.scss +++ b/mastodon/app/javascript/styles/tangerineui-purple/tangerineui-purple.scss @@ -326,6 +326,7 @@ body.app-body { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; border: 0; + padding-bottom: 1px; } .app-body .dismissable-banner + .scrollable { border-top-left-radius: 0; @@ -2825,6 +2826,12 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .app-body .account__header__bar { border: 0; } +.app-body .account__header__bar .avatar { + transition: transform .3s; +} +.app-body .account__header__bar .avatar:active { + transform: scale(.92); +} .app-body .account__header__bar .avatar .account__avatar { border-radius: 50%; border-width: 5px; @@ -4034,6 +4041,9 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu } .app-body .interaction-modal { background-color: var(--color-content-bg); + box-shadow: + 0 20px 25px -5px rgba(0, 0, 0, .25), + 0 8px 10px -6px rgba(0, 0, 0, .25); } .app-body .interaction-modal, .app-body .interaction-modal__lead h3 { @@ -4087,14 +4097,14 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu padding: 8px 18px; } .app-body .modal-root__overlay { - background-color: hsla(0, 0%, 23.5%, 0.7); + background-color: rgba(255, 255, 255, .9) !important; } @media (prefers-color-scheme: dark) { .app-body .modal-root__overlay { - background-color: hsla(0, 0%, 0%, 0.7); + background-color: rgba(3, 3, 3, .8) !important; } } -.app-body .modal-root__modal, +.app-body .interaction-modal, .app-body .boost-modal__container, .app-body .mute-modal__container, .app-body .block-modal__container { @@ -4145,12 +4155,6 @@ a:is(.active, /* Media modals */ -.app-body .modal-root__overlay { - background-color: transparent !important; -} -.app-body .modal-root__modal.media-modal { - background-color: rgba(255, 255, 255, .9); -} .app-body .media-modal__overlay .picture-in-picture__footer { background-color: transparent; } @@ -4171,11 +4175,6 @@ a:is(.active, .app-body .media-modal__page-dot { background-color: var(--color-content-fg); } -@media (prefers-color-scheme: dark) { - .app-body .modal-root__modal.media-modal { - background-color: rgba(3, 3, 3, .8); - } -} .app-body .media-modal__overlay .icon-external-link path { fill: var(--color-accent); } @@ -4366,6 +4365,10 @@ a:is(.active, .app-body .button:is(.button-secondary, .button-tertiary) { padding: 10px 18px; } +.app-body .sign-in-banner .button:active, +.app-body .button:is(.button-secondary, .button-tertiary):active { + transform: scale(.95); +} @media screen and (max-width:1174px) { .app-body .button.button-tertiary { padding: 7px 18px; @@ -4629,6 +4632,7 @@ a:is(.active, border: 1px solid var(--color-lines); display: flex; flex-flow: column; + padding-bottom: 20px; } @media screen and (max-width:889px) { .app-body .scrollable.about { @@ -4658,8 +4662,6 @@ a:is(.active, .app-body .about__footer { order: 7; } -.app-body .about__header h1, -.app-body .about__header p, .app-body #mastodon > div > div > div.columns-area__panels > div.columns-area__panels__main > div.columns-area.columns-area--mobile > div > div > div.about__section.active:nth-of-type(3) > div.about__section__title { display: none; } @@ -4677,8 +4679,20 @@ a:is(.active, .app-body .about__meta { margin-bottom: 10px; } -.app-body .about__header h1 { - margin-bottom: 0; +.app-body .about__header > h1 { + color: var(--color-content-fg); + margin: 30px 0 0 20px; + text-align: left; + font-variant: small-caps; + font-size: 20px; +} +.app-body .about__header > h1 + p { + color: var(--color-content-fg); + opacity: .8; + text-align: left; + margin-left: 20px; + margin-bottom: 15px; + font-size: 14px; } @media screen and (min-width:890px) { .app-body .scrollable.about { @@ -4764,10 +4778,13 @@ a:is(.active, .app-body .about__section__body .prose a:hover, .app-body .prose a strong { color: var(--color-accent); - text-decoration: none; + text-decoration-line: underline; + text-decoration-color: var(--color-accent-bg); + text-decoration-thickness: 2px; + text-underline-offset: 2px; } .app-body .about__section__body .prose a:hover { - text-decoration: underline; + text-decoration-color: var(--color-accent); } .app-body .about__section__body .prose small.lang_label { margin-left: -2em; @@ -4800,6 +4817,12 @@ a:is(.active, background-color: var(--color-content-secondary-bg); } +@media screen and (min-width:1175px) { + .app-body .about :is(.link-footer, .about__footer) { + display: none; + } +} + /* Privacy Policy page */ diff --git a/mastodon/app/javascript/styles/tangerineui/tangerineui.scss b/mastodon/app/javascript/styles/tangerineui/tangerineui.scss index 3258bb3..0e9561e 100644 --- a/mastodon/app/javascript/styles/tangerineui/tangerineui.scss +++ b/mastodon/app/javascript/styles/tangerineui/tangerineui.scss @@ -326,6 +326,7 @@ body.app-body { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; border: 0; + padding-bottom: 1px; } .app-body .dismissable-banner + .scrollable { border-top-left-radius: 0; @@ -2825,6 +2826,12 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .app-body .account__header__bar { border: 0; } +.app-body .account__header__bar .avatar { + transition: transform .3s; +} +.app-body .account__header__bar .avatar:active { + transform: scale(.92); +} .app-body .account__header__bar .avatar .account__avatar { border-radius: 50%; border-width: 5px; @@ -4034,6 +4041,9 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu } .app-body .interaction-modal { background-color: var(--color-content-bg); + box-shadow: + 0 20px 25px -5px rgba(0, 0, 0, .25), + 0 8px 10px -6px rgba(0, 0, 0, .25); } .app-body .interaction-modal, .app-body .interaction-modal__lead h3 { @@ -4087,14 +4097,14 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu padding: 8px 18px; } .app-body .modal-root__overlay { - background-color: hsla(0, 0%, 23.5%, 0.7); + background-color: rgba(255, 255, 255, .9) !important; } @media (prefers-color-scheme: dark) { .app-body .modal-root__overlay { - background-color: hsla(0, 0%, 0%, 0.7); + background-color: rgba(3, 3, 3, .8) !important; } } -.app-body .modal-root__modal, +.app-body .interaction-modal, .app-body .boost-modal__container, .app-body .mute-modal__container, .app-body .block-modal__container { @@ -4145,12 +4155,6 @@ a:is(.active, /* Media modals */ -.app-body .modal-root__overlay { - background-color: transparent !important; -} -.app-body .modal-root__modal.media-modal { - background-color: rgba(255, 255, 255, .9); -} .app-body .media-modal__overlay .picture-in-picture__footer { background-color: transparent; } @@ -4171,11 +4175,6 @@ a:is(.active, .app-body .media-modal__page-dot { background-color: var(--color-content-fg); } -@media (prefers-color-scheme: dark) { - .app-body .modal-root__modal.media-modal { - background-color: rgba(3, 3, 3, .8); - } -} .app-body .media-modal__overlay .icon-external-link path { fill: var(--color-accent); } @@ -4366,6 +4365,10 @@ a:is(.active, .app-body .button:is(.button-secondary, .button-tertiary) { padding: 10px 18px; } +.app-body .sign-in-banner .button:active, +.app-body .button:is(.button-secondary, .button-tertiary):active { + transform: scale(.95); +} @media screen and (max-width:1174px) { .app-body .button.button-tertiary { padding: 7px 18px; @@ -4629,6 +4632,7 @@ a:is(.active, border: 1px solid var(--color-lines); display: flex; flex-flow: column; + padding-bottom: 20px; } @media screen and (max-width:889px) { .app-body .scrollable.about { @@ -4658,8 +4662,6 @@ a:is(.active, .app-body .about__footer { order: 7; } -.app-body .about__header h1, -.app-body .about__header p, .app-body #mastodon > div > div > div.columns-area__panels > div.columns-area__panels__main > div.columns-area.columns-area--mobile > div > div > div.about__section.active:nth-of-type(3) > div.about__section__title { display: none; } @@ -4677,8 +4679,20 @@ a:is(.active, .app-body .about__meta { margin-bottom: 10px; } -.app-body .about__header h1 { - margin-bottom: 0; +.app-body .about__header > h1 { + color: var(--color-content-fg); + margin: 30px 0 0 20px; + text-align: left; + font-variant: small-caps; + font-size: 20px; +} +.app-body .about__header > h1 + p { + color: var(--color-content-fg); + opacity: .8; + text-align: left; + margin-left: 20px; + margin-bottom: 15px; + font-size: 14px; } @media screen and (min-width:890px) { .app-body .scrollable.about { @@ -4764,10 +4778,13 @@ a:is(.active, .app-body .about__section__body .prose a:hover, .app-body .prose a strong { color: var(--color-accent); - text-decoration: none; + text-decoration-line: underline; + text-decoration-color: var(--color-accent-bg); + text-decoration-thickness: 2px; + text-underline-offset: 2px; } .app-body .about__section__body .prose a:hover { - text-decoration: underline; + text-decoration-color: var(--color-accent); } .app-body .about__section__body .prose small.lang_label { margin-left: -2em; @@ -4800,6 +4817,12 @@ a:is(.active, background-color: var(--color-content-secondary-bg); } +@media screen and (min-width:1175px) { + .app-body .about :is(.link-footer, .about__footer) { + display: none; + } +} + /* Privacy Policy page */