hj/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Massively upgraded shadow control, added sorting by specificity in themes3, added/fixed disabled inputs

Browse source
This commit is contained in:
Henry Jameson 2024-09-12 15:47:48 +03:00
commit a044dc377e
11 changed files with 375 additions and 208 deletions
Download patch file Download diff file Expand all files Collapse all files

178
src/components/shadow_control/shadow_control.scss Normal file
View file

@ -0,0 +1,178 @@
.settings-modal .settings-modal-panel .shadow-control {
display: flex;
flex-wrap: wrap;
justify-content: stretch;
grid-gap: 0.25em;
margin-bottom: 1em;
.shadow-switcher {
order: 1;
flex: 1 0 6em;
min-width: 6em;
margin-right: 0.125em;
display: flex;
flex-direction: column;
.shadow-list {
flex: 1 0 auto;
}
.arrange-buttons {
flex: 0 0 auto;
display: grid;
grid-auto-columns: 1fr;
grid-auto-flow: column;
grid-gap: 0.125em;
margin-top: 0.25em;
.button-default {
margin: 0;
padding: 0;
}
}
}
.shadow-tweak {
order: 3;
flex: 2 0 10em;
min-width: 10em;
margin-left: 0.125em;
margin-right: 0.125em;
/* hack */
.input-boolean {
flex: 1;
display: flex;
.label {
flex: 1;
}
}
.input-string {
flex: 1 0 5em;
}
.id-control {
align-items: stretch;
.shadow-switcher,
.btn {
min-width: 1px;
margin-right: 5px;
}
.btn {
padding: 0 0.4em;
margin: 0 0.1em;
}
}
}
.shadow-preview {
order: 2;
flex: 3 3 15em;
min-width: 10em;
display: grid;
margin-left: 0.125em;
align-self: start;
grid-template-columns: 3em 1fr 3em;
grid-template-rows: 2em 1fr 2em;
grid-template-areas:
". header y-num "
". preview y-slide"
"x-num x-slide . "
"options options options";
grid-gap: 0.5em;
.header {
grid-area: header;
justify-self: center;
align-self: baseline;
line-height: 2;
}
.input-light-grid {
grid-area: options;
justify-self: end;
}
.input-number {
min-width: 2em;
}
.x-shift-number {
grid-area: x-num;
}
.x-shift-slider {
grid-area: x-slide;
height: auto;
align-self: start;
min-width: 10em;
}
.y-shift-number {
grid-area: y-num;
}
.y-shift-slider {
grid-area: y-slide;
writing-mode: vertical-lr;
justify-self: left;
min-height: 10em;
}
.x-shift-slider,
.y-shift-slider {
padding: 0;
}
.preview-window {
--__grid-color1: rgb(102 102 102);
--__grid-color2: rgb(153 153 153);
--__grid-color1-disabled: rgba(102 102 102 / 20%);
--__grid-color2-disabled: rgba(153 153 153 / 20%);
&.-light-grid {
--__grid-color1: rgb(205 205 205);
--__grid-color2: rgb(255 255 255);
--__grid-color1-disabled: rgba(205 205 205 / 20%);
--__grid-color2-disabled: rgba(255 255 255 / 20%);
}
grid-area: preview;
aspect-ratio: 1;
display: flex;
align-items: center;
justify-content: center;
min-width: 10em;
min-height: 10em;
background-color: var(--__grid-color2);
background-image:
linear-gradient(45deg, var(--__grid-color1) 25%, transparent 25%),
linear-gradient(-45deg, var(--__grid-color1) 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, var(--__grid-color1) 75%),
linear-gradient(-45deg, transparent 75%, var(--__grid-color1) 75%);
background-size: 20px 20px;
background-position: 0 0, 0 10px, 10px -10px, -10px 0;
border-radius: var(--roundness);
&.disabled {
background-color: var(--__grid-color2-disabled);
background-image:
linear-gradient(45deg, var(--__grid-color1-disabled) 25%, transparent 25%),
linear-gradient(-45deg, var(--__grid-color1-disabled) 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, var(--__grid-color1-disabled) 75%),
linear-gradient(-45deg, transparent 75%, var(--__grid-color1-disabled) 75%);
}
.preview-block {
width: 33%;
height: 33%;
border-radius: var(--roundness);
background: var(--background);
}
}
}
}