chris/color-picker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

new balloon shape

Browse Source
This commit is contained in:
chris 2025-06-30 20:30:57 -04:00
parent f21e29dd2a
commit 0560db4318
1 changed files with 1043 additions and 1044 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

259
style.css
View File

@ -7,27 +7,27 @@ body {
background-color: #e8e8e8; background-color: #e8e8e8;
background-image: url("https://www.transparenttextures.com/patterns/asfalt-dark.png"); background-image: url("https://www.transparenttextures.com/patterns/asfalt-dark.png");
/* This is mostly intended for prototyping; please download the pattern and re-host for production environments. Thank you! */ /* This is mostly intended for prototyping; please download the pattern and re-host for production environments. Thank you! */
} }
#main-header { #main-header {
text-align: center; text-align: center;
padding: 20px 10px; padding: 20px 10px;
background: #ffffffdd; background: #ffffffdd;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
border-radius: 12px; border-radius: 12px;
margin-bottom: 20px; margin-bottom: 20px;
} }
#main-header h1 { #main-header h1 {
font-size: 2rem; font-size: 2rem;
margin-bottom: 5px; margin-bottom: 5px;
} }
#main-header p { #main-header p {
font-size: 1rem; font-size: 1rem;
color: #666; color: #666;
} }
#selected-palette { #selected-palette {
position: sticky; position: sticky;
top: 10px; top: 10px;
background: #fff; background: #fff;
@ -48,18 +48,18 @@ body {
background-color: #e8e8e8; background-color: #e8e8e8;
background-image: url("https://www.transparenttextures.com/patterns/asfalt-light.png"); background-image: url("https://www.transparenttextures.com/patterns/asfalt-light.png");
/* This is mostly intended for prototyping; please download the pattern and re-host for production environments. Thank you! */ /* This is mostly intended for prototyping; please download the pattern and re-host for production environments. Thank you! */
} }
/* Strong shadow when stuck */ /* Strong shadow when stuck */
#selected-palette.stuck { #selected-palette.stuck {
box-shadow: 16px 16px 15px rgba(0, 0, 0, 0.25); box-shadow: 16px 16px 15px rgba(0, 0, 0, 0.25);
border: 1px solid rgb(0, 0, 0); border: 1px solid rgb(0, 0, 0);
border-radius: 7px; border-radius: 7px;
} }
#palette-colors { #palette-colors {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
@ -67,10 +67,10 @@ background-image: url("https://www.transparenttextures.com/patterns/asfalt-light
padding: 10px; padding: 10px;
/* transition: padding 0.3s ease; */ /* transition: padding 0.3s ease; */
transition: max-height 0.3s ease, padding 0.3s ease; transition: max-height 0.3s ease, padding 0.3s ease;
} }
#clear-palette { #clear-palette {
margin-top: 20px; margin-top: 20px;
padding: 8px 12px; padding: 8px 12px;
font-size: 0.9rem; font-size: 0.9rem;
@ -80,16 +80,16 @@ background-image: url("https://www.transparenttextures.com/patterns/asfalt-light
cursor: pointer; cursor: pointer;
margin: auto; margin: auto;
} }
#color-families { #color-families {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 15px; gap: 15px;
} }
@keyframes fadeInUp { @keyframes fadeInUp {
from { from {
opacity: 0; opacity: 0;
transform: translateY(10px); transform: translateY(10px);
@ -98,15 +98,15 @@ background-image: url("https://www.transparenttextures.com/patterns/asfalt-light
opacity: 1; opacity: 1;
transform: translateY(0); transform: translateY(0);
} }
} }
footer { footer {
text-align: center; text-align: center;
font-size: 0.9rem; font-size: 0.9rem;
color: #777; color: #777;
padding: 20px; padding: 20px;
} }
@media (max-width: 480px) { @media (max-width: 480px) {
.color-name { .color-name {
font-size: 0.7rem; font-size: 0.7rem;
} }
@ -118,8 +118,8 @@ background-image: url("https://www.transparenttextures.com/patterns/asfalt-light
#main-header h1 { #main-header h1 {
font-size: 1.5rem; font-size: 1.5rem;
} }
} }
.color-family { .color-family {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@ -128,23 +128,23 @@ background-image: url("https://www.transparenttextures.com/patterns/asfalt-light
border-bottom: 1px solid #ccc; border-bottom: 1px solid #ccc;
animation: fadeInUp 0.5s ease; animation: fadeInUp 0.5s ease;
} }
.swatch-container { .swatch-container {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
gap: 10px 20px; /* add horizontal AND vertical gaps */ gap: 10px 20px; /* add horizontal AND vertical gaps */
} }
.color-family h3 { .color-family h3 {
text-align: center; text-align: center;
margin: 10px 0 5px; margin: 10px 0 5px;
font-size: 1rem; font-size: 1rem;
font-weight: bold; font-weight: bold;
} }
.swatch-wrapper { .swatch-wrapper {
display: inline-flex; display: inline-flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@ -156,17 +156,17 @@ background-image: url("https://www.transparenttextures.com/patterns/asfalt-light
/* overflow-wrap: break-word; */ /* overflow-wrap: break-word; */
} }
/* .color-swatch { /* .color-swatch {
width: 55px; width: 55px;
height: 65px; height: 65px;
border-radius: 50%; border-radius: 50%;
position: relative; position: relative;
cursor: pointer; cursor: pointer;
transition: transform 0.2s ease; transition: transform 0.2s ease;
} */ } */
.color-swatch::before { .color-swatch::before {
content: ''; content: '';
position: absolute; position: absolute;
top: 10%; top: 10%;
@ -181,17 +181,17 @@ background-image: url("https://www.transparenttextures.com/patterns/asfalt-light
); );
pointer-events: none; pointer-events: none;
filter: blur(4px); filter: blur(4px);
} }
.metallic-element[data-color="#FFD700"] { .metallic-element[data-color="#FFD700"] {
background: linear-gradient(to bottom, #B88606, #79550E); background: linear-gradient(to bottom, #B88606, #79550E);
box-shadow: box-shadow:
inset 0 0 0 0 rgba(255, 255, 255, 0.3), inset 0 0 0 0 rgba(255, 255, 255, 0.3),
inset 0 0 0 1px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(0, 0, 0, 0.3),
inset 0 0 10px rgba(0, 0, 0, 0.2); inset 0 0 10px rgba(0, 0, 0, 0.2);
} }
/* .color-swatch::after { /* .color-swatch::after {
content: ''; content: '';
position: absolute; position: absolute;
top: 2%; top: 2%;
@ -202,7 +202,7 @@ background-image: url("https://www.transparenttextures.com/patterns/asfalt-light
border: 1px solid rgba(255, 255, 255, 0.3); border: 1px solid rgba(255, 255, 255, 0.3);
pointer-events: none; pointer-events: none;
box-shadow: 0 0 8px 2px rgba(255, 255, 255, 0.2); box-shadow: 0 0 8px 2px rgba(255, 255, 255, 0.2);
} }
*/ */
.color-swatch { .color-swatch {
width: 100px; width: 100px;
@ -226,11 +226,11 @@ background-image: url("https://www.transparenttextures.com/patterns/asfalt-light
box-shadow: box-shadow:
inset 2px 2px 6px rgba(255, 255, 255, 0.6), inset 2px 2px 6px rgba(255, 255, 255, 0.6),
0 4px 8px rgba(0, 0, 0, 0.2); 0 4px 8px rgba(0, 0, 0, 0.2);
} }
.color-swatch::after { .color-swatch::after {
content: ''; content: '';
position: absolute; position: absolute;
bottom: -6px; bottom: -6px;
@ -241,35 +241,35 @@ background-image: url("https://www.transparenttextures.com/patterns/asfalt-light
background: inherit; background: inherit;
border-radius: 50% 50% 30% 30%; border-radius: 50% 50% 30% 30%;
box-shadow: inset 0 0 2px rgba(0,0,0,0.2); box-shadow: inset 0 0 2px rgba(0,0,0,0.2);
} }
.color-swatch:hover, .color-swatch:hover,
.color-swatch:active { .color-swatch:active {
transform: scale(1.2); transform: scale(1.2);
box-shadow: 0 0 5px rgba(0,0,0,0.2); box-shadow: 0 0 5px rgba(0,0,0,0.2);
} }
.color-swatch.chosen { .color-swatch.chosen {
outline: 3px solid #333; outline: 3px solid #333;
outline-offset: 1px; outline-offset: 1px;
width: 90px; width: 90px;
height: 126px; height: 126px;
z-index: 10; z-index: 10;
} }
.color-background { .color-background {
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 50%; border-radius: 50%;
border: 2px solid rgba(0, 0, 0, 0.1); /* Light gray border */ border: 2px solid rgba(0, 0, 0, 0.1); /* Light gray border */
box-shadow: 1 1 1; box-shadow: 1 1 1;
} }
.color-shine { .color-shine {
position: absolute; position: absolute;
top: 30%; top: 30%;
left: 40%; left: 50%;
width: 20px; width: 20px;
height: auto; height: auto;
max-width: 20px; max-width: 20px;
@ -278,9 +278,9 @@ background-image: url("https://www.transparenttextures.com/patterns/asfalt-light
pointer-events: none; pointer-events: none;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
.color-name { .color-name {
font-size: 0.85rem; font-size: 0.85rem;
text-align: center; text-align: center;
margin-top: 5px; margin-top: 5px;
@ -291,9 +291,9 @@ background-image: url("https://www.transparenttextures.com/patterns/asfalt-light
max-width: 100%; max-width: 100%;
background-color: #e8e8e8; background-color: #e8e8e8;
z-index: 1; z-index: 1;
} }
#palette-colors .color-swatch { #palette-colors .color-swatch {
body { body {
margin: 0; margin: 0;
padding: 10px; padding: 10px;
@ -565,7 +565,7 @@ background-image: url("https://www.transparenttextures.com/patterns/asfalt-light
.color-shine { .color-shine {
position: absolute; position: absolute;
top: 30%; top: 30%;
left: 40%; left: 50%;
width: 20px; width: 20px;
height: auto; height: auto;
max-width: 20px; max-width: 20px;
@ -731,7 +731,7 @@ background-image: url("https://www.transparenttextures.com/patterns/asfalt-light
/* --- SVG Balloon String --- */ /* --- SVG Balloon String --- */
.balloon-string-svg { .balloon-string-svg {
position: absolute; position: absolute;
top: 55px; /* match .color-swatch height */ top: 60px; /* match .color-swatch height */
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
width: 20px; width: 20px;
@ -793,7 +793,7 @@ background-image: url("https://www.transparenttextures.com/patterns/asfalt-light
.switch { .switch {
position: relative; position: relative;
display: inline-block; display: inline-block;
width: 40px; width: 60px;
height: 20px; height: 20px;
} }
.switch input { .switch input {
@ -838,10 +838,10 @@ background-image: url("https://www.transparenttextures.com/patterns/asfalt-light
cursor: pointer; cursor: pointer;
} }
*/ */
} }
/* .checkmark-overlay { /* .checkmark-overlay {
position: absolute; position: absolute;
top: 4px; top: 4px;
right: 4px; right: 4px;
@ -857,9 +857,9 @@ background-image: url("https://www.transparenttextures.com/patterns/asfalt-light
justify-content: center; justify-content: center;
z-index: 20; z-index: 20;
pointer-events: none; pointer-events: none;
} */ } */
@media (max-width: 600px) { @media (max-width: 600px) {
.swatch-wrapper { .swatch-wrapper {
width: 50px; width: 50px;
@ -874,35 +874,35 @@ background-image: url("https://www.transparenttextures.com/patterns/asfalt-light
#selected-palette h2 { #selected-palette h2 {
font-size: 1.1rem; font-size: 1.1rem;
} }
} }
.color-name { .color-name {
transition: all 0.3s ease; transition: all 0.3s ease;
} }
.color-name.highlighted-name { .color-name.highlighted-name {
text-decoration:underline; text-decoration:underline;
font-weight: bold; font-weight: bold;
color: #111; color: #111;
} }
@keyframes pop { @keyframes pop {
0% { transform: scale(1); } 0% { transform: scale(1); }
50% { transform: scale(1.2); } 50% { transform: scale(1.2); }
100% { transform: scale(1); } 100% { transform: scale(1); }
} }
.color-background.pop { .color-background.pop {
animation: pop 0.25s ease; animation: pop 0.25s ease;
} }
.color-background.chosen { .color-background.chosen {
transform: scale(2.2); transform: scale(2.2);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.25); box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
} }
.chosen{ .chosen{
z-index: 4; z-index: 4;
} }
/* Shared metallic style */ /* Shared metallic style */
.metallic { .metallic {
@ -911,10 +911,10 @@ background-image: url("https://www.transparenttextures.com/patterns/asfalt-light
/* box-shadow: inset 1px 1px 4px rgba(255, 255, 255, 0.6), /* box-shadow: inset 1px 1px 4px rgba(255, 255, 255, 0.6),
0 2px 4px rgba(0, 0, 0, 0.3); */ 0 2px 4px rgba(0, 0, 0, 0.3); */
overflow: hidden; overflow: hidden;
} }
/* Highlight overlay */ /* Highlight overlay */
.metallic1::after { .metallic1::after {
content: ''; content: '';
position: absolute; position: absolute;
top: 15%; top: 15%;
@ -925,60 +925,60 @@ background-image: url("https://www.transparenttextures.com/patterns/asfalt-light
transform: rotate(-20deg); transform: rotate(-20deg);
pointer-events: none; pointer-events: none;
border-radius: 50%; border-radius: 50%;
} }
/* Specific chrome variants */ /* Specific chrome variants */
.chrome-gold { .chrome-gold {
background: linear-gradient(145deg, #fefcea, #b69978, #a18b67, #806748); background: linear-gradient(145deg, #fefcea, #b69978, #a18b67, #806748);
} }
.chrome-silver { .chrome-silver {
background: linear-gradient(145deg, #e0e0e0, #a9a9a9, #808080, #e0e0e0); background: linear-gradient(145deg, #e0e0e0, #a9a9a9, #808080, #e0e0e0);
} }
.chrome-rosegold { .chrome-rosegold {
background: linear-gradient(145deg, #fbe3dc, #e6b7a9, #d19387, #fbe3dc); background: linear-gradient(145deg, #fbe3dc, #e6b7a9, #d19387, #fbe3dc);
} }
.chrome-champagne { .chrome-champagne {
background: linear-gradient(145deg, #fff2cc, #f2e6b6, #d9c08e, #fff2cc); background: linear-gradient(145deg, #fff2cc, #f2e6b6, #d9c08e, #fff2cc);
} }
.chrome-blue { .chrome-blue {
background: linear-gradient(145deg, #d0f0ff, #4d7995, #2d576f, #d0f0ff); background: linear-gradient(145deg, #d0f0ff, #4d7995, #2d576f, #d0f0ff);
} }
.chrome-purple { .chrome-purple {
background: linear-gradient(145deg, #e0ccff, #b08be1, #915bc4, #e0ccff); background: linear-gradient(145deg, #e0ccff, #b08be1, #915bc4, #e0ccff);
} }
.chrome-green { .chrome-green {
background: linear-gradient(145deg, #e2ffe2, #457066, #5c877d, #e2ffe2); background: linear-gradient(145deg, #e2ffe2, #457066, #5c877d, #e2ffe2);
} }
@keyframes balloonFloat { @keyframes balloonFloat {
0%, 100% { transform: translateY(0) rotate(-4deg); } 0%, 100% { transform: translateY(0) rotate(-4deg); }
50% { transform: translateY(-25px) rotate(4deg); } 50% { transform: translateY(-25px) rotate(4deg); }
} }
.balloon-float { .balloon-float {
animation-name: balloonFloat; animation-name: balloonFloat;
animation-timing-function: 4s ease-in-out; animation-timing-function: 4s ease-in-out;
animation-iteration-count: infinite; animation-iteration-count: infinite;
transform-origin: bottom center; transform-origin: bottom center;
position: relative; position: relative;
} }
.color-background { .color-background {
background-size: cover; background-size: cover;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
/* --- SVG Balloon String --- */ /* --- SVG Balloon String --- */
.balloon-string-svg { .balloon-string-svg {
position: absolute; position: absolute;
top: 109px; /* match .color-swatch height */ top: 98px; /* match .color-swatch height */
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
width: 20px; width: 20px;
@ -988,10 +988,10 @@ background-image: url("https://www.transparenttextures.com/patterns/asfalt-light
overflow: visible; overflow: visible;
transform-origin: top center; transform-origin: top center;
animation: svgWiggle 2s ease-in-out infinite; animation: svgWiggle 2s ease-in-out infinite;
} }
.balloon-float-group { .balloon-float-group {
position: relative; position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -1001,17 +1001,17 @@ background-image: url("https://www.transparenttextures.com/patterns/asfalt-light
animation-timing-function: ease-in-out; animation-timing-function: ease-in-out;
animation-iteration-count: infinite; animation-iteration-count: infinite;
transform-origin: bottom center; transform-origin: bottom center;
} }
.wiggle-path { .wiggle-path {
stroke: #727171; stroke: #727171;
stroke-width: 2; stroke-width: 2;
fill: none; fill: none;
stroke-linecap: round; stroke-linecap: round;
stroke-dasharray: 1, 2; stroke-dasharray: 1, 2;
} }
@keyframes svgWiggle { @keyframes svgWiggle {
0%, 100% { 0%, 100% {
transform: translateX(-50%) rotate(0deg); transform: translateX(-50%) rotate(0deg);
} }
@ -1024,9 +1024,9 @@ background-image: url("https://www.transparenttextures.com/patterns/asfalt-light
75% { 75% {
transform: translateX(-50%) rotate(1.5deg); transform: translateX(-50%) rotate(1.5deg);
} }
} }
#palette-controls { #palette-controls {
position: absolute; position: absolute;
top: 10px; top: 10px;
right: 10px; right: 10px;
@ -1034,21 +1034,21 @@ background-image: url("https://www.transparenttextures.com/patterns/asfalt-light
align-items: center; align-items: center;
gap: 10px; gap: 10px;
z-index: 200; z-index: 200;
} }
/* Toggle Switch Styling */ /* Toggle Switch Styling */
.switch { .switch {
position: relative; position: relative;
display: inline-block; display: inline-block;
width: 40px; width: 40px;
height: 20px; height: 20px;
} }
.switch input { .switch input {
opacity: 0; opacity: 0;
width: 0; width: 0;
height: 0; height: 0;
} }
.slider { .slider {
position: absolute; position: absolute;
cursor: pointer; cursor: pointer;
top: 0; left: 0; top: 0; left: 0;
@ -1056,8 +1056,8 @@ background-image: url("https://www.transparenttextures.com/patterns/asfalt-light
background-color: #ccc; background-color: #ccc;
transition: 0.4s; transition: 0.4s;
border-radius: 20px; border-radius: 20px;
} }
.slider:before { .slider:before {
position: absolute; position: absolute;
content: ""; content: "";
height: 14px; height: 14px;
@ -1067,21 +1067,20 @@ background-image: url("https://www.transparenttextures.com/patterns/asfalt-light
background-color: white; background-color: white;
transition: 0.4s; transition: 0.4s;
border-radius: 50%; border-radius: 50%;
} }
input:checked + .slider { input:checked + .slider {
background-color: #4caf50; background-color: #4caf50;
} }
input:checked + .slider:before { input:checked + .slider:before {
transform: translateX(20px); transform: translateX(20px);
} }
/* Shuffle Button */ /* Shuffle Button */
#shuffle-palette { #shuffle-palette {
font-size: 16px; font-size: 16px;
padding: 4px 8px; padding: 4px 8px;
border: none; border: none;
background: #f0f0f0; background: #f0f0f0;
border-radius: 6px; border-radius: 6px;
cursor: pointer; cursor: pointer;
} }