mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-11-13 07:40:59 +00:00
Maurice
9fc98b5d49
The update dialog now shows the 5.0.0 headliners, Tours, TREK Studio, the assistant and help on every screen in 27 languages, each with a drawing of its own, translated into every language TREK ships. The 4.3.3 cards and their drawings are gone.
583 lines
11 KiB
CSS
583 lines
11 KiB
CSS
/*
|
|
* The pictures on the release cards (ReleaseNoticeVisuals.tsx). They sit on the
|
|
* release half, which is dark in both themes, so they draw in their own colours
|
|
* rather than the surface tokens, like the panel around them.
|
|
*/
|
|
|
|
/* ── The card pictures ─────────────────────────────────────────────────── */
|
|
|
|
.rn-vis {
|
|
position: absolute;
|
|
inset: 0;
|
|
color: #f5f5f7;
|
|
font-family: var(--font-system);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.rn-vis-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: oklch(1 0 0 / 0.55);
|
|
}
|
|
|
|
@keyframes rn-draw {
|
|
to {
|
|
stroke-dashoffset: 0;
|
|
}
|
|
}
|
|
@keyframes rn-pop {
|
|
from {
|
|
opacity: 0;
|
|
transform: scale(0.2);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: none;
|
|
}
|
|
}
|
|
@keyframes rn-rise {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(4px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: none;
|
|
}
|
|
}
|
|
@keyframes rn-typing {
|
|
0%,
|
|
60%,
|
|
100% {
|
|
opacity: 0.35;
|
|
transform: none;
|
|
}
|
|
30% {
|
|
opacity: 1;
|
|
transform: translateY(-2px);
|
|
}
|
|
}
|
|
@keyframes rn-ring {
|
|
0% {
|
|
box-shadow: 0 0 0 0 oklch(0.72 0.19 150 / 0.55);
|
|
}
|
|
70%,
|
|
100% {
|
|
box-shadow: 0 0 0 9px oklch(0.72 0.19 150 / 0);
|
|
}
|
|
}
|
|
@keyframes rn-marquee {
|
|
from {
|
|
transform: translateX(0);
|
|
}
|
|
to {
|
|
transform: translateX(-50%);
|
|
}
|
|
}
|
|
@keyframes rn-sticker {
|
|
from {
|
|
opacity: 0;
|
|
transform: scale(0.2) rotate(-50deg);
|
|
}
|
|
70% {
|
|
opacity: 1;
|
|
transform: scale(1.12) rotate(12deg);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: rotate(8deg);
|
|
}
|
|
}
|
|
|
|
/* Tours: a trail climbing to the summit at dusk, and the kinds of tour along the foot. */
|
|
.rn-vis-tours {
|
|
background: linear-gradient(180deg, #24304f 0%, #3c4a6b 46%, #c9876a 100%);
|
|
}
|
|
|
|
.rn-vis-tours-scene {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.rn-vis-tours-sun {
|
|
fill: #fde68a;
|
|
filter: drop-shadow(0 0 6px oklch(0.92 0.12 90 / 0.7));
|
|
}
|
|
|
|
.rn-vis-tours-far {
|
|
fill: #56668a;
|
|
opacity: 0.75;
|
|
}
|
|
|
|
.rn-vis-tours-mountain {
|
|
fill: #23344a;
|
|
}
|
|
|
|
.rn-vis-tours-snow {
|
|
fill: #e8f0f8;
|
|
}
|
|
|
|
.rn-vis-tours-meadow {
|
|
fill: #14202d;
|
|
}
|
|
|
|
.rn-vis-tours-trail {
|
|
fill: none;
|
|
stroke: #fbbf24;
|
|
stroke-width: 2;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
stroke-dasharray: 1;
|
|
stroke-dashoffset: 1;
|
|
filter: drop-shadow(0 0 2px oklch(0.85 0.16 80 / 0.6));
|
|
animation: rn-draw 1.3s ease-in-out 0.3s both;
|
|
}
|
|
|
|
.rn-vis-tours-walker {
|
|
fill: #ffffff;
|
|
filter: drop-shadow(0 0 3px #ffffff);
|
|
opacity: 0;
|
|
animation: rn-show 0.2s linear 1.6s both;
|
|
}
|
|
|
|
@keyframes rn-show {
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.rn-vis-tours-flag {
|
|
transform-box: fill-box;
|
|
transform-origin: 0% 100%;
|
|
animation: rn-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 1.5s both;
|
|
}
|
|
|
|
.rn-vis-tours-flag line {
|
|
stroke: #f5f5f7;
|
|
stroke-width: 1.2;
|
|
}
|
|
|
|
.rn-vis-tours-flag path {
|
|
fill: #ef4444;
|
|
}
|
|
|
|
.rn-vis-tours-climb {
|
|
position: absolute;
|
|
top: 8px;
|
|
inset-inline-start: 9px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 3px;
|
|
padding: 2px 7px;
|
|
border-radius: 99px;
|
|
background: oklch(1 0 0 / 0.14);
|
|
border: 1px solid oklch(1 0 0 / 0.18);
|
|
backdrop-filter: blur(6px);
|
|
font-size: 9px;
|
|
font-weight: 700;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.rn-vis-tours-kinds {
|
|
position: absolute;
|
|
inset-inline: 0;
|
|
bottom: 7px;
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 5px;
|
|
}
|
|
|
|
.rn-vis-tours-kind {
|
|
display: grid;
|
|
place-items: center;
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 50%;
|
|
background: oklch(1 0 0 / 0.12);
|
|
border: 1px solid oklch(1 0 0 / 0.2);
|
|
backdrop-filter: blur(6px);
|
|
animation: rn-rise 0.3s ease both;
|
|
}
|
|
|
|
/* TREK Studio: an open book, a polaroid taped in, a title, a stamp and a sticker. */
|
|
.rn-vis-studio {
|
|
background:
|
|
radial-gradient(120% 90% at 50% 115%, oklch(0.62 0.14 45 / 0.38) 0%, transparent 60%),
|
|
linear-gradient(165deg, #23201c 0%, #171513 100%);
|
|
}
|
|
|
|
.rn-vis-book {
|
|
position: absolute;
|
|
inset: 13px 20px 13px;
|
|
display: flex;
|
|
border-radius: 3px;
|
|
overflow: hidden;
|
|
transform: perspective(520px) rotateX(16deg);
|
|
box-shadow:
|
|
0 16px 22px -10px oklch(0 0 0 / 0.75),
|
|
0 0 0 1px oklch(1 0 0 / 0.08);
|
|
}
|
|
|
|
.rn-vis-page {
|
|
position: relative;
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
.rn-vis-page-start {
|
|
background: #ede2c9;
|
|
}
|
|
|
|
.rn-vis-page-end {
|
|
background: #f6eedc;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
padding: 11px 9px 0;
|
|
}
|
|
|
|
.rn-vis-gutter {
|
|
position: absolute;
|
|
inset-block: 0;
|
|
inset-inline-start: 50%;
|
|
width: 16px;
|
|
margin-inline-start: -8px;
|
|
background: linear-gradient(90deg, transparent, oklch(0 0 0 / 0.2), transparent);
|
|
}
|
|
|
|
.rn-vis-polaroid {
|
|
position: absolute;
|
|
top: 11px;
|
|
inset-inline-start: 10px;
|
|
width: 58%;
|
|
padding: 3px 3px 9px;
|
|
background: #ffffff;
|
|
transform: rotate(-6deg);
|
|
box-shadow: 0 3px 6px oklch(0 0 0 / 0.25);
|
|
}
|
|
|
|
.rn-vis-polaroid svg {
|
|
display: block;
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
.rn-vis-sky {
|
|
fill: #fcd5b0;
|
|
}
|
|
.rn-vis-sun {
|
|
fill: #fb923c;
|
|
}
|
|
.rn-vis-peak-far {
|
|
fill: #7c8aa0;
|
|
}
|
|
.rn-vis-peak-near {
|
|
fill: #334155;
|
|
}
|
|
|
|
.rn-vis-tape {
|
|
position: absolute;
|
|
top: 7px;
|
|
inset-inline-start: 30%;
|
|
width: 24px;
|
|
height: 7px;
|
|
transform: rotate(-24deg);
|
|
background: repeating-linear-gradient(45deg, #f43f5e 0 3px, #fecdd3 3px 6px);
|
|
opacity: 0.88;
|
|
}
|
|
|
|
.rn-vis-book-title {
|
|
font-family: Georgia, 'Times New Roman', serif;
|
|
font-style: italic;
|
|
font-weight: 700;
|
|
font-size: 13px;
|
|
line-height: 1;
|
|
color: #1f3d2b;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.rn-vis-book-line {
|
|
height: 3px;
|
|
width: 88%;
|
|
border-radius: 2px;
|
|
background: oklch(0.4 0.03 60 / 0.3);
|
|
}
|
|
.rn-vis-book-line-short {
|
|
width: 58%;
|
|
}
|
|
|
|
.rn-vis-stamp {
|
|
position: absolute;
|
|
bottom: 9px;
|
|
inset-inline-end: 9px;
|
|
display: grid;
|
|
place-items: center;
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: 50%;
|
|
border: 1.5px dashed #b45309;
|
|
color: #b45309;
|
|
transform: rotate(-14deg);
|
|
opacity: 0.85;
|
|
}
|
|
|
|
.rn-vis-sticker {
|
|
position: absolute;
|
|
bottom: 7px;
|
|
inset-inline-start: 14px;
|
|
display: grid;
|
|
place-items: center;
|
|
width: 26px;
|
|
height: 26px;
|
|
border-radius: 50%;
|
|
background: #facc15;
|
|
color: #fff8db;
|
|
box-shadow:
|
|
0 0 0 2px #ffffff,
|
|
0 4px 10px oklch(0 0 0 / 0.4);
|
|
animation: rn-sticker 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 1s both;
|
|
}
|
|
|
|
.rn-vis-sticker svg {
|
|
fill: currentColor;
|
|
}
|
|
|
|
/* The assistant: a day in Porto proposed stop by stop, and the button that applies it. */
|
|
.rn-vis-assist {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
padding: 9px 10px;
|
|
background:
|
|
radial-gradient(110% 80% at 0% 0%, oklch(0.55 0.2 290 / 0.36) 0%, transparent 62%),
|
|
linear-gradient(165deg, #1d1b29 0%, #141320 100%);
|
|
}
|
|
|
|
.rn-vis-assist-head {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.rn-vis-assist-avatar {
|
|
display: grid;
|
|
place-items: center;
|
|
width: 19px;
|
|
height: 19px;
|
|
border-radius: 50%;
|
|
background: linear-gradient(135deg, #a78bfa 0%, #3b82f6 100%);
|
|
color: #ffffff;
|
|
box-shadow: 0 2px 8px oklch(0.55 0.2 290 / 0.6);
|
|
}
|
|
|
|
.rn-vis-assist-typing {
|
|
display: flex;
|
|
gap: 3px;
|
|
padding: 5px 7px;
|
|
border-radius: 99px;
|
|
background: oklch(1 0 0 / 0.1);
|
|
}
|
|
|
|
.rn-vis-assist-typing i {
|
|
width: 4px;
|
|
height: 4px;
|
|
border-radius: 50%;
|
|
background: #f5f5f7;
|
|
animation: rn-typing 1.2s ease-in-out infinite;
|
|
}
|
|
|
|
.rn-vis-assist-typing i:nth-child(2) {
|
|
animation-delay: 0.15s;
|
|
}
|
|
.rn-vis-assist-typing i:nth-child(3) {
|
|
animation-delay: 0.3s;
|
|
}
|
|
|
|
.rn-vis-assist-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 3px;
|
|
padding: 5px 8px;
|
|
border-radius: 9px;
|
|
background: oklch(1 0 0 / 0.08);
|
|
border: 1px solid oklch(1 0 0 / 0.14);
|
|
box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.12);
|
|
}
|
|
|
|
.rn-vis-assist-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
min-width: 0;
|
|
font-size: 9.5px;
|
|
line-height: 1.35;
|
|
animation: rn-rise 0.34s ease both;
|
|
}
|
|
|
|
.rn-vis-assist-time {
|
|
flex: none;
|
|
width: 27px;
|
|
color: oklch(1 0 0 / 0.5);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.rn-vis-assist-dot {
|
|
flex: none;
|
|
width: 7px;
|
|
height: 7px;
|
|
border-radius: 50%;
|
|
}
|
|
.rn-vis-assist-dot-sight {
|
|
background: #f59e0b;
|
|
}
|
|
.rn-vis-assist-dot-culture {
|
|
background: #a78bfa;
|
|
}
|
|
.rn-vis-assist-dot-view {
|
|
background: #34d399;
|
|
}
|
|
.rn-vis-assist-name {
|
|
font-weight: 600;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.rn-vis-assist-apply {
|
|
position: absolute;
|
|
top: 8px;
|
|
inset-inline-end: 9px;
|
|
display: grid;
|
|
place-items: center;
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 50%;
|
|
background: #22c55e;
|
|
color: #ffffff;
|
|
animation:
|
|
rn-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) 1.7s both,
|
|
rn-ring 2.2s ease-out 2s infinite;
|
|
}
|
|
|
|
/* Help on every screen: the help button, and hello in TREK's languages drifting past it. */
|
|
.rn-vis-help {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 0 12px;
|
|
background:
|
|
radial-gradient(70% 120% at 10% 50%, oklch(0.6 0.16 250 / 0.34) 0%, transparent 70%),
|
|
linear-gradient(165deg, #1a1f2b 0%, #12151d 100%);
|
|
}
|
|
|
|
.rn-vis-help-q {
|
|
position: relative;
|
|
flex: none;
|
|
display: grid;
|
|
place-items: center;
|
|
width: 42px;
|
|
height: 42px;
|
|
border-radius: 50%;
|
|
background: #f5f5f7;
|
|
color: #101013;
|
|
font-size: 24px;
|
|
font-weight: 800;
|
|
box-shadow:
|
|
0 0 0 5px oklch(1 0 0 / 0.08),
|
|
0 6px 16px oklch(0 0 0 / 0.5);
|
|
}
|
|
|
|
.rn-vis-help-count {
|
|
position: absolute;
|
|
top: 12px;
|
|
inset-inline-start: 42px;
|
|
padding: 1px 6px;
|
|
border-radius: 99px;
|
|
background: #3b82f6;
|
|
color: #ffffff;
|
|
font-size: 9.5px;
|
|
font-weight: 800;
|
|
font-variant-numeric: tabular-nums;
|
|
box-shadow: 0 0 0 2px #12151d;
|
|
}
|
|
|
|
/* The rows slide the same way in every language: they are a picture, not text. */
|
|
.rn-vis-help-langs {
|
|
flex: 1;
|
|
min-width: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
overflow: hidden;
|
|
direction: ltr;
|
|
-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
|
|
mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
|
|
}
|
|
|
|
.rn-vis-hello-row {
|
|
display: flex;
|
|
width: max-content;
|
|
animation: rn-marquee 34s linear infinite;
|
|
}
|
|
.rn-vis-hello-row-reverse {
|
|
animation-direction: reverse;
|
|
animation-duration: 40s;
|
|
}
|
|
|
|
.rn-vis-hello {
|
|
flex: none;
|
|
margin-inline-end: 5px;
|
|
padding: 3px 8px;
|
|
border-radius: 99px;
|
|
background: oklch(1 0 0 / 0.09);
|
|
border: 1px solid oklch(1 0 0 / 0.13);
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.rn-vis-tours-trail,
|
|
.rn-vis-tours-flag,
|
|
.rn-vis-tours-kind,
|
|
.rn-vis-sticker,
|
|
.rn-vis-assist-typing i,
|
|
.rn-vis-assist-row,
|
|
.rn-vis-assist-apply,
|
|
.rn-vis-hello-row {
|
|
animation: none;
|
|
}
|
|
.rn-vis-tours-trail {
|
|
stroke-dashoffset: 0;
|
|
}
|
|
.rn-vis-tours-walker {
|
|
display: none;
|
|
}
|
|
.rn-vis-sticker {
|
|
transform: rotate(8deg);
|
|
}
|
|
}
|
|
|
|
[data-reduce-motion='true'] .rn-vis-tours-trail,
|
|
[data-reduce-motion='true'] .rn-vis-tours-flag,
|
|
[data-reduce-motion='true'] .rn-vis-tours-kind,
|
|
[data-reduce-motion='true'] .rn-vis-sticker,
|
|
[data-reduce-motion='true'] .rn-vis-assist-typing i,
|
|
[data-reduce-motion='true'] .rn-vis-assist-row,
|
|
[data-reduce-motion='true'] .rn-vis-assist-apply,
|
|
[data-reduce-motion='true'] .rn-vis-hello-row {
|
|
animation: none;
|
|
}
|
|
|
|
[data-reduce-motion='true'] .rn-vis-tours-trail {
|
|
stroke-dashoffset: 0;
|
|
}
|
|
|
|
[data-reduce-motion='true'] .rn-vis-tours-walker {
|
|
display: none;
|
|
}
|
|
|
|
[data-reduce-motion='true'] .rn-vis-sticker {
|
|
transform: rotate(8deg);
|
|
}
|