olyakonstantin/gallery
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

reworked toolbar button/group styling...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2023-09-13 20:15:23 +03:00
parent ad30c7e57f
commit 1978ceb854
2 changed files with 36 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
css/grid-n-view.css
View File

@ -409,21 +409,34 @@ button:active {
} }
/* groups... */ /* groups... */
.gallery .toolbar>* { .gallery .toolbar>* {
display: inline-block; display: inline-block;
height: calc(100% - var(--padding) * 2);
} }
.gallery .toolbar>*:not(:last-child) { .gallery .toolbar>*:not(:last-child):after {
padding-right: calc(var(--padding) / 2); content: "";
display: inline-block;
position: absolute;
top: var(--padding);
bottom: var(--padding);
margin-left: calc(var(--padding) / 4);
border-right: solid 1px var(--gallery-secondary-color); border-right: solid 1px var(--gallery-secondary-color);
} }
.gallery .toolbar .states:empty:after { /* state list (group)... */
.gallery .toolbar .states:empty {
display: inline-block; display: inline-block;
}
.gallery .toolbar .states:empty:before {
content: "Empty..."; content: "Empty...";
font-family: sans-serif;
line-height: var(--toolbar-button-size); line-height: var(--toolbar-button-size);
text-align: center;
vertical-align: bottom;
padding: 0 0.5em;
opacity: 0.3; opacity: 0.3;
padding: 0em 0.5em;
} }
@ -433,7 +446,6 @@ button:active {
border: solid 1px transparent; border: solid 1px transparent;
background: transparent; background: transparent;
font-family: "Material Symbols Outlined"; font-family: "Material Symbols Outlined";
font-size: var(--toolbar-button-size); font-size: var(--toolbar-button-size);
@ -461,6 +473,7 @@ button:active {
left: 0; left: 0;
bottom: calc(var(--toolbar-button-size) / -6); bottom: calc(var(--toolbar-button-size) / -6);
margin-left: calc(var(--toolbar-button-size) / -1.5625); margin-left: calc(var(--toolbar-button-size) / -1.5625);
margin-right: -0.15em;
font-size: calc(var(--toolbar-button-size) / 1.15); font-size: calc(var(--toolbar-button-size) / 1.15);
@ -501,6 +514,16 @@ button:active {
} }
.gallery .toolbar .states button {
font-family: sans-serif;
line-height: var(--toolbar-button-size);
text-align: center;
vertical-align: bottom;
}
/* button: collapse... */ /* button: collapse... */
.gallery .toolbar button.collapse { .gallery .toolbar button.collapse {
position: absolute; position: absolute;

11
grid-n-view.html
View File

@ -118,10 +118,15 @@ For more info see: <a href="./README.md">README.md</a>
<!-- toolbar: states... --> <!-- toolbar: states... -->
<div class="toolbar fixed"> <div class="toolbar fixed">
<button class="drag-handle" title="Drag">drag_indicator</button> <button class="drag-handle" title="Drag">drag_indicator</button>
<!--div> <div>
<button onclick="gallery" title="Save crop">crossword<sec>add</sec></button> <button onclick="gallery" title="Save">crossword<sec>add</sec></button>
</div--> </div>
<div class="states"></div> <div class="states"></div>
<!--div class="states">
<button onclick="gallery" title="Load 1">1</button>
<button onclick="gallery" title="Load 1">2</button>
<button onclick="gallery" title="Load 1">3</button>
</div-->
<button class="collapse" title="Saved (hold to make sticky)">crossword</button> <button class="collapse" title="Saved (hold to make sticky)">crossword</button>
</div> </div>
</div> </div>