Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

UX: Tweak play button css (#25754) 

* 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 GitHub
parent 5054fe7730
commit 62e36145c5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
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%;
}
}
.video-placeholder-container {
background-size: cover;
background-position: center;
@ -944,36 +945,32 @@ aside.onebox.mixcloud-preview {
background-color: black;
.video-placeholder-overlay {
background-color: rgba(0, 0, 0, 0.25);
padding: 1rem;
position: absolute;
left: 50%;
top: 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 {
cursor: pointer;
padding: 1em;
margin: 0.5em;
background-color: rgba(0, 0, 0, 0.5);
display: inline-flex;
justify-content: center;
align-items: center;
color: var(--secondary-or-primary);
border-radius: var(--d-border-radius);
color: #fff;
display: flex;
filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.25));
height: 2.3rem;
transition: transform 0.15s;
width: 2.3rem;
@media (prefers-reduced-motion) {
transition: transform 0s;
}
}
}
&:hover .video-placeholder-overlay .d-icon {
height: 3em;
width: 3em;
@include hover {
.video-placeholder-overlay .d-icon-play {
transform: scale(1.2);
}
}
}