Thomas/Piwigo_Bratonien_Tools
1
0
Fork 0
mirror of https://github.com/Terranom674/Piwigo_Bratonien_Tools.git synced 2026-09-19 11:44:31 +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 {
display: inline-flex;
align-items: center;
justify-content: center;
display:inline-flex;
align-items:center;
justify-content:center;
}
#bratonien-selection-toggle.active {
color: #f0a646;
color:#f0a646;
}
.bratonien-selection-bar {
position: sticky;
top: .5rem;
z-index: 1000;
display: flex;
flex-wrap: wrap;
gap: .65rem 1rem;
align-items: center;
justify-content: space-between;
padding: .7rem .85rem;
margin: 0 0 1rem;
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);
position:sticky;
top:.5rem;
z-index:1000;
display:flex;
flex-wrap:wrap;
gap:.45rem;
align-items:center;
width:max-content;
max-width:100%;
margin:.35rem .6rem .75rem auto;
padding:.45rem .55rem;
border:1px solid rgba(255,255,255,.16);
border-radius:.4rem;
background:rgba(27,27,27,.96);
box-shadow:0 .2rem .7rem rgba(0,0,0,.22);
}
.bratonien-selection-status {
white-space: nowrap;
padding:0 .45rem 0 .2rem;
white-space:nowrap;
color:#d7d7d7;
}
.bratonien-selection-actions {
display: flex;
flex-wrap: wrap;
gap: .45rem;
display:flex;
flex-wrap:wrap;
gap:.35rem;
}
.bratonien-selection-actions button {
min-height: 2.25rem;
padding: .35rem .7rem;
border: 1px solid rgba(255,255,255,.18);
border-radius: .25rem;
background: rgba(255,255,255,.05);
color: inherit;
cursor: pointer;
min-height:2rem;
padding:.3rem .58rem;
border:1px solid rgba(255,255,255,.18);
border-radius:.25rem;
background:rgba(255,255,255,.045);
color:inherit;
cursor:pointer;
font:inherit;
}
.bratonien-selection-actions button:hover: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 {
border-color: #f0a646;
background: #f0a646;
color: #242424;
font-weight: 700;
border-color:#f0a646;
background:#f0a646;
color:#242424;
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 {
opacity: .45;
cursor: default;
opacity:.42;
cursor:default;
}
.bratonien-selection-error {
flex-basis: 100%;
color: #e58b8b;
flex-basis:100%;
max-width:34rem;
padding:.15rem .25rem 0;
color:#e58b8b;
}
.bratonien-selectable {
position: relative;
position:relative;
}
.bratonien-selection-active .bratonien-selectable {
cursor: pointer;
cursor:pointer;
}
.bratonien-selection-active .bratonien-selectable::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
border: 3px solid transparent;
box-sizing: border-box;
transition: border-color .12s ease, box-shadow .12s ease;
content:'';
position:absolute;
inset:0;
pointer-events:none;
border:3px solid transparent;
box-sizing:border-box;
transition:border-color .12s ease,box-shadow .12s ease;
}
.bratonien-selection-active .bratonien-selectable.bratonien-selected::after {
border-color: #f0a646;
box-shadow: inset 0 0 0 9999px rgba(0,0,0,.14);
border-color:#f0a646;
box-shadow:inset 0 0 0 9999px rgba(0,0,0,.14);
}
.bratonien-selection-active .bratonien-selectable.bratonien-selected::before {
content: '\2713';
position: absolute;
top: .45rem;
right: .45rem;
z-index: 20;
width: 1.8rem;
height: 1.8rem;
line-height: 1.8rem;
text-align: center;
border-radius: 50%;
background: #f0a646;
color: #242424;
font-weight: 800;
pointer-events: none;
content:'\2713';
position:absolute;
top:.45rem;
right:.45rem;
z-index:20;
width:1.8rem;
height:1.8rem;
line-height:1.8rem;
text-align:center;
border-radius:50%;
background:#f0a646;
color:#242424;
font-weight:800;
pointer-events:none;
}
@media (max-width: 640px) {
@media (max-width:640px) {
.bratonien-selection-bar {
align-items: stretch;
width:auto;
margin:.35rem .5rem .75rem;
}
.bratonien-selection-status {
width:100%;
}
.bratonien-selection-actions {
width: 100%;
width:100%;
}
.bratonien-selection-actions button {
flex: 1 1 auto;
flex:1 1 auto;
}
}