mirror of
https://github.com/Sendouc/sendou.ink.git
synced 2026-10-01 07:37:55 -05:00
Move app to apps/web-react in pnpm workspace layout
This commit is contained in:
Kalle
659
apps/web-react/app/styles/common.css
Normal file
659
apps/web-react/app/styles/common.css
Normal file
@@ -0,0 +1,659 @@
|
||||
/** biome-ignore-all lint/style/noDescendingSpecificity: Biome v2 migration */
|
||||
@layer base {
|
||||
* {
|
||||
margin: 0;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
html {
|
||||
color-scheme: light dark;
|
||||
accent-color: var(--color-text-accent);
|
||||
scroll-padding-top: var(--layout-sticky-top);
|
||||
}
|
||||
|
||||
body {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
line-height: var(--line-height);
|
||||
overflow-x: hidden;
|
||||
color: var(--color-text);
|
||||
background-color: var(--color-bg);
|
||||
font-family: lexend, sans-serif;
|
||||
|
||||
-moz-osx-font-smoothing: antialiased;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-webkit-tab-highlight-color: transparent;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
p {
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
text-wrap: balance;
|
||||
}
|
||||
p {
|
||||
text-wrap: pretty;
|
||||
}
|
||||
|
||||
img,
|
||||
svg,
|
||||
canvas,
|
||||
video,
|
||||
audio,
|
||||
iframe,
|
||||
embed,
|
||||
object {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
input,
|
||||
button,
|
||||
textarea,
|
||||
select {
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
details {
|
||||
& summary {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--color-text-accent);
|
||||
text-decoration: none;
|
||||
border-radius: var(--radius-field);
|
||||
|
||||
&:focus-visible {
|
||||
outline: var(--focus-ring);
|
||||
outline-offset: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
/* :not([name="text"]) workaround not to select textarea on map planner */
|
||||
textarea:not([name="text"]) {
|
||||
width: 100%;
|
||||
min-height: 8rem;
|
||||
padding: var(--field-padding);
|
||||
border: var(--border-style);
|
||||
border-radius: var(--radius-field);
|
||||
background-color: var(--color-bg);
|
||||
font-size: var(--font-sm);
|
||||
outline: none;
|
||||
resize: both;
|
||||
|
||||
&:focus-within {
|
||||
outline: var(--focus-ring);
|
||||
outline-offset: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
border: var(--border-style);
|
||||
border-radius: var(--radius-field);
|
||||
background-color: var(--color-bg);
|
||||
height: var(--field-size);
|
||||
font-size: var(--font-sm);
|
||||
outline: none;
|
||||
|
||||
&:focus-within {
|
||||
outline: var(--focus-ring);
|
||||
outline-offset: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.in-container {
|
||||
width: 100%;
|
||||
padding: 0 var(--field-padding);
|
||||
border: none;
|
||||
background: transparent;
|
||||
margin: auto 0;
|
||||
outline: none;
|
||||
|
||||
&:-webkit-autofill,
|
||||
&:-webkit-autofill:hover,
|
||||
&:-webkit-autofill:focus {
|
||||
-webkit-text-fill-color: var(--color-text);
|
||||
-webkit-background-clip: text;
|
||||
caret-color: var(--color-text);
|
||||
}
|
||||
}
|
||||
|
||||
.input-addon {
|
||||
--addon-radius: calc(var(--radius-field) - 2px);
|
||||
display: grid;
|
||||
border-radius: var(--addon-radius) 0 0 var(--addon-radius);
|
||||
background-color: var(--color-bg-high);
|
||||
color: var(--color-text-high);
|
||||
font-size: var(--font-sm);
|
||||
padding-inline: var(--field-padding);
|
||||
place-items: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
input:not(.in-container) {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
border: var(--border-style);
|
||||
border-radius: var(--radius-field);
|
||||
background: var(--color-bg);
|
||||
padding: 0 var(--field-padding);
|
||||
height: var(--field-size);
|
||||
font-size: var(--font-sm);
|
||||
outline: none;
|
||||
|
||||
&:-webkit-autofill,
|
||||
&:-webkit-autofill:hover,
|
||||
&:-webkit-autofill:focus {
|
||||
-webkit-text-fill-color: var(--color-text);
|
||||
-webkit-background-clip: text;
|
||||
caret-color: var(--color-text);
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: var(--color-text-high);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
pointer-events: none;
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:focus-within:not(:read-only) {
|
||||
outline: var(--focus-ring);
|
||||
outline-offset: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
appearance: none;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
width: var(--selector-size-sm);
|
||||
height: var(--selector-size-sm);
|
||||
border-radius: calc(var(--radius-selector) / 2);
|
||||
background-color: var(--color-bg);
|
||||
border: var(--border-style);
|
||||
|
||||
&:focus-within {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: var(--focus-ring);
|
||||
outline-offset: 1px;
|
||||
}
|
||||
|
||||
&:checked,
|
||||
&:indeterminate {
|
||||
border-color: var(--color-text-accent);
|
||||
background-color: var(--color-text-accent);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: var(--field-size-icon) auto;
|
||||
}
|
||||
|
||||
&:checked {
|
||||
background-image: var(--field-icon-checkbox);
|
||||
}
|
||||
|
||||
&:indeterminate {
|
||||
background-image: var(--field-icon-minus);
|
||||
}
|
||||
|
||||
/* Hacky selector to remove the margin bottom from the container from Label.tsx */
|
||||
&:has(+ div > label) + div {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
input[type="radio"] {
|
||||
appearance: none;
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
width: var(--selector-size-sm);
|
||||
height: var(--selector-size-sm);
|
||||
background-color: var(--color-bg);
|
||||
border: var(--border-style);
|
||||
border-radius: var(--radius-full);
|
||||
padding: 0;
|
||||
|
||||
&:focus-within {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: var(--focus-ring);
|
||||
outline-offset: 1px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
border-radius: var(--radius-full);
|
||||
background-color: var(--color-bg);
|
||||
margin: auto;
|
||||
margin-top: 25%;
|
||||
}
|
||||
|
||||
&:checked {
|
||||
border-color: var(--color-text-accent);
|
||||
|
||||
&::after {
|
||||
background-color: var(--color-text-accent);
|
||||
}
|
||||
}
|
||||
|
||||
/* Hacky selector to remove the margin bottom from the container from Label.tsx */
|
||||
&:has(+ div > label) + div {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
font-size: var(--font-xs);
|
||||
font-weight: var(--weight-bold);
|
||||
margin-block-end: var(--label-margin);
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: none;
|
||||
border-radius: var(--radius-box);
|
||||
background-color: var(--color-bg-high);
|
||||
font-size: var(--font-sm);
|
||||
padding-block-end: var(--s-3);
|
||||
padding-inline: var(--s-3);
|
||||
}
|
||||
|
||||
legend {
|
||||
border-radius: var(--radius-field);
|
||||
background-color: transparent;
|
||||
font-size: var(--font-xs);
|
||||
font-weight: var(--weight-bold);
|
||||
}
|
||||
|
||||
article {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
select {
|
||||
all: unset;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
border: var(--border-style);
|
||||
border-radius: var(--radius-field);
|
||||
background-color: var(--color-bg);
|
||||
cursor: pointer;
|
||||
padding: 0 var(--field-padding);
|
||||
padding-right: calc(
|
||||
var(--field-size-icon) +
|
||||
var(--field-padding) +
|
||||
var(--s-2)
|
||||
);
|
||||
height: var(--field-size);
|
||||
font-size: var(--font-sm);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
appearance: none;
|
||||
overflow: hidden;
|
||||
|
||||
@supports (appearance: base-select) {
|
||||
appearance: base-select;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
pointer-events: none;
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:focus-within {
|
||||
outline: var(--focus-ring);
|
||||
outline-offset: 1px;
|
||||
}
|
||||
|
||||
&::picker(select) {
|
||||
@supports (appearance: base-select) {
|
||||
appearance: base-select;
|
||||
}
|
||||
|
||||
background-color: var(--color-bg);
|
||||
border: var(--border-style);
|
||||
border-radius: var(--radius-field);
|
||||
padding: var(--s-1);
|
||||
margin: 0.5rem;
|
||||
translate: -0.5rem;
|
||||
max-height: 50dvh;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--color-bg-higher) transparent;
|
||||
}
|
||||
|
||||
&::picker-icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
optgroup {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
option {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-text);
|
||||
border-radius: var(--radius-field);
|
||||
font-size: var(--font-sm);
|
||||
font-weight: var(--weight-semi);
|
||||
padding: var(--s-1-5);
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
|
||||
&[disabled] {
|
||||
color: var(--color-text-high);
|
||||
}
|
||||
|
||||
&:hover:not([disabled]) {
|
||||
background-color: var(--color-bg-high);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input[type="date"],
|
||||
input[type="datetime-local"],
|
||||
input[type="month"],
|
||||
input[type="time"],
|
||||
input[type="week"],
|
||||
select {
|
||||
background-position: center right var(--field-padding);
|
||||
background-size: var(--field-size-icon) auto;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
input[type="date"],
|
||||
input[type="datetime-local"],
|
||||
input[type="month"],
|
||||
input[type="week"] {
|
||||
background-image: var(--field-icon-date);
|
||||
}
|
||||
|
||||
input[type="time"] {
|
||||
background-image: var(--field-icon-time);
|
||||
}
|
||||
|
||||
select {
|
||||
background-image: var(--field-icon-chevron);
|
||||
}
|
||||
|
||||
[type="date"]::-webkit-calendar-picker-indicator,
|
||||
[type="datetime-local"]::-webkit-calendar-picker-indicator,
|
||||
[type="month"]::-webkit-calendar-picker-indicator,
|
||||
[type="time"]::-webkit-calendar-picker-indicator,
|
||||
[type="week"]::-webkit-calendar-picker-indicator {
|
||||
width: var(--field-size-icon);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@-moz-document url-prefix() {
|
||||
[type="date"],
|
||||
[type="datetime-local"],
|
||||
[type="month"],
|
||||
[type="time"],
|
||||
[type="week"] {
|
||||
background-image: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-document url-prefix() {
|
||||
input[type="date"],
|
||||
input[type="datetime-local"],
|
||||
input[type="month"],
|
||||
input[type="time"],
|
||||
input[type="week"] {
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
|
||||
input[type="color"] {
|
||||
padding: calc(var(--field-size) / 8) var(--field-padding);
|
||||
|
||||
&::-webkit-color-swatch {
|
||||
border: 0;
|
||||
border-radius: var(--radius-field);
|
||||
}
|
||||
|
||||
&::-moz-color-swatch {
|
||||
border: 0;
|
||||
border-radius: var(--radius-field);
|
||||
}
|
||||
}
|
||||
|
||||
input[type="file"] {
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
font-size: var(--font-sm);
|
||||
color: var(--color-text-high);
|
||||
overflow: hidden;
|
||||
|
||||
&:focus-visible {
|
||||
outline: var(--focus-ring);
|
||||
outline-offset: 1px;
|
||||
}
|
||||
|
||||
&::file-selector-button {
|
||||
height: 100%;
|
||||
border: none;
|
||||
background-color: var(--color-bg-higher);
|
||||
color: var(--color-text-high);
|
||||
white-space: nowrap;
|
||||
margin-right: var(--s-2);
|
||||
}
|
||||
}
|
||||
|
||||
input[type="range"] {
|
||||
--track-color: var(--color-bg-higher);
|
||||
--thumb-color: var(--color-text-high);
|
||||
border: none;
|
||||
padding: 0;
|
||||
appearance: none;
|
||||
background: 0 0;
|
||||
width: 100%;
|
||||
height: var(--selector-size);
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:focus-within {
|
||||
--track-color: var(--color-bg-higher);
|
||||
--thumb-color: var(--color-text-accent);
|
||||
}
|
||||
|
||||
&::-webkit-slider-runnable-track {
|
||||
width: 100%;
|
||||
height: calc(var(--selector-size) / 4);
|
||||
background-color: var(--track-color);
|
||||
border-radius: var(--radius-full);
|
||||
transition: 100ms background-color;
|
||||
}
|
||||
|
||||
&::-moz-range-track {
|
||||
width: 100%;
|
||||
height: calc(var(--selector-size) / 4);
|
||||
background-color: var(--track-color);
|
||||
border-radius: var(--radius-full);
|
||||
transition: 100ms background-color;
|
||||
}
|
||||
|
||||
&::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: var(--selector-size);
|
||||
height: var(--selector-size);
|
||||
margin-top: calc(
|
||||
(calc(var(--selector-size) / 4) - var(--selector-size)) /
|
||||
2
|
||||
);
|
||||
background-color: var(--thumb-color);
|
||||
border: 2px solid var(--color-bg);
|
||||
border-radius: var(--radius-full);
|
||||
cursor: pointer;
|
||||
transition: 100ms background-color;
|
||||
}
|
||||
|
||||
&::-moz-range-thumb {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: var(--selector-size);
|
||||
height: var(--selector-size);
|
||||
margin-top: calc(
|
||||
(calc(var(--selector-size) / 4) - var(--selector-size)) /
|
||||
2
|
||||
);
|
||||
background-color: var(--thumb-color);
|
||||
border: 2px solid var(--color-bg);
|
||||
border-radius: var(--radius-full);
|
||||
cursor: pointer;
|
||||
transition: 100ms background-color;
|
||||
}
|
||||
}
|
||||
|
||||
progress {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: var(--selector-size);
|
||||
overflow: hidden;
|
||||
border: none;
|
||||
border-radius: var(--radius-full);
|
||||
background-color: var(--color-bg-high);
|
||||
color: var(--color-text-accent);
|
||||
vertical-align: baseline;
|
||||
|
||||
&::-webkit-progress-bar {
|
||||
border-radius: var(--radius-full);
|
||||
background: 0 0;
|
||||
}
|
||||
|
||||
&::-moz-progress-bar {
|
||||
background-color: var(--color-text-accent);
|
||||
}
|
||||
|
||||
&[value]::-webkit-progress-value {
|
||||
background-color: var(--color-text-accent);
|
||||
transition: inline-size 0.2s ease;
|
||||
}
|
||||
}
|
||||
|
||||
td > input[type="checkbox"] {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
hr {
|
||||
border: 1px solid var(--color-bg-high);
|
||||
}
|
||||
|
||||
abbr {
|
||||
&:not([title]) {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&[title] {
|
||||
cursor: help;
|
||||
}
|
||||
}
|
||||
|
||||
.article {
|
||||
& > p {
|
||||
padding-block: var(--s-3);
|
||||
}
|
||||
|
||||
& img {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Hack to deal with Safari bug when the image is loading. See: https://stackoverflow.com/a/73466877 */
|
||||
@media not all and (min-resolution: 0.001dpcm) {
|
||||
img[loading="lazy"] {
|
||||
clip-path: inset(0.5px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#nprogress {
|
||||
& .bar {
|
||||
background: var(--color-text-accent) !important;
|
||||
}
|
||||
|
||||
& .spinner {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
& .peg {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Track that NProgress renders its bar into (see NPROGRESS_ANCHOR_ID). It is a
|
||||
* child of the header positioned just below the header's 1.5px bottom border, so
|
||||
* it follows the header on scroll and in standalone (PWA) mode. It spans only the
|
||||
* header width (the area between the sidebars), and its overflow: hidden clips the
|
||||
* bar — which NProgress slides in from the left — so the bar can never extend over
|
||||
* a sidebar. Unlayered + id selector so it beats NProgress's own unlayered
|
||||
* .nprogress-custom-parent rules (and the @layer-wrapped CSS modules). */
|
||||
#nprogress-anchor {
|
||||
position: absolute;
|
||||
top: calc(100% + 1.5px);
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 2.5px;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.nprogress-custom-parent #nprogress .bar {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.top-leaderboard {
|
||||
min-height: 100px;
|
||||
max-height: 100px;
|
||||
overflow-y: clip;
|
||||
margin-top: 10px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 599px) {
|
||||
body:not(:has(.planner)) .publift-widget-sticky_footer-container {
|
||||
bottom: calc(
|
||||
var(--layout-nav-height) +
|
||||
env(safe-area-inset-bottom)
|
||||
) !important;
|
||||
}
|
||||
}
|
||||
1018
apps/web-react/app/styles/flags.css
Normal file
1018
apps/web-react/app/styles/flags.css
Normal file
File diff suppressed because it is too large
Load Diff
32
apps/web-react/app/styles/fonts.css
Normal file
32
apps/web-react/app/styles/fonts.css
Normal file
@@ -0,0 +1,32 @@
|
||||
/*
|
||||
Lexend variable font, self-hosted. The weight range is capped at 700 to match
|
||||
`--weight-extra`, so `font-weight: bolder` keeps clamping there as it did when
|
||||
the four static weights were requested from Google Fonts.
|
||||
|
||||
The vietnamese subset is intentionally omitted: no locale uses it.
|
||||
*/
|
||||
|
||||
@font-face {
|
||||
font-family: "Lexend";
|
||||
font-style: normal;
|
||||
font-weight: 400 700;
|
||||
font-display: swap;
|
||||
src: url("./fonts/lexend-latin.woff2") format("woff2");
|
||||
unicode-range:
|
||||
U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
|
||||
U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
|
||||
U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Lexend";
|
||||
font-style: normal;
|
||||
font-weight: 400 700;
|
||||
font-display: swap;
|
||||
src: url("./fonts/lexend-latin-ext.woff2") format("woff2");
|
||||
unicode-range:
|
||||
U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
|
||||
U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
|
||||
U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
|
||||
U+A720-A7FF;
|
||||
}
|
||||
BIN
apps/web-react/app/styles/fonts/lexend-latin-ext.woff2
Normal file
BIN
apps/web-react/app/styles/fonts/lexend-latin-ext.woff2
Normal file
Binary file not shown.
BIN
apps/web-react/app/styles/fonts/lexend-latin.woff2
Normal file
BIN
apps/web-react/app/styles/fonts/lexend-latin.woff2
Normal file
Binary file not shown.
378
apps/web-react/app/styles/front.module.css
Normal file
378
apps/web-react/app/styles/front.module.css
Normal file
@@ -0,0 +1,378 @@
|
||||
.frontPageContainer {
|
||||
--card-width: 225px;
|
||||
--card-height: 93px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--s-10);
|
||||
}
|
||||
|
||||
.changeLogImg {
|
||||
max-height: 300px;
|
||||
border-radius: var(--radius-field);
|
||||
}
|
||||
|
||||
.changeLogIconButton {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: var(--s-1-5);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-weight: var(--weight-bold);
|
||||
font-size: var(--font-xs);
|
||||
border-radius: 100%;
|
||||
color: var(--color-text-high);
|
||||
|
||||
&:hover {
|
||||
color: var(--color-text-accent);
|
||||
}
|
||||
}
|
||||
|
||||
.externalLinkIcon {
|
||||
width: 18px;
|
||||
stroke-width: 2px;
|
||||
}
|
||||
|
||||
@property --l {
|
||||
syntax: "<percentage>";
|
||||
inherits: false;
|
||||
initial-value: 50%;
|
||||
}
|
||||
|
||||
.seasonBanner {
|
||||
/* needed for firefox to have a valid output */
|
||||
--l: 50%;
|
||||
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
var(--color-bg-higher),
|
||||
var(--l),
|
||||
var(--color-bg)
|
||||
);
|
||||
border-radius: var(--radius-box);
|
||||
padding: var(--s-2) var(--s-3);
|
||||
line-height: 1.35;
|
||||
position: relative;
|
||||
color: var(--color-text);
|
||||
border: var(--border-style-high);
|
||||
transition: --l 0.2s ease-out;
|
||||
margin-block-start: var(--s-6);
|
||||
|
||||
&:hover {
|
||||
--l: 75%;
|
||||
}
|
||||
}
|
||||
|
||||
.seasonBannerHeader {
|
||||
font-size: var(--font-xl);
|
||||
font-weight: var(--weight-bold);
|
||||
}
|
||||
|
||||
.seasonBannerDates {
|
||||
font-size: var(--font-xs);
|
||||
font-weight: var(--weight-semi);
|
||||
}
|
||||
|
||||
.seasonBannerImg {
|
||||
position: absolute;
|
||||
width: 109px;
|
||||
right: -5px;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.seasonBannerLink {
|
||||
background-color: var(--color-bg-higher);
|
||||
border-radius: var(--radius-field);
|
||||
width: max-content;
|
||||
height: var(--field-size-sm);
|
||||
padding: 0 var(--s-1-5);
|
||||
font-size: var(--font-xs);
|
||||
color: var(--color-text);
|
||||
display: flex;
|
||||
gap: var(--s-2);
|
||||
align-items: center;
|
||||
|
||||
& svg {
|
||||
width: 24px;
|
||||
transition: all 0.2s ease-out;
|
||||
}
|
||||
|
||||
&:hover svg {
|
||||
translate: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.seasonBannerMobileOnly {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--s-1);
|
||||
}
|
||||
|
||||
.seasonCardDesktopOnly {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
gap: var(--s-2);
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 750px) {
|
||||
.seasonBannerMobileOnly {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.seasonCardDesktopOnly {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.tournamentCards {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: var(--s-2);
|
||||
}
|
||||
|
||||
.tournamentCardsSpacer {
|
||||
display: flex;
|
||||
gap: var(--s-2);
|
||||
height: 100%;
|
||||
padding-block-start: 6px;
|
||||
padding-inline-start: 6px;
|
||||
margin-block-start: -6px;
|
||||
margin-inline-start: -6px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.tournamentCardsViewAllCard {
|
||||
background-color: var(--color-bg-higher);
|
||||
height: var(--card-height);
|
||||
border-radius: var(--radius-box);
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: var(--s-2);
|
||||
font-size: var(--font-2xs);
|
||||
font-weight: var(--weight-bold);
|
||||
text-align: center;
|
||||
color: var(--color-text);
|
||||
transition: background-color 0.2s ease-out;
|
||||
min-width: 90px;
|
||||
max-width: 90px;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-bg-high);
|
||||
}
|
||||
}
|
||||
|
||||
.resultHighlights {
|
||||
display: flex;
|
||||
gap: var(--s-2);
|
||||
padding: var(--s-2);
|
||||
|
||||
& > div {
|
||||
flex: 3 1 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
& > .seasonCardDesktopOnly {
|
||||
flex: 2 1 0;
|
||||
}
|
||||
}
|
||||
|
||||
.resultHighlightsTop {
|
||||
--card-width: 100%;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.resultHighlightsTitle {
|
||||
font-size: var(--font-xs);
|
||||
}
|
||||
|
||||
.resultHighlightsTitleTournaments {
|
||||
align-self: flex-start;
|
||||
margin-inline-start: 65px;
|
||||
}
|
||||
|
||||
.seasonCard {
|
||||
--l: 50%;
|
||||
|
||||
min-width: var(--card-width);
|
||||
max-width: var(--card-width);
|
||||
flex: 1;
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
var(--color-bg-higher),
|
||||
var(--l),
|
||||
var(--color-bg)
|
||||
);
|
||||
border-radius: var(--radius-box);
|
||||
border: var(--border-style-high);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: var(--s-2);
|
||||
position: relative;
|
||||
color: var(--color-text);
|
||||
overflow: hidden;
|
||||
transition: --l 0.2s ease-out;
|
||||
|
||||
&:hover {
|
||||
--l: 75%;
|
||||
}
|
||||
}
|
||||
|
||||
.seasonCardHeader {
|
||||
font-size: var(--font-lg);
|
||||
font-weight: var(--weight-bold);
|
||||
padding-block-start: var(--s-2);
|
||||
}
|
||||
|
||||
.seasonCardDates {
|
||||
font-size: var(--font-xs);
|
||||
font-weight: var(--weight-semi);
|
||||
color: var(--color-text-lighter);
|
||||
}
|
||||
|
||||
.seasonCardImg {
|
||||
position: absolute;
|
||||
width: 175px;
|
||||
bottom: 0;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
.seasonCardButton {
|
||||
font-size: var(--font-2xs);
|
||||
color: var(--color-text);
|
||||
background-color: var(--color-bg-higher);
|
||||
border-radius: var(--radius-selector);
|
||||
width: max-content;
|
||||
height: var(--selector-size);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--s-1);
|
||||
padding: var(--s-0-5) var(--s-1-5);
|
||||
}
|
||||
|
||||
.leaderboard {
|
||||
width: 100%;
|
||||
min-width: 14rem;
|
||||
max-width: var(--card-width);
|
||||
background-color: var(--color-bg-higher);
|
||||
border-radius: var(--radius-box);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--s-2);
|
||||
padding: var(--s-2);
|
||||
}
|
||||
|
||||
.leaderboardName {
|
||||
font-size: var(--font-sm);
|
||||
font-weight: var(--weight-bold);
|
||||
white-space: nowrap;
|
||||
max-width: 140px;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.leaderboardViewAll {
|
||||
font-size: var(--font-2xs);
|
||||
color: var(--color-text);
|
||||
background-color: var(--color-bg-higher);
|
||||
border-radius: var(--radius-selector);
|
||||
width: max-content;
|
||||
height: var(--selector-size);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--s-1);
|
||||
padding: var(--s-0-5) var(--s-1-5);
|
||||
}
|
||||
|
||||
.welcomeBanner {
|
||||
background-color: var(--color-bg-higher);
|
||||
color: var(--color-text);
|
||||
border-radius: var(--radius-box);
|
||||
padding: var(--s-2);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
gap: var(--s-2);
|
||||
flex-wrap: wrap;
|
||||
font-size: var(--font-sm);
|
||||
font-weight: var(--weight-semi);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-bg-high);
|
||||
}
|
||||
|
||||
& svg {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.lutiBanner {
|
||||
background-color: #4874a0;
|
||||
color: #fff;
|
||||
border-radius: var(--radius-box);
|
||||
padding: var(--s-2);
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
gap: var(--s-2);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.weaponPills {
|
||||
display: flex;
|
||||
gap: var(--s-2);
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.weaponPill {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: var(--color-bg-higher);
|
||||
border-radius: var(--radius-full);
|
||||
padding: var(--s-1);
|
||||
transition: background-color 0.15s ease-out;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-bg-high);
|
||||
}
|
||||
}
|
||||
|
||||
.discoverGrid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: var(--s-3);
|
||||
padding: var(--s-2);
|
||||
}
|
||||
|
||||
@media (min-width: 600px) {
|
||||
.discoverGrid {
|
||||
grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
.discoverGridItemImage {
|
||||
width: var(--field-size-lg);
|
||||
aspect-ratio: 1 / 1;
|
||||
border-radius: var(--radius-field);
|
||||
background-color: var(--color-bg-higher);
|
||||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
.discoverGridItem {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: var(--s-1);
|
||||
text-decoration: none;
|
||||
color: var(--color-text);
|
||||
font-size: var(--font-xs);
|
||||
font-weight: var(--weight-semi);
|
||||
text-align: center;
|
||||
|
||||
&:hover .discoverGridItemImage {
|
||||
background-color: var(--color-bg-high);
|
||||
}
|
||||
}
|
||||
217
apps/web-react/app/styles/normalize.css
vendored
Normal file
217
apps/web-react/app/styles/normalize.css
vendored
Normal file
@@ -0,0 +1,217 @@
|
||||
@layer reset {
|
||||
/*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */
|
||||
|
||||
/*
|
||||
Document
|
||||
========
|
||||
*/
|
||||
|
||||
/**
|
||||
Use a better box model (opinionated).
|
||||
*/
|
||||
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/**
|
||||
1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
|
||||
2. Correct the line height in all browsers.
|
||||
3. Prevent adjustments of font size after orientation changes in iOS.
|
||||
4. Use a more readable tab size (opinionated).
|
||||
*/
|
||||
|
||||
html {
|
||||
font-family:
|
||||
system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
|
||||
"Apple Color Emoji", "Segoe UI Emoji"; /* 1 */
|
||||
line-height: 1.15; /* 2 */
|
||||
-webkit-text-size-adjust: 100%; /* 3 */
|
||||
tab-size: 4; /* 4 */
|
||||
}
|
||||
|
||||
/*
|
||||
Sections
|
||||
========
|
||||
*/
|
||||
|
||||
/**
|
||||
Remove the margin in all browsers.
|
||||
*/
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
Text-level semantics
|
||||
====================
|
||||
*/
|
||||
|
||||
/**
|
||||
Add the correct font weight in Chrome and Safari.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
/**
|
||||
1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
|
||||
2. Correct the odd 'em' font sizing in all browsers.
|
||||
*/
|
||||
|
||||
code,
|
||||
kbd,
|
||||
samp,
|
||||
pre {
|
||||
font-family:
|
||||
ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo,
|
||||
monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
Add the correct font size in all browsers.
|
||||
*/
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/**
|
||||
Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
|
||||
*/
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
/*
|
||||
Tabular data
|
||||
============
|
||||
*/
|
||||
|
||||
/**
|
||||
Correct table border color inheritance in Chrome and Safari. (https://issues.chromium.org/issues/40615503, https://bugs.webkit.org/show_bug.cgi?id=195016)
|
||||
*/
|
||||
|
||||
table {
|
||||
border-color: currentcolor;
|
||||
}
|
||||
|
||||
/*
|
||||
Forms
|
||||
=====
|
||||
*/
|
||||
|
||||
/**
|
||||
1. Change the font styles in all browsers.
|
||||
2. Remove the margin in Firefox and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit; /* 1 */
|
||||
font-size: 100%; /* 1 */
|
||||
line-height: 1.15; /* 1 */
|
||||
margin: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
Correct the inability to style clickable types in iOS and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
[type="button"],
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
appearance: button;
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
/**
|
||||
Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
|
||||
*/
|
||||
|
||||
legend {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
Add the correct vertical alignment in Chrome and Firefox.
|
||||
*/
|
||||
|
||||
progress {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/**
|
||||
Correct the cursor style of increment and decrement buttons in Safari.
|
||||
*/
|
||||
|
||||
::-webkit-inner-spin-button,
|
||||
::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
1. Correct the odd appearance in Chrome and Safari.
|
||||
2. Correct the outline style in Safari.
|
||||
*/
|
||||
|
||||
[type="search"] {
|
||||
appearance: textfield; /* 1 */
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
outline-offset: -2px; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
Remove the inner padding in Chrome and Safari on macOS.
|
||||
*/
|
||||
|
||||
::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/**
|
||||
1. Correct the inability to style clickable types in iOS and Safari.
|
||||
2. Change font properties to 'inherit' in Safari.
|
||||
*/
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button; /* 1 */
|
||||
font: inherit; /* 2 */
|
||||
}
|
||||
|
||||
/*
|
||||
Interactive
|
||||
===========
|
||||
*/
|
||||
|
||||
/*
|
||||
Add the correct display in Chrome and Safari.
|
||||
*/
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
}
|
||||
}
|
||||
537
apps/web-react/app/styles/utils.css
Normal file
537
apps/web-react/app/styles/utils.css
Normal file
@@ -0,0 +1,537 @@
|
||||
@layer utilities {
|
||||
.text-xl {
|
||||
font-size: var(--font-xl);
|
||||
}
|
||||
|
||||
.text-lg {
|
||||
font-size: var(--font-lg);
|
||||
}
|
||||
|
||||
.text-sm {
|
||||
font-size: var(--font-sm);
|
||||
}
|
||||
|
||||
.text-md {
|
||||
font-size: var(--font-md);
|
||||
}
|
||||
|
||||
.text-xs {
|
||||
font-size: var(--font-xs);
|
||||
}
|
||||
|
||||
.text-xxs {
|
||||
font-size: var(--font-2xs);
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.text-main-forced {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.text-lighter {
|
||||
color: var(--color-text-high);
|
||||
}
|
||||
|
||||
.text-error {
|
||||
color: var(--color-error);
|
||||
}
|
||||
|
||||
.text-success {
|
||||
color: var(--color-success);
|
||||
}
|
||||
|
||||
.text-accent-high {
|
||||
color: var(--color-accent-high);
|
||||
}
|
||||
|
||||
.text-warning {
|
||||
color: var(--color-warning);
|
||||
}
|
||||
|
||||
.text-theme {
|
||||
color: var(--color-text-accent);
|
||||
}
|
||||
|
||||
.text-theme-secondary {
|
||||
color: var(--color-text-second);
|
||||
}
|
||||
|
||||
.text-uppercase {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.text-capitalize {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.underline {
|
||||
text-decoration: underline;
|
||||
text-decoration-thickness: 2px;
|
||||
}
|
||||
|
||||
.line-through {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.color-success {
|
||||
color: var(--color-success);
|
||||
}
|
||||
|
||||
.color-warning {
|
||||
color: var(--color-warning);
|
||||
}
|
||||
|
||||
.color-error {
|
||||
color: var(--color-error);
|
||||
}
|
||||
|
||||
.color-info {
|
||||
color: var(--color-info);
|
||||
}
|
||||
|
||||
.bg {
|
||||
background-color: var(--color-bg);
|
||||
}
|
||||
|
||||
.bg-lighter {
|
||||
background-color: var(--color-bg-high);
|
||||
}
|
||||
|
||||
.rounded {
|
||||
border-radius: var(--radius-box);
|
||||
}
|
||||
|
||||
.rounded-sm {
|
||||
border-radius: var(--radius-field);
|
||||
}
|
||||
|
||||
.rounded-full {
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
.font-body {
|
||||
font-weight: var(--weight-body);
|
||||
}
|
||||
|
||||
.font-semi-bold {
|
||||
font-weight: var(--weight-semi);
|
||||
}
|
||||
|
||||
.font-bold {
|
||||
font-weight: var(--weight-bold);
|
||||
}
|
||||
|
||||
.h-max {
|
||||
height: max-content;
|
||||
}
|
||||
|
||||
.w-full {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.w-4 {
|
||||
width: var(--s-4);
|
||||
}
|
||||
|
||||
.w-6 {
|
||||
width: var(--s-6);
|
||||
}
|
||||
|
||||
.w-24 {
|
||||
width: var(--s-24);
|
||||
}
|
||||
|
||||
.w-max {
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
.p-1 {
|
||||
padding: var(--s-1);
|
||||
}
|
||||
|
||||
.py-4 {
|
||||
padding-block: var(--s-4);
|
||||
}
|
||||
|
||||
.pl-0 {
|
||||
padding-inline-start: 0;
|
||||
}
|
||||
|
||||
.pl-4 {
|
||||
padding-inline-start: var(--s-4);
|
||||
}
|
||||
|
||||
.pt-0 {
|
||||
padding-block-start: 0;
|
||||
}
|
||||
|
||||
.pt-0-5 {
|
||||
padding-block-start: var(--s-0-5);
|
||||
}
|
||||
|
||||
.m-auto-0 {
|
||||
margin: auto 0;
|
||||
}
|
||||
|
||||
.mt-1 {
|
||||
margin-block-start: var(--s-1);
|
||||
}
|
||||
|
||||
.mt-2 {
|
||||
margin-block-start: var(--s-2);
|
||||
}
|
||||
|
||||
.mt-3 {
|
||||
margin-block-start: var(--s-3);
|
||||
}
|
||||
|
||||
.mt-4 {
|
||||
margin-block-start: var(--s-4);
|
||||
}
|
||||
|
||||
.mt-6 {
|
||||
margin-block-start: var(--s-6);
|
||||
}
|
||||
|
||||
.mt-12 {
|
||||
margin-block-start: var(--s-12);
|
||||
}
|
||||
|
||||
.mb-0 {
|
||||
margin-block-end: 0;
|
||||
}
|
||||
|
||||
.mb-1 {
|
||||
margin-block-end: var(--s-1);
|
||||
}
|
||||
|
||||
.mb-2 {
|
||||
margin-block-end: var(--s-2);
|
||||
}
|
||||
|
||||
.mb-4 {
|
||||
margin-block-end: var(--s-4);
|
||||
}
|
||||
|
||||
.ml-auto {
|
||||
margin-inline-start: auto;
|
||||
}
|
||||
|
||||
.ml-1 {
|
||||
margin-inline-start: var(--s-1);
|
||||
}
|
||||
|
||||
.ml-2 {
|
||||
margin-inline-start: var(--s-2);
|
||||
}
|
||||
|
||||
.ml-6 {
|
||||
margin-inline-start: var(--s-6);
|
||||
}
|
||||
|
||||
.mr-auto {
|
||||
margin-inline-end: auto;
|
||||
}
|
||||
|
||||
.mr-1 {
|
||||
margin-inline-end: var(--s-1);
|
||||
}
|
||||
|
||||
.mr-2 {
|
||||
margin-inline-end: var(--s-2);
|
||||
}
|
||||
|
||||
.mx-auto {
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
.mx-1 {
|
||||
margin-inline: var(--s-1);
|
||||
}
|
||||
|
||||
.mx-2 {
|
||||
margin-inline: var(--s-2);
|
||||
}
|
||||
|
||||
.my-1 {
|
||||
margin-block: var(--s-1);
|
||||
}
|
||||
|
||||
.my-2 {
|
||||
margin-block: var(--s-2);
|
||||
}
|
||||
|
||||
.my-3 {
|
||||
margin-block: var(--s-3);
|
||||
}
|
||||
|
||||
.my-4 {
|
||||
margin-block: var(--s-4);
|
||||
}
|
||||
|
||||
.my-24 {
|
||||
margin-block: var(--s-24);
|
||||
}
|
||||
|
||||
.m-0-auto {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.line-height-tight {
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.invisible {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.whitespace-pre-wrap {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.whitespace-nowrap {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.overflow-x-auto {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.relative {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.contents {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.items-center {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.items-start {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.items-end {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.justify-center {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.justify-end {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.justify-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.justify-self-end {
|
||||
justify-self: flex-end;
|
||||
}
|
||||
|
||||
.justify-self-center {
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
.self-center {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.self-start {
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.justify-self-start {
|
||||
justify-self: flex-start;
|
||||
}
|
||||
|
||||
.flex-wrap {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.all-unset {
|
||||
all: unset;
|
||||
}
|
||||
|
||||
.focus-text-decoration {
|
||||
&:focus-visible {
|
||||
outline: none;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.label-no-spacing {
|
||||
--label-margin: 0;
|
||||
}
|
||||
|
||||
.cursor-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.opaque {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.scrollbar,
|
||||
textarea {
|
||||
/* Firefox, Chrome 121+, Safari 18.2+ */
|
||||
@supports (scrollbar-color: auto) {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--color-bg-higher) transparent;
|
||||
}
|
||||
|
||||
/* Legacy */
|
||||
@supports not (scrollbar-color: auto) {
|
||||
&::-webkit-scrollbar,
|
||||
&::-webkit-scrollbar-track {
|
||||
background-color: transparent;
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: var(--color-base-4);
|
||||
border-radius: var(--radius-full);
|
||||
border: 4px solid transparent;
|
||||
background-clip: content-box;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-corner {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.stack {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
&.xxxs {
|
||||
gap: var(--s-0-5);
|
||||
}
|
||||
|
||||
&.xxs {
|
||||
gap: var(--s-1);
|
||||
}
|
||||
|
||||
&.xs {
|
||||
gap: var(--s-1-5);
|
||||
}
|
||||
|
||||
&.sm {
|
||||
gap: var(--s-2);
|
||||
}
|
||||
|
||||
&.sm-column {
|
||||
column-gap: var(--s-2);
|
||||
}
|
||||
|
||||
&.sm-plus {
|
||||
gap: var(--s-3);
|
||||
}
|
||||
|
||||
&.md {
|
||||
gap: var(--s-4);
|
||||
}
|
||||
|
||||
&.md-plus {
|
||||
gap: var(--s-6);
|
||||
}
|
||||
|
||||
&.lg {
|
||||
gap: var(--s-8);
|
||||
}
|
||||
|
||||
&.xs-row {
|
||||
row-gap: var(--s-1-5);
|
||||
}
|
||||
|
||||
&.lg-row {
|
||||
row-gap: var(--s-8);
|
||||
}
|
||||
|
||||
&.xl {
|
||||
gap: var(--s-12);
|
||||
}
|
||||
|
||||
&.xxl {
|
||||
gap: var(--s-16);
|
||||
}
|
||||
|
||||
&.horizontal {
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
|
||||
.flex-same-size {
|
||||
flex: 1 1 0px;
|
||||
}
|
||||
|
||||
.small-icon {
|
||||
width: 1.2rem;
|
||||
height: 1.2rem;
|
||||
}
|
||||
|
||||
.small-text {
|
||||
font-size: var(--font-2xs);
|
||||
}
|
||||
|
||||
.dotted {
|
||||
text-decoration-style: dotted;
|
||||
text-decoration-line: underline;
|
||||
text-decoration-thickness: 2px;
|
||||
}
|
||||
|
||||
.summary {
|
||||
border-radius: var(--radius-box);
|
||||
background-color: var(--color-bg);
|
||||
font-size: var(--font-xs);
|
||||
font-weight: var(--weight-semi);
|
||||
padding-block: var(--s-1);
|
||||
padding-inline: var(--s-2);
|
||||
}
|
||||
|
||||
html[dir="rtl"] .fix-rtl {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.no-results {
|
||||
text-align: center;
|
||||
color: var(--color-text-high);
|
||||
font-style: italic;
|
||||
font-size: var(--font-xs);
|
||||
}
|
||||
|
||||
.half-width {
|
||||
width: 100%;
|
||||
max-width: 24rem;
|
||||
margin-inline: auto;
|
||||
}
|
||||
}
|
||||
313
apps/web-react/app/styles/vars.css
Normal file
313
apps/web-react/app/styles/vars.css
Normal file
@@ -0,0 +1,313 @@
|
||||
@layer reset, base, elements, components, utilities;
|
||||
|
||||
/*
|
||||
⚠️⚠️⚠️
|
||||
Make sure to read styles.md before editing colors in this file,
|
||||
it contains important information about how the styles work and how to edit them properly
|
||||
⚠️⚠️⚠️
|
||||
*/
|
||||
|
||||
/*
|
||||
All the tokens that can be set by custom themes
|
||||
and their default values are defined here
|
||||
|
||||
These should not be consumed directly, only used as a base for other vars!
|
||||
|
||||
The hue and chroma values should not be edited manually, instead
|
||||
use oklch-gamut.ts to generate valid color palettes!
|
||||
|
||||
A subtree can force a color scheme regardless of the html class with
|
||||
[data-theme="dark"|"light"] and opt out of an active custom theme with
|
||||
[data-default-theme] (e.g. image export previews)
|
||||
*/
|
||||
html,
|
||||
[data-default-theme] {
|
||||
--_base-h: 268;
|
||||
--_base-c-0: 0;
|
||||
--_base-c-1: 0.02357547860966049;
|
||||
--_base-c-2: 0.031;
|
||||
--_base-c-3: 0.06999999999999999;
|
||||
--_base-c-4: 0.0645;
|
||||
--_base-c-5: 0.068;
|
||||
--_base-c-6: 0.0645;
|
||||
--_base-c-7: 0.0335;
|
||||
|
||||
--_acc-h: 253;
|
||||
--_acc-c-0: 0.0801740871856143;
|
||||
--_acc-c-1: 0.1603481743712286;
|
||||
--_acc-c-2: 0.0816;
|
||||
--_acc-c-3: 0.06;
|
||||
--_acc-c-4: 0.16343179310913686;
|
||||
--_acc-c-5: 0.09867579961306376;
|
||||
|
||||
--_second-h: 73;
|
||||
--_second-c-0: 0.055379201356259726;
|
||||
--_second-c-1: 0.11075840271251945;
|
||||
--_second-c-2: 0.0816;
|
||||
--_second-c-3: 0.06;
|
||||
--_second-c-4: 0.11288837199545253;
|
||||
--_second-c-5: 0.06815901705385813;
|
||||
|
||||
--_radius-box: 3;
|
||||
--_radius-field: 2;
|
||||
--_radius-selector: 2;
|
||||
|
||||
--_border-width: 2;
|
||||
|
||||
/*
|
||||
Ommited from being overridden when viewing a page that loads a custom theme
|
||||
to prevent accessibility issues and layout shifts
|
||||
*/
|
||||
--_size-field: 1;
|
||||
--_size-selector: 1;
|
||||
--_size-spacing: 1;
|
||||
}
|
||||
|
||||
/*
|
||||
'low' and 'high' do not indicate lightness!
|
||||
This is important because dark goes from light to dark, and light goes from dark to light
|
||||
|
||||
--color-base-x should rarely be consumed directly
|
||||
They mostly exist as a base for other vars like --color-text and --color-bg
|
||||
|
||||
--color-text-accent and --color-text-second can be used as a background
|
||||
or highlight color that maintains a high contrast ratio in both light and dark modes
|
||||
If used as a background color, --color-text-inverse should be used as the text color
|
||||
|
||||
Info, success, warning, and error colors:
|
||||
Preffer using --color-x-high for text
|
||||
It is recommended to use --color-x-low as the background to ensure a high contrast ratio
|
||||
You can use --color-x for things like borders and icons
|
||||
|
||||
Field icons are defined for both dark and light mode because SVGs
|
||||
cannot use currentColor inside data URLs
|
||||
|
||||
Any changes here NEED to be reflected in oklch-gamut.ts as well
|
||||
*/
|
||||
html.dark,
|
||||
html.dark [data-custom-theme],
|
||||
[data-theme="dark"] {
|
||||
--color-base-0: oklch(100% var(--_base-c-0) var(--_base-h));
|
||||
--color-base-1: oklch(95% var(--_base-c-1) var(--_base-h));
|
||||
--color-base-2: oklch(90% var(--_base-c-2) var(--_base-h));
|
||||
--color-base-3: oklch(64% var(--_base-c-3) var(--_base-h));
|
||||
--color-base-4: oklch(46% var(--_base-c-4) var(--_base-h));
|
||||
--color-base-5: oklch(32% var(--_base-c-5) var(--_base-h));
|
||||
--color-base-6: oklch(25% var(--_base-c-6) var(--_base-h));
|
||||
--color-base-7: oklch(17% var(--_base-c-7) var(--_base-h));
|
||||
|
||||
--color-accent-low: oklch(26% var(--_acc-c-0) var(--_acc-h));
|
||||
--color-accent: oklch(52% var(--_acc-c-1) var(--_acc-h));
|
||||
--color-accent-high: oklch(83% var(--_acc-c-2) var(--_acc-h));
|
||||
|
||||
--color-second-low: oklch(
|
||||
from var(--color-accent-low) l var(--_second-c-0) var(--_second-h)
|
||||
);
|
||||
--color-second: oklch(
|
||||
from var(--color-accent) l var(--_second-c-1) var(--_second-h)
|
||||
);
|
||||
--color-second-high: oklch(
|
||||
from var(--color-accent-high) l var(--_second-c-2) var(--_second-h)
|
||||
);
|
||||
|
||||
--color-text-accent: var(--color-accent-high);
|
||||
--color-text-second: var(--color-second-high);
|
||||
|
||||
--color-info-low: oklch(26% 0.09 275);
|
||||
--color-info: oklch(52% 0.27 275);
|
||||
--color-info-high: oklch(83% 0.08 275);
|
||||
|
||||
--color-success-low: oklch(35% 0.08 135);
|
||||
--color-success: oklch(85% 0.22 135);
|
||||
--color-success-high: oklch(91% 0.12 135);
|
||||
|
||||
--color-warning-low: oklch(38% 0.05 85);
|
||||
--color-warning: oklch(82% 0.14 85);
|
||||
--color-warning-high: oklch(94% 0.05 85);
|
||||
|
||||
--color-error-low: oklch(31% 0.07 10);
|
||||
--color-error: oklch(65% 0.25 10);
|
||||
--color-error-high: oklch(87% 0.07 10);
|
||||
|
||||
--color-chart-alpha: #da5b76;
|
||||
--color-chart-bravo: #6572e4;
|
||||
|
||||
--field-icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(20, 20, 20)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--field-icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(20, 20, 20)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
|
||||
--field-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(145, 145, 145)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--field-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(145, 145, 145)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
|
||||
--field-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(145, 145, 145)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
html.light,
|
||||
html.light [data-custom-theme],
|
||||
[data-theme="light"] {
|
||||
--color-base-0: oklch(17% var(--_base-c-7) var(--_base-h));
|
||||
--color-base-1: oklch(25% var(--_base-c-6) var(--_base-h));
|
||||
--color-base-2: oklch(32% var(--_base-c-5) var(--_base-h));
|
||||
--color-base-3: oklch(46% var(--_base-c-4) var(--_base-h));
|
||||
--color-base-4: oklch(64% var(--_base-c-3) var(--_base-h));
|
||||
--color-base-5: oklch(90% var(--_base-c-2) var(--_base-h));
|
||||
--color-base-6: oklch(95% var(--_base-c-1) var(--_base-h));
|
||||
--color-base-7: oklch(100% var(--_base-c-0) var(--_base-h));
|
||||
|
||||
--color-accent-low: oklch(88% var(--_acc-c-3) var(--_acc-h));
|
||||
--color-accent: oklch(53% var(--_acc-c-4) var(--_acc-h));
|
||||
--color-accent-high: oklch(32% var(--_acc-c-5) var(--_acc-h));
|
||||
|
||||
--color-second-low: oklch(
|
||||
from var(--color-accent-low) l var(--_second-c-0) var(--_second-h)
|
||||
);
|
||||
--color-second: oklch(
|
||||
from var(--color-accent) l var(--_second-c-1) var(--_second-h)
|
||||
);
|
||||
--color-second-high: oklch(
|
||||
from var(--color-accent-high) l var(--_second-c-2) var(--_second-h)
|
||||
);
|
||||
|
||||
--color-text-accent: var(--color-accent);
|
||||
--color-text-second: var(--color-second);
|
||||
|
||||
--color-info-low: oklch(87.897% 0.0555 279.573);
|
||||
--color-info: oklch(53.03% 0.24331 270.147);
|
||||
--color-info-high: oklch(31.865% 0.1766 267.138);
|
||||
|
||||
--color-success-low: oklch(95.604% 0.06419 135.506);
|
||||
--color-success: oklch(79.407% 0.25035 139.5);
|
||||
--color-success-high: oklch(44.893% 0.13293 138.416);
|
||||
|
||||
--color-warning-low: oklch(94.216% 0.05193 85.101);
|
||||
--color-warning: oklch(82.426% 0.15029 82.564);
|
||||
--color-warning-high: oklch(46.236% 0.09033 79.825);
|
||||
|
||||
--color-error-low: oklch(89.949% 0.04928 355.498);
|
||||
--color-error: oklch(65.223% 0.22164 5.216);
|
||||
--color-error-high: oklch(41.268% 0.15511 8.446);
|
||||
|
||||
--color-chart-alpha: #b82851;
|
||||
--color-chart-bravo: #4246c2;
|
||||
|
||||
--field-icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--field-icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
|
||||
--field-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(90, 90, 90)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--field-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(90, 90, 90)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
|
||||
--field-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(90, 90, 90)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
/*
|
||||
These are the vars you mainly want to use
|
||||
*/
|
||||
html,
|
||||
/* biome-ignore lint/style/noDescendingSpecificity: [data-custom-theme] and [data-theme] re-declare theme vars for subtrees; different properties than the html.dark/light blocks so no real override */
|
||||
[data-custom-theme],
|
||||
[data-theme] {
|
||||
--color-text: var(--color-base-0);
|
||||
--color-text-high: var(--color-base-3);
|
||||
--color-text-inverse: var(--color-base-7);
|
||||
|
||||
--color-bg: var(--color-base-7);
|
||||
--color-bg-high: var(--color-base-6);
|
||||
--color-bg-higher: var(--color-base-5);
|
||||
--color-bg-nav: color-mix(
|
||||
in oklch,
|
||||
var(--color-bg) 75%,
|
||||
var(--color-bg-high) 25%
|
||||
);
|
||||
--color-bg-ability: oklch(11.736% 0.00867 215.976);
|
||||
--color-bg-badge: oklch(0% 0 0);
|
||||
|
||||
--color-border: var(--color-base-5);
|
||||
--color-border-high: var(--color-base-4);
|
||||
--border-width: calc(var(--_border-width) * 1px);
|
||||
--border-style: var(--border-width) solid var(--color-border);
|
||||
--border-style-high: var(--border-width) solid var(--color-border-high);
|
||||
--border-style-accent: var(--border-width) solid var(--color-text-accent);
|
||||
|
||||
--focus-ring: 2px solid var(--color-text-accent);
|
||||
--focus-ring-error: 2px solid var(--color-error);
|
||||
|
||||
--font-xl: 1.5rem;
|
||||
--font-lg: 1.2rem;
|
||||
--font-md: 1rem;
|
||||
--font-sm: 0.9rem;
|
||||
--font-xs: 0.8rem;
|
||||
--font-2xs: 0.7rem;
|
||||
--font-3xs: 0.6rem;
|
||||
|
||||
--weight-extra: 700;
|
||||
--weight-bold: 600;
|
||||
--weight-semi: 500;
|
||||
--weight-body: 400;
|
||||
|
||||
--line-height: 1.5;
|
||||
|
||||
/*
|
||||
Tokens used for spacings
|
||||
*/
|
||||
--s-0-5: calc(var(--_size-spacing) * 0.5 * 0.25rem);
|
||||
--s-1: calc(var(--_size-spacing) * 1 * 0.25rem);
|
||||
--s-1-5: calc(var(--_size-spacing) * 1.5 * 0.25rem);
|
||||
--s-2: calc(var(--_size-spacing) * 2 * 0.25rem);
|
||||
--s-2-5: calc(var(--_size-spacing) * 2.5 * 0.25rem);
|
||||
--s-3: calc(var(--_size-spacing) * 3 * 0.25rem);
|
||||
--s-4: calc(var(--_size-spacing) * 4 * 0.25rem);
|
||||
--s-5: calc(var(--_size-spacing) * 5 * 0.25rem);
|
||||
--s-6: calc(var(--_size-spacing) * 6 * 0.25rem);
|
||||
--s-8: calc(var(--_size-spacing) * 8 * 0.25rem);
|
||||
--s-10: calc(var(--_size-spacing) * 10 * 0.25rem);
|
||||
--s-12: calc(var(--_size-spacing) * 12 * 0.25rem);
|
||||
--s-16: calc(var(--_size-spacing) * 16 * 0.25rem);
|
||||
--s-24: calc(var(--_size-spacing) * 24 * 0.25rem);
|
||||
--s-32: calc(var(--_size-spacing) * 32 * 0.25rem);
|
||||
|
||||
/*
|
||||
Tokens used to define layout dimensions
|
||||
|
||||
--layout-sticky-top can be used by any element with position: sticky
|
||||
that sticks relative to the document scroll to ensure
|
||||
a smooth transition between sticking and un-sticking
|
||||
|
||||
Elements with position: sticky that do not stick relative
|
||||
to the document scroll do not need to use this var
|
||||
*/
|
||||
--layout-nav-height: 55px;
|
||||
--layout-sidenav-width: 250px;
|
||||
--layout-fuse-bottom-height: 90px;
|
||||
--layout-main-padding: var(--s-3);
|
||||
--layout-sticky-top: calc(
|
||||
var(--layout-nav-height) +
|
||||
var(--layout-main-padding) +
|
||||
env(safe-area-inset-top)
|
||||
);
|
||||
|
||||
/*
|
||||
Boxes are elements that contain other elements, like cards, containers, and modals
|
||||
but can also be top level elements in a visual hierarchy
|
||||
|
||||
Fields are interactive elements like buttons, inputs, and selects
|
||||
but also any child of a box that is interactable or contains content
|
||||
|
||||
Selectors are elements like checkboxes, radio buttons, and toggles
|
||||
but can also be any small element like bages, tags, and pills
|
||||
that are complementary to fields
|
||||
*/
|
||||
--field-size-xs: calc(var(--_size-field) * 6 * 0.25rem);
|
||||
--field-size-sm: calc(var(--_size-field) * 8 * 0.25rem);
|
||||
--field-size: calc(var(--_size-field) * 10 * 0.25rem);
|
||||
--field-size-lg: calc(var(--_size-field) * 12 * 0.25rem);
|
||||
--field-size-icon: 18px;
|
||||
--field-padding: 0.6rem;
|
||||
|
||||
--selector-size-xs: calc(var(--_size-selector) * 4 * 0.25rem);
|
||||
--selector-size-sm: calc(var(--_size-selector) * 5 * 0.25rem);
|
||||
--selector-size: calc(var(--_size-selector) * 6 * 0.25rem);
|
||||
--selector-size-lg: calc(var(--_size-selector) * 7 * 0.25rem);
|
||||
|
||||
--radius-box: calc(var(--_radius-box) * 4px);
|
||||
--radius-field: calc(var(--_radius-field) * 4px);
|
||||
--radius-selector: calc(var(--_radius-selector) * 4px);
|
||||
--radius-full: 99999px;
|
||||
--radius-avatar: var(--radius-full);
|
||||
|
||||
--label-margin: var(--s-1);
|
||||
}
|
||||
Reference in New Issue
Block a user