mirror of
https://github.com/Sendouc/sendou.ink.git
synced 2026-11-14 08:09:13 -06:00
69 lines
1.1 KiB
CSS
69 lines
1.1 KiB
CSS
.drawing {
|
|
position: absolute;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.canvas {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: var(--radius-box);
|
|
touch-action: none;
|
|
pointer-events: auto;
|
|
cursor: crosshair;
|
|
}
|
|
|
|
.stroke {
|
|
fill: none;
|
|
stroke-width: 4px;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
vector-effect: non-scaling-stroke;
|
|
}
|
|
|
|
.tools {
|
|
position: absolute;
|
|
inset-block-start: var(--s-1-5);
|
|
inset-inline-end: var(--s-1-5);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--s-1);
|
|
padding: var(--s-1) var(--s-1-5);
|
|
border-radius: var(--radius-field);
|
|
background: var(--color-bg-overlay);
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.color {
|
|
width: 0.75rem;
|
|
height: 0.75rem;
|
|
padding: 0;
|
|
border: none;
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
|
|
&[aria-pressed="true"] {
|
|
box-shadow: 0 0 0 2px var(--color-text-on-dark);
|
|
}
|
|
|
|
&:focus-visible {
|
|
outline: var(--focus-ring);
|
|
}
|
|
}
|
|
|
|
.clear {
|
|
display: grid;
|
|
place-items: center;
|
|
padding: 0;
|
|
border: none;
|
|
background: none;
|
|
color: var(--color-text-on-dark);
|
|
cursor: pointer;
|
|
|
|
&:focus-visible {
|
|
outline: var(--focus-ring);
|
|
}
|
|
}
|