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

Compact public selection controls

Browse Source
This commit is contained in:
Terranom674
2026-08-16 14:30:33 +02:00
parent 4ef8ccd196
commit 54d218cdea
1 changed files with 83 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

152
css/public_selection.css
View File

@@ -1,122 +1,136 @@
#bratonien-selection-toggle { #bratonien-selection-toggle {
display: inline-flex; display:inline-flex;
align-items: center; align-items:center;
justify-content: center; justify-content:center;
} }
#bratonien-selection-toggle.active { #bratonien-selection-toggle.active {
color: #f0a646; color:#f0a646;
} }
.bratonien-selection-bar { .bratonien-selection-bar {
position: sticky; position:sticky;
top: .5rem; top:.5rem;
z-index: 1000; z-index:1000;
display: flex; display:flex;
flex-wrap: wrap; flex-wrap:wrap;
gap: .65rem 1rem; gap:.45rem;
align-items: center; align-items:center;
justify-content: space-between; width:max-content;
padding: .7rem .85rem; max-width:100%;
margin: 0 0 1rem; margin:.35rem .6rem .75rem auto;
border: 1px solid rgba(255,255,255,.16); padding:.45rem .55rem;
border-radius: .35rem; border:1px solid rgba(255,255,255,.16);
background: rgba(32,32,32,.96); border-radius:.4rem;
box-shadow: 0 .25rem .8rem rgba(0,0,0,.2); background:rgba(27,27,27,.96);
box-shadow:0 .2rem .7rem rgba(0,0,0,.22);
} }
.bratonien-selection-status { .bratonien-selection-status {
white-space: nowrap; padding:0 .45rem 0 .2rem;
white-space:nowrap;
color:#d7d7d7;
} }
.bratonien-selection-actions { .bratonien-selection-actions {
display: flex; display:flex;
flex-wrap: wrap; flex-wrap:wrap;
gap: .45rem; gap:.35rem;
} }
.bratonien-selection-actions button { .bratonien-selection-actions button {
min-height: 2.25rem; min-height:2rem;
padding: .35rem .7rem; padding:.3rem .58rem;
border: 1px solid rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.18);
border-radius: .25rem; border-radius:.25rem;
background: rgba(255,255,255,.05); background:rgba(255,255,255,.045);
color: inherit; color:inherit;
cursor: pointer; cursor:pointer;
font:inherit;
} }
.bratonien-selection-actions button:hover:not(:disabled), .bratonien-selection-actions button:hover:not(:disabled),
.bratonien-selection-actions button:focus:not(:disabled) { .bratonien-selection-actions button:focus:not(:disabled) {
border-color: rgba(240,166,70,.7); border-color:rgba(240,166,70,.72);
color:#f0a646;
} }
.bratonien-selection-actions .bratonien-selection-primary { .bratonien-selection-actions .bratonien-selection-primary {
border-color: #f0a646; border-color:#f0a646;
background: #f0a646; background:#f0a646;
color: #242424; color:#242424;
font-weight: 700; font-weight:700;
}
.bratonien-selection-actions .bratonien-selection-primary:hover:not(:disabled),
.bratonien-selection-actions .bratonien-selection-primary:focus:not(:disabled) {
color:#242424;
} }
.bratonien-selection-actions button:disabled { .bratonien-selection-actions button:disabled {
opacity: .45; opacity:.42;
cursor: default; cursor:default;
} }
.bratonien-selection-error { .bratonien-selection-error {
flex-basis: 100%; flex-basis:100%;
color: #e58b8b; max-width:34rem;
padding:.15rem .25rem 0;
color:#e58b8b;
} }
.bratonien-selectable { .bratonien-selectable {
position: relative; position:relative;
} }
.bratonien-selection-active .bratonien-selectable { .bratonien-selection-active .bratonien-selectable {
cursor: pointer; cursor:pointer;
} }
.bratonien-selection-active .bratonien-selectable::after { .bratonien-selection-active .bratonien-selectable::after {
content: ''; content:'';
position: absolute; position:absolute;
inset: 0; inset:0;
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; 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: #f0a646; border-color:#f0a646;
box-shadow: inset 0 0 0 9999px rgba(0,0,0,.14); 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: .45rem; top:.45rem;
right: .45rem; right:.45rem;
z-index: 20; z-index:20;
width: 1.8rem; width:1.8rem;
height: 1.8rem; height:1.8rem;
line-height: 1.8rem; line-height:1.8rem;
text-align: center; text-align:center;
border-radius: 50%; border-radius:50%;
background: #f0a646; background:#f0a646;
color: #242424; color:#242424;
font-weight: 800; font-weight:800;
pointer-events: none; pointer-events:none;
} }
@media (max-width: 640px) { @media (max-width:640px) {
.bratonien-selection-bar { .bratonien-selection-bar {
align-items: stretch; width:auto;
margin:.35rem .5rem .75rem;
}
.bratonien-selection-status {
width:100%;
} }
.bratonien-selection-actions { .bratonien-selection-actions {
width: 100%; width:100%;
} }
.bratonien-selection-actions button { .bratonien-selection-actions button {
flex: 1 1 auto; flex:1 1 auto;
} }
} }