diff --git a/css/grid-n-view.css b/css/grid-n-view.css index f23d1b7..53b59d5 100644 --- a/css/grid-n-view.css +++ b/css/grid-n-view.css @@ -409,21 +409,34 @@ button:active { } + /* groups... */ .gallery .toolbar>* { display: inline-block; + height: calc(100% - var(--padding) * 2); } -.gallery .toolbar>*:not(:last-child) { - padding-right: calc(var(--padding) / 2); +.gallery .toolbar>*:not(:last-child):after { + 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); } -.gallery .toolbar .states:empty:after { +/* state list (group)... */ +.gallery .toolbar .states:empty { display: inline-block; +} +.gallery .toolbar .states:empty:before { content: "Empty..."; + font-family: sans-serif; line-height: var(--toolbar-button-size); + text-align: center; + vertical-align: bottom; + padding: 0 0.5em; opacity: 0.3; - padding: 0em 0.5em; } @@ -433,7 +446,6 @@ button:active { border: solid 1px transparent; background: transparent; - font-family: "Material Symbols Outlined"; font-size: var(--toolbar-button-size); @@ -461,6 +473,7 @@ button:active { left: 0; bottom: calc(var(--toolbar-button-size) / -6); margin-left: calc(var(--toolbar-button-size) / -1.5625); + margin-right: -0.15em; 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... */ .gallery .toolbar button.collapse { position: absolute; diff --git a/grid-n-view.html b/grid-n-view.html index ae11926..67dce4b 100644 --- a/grid-n-view.html +++ b/grid-n-view.html @@ -118,10 +118,15 @@ For more info see: README.md