From 324c0b0033d67f42467623d67f5092283af113a6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=82=AA=E3=82=B9=E3=82=AB=E3=83=BC=E3=80=81?= Date: Mon, 28 Oct 2024 21:29:27 +0900 Subject: [PATCH] style: update Tangerine UI --- .../tangerineui-cherry.scss | 83 ++++++++++++++----- .../tangerineui-lagoon.scss | 83 ++++++++++++++----- 2 files changed, 122 insertions(+), 44 deletions(-) diff --git a/app/javascript/styles/tangerineui-cherry/tangerineui-cherry.scss b/app/javascript/styles/tangerineui-cherry/tangerineui-cherry.scss index 9d880f9ea..eb65e034e 100644 --- a/app/javascript/styles/tangerineui-cherry/tangerineui-cherry.scss +++ b/app/javascript/styles/tangerineui-cherry/tangerineui-cherry.scss @@ -8,7 +8,7 @@ /* 📄 Meta */ :root { - --version: "v2.0"; + --version: "v2.2"; --variant-name: "Cherry"; --variant-emoji: "\1F352\00A0"; @@ -948,7 +948,7 @@ path { } .app-body button.icon-button.active .icon-retweet, .app-body .detailed-status__button button.icon-button.active:hover .icon-retweet { - background-image: var(--icon-boost-active); + background-image: var(--icon-boost-accent-active); } .app-body .status__prepend__icon .icon-retweet, .app-body .notification-group--reblog .icon-repeat { @@ -2754,7 +2754,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu :is(.status__action-bar, .detailed-status__action-bar, .picture-in-picture__footer) .active .icon-retweet + .icon-button__counter > .animated-number { - color: #FF4014; + color: var(--color-accent); } .app-body :is(.status__action-bar, .detailed-status__action-bar, .picture-in-picture__footer) @@ -2819,12 +2819,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .app-body .status__action-bar { justify-content: left; margin-top: 8px; - gap: 22px; -} -@media screen and (max-width:550px) { - .app-body .status__action-bar { - gap: 10px; - } + gap: 9px; } .app-body .status__action-bar .status__action-bar__button-wrapper { flex-grow: 0; @@ -2913,6 +2908,8 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu align-items: center; background-color: var(--color-content-secondary-bg); color: var(--color-content-fg); + outline: 1px solid color-mix(in srgb, var(--color-fg), transparent 95%); + outline-offset: -1px; font-size: 13px; } .app-body .status__prepend:has(.status__prepend__icon .icon-retweet) { @@ -3083,8 +3080,10 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu font-size: 12px; } .app-body .status-card:has(+ .more-from-author) { + box-sizing: border-box; border-bottom-left-radius: 0; border-bottom-right-radius: 0; + border-bottom: 0; } .app-body .status-card + .more-from-author { background-color: var(--color-content-secondary-bg); @@ -3093,10 +3092,19 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu } .app-body .more-from-author { color: var(--color-content-fg); + overflow: hidden; } .app-body .more-from-author .logo { color: var(--color-content-fg); - width: 16px; + min-width: 16px; + height: 16px; +} +.app-body .more-from-author > span { + flex-grow: 1; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + mask-image: linear-gradient(90deg, black 80%, transparent 96%); } .app-body .notification-ungrouped .more-from-author :is(.account__avatar) { width: 16px !important; @@ -3493,11 +3501,25 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu box-shadow: inset 0 10px var(--color-bg); } .app-body .column-header__wrapper.active:before { - background: none; - opacity: 40%; + top: -17px; + bottom: unset; + opacity: 30%; + height: 35px; + width: 100%; + background: radial-gradient(ellipse, var(--color-accent) 0, transparent 60%); } .app-body .column-header__wrapper.active { - box-shadow: 0 0; + box-shadow: none; +} +@media screen and (min-width:1175px) { + .app-body .column-header__wrapper.active:before { + top: unset; + bottom: -15px; + border-top: 1px solid var(--color-lines-translucent); + } + .app-body .column-header__wrapper.active { + box-shadow: 0 1px 0 var(--color-lines-translucent); + } } .app-body .column-header { border-radius: 8px; @@ -3784,13 +3806,13 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu border-radius: 15px 15px 0 0; } @media (prefers-color-scheme: light) { - .app-body.theme-system .ui::after { + .app-body:is(.theme-system, .theme-mastodon-light) .ui::after { box-shadow: 0 -10px 0 10px #f3f5f7; border-radius: 15px 15px 0 0; } } @media (prefers-color-scheme: dark) { - .app-body.theme-system .ui::after { + .app-body:is(.theme-system, .theme-default) .ui::after { box-shadow: 0 -10px 0 10px #191b22; border-radius: 15px 15px 0 0; } @@ -5656,6 +5678,7 @@ button { width: 100%; border-bottom: 2px solid var(--color-content-secondary-separator); background-color: var(--color-content-bg); + color: var(--color-content-fg); box-sizing: border-box; } .app-body .item-list .column-link:hover { @@ -5686,10 +5709,25 @@ button { .app-body .list-adder .column-inline-form { border-radius: 0; } -.list-adder .list { +.app-body .list-adder .list { border-bottom: 2px solid var(--color-content-secondary-separator); } - +.app-body .list-editor .drawer__pager { + border: none; + border-radius: 0; +} +.app-body .list-editor .account__relationship .icon-button { + border-color: var(--color-accent); + color: var(--color-accent); +} +.app-body .list-editor .search .search__input { + border-top: 1px solid; + border-bottom: 1px solid; + border-color: var(--color-accent-lines); +} +.app-body .list-editor .search .search__input:focus { + border-color: var(--color-accent); +} /* ➕ Follow requests */ .app-body #Follow-requests { @@ -6292,11 +6330,9 @@ button { color: var(--color-fg); } .app-body .interaction-modal__icon { - vertical-align: middle; - display: inline-block; transform: scale(1.4) translateX(-2px); } -.app-body .interaction-modal p { +.app-body .interaction-modal :is(p, strong) { color: var(--color-content-fg); } .app-body .interaction-modal p.hint { @@ -7464,7 +7500,7 @@ a:is(.active, padding: 0; } -.layout-multiple-columns .drawer__inner:not(:has(> .search-results))::after { +.layout-multiple-columns .search + .drawer__pager .drawer__inner:has(.compose-form):not(:has(> .search-results))::after { content: var(--meta); color: var(--color-fg-muted); padding: 12px; @@ -7477,6 +7513,10 @@ a:is(.active, display: none; } +.layout-multiple-columns .list-editor__accounts + .drawer__inner.backdrop { + background-color: var(--color-content-bg); +} + @media screen and (min-width:630px) and (max-width:1174px) { .layout-multiple-columns :is( @@ -7635,7 +7675,6 @@ a:is(.active, .app-body .trends__item:has( .trends__item__name a:is( - [href*="gift" i], [href*="christmas" i], [href*="weihnachten" i], [href*="noel" i] diff --git a/app/javascript/styles/tangerineui-lagoon/tangerineui-lagoon.scss b/app/javascript/styles/tangerineui-lagoon/tangerineui-lagoon.scss index fa0bf419e..f8404397e 100644 --- a/app/javascript/styles/tangerineui-lagoon/tangerineui-lagoon.scss +++ b/app/javascript/styles/tangerineui-lagoon/tangerineui-lagoon.scss @@ -8,7 +8,7 @@ /* 📄 Meta */ :root { - --version: "v2.0"; + --version: "v2.2"; --variant-name: "Lagoon"; --variant-emoji: "\1F420\00A0"; @@ -948,7 +948,7 @@ path { } .app-body button.icon-button.active .icon-retweet, .app-body .detailed-status__button button.icon-button.active:hover .icon-retweet { - background-image: var(--icon-boost-active); + background-image: var(--icon-boost-accent-active); } .app-body .status__prepend__icon .icon-retweet, .app-body .notification-group--reblog .icon-repeat { @@ -2754,7 +2754,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu :is(.status__action-bar, .detailed-status__action-bar, .picture-in-picture__footer) .active .icon-retweet + .icon-button__counter > .animated-number { - color: #FF4014; + color: var(--color-accent); } .app-body :is(.status__action-bar, .detailed-status__action-bar, .picture-in-picture__footer) @@ -2819,12 +2819,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .app-body .status__action-bar { justify-content: left; margin-top: 8px; - gap: 22px; -} -@media screen and (max-width:550px) { - .app-body .status__action-bar { - gap: 10px; - } + gap: 9px; } .app-body .status__action-bar .status__action-bar__button-wrapper { flex-grow: 0; @@ -2913,6 +2908,8 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu align-items: center; background-color: var(--color-content-secondary-bg); color: var(--color-content-fg); + outline: 1px solid color-mix(in srgb, var(--color-fg), transparent 95%); + outline-offset: -1px; font-size: 13px; } .app-body .status__prepend:has(.status__prepend__icon .icon-retweet) { @@ -3083,8 +3080,10 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu font-size: 12px; } .app-body .status-card:has(+ .more-from-author) { + box-sizing: border-box; border-bottom-left-radius: 0; border-bottom-right-radius: 0; + border-bottom: 0; } .app-body .status-card + .more-from-author { background-color: var(--color-content-secondary-bg); @@ -3093,10 +3092,19 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu } .app-body .more-from-author { color: var(--color-content-fg); + overflow: hidden; } .app-body .more-from-author .logo { color: var(--color-content-fg); - width: 16px; + min-width: 16px; + height: 16px; +} +.app-body .more-from-author > span { + flex-grow: 1; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + mask-image: linear-gradient(90deg, black 80%, transparent 96%); } .app-body .notification-ungrouped .more-from-author :is(.account__avatar) { width: 16px !important; @@ -3493,11 +3501,25 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu box-shadow: inset 0 10px var(--color-bg); } .app-body .column-header__wrapper.active:before { - background: none; - opacity: 40%; + top: -17px; + bottom: unset; + opacity: 30%; + height: 35px; + width: 100%; + background: radial-gradient(ellipse, var(--color-accent) 0, transparent 60%); } .app-body .column-header__wrapper.active { - box-shadow: 0 0; + box-shadow: none; +} +@media screen and (min-width:1175px) { + .app-body .column-header__wrapper.active:before { + top: unset; + bottom: -15px; + border-top: 1px solid var(--color-lines-translucent); + } + .app-body .column-header__wrapper.active { + box-shadow: 0 1px 0 var(--color-lines-translucent); + } } .app-body .column-header { border-radius: 8px; @@ -3784,13 +3806,13 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu border-radius: 15px 15px 0 0; } @media (prefers-color-scheme: light) { - .app-body.theme-system .ui::after { + .app-body:is(.theme-system, .theme-mastodon-light) .ui::after { box-shadow: 0 -10px 0 10px #f3f5f7; border-radius: 15px 15px 0 0; } } @media (prefers-color-scheme: dark) { - .app-body.theme-system .ui::after { + .app-body:is(.theme-system, .theme-default) .ui::after { box-shadow: 0 -10px 0 10px #191b22; border-radius: 15px 15px 0 0; } @@ -5656,6 +5678,7 @@ button { width: 100%; border-bottom: 2px solid var(--color-content-secondary-separator); background-color: var(--color-content-bg); + color: var(--color-content-fg); box-sizing: border-box; } .app-body .item-list .column-link:hover { @@ -5686,10 +5709,25 @@ button { .app-body .list-adder .column-inline-form { border-radius: 0; } -.list-adder .list { +.app-body .list-adder .list { border-bottom: 2px solid var(--color-content-secondary-separator); } - +.app-body .list-editor .drawer__pager { + border: none; + border-radius: 0; +} +.app-body .list-editor .account__relationship .icon-button { + border-color: var(--color-accent); + color: var(--color-accent); +} +.app-body .list-editor .search .search__input { + border-top: 1px solid; + border-bottom: 1px solid; + border-color: var(--color-accent-lines); +} +.app-body .list-editor .search .search__input:focus { + border-color: var(--color-accent); +} /* ➕ Follow requests */ .app-body #Follow-requests { @@ -6292,11 +6330,9 @@ button { color: var(--color-fg); } .app-body .interaction-modal__icon { - vertical-align: middle; - display: inline-block; transform: scale(1.4) translateX(-2px); } -.app-body .interaction-modal p { +.app-body .interaction-modal :is(p, strong) { color: var(--color-content-fg); } .app-body .interaction-modal p.hint { @@ -7464,7 +7500,7 @@ a:is(.active, padding: 0; } -.layout-multiple-columns .drawer__inner:not(:has(> .search-results))::after { +.layout-multiple-columns .search + .drawer__pager .drawer__inner:has(.compose-form):not(:has(> .search-results))::after { content: var(--meta); color: var(--color-fg-muted); padding: 12px; @@ -7477,6 +7513,10 @@ a:is(.active, display: none; } +.layout-multiple-columns .list-editor__accounts + .drawer__inner.backdrop { + background-color: var(--color-content-bg); +} + @media screen and (min-width:630px) and (max-width:1174px) { .layout-multiple-columns :is( @@ -7635,7 +7675,6 @@ a:is(.active, .app-body .trends__item:has( .trends__item__name a:is( - [href*="gift" i], [href*="christmas" i], [href*="weihnachten" i], [href*="noel" i]