From cdd9e776f94c565f8d0405035f1b1c2b79842ce9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nile=CC=81ane?= Date: Sat, 19 Oct 2024 19:49:35 +0200 Subject: [PATCH 01/21] Add install and update example scripts --- install.sh.example | 35 +++++++++++++++++++++++++++++++++++ update.sh.example | 27 +++++++++++++++++++++++++++ 2 files changed, 62 insertions(+) create mode 100644 install.sh.example create mode 100644 update.sh.example diff --git a/install.sh.example b/install.sh.example new file mode 100644 index 0000000..bdd4e4e --- /dev/null +++ b/install.sh.example @@ -0,0 +1,35 @@ +#!/bin/bash + +# Ensure the script exits if any command fails +set -e + +# Set the repository and Mastodon paths +TANGERINEUI="/home/mastodon/TangerineUI" +MASTODON="/home/mastodon/live" + +# Navigate to the repository +cd "$TANGERINEUI" || { echo "Tangerine UI repository directory not found: $REPO"; exit 1; } + +# Pull the latest changes from the repository +git pull || { echo "Failed to pull latest changes from the Tangerine UI repository"; exit 1; } + +# Copy styles from the Mastodon repository to the target directory +cp -r "./mastodon/app/javascript/styles/"* "$MASTODON/app/javascript/styles" + +# Add Tangerine UI to themes.yml +{ + echo "tangerineui: styles/tangerineui.scss" + echo "tangerineui-purple: styles/tangerineui-purple.scss" + echo "tangerineui-cherry: styles/tangerineui-cherry.scss" + echo "tangerineui-lagoon: styles/tangerineui-lagoon.scss" +} >> "$MASTODON/config/themes.yml" + +# Navigate to the Mastodon directory +cd "$MASTODON" || { echo "Mastodon directory not found: $MASTODON"; exit 1; } + +# Precompile assets in production mode +RAILS_ENV=production bundle exec rails assets:precompile + +echo "" +echo "Tangerine UI was successfully installed." +echo "Restart all Mastodon services for the changes to take effect." diff --git a/update.sh.example b/update.sh.example new file mode 100644 index 0000000..4159ecf --- /dev/null +++ b/update.sh.example @@ -0,0 +1,27 @@ +#!/bin/bash + +# Ensure the script exits if any command fails +set -e + +# Set the repository and Mastodon paths +TANGERINEUI="/home/mastodon/TangerineUI" +MASTODON="/home/mastodon/live" + +# Navigate to the repository +cd "$TANGERINEUI" || { echo "Tangerine UI repository directory not found: $REPO"; exit 1; } + +# Pull the latest changes from the repository +git pull || { echo "Failed to pull latest changes from the Tangerine UI repository"; exit 1; } + +# Copy styles from the Mastodon repository to the target directory +cp -r "./mastodon/app/javascript/styles/"* "$MASTODON/app/javascript/styles" + +# Navigate to the Mastodon directory +cd "$MASTODON" || { echo "Mastodon directory not found: $MASTODON"; exit 1; } + +# Precompile assets in production mode +RAILS_ENV=production bundle exec rails assets:precompile + +echo "" +echo "Tangerine UI was successfully updated." +echo "Restart all Mastodon services for the changes to take effect." From 8e0e03dc2b5dcdc4daa5036bd5249c5f225577ed Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nile=CC=81ane?= Date: Sat, 19 Oct 2024 19:52:15 +0200 Subject: [PATCH 02/21] Make executable --- install.sh.example | 0 update.sh.example | 0 2 files changed, 0 insertions(+), 0 deletions(-) mode change 100644 => 100755 install.sh.example mode change 100644 => 100755 update.sh.example diff --git a/install.sh.example b/install.sh.example old mode 100644 new mode 100755 diff --git a/update.sh.example b/update.sh.example old mode 100644 new mode 100755 From 6ccb4fca9a721349130be558ea936ebf79df53ff Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nile=CC=81ane?= Date: Sat, 19 Oct 2024 19:52:21 +0200 Subject: [PATCH 03/21] Update gitignore --- .gitignore | 2 ++ 1 file changed, 2 insertions(+) diff --git a/.gitignore b/.gitignore index ec35319..60c71ce 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,4 @@ .DS_Store .nova +update.sh +install.sh From 6441257a3672798144f0b6384cde171be2f94b00 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nile=CC=81ane?= Date: Sat, 19 Oct 2024 19:58:08 +0200 Subject: [PATCH 04/21] Add Duplicate Check for themes.yml --- install.sh.example | 40 +++++++++++++++++++++++++++++++++------- 1 file changed, 33 insertions(+), 7 deletions(-) diff --git a/install.sh.example b/install.sh.example index bdd4e4e..d1a9d25 100755 --- a/install.sh.example +++ b/install.sh.example @@ -16,13 +16,39 @@ git pull || { echo "Failed to pull latest changes from the Tangerine UI reposito # Copy styles from the Mastodon repository to the target directory cp -r "./mastodon/app/javascript/styles/"* "$MASTODON/app/javascript/styles" -# Add Tangerine UI to themes.yml -{ - echo "tangerineui: styles/tangerineui.scss" - echo "tangerineui-purple: styles/tangerineui-purple.scss" - echo "tangerineui-cherry: styles/tangerineui-cherry.scss" - echo "tangerineui-lagoon: styles/tangerineui-lagoon.scss" -} >> "$MASTODON/config/themes.yml" +# Add Tangerine UI to themes.yml if not already present +THEME_FILE="$MASTODON/config/themes.yml" +THEME_LINES=( + "tangerineui: styles/tangerineui.scss" + "tangerineui-purple: styles/tangerineui-purple.scss" + "tangerineui-cherry: styles/tangerineui-cherry.scss" + "tangerineui-lagoon: styles/tangerineui-lagoon.scss" +) + +# Check if the themes are already present +all_present=true +for line in "${THEME_LINES[@]}"; do + if ! grep -Fxq "$line" "$THEME_FILE"; then + all_present=false + break + fi +done + +if [ "$all_present" = false ]; then + if [ -f "$THEME_FILE" ]; then + { + for line in "${THEME_LINES[@]}"; do + echo "$line" + done + } >> "$THEME_FILE" + echo "Added Tangerine UI themes to $THEME_FILE." + else + echo "Themes file not found: $THEME_FILE" + exit 1 + fi +else + echo "Tangerine UI are already present in $THEME_FILE. Skipping this step." +fi # Navigate to the Mastodon directory cd "$MASTODON" || { echo "Mastodon directory not found: $MASTODON"; exit 1; } From 309fee53162c1bb4b7dde6c6837e2e32efc993fa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nile=CC=81ane?= Date: Sat, 19 Oct 2024 20:01:42 +0200 Subject: [PATCH 05/21] Edits --- install.sh.example | 3 +-- update.sh.example | 1 - 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/install.sh.example b/install.sh.example index d1a9d25..6564065 100755 --- a/install.sh.example +++ b/install.sh.example @@ -1,6 +1,5 @@ #!/bin/bash -# Ensure the script exits if any command fails set -e # Set the repository and Mastodon paths @@ -47,7 +46,7 @@ if [ "$all_present" = false ]; then exit 1 fi else - echo "Tangerine UI are already present in $THEME_FILE. Skipping this step." + echo "Tangerine UI is already present in $THEME_FILE. Skipping this step." fi # Navigate to the Mastodon directory diff --git a/update.sh.example b/update.sh.example index 4159ecf..91cccc1 100755 --- a/update.sh.example +++ b/update.sh.example @@ -1,6 +1,5 @@ #!/bin/bash -# Ensure the script exits if any command fails set -e # Set the repository and Mastodon paths From 5dd1b6a1bcab4be76a41675af25b63275a45d51c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nile=CC=81ane?= Date: Sat, 19 Oct 2024 20:26:08 +0200 Subject: [PATCH 06/21] Add Paths Check --- install.sh.example | 18 +++++++++++++++++- update.sh.example | 2 +- 2 files changed, 18 insertions(+), 2 deletions(-) diff --git a/install.sh.example b/install.sh.example index 6564065..3fd0347 100755 --- a/install.sh.example +++ b/install.sh.example @@ -6,8 +6,24 @@ set -e TANGERINEUI="/home/mastodon/TangerineUI" MASTODON="/home/mastodon/live" +# Confirm paths +confirm_path() { + local path="$1" + local prompt_message="$2" + + echo "$prompt_message: $path" + read -p "Is this path correct? (y/n): " response + case "$response" in + [Yy]* ) echo "Path confirmed.";; + [Nn]* ) echo "Please update the path in the script."; exit 1;; + * ) echo "Invalid response. Exiting."; exit 1;; + esac +} +confirm_path "$TANGERINEUI" "Tangerine UI repository directory" +confirm_path "$MASTODON" "Mastodon directory" + # Navigate to the repository -cd "$TANGERINEUI" || { echo "Tangerine UI repository directory not found: $REPO"; exit 1; } +cd "$TANGERINEUI" || { echo "Tangerine UI repository directory not found: $TANGERINEUI"; exit 1; } # Pull the latest changes from the repository git pull || { echo "Failed to pull latest changes from the Tangerine UI repository"; exit 1; } diff --git a/update.sh.example b/update.sh.example index 91cccc1..d7f0f65 100755 --- a/update.sh.example +++ b/update.sh.example @@ -7,7 +7,7 @@ TANGERINEUI="/home/mastodon/TangerineUI" MASTODON="/home/mastodon/live" # Navigate to the repository -cd "$TANGERINEUI" || { echo "Tangerine UI repository directory not found: $REPO"; exit 1; } +cd "$TANGERINEUI" || { echo "Tangerine UI repository directory not found: $TANGERINEUI"; exit 1; } # Pull the latest changes from the repository git pull || { echo "Failed to pull latest changes from the Tangerine UI repository"; exit 1; } From 5776a946e4fed29d0efe816e19eab99cfc3de0ef Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nile=CC=81ane?= Date: Sat, 19 Oct 2024 20:29:36 +0200 Subject: [PATCH 07/21] Default to Y --- install.sh.example | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/install.sh.example b/install.sh.example index 3fd0347..82f3428 100755 --- a/install.sh.example +++ b/install.sh.example @@ -12,7 +12,8 @@ confirm_path() { local prompt_message="$2" echo "$prompt_message: $path" - read -p "Is this path correct? (y/n): " response + read -p "Is this path correct? (Y/n): " response + response=${response:-y} case "$response" in [Yy]* ) echo "Path confirmed.";; [Nn]* ) echo "Please update the path in the script."; exit 1;; From a2328288f43d89e9fae8d2857cbb14027ff0c737 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nile=CC=81ane?= Date: Sat, 19 Oct 2024 21:33:25 +0200 Subject: [PATCH 08/21] Edits --- install.sh.example | 83 +++++++++++++++++++++++++++++----------------- update.sh.example | 26 --------------- 2 files changed, 53 insertions(+), 56 deletions(-) delete mode 100755 update.sh.example diff --git a/install.sh.example b/install.sh.example index 82f3428..3f2ca8a 100755 --- a/install.sh.example +++ b/install.sh.example @@ -1,8 +1,25 @@ #!/bin/bash +# TANGERINE UI +# Install/Update script +# --------------------- +# +# This script pulls the latest changes from the Tangerine UI repository, +# copies the CSS files to the Mastodon installation directory, and adds Tangerine UI to Mastodon's themes.yml. +# It can also be used to update Tangerine UI on your Mastodon instance. +# +# +# • Set the TANGERINEUI and MASTODON paths below before running the script for the first time. +# • Only run this script as the mastodon user. +# • Use --skip-confirm to bypass all confirmation steps. +# +# +# /!\ This script is not suitable for Glitch-soc instances. + + set -e -# Set the repository and Mastodon paths +# Set the Tangerine UI and Mastodon paths TANGERINEUI="/home/mastodon/TangerineUI" MASTODON="/home/mastodon/live" @@ -17,19 +34,35 @@ confirm_path() { case "$response" in [Yy]* ) echo "Path confirmed.";; [Nn]* ) echo "Please update the path in the script."; exit 1;; - * ) echo "Invalid response. Exiting."; exit 1;; + * ) echo "Invalid response. Exiting." >&2; exit 1;; esac } -confirm_path "$TANGERINEUI" "Tangerine UI repository directory" -confirm_path "$MASTODON" "Mastodon directory" + +# Check for command-line arguments +SKIP_CONFIRM=false +while [[ "$#" -gt 0 ]]; do + case $1 in + --skip-confirm) SKIP_CONFIRM=true ;; + *) echo "Unknown parameter passed: $1" >&2; exit 1 ;; + esac + shift +done + +# Confirm the paths with the user unless --skip-confirm is provided +if [ "$SKIP_CONFIRM" = false ]; then + confirm_path "$TANGERINEUI" "Tangerine UI repository directory" + confirm_path "$MASTODON" "Mastodon directory" +else + echo "Skipping path confirmation." +fi # Navigate to the repository -cd "$TANGERINEUI" || { echo "Tangerine UI repository directory not found: $TANGERINEUI"; exit 1; } +cd "$TANGERINEUI" || { echo "Tangerine UI repository directory not found: $TANGERINEUI" >&2; exit 1; } # Pull the latest changes from the repository -git pull || { echo "Failed to pull latest changes from the Tangerine UI repository"; exit 1; } +git pull || { echo "Failed to pull latest changes from the Tangerine UI repository" >&2; exit 1; } -# Copy styles from the Mastodon repository to the target directory +# Copy files from the Tangerine UI repository to the Mastodon directory cp -r "./mastodon/app/javascript/styles/"* "$MASTODON/app/javascript/styles" # Add Tangerine UI to themes.yml if not already present @@ -41,33 +74,23 @@ THEME_LINES=( "tangerineui-lagoon: styles/tangerineui-lagoon.scss" ) -# Check if the themes are already present -all_present=true -for line in "${THEME_LINES[@]}"; do - if ! grep -Fxq "$line" "$THEME_FILE"; then - all_present=false - break - fi -done - -if [ "$all_present" = false ]; then - if [ -f "$THEME_FILE" ]; then - { - for line in "${THEME_LINES[@]}"; do - echo "$line" - done - } >> "$THEME_FILE" - echo "Added Tangerine UI themes to $THEME_FILE." - else - echo "Themes file not found: $THEME_FILE" - exit 1 - fi +# Check if the themes are already present and add missing ones +if [ -f "$THEME_FILE" ]; then + for line in "${THEME_LINES[@]}"; do + if ! grep -Fxq "$line" "$THEME_FILE"; then + echo "$line" >> "$THEME_FILE" + echo "Added to $THEME_FILE: $line" + else + echo "Already present in $THEME_FILE: $line" + fi + done else - echo "Tangerine UI is already present in $THEME_FILE. Skipping this step." + echo "themes.yml not found: $THEME_FILE" >&2 + exit 1 fi # Navigate to the Mastodon directory -cd "$MASTODON" || { echo "Mastodon directory not found: $MASTODON"; exit 1; } +cd "$MASTODON" # Precompile assets in production mode RAILS_ENV=production bundle exec rails assets:precompile diff --git a/update.sh.example b/update.sh.example deleted file mode 100755 index d7f0f65..0000000 --- a/update.sh.example +++ /dev/null @@ -1,26 +0,0 @@ -#!/bin/bash - -set -e - -# Set the repository and Mastodon paths -TANGERINEUI="/home/mastodon/TangerineUI" -MASTODON="/home/mastodon/live" - -# Navigate to the repository -cd "$TANGERINEUI" || { echo "Tangerine UI repository directory not found: $TANGERINEUI"; exit 1; } - -# Pull the latest changes from the repository -git pull || { echo "Failed to pull latest changes from the Tangerine UI repository"; exit 1; } - -# Copy styles from the Mastodon repository to the target directory -cp -r "./mastodon/app/javascript/styles/"* "$MASTODON/app/javascript/styles" - -# Navigate to the Mastodon directory -cd "$MASTODON" || { echo "Mastodon directory not found: $MASTODON"; exit 1; } - -# Precompile assets in production mode -RAILS_ENV=production bundle exec rails assets:precompile - -echo "" -echo "Tangerine UI was successfully updated." -echo "Restart all Mastodon services for the changes to take effect." From 50bbdf39de4373cef00aa086c6d4ef3c91a2a5b5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nile=CC=81ane?= Date: Sat, 19 Oct 2024 21:37:55 +0200 Subject: [PATCH 09/21] Improved messages --- install.sh.example | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/install.sh.example b/install.sh.example index 3f2ca8a..d2f2b5a 100755 --- a/install.sh.example +++ b/install.sh.example @@ -79,9 +79,9 @@ if [ -f "$THEME_FILE" ]; then for line in "${THEME_LINES[@]}"; do if ! grep -Fxq "$line" "$THEME_FILE"; then echo "$line" >> "$THEME_FILE" - echo "Added to $THEME_FILE: $line" + echo "Added to themes.yml: $line" else - echo "Already present in $THEME_FILE: $line" + echo "Already present in themes.yml: $line" fi done else From d4e2b441e3f81c9a419d72fd80d1d0f0ad61ba05 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nile=CC=81ane?= Date: Sat, 19 Oct 2024 21:42:48 +0200 Subject: [PATCH 10/21] Rename example to sample --- install.sh.example => install.sh.sample | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename install.sh.example => install.sh.sample (100%) diff --git a/install.sh.example b/install.sh.sample similarity index 100% rename from install.sh.example rename to install.sh.sample From 5bcc6953687418b00ca55b772363a7cf27829aff Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nile=CC=81ane?= Date: Sat, 19 Oct 2024 22:36:52 +0200 Subject: [PATCH 11/21] Move variables to the top of the file --- install.sh.sample | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/install.sh.sample b/install.sh.sample index d2f2b5a..90b1935 100755 --- a/install.sh.sample +++ b/install.sh.sample @@ -16,13 +16,11 @@ # # /!\ This script is not suitable for Glitch-soc instances. - -set -e - -# Set the Tangerine UI and Mastodon paths TANGERINEUI="/home/mastodon/TangerineUI" MASTODON="/home/mastodon/live" +set -e + # Confirm paths confirm_path() { local path="$1" From e17c8057bf92710688518bcbb44977cdfb187087 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nil=C3=A9ane?= <914451+nileane@users.noreply.github.com> Date: Sat, 19 Oct 2024 22:51:26 +0200 Subject: [PATCH 12/21] Update README.md to add script instructions --- README.md | 65 ++++++++++++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 62 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 2e5e16c..87bdd91 100644 --- a/README.md +++ b/README.md @@ -165,6 +165,55 @@ These are known Mastodon instances that have enabled Tangerine UI for their user 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 your users change back to any of Mastodon's default themes in their Appearance settings. +#### Install using the included script +Run the following commands as the `mastodon` user to install Tangerine UI using the [included script](https://github.com/nileane/TangerineUI-for-Mastodon/blob/main/install.sh.sample): + +1. **Clone** the Tangerine UI repository +```sh +git clone https://github.com/nileane/TangerineUI-for-Mastodon.git ./TangerineUI +cd TangerineUI +``` + +2. **Copy the sample install script**. +```sh +cp install.sh.sample install.sh +``` + +Make sure the Mastodon and Tangerine UI directory paths at the top of `install.sh` are correct: + * Edit the line beginning with `TANGERINEUI=` to adjust the path to the Tangerine UI directory. + * Edit the line beginning with `MASTODON=` to adjust the path to your Mastodon installation directory. + +4. **Run the install script**. +```sh +./install.sh +``` + +> [!NOTE] +> To bypass all confirmation prompts, use `--skip-confirm`: +> ```sh +> ./install.sh --skip-confirm +> ``` + +5. **\[Optional\] Add a localized name.** 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: + contrast: Mastodon (High contrast) + default: Mastodon (Dark) + mastodon-light: Mastodon (Light) + tangerineui: Tangerine UI + tangerineui-purple: Tangerine UI (Purple) + tangerineui-cherry: Tangerine UI (Cherry) + tangerineui-lagoon: Tangerine UI (Lagoon) +``` + +6. Restart your Mastodon instance for the changes to take effect. + +> [!NOTE] +> `./install.sh` can be run again to update Tangerine UI on your Mastodon instance. + +#### Install manually (without the included script) + 1. **Check your Mastodon version**. For Tangerine UI to work properly, you need to make sure you're installing the right version for your Mastodon instance. Please check the [Compatibility](#compatibility) section in this document before you proceed. 2. **Copy the files** from `mastodon/app/javascript/styles/` [in this repository](https://github.com/nileane/TangerineUI-for-Mastodon/tree/main/mastodon/app/javascript/styles/) to your Mastodon themes directory `app/javascript/styles/`: @@ -187,7 +236,7 @@ tangerineui-cherry: styles/tangerineui-cherry.scss tangerineui-lagoon: styles/tangerineui-lagoon.scss ``` -4. **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)*"). +4. **\[Optional\] Add a localized name.** 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: @@ -200,7 +249,12 @@ themes: tangerineui-lagoon: Tangerine UI (Lagoon) ``` -5. **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. +5. **Compile**: +```sh +RAILS_ENV=production bundle exec rails assets:precompile +``` + +6. **Restart** your Mastodon instance for the changes to take effect. Your users should now be able to choose '*Tangerine UI*', '*Tangerine UI (Purple)*', '*Tangerine UI (Cherry)*', or '*Tangerine UI (Lagoon)*' as their site theme: @@ -230,7 +284,12 @@ cp -r $REPO/mastodon/app/javascript/styles/* $INSTALLDIR/app/javascript/styles cp -r $REPO/mastodon/app/javascript/skins/vanilla/* $INSTALLDIR/app/javascript/skins/vanilla ``` -4. **Compile theme assets and restart.** Run `RAILS_ENV=production bundle exec rails assets:precompile` and restart your Glitch-soc instance for the changes to take effect. +4. **Compile**: +```sh +RAILS_ENV=production bundle exec rails assets:precompile +``` + +5. **Restart** your Mastodon instance for the changes to take effect. Your users should now be able to select Tangerine UI as a theme in their settings, under Flavours → Vanilla Mastodon → Skin From 6328c561c0dd699303b62b058edfe698d1782c8a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nile=CC=81ane?= Date: Sat, 19 Oct 2024 23:14:36 +0200 Subject: [PATCH 13/21] Phrasing --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 87bdd91..d095a2d 100644 --- a/README.md +++ b/README.md @@ -90,7 +90,7 @@ Soft turquoise palette that gives neon vibes at night. ## List of instances that use Tangerine UI -These are known Mastodon instances that have enabled Tangerine UI for their users, either as the only theme or as an optional theme.[^2] +This is a list of known Mastodon instances on which Tangerine UI has been installed, either as the only theme or as an optional theme.[^2] [^2]: If you're an admin and have installed Tangerine UI on your instance, **feel free to add yours to this list**. (Make a Pull Request, or just [DM me](https://nileane.fr/@tangerineui)) | **Instance** | **User count** | **Installed as...** | **Default theme?** | From 1230817f27a677a2c7486825c07049cb72b48251 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nil=C3=A9ane?= <914451+nileane@users.noreply.github.com> Date: Sun, 20 Oct 2024 00:07:54 +0200 Subject: [PATCH 14/21] Update README.md --- README.md | 72 ++++++++++++++++++++++++++++++------------------------- 1 file changed, 40 insertions(+), 32 deletions(-) diff --git a/README.md b/README.md index d095a2d..ba68f52 100644 --- a/README.md +++ b/README.md @@ -12,20 +12,24 @@ Tangerine UI is a vibrant, fully-featured custom theme for Mastodon's Web UI tha ## Table of contents -* [**Variants**](#variants) -* [**Features**](#features) -* [**List of instances that use Tangerine UI**](#list-of-instances-that-use-tangerine-ui) -* [**Compatibility**](#compatibility) -* [**Installation**](#installation-for-mastodon-admins) - * [Install on a **Mastodon** instance](#installation-for-mastodon-admins) - * [Install on a **Glitch-soc** instance](#installation-for-glitch-soc-admins) - * [Install as a regular user](#installation-for-regular-users) -* [**Accessibility**](#accessibility) -* [**Credits**](#credits) -* [**Support me**](#support-me-3) +1. [**Overview**](#overview) + * [**Variants**](#variants) + * [**Features**](#features) + * [**List of instances that use Tangerine UI**](#list-of-instances-that-use-tangerine-ui) +2. [**Compatibility**](#compatibility) +6. [**Installation** for Mastodon instance admins](#installation-for-mastodon-admins) + * [Install on a **Mastodon** instance](#installation-for-mastodon-admins) + * [using the included script](#install-using-the-included-script) + * [... or manually](#install-manually-without-the-included-script) + * [Install on a **Glitch-soc** instance](#installation-for-glitch-soc-admins) +7. [**Installation** for regular users](#installation-for-regular-users) +8. [**Accessibility**](#accessibility) +9. [**Credits**](#credits) +10. [**Support me**](#support-me-3) +## Overview -## Variants +### Variants **🍊 Tangerine** Default variant for Tangerine UI, featuring a soft orange palette. @@ -55,41 +59,41 @@ Soft turquoise palette that gives neon vibes at night.   -## Features +### Features -* 🧑‍🔬 **Support for the advanced web interface** - All variants of Tangerine UI support Mastodon's multi-column layout. +🧑‍🔬 **Support for the advanced web interface** +All variants of Tangerine UI support Mastodon's multi-column layout. Mastodon's advanced web interface featuring Tangerine UI -* 🚀 **Playful animations** - The rocket flies! +🚀 **Playful animations** +The rocket flies! - Clicking the Boost buttons makes the rocket icon seeming like it's taking off. Clicking the favorite button makes it bounce. Cliking the bookmark button makes it shake vertically. +Clicking the Boost buttons makes the rocket icon seeming like it's taking off. Clicking the favorite button makes it bounce. Cliking the bookmark button makes it shake vertically. -* 🌚 **Dark mode** - Tangerine UI automatically switches from light to dark mode based on your system or browser preference.[^1] - [^1]: Tangerine UI uses the [`prefers-color-scheme`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) CSS media feature to detect if you have requested a light or dark theme through an operating system setting or a user agent setting. +
🌚 **Dark mode** +Tangerine UI automatically switches from light to dark mode based on your system or browser preference.[^1] +[^1]: Tangerine UI uses the [`prefers-color-scheme`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) CSS media feature to detect if you have requested a light or dark theme through an operating system setting or a user agent setting. -* 💬 **Distinct look for DMs** - It can be easy to mistake a DM for a regular post on Mastodon. Tangerine UI gives DMs a specific look, so they stand out in your timeline, and you don't make any embarrassing mistakes. +💬 **Distinct look for DMs** +It can be easy to mistake a DM for a regular post on Mastodon. Tangerine UI gives DMs a specific look, so they stand out in your timeline, and you don't make any embarrassing mistakes. -* 👁️ **Compact timeline** - Avatars are aligned on the side, margins are properly reduced, and threads are easier to read. +👁️ **Compact timeline** +Avatars are aligned on the side, margins are properly reduced, and threads are easier to read. -* ✴️ **Phosphor icons** - Tangerine UI uses a selection of icons from the beautiful [Phosphor](https://phosphoricons.com) icon family +✴️ **Phosphor icons** +Tangerine UI uses a selection of icons from the beautiful [Phosphor](https://phosphoricons.com) icon family -* 🔍 **Zoom on emojis** +🔍 **Zoom on emojis** Custom emojis are great, but they may be difficult to distinguish when they are overly detailed. Tangerine UI allows you to hover and pause over an emoji to enlarge it. -* ✳️ **and more** - Tangerine UI was designed with care and great attention to detail. Feel free to explore all the changes it brings to Mastodon's UI, and feel free to [message me](https://nileane.fr/@TangerineUI) if you ever have any feedback to share or [bugs to report](https://github.com/nileane/TangerineUI-for-Mastodon/issues). :) +✳️ **and more** +Tangerine UI was designed with care and great attention to detail. Feel free to explore all the changes it brings to Mastodon's UI, and feel free to [message me](https://nileane.fr/@TangerineUI) if you ever have any feedback to share or [bugs to report](https://github.com/nileane/TangerineUI-for-Mastodon/issues). :) -## List of instances that use Tangerine UI +### List of instances that use Tangerine UI This is a list of known Mastodon instances on which Tangerine UI has been installed, either as the only theme or as an optional theme.[^2] [^2]: If you're an admin and have installed Tangerine UI on your instance, **feel free to add yours to this list**. (Make a Pull Request, or just [DM me](https://nileane.fr/@tangerineui)) @@ -165,7 +169,9 @@ This is a list of known Mastodon instances on which Tangerine UI has been instal 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 your users change back to any of Mastodon's default themes in their Appearance settings. -#### Install using the included script +
+Install using the included script + Run the following commands as the `mastodon` user to install Tangerine UI using the [included script](https://github.com/nileane/TangerineUI-for-Mastodon/blob/main/install.sh.sample): 1. **Clone** the Tangerine UI repository @@ -212,6 +218,8 @@ themes: > [!NOTE] > `./install.sh` can be run again to update Tangerine UI on your Mastodon instance. +
+ #### Install manually (without the included script) 1. **Check your Mastodon version**. For Tangerine UI to work properly, you need to make sure you're installing the right version for your Mastodon instance. Please check the [Compatibility](#compatibility) section in this document before you proceed. From ea5acafb1dcba2e907d45255ce0fd6726035f4f0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nil=C3=A9ane?= <914451+nileane@users.noreply.github.com> Date: Sun, 20 Oct 2024 00:32:29 +0200 Subject: [PATCH 15/21] Update README.md --- README.md | 56 ++++++++++++++++++++++++++++++------------------------- 1 file changed, 31 insertions(+), 25 deletions(-) diff --git a/README.md b/README.md index ba68f52..e51fce8 100644 --- a/README.md +++ b/README.md @@ -19,8 +19,6 @@ Tangerine UI is a vibrant, fully-featured custom theme for Mastodon's Web UI tha 2. [**Compatibility**](#compatibility) 6. [**Installation** for Mastodon instance admins](#installation-for-mastodon-admins) * [Install on a **Mastodon** instance](#installation-for-mastodon-admins) - * [using the included script](#install-using-the-included-script) - * [... or manually](#install-manually-without-the-included-script) * [Install on a **Glitch-soc** instance](#installation-for-glitch-soc-admins) 7. [**Installation** for regular users](#installation-for-regular-users) 8. [**Accessibility**](#accessibility) @@ -166,11 +164,13 @@ This is a list of known Mastodon instances on which Tangerine UI has been instal > Please make sure there is a consensus among your users for doing so. If not, see below how to install Tangerine UI as an optional theme for your users. ### 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 your users change back to any of Mastodon's default themes in their Appearance settings. +Follow these instructions to install Tangerine UI as an optional theme on your Mastodon instance. +Your users will be able to select Tangerine UI in their settings on the web, and you will be able to set Tangerine UI as the default theme for your instance.
-Install using the included script +Install (using the included script) + +A basic installation script is included in this repository. This script pulls the latest release from the Tangerine UI repository, copies the CSS files to the Mastodon installation directory, adds Tangerine UI to Mastodon's themes.yml, and recompiles Mastodon's assets. It can also be used to update Tangerine UI on your Mastodon instance. Run the following commands as the `mastodon` user to install Tangerine UI using the [included script](https://github.com/nileane/TangerineUI-for-Mastodon/blob/main/install.sh.sample): @@ -194,12 +194,6 @@ Make sure the Mastodon and Tangerine UI directory paths at the top of `install.s ./install.sh ``` -> [!NOTE] -> To bypass all confirmation prompts, use `--skip-confirm`: -> ```sh -> ./install.sh --skip-confirm -> ``` - 5. **\[Optional\] Add a localized name.** 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 @@ -213,16 +207,23 @@ themes: tangerineui-lagoon: Tangerine UI (Lagoon) ``` -6. Restart your Mastodon instance for the changes to take effect. +6. **Restart** your Mastodon instance for the changes to take effect. -> [!NOTE] -> `./install.sh` can be run again to update Tangerine UI on your Mastodon instance. +Your users should now be able to choose '*Tangerine UI*', '*Tangerine UI (Purple)*', '*Tangerine UI (Cherry)*', or '*Tangerine UI (Lagoon)*' as their site theme: + +![Screenshot : select Tangerine UI as a theme in appearance settings on Mastodon.](https://github.com/nileane/TangerineUI-for-Mastodon/assets/914451/8cce803c-099b-4f25-8e39-e1c0da3aa6dc) + +As an admin, you should also now be able to set Tangerine UI as the default theme for your instance (navigate to https://*domain*/admin/settings/appearance): + +![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)
-#### Install manually (without the included script) -1. **Check your Mastodon version**. For Tangerine UI to work properly, you need to make sure you're installing the right version for your Mastodon instance. Please check the [Compatibility](#compatibility) section in this document before you proceed. +
+Install manually (without the script) + +1. **Check your Mastodon version**. For Tangerine UI to work properly, you need to make sure you're installing the correct version for your Mastodon instance. Please refer to the [Compatibility](#compatibility) section in this document before you proceed. 2. **Copy the files** from `mastodon/app/javascript/styles/` [in this repository](https://github.com/nileane/TangerineUI-for-Mastodon/tree/main/mastodon/app/javascript/styles/) to your Mastodon themes directory `app/javascript/styles/`: @@ -257,7 +258,7 @@ themes: tangerineui-lagoon: Tangerine UI (Lagoon) ``` -5. **Compile**: +5. **Compile** assets: ```sh RAILS_ENV=production bundle exec rails assets:precompile ``` @@ -271,43 +272,48 @@ Your users should now be able to choose '*Tangerine UI*', '*Tangerine UI (Purple As an admin, you should also now be able to set Tangerine UI as the default theme for your instance (navigate to https://*domain*/admin/settings/appearance): ![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's features and layout, but it can still be installed as a vanilla skin on your Glitch-soc instance: +
+Specific instructions for Glitch-soc instances -1. **Check your Mastodon version**. For Tangerine UI to work properly, you need to make sure you're installing the right version for your Glitch-soc instance. Please check the [Compatibility](#compatibility) section in this document before you proceed. +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: -2. **Copy the files** from `mastodon/app/javascript/styles/` [in this repository](https://github.com/nileane/TangerineUI-for-Mastodon/tree/main/mastodon/app/javascript/styles/) to your Mastodon themes directory `app/javascript/styles/`: +1. **Copy the files** from `mastodon/app/javascript/styles/` [in this repository](https://github.com/nileane/TangerineUI-for-Mastodon/tree/main/mastodon/app/javascript/styles/) to your Mastodon themes directory `app/javascript/styles/`: ```sh # Where $REPO is this repository, and $INSTALLDIR is your Glitch-soc installation. cp -r $REPO/mastodon/app/javascript/styles/* $INSTALLDIR/app/javascript/styles ``` -3. **Copy the files** from `mastodon/app/javascript/skins/vanilla/` [in this repository](https://github.com/nileane/TangerineUI-for-Mastodon/tree/main/mastodon/app/javascript/skins/vanilla/) to your Glitch-soc skins directory `app/javascript/skins/vanilla/`: +2. **Copy the files** from `mastodon/app/javascript/skins/vanilla/` [in this repository](https://github.com/nileane/TangerineUI-for-Mastodon/tree/main/mastodon/app/javascript/skins/vanilla/) to your Glitch-soc skins directory `app/javascript/skins/vanilla/`: ```sh # Where $REPO is this repository, and $INSTALLDIR is your Glitch-soc installation. cp -r $REPO/mastodon/app/javascript/skins/vanilla/* $INSTALLDIR/app/javascript/skins/vanilla ``` -4. **Compile**: +3. **Compile** assets: ```sh RAILS_ENV=production bundle exec rails assets:precompile ``` -5. **Restart** your Mastodon instance for the changes to take effect. +5. **Restart** your instance for the changes to take effect. Your users should now be able to select Tangerine UI as a 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 an admin on your instance, you can still use Tangerine UI with a browser extension: -1. **Check your Mastodon version**. For Tangerine UI to work properly, you need to make sure you're using the right version for your Mastodon instance. Please check the [Compatibility](#compatibility) section in this document before you proceed. +1. **Check your Mastodon version**. For Tangerine UI to work properly, you need to make sure you're using the correct version for your Mastodon instance. Please refer to the [Compatibility](#compatibility) section in this document before you proceed. 2. **Install a 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) 3. 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. From 26350a2c3b883cd47d329446fca7d7e8e389a4bd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nil=C3=A9ane?= <914451+nileane@users.noreply.github.com> Date: Sun, 20 Oct 2024 00:46:54 +0200 Subject: [PATCH 16/21] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index e51fce8..300bbb6 100644 --- a/README.md +++ b/README.md @@ -170,7 +170,7 @@ Your users will be able to select Tangerine UI in their settings on the web, and
Install (using the included script) -A basic installation script is included in this repository. This script pulls the latest release from the Tangerine UI repository, copies the CSS files to the Mastodon installation directory, adds Tangerine UI to Mastodon's themes.yml, and recompiles Mastodon's assets. It can also be used to update Tangerine UI on your Mastodon instance. +A basic installation script is included in this repository. This script pulls the latest changes from the Tangerine UI repository, copies the CSS files to the Mastodon installation directory, adds Tangerine UI to Mastodon's themes.yml, and recompiles Mastodon's assets. It can also be used to update Tangerine UI on your Mastodon instance. Run the following commands as the `mastodon` user to install Tangerine UI using the [included script](https://github.com/nileane/TangerineUI-for-Mastodon/blob/main/install.sh.sample): From e2fb7dbfce55b5e2f19c80ab5d38e48c81f1f4a3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nil=C3=A9ane?= <914451+nileane@users.noreply.github.com> Date: Sun, 20 Oct 2024 12:52:55 +0200 Subject: [PATCH 17/21] Update README.md --- README.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 300bbb6..1dac080 100644 --- a/README.md +++ b/README.md @@ -170,7 +170,9 @@ Your users will be able to select Tangerine UI in their settings on the web, and
Install (using the included script) -A basic installation script is included in this repository. This script pulls the latest changes from the Tangerine UI repository, copies the CSS files to the Mastodon installation directory, adds Tangerine UI to Mastodon's themes.yml, and recompiles Mastodon's assets. It can also be used to update Tangerine UI on your Mastodon instance. + +A basic installation script is included in this repository. +It can also be used again to update Tangerine UI on your Mastodon instance. Run the following commands as the `mastodon` user to install Tangerine UI using the [included script](https://github.com/nileane/TangerineUI-for-Mastodon/blob/main/install.sh.sample): From dc196a739d69e87cf43cc0661f9e8589dcabf5c0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nil=C3=A9ane?= <914451+nileane@users.noreply.github.com> Date: Sun, 20 Oct 2024 13:12:30 +0200 Subject: [PATCH 18/21] Update README.md --- README.md | 21 +++++++++++++-------- 1 file changed, 13 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index 1dac080..870ca2a 100644 --- a/README.md +++ b/README.md @@ -152,7 +152,7 @@ This is a list of known Mastodon instances on which Tangerine UI has been instal ## Installation for Mastodon admins ### Install Tangerine UI as the only theme on your instance: -1. **Check your Mastodon version**. For Tangerine UI to work properly, you need to make sure you're installing the right version for your Mastodon instance. Please check the [Compatibility](#compatibility) section in this document before you proceed. +1. **Check your Mastodon version**. For Tangerine UI to work properly, you need to make sure you're installing the right version for your Mastodon instance. Please refer to the [Compatibility](#compatibility) section in this document before you proceed. 2. 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). * 🪻 For the Purple variant, copy the contents of [`TangerineUI-purple.css`](https://github.com/nileane/TangerineUI-for-Mastodon/blob/main/TangerineUI-purple.css) instead. @@ -169,7 +169,7 @@ Your users will be able to select Tangerine UI in their settings on the web, and
Install (using the included script) - +
A basic installation script is included in this repository. It can also be used again to update Tangerine UI on your Mastodon instance. @@ -182,7 +182,7 @@ git clone https://github.com/nileane/TangerineUI-for-Mastodon.git ./TangerineUI cd TangerineUI ``` -2. **Copy the sample install script**. +2. **Copy** the sample install script. ```sh cp install.sh.sample install.sh ``` @@ -191,12 +191,17 @@ Make sure the Mastodon and Tangerine UI directory paths at the top of `install.s * Edit the line beginning with `TANGERINEUI=` to adjust the path to the Tangerine UI directory. * Edit the line beginning with `MASTODON=` to adjust the path to your Mastodon installation directory. -4. **Run the install script**. +3. **Run** the install script. ```sh ./install.sh ``` -5. **\[Optional\] Add a localized name.** 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)*"). +Optionally, run with `--skip-confirm` to bypass all confirmation prompts: +```sh +./install.sh --skip-confirm +``` + +4. **\[Optional\] Add a localized name.** 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: @@ -209,7 +214,7 @@ themes: tangerineui-lagoon: Tangerine UI (Lagoon) ``` -6. **Restart** your Mastodon instance for the changes to take effect. +5. **Restart** your Mastodon instance for the changes to take effect. Your users should now be able to choose '*Tangerine UI*', '*Tangerine UI (Purple)*', '*Tangerine UI (Cherry)*', or '*Tangerine UI (Lagoon)*' as their site theme: @@ -223,11 +228,11 @@ As an admin, you should also now be able to set Tangerine UI as the default them
-Install manually (without the script) +Install manually 1. **Check your Mastodon version**. For Tangerine UI to work properly, you need to make sure you're installing the correct version for your Mastodon instance. Please refer to the [Compatibility](#compatibility) section in this document before you proceed. -2. **Copy the files** from `mastodon/app/javascript/styles/` [in this repository](https://github.com/nileane/TangerineUI-for-Mastodon/tree/main/mastodon/app/javascript/styles/) to your Mastodon themes directory `app/javascript/styles/`: +2. **Copy** the files from `mastodon/app/javascript/styles/` [in this repository](https://github.com/nileane/TangerineUI-for-Mastodon/tree/main/mastodon/app/javascript/styles/) to your Mastodon themes directory `app/javascript/styles/`: ```sh # Where $REPO is this repository, and $INSTALLDIR is your Mastodon installation. From 90c0218537aa091a6bf586d915bafe2195ce0062 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nil=C3=A9ane?= <914451+nileane@users.noreply.github.com> Date: Sun, 20 Oct 2024 13:31:34 +0200 Subject: [PATCH 19/21] Update README.md --- README.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/README.md b/README.md index 870ca2a..2af47b9 100644 --- a/README.md +++ b/README.md @@ -151,6 +151,10 @@ This is a list of known Mastodon instances on which Tangerine UI has been instal ## Installation for Mastodon admins +There are two ways to install Tangerine UI on your Mastodon instance: +* as the **only** theme +* as an **optional** theme \[Recommended\] + ### Install Tangerine UI as the only theme on your instance: 1. **Check your Mastodon version**. For Tangerine UI to work properly, you need to make sure you're installing the right version for your Mastodon instance. Please refer to the [Compatibility](#compatibility) section in this document before you proceed. From 004a3d8c8ad74eb8b13bec871cb66e3daf2ba5f4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nile=CC=81ane?= Date: Sun, 20 Oct 2024 14:01:24 +0200 Subject: [PATCH 20/21] Visual fixes to the Lists tab (fixes #124) --- TangerineUI-cherry.css | 26 +++++++++++++++++++++++--- TangerineUI-lagoon.css | 26 +++++++++++++++++++++++--- TangerineUI-purple.css | 26 +++++++++++++++++++++++--- TangerineUI.css | 26 +++++++++++++++++++++++--- 4 files changed, 92 insertions(+), 12 deletions(-) diff --git a/TangerineUI-cherry.css b/TangerineUI-cherry.css index 21ea753..82607a5 100644 --- a/TangerineUI-cherry.css +++ b/TangerineUI-cherry.css @@ -5678,6 +5678,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu 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 { @@ -5708,10 +5709,25 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .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 { @@ -7482,7 +7498,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; @@ -7495,6 +7511,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( diff --git a/TangerineUI-lagoon.css b/TangerineUI-lagoon.css index 4cb9e4a..851cdcc 100644 --- a/TangerineUI-lagoon.css +++ b/TangerineUI-lagoon.css @@ -5678,6 +5678,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu 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 { @@ -5708,10 +5709,25 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .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 { @@ -7482,7 +7498,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; @@ -7495,6 +7511,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( diff --git a/TangerineUI-purple.css b/TangerineUI-purple.css index e66c328..ba1f63b 100644 --- a/TangerineUI-purple.css +++ b/TangerineUI-purple.css @@ -5678,6 +5678,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu 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 { @@ -5708,10 +5709,25 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .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 { @@ -7482,7 +7498,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; @@ -7495,6 +7511,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( diff --git a/TangerineUI.css b/TangerineUI.css index 6892308..3c71e29 100644 --- a/TangerineUI.css +++ b/TangerineUI.css @@ -5678,6 +5678,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu 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 { @@ -5708,10 +5709,25 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .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 { @@ -7482,7 +7498,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; @@ -7495,6 +7511,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( From de95afd86ee21f2f9a5ca1a5ed72621ebbf89df3 Mon Sep 17 00:00:00 2001 From: nileane Date: Sun, 20 Oct 2024 12:01:48 +0000 Subject: [PATCH 21/21] Copy CSS files to installation folder --- .../tangerineui-cherry.scss | 26 ++++++++++++++++--- .../tangerineui-lagoon.scss | 26 ++++++++++++++++--- .../tangerineui-purple.scss | 26 ++++++++++++++++--- .../styles/tangerineui/tangerineui.scss | 26 ++++++++++++++++--- 4 files changed, 92 insertions(+), 12 deletions(-) diff --git a/mastodon/app/javascript/styles/tangerineui-cherry/tangerineui-cherry.scss b/mastodon/app/javascript/styles/tangerineui-cherry/tangerineui-cherry.scss index 21ea753..82607a5 100644 --- a/mastodon/app/javascript/styles/tangerineui-cherry/tangerineui-cherry.scss +++ b/mastodon/app/javascript/styles/tangerineui-cherry/tangerineui-cherry.scss @@ -5678,6 +5678,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu 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 { @@ -5708,10 +5709,25 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .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 { @@ -7482,7 +7498,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; @@ -7495,6 +7511,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( diff --git a/mastodon/app/javascript/styles/tangerineui-lagoon/tangerineui-lagoon.scss b/mastodon/app/javascript/styles/tangerineui-lagoon/tangerineui-lagoon.scss index 4cb9e4a..851cdcc 100644 --- a/mastodon/app/javascript/styles/tangerineui-lagoon/tangerineui-lagoon.scss +++ b/mastodon/app/javascript/styles/tangerineui-lagoon/tangerineui-lagoon.scss @@ -5678,6 +5678,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu 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 { @@ -5708,10 +5709,25 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .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 { @@ -7482,7 +7498,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; @@ -7495,6 +7511,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( diff --git a/mastodon/app/javascript/styles/tangerineui-purple/tangerineui-purple.scss b/mastodon/app/javascript/styles/tangerineui-purple/tangerineui-purple.scss index e66c328..ba1f63b 100644 --- a/mastodon/app/javascript/styles/tangerineui-purple/tangerineui-purple.scss +++ b/mastodon/app/javascript/styles/tangerineui-purple/tangerineui-purple.scss @@ -5678,6 +5678,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu 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 { @@ -5708,10 +5709,25 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .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 { @@ -7482,7 +7498,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; @@ -7495,6 +7511,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( diff --git a/mastodon/app/javascript/styles/tangerineui/tangerineui.scss b/mastodon/app/javascript/styles/tangerineui/tangerineui.scss index 6892308..3c71e29 100644 --- a/mastodon/app/javascript/styles/tangerineui/tangerineui.scss +++ b/mastodon/app/javascript/styles/tangerineui/tangerineui.scss @@ -5678,6 +5678,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu 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 { @@ -5708,10 +5709,25 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .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 { @@ -7482,7 +7498,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; @@ -7495,6 +7511,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(