Skip to content

Commit fe58c64

Browse files
Aaron Ikeractions-user
Aaron Iker
and
actions-user
authored
feat(console): Update /black plan selection, light rays effect. mobile styles (anomalyco#8731)
Co-authored-by: Github Action <action@github.com>
1 parent af2a099 commit fe58c64

11 files changed

Lines changed: 1683 additions & 385 deletions

File tree

‎bun.lock‎

Lines changed: 4 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎nix/hashes.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"nodeModules": {
3-
"x86_64-linux": "sha256-4ndHIlS9t1ynRdFszJ1nvcu3YhunhuOc7jcuHI1FbnM=",
3+
"x86_64-linux": "sha256-Fl1BdjNSg19LJVSgDMiBX8JuTaGlL2I5T+rqLfjSeO4=",
44
"aarch64-darwin": "sha256-C0E9KAEj3GI83HwirIL2zlXYIe92T+7Iv6F51BB6slY="
55
}
66
}

‎packages/console/app/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@
3434
},
3535
"devDependencies": {
3636
"@typescript/native-preview": "catalog:",
37+
"@webgpu/types": "0.1.54",
3738
"typescript": "catalog:",
3839
"wrangler": "4.50.0"
3940
},

‎packages/console/app/src/component/light-rays.css‎

Lines changed: 186 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,186 @@
1+
.light-rays-container {
2+
position: absolute;
3+
top: 0;
4+
left: 0;
5+
width: 100%;
6+
height: 100%;
7+
pointer-events: none;
8+
overflow: hidden;
9+
}
10+
11+
.light-rays-container canvas {
12+
display: block;
13+
width: 100%;
14+
height: 100%;
15+
}
16+
17+
.light-rays-controls {
18+
position: fixed;
19+
top: 16px;
20+
right: 16px;
21+
z-index: 9999;
22+
font-family: var(--font-mono, monospace);
23+
font-size: 12px;
24+
color: #fff;
25+
}
26+
27+
.light-rays-controls-toggle {
28+
background: rgba(0, 0, 0, 0.8);
29+
border: 1px solid rgba(255, 255, 255, 0.2);
30+
border-radius: 4px;
31+
padding: 8px 12px;
32+
color: #fff;
33+
cursor: pointer;
34+
font-family: inherit;
35+
font-size: inherit;
36+
width: 100%;
37+
text-align: left;
38+
}
39+
40+
.light-rays-controls-toggle:hover {
41+
background: rgba(0, 0, 0, 0.9);
42+
border-color: rgba(255, 255, 255, 0.3);
43+
}
44+
45+
.light-rays-controls-panel {
46+
background: rgba(0, 0, 0, 0.85);
47+
border: 1px solid rgba(255, 255, 255, 0.2);
48+
border-radius: 4px;
49+
padding: 12px;
50+
margin-top: 4px;
51+
display: flex;
52+
flex-direction: column;
53+
gap: 10px;
54+
min-width: 240px;
55+
max-height: calc(100vh - 100px);
56+
overflow-y: auto;
57+
backdrop-filter: blur(8px);
58+
}
59+
60+
.control-group {
61+
display: flex;
62+
flex-direction: column;
63+
gap: 4px;
64+
}
65+
66+
.control-group label {
67+
color: rgba(255, 255, 255, 0.7);
68+
font-size: 11px;
69+
text-transform: uppercase;
70+
letter-spacing: 0.5px;
71+
}
72+
73+
.control-group.checkbox {
74+
flex-direction: row;
75+
align-items: center;
76+
}
77+
78+
.control-group.checkbox label {
79+
display: flex;
80+
align-items: center;
81+
gap: 8px;
82+
cursor: pointer;
83+
text-transform: none;
84+
}
85+
86+
.control-group input[type="range"] {
87+
-webkit-appearance: none;
88+
appearance: none;
89+
width: 100%;
90+
height: 4px;
91+
background: rgba(255, 255, 255, 0.2);
92+
border-radius: 2px;
93+
outline: none;
94+
}
95+
96+
.control-group input[type="range"]::-webkit-slider-thumb {
97+
-webkit-appearance: none;
98+
appearance: none;
99+
width: 14px;
100+
height: 14px;
101+
background: #fff;
102+
border-radius: 50%;
103+
cursor: pointer;
104+
transition: transform 0.1s;
105+
}
106+
107+
.control-group input[type="range"]::-webkit-slider-thumb:hover {
108+
transform: scale(1.1);
109+
}
110+
111+
.control-group input[type="range"]::-moz-range-thumb {
112+
width: 14px;
113+
height: 14px;
114+
background: #fff;
115+
border-radius: 50%;
116+
cursor: pointer;
117+
border: none;
118+
}
119+
120+
.control-group input[type="color"] {
121+
-webkit-appearance: none;
122+
appearance: none;
123+
width: 100%;
124+
height: 32px;
125+
border: 1px solid rgba(255, 255, 255, 0.2);
126+
border-radius: 4px;
127+
background: transparent;
128+
cursor: pointer;
129+
padding: 2px;
130+
}
131+
132+
.control-group input[type="color"]::-webkit-color-swatch-wrapper {
133+
padding: 0;
134+
}
135+
136+
.control-group input[type="color"]::-webkit-color-swatch {
137+
border: none;
138+
border-radius: 2px;
139+
}
140+
141+
.control-group select {
142+
background: rgba(255, 255, 255, 0.1);
143+
border: 1px solid rgba(255, 255, 255, 0.2);
144+
border-radius: 4px;
145+
padding: 6px 8px;
146+
color: #fff;
147+
font-family: inherit;
148+
font-size: inherit;
149+
cursor: pointer;
150+
outline: none;
151+
}
152+
153+
.control-group select:hover {
154+
border-color: rgba(255, 255, 255, 0.3);
155+
}
156+
157+
.control-group select option {
158+
background: #1a1a1a;
159+
color: #fff;
160+
}
161+
162+
.control-group input[type="checkbox"] {
163+
width: 16px;
164+
height: 16px;
165+
accent-color: #fff;
166+
cursor: pointer;
167+
}
168+
169+
.reset-button {
170+
background: rgba(255, 255, 255, 0.1);
171+
border: 1px solid rgba(255, 255, 255, 0.2);
172+
border-radius: 4px;
173+
padding: 8px 12px;
174+
color: rgba(255, 255, 255, 0.7);
175+
cursor: pointer;
176+
font-family: inherit;
177+
font-size: inherit;
178+
margin-top: 4px;
179+
transition: all 0.15s;
180+
}
181+
182+
.reset-button:hover {
183+
background: rgba(255, 255, 255, 0.15);
184+
border-color: rgba(255, 255, 255, 0.3);
185+
color: #fff;
186+
}

0 commit comments

Comments
 (0)