IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-02-25 18:55:32 -06:00
Code Issues Packages Projects Releases Wiki Activity

UX: Refactor lightbox hover drop shadow

Browse Source 
For parity with auto dark mode switching, this includes a subtle effect in dark themes too.
This commit is contained in:
Penar Musaraj 2020-08-04 10:43:18 -04:00
parent 25505978d0
commit 413fa49032
No known key found for this signature in database
GPG Key ID: E390435D881FF0F7
2 changed files with 9 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/assets/stylesheets/color_definitions.scss
View File

@ -26,6 +26,7 @@
--success: #{$success}; --success: #{$success};
--love: #{$love}; --love: #{$love};
--always-black-rgb: 0, 0, 0;
--primary-rgb: #{hexToRGB($primary)}; --primary-rgb: #{hexToRGB($primary)};
--primary-low-rgb: #{hexToRGB($primary-low)}; --primary-low-rgb: #{hexToRGB($primary-low)};
--secondary-rgb: #{hexToRGB($secondary)}; --secondary-rgb: #{hexToRGB($secondary)};

18
app/assets/stylesheets/common/base/lightbox.scss
View File

@ -74,16 +74,14 @@ $meta-element-margin: 6px;
} }
.discourse-no-touch { .discourse-no-touch {
@if is-light-color-scheme() { a.lightbox {
a.lightbox { -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
-webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1); }
}
a.lightbox:hover { a.lightbox:hover {
border-radius: 5px; border-radius: 5px;
box-shadow: 0 2px 5px 0 rgba(var(--primary-rgb), 0.2), box-shadow: 0 2px 5px 0 rgba(var(--always-black-rgb), 0.2),
0 2px 10px 0 rgba(var(--primary-rgb), 0.2); 0 2px 10px 0 rgba(var(--always-black-rgb), 0.2);
}
} }
} }