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);