this repo has no description
Change video icon style again, might as well make it more consistent this time
+12
-16
+7
-16
src/components/status.css
+7
-16
src/components/status.css
···
869
869
left: 50%;
870
870
top: 50%;
871
871
transform: translate(-50%, -50%);
872
-
color: var(--text-color);
873
-
background-color: var(--bg-blur-color);
874
-
background-image: radial-gradient(
875
-
circle at top left,
876
-
var(--bg-color),
877
-
transparent
878
-
);
879
-
/* backdrop-filter: blur(6px) saturate(3) invert(0.2); */
880
-
box-shadow: 0 0 0 1px var(--bg-color), 0 0 16px var(--drop-shadow-color);
872
+
color: var(--video-fg-color);
873
+
background-color: var(--video-bg-color);
874
+
box-shadow: inset 0 0 0 2px var(--video-outline-color);
881
875
display: flex;
882
876
place-content: center;
883
877
place-items: center;
884
878
border-radius: 70px;
885
-
transition: all 0.2s ease-in-out;
879
+
transition: transform 0.2s ease-in-out;
886
880
}
887
881
.status :is(.media-video, .media-audio):hover:not(:active) .media-play {
888
882
transform: translate(-50%, -50%) scale(1.1);
889
-
background-color: var(--bg-color);
890
-
box-shadow: 0 0 0 1px var(--bg-color), 0 0 16px var(--drop-shadow-color),
891
-
0 0 8px var(--drop-shadow-color);
892
883
}
893
884
.status :is(.media-video, .media-audio)[data-formatted-duration]:after {
894
885
font-size: 12px;
···
897
888
position: absolute;
898
889
bottom: 8px;
899
890
right: 8px;
900
-
color: var(--bg-color);
901
-
background-color: var(--text-color);
902
-
backdrop-filter: blur(6px) saturate(3) invert(0.2);
891
+
color: var(--video-fg-color);
892
+
background-color: var(--video-bg-color);
893
+
border: var(--hairline-width) solid var(--video-outline-color);
903
894
border-radius: 4px;
904
895
padding: 0 4px;
905
896
}
+5
src/index.css
+5
src/index.css
···
63
63
--close-button-color: rgba(0, 0, 0, 0.5);
64
64
--close-button-hover-color: rgba(0, 0, 0, 1);
65
65
66
+
/* Video colors won't change based on color scheme */
67
+
--video-fg-color: #f0f2f5;
68
+
--video-bg-color: #242526;
69
+
--video-outline-color: color-mix(in lch, var(--video-fg-color), transparent);
70
+
66
71
--timing-function: cubic-bezier(0.3, 0.5, 0, 1);
67
72
}
68
73