andras/fleeting-garden
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

simplify more

Browse source
This commit is contained in:
Andras Schmelczer 2026-05-20 21:37:30 +01:00
parent f03da42b5e
commit 2fe3c69963
40 changed files with 689 additions and 872 deletions
Download patch file Download diff file Expand all files Collapse all files

90
src/style/_config-pane.scss
View file

@ -44,27 +44,105 @@
.color-reaction-matrix__cell {
min-width: 0;
display: grid;
}
.color-reaction-matrix__cell > select {
.color-reaction-matrix__button {
position: relative;
display: grid;
width: 100%;
min-width: 0;
height: 28px;
place-items: center;
border: 1px solid rgb(255 255 255 / 16%);
border-radius: 4px;
padding: 0 4px;
background: rgb(255 255 255 / 8%);
color: white;
font: inherit;
font-size: 11px;
cursor: pointer;
transition:
background-color var(--transition-time),
border-color var(--transition-time),
color var(--transition-time),
transform var(--transition-time);
}
.color-reaction-matrix__cell > select:focus-visible {
.color-reaction-matrix__button:hover {
transform: translateY(-1px);
}
.color-reaction-matrix__button:focus-visible {
outline: 2px solid rgb(255 255 255 / 72%);
outline-offset: 1px;
}
.color-reaction-matrix__cell > select > option {
background: rgb(28 31 38);
color: white;
.color-reaction-matrix__button[data-reaction='follow'] {
border-color: rgb(115 235 160 / 44%);
background: rgb(53 165 96 / 20%);
color: rgb(157 255 195 / 94%);
}
.color-reaction-matrix__button[data-reaction='ignore'] {
border-color: rgb(255 255 255 / 18%);
background: rgb(255 255 255 / 7%);
color: rgb(235 238 245 / 72%);
}
.color-reaction-matrix__button[data-reaction='avoid'] {
border-color: rgb(255 145 120 / 46%);
background: rgb(215 74 54 / 19%);
color: rgb(255 171 148 / 94%);
}
.color-reaction-matrix__icon {
position: relative;
display: block;
width: 16px;
height: 16px;
}
.color-reaction-matrix__icon::before,
.color-reaction-matrix__icon::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
border-radius: 999px;
background: currentColor;
transform: translate(-50%, -50%);
}
.color-reaction-matrix__button[data-reaction='follow']
> .color-reaction-matrix__icon::before,
.color-reaction-matrix__button[data-reaction='avoid']
> .color-reaction-matrix__icon::before {
width: 14px;
height: 2px;
}
.color-reaction-matrix__button[data-reaction='follow']
> .color-reaction-matrix__icon::after {
width: 2px;
height: 14px;
}
.color-reaction-matrix__button[data-reaction='avoid']
> .color-reaction-matrix__icon::after {
display: none;
}
.color-reaction-matrix__button[data-reaction='ignore'] > .color-reaction-matrix__icon {
width: 12px;
height: 12px;
border: 2px solid currentColor;
border-radius: 999px;
opacity: 0.82;
}
.color-reaction-matrix__button[data-reaction='ignore']
> .color-reaction-matrix__icon::before,
.color-reaction-matrix__button[data-reaction='ignore']
> .color-reaction-matrix__icon::after {
display: none;
}