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

3
index.html
View File

@ -14,6 +14,7 @@
<p>Select and float your favorite shades</p> <p>Select and float your favorite shades</p>
</header> </header>
<div id="selected-palette"> <div id="selected-palette">
<div class="palette-header-row">
<h2>Your Palette</h2> <h2>Your Palette</h2>
<div id="palette-controls"> <div id="palette-controls">
<label class="switch"> <label class="switch">
@ -23,7 +24,7 @@
<button id="shuffle-palette" title="Shuffle Palette">🔀</button> <button id="shuffle-palette" title="Shuffle Palette">🔀</button>
<button id="share-palette" title="Share Palette">🔗</button> <button id="share-palette" title="Share Palette">🔗</button>
</div> </div>
<div id="palette-colors"></div> </div> <div id="palette-colors"></div>
<button id="clear-palette">Clear Palette</button> <button id="clear-palette">Clear Palette</button>
</div> </div>

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"] { .metallic-element[data-color="#FFD700"] {
@ -414,7 +427,7 @@ footer {
} }
#palette-controls { #palette-controls {
position: absolute; position: static;
top: 10px; top: 10px;
right: 10px; right: 10px;
display: flex; display: flex;