From 9c8f45172d65dff5ca70a15b9c9b9c89a0d08d43 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nil=C3=A9ane?= Date: Sun, 30 Jul 2023 23:57:48 +0200 Subject: [PATCH] Fixed Language picker --- TangerineUI-purple.css | 39 +++++++++++++++++++ TangerineUI.css | 39 +++++++++++++++++++ .../layout-single-column.scss | 39 +++++++++++++++++++ .../tangerineui/layout-single-column.scss | 39 +++++++++++++++++++ 4 files changed, 156 insertions(+) diff --git a/TangerineUI-purple.css b/TangerineUI-purple.css index e764d2b..f905074 100644 --- a/TangerineUI-purple.css +++ b/TangerineUI-purple.css @@ -2700,9 +2700,48 @@ body.layout-single-column { background-color: var(--color-accent-bg); color: var(--color-accent); } +.layout-single-column .language-dropdown__dropdown { + 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); +} +.layout-single-column .language-dropdown__dropdown__results__item { + border-radius: 8px; +} .layout-single-column .language-dropdown__dropdown__results__item.active, .layout-single-column .language-dropdown__dropdown__results__item.active:hover { background-color: var(--color-accent); + color: var(--color-accent-fg); +} +.layout-single-column .language-dropdown__dropdown__results__item:active, +.layout-single-column .language-dropdown__dropdown__results__item:focus, +.layout-single-column .language-dropdown__dropdown__results__item:hover { + background-color: var(--color-accent-bg); +} +.layout-single-column .language-dropdown__dropdown__results__item__native-name { + font-weight: bold; +} +.layout-single-column .language-dropdown__dropdown__results__item__common-name { + opacity: .7; +} +.layout-single-column .language-dropdown__dropdown__results__item__common-name, +.layout-single-column .language-dropdown__dropdown__results__item__native-name { + color: var(--color-content-fg); +} +.layout-single-column .language-dropdown__dropdown__results__item.active .language-dropdown__dropdown__results__item__common-name, +.layout-single-column .language-dropdown__dropdown__results__item.active .language-dropdown__dropdown__results__item__native-name, +.layout-single-column .language-dropdown__dropdown__results__item.active:hover .language-dropdown__dropdown__results__item__common-name, +.layout-single-column .language-dropdown__dropdown__results__item.active:hover .language-dropdown__dropdown__results__item__native-name { + color: var(--color-accent-fg); +} +.layout-single-column .language-dropdown__dropdown__results__item:active .language-dropdown__dropdown__results__item__native-name, +.layout-single-column .language-dropdown__dropdown__results__item:focus .language-dropdown__dropdown__results__item__native-name, +.layout-single-column .language-dropdown__dropdown__results__item:hover .language-dropdown__dropdown__results__item__native-name, +.layout-single-column .language-dropdown__dropdown__results__item:active .language-dropdown__dropdown__results__item__common-name, +.layout-single-column .language-dropdown__dropdown__results__item:focus .language-dropdown__dropdown__results__item__common-name, +.layout-single-column .language-dropdown__dropdown__results__item:hover .language-dropdown__dropdown__results__item__common-name { + color: var(--color-accent); } .layout-single-column .button:not(.button-secondary):active, .layout-single-column .button:not(.button-secondary):focus, diff --git a/TangerineUI.css b/TangerineUI.css index e3c6040..3e71102 100644 --- a/TangerineUI.css +++ b/TangerineUI.css @@ -2700,9 +2700,48 @@ body.layout-single-column { background-color: var(--color-accent-bg); color: var(--color-accent); } +.layout-single-column .language-dropdown__dropdown { + 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); +} +.layout-single-column .language-dropdown__dropdown__results__item { + border-radius: 8px; +} .layout-single-column .language-dropdown__dropdown__results__item.active, .layout-single-column .language-dropdown__dropdown__results__item.active:hover { background-color: var(--color-accent); + color: var(--color-accent-fg); +} +.layout-single-column .language-dropdown__dropdown__results__item:active, +.layout-single-column .language-dropdown__dropdown__results__item:focus, +.layout-single-column .language-dropdown__dropdown__results__item:hover { + background-color: var(--color-accent-bg); +} +.layout-single-column .language-dropdown__dropdown__results__item__native-name { + font-weight: bold; +} +.layout-single-column .language-dropdown__dropdown__results__item__common-name { + opacity: .7; +} +.layout-single-column .language-dropdown__dropdown__results__item__common-name, +.layout-single-column .language-dropdown__dropdown__results__item__native-name { + color: var(--color-content-fg); +} +.layout-single-column .language-dropdown__dropdown__results__item.active .language-dropdown__dropdown__results__item__common-name, +.layout-single-column .language-dropdown__dropdown__results__item.active .language-dropdown__dropdown__results__item__native-name, +.layout-single-column .language-dropdown__dropdown__results__item.active:hover .language-dropdown__dropdown__results__item__common-name, +.layout-single-column .language-dropdown__dropdown__results__item.active:hover .language-dropdown__dropdown__results__item__native-name { + color: var(--color-accent-fg); +} +.layout-single-column .language-dropdown__dropdown__results__item:active .language-dropdown__dropdown__results__item__native-name, +.layout-single-column .language-dropdown__dropdown__results__item:focus .language-dropdown__dropdown__results__item__native-name, +.layout-single-column .language-dropdown__dropdown__results__item:hover .language-dropdown__dropdown__results__item__native-name, +.layout-single-column .language-dropdown__dropdown__results__item:active .language-dropdown__dropdown__results__item__common-name, +.layout-single-column .language-dropdown__dropdown__results__item:focus .language-dropdown__dropdown__results__item__common-name, +.layout-single-column .language-dropdown__dropdown__results__item:hover .language-dropdown__dropdown__results__item__common-name { + color: var(--color-accent); } .layout-single-column .button:not(.button-secondary):active, .layout-single-column .button:not(.button-secondary):focus, diff --git a/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss b/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss index e764d2b..f905074 100644 --- a/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss +++ b/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss @@ -2700,9 +2700,48 @@ body.layout-single-column { background-color: var(--color-accent-bg); color: var(--color-accent); } +.layout-single-column .language-dropdown__dropdown { + 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); +} +.layout-single-column .language-dropdown__dropdown__results__item { + border-radius: 8px; +} .layout-single-column .language-dropdown__dropdown__results__item.active, .layout-single-column .language-dropdown__dropdown__results__item.active:hover { background-color: var(--color-accent); + color: var(--color-accent-fg); +} +.layout-single-column .language-dropdown__dropdown__results__item:active, +.layout-single-column .language-dropdown__dropdown__results__item:focus, +.layout-single-column .language-dropdown__dropdown__results__item:hover { + background-color: var(--color-accent-bg); +} +.layout-single-column .language-dropdown__dropdown__results__item__native-name { + font-weight: bold; +} +.layout-single-column .language-dropdown__dropdown__results__item__common-name { + opacity: .7; +} +.layout-single-column .language-dropdown__dropdown__results__item__common-name, +.layout-single-column .language-dropdown__dropdown__results__item__native-name { + color: var(--color-content-fg); +} +.layout-single-column .language-dropdown__dropdown__results__item.active .language-dropdown__dropdown__results__item__common-name, +.layout-single-column .language-dropdown__dropdown__results__item.active .language-dropdown__dropdown__results__item__native-name, +.layout-single-column .language-dropdown__dropdown__results__item.active:hover .language-dropdown__dropdown__results__item__common-name, +.layout-single-column .language-dropdown__dropdown__results__item.active:hover .language-dropdown__dropdown__results__item__native-name { + color: var(--color-accent-fg); +} +.layout-single-column .language-dropdown__dropdown__results__item:active .language-dropdown__dropdown__results__item__native-name, +.layout-single-column .language-dropdown__dropdown__results__item:focus .language-dropdown__dropdown__results__item__native-name, +.layout-single-column .language-dropdown__dropdown__results__item:hover .language-dropdown__dropdown__results__item__native-name, +.layout-single-column .language-dropdown__dropdown__results__item:active .language-dropdown__dropdown__results__item__common-name, +.layout-single-column .language-dropdown__dropdown__results__item:focus .language-dropdown__dropdown__results__item__common-name, +.layout-single-column .language-dropdown__dropdown__results__item:hover .language-dropdown__dropdown__results__item__common-name { + color: var(--color-accent); } .layout-single-column .button:not(.button-secondary):active, .layout-single-column .button:not(.button-secondary):focus, diff --git a/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss b/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss index e3c6040..3e71102 100644 --- a/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss +++ b/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss @@ -2700,9 +2700,48 @@ body.layout-single-column { background-color: var(--color-accent-bg); color: var(--color-accent); } +.layout-single-column .language-dropdown__dropdown { + 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); +} +.layout-single-column .language-dropdown__dropdown__results__item { + border-radius: 8px; +} .layout-single-column .language-dropdown__dropdown__results__item.active, .layout-single-column .language-dropdown__dropdown__results__item.active:hover { background-color: var(--color-accent); + color: var(--color-accent-fg); +} +.layout-single-column .language-dropdown__dropdown__results__item:active, +.layout-single-column .language-dropdown__dropdown__results__item:focus, +.layout-single-column .language-dropdown__dropdown__results__item:hover { + background-color: var(--color-accent-bg); +} +.layout-single-column .language-dropdown__dropdown__results__item__native-name { + font-weight: bold; +} +.layout-single-column .language-dropdown__dropdown__results__item__common-name { + opacity: .7; +} +.layout-single-column .language-dropdown__dropdown__results__item__common-name, +.layout-single-column .language-dropdown__dropdown__results__item__native-name { + color: var(--color-content-fg); +} +.layout-single-column .language-dropdown__dropdown__results__item.active .language-dropdown__dropdown__results__item__common-name, +.layout-single-column .language-dropdown__dropdown__results__item.active .language-dropdown__dropdown__results__item__native-name, +.layout-single-column .language-dropdown__dropdown__results__item.active:hover .language-dropdown__dropdown__results__item__common-name, +.layout-single-column .language-dropdown__dropdown__results__item.active:hover .language-dropdown__dropdown__results__item__native-name { + color: var(--color-accent-fg); +} +.layout-single-column .language-dropdown__dropdown__results__item:active .language-dropdown__dropdown__results__item__native-name, +.layout-single-column .language-dropdown__dropdown__results__item:focus .language-dropdown__dropdown__results__item__native-name, +.layout-single-column .language-dropdown__dropdown__results__item:hover .language-dropdown__dropdown__results__item__native-name, +.layout-single-column .language-dropdown__dropdown__results__item:active .language-dropdown__dropdown__results__item__common-name, +.layout-single-column .language-dropdown__dropdown__results__item:focus .language-dropdown__dropdown__results__item__common-name, +.layout-single-column .language-dropdown__dropdown__results__item:hover .language-dropdown__dropdown__results__item__common-name { + color: var(--color-accent); } .layout-single-column .button:not(.button-secondary):active, .layout-single-column .button:not(.button-secondary):focus,