github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-11-26 06:23:43 +08:00
Code Issues Actions 6 Packages Projects Releases Wiki Activity

UX: Tweak play button css (#25754)

Browse Source 
* Remove unnecessary properties
* Use rem unit
* Add a drop shadow
* Make the "box shadow" slightly more subtle
* Use --d-border-radius
* Don't scale the "box shadow" on hover
* Scale down the on-hover size
* Make the button slightly larger
* Respect prefers-reduced-motion
* Use white rather than --secondary-or-primary
* Don't animate on-hover on mobile
This commit is contained in:
Jarek Radosz 2024-02-20 12:13:20 +01:00 committed by Blake Erickson
parent cda09483de
commit 8f643dc1b8
1 changed files with 18 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
app/assets/stylesheets/common/base/onebox.scss
View File

@ -935,6 +935,7 @@ aside.onebox.mixcloud-preview {
height: 100%; height: 100%;
} }
} }
.video-placeholder-container { .video-placeholder-container {
background-size: cover; background-size: cover;
background-position: center; background-position: center;
@ -944,36 +945,32 @@ aside.onebox.mixcloud-preview {
background-color: black; background-color: black;
.video-placeholder-overlay { .video-placeholder-overlay {
background-color: rgba(0, 0, 0, 0.25);
padding: 1rem;
position: absolute; position: absolute;
left: 50%; left: 50%;
top: 50%; top: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
transition: 150ms;
background-repeat: no-repeat;
background-position: center;
max-width: 30%;
.d-icon {
color: white;
height: 2em;
width: 2em;
transition: width 0.15s, height 0.15s;
}
.d-icon-play { .d-icon-play {
cursor: pointer; border-radius: var(--d-border-radius);
padding: 1em; color: #fff;
margin: 0.5em; display: flex;
background-color: rgba(0, 0, 0, 0.5); filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.25));
display: inline-flex; height: 2.3rem;
justify-content: center; transition: transform 0.15s;
align-items: center; width: 2.3rem;
color: var(--secondary-or-primary);
@media (prefers-reduced-motion) {
transition: transform 0s;
}
} }
} }
&:hover .video-placeholder-overlay .d-icon { @include hover {
height: 3em; .video-placeholder-overlay .d-icon-play {
width: 3em; transform: scale(1.2);
}
} }
} }