mirror of https://github.com/VERT-sh/VERT.git
172 lines
3.3 KiB
SCSS
172 lines
3.3 KiB
SCSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@import url(@fontsource/radio-canada-big/600.css);
|
|
@import url("$lib/assets/style/host-grotesk.css");
|
|
|
|
:root {
|
|
--font-body: "Host Grotesk", system-ui, -apple-system, BlinkMacSystemFont,
|
|
"Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans",
|
|
"Helvetica Neue", sans-serif;
|
|
--font-display: "Radio Canada Big", var(--font-body);
|
|
--transition: linear(
|
|
0,
|
|
0.006,
|
|
0.025 2.8%,
|
|
0.101 6.1%,
|
|
0.539 18.9%,
|
|
0.721 25.3%,
|
|
0.849 31.5%,
|
|
0.937 38.1%,
|
|
0.968 41.8%,
|
|
0.991 45.7%,
|
|
1.006 50.1%,
|
|
1.015 55%,
|
|
1.017 63.9%,
|
|
1.001
|
|
);
|
|
}
|
|
|
|
@mixin light {
|
|
// general
|
|
--accent: hsl(303, 73%, 81%);
|
|
|
|
// foregrounds
|
|
--fg: hsl(0, 0%, 0%);
|
|
--fg-muted: hsl(0, 0%, 50%);
|
|
--fg-on-accent: hsl(0, 0%, 0%);
|
|
--fg-on-badge: hsl(0, 0%, 100%);
|
|
|
|
// backgrounds
|
|
--bg: hsl(0, 0%, 95%);
|
|
--bg-gradient: linear-gradient(
|
|
to bottom left,
|
|
hsla(235, 100%, 50%, 0.3),
|
|
hsla(235, 100%, 50%, 0) 75%
|
|
),
|
|
linear-gradient(
|
|
to bottom right,
|
|
hsla(353, 100%, 50%, 0.4),
|
|
hsla(353, 100%, 50%, 0) 50%
|
|
),
|
|
linear-gradient(
|
|
to bottom,
|
|
hsla(287, 100%, 50%, 0.2),
|
|
hsla(287, 100%, 50%, 0)
|
|
);
|
|
--bg-panel: hsl(0, 0%, 100%);
|
|
--bg-panel-alt: hsl(0, 0%, 92%);
|
|
--bg-panel-accented: #EBEBEB;
|
|
--bg-separator: hsl(0, 0%, 88%);
|
|
--bg-button: var(--bg-panel-accented);
|
|
--bg-badge: hsl(0, 0%, 0%);
|
|
|
|
--shadow-panel: 0 2px 4px 0 hsla(0, 0%, 0%, 0.15);
|
|
}
|
|
|
|
@mixin dark {
|
|
// general
|
|
--accent: hsl(303, 73%, 81%);
|
|
|
|
// foregrounds
|
|
--fg: hsl(0, 0%, 100%);
|
|
--fg-muted: hsl(0, 0%, 50%);
|
|
--fg-on-accent: hsl(0, 0%, 0%);
|
|
--fg-on-badge: hsl(0, 0%, 0%);
|
|
|
|
// backgrounds
|
|
--bg: hsl(220, 5%, 12%);
|
|
--bg-gradient: linear-gradient(
|
|
to bottom,
|
|
hsla(287, 100%, 50%, 0.1),
|
|
hsla(287, 100%, 50%, 0)
|
|
),
|
|
linear-gradient(
|
|
to bottom left,
|
|
hsla(235, 100%, 50%, 0.07),
|
|
hsla(235, 100%, 50%, 0) 50%
|
|
),
|
|
linear-gradient(
|
|
to bottom right,
|
|
hsla(353, 100%, 50%, 0.07),
|
|
hsla(353, 100%, 50%, 0) 50%
|
|
);
|
|
--bg-panel: hsl(220, 4%, 18%);
|
|
--bg-panel-accented: color-mix(in srgb, var(--accent) 12%, transparent);
|
|
--bg-panel-alt: hsl(220, 6%, 25%);
|
|
--bg-separator: hsl(220, 4%, 28%);
|
|
--bg-button: #43464C;
|
|
--bg-badge: hsl(0, 0%, 100%);
|
|
|
|
--shadow-panel: 0 4px 6px 0 hsla(0, 0%, 0%, 0.15);
|
|
|
|
color-scheme: dark;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
@include dark;
|
|
}
|
|
}
|
|
|
|
@media (prefers-color-scheme: light) {
|
|
:root {
|
|
@include light;
|
|
}
|
|
}
|
|
|
|
:root.light {
|
|
@include light;
|
|
}
|
|
|
|
:root.dark {
|
|
@include dark;
|
|
}
|
|
|
|
body {
|
|
@apply text-foreground font-body font-semibold overflow-x-hidden;
|
|
width: 100vw;
|
|
background-color: var(--bg);
|
|
background-size: 100vw 100vh;
|
|
}
|
|
|
|
.hoverable {
|
|
@apply hover:scale-105 duration-200;
|
|
}
|
|
|
|
.hoverable-md {
|
|
@apply hover:scale-110 duration-200;
|
|
}
|
|
|
|
.hoverable-lg {
|
|
@apply hover:scale-[1.15] duration-200;
|
|
}
|
|
|
|
@layer components {
|
|
select {
|
|
@apply appearance-none;
|
|
}
|
|
|
|
.btn {
|
|
@apply bg-button flex items-center justify-center overflow-hidden relative cursor-pointer px-6 h-14 rounded-full font-medium focus:!outline-none hover:scale-105 duration-200 active:scale-95 disabled:opacity-50 disabled:pointer-events-none hoverable;
|
|
transition:
|
|
opacity 0.2s ease,
|
|
transform 0.2s ease,
|
|
background-color 0.2s ease;
|
|
}
|
|
|
|
.btn.highlight {
|
|
@apply bg-accent text-on-accent;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
@apply font-display font-semibold;
|
|
}
|
|
}
|