mirror of
https://github.com/hydralauncher/hydra.git
synced 2026-01-18 16:53:57 +00:00
feat: trophy gradient for variations
This commit is contained in:
Zamitto
Binary file not shown.
|
Before Width: | Height: | Size: 417 B |
5
src/renderer/src/assets/icons/trophy.svg
Normal file
5
src/renderer/src/assets/icons/trophy.svg
Normal file
@@ -0,0 +1,5 @@
|
||||
<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="Frame 933">
|
||||
<path id="Vector" d="M29.3333 10.5H26.8333V8.83333C26.8333 8.61232 26.7455 8.40036 26.5893 8.24408C26.433 8.0878 26.221 8 26 8H11C10.779 8 10.567 8.0878 10.4107 8.24408C10.2545 8.40036 10.1667 8.61232 10.1667 8.83333V10.5H7.66667C7.22464 10.5 6.80072 10.6756 6.48816 10.9882C6.17559 11.3007 6 11.7246 6 12.1667V13.8333C6 14.9384 6.43899 15.9982 7.22039 16.7796C7.6073 17.1665 8.06663 17.4734 8.57215 17.6828C9.07768 17.8922 9.61949 18 10.1667 18H10.5469C11.0378 19.5556 11.9737 20.9333 13.2391 21.9628C14.5044 22.9923 16.0437 23.6285 17.6667 23.7927V26.3333H15.1667C14.9457 26.3333 14.7337 26.4211 14.5774 26.5774C14.4211 26.7337 14.3333 26.9457 14.3333 27.1667C14.3333 27.3877 14.4211 27.5996 14.5774 27.7559C14.7337 27.9122 14.9457 28 15.1667 28H21.8333C22.0543 28 22.2663 27.9122 22.4226 27.7559C22.5789 27.5996 22.6667 27.3877 22.6667 27.1667C22.6667 26.9457 22.5789 26.7337 22.4226 26.5774C22.2663 26.4211 22.0543 26.3333 21.8333 26.3333H19.3333V23.7896C22.6604 23.4531 25.4208 21.1187 26.425 18H26.8333C27.9384 18 28.9982 17.561 29.7796 16.7796C30.561 15.9982 31 14.9384 31 13.8333V12.1667C31 11.7246 30.8244 11.3007 30.5118 10.9882C30.1993 10.6756 29.7754 10.5 29.3333 10.5ZM10.1667 16.3333C9.50363 16.3333 8.86774 16.0699 8.3989 15.6011C7.93006 15.1323 7.66667 14.4964 7.66667 13.8333V12.1667H10.1667V15.5C10.1667 15.7778 10.1802 16.0556 10.2073 16.3333H10.1667ZM29.3333 13.8333C29.3333 14.4964 29.0699 15.1323 28.6011 15.6011C28.1323 16.0699 27.4964 16.3333 26.8333 16.3333H26.7812C26.8154 16.0255 26.8328 15.716 26.8333 15.4062V12.1667H29.3333V13.8333Z" fill="white"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
@@ -274,40 +274,83 @@ $margin-bottom: 28px;
|
||||
left: 0;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
&__dark {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 8px;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
background: #000;
|
||||
opacity: 0;
|
||||
z-index: 1;
|
||||
animation: dark-overlay 900ms ease-in-out;
|
||||
}
|
||||
&__dark-overlay {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 8px;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
background: #000;
|
||||
opacity: 0;
|
||||
z-index: 1;
|
||||
animation: dark-overlay 900ms ease-in-out;
|
||||
}
|
||||
|
||||
&__trophy {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: 22px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
opacity: 0;
|
||||
z-index: 1;
|
||||
animation: trophy-out 900ms ease-in-out;
|
||||
}
|
||||
&__trophy-overlay {
|
||||
position: absolute;
|
||||
mask-image: url("/src/assets/icons/trophy.svg");
|
||||
top: 22px;
|
||||
left: 22px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
opacity: 0;
|
||||
z-index: 1;
|
||||
animation: trophy-out 900ms ease-in-out;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
&__ellipses {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 8px;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
z-index: 2;
|
||||
opacity: 0;
|
||||
animation: ellipses-out 900ms ease-in-out;
|
||||
}
|
||||
&--rare &__trophy-overlay {
|
||||
background: linear-gradient(
|
||||
118deg,
|
||||
#e8ad15 18.96%,
|
||||
#d5900f 26.41%,
|
||||
#e8ad15 29.99%,
|
||||
#e4aa15 38.89%,
|
||||
#ca890e 42.43%,
|
||||
#ca880e 46.59%,
|
||||
#ecbe1a 50.08%,
|
||||
#ecbd1a 53.48%,
|
||||
#b3790d 57.39%,
|
||||
#66470a 75.64%,
|
||||
#a37a13 78.2%,
|
||||
#987112 79.28%,
|
||||
#503808 83.6%,
|
||||
#3e2d08 85.77%
|
||||
),
|
||||
#fff;
|
||||
}
|
||||
|
||||
&--platinum &__trophy-overlay {
|
||||
background: linear-gradient(
|
||||
118deg,
|
||||
#15e8d6 18.96%,
|
||||
#0fd5a7 26.41%,
|
||||
#15e8b7 29.99%,
|
||||
#15e4b4 38.89%,
|
||||
#0eca7f 42.43%,
|
||||
#0eca9e 46.59%,
|
||||
#1aecbb 50.08%,
|
||||
#1aecb0 53.48%,
|
||||
#0db392 57.39%,
|
||||
#0a6648 75.64%,
|
||||
#13a38b 78.2%,
|
||||
#129862 79.28%,
|
||||
#085042 83.6%,
|
||||
#083e31 85.77%
|
||||
);
|
||||
}
|
||||
|
||||
&__ellipses-overlay {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 8px;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
z-index: 2;
|
||||
opacity: 0;
|
||||
animation: ellipses-out 900ms ease-in-out;
|
||||
}
|
||||
|
||||
&__text-container {
|
||||
|
||||
@@ -6,7 +6,6 @@ import cn from "classnames";
|
||||
import "./achievement-notification.scss";
|
||||
import HydraIcon from "@renderer/assets/icons/hydra.svg?react";
|
||||
import { EyeClosedIcon } from "@primer/octicons-react";
|
||||
import Trophy from "@renderer/assets/icons/trophy.png";
|
||||
import Ellipses from "@renderer/assets/icons/ellipses.png";
|
||||
|
||||
interface AchievementNotificationProps {
|
||||
@@ -65,17 +64,13 @@ export function AchievementNotificationItem({
|
||||
</div>
|
||||
|
||||
<div className="achievement-notification__additional-overlay">
|
||||
<div className="achievement-notification__additional-overlay__dark"></div>
|
||||
<div className="achievement-notification__dark-overlay"></div>
|
||||
<img
|
||||
className="achievement-notification__additional-overlay__ellipses"
|
||||
className="achievement-notification__ellipses-overlay"
|
||||
src={Ellipses}
|
||||
alt="Ellipses effect"
|
||||
/>
|
||||
<img
|
||||
className="achievement-notification__additional-overlay__trophy"
|
||||
src={Trophy}
|
||||
alt="Trophy effect"
|
||||
/>
|
||||
<div className="achievement-notification__trophy-overlay"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user