Aran Roig
68b74eb60b
All checks were successful
Build and Deploy Nuxt / build (push) Successful in 24s
290 lines
6.6 KiB
SCSS
290 lines
6.6 KiB
SCSS
@use 'mixins' as *;
|
|
|
|
// ---------- Graphing calculator (/calculator) ----------
|
|
|
|
// desktop: the plane owns the space beside the sidebar the way the link
|
|
// map does — a full surface with the function dock and the zoom buttons
|
|
// floating over it. (The page transition only fades, so no transform
|
|
// steals the fixed positioning.)
|
|
.calc-stage {
|
|
position: fixed;
|
|
inset: 0 0 0 var(--sidebar-w);
|
|
transition: left 0.22s ease;
|
|
z-index: 1;
|
|
background: var(--bg);
|
|
}
|
|
|
|
// the plane fills the stage
|
|
.plot-wrap {
|
|
position: absolute;
|
|
inset: 0;
|
|
overflow: hidden;
|
|
background: var(--surface);
|
|
}
|
|
|
|
.plot-canvas {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
touch-action: none; // the plane owns drags and pinches, not the page
|
|
}
|
|
|
|
// the function dock, pinned to the plane's left edge
|
|
.calc-dock {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
z-index: 2;
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: clamp(260px, 24vw, 320px);
|
|
padding: 18px 16px;
|
|
border-right: 1px solid var(--border);
|
|
background: color-mix(in srgb, var(--bg-elev) 92%, transparent);
|
|
backdrop-filter: blur(12px);
|
|
box-shadow: var(--shadow-lg);
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.calc-dock-head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
margin: 0 0 14px;
|
|
}
|
|
|
|
.calc-dock-title {
|
|
@include eyebrow(0.74rem, 750, 0.09em);
|
|
margin: 0;
|
|
}
|
|
|
|
.calc-rows {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.calc-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
// the curve's hue; a press hands it on to the next one in the palette
|
|
.calc-swatch {
|
|
flex: none;
|
|
width: 14px;
|
|
height: 14px;
|
|
border-radius: 50%;
|
|
border: 2px solid color-mix(in srgb, var(--text) 12%, transparent);
|
|
transition: transform 0.15s;
|
|
|
|
&:hover { transform: scale(1.2); }
|
|
}
|
|
|
|
.calc-input-box {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
min-width: 0;
|
|
border: 1px solid var(--border);
|
|
border-radius: 10px;
|
|
background: var(--surface);
|
|
transition: border-color 0.15s, box-shadow 0.15s;
|
|
|
|
&:focus-within {
|
|
border-color: var(--accent);
|
|
box-shadow: var(--ring);
|
|
}
|
|
|
|
.calc-item.invalid & {
|
|
border-color: color-mix(in srgb, var(--danger) 55%, transparent);
|
|
}
|
|
}
|
|
|
|
// the "y =" the field answers to, set like the math it introduces
|
|
.calc-y {
|
|
flex: none;
|
|
padding: 0 2px 0 10px;
|
|
color: var(--faint);
|
|
font: italic 0.95rem/1 'Computer Modern', Georgia, serif;
|
|
}
|
|
|
|
// a relation or point carries no lone "y =", so it sheds the gutter and the
|
|
// input takes back the room it stood in
|
|
.calc-input-box.bare .calc-input {
|
|
padding-left: 10px;
|
|
}
|
|
|
|
.calc-input {
|
|
flex: 1;
|
|
min-width: 0;
|
|
padding: 9px 10px 9px 6px;
|
|
border: 0;
|
|
outline: none;
|
|
background: transparent;
|
|
color: var(--text);
|
|
font: 0.95rem/1.2 'Computer Modern', Georgia, serif;
|
|
|
|
&.input-error { color: var(--danger); }
|
|
}
|
|
|
|
.calc-remove:hover {
|
|
color: var(--danger);
|
|
background: color-mix(in srgb, var(--danger) 10%, transparent);
|
|
}
|
|
|
|
.calc-error {
|
|
display: block;
|
|
margin: 5px 2px 1px;
|
|
color: var(--danger);
|
|
font-size: 0.78rem;
|
|
}
|
|
|
|
.calc-add { margin-top: 12px; }
|
|
|
|
// the fold: the dock slides out to the left, under the app sidebar, and a
|
|
// quiet card takes its place at the plane's top-left corner
|
|
.calc-dock-enter-active,
|
|
.calc-dock-leave-active { transition: transform 0.22s ease; }
|
|
|
|
.calc-dock-enter-from,
|
|
.calc-dock-leave-to { transform: translateX(-105%); }
|
|
|
|
.calc-dock-open {
|
|
position: absolute;
|
|
top: 10px;
|
|
left: 12px;
|
|
z-index: 2;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 7px 12px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 11px;
|
|
background: color-mix(in srgb, var(--bg-elev) 84%, transparent);
|
|
backdrop-filter: blur(10px);
|
|
box-shadow: var(--shadow-sm);
|
|
color: var(--muted);
|
|
font-size: 0.84rem;
|
|
font-weight: 650;
|
|
white-space: nowrap;
|
|
transition: color 0.15s, background-color 0.15s;
|
|
|
|
&:hover { color: var(--text); background: var(--surface-2); }
|
|
}
|
|
|
|
// the button row floating on the plane's top-right corner — clear of the dock
|
|
.plot-toolbar {
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 12px;
|
|
z-index: 2;
|
|
display: flex;
|
|
gap: 2px;
|
|
padding: 4px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 11px;
|
|
background: color-mix(in srgb, var(--bg-elev) 84%, transparent);
|
|
backdrop-filter: blur(10px);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
// where the cursor stands, bottom-right so the dock never covers it
|
|
.plot-readout {
|
|
position: absolute;
|
|
bottom: 10px;
|
|
right: 12px;
|
|
padding: 4px 10px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
background: color-mix(in srgb, var(--bg-elev) 84%, transparent);
|
|
backdrop-filter: blur(10px);
|
|
color: var(--muted);
|
|
font: 0.78rem/1.3 'Computer Modern', Georgia, serif;
|
|
font-variant-numeric: tabular-nums;
|
|
pointer-events: none;
|
|
}
|
|
|
|
// the top bar is in the flow here, so the calculator folds into panels of
|
|
// the page: the dock first, then the plane as its own card
|
|
@media (max-width: 900px) {
|
|
.calc-stage {
|
|
position: static;
|
|
inset: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: transparent;
|
|
}
|
|
|
|
.calc-dock {
|
|
position: static;
|
|
order: 1;
|
|
width: auto;
|
|
margin-bottom: 16px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 14px;
|
|
background: var(--bg-elev);
|
|
backdrop-filter: none;
|
|
box-shadow: var(--shadow-sm);
|
|
overflow: visible;
|
|
}
|
|
|
|
.plot-wrap {
|
|
position: static;
|
|
order: 2;
|
|
width: 100%;
|
|
height: min(66dvh, 560px);
|
|
border: 1px solid var(--border);
|
|
border-radius: 14px;
|
|
}
|
|
|
|
.plot-toolbar { top: 8px; right: 8px; }
|
|
|
|
// during the fold the dock lifts out of the flow, so the plane takes the
|
|
// width back at once rather than after the slide
|
|
.calc-dock-leave-active { position: absolute; left: 0; right: 0; }
|
|
}
|
|
|
|
// ---------- Laid on a page of the book (ToolPane) ----------
|
|
// A pane of the book is a full surface again, at any screen width: the plane
|
|
// fills the page and the input dock pins to its edge as on the desktop, and
|
|
// the fold above — panels of the plain /calculator page — does not reach
|
|
// into the pane.
|
|
|
|
.pane-stage .calc-stage {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: block;
|
|
background: var(--bg);
|
|
}
|
|
|
|
.pane-stage .plot-wrap {
|
|
position: absolute;
|
|
width: auto;
|
|
height: auto;
|
|
border: 0;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.pane-stage .calc-dock {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: clamp(260px, 24vw, 320px);
|
|
margin: 0;
|
|
border: 0;
|
|
border-right: 1px solid var(--border);
|
|
border-radius: 0;
|
|
background: color-mix(in srgb, var(--bg-elev) 92%, transparent);
|
|
backdrop-filter: blur(12px);
|
|
box-shadow: var(--shadow-lg);
|
|
overflow-y: auto;
|
|
}
|