From 1843b00f1ed58a63d6a14fad852a980f36d4db15 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nile=CC=81ane?= Date: Mon, 19 Aug 2024 15:21:50 +0200 Subject: [PATCH] Improved styling for new filtered notifications settings and UI --- TangerineUI-cherry.css | 29 +++++++++++++++++++++++++++-- TangerineUI-purple.css | 29 +++++++++++++++++++++++++++-- TangerineUI.css | 29 +++++++++++++++++++++++++++-- 3 files changed, 81 insertions(+), 6 deletions(-) diff --git a/TangerineUI-cherry.css b/TangerineUI-cherry.css index 0ed6abc..e2ba297 100644 --- a/TangerineUI-cherry.css +++ b/TangerineUI-cherry.css @@ -1520,11 +1520,15 @@ body.app-body { .app-body .dropdown-button:hover { border-color: var(--color-accent); } -.app-body .dropdown-button.active { +.app-body .dropdown-button.active, +.app-body .column-settings .dropdown-button.active { border-color: var(--color-accent); background-color: var(--color-accent); color: var(--color-accent-fg); } +.app-body .column-settings .dropdown-button { + background-color: var(--color-accent-bg); +} .app-body .reply-indicator { border-left: 1px solid var(--color-lines); border-right: 1px solid var(--color-lines); @@ -3521,6 +3525,21 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .app-body .column-header__collapsible::-webkit-scrollbar-track { background-color: transparent; } +.app-body .column-header__select-row { + border-color: var(--color-lines); +} +.app-body .column-header__select-row__actions button { + background-color: var(--color-accent-bg); + color: var(--color-accent); + border-color: var(--color-accent-bg); +} +.app-body .column-header__select-row__actions button:hover { + border-color: var(--color-accent); +} +.app-body .column-header__select-row__actions button.active { + background-color: var(--color-accent); + color: var(--color-accent-fg); +} @media screen and (max-width:1174px) { .app-body:not(.layout-multiple-columns) .column-header__collapsible { box-shadow: none; @@ -5284,11 +5303,17 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu } .app-body .filtered-notifications-banner .filtered-notifications-banner__badge, .app-body .filtered-notifications-banner:is(:active, :focus, :hover) .filtered-notifications-banner__badge, -.app-body .notification-request__name .filtered-notifications-banner__badge { +.app-body .notification-request__name .filtered-notifications-banner__badge, +.app-body .notification-request .account__avatar__counter { background-color: var(--color-accent); color: var(--color-accent-fg); border-radius: 50px; } +.app-body .notification-request .account__avatar__counter { + width: 19px; + height: 19px; + box-sizing: border-box; +} .app-body .filtered-notifications-banner__badge__badge { background-color: var(--color-content-bg); color: var(--color-content-fg); diff --git a/TangerineUI-purple.css b/TangerineUI-purple.css index 642004d..b769ff6 100644 --- a/TangerineUI-purple.css +++ b/TangerineUI-purple.css @@ -1520,11 +1520,15 @@ body.app-body { .app-body .dropdown-button:hover { border-color: var(--color-accent); } -.app-body .dropdown-button.active { +.app-body .dropdown-button.active, +.app-body .column-settings .dropdown-button.active { border-color: var(--color-accent); background-color: var(--color-accent); color: var(--color-accent-fg); } +.app-body .column-settings .dropdown-button { + background-color: var(--color-accent-bg); +} .app-body .reply-indicator { border-left: 1px solid var(--color-lines); border-right: 1px solid var(--color-lines); @@ -3521,6 +3525,21 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .app-body .column-header__collapsible::-webkit-scrollbar-track { background-color: transparent; } +.app-body .column-header__select-row { + border-color: var(--color-lines); +} +.app-body .column-header__select-row__actions button { + background-color: var(--color-accent-bg); + color: var(--color-accent); + border-color: var(--color-accent-bg); +} +.app-body .column-header__select-row__actions button:hover { + border-color: var(--color-accent); +} +.app-body .column-header__select-row__actions button.active { + background-color: var(--color-accent); + color: var(--color-accent-fg); +} @media screen and (max-width:1174px) { .app-body:not(.layout-multiple-columns) .column-header__collapsible { box-shadow: none; @@ -5284,11 +5303,17 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu } .app-body .filtered-notifications-banner .filtered-notifications-banner__badge, .app-body .filtered-notifications-banner:is(:active, :focus, :hover) .filtered-notifications-banner__badge, -.app-body .notification-request__name .filtered-notifications-banner__badge { +.app-body .notification-request__name .filtered-notifications-banner__badge, +.app-body .notification-request .account__avatar__counter { background-color: var(--color-accent); color: var(--color-accent-fg); border-radius: 50px; } +.app-body .notification-request .account__avatar__counter { + width: 19px; + height: 19px; + box-sizing: border-box; +} .app-body .filtered-notifications-banner__badge__badge { background-color: var(--color-content-bg); color: var(--color-content-fg); diff --git a/TangerineUI.css b/TangerineUI.css index 84fa8a3..a733583 100644 --- a/TangerineUI.css +++ b/TangerineUI.css @@ -1520,11 +1520,15 @@ body.app-body { .app-body .dropdown-button:hover { border-color: var(--color-accent); } -.app-body .dropdown-button.active { +.app-body .dropdown-button.active, +.app-body .column-settings .dropdown-button.active { border-color: var(--color-accent); background-color: var(--color-accent); color: var(--color-accent-fg); } +.app-body .column-settings .dropdown-button { + background-color: var(--color-accent-bg); +} .app-body .reply-indicator { border-left: 1px solid var(--color-lines); border-right: 1px solid var(--color-lines); @@ -3521,6 +3525,21 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .app-body .column-header__collapsible::-webkit-scrollbar-track { background-color: transparent; } +.app-body .column-header__select-row { + border-color: var(--color-lines); +} +.app-body .column-header__select-row__actions button { + background-color: var(--color-accent-bg); + color: var(--color-accent); + border-color: var(--color-accent-bg); +} +.app-body .column-header__select-row__actions button:hover { + border-color: var(--color-accent); +} +.app-body .column-header__select-row__actions button.active { + background-color: var(--color-accent); + color: var(--color-accent-fg); +} @media screen and (max-width:1174px) { .app-body:not(.layout-multiple-columns) .column-header__collapsible { box-shadow: none; @@ -5284,11 +5303,17 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu } .app-body .filtered-notifications-banner .filtered-notifications-banner__badge, .app-body .filtered-notifications-banner:is(:active, :focus, :hover) .filtered-notifications-banner__badge, -.app-body .notification-request__name .filtered-notifications-banner__badge { +.app-body .notification-request__name .filtered-notifications-banner__badge, +.app-body .notification-request .account__avatar__counter { background-color: var(--color-accent); color: var(--color-accent-fg); border-radius: 50px; } +.app-body .notification-request .account__avatar__counter { + width: 19px; + height: 19px; + box-sizing: border-box; +} .app-body .filtered-notifications-banner__badge__badge { background-color: var(--color-content-bg); color: var(--color-content-fg);