mirror of
https://github.com/Sendouc/sendou.ink.git
synced 2026-09-16 08:16:46 -05:00
209 lines
3.7 KiB
CSS
209 lines
3.7 KiB
CSS
.heatmap {
|
|
/* how many are free at once, as steps between the track and the strongest "can play" green */
|
|
--heat-1: color-mix(
|
|
in oklab,
|
|
var(--color-success-high) 20%,
|
|
var(--color-bg-high)
|
|
);
|
|
--heat-2: color-mix(
|
|
in oklab,
|
|
var(--color-success-high) 40%,
|
|
var(--color-bg-high)
|
|
);
|
|
--heat-3: color-mix(
|
|
in oklab,
|
|
var(--color-success-high) 60%,
|
|
var(--color-bg-high)
|
|
);
|
|
--heat-4: color-mix(
|
|
in oklab,
|
|
var(--color-success-high) 80%,
|
|
var(--color-bg-high)
|
|
);
|
|
--heat-5: var(--color-success-high);
|
|
}
|
|
|
|
.chips {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--s-1-5);
|
|
}
|
|
|
|
/* the chip-radio look, as a multi-select: solid fills, no borders */
|
|
.chip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--s-1-5);
|
|
padding: 0 var(--s-2) 0 var(--s-1);
|
|
height: var(--selector-size);
|
|
background-color: var(--color-bg-higher);
|
|
border: none;
|
|
border-radius: var(--radius-selector);
|
|
font-size: var(--font-xs);
|
|
font-weight: var(--weight-semi);
|
|
color: var(--color-text);
|
|
cursor: pointer;
|
|
transition: background-color 0.15s;
|
|
|
|
&[aria-pressed="true"] {
|
|
background-color: var(--color-text-accent);
|
|
color: var(--color-text-inverse);
|
|
}
|
|
|
|
&:focus-visible {
|
|
outline: var(--focus-ring);
|
|
outline-offset: 2px;
|
|
}
|
|
}
|
|
|
|
.chipUnknown {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.dotSlot {
|
|
display: inline-flex;
|
|
width: 0.6rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.cellRow {
|
|
display: grid;
|
|
grid-template-columns: repeat(var(--cells), 1fr);
|
|
gap: 2px;
|
|
}
|
|
|
|
.cell {
|
|
height: 1.5rem;
|
|
border-radius: 3px;
|
|
background-color: var(--color-bg-high);
|
|
|
|
&:hover {
|
|
outline: 2px solid var(--color-border-high);
|
|
outline-offset: 1px;
|
|
}
|
|
}
|
|
|
|
.count1 {
|
|
background-color: var(--heat-1);
|
|
}
|
|
|
|
.count2 {
|
|
background-color: var(--heat-2);
|
|
}
|
|
|
|
.count3 {
|
|
background-color: var(--heat-3);
|
|
}
|
|
|
|
.count4 {
|
|
background-color: var(--heat-4);
|
|
}
|
|
|
|
.count5 {
|
|
background-color: var(--heat-5);
|
|
}
|
|
|
|
/* framed like the popover element: page background inside the standard border */
|
|
.tooltip {
|
|
position: fixed;
|
|
z-index: 10;
|
|
transform: translate(-50%, calc(-100% - 6px));
|
|
max-width: 16rem;
|
|
padding: var(--s-2);
|
|
background-color: var(--color-bg);
|
|
border: var(--border-style);
|
|
border-radius: var(--radius-box);
|
|
font-size: var(--font-xs);
|
|
font-weight: var(--weight-semi);
|
|
pointer-events: none;
|
|
|
|
&.tooltipBelow {
|
|
transform: translate(-50%, 6px);
|
|
}
|
|
}
|
|
|
|
.tooltipTime {
|
|
font-weight: var(--weight-semi);
|
|
}
|
|
|
|
.tooltipCount {
|
|
color: var(--color-text-high);
|
|
margin-block-end: var(--s-1);
|
|
}
|
|
|
|
.tooltipMembers {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--s-0-5);
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.tooltipDot {
|
|
/* whole pixels: a fractional size rounds width and height differently and the circle turns oval */
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background-color: var(--color-success);
|
|
flex-shrink: 0;
|
|
|
|
&.tooltipDotUnknown {
|
|
background-color: transparent;
|
|
border: 1px dashed currentColor;
|
|
}
|
|
}
|
|
|
|
.tooltipMember {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--s-1-5);
|
|
white-space: nowrap;
|
|
|
|
&.tooltipMemberOff {
|
|
color: var(--color-text-high);
|
|
|
|
& .tooltipDot {
|
|
background-color: transparent;
|
|
border: 1px solid currentColor;
|
|
}
|
|
}
|
|
}
|
|
|
|
.listChip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--s-1);
|
|
padding: var(--s-0-5) var(--s-2);
|
|
background-color: var(--color-bg-high);
|
|
border-radius: var(--radius-full);
|
|
font-size: var(--font-xs);
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.legend {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: var(--s-2);
|
|
font-size: var(--font-3xs);
|
|
color: var(--color-text-high);
|
|
}
|
|
|
|
.legendItem {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--s-1);
|
|
}
|
|
|
|
.legendSwatch {
|
|
width: 14px;
|
|
height: 10px;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.unreported {
|
|
font-size: var(--font-2xs);
|
|
color: var(--color-text-high);
|
|
}
|