Thomas/Piwigo_Bratonien_Tools
1
0
Fork 0
mirror of https://github.com/Terranom674/Piwigo_Bratonien_Tools.git synced 2026-09-19 12:54:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

Polish public selection UI

Browse Source
This commit is contained in:
Terranom674
2026-08-16 14:22:12 +02:00
parent 93d9598fbb
commit bd8ca765fd
1 changed files with 80 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
css/public_selection.css
View File

@@ -1,22 +1,70 @@
#bratonien-selection-toggle .bratonien-selection-toolbar-label { #bratonien-selection-toggle {
margin-left: .35rem; display: inline-flex;
align-items: center;
justify-content: center;
} }
#bratonien-selection-toggle.active { #bratonien-selection-toggle.active {
font-weight: 700; color: #f0a646;
} }
.bratonien-selection-bar { .bratonien-selection-bar {
position: sticky; position: sticky;
top: 0; top: .5rem;
z-index: 1000; z-index: 1000;
display: flex; display: flex;
gap: .75rem; flex-wrap: wrap;
gap: .65rem 1rem;
align-items: center; align-items: center;
padding: .75rem 1rem; justify-content: space-between;
padding: .7rem .85rem;
margin: 0 0 1rem; margin: 0 0 1rem;
background: rgba(0, 0, 0, .85); border: 1px solid rgba(255,255,255,.16);
border-radius: .35rem;
background: rgba(32,32,32,.96);
box-shadow: 0 .25rem .8rem rgba(0,0,0,.2);
}
.bratonien-selection-status {
white-space: nowrap;
}
.bratonien-selection-actions {
display: flex;
flex-wrap: wrap;
gap: .45rem;
}
.bratonien-selection-actions button {
min-height: 2.25rem;
padding: .35rem .7rem;
border: 1px solid rgba(255,255,255,.18);
border-radius: .25rem; border-radius: .25rem;
background: rgba(255,255,255,.05);
color: inherit;
cursor: pointer;
}
.bratonien-selection-actions button:hover:not(:disabled),
.bratonien-selection-actions button:focus:not(:disabled) {
border-color: rgba(240,166,70,.7);
}
.bratonien-selection-actions .bratonien-selection-primary {
border-color: #f0a646;
background: #f0a646;
color: #242424;
font-weight: 700;
}
.bratonien-selection-actions button:disabled {
opacity: .45;
cursor: default;
}
.bratonien-selection-error {
flex-basis: 100%;
color: #e58b8b;
} }
.bratonien-selectable { .bratonien-selectable {
@@ -34,26 +82,41 @@
pointer-events: none; pointer-events: none;
border: 3px solid transparent; border: 3px solid transparent;
box-sizing: border-box; box-sizing: border-box;
transition: border-color .12s ease, box-shadow .12s ease;
} }
.bratonien-selection-active .bratonien-selectable.bratonien-selected::after { .bratonien-selection-active .bratonien-selectable.bratonien-selected::after {
border-color: currentColor; border-color: #f0a646;
box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, .15); box-shadow: inset 0 0 0 9999px rgba(0,0,0,.14);
} }
.bratonien-selection-active .bratonien-selectable.bratonien-selected::before { .bratonien-selection-active .bratonien-selectable.bratonien-selected::before {
content: '\2713'; content: '\2713';
position: absolute; position: absolute;
top: .5rem; top: .45rem;
right: .5rem; right: .45rem;
z-index: 20; z-index: 20;
width: 2rem; width: 1.8rem;
height: 2rem; height: 1.8rem;
line-height: 2rem; line-height: 1.8rem;
text-align: center; text-align: center;
border-radius: 50%; border-radius: 50%;
background: rgba(0, 0, 0, .8); background: #f0a646;
color: #fff; color: #242424;
font-weight: 700; font-weight: 800;
pointer-events: none; pointer-events: none;
} }
@media (max-width: 640px) {
.bratonien-selection-bar {
align-items: stretch;
}
.bratonien-selection-actions {
width: 100%;
}
.bratonien-selection-actions button {
flex: 1 1 auto;
}
}