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

fixed mobile button layout

Browse Source
This commit is contained in:
chris 2025-07-14 13:14:24 -04:00
parent 3b52b90e5c
commit 2a07aca10a
2 changed files with 23 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
index.html
View File

@ -14,17 +14,18 @@
<p>Select and float your favorite shades</p>
</header>
<div id="selected-palette">
<div class="palette-header-row">
<h2>Your Palette</h2>
<div id="palette-controls">
<label class="switch">
<input type="checkbox" id="toggle-animation" checked>
<span class="slider"></span>
</label>
<button id="shuffle-palette" title="Shuffle Palette">🔀</button>
<button id="share-palette" title="Share Palette">🔗</button>
<label class="switch">
<input type="checkbox" id="toggle-animation" checked>
<span class="slider"></span>
</label>
<button id="shuffle-palette" title="Shuffle Palette">🔀</button>
<button id="share-palette" title="Share Palette">🔗</button>
</div>
<div id="palette-colors"></div>
<button id="clear-palette">Clear Palette</button>
</div> <div id="palette-colors"></div>
<button id="clear-palette">Clear Palette</button>
</div>
<div class="modal-backdrop">

15
style.css
View File

@ -156,7 +156,20 @@ footer {
}
.palette-header-row {
display: flex;
justify-content: space-between; /* Pushes title and buttons apart */
align-items: center; /* Vertically centers them */
width: 100%; /* Makes the row fill the container */
padding: 0 10px; /* Adds some horizontal spacing */
margin: auto
}
/* Remove the default margins from your title */
#selected-palette h2 {
margin: 0;
font-size: 1.2rem;
}
.metallic-element[data-color="#FFD700"] {
@ -414,7 +427,7 @@ footer {
}
#palette-controls {
position: absolute;
position: static;
top: 10px;
right: 10px;
display: flex;