fix(css): transparent linear gradient not working in safari

[stephenLYZ]

SUMMARY

This PR fixes the problem that transparent linear gradient not working in safari. refer to https://css-tricks.com/thing-know-gradients-transparent-black/.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

before

after

TESTING INSTRUCTIONS

ADDITIONAL INFORMATION

• Has associated issue: Fixes [native-filter] The bottom of the left sidebar looks weird in the safari. #20047
• Required feature flags:
• Changes UI
• Includes DB Migration (follow approval process in SIP-59)
  • Migration is atomic, supports rollback & is backwards-compatible
  • Confirm DB migration upgrade and downgrade tested
  • Runtime estimates and downtime expectations provided
• Introduces new feature or API
• Removes existing feature or API

[codecov]

Codecov Report

Merging #20086 (3c94e02) into master (9854d2d) will decrease coverage by 0.03%.
The diff coverage is n/a.

@@            Coverage Diff             @@
##           master   #20086      +/-   ##
==========================================
- Coverage   66.37%   66.34%   -0.04%     
==========================================
  Files        1715     1716       +1     
  Lines       64179    64311     +132     
  Branches     6753     6811      +58     
==========================================
+ Hits        42602    42665      +63     
- Misses      19859    19913      +54     
- Partials     1718     1733      +15     

Flag	Coverage Δ
javascript	51.32% <ø> (-0.02%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ
...ts/nativeFilters/FilterBar/ActionButtons/index.tsx	85.71% <ø> (ø)
.../src/explore/components/ControlPanelsContainer.tsx	79.80% <ø> (ø)
.../plugin-chart-echarts/src/MixedTimeseries/index.ts	25.00% <0.00%> (-25.00%)	⬇️
...tend/plugins/plugin-chart-echarts/src/controls.tsx	56.66% <0.00%> (-17.25%)	⬇️
...chart-echarts/src/MixedTimeseries/controlPanel.tsx	86.66% <0.00%> (-6.20%)	⬇️
...charts/src/Timeseries/Regular/Bar/controlPanel.tsx	34.48% <0.00%> (-5.52%)	⬇️
...d/plugins/plugin-chart-echarts/src/utils/series.ts	87.50% <0.00%> (-5.46%)	⬇️
...end/src/components/Datasource/DatasourceEditor.jsx	65.20% <0.00%> (-4.17%)	⬇️
...t-frontend/src/dashboard/components/SliceAdder.jsx	66.17% <0.00%> (-3.18%)	⬇️
...rset-frontend/src/explore/exploreUtils/formData.ts	85.71% <0.00%> (-3.18%)	⬇️
... and 39 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 9854d2d...3c94e02. Read the comment docs.

[rusackas]

I did not know we were already using that emotion-rgba lib. Nifty!