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

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