neater looks for shadow-related things

This commit is contained in:
Henry Jameson 2024-10-07 01:30:53 +03:00
commit 97c058ebda
4 changed files with 42 additions and 11 deletions

View file

@ -1,12 +1,32 @@
.settings-modal .settings-modal-panel .shadow-control {
display: flex;
flex-wrap: wrap;
.ShadowControl {
display: grid;
grid-template-columns: 10em 1fr 1fr;
grid-template-rows: 1fr;
grid-template-areas: "selector preview tweak";
grid-gap: 0.5em;
justify-content: stretch;
grid-gap: 0.25em;
margin-bottom: 1em;
width: 100%;
&.-compact {
grid-template-columns: 1fr;
grid-template-rows: 10em auto auto;
grid-template-areas:
"selector"
"preview"
"tweak";
&.-no-preview {
grid-template-columns: 1fr;
grid-template-rows: 10em 1fr;
grid-template-areas:
"selector"
"tweak";
}
}
.shadow-switcher {
grid-area: selector;
order: 1;
flex: 1 0 6em;
min-width: 6em;
@ -20,6 +40,7 @@
}
.shadow-tweak {
grid-area: tweak;
order: 3;
flex: 2 0 10em;
min-width: 10em;
@ -65,6 +86,10 @@
}
&.-no-preview {
grid-template-columns: 10em 1fr;
grid-template-rows: 1fr;
grid-template-areas: "selector tweak";
.shadow-tweak {
order: 0;
flex: 2 0 8em;
@ -87,8 +112,7 @@
}
.shadow-preview {
order: 2;
flex: 3 3 15em;
grid-area: preview;
min-width: 10em;
margin-left: 0.125em;
align-self: start;