Skip to content

Commit 81feb23

Browse files
author
Error 404: Bio not found
authored
Merge pull request #49 from readme-SVG/claude/fix-spacer-color-picker-AaI79
Fix spacer background transparency and replace native color picker with custom UI
2 parents 6b041c2 + bbdaa27 commit 81feb23

3 files changed

Lines changed: 196 additions & 22 deletions

File tree

‎assets/css/styles.css‎

Lines changed: 115 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -189,41 +189,135 @@ h1 span {
189189
}
190190

191191
#custom-color-picker {
192+
display: none;
193+
}
194+
195+
.color-picker-wrap {
196+
position: relative;
197+
display: inline-flex;
198+
align-items: center;
199+
}
200+
201+
.color-picker-trigger {
202+
background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
203+
cursor: pointer;
192204
width: 28px;
193205
height: 28px;
194206
border-radius: 50%;
195-
padding: 0;
196-
border: none;
197-
overflow: hidden;
198-
appearance: none;
199-
-webkit-appearance: none;
200-
cursor: pointer;
201-
background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
202-
transition: transform 0.15s;
207+
border: 2px solid transparent;
208+
transition: transform 0.15s, border-color 0.15s;
209+
flex-shrink: 0;
203210
}
204211

205-
#custom-color-picker::-webkit-color-swatch-wrapper {
206-
padding: 0;
212+
.color-picker-trigger:hover {
213+
transform: scale(1.15);
207214
}
208215

209-
#custom-color-picker::-webkit-color-swatch {
210-
border: none;
211-
border-radius: 50%;
212-
background: transparent;
216+
.color-picker-trigger.active {
217+
border-color: #fff;
218+
}
219+
220+
.color-picker-panel {
221+
display: none;
222+
position: absolute;
223+
top: calc(100% + 12px);
224+
left: 50%;
225+
transform: translateX(-50%);
226+
width: 240px;
227+
background: var(--surface2);
228+
border: 1px solid var(--border);
229+
border-radius: 10px;
230+
padding: 16px;
231+
z-index: 100;
232+
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
233+
flex-direction: column;
234+
gap: 12px;
213235
}
214236

215-
#custom-color-picker::-moz-color-swatch {
237+
.color-picker-panel.open {
238+
display: flex;
239+
}
240+
241+
.cp-preview-row {
242+
display: flex;
243+
align-items: center;
244+
gap: 10px;
245+
}
246+
247+
.cp-swatch {
248+
width: 32px;
249+
height: 32px;
250+
border-radius: 6px;
251+
border: 1px solid var(--border);
252+
flex-shrink: 0;
253+
background: #58a6ff;
254+
}
255+
256+
.cp-hex-input {
257+
flex: 1;
258+
background: var(--surface);
259+
border: 1px solid var(--border);
260+
color: var(--fg);
261+
font-family: 'JetBrains Mono', monospace;
262+
font-size: 13px;
263+
padding: 6px 10px;
264+
border-radius: 6px;
265+
outline: none;
266+
transition: border-color 0.2s;
267+
}
268+
269+
.cp-hex-input:focus {
270+
border-color: var(--blue);
271+
}
272+
273+
.cp-sliders {
274+
display: flex;
275+
flex-direction: column;
276+
gap: 8px;
277+
}
278+
279+
.cp-label {
280+
font-family: 'JetBrains Mono', monospace;
281+
font-size: 10px;
282+
font-weight: 500;
283+
text-transform: uppercase;
284+
letter-spacing: 0.08em;
285+
color: var(--fg3);
286+
}
287+
288+
.cp-range {
289+
width: 100%;
290+
height: 6px;
291+
border-radius: 3px;
292+
outline: none;
216293
border: none;
294+
cursor: pointer;
295+
appearance: none;
296+
-webkit-appearance: none;
297+
}
298+
299+
.cp-range::-webkit-slider-thumb {
300+
-webkit-appearance: none;
301+
width: 14px;
302+
height: 14px;
217303
border-radius: 50%;
218-
background: transparent;
304+
background: #fff;
305+
border: 2px solid var(--border);
306+
cursor: pointer;
307+
box-shadow: 0 1px 4px rgba(0,0,0,0.4);
219308
}
220309

221-
#custom-color-picker:hover {
222-
transform: scale(1.15);
310+
.cp-range::-moz-range-thumb {
311+
width: 14px;
312+
height: 14px;
313+
border-radius: 50%;
314+
background: #fff;
315+
border: 2px solid var(--border);
316+
cursor: pointer;
223317
}
224318

225-
#custom-color-picker.active {
226-
border-color: #fff;
319+
.cp-hue {
320+
background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
227321
}
228322

229323
.theme-dot[data-theme="blue"] {
@@ -726,7 +820,7 @@ h1 span {
726820
.platform-spacer {
727821
width: 100%;
728822
height: 77px;
729-
background: #0d1117;
823+
background: transparent;
730824
flex-shrink: 0;
731825
position: relative;
732826
z-index: 15;

‎assets/js/app.js‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -286,3 +286,66 @@ applyTheme(DEFAULT_THEME);
286286
applyTemplate('grid');
287287
applyPlatform('mobile');
288288
startBlobAnimation();
289+
290+
// Custom color picker initialization
291+
(function initCustomPicker() {
292+
const wrap = document.getElementById('custom-picker-wrap');
293+
const trigger = document.getElementById('custom-picker-trigger');
294+
const panel = document.getElementById('custom-picker-panel');
295+
const swatch = document.getElementById('cp-swatch');
296+
const hexInput = document.getElementById('cp-hex');
297+
const hueSlider = document.getElementById('cp-hue');
298+
const satSlider = document.getElementById('cp-sat');
299+
const litSlider = document.getElementById('cp-lit');
300+
301+
if (!wrap) return;
302+
303+
function hslToHex(h, s, l) {
304+
s /= 100; l /= 100;
305+
const a = s * Math.min(l, 1 - l);
306+
const f = n => {
307+
const k = (n + h / 30) % 12;
308+
return l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
309+
};
310+
return '#' + [f(0), f(8), f(4)].map(x =>
311+
Math.round(x * 255).toString(16).padStart(2, '0')
312+
).join('');
313+
}
314+
315+
function updateFromSliders() {
316+
const h = +hueSlider.value, s = +satSlider.value, l = +litSlider.value;
317+
const hex = hslToHex(h, s, l);
318+
swatch.style.background = hex;
319+
hexInput.value = hex;
320+
trigger.style.background = hex;
321+
trigger.classList.add('active');
322+
satSlider.style.background = `linear-gradient(to right, hsl(${h},0%,${l}%), hsl(${h},100%,${l}%))`;
323+
litSlider.style.background = `linear-gradient(to right, hsl(${h},${s}%,10%), hsl(${h},${s}%,50%), hsl(${h},${s}%,90%))`;
324+
applyCustomTheme(hex);
325+
}
326+
327+
trigger.addEventListener('click', (e) => {
328+
e.stopPropagation();
329+
panel.classList.toggle('open');
330+
});
331+
332+
document.addEventListener('click', (e) => {
333+
if (!wrap.contains(e.target)) panel.classList.remove('open');
334+
});
335+
336+
hueSlider.addEventListener('input', updateFromSliders);
337+
satSlider.addEventListener('input', updateFromSliders);
338+
litSlider.addEventListener('input', updateFromSliders);
339+
340+
hexInput.addEventListener('input', (e) => {
341+
const val = e.target.value;
342+
if (/^#[0-9a-fA-F]{6}$/.test(val)) {
343+
swatch.style.background = val;
344+
trigger.style.background = val;
345+
trigger.classList.add('active');
346+
applyCustomTheme(val);
347+
}
348+
});
349+
350+
updateFromSliders();
351+
})();

‎index.html‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,24 @@ <h1>GitHub Social <span>Preview</span></h1>
3434
<div class="theme-dot" data-theme="orange"></div>
3535
<div class="theme-dot" data-theme="red"></div>
3636
<div class="theme-dot" data-theme="cyan"></div>
37-
<input type="color" id="custom-color-picker" value="#58a6ff" aria-label="Pick custom theme color">
37+
<div class="color-picker-wrap" id="custom-picker-wrap">
38+
<div class="theme-dot color-picker-trigger" id="custom-picker-trigger" title="Custom color"></div>
39+
<input type="color" id="custom-color-picker" value="#58a6ff" aria-label="Pick custom theme color">
40+
<div class="color-picker-panel" id="custom-picker-panel">
41+
<div class="cp-preview-row">
42+
<div class="cp-swatch" id="cp-swatch"></div>
43+
<input class="cp-hex-input" id="cp-hex" type="text" maxlength="7" value="#58a6ff" spellcheck="false">
44+
</div>
45+
<div class="cp-sliders">
46+
<label class="cp-label">Hue</label>
47+
<input class="cp-range cp-hue" id="cp-hue" type="range" min="0" max="360" value="213">
48+
<label class="cp-label">Saturation</label>
49+
<input class="cp-range cp-sat" id="cp-sat" type="range" min="0" max="100" value="100">
50+
<label class="cp-label">Lightness</label>
51+
<input class="cp-range cp-lit" id="cp-lit" type="range" min="10" max="90" value="61">
52+
</div>
53+
</div>
54+
</div>
3855
</div>
3956

4057
<div class="template-row">

0 commit comments

Comments
 (0)