From af5e9032b3b160c48e4828ef911eaf19ccaf930b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nil=C3=A9ane?= Date: Thu, 20 Jul 2023 20:05:51 +0200 Subject: [PATCH 1/5] Adjustment to filtered posts --- 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, 12 insertions(+), 4 deletions(-) diff --git a/TangerineUI-purple.css b/TangerineUI-purple.css index 5e5d250..2d570bc 100644 --- a/TangerineUI-purple.css +++ b/TangerineUI-purple.css @@ -915,7 +915,9 @@ body.layout-single-column { color: var(--color-accent); } .layout-single-column .status__wrapper--filtered { - border-bottom: 0; + color: var(--color-content-fg); + border-top: 2px solid var(--color-lines); + border-bottom: 2px solid var(--color-lines); padding: 12px; } diff --git a/TangerineUI.css b/TangerineUI.css index eebdd2c..7b6b615 100644 --- a/TangerineUI.css +++ b/TangerineUI.css @@ -915,7 +915,9 @@ body.layout-single-column { color: var(--color-accent); } .layout-single-column .status__wrapper--filtered { - border-bottom: 0; + color: var(--color-content-fg); + border-top: 2px solid var(--color-lines); + border-bottom: 2px solid var(--color-lines); padding: 12px; } 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 5e5d250..2d570bc 100644 --- a/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss +++ b/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss @@ -915,7 +915,9 @@ body.layout-single-column { color: var(--color-accent); } .layout-single-column .status__wrapper--filtered { - border-bottom: 0; + color: var(--color-content-fg); + border-top: 2px solid var(--color-lines); + border-bottom: 2px solid var(--color-lines); padding: 12px; } diff --git a/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss b/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss index eebdd2c..7b6b615 100644 --- a/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss +++ b/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss @@ -915,7 +915,9 @@ body.layout-single-column { color: var(--color-accent); } .layout-single-column .status__wrapper--filtered { - border-bottom: 0; + color: var(--color-content-fg); + border-top: 2px solid var(--color-lines); + border-bottom: 2px solid var(--color-lines); padding: 12px; } From 751ea9dcc11ae2c4ee72651e31bab758222d3301 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nil=C3=A9ane?= Date: Thu, 20 Jul 2023 20:31:14 +0200 Subject: [PATCH 2/5] Added files for installation on Glitch instances --- .../javascript/skins/vanilla/tangerineui-purple/common.scss | 1 + .../app/javascript/skins/vanilla/tangerineui-purple/names.yml | 4 ++++ mastodon/app/javascript/skins/vanilla/tangerineui/common.scss | 1 + mastodon/app/javascript/skins/vanilla/tangerineui/names.yml | 4 ++++ 4 files changed, 10 insertions(+) create mode 100644 mastodon/app/javascript/skins/vanilla/tangerineui-purple/common.scss create mode 100644 mastodon/app/javascript/skins/vanilla/tangerineui-purple/names.yml create mode 100644 mastodon/app/javascript/skins/vanilla/tangerineui/common.scss create mode 100644 mastodon/app/javascript/skins/vanilla/tangerineui/names.yml diff --git a/mastodon/app/javascript/skins/vanilla/tangerineui-purple/common.scss b/mastodon/app/javascript/skins/vanilla/tangerineui-purple/common.scss new file mode 100644 index 0000000..7b8a640 --- /dev/null +++ b/mastodon/app/javascript/skins/vanilla/tangerineui-purple/common.scss @@ -0,0 +1 @@ +@import 'styles/tangerineui-purple'; diff --git a/mastodon/app/javascript/skins/vanilla/tangerineui-purple/names.yml b/mastodon/app/javascript/skins/vanilla/tangerineui-purple/names.yml new file mode 100644 index 0000000..ba3ae4f --- /dev/null +++ b/mastodon/app/javascript/skins/vanilla/tangerineui-purple/names.yml @@ -0,0 +1,4 @@ +en: + skins: + vanilla: + tangerineui-purple: Tangerine UI (Purple) diff --git a/mastodon/app/javascript/skins/vanilla/tangerineui/common.scss b/mastodon/app/javascript/skins/vanilla/tangerineui/common.scss new file mode 100644 index 0000000..6c8239b --- /dev/null +++ b/mastodon/app/javascript/skins/vanilla/tangerineui/common.scss @@ -0,0 +1 @@ +@import 'styles/tangerineui'; diff --git a/mastodon/app/javascript/skins/vanilla/tangerineui/names.yml b/mastodon/app/javascript/skins/vanilla/tangerineui/names.yml new file mode 100644 index 0000000..f98fc10 --- /dev/null +++ b/mastodon/app/javascript/skins/vanilla/tangerineui/names.yml @@ -0,0 +1,4 @@ +en: + skins: + vanilla: + tangerineui: Tangerine UI From 601d4461422d7e4500094796072d6773aed39d56 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nil=C3=A9ane?= <914451+nileane@users.noreply.github.com> Date: Thu, 20 Jul 2023 20:58:44 +0200 Subject: [PATCH 3/5] Instructions for Glitch-soc admins --- README.md | 64 ++++++++++++++++++++++++++++++++++++++++++++----------- 1 file changed, 52 insertions(+), 12 deletions(-) diff --git a/README.md b/README.md index 098e2c6..1771dad 100644 --- a/README.md +++ b/README.md @@ -3,12 +3,12 @@ A Tangerine redesign for Mastodon's Web UI, using just CSS. Tangerine UI features a bubblier look, a more compact timeline, round avatars, and a soft color palette. -* [**Live demo** at nileane.fr](https://nileane.fr) -* [**Announcement** post on Mastodon](https://nileane.fr/@nileane/110691663040709608) -* [**Installation** for instance admins](#installation-for-instance-admins) - * [Install as the only theme](#install-tangerine-ui-as-the-only-theme-on-your-instance) - * [Install as an optional theme [Recommended]](#install-tangerine-ui-as-an-optional-theme-on-your-instance-recommended) -* [**Installation** for regular users](#installation-for-regular-users) +[**Live demo** at nileane.fr](https://nileane.fr) ・ [**Announcement** post on Mastodon](https://nileane.fr/@nileane/110691663040709608) + +* **Installation** + * [Install on a **Mastodon** instance](#installation-for-mastodon-admins) + * [Install on a **Glitch-soc** instance](#installation-for-glitch-soc-admins) + * [Installation for regular users](#installation-for-regular-users) * [**Things to know**](#things-to-know) * [**Accessibility**](#accessibility) * [**Credits**](#credits) @@ -25,7 +25,7 @@ Tangerine UI features a bubblier look, a more compact timeline, round avatars, a ![Tangerine UI's purple variant, both in dark and light modes.](https://github.com/nileane/TangerineUI-for-Mastodon/assets/914451/c01c7a54-d2db-4fe5-a0f6-dc6e77cfe128) -## Installation for instance admins +## Installation for Mastodon admins ### Install Tangerine UI as the only theme on your instance: * Copy & paste the contents of [`TangerineUI.css`](https://github.com/nileane/TangerineUI-for-Mastodon/blob/main/TangerineUI.css) to the **Custom CSS** field in the administration panel on your Mastodon instance (Navigate to https://*domain*/admin/settings/appearance). @@ -37,7 +37,7 @@ Otherwise, see below how to install Tangerine UI as an optional theme for your u ### Install Tangerine UI as an optional theme on your instance [Recommended]: Follow these instructions if you wish to add Tangerine UI as an available theme for your users on your instance. This will also allow you to set Tangerine UI as the default theme for your instance, while still letting users change back to Mastodon's default themes in their appearance settings. -1. **Copy the files** from [this folder](https://github.com/nileane/TangerineUI-for-Mastodon/tree/main/mastodon/app/javascript/styles/) in this repository to your Mastodon themes directory `app/javascript/styles/`: +1. **Copy the files** from [this folder](https://github.com/nileane/TangerineUI-for-Mastodon/tree/main/mastodon/app/javascript/styles/) to your Mastodon themes directory `app/javascript/styles/`: ``` app/ @@ -51,7 +51,7 @@ app/ layout-single-column.scss | **new** ``` -2. **Add Tangerine UI to the config.** To make Tangerine UI available in your users's settings, you need to add a new line to [`config/themes.yml`](https://github.com/mastodon/mastodon/blob/main/config/themes.yml). Here we're adding 2 new lines, one for Tangerine UI, another for Tangerine UI's purple variant: +2. **Add Tangerine UI to `themes.yml`**. To make Tangerine UI available in your users's settings, you need to add a new line to [`config/themes.yml`](https://github.com/mastodon/mastodon/blob/main/config/themes.yml). Here we're adding 2 new lines, one for Tangerine UI, another for Tangerine UI's purple variant: ```yml default: styles/application.scss @@ -61,7 +61,7 @@ tangerineui: styles/tangerineui.scss | **new** tangerineui-purple: styles/tangerineui-purple.scss | **new** ``` -3. **Add a human-friendly name (optional).** You can edit each desired language's locale file in `config/locales/[lang].yml` to add a localized string name for Tangerine UI. You need to do this for every language you expect your users to use. Otherwise, in their themes list, they will see the unlocalized theme name ("*tangerineui-purple*"), instead of a readable theme name ("*Tangerine UI (Purple)*"). +3. **Add a localized name (optional).** You can edit each desired language's locale file in `config/locales/[lang].yml` to add a localized string name for Tangerine UI. You need to do this for every language you expect your users to use. Otherwise, in their themes list, they will see the unlocalized theme name ("*tangerineui-purple*"), instead of a readable theme name ("*Tangerine UI (Purple)*"). ```yml themes: @@ -82,6 +82,46 @@ As an admin, you should also now be able to set Tangerine UI as the default them ![Screenshot : select Tangerine UI as the default theme for your Mastodon instance in the administration panel.](https://github.com/nileane/TangerineUI-for-Mastodon/assets/914451/05fcbb53-54de-40e4-89bd-199107116dfc) +## Installation for Glitch-soc admins + +Tangerine UI does not yet support Glitch-soc features, but it can still be installed as a vanilla skin on your Glitch-soc instance. + +1. **Copy the files** from [this folder](https://github.com/nileane/TangerineUI-for-Mastodon/tree/main/mastodon/app/javascript/styles/) to your Mastodon themes directory `app/javascript/styles/`: + +``` +app/ + javascript/ + styles/ + tangerineui.scss | **new** + tangerineui-purple.scss | **new** + tangerineui/ | **new** + layout-single-column.scss | **new** + tangerineui-purple/ | **new** + layout-single-column.scss | **new** +``` + +2. **Copy the files** from [this folder](https://github.com/nileane/TangerineUI-for-Mastodon/tree/main/mastodon/app/javascript/skins/vanilla/) to your Glitch-soc themes directory `app/javascript/skins/vanilla/`: + +``` +app/ + javascript/ + skins/ + vanilla/ + tangerineui/ | **new** + common.scss | **new** + names.yml | **new** + tangerineui-purple/ | **new** + common.scss | **new** + names.yml | **new** +``` + +3. **Compile theme assets and restart.** Run `RAILS_ENV=production bundle exec rails assets:precompile` and restart your Mastodon instance for the changes to take effect. + +Your users should now be able to select Tangerine UI as their theme in their settings, under Flavours → Vanilla Mastodon → Skin + +![Glitch-soc settings. Flavours → Vanilla Mastodon → Skin](https://github.com/nileane/TangerineUI-for-Mastodon/assets/914451/abd931ab-685a-4d55-aa24-cb6356a19a7c) + + ## Installation for regular users Even if you are not the admin of your instance, you can still use Tangerine UI with a browser extension. @@ -89,13 +129,13 @@ Even if you are not the admin of your instance, you can still use Tangerine UI w * Install any browser extension that allows you to inject CSS on a webpage, such as [Stylus](https://add0n.com/stylus.html), or [Live CSS Editor](https://github.com/webextensions/live-css-editor) * Copy & paste the contents of [`TangerineUI.css`](https://github.com/nileane/TangerineUI-for-Mastodon/blob/main/TangerineUI.css) to the extension's editor * 🪻 For the purple variant, copy the contents of [`TangerineUI-purple.css`](https://github.com/nileane/TangerineUI-for-Mastodon/blob/main/TangerineUI-purple.css) instead. +* ⚠️ If you are a user on a Glitch-soc instance, you must switch to the vanilla flavour for Tangerine UI to work properly: + * In your settings, navigate to Flavours → Vanilla Mastodon → select the 'Default' skin). ## Things to know * **Tangerine UI currently only supports Mastodon's single column layout**. The advanced web interface (multiple columns) will not be affected. * **Tangerine UI auto-switches from light to dark mode based on your OS preference**. * Check your Mastodon instance version before using. The latest Mastodon release checked to be compatible is indicated in the CSS file header. -* If you run a **Glitch** or **Hometown** instance, beware: Tangerine UI is currently only meant to be applied on top of Mastodon's vanilla Dark and Light themes. - * If you are a user on a Glitch instance using a browser extension, first switch your instance to the vanilla flavour before applying Tangerine UI. ## Accessibility * I have not yet adapted Tangerine to Mastodon's *High Contrast* theme setting. Please consider that some of your users may depend on it before setting Tangerine UI as the only theme on your instance. From 86c2c3c955dd5a84f0fa6a8b1f8efa77eb679844 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nil=C3=A9ane?= <914451+nileane@users.noreply.github.com> Date: Thu, 20 Jul 2023 21:09:05 +0200 Subject: [PATCH 4/5] Update README.md --- README.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 1771dad..92972bd 100644 --- a/README.md +++ b/README.md @@ -5,6 +5,8 @@ Tangerine UI features a bubblier look, a more compact timeline, round avatars, a [**Live demo** at nileane.fr](https://nileane.fr) ・ [**Announcement** post on Mastodon](https://nileane.fr/@nileane/110691663040709608) +## Summary + * **Installation** * [Install on a **Mastodon** instance](#installation-for-mastodon-admins) * [Install on a **Glitch-soc** instance](#installation-for-glitch-soc-admins) @@ -84,7 +86,7 @@ As an admin, you should also now be able to set Tangerine UI as the default them ## Installation for Glitch-soc admins -Tangerine UI does not yet support Glitch-soc features, but it can still be installed as a vanilla skin on your Glitch-soc instance. +Tangerine UI does not yet support Glitch-soc's features and layout, but it can still be installed as a vanilla skin on your Glitch-soc instance. 1. **Copy the files** from [this folder](https://github.com/nileane/TangerineUI-for-Mastodon/tree/main/mastodon/app/javascript/styles/) to your Mastodon themes directory `app/javascript/styles/`: From 35cb8502f41a61f4f3962f80e2319da4693b28fe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nil=C3=A9ane?= Date: Thu, 20 Jul 2023 22:35:43 +0200 Subject: [PATCH 5/5] Added support for Server Announcements --- TangerineUI-purple.css | 69 ++++++++++++++++++- TangerineUI.css | 69 ++++++++++++++++++- .../layout-single-column.scss | 69 ++++++++++++++++++- .../tangerineui/layout-single-column.scss | 69 ++++++++++++++++++- 4 files changed, 272 insertions(+), 4 deletions(-) diff --git a/TangerineUI-purple.css b/TangerineUI-purple.css index 2d570bc..4ace51c 100644 --- a/TangerineUI-purple.css +++ b/TangerineUI-purple.css @@ -1,5 +1,5 @@ /* TangerineUI 🍊 for Mastodon ・ Purple variant 🪻 - version: 1.7.2 + version: 1.7.3 A Tangerine redesign for Mastodon's Web UI. https://github.com/nileane/TangerineUI-for-Mastodon/ @@ -1091,6 +1091,13 @@ body.layout-single-column { color: var(--color-accent); background-color: var(--color-accent-bg); } +@media screen and (max-width:1174px) { + .layout-single-column .column-header__button.active, + .layout-single-column .column-header__button.active:hover, + .layout-single-column .column-header__button:hover { + background-color: transparent; + } +} .layout-single-column .load-gap, .layout-single-column .load-more { background-color: var(--color-accent-bg); @@ -1104,6 +1111,13 @@ body.layout-single-column { .layout-single-column .column-header__collapsible { border-bottom: 0; border-radius: 7px; + box-shadow: 0 -20px 0 var(--color-bg); +} +@media screen and (max-width:1174px) { + .layout-single-column .column-header__collapsible { + box-shadow: none; + border-radius: 0; + } } .layout-single-column .column-header__collapsible:not(.collapsed) { margin-bottom: 10px; @@ -2407,6 +2421,59 @@ body.layout-single-column { +/* 📢 Announcements */ +.layout-single-column .announcements, +.layout-single-column .announcements::after { + background-color: var(--color-accent-bg); + color: var(--color-content-fg); +} +.layout-single-column .announcements { + margin-bottom: 10px; + border-radius: 7px; + overflow: visible; + z-index: 0; + box-shadow: 0 -20px var(--color-bg); +} +.layout-single-column .announcements__item strong { + font-weight: 800; + color: var(--color-content-fg-bold); +} +.layout-single-column .announcements__pagination, +.layout-single-column .announcements__pagination .icon-button { + color: var(--color-content-fg); +} +.layout-single-column .announcements__mastodon { + border-radius: 0 0 0 7px; +} +.layout-single-column .reactions-bar__item { + background-color: var(--color-content-bg); +} +.layout-single-column .reactions-bar__item.active { + background-color: var(--color-accent); +} +.layout-single-column .reactions-bar__item__count, +.layout-single-column .reactions-bar__item__count .animated-number { + color: var(--color-content-fg); +} +.layout-single-column .reactions-bar__item.active .reactions-bar__item__count .animated-number { + color: var(--color-accent-fg); +} +.layout-single-column .reactions-bar .emoji-button { + color: var(--color-accent); +} +@media screen and (max-width:1174px) { + .layout-single-column .announcements { + box-shadow: none; + margin-top: -10px; + border-radius: 0; + } + .layout-single-column .announcements__mastodon { + border-radius: 0; + } +} + + + /* 📜 About page ------------- */ .layout-single-column .scrollable.about { diff --git a/TangerineUI.css b/TangerineUI.css index 7b6b615..5847f28 100644 --- a/TangerineUI.css +++ b/TangerineUI.css @@ -1,5 +1,5 @@ /* TangerineUI 🍊 for Mastodon - version: 1.7.2 + version: 1.7.3 A Tangerine redesign for Mastodon's Web UI. https://github.com/nileane/TangerineUI-for-Mastodon/ @@ -1091,6 +1091,13 @@ body.layout-single-column { color: var(--color-accent); background-color: var(--color-accent-bg); } +@media screen and (max-width:1174px) { + .layout-single-column .column-header__button.active, + .layout-single-column .column-header__button.active:hover, + .layout-single-column .column-header__button:hover { + background-color: transparent; + } +} .layout-single-column .load-gap, .layout-single-column .load-more { background-color: var(--color-accent-bg); @@ -1104,6 +1111,13 @@ body.layout-single-column { .layout-single-column .column-header__collapsible { border-bottom: 0; border-radius: 7px; + box-shadow: 0 -20px 0 var(--color-bg); +} +@media screen and (max-width:1174px) { + .layout-single-column .column-header__collapsible { + box-shadow: none; + border-radius: 0; + } } .layout-single-column .column-header__collapsible:not(.collapsed) { margin-bottom: 10px; @@ -2407,6 +2421,59 @@ body.layout-single-column { +/* 📢 Announcements */ +.layout-single-column .announcements, +.layout-single-column .announcements::after { + background-color: var(--color-accent-bg); + color: var(--color-content-fg); +} +.layout-single-column .announcements { + margin-bottom: 10px; + border-radius: 7px; + overflow: visible; + z-index: 0; + box-shadow: 0 -20px var(--color-bg); +} +.layout-single-column .announcements__item strong { + font-weight: 800; + color: var(--color-content-fg-bold); +} +.layout-single-column .announcements__pagination, +.layout-single-column .announcements__pagination .icon-button { + color: var(--color-content-fg); +} +.layout-single-column .announcements__mastodon { + border-radius: 0 0 0 7px; +} +.layout-single-column .reactions-bar__item { + background-color: var(--color-content-bg); +} +.layout-single-column .reactions-bar__item.active { + background-color: var(--color-accent); +} +.layout-single-column .reactions-bar__item__count, +.layout-single-column .reactions-bar__item__count .animated-number { + color: var(--color-content-fg); +} +.layout-single-column .reactions-bar__item.active .reactions-bar__item__count .animated-number { + color: var(--color-accent-fg); +} +.layout-single-column .reactions-bar .emoji-button { + color: var(--color-accent); +} +@media screen and (max-width:1174px) { + .layout-single-column .announcements { + box-shadow: none; + margin-top: -10px; + border-radius: 0; + } + .layout-single-column .announcements__mastodon { + border-radius: 0; + } +} + + + /* 📜 About page ------------- */ .layout-single-column .scrollable.about { 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 2d570bc..4ace51c 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.2 + version: 1.7.3 A Tangerine redesign for Mastodon's Web UI. https://github.com/nileane/TangerineUI-for-Mastodon/ @@ -1091,6 +1091,13 @@ body.layout-single-column { color: var(--color-accent); background-color: var(--color-accent-bg); } +@media screen and (max-width:1174px) { + .layout-single-column .column-header__button.active, + .layout-single-column .column-header__button.active:hover, + .layout-single-column .column-header__button:hover { + background-color: transparent; + } +} .layout-single-column .load-gap, .layout-single-column .load-more { background-color: var(--color-accent-bg); @@ -1104,6 +1111,13 @@ body.layout-single-column { .layout-single-column .column-header__collapsible { border-bottom: 0; border-radius: 7px; + box-shadow: 0 -20px 0 var(--color-bg); +} +@media screen and (max-width:1174px) { + .layout-single-column .column-header__collapsible { + box-shadow: none; + border-radius: 0; + } } .layout-single-column .column-header__collapsible:not(.collapsed) { margin-bottom: 10px; @@ -2407,6 +2421,59 @@ body.layout-single-column { +/* 📢 Announcements */ +.layout-single-column .announcements, +.layout-single-column .announcements::after { + background-color: var(--color-accent-bg); + color: var(--color-content-fg); +} +.layout-single-column .announcements { + margin-bottom: 10px; + border-radius: 7px; + overflow: visible; + z-index: 0; + box-shadow: 0 -20px var(--color-bg); +} +.layout-single-column .announcements__item strong { + font-weight: 800; + color: var(--color-content-fg-bold); +} +.layout-single-column .announcements__pagination, +.layout-single-column .announcements__pagination .icon-button { + color: var(--color-content-fg); +} +.layout-single-column .announcements__mastodon { + border-radius: 0 0 0 7px; +} +.layout-single-column .reactions-bar__item { + background-color: var(--color-content-bg); +} +.layout-single-column .reactions-bar__item.active { + background-color: var(--color-accent); +} +.layout-single-column .reactions-bar__item__count, +.layout-single-column .reactions-bar__item__count .animated-number { + color: var(--color-content-fg); +} +.layout-single-column .reactions-bar__item.active .reactions-bar__item__count .animated-number { + color: var(--color-accent-fg); +} +.layout-single-column .reactions-bar .emoji-button { + color: var(--color-accent); +} +@media screen and (max-width:1174px) { + .layout-single-column .announcements { + box-shadow: none; + margin-top: -10px; + border-radius: 0; + } + .layout-single-column .announcements__mastodon { + border-radius: 0; + } +} + + + /* 📜 About page ------------- */ .layout-single-column .scrollable.about { diff --git a/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss b/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss index 7b6b615..5847f28 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.2 + version: 1.7.3 A Tangerine redesign for Mastodon's Web UI. https://github.com/nileane/TangerineUI-for-Mastodon/ @@ -1091,6 +1091,13 @@ body.layout-single-column { color: var(--color-accent); background-color: var(--color-accent-bg); } +@media screen and (max-width:1174px) { + .layout-single-column .column-header__button.active, + .layout-single-column .column-header__button.active:hover, + .layout-single-column .column-header__button:hover { + background-color: transparent; + } +} .layout-single-column .load-gap, .layout-single-column .load-more { background-color: var(--color-accent-bg); @@ -1104,6 +1111,13 @@ body.layout-single-column { .layout-single-column .column-header__collapsible { border-bottom: 0; border-radius: 7px; + box-shadow: 0 -20px 0 var(--color-bg); +} +@media screen and (max-width:1174px) { + .layout-single-column .column-header__collapsible { + box-shadow: none; + border-radius: 0; + } } .layout-single-column .column-header__collapsible:not(.collapsed) { margin-bottom: 10px; @@ -2407,6 +2421,59 @@ body.layout-single-column { +/* 📢 Announcements */ +.layout-single-column .announcements, +.layout-single-column .announcements::after { + background-color: var(--color-accent-bg); + color: var(--color-content-fg); +} +.layout-single-column .announcements { + margin-bottom: 10px; + border-radius: 7px; + overflow: visible; + z-index: 0; + box-shadow: 0 -20px var(--color-bg); +} +.layout-single-column .announcements__item strong { + font-weight: 800; + color: var(--color-content-fg-bold); +} +.layout-single-column .announcements__pagination, +.layout-single-column .announcements__pagination .icon-button { + color: var(--color-content-fg); +} +.layout-single-column .announcements__mastodon { + border-radius: 0 0 0 7px; +} +.layout-single-column .reactions-bar__item { + background-color: var(--color-content-bg); +} +.layout-single-column .reactions-bar__item.active { + background-color: var(--color-accent); +} +.layout-single-column .reactions-bar__item__count, +.layout-single-column .reactions-bar__item__count .animated-number { + color: var(--color-content-fg); +} +.layout-single-column .reactions-bar__item.active .reactions-bar__item__count .animated-number { + color: var(--color-accent-fg); +} +.layout-single-column .reactions-bar .emoji-button { + color: var(--color-accent); +} +@media screen and (max-width:1174px) { + .layout-single-column .announcements { + box-shadow: none; + margin-top: -10px; + border-radius: 0; + } + .layout-single-column .announcements__mastodon { + border-radius: 0; + } +} + + + /* 📜 About page ------------- */ .layout-single-column .scrollable.about {