From eecf2319c435e5fc5dfec75dc45ec889b54d8db3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nil=C3=A9ane?= Date: Thu, 20 Jul 2023 14:58:16 +0200 Subject: [PATCH 1/3] Improved content warning input --- TangerineUI-purple.css | 15 +++++++++++++-- TangerineUI.css | 15 +++++++++++++-- .../tangerineui-purple/layout-single-column.scss | 15 +++++++++++++-- .../styles/tangerineui/layout-single-column.scss | 15 +++++++++++++-- 4 files changed, 52 insertions(+), 8 deletions(-) diff --git a/TangerineUI-purple.css b/TangerineUI-purple.css index bd795cd..2c2efb5 100644 --- a/TangerineUI-purple.css +++ b/TangerineUI-purple.css @@ -1,5 +1,5 @@ /* TangerineUI 🍊 for Mastodon ãƒģ Purple variant đŸĒģ - version: 1.7 + version: 1.7.1 A Tangerine redesign for Mastodon's Web UI. https://github.com/nileane/TangerineUI-for-Mastodon/ @@ -589,12 +589,23 @@ body.layout-single-column { } .layout-single-column .compose-form .spoiler-input.spoiler-input--visible { margin-bottom: 0; + height: auto; + background-color: var(--color-content-bg); } .layout-single-column .compose-form .spoiler-input__input { background-color: var(--color-accent-bg); color: var(--color-accent); margin-bottom: 0; - border-radius: 0; + border-radius: 10px; + padding: 12px 15px; + box-shadow: + 0 0 0 4px inset var(--color-content-bg); +} +.layout-single-column .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); } .layout-single-column .display-name { color: var(--color-content-fg); diff --git a/TangerineUI.css b/TangerineUI.css index 9914ebd..defb25f 100644 --- a/TangerineUI.css +++ b/TangerineUI.css @@ -1,5 +1,5 @@ /* TangerineUI 🍊 for Mastodon - version: 1.7 + version: 1.7.1 A Tangerine redesign for Mastodon's Web UI. https://github.com/nileane/TangerineUI-for-Mastodon/ @@ -589,12 +589,23 @@ body.layout-single-column { } .layout-single-column .compose-form .spoiler-input.spoiler-input--visible { margin-bottom: 0; + height: auto; + background-color: var(--color-content-bg); } .layout-single-column .compose-form .spoiler-input__input { background-color: var(--color-accent-bg); color: var(--color-accent); margin-bottom: 0; - border-radius: 0; + border-radius: 10px; + padding: 12px 15px; + box-shadow: + 0 0 0 4px inset var(--color-content-bg); +} +.layout-single-column .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); } .layout-single-column .display-name { color: var(--color-content-fg); 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 bd795cd..2c2efb5 100644 --- a/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss +++ b/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss @@ -1,5 +1,5 @@ /* TangerineUI 🍊 for Mastodon ãƒģ Purple variant đŸĒģ - version: 1.7 + version: 1.7.1 A Tangerine redesign for Mastodon's Web UI. https://github.com/nileane/TangerineUI-for-Mastodon/ @@ -589,12 +589,23 @@ body.layout-single-column { } .layout-single-column .compose-form .spoiler-input.spoiler-input--visible { margin-bottom: 0; + height: auto; + background-color: var(--color-content-bg); } .layout-single-column .compose-form .spoiler-input__input { background-color: var(--color-accent-bg); color: var(--color-accent); margin-bottom: 0; - border-radius: 0; + border-radius: 10px; + padding: 12px 15px; + box-shadow: + 0 0 0 4px inset var(--color-content-bg); +} +.layout-single-column .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); } .layout-single-column .display-name { color: var(--color-content-fg); diff --git a/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss b/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss index 9914ebd..defb25f 100644 --- a/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss +++ b/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss @@ -1,5 +1,5 @@ /* TangerineUI 🍊 for Mastodon - version: 1.7 + version: 1.7.1 A Tangerine redesign for Mastodon's Web UI. https://github.com/nileane/TangerineUI-for-Mastodon/ @@ -589,12 +589,23 @@ body.layout-single-column { } .layout-single-column .compose-form .spoiler-input.spoiler-input--visible { margin-bottom: 0; + height: auto; + background-color: var(--color-content-bg); } .layout-single-column .compose-form .spoiler-input__input { background-color: var(--color-accent-bg); color: var(--color-accent); margin-bottom: 0; - border-radius: 0; + border-radius: 10px; + padding: 12px 15px; + box-shadow: + 0 0 0 4px inset var(--color-content-bg); +} +.layout-single-column .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); } .layout-single-column .display-name { color: var(--color-content-fg); From 34ee13ba3e82a5e5dbddb4d9a8bfba39fde09ee1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nil=C3=A9ane?= Date: Thu, 20 Jul 2023 15:01:54 +0200 Subject: [PATCH 2/3] Fixed compose panel dropdown active state --- TangerineUI-purple.css | 7 +++++-- TangerineUI.css | 7 +++++-- .../styles/tangerineui-purple/layout-single-column.scss | 7 +++++-- .../styles/tangerineui/layout-single-column.scss | 7 +++++-- 4 files changed, 20 insertions(+), 8 deletions(-) diff --git a/TangerineUI-purple.css b/TangerineUI-purple.css index 2c2efb5..f60a80f 100644 --- a/TangerineUI-purple.css +++ b/TangerineUI-purple.css @@ -529,10 +529,13 @@ body.layout-single-column { .layout-single-column .compose-form .character-counter { color: var(--color-fg); } -.layout-single-column .compose-form .compose-form__buttons-wrapper .icon-button.active, -.layout-single-column .compose-form .compose-form__buttons-wrapper .text-icon-button.active { +.layout-single-column .compose-form .compose-form__buttons-wrapper .icon-button.active { color: var(--color-accent); } +.layout-single-column .compose-form .compose-form__buttons-wrapper .text-icon-button.active { + background-color: var(--color-accent); + color: var(--color-accent-fg); +} .layout-single-column .compose-panel .autosuggest-textarea__textarea { padding-left: 20px; padding-top: 20px; diff --git a/TangerineUI.css b/TangerineUI.css index defb25f..689caa7 100644 --- a/TangerineUI.css +++ b/TangerineUI.css @@ -529,10 +529,13 @@ body.layout-single-column { .layout-single-column .compose-form .character-counter { color: var(--color-fg); } -.layout-single-column .compose-form .compose-form__buttons-wrapper .icon-button.active, -.layout-single-column .compose-form .compose-form__buttons-wrapper .text-icon-button.active { +.layout-single-column .compose-form .compose-form__buttons-wrapper .icon-button.active { color: var(--color-accent); } +.layout-single-column .compose-form .compose-form__buttons-wrapper .text-icon-button.active { + background-color: var(--color-accent); + color: var(--color-accent-fg); +} .layout-single-column .compose-panel .autosuggest-textarea__textarea { padding-left: 20px; padding-top: 20px; 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 2c2efb5..f60a80f 100644 --- a/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss +++ b/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss @@ -529,10 +529,13 @@ body.layout-single-column { .layout-single-column .compose-form .character-counter { color: var(--color-fg); } -.layout-single-column .compose-form .compose-form__buttons-wrapper .icon-button.active, -.layout-single-column .compose-form .compose-form__buttons-wrapper .text-icon-button.active { +.layout-single-column .compose-form .compose-form__buttons-wrapper .icon-button.active { color: var(--color-accent); } +.layout-single-column .compose-form .compose-form__buttons-wrapper .text-icon-button.active { + background-color: var(--color-accent); + color: var(--color-accent-fg); +} .layout-single-column .compose-panel .autosuggest-textarea__textarea { padding-left: 20px; padding-top: 20px; diff --git a/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss b/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss index defb25f..689caa7 100644 --- a/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss +++ b/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss @@ -529,10 +529,13 @@ body.layout-single-column { .layout-single-column .compose-form .character-counter { color: var(--color-fg); } -.layout-single-column .compose-form .compose-form__buttons-wrapper .icon-button.active, -.layout-single-column .compose-form .compose-form__buttons-wrapper .text-icon-button.active { +.layout-single-column .compose-form .compose-form__buttons-wrapper .icon-button.active { color: var(--color-accent); } +.layout-single-column .compose-form .compose-form__buttons-wrapper .text-icon-button.active { + background-color: var(--color-accent); + color: var(--color-accent-fg); +} .layout-single-column .compose-panel .autosuggest-textarea__textarea { padding-left: 20px; padding-top: 20px; From 5f870a31220ca0f4c3b22bc6be473c5e51256dd0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nil=C3=A9ane?= Date: Thu, 20 Jul 2023 15:07:55 +0200 Subject: [PATCH 3/3] Improvement to poll composer --- TangerineUI-purple.css | 4 ++++ TangerineUI.css | 4 ++++ .../styles/tangerineui-purple/layout-single-column.scss | 4 ++++ .../javascript/styles/tangerineui/layout-single-column.scss | 4 ++++ 4 files changed, 16 insertions(+) diff --git a/TangerineUI-purple.css b/TangerineUI-purple.css index f60a80f..03c7098 100644 --- a/TangerineUI-purple.css +++ b/TangerineUI-purple.css @@ -973,6 +973,10 @@ body.layout-single-column { .layout-single-column .compose-form__poll-wrapper .poll__footer .button.button-secondary { padding: 6px 16px; } +.layout-single-column .compose-form__poll-wrapper .icon-button.disabled { + color: transparent; + pointer-events: none; +} diff --git a/TangerineUI.css b/TangerineUI.css index 689caa7..29454f1 100644 --- a/TangerineUI.css +++ b/TangerineUI.css @@ -973,6 +973,10 @@ body.layout-single-column { .layout-single-column .compose-form__poll-wrapper .poll__footer .button.button-secondary { padding: 6px 16px; } +.layout-single-column .compose-form__poll-wrapper .icon-button.disabled { + color: transparent; + pointer-events: none; +} 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 f60a80f..03c7098 100644 --- a/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss +++ b/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss @@ -973,6 +973,10 @@ body.layout-single-column { .layout-single-column .compose-form__poll-wrapper .poll__footer .button.button-secondary { padding: 6px 16px; } +.layout-single-column .compose-form__poll-wrapper .icon-button.disabled { + color: transparent; + pointer-events: none; +} diff --git a/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss b/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss index 689caa7..29454f1 100644 --- a/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss +++ b/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss @@ -973,6 +973,10 @@ body.layout-single-column { .layout-single-column .compose-form__poll-wrapper .poll__footer .button.button-secondary { padding: 6px 16px; } +.layout-single-column .compose-form__poll-wrapper .icon-button.disabled { + color: transparent; + pointer-events: none; +}