From 042e83a517b20f86d965d2a74d91571209b92f8e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nil=C3=A9ane?= Date: Wed, 2 Aug 2023 15:28:17 +0200 Subject: [PATCH] Improvements to dismissable banners in specific cases (borders and rounded corners) --- TangerineUI-purple.css | 30 ++++++++++++++++++- TangerineUI.css | 30 ++++++++++++++++++- .../layout-single-column.scss | 30 ++++++++++++++++++- .../tangerineui/layout-single-column.scss | 30 ++++++++++++++++++- 4 files changed, 116 insertions(+), 4 deletions(-) diff --git a/TangerineUI-purple.css b/TangerineUI-purple.css index 346661e..dd7ef6d 100644 --- a/TangerineUI-purple.css +++ b/TangerineUI-purple.css @@ -254,6 +254,10 @@ body.layout-single-column { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; } +.layout-single-column .dismissable-banner + .scrollable { + border-top-left-radius: 0; + border-top-right-radius: 0; +} /* *️⃣ Icons @@ -2423,13 +2427,37 @@ body.layout-single-column { padding: 10px 10px 0; } } + + + +/* Dismissable banners */ .layout-single-column .dismissable-banner { background-color: var(--color-accent); box-shadow: 0 5px var(--color-content-bg); border-radius: 8px 8px 0 0; - border: 0; + border: 1px solid var(--color-lines); margin: 0; } +.layout-single-column .explore__links .dismissable-banner { + border: 0; + border-radius: 7px 7px 0 0; +} +@media screen and (max-width:889px) { + .layout-single-column .dismissable-banner, + .layout-single-column .explore__links .dismissable-banner { + border-radius: 0; + border-left: 0; + border-right: 0; + } +} +@media screen and (min-width:890px) and (max-width:1174px) { + .layout-single-column .dismissable-banner { + margin-top: 10px; + } + .layout-single-column .explore__links .dismissable-banner { + margin-top: 0; + } +} .layout-single-column .dismissable-banner__message, .layout-single-column .dismissable-banner__action .icon-button { color: var(--color-accent-fg); diff --git a/TangerineUI.css b/TangerineUI.css index dee0f97..8d10c56 100644 --- a/TangerineUI.css +++ b/TangerineUI.css @@ -254,6 +254,10 @@ body.layout-single-column { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; } +.layout-single-column .dismissable-banner + .scrollable { + border-top-left-radius: 0; + border-top-right-radius: 0; +} /* *️⃣ Icons @@ -2423,13 +2427,37 @@ body.layout-single-column { padding: 10px 10px 0; } } + + + +/* Dismissable banners */ .layout-single-column .dismissable-banner { background-color: var(--color-accent); box-shadow: 0 5px var(--color-content-bg); border-radius: 8px 8px 0 0; - border: 0; + border: 1px solid var(--color-lines); margin: 0; } +.layout-single-column .explore__links .dismissable-banner { + border: 0; + border-radius: 7px 7px 0 0; +} +@media screen and (max-width:889px) { + .layout-single-column .dismissable-banner, + .layout-single-column .explore__links .dismissable-banner { + border-radius: 0; + border-left: 0; + border-right: 0; + } +} +@media screen and (min-width:890px) and (max-width:1174px) { + .layout-single-column .dismissable-banner { + margin-top: 10px; + } + .layout-single-column .explore__links .dismissable-banner { + margin-top: 0; + } +} .layout-single-column .dismissable-banner__message, .layout-single-column .dismissable-banner__action .icon-button { color: var(--color-accent-fg); diff --git a/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss b/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss index 346661e..dd7ef6d 100644 --- a/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss +++ b/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss @@ -254,6 +254,10 @@ body.layout-single-column { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; } +.layout-single-column .dismissable-banner + .scrollable { + border-top-left-radius: 0; + border-top-right-radius: 0; +} /* *️⃣ Icons @@ -2423,13 +2427,37 @@ body.layout-single-column { padding: 10px 10px 0; } } + + + +/* Dismissable banners */ .layout-single-column .dismissable-banner { background-color: var(--color-accent); box-shadow: 0 5px var(--color-content-bg); border-radius: 8px 8px 0 0; - border: 0; + border: 1px solid var(--color-lines); margin: 0; } +.layout-single-column .explore__links .dismissable-banner { + border: 0; + border-radius: 7px 7px 0 0; +} +@media screen and (max-width:889px) { + .layout-single-column .dismissable-banner, + .layout-single-column .explore__links .dismissable-banner { + border-radius: 0; + border-left: 0; + border-right: 0; + } +} +@media screen and (min-width:890px) and (max-width:1174px) { + .layout-single-column .dismissable-banner { + margin-top: 10px; + } + .layout-single-column .explore__links .dismissable-banner { + margin-top: 0; + } +} .layout-single-column .dismissable-banner__message, .layout-single-column .dismissable-banner__action .icon-button { color: var(--color-accent-fg); diff --git a/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss b/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss index dee0f97..8d10c56 100644 --- a/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss +++ b/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss @@ -254,6 +254,10 @@ body.layout-single-column { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; } +.layout-single-column .dismissable-banner + .scrollable { + border-top-left-radius: 0; + border-top-right-radius: 0; +} /* *️⃣ Icons @@ -2423,13 +2427,37 @@ body.layout-single-column { padding: 10px 10px 0; } } + + + +/* Dismissable banners */ .layout-single-column .dismissable-banner { background-color: var(--color-accent); box-shadow: 0 5px var(--color-content-bg); border-radius: 8px 8px 0 0; - border: 0; + border: 1px solid var(--color-lines); margin: 0; } +.layout-single-column .explore__links .dismissable-banner { + border: 0; + border-radius: 7px 7px 0 0; +} +@media screen and (max-width:889px) { + .layout-single-column .dismissable-banner, + .layout-single-column .explore__links .dismissable-banner { + border-radius: 0; + border-left: 0; + border-right: 0; + } +} +@media screen and (min-width:890px) and (max-width:1174px) { + .layout-single-column .dismissable-banner { + margin-top: 10px; + } + .layout-single-column .explore__links .dismissable-banner { + margin-top: 0; + } +} .layout-single-column .dismissable-banner__message, .layout-single-column .dismissable-banner__action .icon-button { color: var(--color-accent-fg);