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

Improve selection toolbar alignment and responsiveness

Browse Source
This commit is contained in:
Terranom674
2026-08-16 15:24:21 +02:00
parent 987027c02a
commit 61fe006fc5
1 changed files with 40 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
css/public_selection.css
View File

@@ -2,6 +2,17 @@
display:inline-flex; display:inline-flex;
align-items:center; align-items:center;
justify-content:center; justify-content:center;
vertical-align:middle;
line-height:1;
}
#bratonien-selection-toggle .pwg-icon {
display:inline-flex;
align-items:center;
justify-content:center;
line-height:1;
vertical-align:middle;
transform:none;
} }
#bratonien-selection-toggle.active { #bratonien-selection-toggle.active {
@@ -14,11 +25,13 @@
z-index:1000; z-index:1000;
display:flex; display:flex;
flex-wrap:wrap; flex-wrap:wrap;
gap:.45rem; gap:.45rem .7rem;
align-items:center; align-items:center;
width:max-content; justify-content:flex-end;
box-sizing:border-box;
width:calc(100% - 1rem);
max-width:100%; max-width:100%;
margin:.35rem .6rem .75rem auto; margin:.35rem .5rem .75rem;
padding:.45rem .55rem; padding:.45rem .55rem;
border:1px solid rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.16);
border-radius:.4rem; border-radius:.4rem;
@@ -27,7 +40,8 @@
} }
.bratonien-selection-status { .bratonien-selection-status {
padding:0 .45rem 0 .2rem; margin-right:auto;
padding:0 .35rem;
white-space:nowrap; white-space:nowrap;
color:#d7d7d7; color:#d7d7d7;
} }
@@ -35,7 +49,9 @@
.bratonien-selection-actions { .bratonien-selection-actions {
display:flex; display:flex;
flex-wrap:wrap; flex-wrap:wrap;
justify-content:flex-end;
gap:.35rem; gap:.35rem;
min-width:0;
} }
.bratonien-selection-actions button { .bratonien-selection-actions button {
@@ -47,6 +63,7 @@
color:inherit; color:inherit;
cursor:pointer; cursor:pointer;
font:inherit; font:inherit;
white-space:nowrap;
} }
.bratonien-selection-actions button:hover:not(:disabled), .bratonien-selection-actions button:hover:not(:disabled),
@@ -74,7 +91,6 @@
.bratonien-selection-error { .bratonien-selection-error {
flex-basis:100%; flex-basis:100%;
max-width:34rem;
padding:.15rem .25rem 0; padding:.15rem .25rem 0;
color:#e58b8b; color:#e58b8b;
} }
@@ -119,18 +135,33 @@
pointer-events:none; pointer-events:none;
} }
@media (max-width:640px) { @media (max-width:760px) {
.bratonien-selection-bar { .bratonien-selection-bar {
width:auto; align-items:stretch;
margin:.35rem .5rem .75rem; justify-content:stretch;
} }
.bratonien-selection-status { .bratonien-selection-status {
width:100%; width:100%;
margin-right:0;
padding:.1rem .2rem;
} }
.bratonien-selection-actions { .bratonien-selection-actions {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
width:100%; width:100%;
} }
.bratonien-selection-actions button { .bratonien-selection-actions button {
flex:1 1 auto; width:100%;
min-width:0;
white-space:normal;
}
}
@media (max-width:480px) {
.bratonien-selection-actions {
grid-template-columns:1fr;
} }
} }