From 632ba0f73cdd0eb3b93b6ba46d0174cb042d7351 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nil=C3=A9ane?= Date: Thu, 21 Dec 2023 14:46:59 +0100 Subject: [PATCH] Added a subtle 'glow' gradient to the page background in single-column layout --- TangerineUI-cherry.css | 37 ++++++++++++++++++++++++++++++------- TangerineUI-purple.css | 37 ++++++++++++++++++++++++++++++------- TangerineUI.css | 40 +++++++++++++++++++++++++++++++--------- 3 files changed, 91 insertions(+), 23 deletions(-) diff --git a/TangerineUI-cherry.css b/TangerineUI-cherry.css index 90e56b2..35eec78 100644 --- a/TangerineUI-cherry.css +++ b/TangerineUI-cherry.css @@ -15,6 +15,7 @@ /* 🎨 Colors */ :root { --color-bg: #ffffff; + --gradient-bg: linear-gradient(90deg, #fff, rgba(246, 221, 230, 0.3), #fff); --color-fg: #2a2d37; --color-fg-muted: #888494; --color-secondary-bg: #f2e4ea; @@ -267,12 +268,30 @@ } } + body.app-body { background-color: var(--color-bg); + background-image: var(--gradient-bg); color: var(--color-fg); font-family: ui-rounded, "mastodon-font-sans-serif", sans-serif; } +.app-body .ui::before { + content: " "; + display: block; + height: 15px; + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: 1; + background-color: var(--color-bg); + background-image: var(--gradient-bg); +} +.app-body .columns-area__panels__pane { + z-index: 1; +} + /* 🖱️ Scrollbars */ :root:has(.app-body) *::-webkit-scrollbar-track { background-color: var(--color-bg); @@ -1283,7 +1302,7 @@ body.app-body { } .app-body .compose-form:has(.autosuggest-textarea__textarea:placeholder-shown) .compose-form__submit .button { background-image: var(--icon-send); - background-color: var(--color-accent-bg); + background-color: var(--color-content-secondary-bg); } .app-body .compose-form:not(:has(.autosuggest-textarea__textarea:placeholder-shown)) .compose-form__submit { animation: bounce-sml .3s ease-out 1; @@ -1573,14 +1592,18 @@ body.app-body { height: 40px; right: 60px; } -.app-body .translate-button .link-button, -.app-body .detailed-status .translate-button .link-button { - background-image: var(--icon-translate-active); -} .app-body .status__content__translate-button:hover, .app-body .translate-button .link-button:hover { background-color: var(--color-accent-bg); } +.app-body .translate-button .link-button, +.app-body .detailed-status .translate-button .link-button, +.app-body .translate-button .link-button:hover, +.app-body .detailed-status .translate-button .link-button:hover { + background-image: var(--icon-translate-active); + background-color: var(--color-accent); + transform: scale(.8); +} @media screen and (max-width:889px) { .app-body .status__content__translate-button, .app-body .translate-button .link-button { @@ -2532,9 +2555,9 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .app-body .tabs-bar__wrapper { background-color: transparent; border-radius: 8px 8px 0 0; - box-shadow: + /* box-shadow: inset 0 10px var(--color-bg), - 0 -30px var(--color-bg); + 0 -30px var(--color-bg); */ } .app-body .column-header__wrapper.active:before { background: none; diff --git a/TangerineUI-purple.css b/TangerineUI-purple.css index f942673..2444e4f 100644 --- a/TangerineUI-purple.css +++ b/TangerineUI-purple.css @@ -15,6 +15,7 @@ /* 🎨 Colors */ :root { --color-bg: #ffffff; + --gradient-bg: linear-gradient(90deg, #fff, rgba(225, 221, 246, 0.3), #fff); --color-fg: #2a2d37; --color-fg-muted: #888494; --color-secondary-bg: #e8e4f2; @@ -267,12 +268,30 @@ } } + body.app-body { background-color: var(--color-bg); + background-image: var(--gradient-bg); color: var(--color-fg); font-family: ui-rounded, "mastodon-font-sans-serif", sans-serif; } +.app-body .ui::before { + content: " "; + display: block; + height: 15px; + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: 1; + background-color: var(--color-bg); + background-image: var(--gradient-bg); +} +.app-body .columns-area__panels__pane { + z-index: 1; +} + /* 🖱️ Scrollbars */ :root:has(.app-body) *::-webkit-scrollbar-track { background-color: var(--color-bg); @@ -1283,7 +1302,7 @@ body.app-body { } .app-body .compose-form:has(.autosuggest-textarea__textarea:placeholder-shown) .compose-form__submit .button { background-image: var(--icon-send); - background-color: var(--color-accent-bg); + background-color: var(--color-content-secondary-bg); } .app-body .compose-form:not(:has(.autosuggest-textarea__textarea:placeholder-shown)) .compose-form__submit { animation: bounce-sml .3s ease-out 1; @@ -1573,14 +1592,18 @@ body.app-body { height: 40px; right: 60px; } -.app-body .translate-button .link-button, -.app-body .detailed-status .translate-button .link-button { - background-image: var(--icon-translate-active); -} .app-body .status__content__translate-button:hover, .app-body .translate-button .link-button:hover { background-color: var(--color-accent-bg); } +.app-body .translate-button .link-button, +.app-body .detailed-status .translate-button .link-button, +.app-body .translate-button .link-button:hover, +.app-body .detailed-status .translate-button .link-button:hover { + background-image: var(--icon-translate-active); + background-color: var(--color-accent); + transform: scale(.8); +} @media screen and (max-width:889px) { .app-body .status__content__translate-button, .app-body .translate-button .link-button { @@ -2532,9 +2555,9 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .app-body .tabs-bar__wrapper { background-color: transparent; border-radius: 8px 8px 0 0; - box-shadow: + /* box-shadow: inset 0 10px var(--color-bg), - 0 -30px var(--color-bg); + 0 -30px var(--color-bg); */ } .app-body .column-header__wrapper.active:before { background: none; diff --git a/TangerineUI.css b/TangerineUI.css index 5e8c617..3f41fed 100644 --- a/TangerineUI.css +++ b/TangerineUI.css @@ -15,6 +15,7 @@ /* 🎨 Colors */ :root { --color-bg: #ffffff; + --gradient-bg: linear-gradient(90deg, #fff, rgba(246, 229, 221, 0.3), #fff); --color-fg: #2a2d37; --color-fg-muted: #948c84; --color-secondary-bg: #f2eae4; @@ -79,7 +80,7 @@ --icon-bookmark-active: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iIzUzYjc4MSIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0xODQsMzJINzJBMTYsMTYsMCwwLDAsNTYsNDhWMjI0YTgsOCwwLDAsMCwxMi4yNCw2Ljc4TDEyOCwxOTMuNDNsNTkuNzcsMzcuMzVBOCw4LDAsMCwwLDIwMCwyMjRWNDhBMTYsMTYsMCwwLDAsMTg0LDMyWk0xMzIuMjMsMTc3LjIyYTgsOCwwLDAsMC04LjQ4LDBMNzIsMjA5LjU3VjE4MC40M2w1Ni0zNSw1NiwzNXYyOS4xNFoiPjwvcGF0aD48L3N2Zz4="); --icon-translate: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iIzJhMmQzNyIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0yNDIuNzMsMjEwLjYzbC01Ni0xMTJhMTIsMTIsMCwwLDAtMjEuNDYsMGwtMjAuNTIsNDFBODQuMiw4NC4yLDAsMCwxLDEwNiwxMjYuMjIsMTA3LjQ4LDEwNy40OCwwLDAsMCwxMzEuMzMsNjhIMTUyYTEyLDEyLDAsMCwwLDAtMjRIMTAwVjMyYTEyLDEyLDAsMCwwLTI0LDBWNDRIMjRhMTIsMTIsMCwwLDAsMCwyNGg4My4xM0E4My42OSw4My42OSwwLDAsMSw4OCwxMTAuMzUsODQsODQsMCwwLDEsNzUuNiw5MWExMiwxMiwwLDEsMC0yMS44MSwxMEExMDcuNTUsMTA3LjU1LDAsMCwwLDcwLDEyNi4yNCw4My41NCw4My41NCwwLDAsMSwyNCwxNDBhMTIsMTIsMCwwLDAsMCwyNCwxMDcuNDcsMTA3LjQ3LDAsMCwwLDY0LTIxLjA3LDEwOC40LDEwOC40LDAsMCwwLDQ1LjM5LDE5LjQ0bC0yNC4xMyw0OC4yNmExMiwxMiwwLDEsMCwyMS40NiwxMC43M0wxNDMuNDEsMTk2aDY1LjE3bDEyLjY4LDI1LjM2YTEyLDEyLDAsMSwwLDIxLjQ3LTEwLjczWk0xNTUuNDEsMTcyLDE3NiwxMzAuODMsMTk2LjU4LDE3MloiPjwvcGF0aD48L3N2Zz4="); --icon-translate-accent: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iI2Y3NjkwMiIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0yMTYsMTg0SDEzNmw0MC04MFpNODgsMTI3LjU2aDBBOTUuNzgsOTUuNzgsMCwwLDAsMTIwLDU2SDU2QTk1Ljc4LDk1Ljc4LDAsMCwwLDg4LDEyNy41NloiIG9wYWNpdHk9IjAuMiI+PC9wYXRoPjxwYXRoIGQ9Ik0yMzkuMTUsMjEyLjQybC01Ni0xMTJhOCw4LDAsMCwwLTE0LjMxLDBsLTIxLjcxLDQzLjQzQTg4LDg4LDAsMCwxLDEwMCwxMjYuOTMsMTAzLjY1LDEwMy42NSwwLDAsMCwxMjcuNjksNjRIMTUyYTgsOCwwLDAsMCwwLTE2SDk2VjMyYTgsOCwwLDAsMC0xNiwwVjQ4SDI0YTgsOCwwLDAsMCwwLDE2aDg3LjYzQTg3LjcsODcuNywwLDAsMSw4OCwxMTYuMzVhODcuNzQsODcuNzQsMCwwLDEtMTktMzEsOCw4LDAsMSwwLTE1LjA4LDUuMzRBMTAzLjYzLDEwMy42MywwLDAsMCw3NiwxMjdhODcuNTUsODcuNTUsMCwwLDEtNTIsMTcsOCw4LDAsMCwwLDAsMTYsMTAzLjQ2LDEwMy40NiwwLDAsMCw2NC0yMi4wOCwxMDQuMTgsMTA0LjE4LDAsMCwwLDUxLjQ0LDIxLjMxbC0yNi42LDUzLjE5YTgsOCwwLDAsMCwxNC4zMSw3LjE2TDE0MC45NCwxOTJoNzAuMTFsMTMuNzksMjcuNThBOCw4LDAsMCwwLDIzMiwyMjRhOCw4LDAsMCwwLDcuMTUtMTEuNThaTTE0OC45NCwxNzYsMTc2LDEyMS44OSwyMDMuMDUsMTc2WiI+PC9wYXRoPjwvc3ZnPg=="); - --icon-translate-active: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iI2Y3NjkwMiIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0xNjAsMTI5Ljg5LDE3NS4wNiwxNjBIMTQ0Ljk0bDYuMzYtMTIuN3YwWk0yMjQsNDhWMjA4YTE2LDE2LDAsMCwxLTE2LDE2SDQ4YTE2LDE2LDAsMCwxLTE2LTE2VjQ4QTE2LDE2LDAsMCwxLDQ4LDMySDIwOEExNiwxNiwwLDAsMSwyMjQsNDhaTTIwNy4xNiwxODguNDJsLTQwLTgwYTgsOCwwLDAsMC0xNC4zMiwwTDEzOS42NiwxMzQuOGE2Mi4zMSw2Mi4zMSwwLDAsMS0yMy42MS0xMEE3OS42MSw3OS42MSwwLDAsMCwxMzUuNiw4MEgxNTJhOCw4LDAsMCwwLDAtMTZIMTEyVjU2YTgsOCwwLDAsMC0xNiwwdjhINTZhOCw4LDAsMCwwLDAsMTZoNjMuNDhhNjMuNzMsNjMuNzMsMCwwLDEtMTUuMywzNC4wNSw2NS45Myw2NS45MywwLDAsMS05LTEzLjYxLDgsOCwwLDAsMC0xNC4zMiw3LjEyLDgxLjc1LDgxLjc1LDAsMCwwLDExLjQsMTcuMTVBNjMuNjIsNjMuNjIsMCwwLDEsNTYsMTM2YTgsOCwwLDAsMCwwLDE2LDc5LjU2LDc5LjU2LDAsMCwwLDQ4LjExLTE2LjEzLDc4LjMzLDc4LjMzLDAsMCwwLDI4LjE4LDEzLjY2bC0xOS40NSwzOC44OWE4LDgsMCwwLDAsMTQuMzIsNy4xNkwxMzYuOTQsMTc2aDQ2LjEybDkuNzgsMTkuNThhOCw4LDAsMSwwLDE0LjMyLTcuMTZaIj48L3BhdGg+PC9zdmc+"); + --icon-translate-active: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iI2ZmZmZmZiIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0yMTYsMTg0SDEzNmw0MC04MFpNODgsMTI3LjU2aDBBOTUuNzgsOTUuNzgsMCwwLDAsMTIwLDU2SDU2QTk1Ljc4LDk1Ljc4LDAsMCwwLDg4LDEyNy41NloiIG9wYWNpdHk9IjAuMiI+PC9wYXRoPjxwYXRoIGQ9Ik0yMzkuMTUsMjEyLjQybC01Ni0xMTJhOCw4LDAsMCwwLTE0LjMxLDBsLTIxLjcxLDQzLjQzQTg4LDg4LDAsMCwxLDEwMCwxMjYuOTMsMTAzLjY1LDEwMy42NSwwLDAsMCwxMjcuNjksNjRIMTUyYTgsOCwwLDAsMCwwLTE2SDk2VjMyYTgsOCwwLDAsMC0xNiwwVjQ4SDI0YTgsOCwwLDAsMCwwLDE2aDg3LjYzQTg3LjcsODcuNywwLDAsMSw4OCwxMTYuMzVhODcuNzQsODcuNzQsMCwwLDEtMTktMzEsOCw4LDAsMSwwLTE1LjA4LDUuMzRBMTAzLjYzLDEwMy42MywwLDAsMCw3NiwxMjdhODcuNTUsODcuNTUsMCwwLDEtNTIsMTcsOCw4LDAsMCwwLDAsMTYsMTAzLjQ2LDEwMy40NiwwLDAsMCw2NC0yMi4wOCwxMDQuMTgsMTA0LjE4LDAsMCwwLDUxLjQ0LDIxLjMxbC0yNi42LDUzLjE5YTgsOCwwLDAsMCwxNC4zMSw3LjE2TDE0MC45NCwxOTJoNzAuMTFsMTMuNzksMjcuNThBOCw4LDAsMCwwLDIzMiwyMjRhOCw4LDAsMCwwLDcuMTUtMTEuNThaTTE0OC45NCwxNzYsMTc2LDEyMS44OSwyMDMuMDUsMTc2WiI+PC9wYXRoPjwvc3ZnPg=="); --icon-ellipsis: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iIzJhMmQzNyIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0xMjgsOTZhMzIsMzIsMCwxLDAsMzIsMzJBMzIsMzIsMCwwLDAsMTI4LDk2Wm0wLDQ4YTE2LDE2LDAsMSwxLDE2LTE2QTE2LDE2LDAsMCwxLDEyOCwxNDRaTTQ4LDk2YTMyLDMyLDAsMSwwLDMyLDMyQTMyLDMyLDAsMCwwLDQ4LDk2Wm0wLDQ4YTE2LDE2LDAsMSwxLDE2LTE2QTE2LDE2LDAsMCwxLDQ4LDE0NFpNMjA4LDk2YTMyLDMyLDAsMSwwLDMyLDMyQTMyLDMyLDAsMCwwLDIwOCw5NlptMCw0OGExNiwxNiwwLDEsMSwxNi0xNkExNiwxNiwwLDAsMSwyMDgsMTQ0WiI+PC9wYXRoPjwvc3ZnPg=="); --icon-ellipsis-accent: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iI2Y3NjkwMiIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0xNTIsMTI4YTI0LDI0LDAsMSwxLTI0LTI0QTI0LDI0LDAsMCwxLDE1MiwxMjhaTTQ4LDEwNGEyNCwyNCwwLDEsMCwyNCwyNEEyNCwyNCwwLDAsMCw0OCwxMDRabTE2MCwwYTI0LDI0LDAsMSwwLDI0LDI0QTI0LDI0LDAsMCwwLDIwOCwxMDRaIiBvcGFjaXR5PSIwLjIiPjwvcGF0aD48cGF0aCBkPSJNMTI4LDk2YTMyLDMyLDAsMSwwLDMyLDMyQTMyLDMyLDAsMCwwLDEyOCw5NlptMCw0OGExNiwxNiwwLDEsMSwxNi0xNkExNiwxNiwwLDAsMSwxMjgsMTQ0Wk00OCw5NmEzMiwzMiwwLDEsMCwzMiwzMkEzMiwzMiwwLDAsMCw0OCw5NlptMCw0OGExNiwxNiwwLDEsMSwxNi0xNkExNiwxNiwwLDAsMSw0OCwxNDRaTTIwOCw5NmEzMiwzMiwwLDEsMCwzMiwzMkEzMiwzMiwwLDAsMCwyMDgsOTZabTAsNDhhMTYsMTYsMCwxLDEsMTYtMTZBMTYsMTYsMCwwLDEsMjA4LDE0NFoiPjwvcGF0aD48L3N2Zz4="); --icon-ellipsis-active: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iI2Y3NjkwMiIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0xNTYsMTI4YTI4LDI4LDAsMSwxLTI4LTI4QTI4LDI4LDAsMCwxLDE1NiwxMjhaTTQ4LDEwMGEyOCwyOCwwLDEsMCwyOCwyOEEyOCwyOCwwLDAsMCw0OCwxMDBabTE2MCwwYTI4LDI4LDAsMSwwLDI4LDI4QTI4LDI4LDAsMCwwLDIwOCwxMDBaIj48L3BhdGg+PC9zdmc+"); @@ -182,7 +183,6 @@ --icon-bookmark-accent: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iI2U2ODkzMyIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0xOTIsMTc2djQ4bC02NC00MEw2NCwyMjRWMTc2bDY0LTQwWiIgb3BhY2l0eT0iMC4yIj48L3BhdGg+PHBhdGggZD0iTTE4NCwzMkg3MkExNiwxNiwwLDAsMCw1Niw0OFYyMjRhOCw4LDAsMCwwLDEyLjI0LDYuNzhMMTI4LDE5My40M2w1OS43NywzNy4zNUE4LDgsMCwwLDAsMjAwLDIyNFY0OEExNiwxNiwwLDAsMCwxODQsMzJabTAsMTZWMTYxLjU3bC01MS43Ny0zMi4zNWE4LDgsMCwwLDAtOC40OCwwTDcyLDE2MS41NlY0OFpNMTMyLjIzLDE3Ny4yMmE4LDgsMCwwLDAtOC40OCwwTDcyLDIwOS41N1YxODAuNDNsNTYtMzUsNTYsMzV2MjkuMTRaIj48L3BhdGg+PC9zdmc+"); --icon-translate: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iI2ZmZmZmZiIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0yNDIuNzMsMjEwLjYzbC01Ni0xMTJhMTIsMTIsMCwwLDAtMjEuNDYsMGwtMjAuNTIsNDFBODQuMiw4NC4yLDAsMCwxLDEwNiwxMjYuMjIsMTA3LjQ4LDEwNy40OCwwLDAsMCwxMzEuMzMsNjhIMTUyYTEyLDEyLDAsMCwwLDAtMjRIMTAwVjMyYTEyLDEyLDAsMCwwLTI0LDBWNDRIMjRhMTIsMTIsMCwwLDAsMCwyNGg4My4xM0E4My42OSw4My42OSwwLDAsMSw4OCwxMTAuMzUsODQsODQsMCwwLDEsNzUuNiw5MWExMiwxMiwwLDEsMC0yMS44MSwxMEExMDcuNTUsMTA3LjU1LDAsMCwwLDcwLDEyNi4yNCw4My41NCw4My41NCwwLDAsMSwyNCwxNDBhMTIsMTIsMCwwLDAsMCwyNCwxMDcuNDcsMTA3LjQ3LDAsMCwwLDY0LTIxLjA3LDEwOC40LDEwOC40LDAsMCwwLDQ1LjM5LDE5LjQ0bC0yNC4xMyw0OC4yNmExMiwxMiwwLDEsMCwyMS40NiwxMC43M0wxNDMuNDEsMTk2aDY1LjE3bDEyLjY4LDI1LjM2YTEyLDEyLDAsMSwwLDIxLjQ3LTEwLjczWk0xNTUuNDEsMTcyLDE3NiwxMzAuODMsMTk2LjU4LDE3MloiPjwvcGF0aD48L3N2Zz4="); --icon-translate-accent: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iI2U2ODkzMyIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0yMTYsMTg0SDEzNmw0MC04MFpNODgsMTI3LjU2aDBBOTUuNzgsOTUuNzgsMCwwLDAsMTIwLDU2SDU2QTk1Ljc4LDk1Ljc4LDAsMCwwLDg4LDEyNy41NloiIG9wYWNpdHk9IjAuMiI+PC9wYXRoPjxwYXRoIGQ9Ik0yMzkuMTUsMjEyLjQybC01Ni0xMTJhOCw4LDAsMCwwLTE0LjMxLDBsLTIxLjcxLDQzLjQzQTg4LDg4LDAsMCwxLDEwMCwxMjYuOTMsMTAzLjY1LDEwMy42NSwwLDAsMCwxMjcuNjksNjRIMTUyYTgsOCwwLDAsMCwwLTE2SDk2VjMyYTgsOCwwLDAsMC0xNiwwVjQ4SDI0YTgsOCwwLDAsMCwwLDE2aDg3LjYzQTg3LjcsODcuNywwLDAsMSw4OCwxMTYuMzVhODcuNzQsODcuNzQsMCwwLDEtMTktMzEsOCw4LDAsMSwwLTE1LjA4LDUuMzRBMTAzLjYzLDEwMy42MywwLDAsMCw3NiwxMjdhODcuNTUsODcuNTUsMCwwLDEtNTIsMTcsOCw4LDAsMCwwLDAsMTYsMTAzLjQ2LDEwMy40NiwwLDAsMCw2NC0yMi4wOCwxMDQuMTgsMTA0LjE4LDAsMCwwLDUxLjQ0LDIxLjMxbC0yNi42LDUzLjE5YTgsOCwwLDAsMCwxNC4zMSw3LjE2TDE0MC45NCwxOTJoNzAuMTFsMTMuNzksMjcuNThBOCw4LDAsMCwwLDIzMiwyMjRhOCw4LDAsMCwwLDcuMTUtMTEuNThaTTE0OC45NCwxNzYsMTc2LDEyMS44OSwyMDMuMDUsMTc2WiI+PC9wYXRoPjwvc3ZnPg=="); - --icon-translate-active: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iI2U2ODkzMyIgdmlld0JveD0iMCAwIDI1NiAyNTYiIHN0eWxlPSItLW5vaXItaW5saW5lLWZpbGw6ICNlODkyNDM7IiBkYXRhLW5vaXItaW5saW5lLWZpbGw9IiI+PHBhdGggZD0iTTE2MCwxMjkuODksMTc1LjA2LDE2MEgxNDQuOTRsNi4zNi0xMi43djBaTTIyNCw0OFYyMDhhMTYsMTYsMCwwLDEtMTYsMTZINDhhMTYsMTYsMCwwLDEtMTYtMTZWNDhBMTYsMTYsMCwwLDEsNDgsMzJIMjA4QTE2LDE2LDAsMCwxLDIyNCw0OFpNMjA3LjE2LDE4OC40MmwtNDAtODBhOCw4LDAsMCwwLTE0LjMyLDBMMTM5LjY2LDEzNC44YTYyLjMxLDYyLjMxLDAsMCwxLTIzLjYxLTEwQTc5LjYxLDc5LjYxLDAsMCwwLDEzNS42LDgwSDE1MmE4LDgsMCwwLDAsMC0xNkgxMTJWNTZhOCw4LDAsMCwwLTE2LDB2OEg1NmE4LDgsMCwwLDAsMCwxNmg2My40OGE2My43Myw2My43MywwLDAsMS0xNS4zLDM0LjA1LDY1LjkzLDY1LjkzLDAsMCwxLTktMTMuNjEsOCw4LDAsMCwwLTE0LjMyLDcuMTIsODEuNzUsODEuNzUsMCwwLDAsMTEuNCwxNy4xNUE2My42Miw2My42MiwwLDAsMSw1NiwxMzZhOCw4LDAsMCwwLDAsMTYsNzkuNTYsNzkuNTYsMCwwLDAsNDguMTEtMTYuMTMsNzguMzMsNzguMzMsMCwwLDAsMjguMTgsMTMuNjZsLTE5LjQ1LDM4Ljg5YTgsOCwwLDAsMCwxNC4zMiw3LjE2TDEzNi45NCwxNzZoNDYuMTJsOS43OCwxOS41OGE4LDgsMCwxLDAsMTQuMzItNy4xNloiPjwvcGF0aD48L3N2Zz4="); --icon-ellipsis: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iI2ZmZmZmZiIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0xNTIsMTI4YTI0LDI0LDAsMSwxLTI0LTI0QTI0LDI0LDAsMCwxLDE1MiwxMjhaTTQ4LDEwNGEyNCwyNCwwLDEsMCwyNCwyNEEyNCwyNCwwLDAsMCw0OCwxMDRabTE2MCwwYTI0LDI0LDAsMSwwLDI0LDI0QTI0LDI0LDAsMCwwLDIwOCwxMDRaIiBvcGFjaXR5PSIwLjIiPjwvcGF0aD48cGF0aCBkPSJNMTI4LDk2YTMyLDMyLDAsMSwwLDMyLDMyQTMyLDMyLDAsMCwwLDEyOCw5NlptMCw0OGExNiwxNiwwLDEsMSwxNi0xNkExNiwxNiwwLDAsMSwxMjgsMTQ0Wk00OCw5NmEzMiwzMiwwLDEsMCwzMiwzMkEzMiwzMiwwLDAsMCw0OCw5NlptMCw0OGExNiwxNiwwLDEsMSwxNi0xNkExNiwxNiwwLDAsMSw0OCwxNDRaTTIwOCw5NmEzMiwzMiwwLDEsMCwzMiwzMkEzMiwzMiwwLDAsMCwyMDgsOTZabTAsNDhhMTYsMTYsMCwxLDEsMTYtMTZBMTYsMTYsMCwwLDEsMjA4LDE0NFoiPjwvcGF0aD48L3N2Zz4="); --icon-ellipsis-accent: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iI2U2ODkzMyIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0xNTIsMTI4YTI0LDI0LDAsMSwxLTI0LTI0QTI0LDI0LDAsMCwxLDE1MiwxMjhaTTQ4LDEwNGEyNCwyNCwwLDEsMCwyNCwyNEEyNCwyNCwwLDAsMCw0OCwxMDRabTE2MCwwYTI0LDI0LDAsMSwwLDI0LDI0QTI0LDI0LDAsMCwwLDIwOCwxMDRaIiBvcGFjaXR5PSIwLjIiPjwvcGF0aD48cGF0aCBkPSJNMTI4LDk2YTMyLDMyLDAsMSwwLDMyLDMyQTMyLDMyLDAsMCwwLDEyOCw5NlptMCw0OGExNiwxNiwwLDEsMSwxNi0xNkExNiwxNiwwLDAsMSwxMjgsMTQ0Wk00OCw5NmEzMiwzMiwwLDEsMCwzMiwzMkEzMiwzMiwwLDAsMCw0OCw5NlptMCw0OGExNiwxNiwwLDEsMSwxNi0xNkExNiwxNiwwLDAsMSw0OCwxNDRaTTIwOCw5NmEzMiwzMiwwLDEsMCwzMiwzMkEzMiwzMiwwLDAsMCwyMDgsOTZabTAsNDhhMTYsMTYsMCwxLDEsMTYtMTZBMTYsMTYsMCwwLDEsMjA4LDE0NFoiPjwvcGF0aD48L3N2Zz4="); --icon-ellipsis-active: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iI2U2ODkzMyIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0xNTYsMTI4YTI4LDI4LDAsMSwxLTI4LTI4QTI4LDI4LDAsMCwxLDE1NiwxMjhaTTQ4LDEwMGEyOCwyOCwwLDEsMCwyOCwyOEEyOCwyOCwwLDAsMCw0OCwxMDBabTE2MCwwYTI4LDI4LDAsMSwwLDI4LDI4QTI4LDI4LDAsMCwwLDIwOCwxMDBaIj48L3BhdGg+PC9zdmc+"); @@ -267,12 +267,30 @@ } } + body.app-body { background-color: var(--color-bg); + background-image: var(--gradient-bg); color: var(--color-fg); font-family: ui-rounded, "mastodon-font-sans-serif", sans-serif; } +.app-body .ui::before { + content: " "; + display: block; + height: 16px; + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: 1; + background-color: var(--color-bg); + background-image: var(--gradient-bg); +} +.app-body .columns-area__panels__pane { + z-index: 1; +} + /* 🖱️ Scrollbars */ :root:has(.app-body) *::-webkit-scrollbar-track { background-color: var(--color-bg); @@ -1283,7 +1301,7 @@ body.app-body { } .app-body .compose-form:has(.autosuggest-textarea__textarea:placeholder-shown) .compose-form__submit .button { background-image: var(--icon-send); - background-color: var(--color-accent-bg); + background-color: var(--color-content-secondary-bg); } .app-body .compose-form:not(:has(.autosuggest-textarea__textarea:placeholder-shown)) .compose-form__submit { animation: bounce-sml .3s ease-out 1; @@ -1573,14 +1591,18 @@ body.app-body { height: 40px; right: 60px; } -.app-body .translate-button .link-button, -.app-body .detailed-status .translate-button .link-button { - background-image: var(--icon-translate-active); -} .app-body .status__content__translate-button:hover, .app-body .translate-button .link-button:hover { background-color: var(--color-accent-bg); } +.app-body .translate-button .link-button, +.app-body .detailed-status .translate-button .link-button, +.app-body .translate-button .link-button:hover, +.app-body .detailed-status .translate-button .link-button:hover { + background-image: var(--icon-translate-active); + background-color: var(--color-accent); + transform: scale(.8); +} @media screen and (max-width:889px) { .app-body .status__content__translate-button, .app-body .translate-button .link-button { @@ -2532,9 +2554,9 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .app-body .tabs-bar__wrapper { background-color: transparent; border-radius: 8px 8px 0 0; - box-shadow: + /* box-shadow: inset 0 10px var(--color-bg), - 0 -30px var(--color-bg); + 0 -30px var(--color-bg); */ } .app-body .column-header__wrapper.active:before { background: none;