Mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2025-02-25 01:08:50 +01:00
Code Issues Projects Releases Packages Wiki Activity

Change video icon style again, might as well make it more consistent this time

Browse source
This commit is contained in:
Lim Chee Aun 2023-09-23 14:39:05 +08:00
parent a10e2804ba
commit b1dec8810b
2 changed files with 12 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
src/components/status.css
View file

@ -869,26 +869,17 @@ body:has(#modal-container .carousel) .status .media img:hover {
left: 50%; left: 50%;
top: 50%; top: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
color: var(--text-color); color: var(--video-fg-color);
background-color: var(--bg-blur-color); background-color: var(--video-bg-color);
background-image: radial-gradient( box-shadow: inset 0 0 0 2px var(--video-outline-color);
circle at top left,
var(--bg-color),
transparent
);
/* backdrop-filter: blur(6px) saturate(3) invert(0.2); */
box-shadow: 0 0 0 1px var(--bg-color), 0 0 16px var(--drop-shadow-color);
display: flex; display: flex;
place-content: center; place-content: center;
place-items: center; place-items: center;
border-radius: 70px; border-radius: 70px;
transition: all 0.2s ease-in-out; transition: transform 0.2s ease-in-out;
} }
.status :is(.media-video, .media-audio):hover:not(:active) .media-play { .status :is(.media-video, .media-audio):hover:not(:active) .media-play {
transform: translate(-50%, -50%) scale(1.1); transform: translate(-50%, -50%) scale(1.1);
background-color: var(--bg-color);
box-shadow: 0 0 0 1px var(--bg-color), 0 0 16px var(--drop-shadow-color),
0 0 8px var(--drop-shadow-color);
} }
.status :is(.media-video, .media-audio)[data-formatted-duration]:after { .status :is(.media-video, .media-audio)[data-formatted-duration]:after {
font-size: 12px; font-size: 12px;
@ -897,9 +888,9 @@ body:has(#modal-container .carousel) .status .media img:hover {
position: absolute; position: absolute;
bottom: 8px; bottom: 8px;
right: 8px; right: 8px;
color: var(--bg-color); color: var(--video-fg-color);
background-color: var(--text-color); background-color: var(--video-bg-color);
backdrop-filter: blur(6px) saturate(3) invert(0.2); border: var(--hairline-width) solid var(--video-outline-color);
border-radius: 4px; border-radius: 4px;
padding: 0 4px; padding: 0 4px;
} }

5
src/index.css
View file

@ -63,6 +63,11 @@
--close-button-color: rgba(0, 0, 0, 0.5); --close-button-color: rgba(0, 0, 0, 0.5);
--close-button-hover-color: rgba(0, 0, 0, 1); --close-button-hover-color: rgba(0, 0, 0, 1);
/* Video colors won't change based on color scheme */
--video-fg-color: #f0f2f5;
--video-bg-color: #242526;
--video-outline-color: color-mix(in lch, var(--video-fg-color), transparent);
--timing-function: cubic-bezier(0.3, 0.5, 0, 1); --timing-function: cubic-bezier(0.3, 0.5, 0, 1);
} }