EH22/design
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

merch sizing-guide: ui & ux improvements, fix missing horizontal scroll
All checks were successful
/ build (push) Successful in 8s
Details

Browse source
This commit is contained in:
kritzl 2025-02-13 12:12:36 +01:00
commit e80dadac8c
Signed by: kritzl
SSH key fingerprint: SHA256:5BmINP9VjZWaUk5Z+2CTut1KFhwLtd0ZynMekKbtViM
4 changed files with 308 additions and 149 deletions
Download patch file Download diff file Expand all files Collapse all files

156
styleguide/assets/style/merch.scss Normal file
View file

@ -0,0 +1,156 @@
main {
max-width: 100%;
height: 100vh;
overflow: auto;
}
.table-container {
overflow-x: auto;
width: 100%;
}
table {
user-select: none;
width: fit-content;
border-collapse: collapse;
border: solid 4px var(--color-shade-3);
thead {
position: sticky;
top: calc(-1rem + 2px);
z-index: 10;
background-color: var(--color-background);
outline: solid 4px var(--color-shade-3);
outline-offset: -2px;
tr > th {
outline: solid 1px var(--color-shade-3);
&.hover {
background-color: var(--color-shade-4);
}
}
tr:first-child > th[colspan='15'] {
background-color: var(--color-shade-3);
}
&.currentEvent {
tr > th {
outline-color: var(--color-primary);
}
outline-color: var(--color-primary);
tr:first-child > th {
background-color: var(--color-primary);
}
}
}
tbody {
border-top: solid 4px var(--color-shade-3);
&.currentEvent {
border: solid 4px var(--color-primary);
}
}
tbody > tr > th,
thead > tr > th,
td {
text-align: center;
}
th,
td {
padding: 0.25rem 0.5rem;
border: solid 1px var(--color-shade-3);
&.hover {
background-color: var(--color-shade-1);
}
}
td {
&.val {
font-family: "Departure Mono", ui-monospace, monospace;
&.hover {
background-color: transparent;
}
&:not(.empty) {
cursor: pointer;
&.hover {
background-color: var(--color-shade-1);
}
&:hover {
background-color: var(--color-shade-4);
}
}
&.highlighted {
&[data-dim="A"] {
background-color: rgb(96, 165, 249);
}
&[data-dim="B"] {
background-color: rgb(211, 129, 247);
}
&[data-dim="C"] {
background-color: rgb(255, 121, 117);
}
}
&.currentDimension:not(.hover) {
background-color: var(--color-shade-3);
}
&:not([data-diff=''])::after {
content: attr(data-diff);
display: block;
font-size: 0.8em;
background-color: var(--custom-color);
width: calc(100% + 1rem);
height: 1lh;
position: relative;
left: -0.5rem;
top: 0.25rem;
margin-top: -0.25rem;
}
&[data-diff='']::after {
content: '';
display: block;
font-size: 0.8em;
background-color: transparent;
width: calc(100% + 1rem);
height: 1lh;
position: relative;
left: -0.5rem;
top: 0.25rem;
margin-top: -0.25rem;
}
}
&.dimension {
&.hover {
background-color: var(--color-shade-4);
}
&.currentDimension::after {
content: '>';
/*color: var(--color-secondary);*/
font-family: "Departure Mono", ui-monospace, monospace;
position: relative;
right: calc(-0.5rem - 0.5ch);
margin-left: -1ch;
font-weight: bold;
}
}
}
}