From fddc57a20e16ba22dc608fc49bf39fa8de2de491 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Simon=20H=C3=B8jberg?= Date: Wed, 6 Oct 2021 10:14:39 -0400 Subject: [PATCH] Fix Safari Finder render issue In Safari (and perhaps other browsers?) `transparent` when used in gradients are rendered with a strange dark fade instead of actually being transparent. Using rgba with a 0 alpha fixes this. Specifically this was noticed in the Finder (there's a truncation fade effect on the right hand side), but could be else where in the app as well. The fix was to add a new css variable: `--color-transparent` that evaluates to `rgba(255, 255, 255, 0)` and use that in place of `transparent` everywhere. --- src/css/definition-doc.css | 5 +++-- src/css/elements/button.css | 2 +- src/css/elements/icon.css | 6 +++--- src/css/elements/tooltip.css | 2 +- src/css/finder.css | 20 ++++++++++++++++---- src/css/themes/unison/colors.css | 7 +++++++ src/css/themes/unison/light.css | 24 ++++++++++++------------ src/css/workspace-item.css | 7 ++++--- 8 files changed, 47 insertions(+), 26 deletions(-) diff --git a/src/css/definition-doc.css b/src/css/definition-doc.css index d371514..653b2b9 100644 --- a/src/css/definition-doc.css +++ b/src/css/definition-doc.css @@ -42,7 +42,8 @@ border-radius: var(--border-radius-base); margin-bottom: 1rem; scrollbar-width: auto; - scrollbar-color: var(--color-workspace-item-subtle-fg) transparent; + scrollbar-color: var(--color-workspace-item-subtle-fg) + var(--color-transparent); overflow: auto; } @@ -64,7 +65,7 @@ .definition-doc .source.example::-webkit-scrollbar-track, .definition-doc .source.eval::-webkit-scrollbar-track, .definition-doc .source.signatures .signature::-webkit-scrollbar-track { - background: transparent; + background: var(--color-transparent); } .definition-doc .source.code::-webkit-scrollbar-thumb, .definition-doc .sources .source::-webkit-scrollbar-thumb, diff --git a/src/css/elements/button.css b/src/css/elements/button.css index 1b9ef25..4cfa462 100644 --- a/src/css/elements/button.css +++ b/src/css/elements/button.css @@ -155,7 +155,7 @@ a.button:hover { /* -- Uncontained & Colors ------------------------------------------------- */ .button.uncontained { - background: transparent; + background: var(--color-transparent); } .button.uncontained.default, diff --git a/src/css/elements/icon.css b/src/css/elements/icon.css index 51d72c6..b807b0a 100644 --- a/src/css/elements/icon.css +++ b/src/css/elements/icon.css @@ -48,19 +48,19 @@ } .icon.animate.search .search-shine-trail-1 { - fill: var(--color-icon-2, transparent); + fill: var(--color-icon-2, var(--color-transparent, transparent)); animation-delay: calc(0.1s + var(--icon-animation-delay, 0s)); transition-delay: var(--icon-transition-delay, 0s); } .icon.animate.search .search-shine-trail-2 { - fill: var(--color-icon-3, transparent); + fill: var(--color-icon-3, var(--color-transparent, transparent)); animation-delay: calc(0.2s + var(--icon-animation-delay, 0s)); transition-delay: var(--icon-transition-delay, 0s); } .icon.animate.search .search-shine-trail-3 { - fill: var(--color-icon-4, transparent); + fill: var(--color-icon-4, var(--color-transparent, transparent)); animation-delay: calc(0.3s + var(--icon-animation-delay, 0s)); transition-delay: var(--icon-transition-delay, 0s); } diff --git a/src/css/elements/tooltip.css b/src/css/elements/tooltip.css index 214dcb6..768193c 100644 --- a/src/css/elements/tooltip.css +++ b/src/css/elements/tooltip.css @@ -59,7 +59,7 @@ .tooltip-bubble:after, .tooltip-bubble:before { - border: solid transparent; + border: solid var(--color-transparent); content: ""; height: 0; width: 0; diff --git a/src/css/finder.css b/src/css/finder.css index e5f8769..2a1aa01 100644 --- a/src/css/finder.css +++ b/src/css/finder.css @@ -45,7 +45,7 @@ #finder input { height: 2rem; - background: transparent; + background: var(--color-transparent); width: 100%; border-radius: 0; font-size: 1rem; @@ -240,7 +240,11 @@ right: 0; bottom: 0; width: 2rem; - background: linear-gradient(90deg, transparent, var(--color-modal-bg)); + background: linear-gradient( + 90deg, + var(--color-transparent), + var(--color-modal-bg) + ); } #finder .definition-match .source code { @@ -294,7 +298,11 @@ } #finder .definition-match.focused .source:after { - background: linear-gradient(90deg, transparent, var(--color-modal-focus-bg)); + background: linear-gradient( + 90deg, + var(--color-transparent), + var(--color-modal-focus-bg) + ); } /* hover */ @@ -308,5 +316,9 @@ } #finder .definition-match:not(.focused):hover .source:after { - background: linear-gradient(90deg, transparent, var(--color-modal-mg)); + background: linear-gradient( + 90deg, + var(--color-transparent), + var(--color-modal-mg) + ); } diff --git a/src/css/themes/unison/colors.css b/src/css/themes/unison/colors.css index 21462a6..5881c06 100644 --- a/src/css/themes/unison/colors.css +++ b/src/css/themes/unison/colors.css @@ -1,4 +1,11 @@ :root { + /* `transparent` sometimes renders as a dark shade when used + * in gradients in some browsers. Having a variable based + * on rgba fixes this and makes it convienient to use + * everywhere. + */ + --color-transparent: rgba(255, 255, 255, 0); + /* Brand colors */ --color-brand-bright-red: #ff4756; --color-brand-orange: #ff8800; diff --git a/src/css/themes/unison/light.css b/src/css/themes/unison/light.css index 0b54bff..0655f68 100644 --- a/src/css/themes/unison/light.css +++ b/src/css/themes/unison/light.css @@ -15,7 +15,7 @@ --color-main-focus-bg: var(--color-blue-2); --color-main-alert: var(--color-pink-1); --color-main-mark-fg: var(--color-blue-2); - --color-main-mark-bg: transparent; + --color-main-mark-bg: var(--color-transparent); --color-main-header-fg: var(--color-gray-lighten-100); --color-main-header-bg: var(--color-gray-darken-10); @@ -33,10 +33,10 @@ --color-sidebar-fg: var(--color-gray-lighten-50); --color-sidebar-fg-em: var(--color-gray-lighten-100); --color-sidebar-bg: var(--color-gray-darken-20); - --color-sidebar-border: transparent; + --color-sidebar-border: var(--color-transparent); --color-sidebar-subtle-fg: var(--color-gray-lighten-20); --color-sidebar-subtle-fg-em: var(--color-gray-lighten-30); - --color-sidebar-subtle-bg: transparent; + --color-sidebar-subtle-bg: var(--color-transparent); --color-sidebar-focus-fg: var(--color-gray-lighten-60); --color-sidebar-focus-bg: var(--color-gray-darken-10); --color-sidebar-keyboard-shortcut-key-fg: var(--color-gray-lighten-30); @@ -74,12 +74,12 @@ 255, 0.5 ); /* 50% gray-lighten-100 */ - --color-workspace-item-source-bg: transparent; + --color-workspace-item-source-bg: var(--color-transparent); --color-workspace-item-subtle-fg: var(--color-gray-lighten-30); --color-workspace-item-subtle-bg: var(--color-gray-lighten-60); --color-workspace-item-bg-em: var(--color-gray-lighten-55); --color-workspace-item-content-border: var(--color-gray-lighten-55); - --color-workspace-item-border: transparent; + --color-workspace-item-border: var(--color-transparent); --color-workspace-item-info-item-fg: var(--color-gray-lighten-30); --color-workspace-item-info-item-subtle-fg: var(--color-gray-lighten-30); --color-workspace-item-info-item-hover-fg: var(--color-gray-darken-30); @@ -89,7 +89,7 @@ --color-workspace-item-focus-subtle-fg: var(--color-gray-lighten-30); --color-workspace-item-focus-subtle-bg: var(--color-gray-lighten-50); --color-workspace-item-focus-mg: var(--color-gray-lighten-55); - --color-workspace-item-focus-source-bg: transparent; + --color-workspace-item-focus-source-bg: var(--color-transparent); --color-workspace-item-focus-bg: var(--color-gray-lighten-60); --color-workspace-item-focus-bg-faded: rgba( 250, @@ -140,7 +140,7 @@ --color-modal-separator: var(--color-gray-lighten-55); --color-modal-shadow: rgba(24, 24, 28, 0.2); /* 20% gray-darken-30 */ --color-modal-overlay: rgba(24, 24, 28, 0.5); /* 50% gray-darken-30 */ - --color-modal-border: transparent; + --color-modal-border: var(--color-transparent); --color-modal-subtle-fg: var(--color-main-subtle-fg); --color-modal-subtle-fg-em: var(--color-gray-lighten-20); --color-modal-subtle-mg: var(--color-gray-lighten-55); @@ -150,9 +150,9 @@ --color-modal-focus-subtle-fg: var(--color-gray-base); --color-modal-focus-subtle-bg: var(--color-gray-lighten-50); --color-modal-title-fg: var(--color-gray-lighten-20); - --color-modal-title-bg: transparent; + --color-modal-title-bg: var(--color-transparent); --color-modal-mark-fg: var(--color-blue-2); - --color-modal-mark-bg: transparent; + --color-modal-mark-bg: var(--color-transparent); --color-modal-error-fg: var(--color-pink-1); /* Icons */ @@ -168,7 +168,7 @@ /* FoldToggle */ --color-fold-toggle-fg: var(--color-gray-lighten-30); - --color-fold-toggle-bg: transparent; + --color-fold-toggle-bg: var(--color-transparent); --color-fold-toggle-hover-fg: var(--color-gray-base); --color-fold-toggle-hover-bg: var(--color-gray-lighten-45); @@ -209,7 +209,7 @@ --color-option-badge-icon: var(--color-gray-lighten-30); --color-option-badge-hover-icon: var(--color-gray-100); --color-option-badge-bg: var(--color-gray-darken-30); - --color-option-badge-border: transparent; + --color-option-badge-border: var(--color-transparent); /* Tooltips */ --color-tooltip-fg: var(--color-gray-lighten-60); @@ -238,7 +238,7 @@ /* ActionMenu (should probably be moved out of tooltip) */ --color-tooltip-item-fg: var(--color-gray-lighten-60); --color-tooltip-item-subtle-fg: var(--color-gray-lighten-20); - --color-tooltip-item-bg: transparent; + --color-tooltip-item-bg: var(--color-transparent); --color-tooltip-item-hover-fg: var(--color-gray-lighten-60); --color-tooltip-item-hover-subtle-fg: var(--color-gray-lighten-30); --color-tooltip-item-hover-bg: var(--color-gray-darken-10); diff --git a/src/css/workspace-item.css b/src/css/workspace-item.css index c045dc1..5a41d41 100644 --- a/src/css/workspace-item.css +++ b/src/css/workspace-item.css @@ -238,7 +238,7 @@ 0deg, var(--color-workspace-item-bg) 20%, var(--color-workspace-item-bg-faded) 80%, - rgba(255, 255, 255, 0) + var(--color-transparent) ); } @@ -262,7 +262,8 @@ width: var(--workspace-content-width); overflow: auto; scrollbar-width: auto; - scrollbar-color: var(--color-workspace-item-subtle-fg) transparent; + scrollbar-color: var(--color-workspace-item-subtle-fg) + var(--color-transparent); } .workspace-item .content .definition-source .fold-toggle { @@ -277,7 +278,7 @@ } .workspace-item .content .definition-source::-webkit-scrollbar-track { - background: transparent; + background: var(--color-transparent); } .workspace-item .content .definition-source::-webkit-scrollbar-thumb {