forked from TypeCellOS/BlockNote
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathgradients.css
More file actions
117 lines (106 loc) · 2.84 KB
/
gradients.css
File metadata and controls
117 lines (106 loc) · 2.84 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
body {
--text-color: var(--color-fd-foreground);
--bg-color: var(--color-fd-background);
--glow-blue: 185, 100%, 50%;
--glow-purple: 261, 100%, 50%;
}
.demo-glow {
--glow-opacity: 0.4;
display: block;
}
.text-glow {
--glow-opacity: 0.2;
display: none;
@media only screen and (hover: none) and (pointer: coarse) {
display: block; /* disable on mobile */
}
}
.cta-glow {
--glow-opacity: 0.3;
background: conic-gradient(
from 33deg at 50% 50%,
hsla(var(--glow-blue), var(--glow-opacity)),
hsla(var(--glow-purple), var(--glow-opacity)),
hsla(var(--glow-blue), var(--glow-opacity))
);
filter: blur(60px);
}
.hero-glow {
background: conic-gradient(
from 33deg at 50% 50%,
hsla(var(--glow-blue), var(--glow-opacity)),
hsla(var(--glow-purple), var(--glow-opacity)),
hsla(var(--glow-blue), var(--glow-opacity))
);
filter: blur(120px);
}
@property --button-glow-angle {
syntax: "<angle>";
inherits: false;
initial-value: 33deg;
}
@keyframes button-glow-rotation {
from {
--button-glow-angle: 0deg;
}
to {
--button-glow-angle: 360deg;
}
}
@property --button-glow-position {
syntax: "<percentage>";
inherits: false;
initial-value: 0%;
}
@keyframes button-glow-translation {
from {
--button-glow-position: 0%;
}
to {
--button-glow-position: 200%;
}
}
.button-glow {
--glow-opacity: 0.6;
animation: button-glow-rotation 10s linear infinite;
background: conic-gradient(
from var(--button-glow-angle) at 50% 50%,
hsla(var(--glow-blue), var(--glow-opacity)),
hsla(var(--glow-purple), var(--glow-opacity)),
hsla(var(--glow-blue), var(--glow-opacity))
);
/*animation: button-glow-translation 10s linear infinite;*/
/*background:*/
/* linear-gradient(*/
/* 90deg,*/
/* hsla(var(--glow-purple), var(--glow-opacity)) calc(-200% + var(--button-glow-position)),*/
/* hsla(var(--glow-blue), var(--glow-opacity)) calc(-100% + var(--button-glow-position)),*/
/* hsla(var(--glow-purple), var(--glow-opacity)) calc(0% + var(--button-glow-position)),*/
/* hsla(var(--glow-blue), var(--glow-opacity)) calc(100% + var(--button-glow-position))*/
/* );*/
filter: blur(20px);
opacity: 0;
transition: opacity 0.2s linear;
}
.button-glow-parent:hover .button-glow {
opacity: 1;
transition: opacity 0.2s linear;
}
.section-glow {
--glow-opacity: 0.15;
background:
linear-gradient(0deg, var(--bg-color) 80%, transparent),
linear-gradient(
90deg,
hsla(var(--glow-purple), var(--glow-opacity)),
hsla(var(--glow-blue), var(--glow-opacity))
);
}
.section-border {
width: 100%;
height: 1px;
background: linear-gradient(90deg, #5900ff60, #00eaff60);
}
.feature-icon {
background: conic-gradient(from 33deg, #00eaff80, #5900ff80, #00eaff80);
}