From 1e9f1ca795748162ea084d4d50a01086d8efe526 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nil=C3=A9ane?= Date: Thu, 16 Nov 2023 02:19:23 +0100 Subject: [PATCH] bigger action icons on focused posts --- TangerineUI-purple.css | 17 +++++++++++++++-- TangerineUI.css | 17 +++++++++++++++-- .../layout-single-column.scss | 17 +++++++++++++++-- .../tangerineui/layout-single-column.scss | 17 +++++++++++++++-- 4 files changed, 60 insertions(+), 8 deletions(-) diff --git a/TangerineUI-purple.css b/TangerineUI-purple.css index e4b58fe..ce0661e 100644 --- a/TangerineUI-purple.css +++ b/TangerineUI-purple.css @@ -1050,6 +1050,10 @@ body.layout-single-column { .layout-single-column .detailed-status .status__content__translate-button, .layout-single-column .detailed-status .translate-button .link-button { background-image: var(--icon-translate-accent); + background-size: 25px; + width: 40px; + height: 40px; + right: 60px; } .layout-single-column .translate-button .link-button, .layout-single-column .detailed-status .translate-button .link-button { @@ -1598,11 +1602,20 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu } .layout-single-column .status__action-bar .icon-button, .layout-single-column .detailed-status__action-bar .icon-button { - min-width: 32px !important; - height: 32px !important; + min-width: 32px; + height: 32px; border-radius: 8px; position: relative; } +.layout-single-column .detailed-status__action-bar .icon-button { + min-width: 40px; + height: 40px; +} +.layout-single-column .detailed-status__action-bar .icon-button > .icon { + width: 25px; + height: 25px; +} +.layout-single-column .detailed-status__action-bar .icon-button .layout-single-column .icon-button.star-icon.active, .layout-single-column .notification__favourite-icon-wrapper .star-icon { color: #ffb609; diff --git a/TangerineUI.css b/TangerineUI.css index 85f3501..b371c9e 100644 --- a/TangerineUI.css +++ b/TangerineUI.css @@ -1050,6 +1050,10 @@ body.layout-single-column { .layout-single-column .detailed-status .status__content__translate-button, .layout-single-column .detailed-status .translate-button .link-button { background-image: var(--icon-translate-accent); + background-size: 25px; + width: 40px; + height: 40px; + right: 60px; } .layout-single-column .translate-button .link-button, .layout-single-column .detailed-status .translate-button .link-button { @@ -1598,11 +1602,20 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu } .layout-single-column .status__action-bar .icon-button, .layout-single-column .detailed-status__action-bar .icon-button { - min-width: 32px !important; - height: 32px !important; + min-width: 32px; + height: 32px; border-radius: 8px; position: relative; } +.layout-single-column .detailed-status__action-bar .icon-button { + min-width: 40px; + height: 40px; +} +.layout-single-column .detailed-status__action-bar .icon-button > .icon { + width: 25px; + height: 25px; +} +.layout-single-column .detailed-status__action-bar .icon-button .layout-single-column .icon-button.star-icon.active, .layout-single-column .notification__favourite-icon-wrapper .star-icon { color: #ffb609; 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 e4b58fe..ce0661e 100644 --- a/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss +++ b/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss @@ -1050,6 +1050,10 @@ body.layout-single-column { .layout-single-column .detailed-status .status__content__translate-button, .layout-single-column .detailed-status .translate-button .link-button { background-image: var(--icon-translate-accent); + background-size: 25px; + width: 40px; + height: 40px; + right: 60px; } .layout-single-column .translate-button .link-button, .layout-single-column .detailed-status .translate-button .link-button { @@ -1598,11 +1602,20 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu } .layout-single-column .status__action-bar .icon-button, .layout-single-column .detailed-status__action-bar .icon-button { - min-width: 32px !important; - height: 32px !important; + min-width: 32px; + height: 32px; border-radius: 8px; position: relative; } +.layout-single-column .detailed-status__action-bar .icon-button { + min-width: 40px; + height: 40px; +} +.layout-single-column .detailed-status__action-bar .icon-button > .icon { + width: 25px; + height: 25px; +} +.layout-single-column .detailed-status__action-bar .icon-button .layout-single-column .icon-button.star-icon.active, .layout-single-column .notification__favourite-icon-wrapper .star-icon { color: #ffb609; diff --git a/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss b/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss index 85f3501..b371c9e 100644 --- a/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss +++ b/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss @@ -1050,6 +1050,10 @@ body.layout-single-column { .layout-single-column .detailed-status .status__content__translate-button, .layout-single-column .detailed-status .translate-button .link-button { background-image: var(--icon-translate-accent); + background-size: 25px; + width: 40px; + height: 40px; + right: 60px; } .layout-single-column .translate-button .link-button, .layout-single-column .detailed-status .translate-button .link-button { @@ -1598,11 +1602,20 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu } .layout-single-column .status__action-bar .icon-button, .layout-single-column .detailed-status__action-bar .icon-button { - min-width: 32px !important; - height: 32px !important; + min-width: 32px; + height: 32px; border-radius: 8px; position: relative; } +.layout-single-column .detailed-status__action-bar .icon-button { + min-width: 40px; + height: 40px; +} +.layout-single-column .detailed-status__action-bar .icon-button > .icon { + width: 25px; + height: 25px; +} +.layout-single-column .detailed-status__action-bar .icon-button .layout-single-column .icon-button.star-icon.active, .layout-single-column .notification__favourite-icon-wrapper .star-icon { color: #ffb609;