Crylia/zen-kanji
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 5 Wiki Activity

init

Browse Source
This commit is contained in:
Rene Kievits
2025-12-18 01:30:52 +01:00
commit 6438660b03
78 changed files with 14230 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
client/src/styles/abstracts/_mixins.scss Normal file
View File

@@ -0,0 +1,68 @@
@use 'sass:color';
@use 'variables' as *;
@mixin flex-center {
display: flex;
align-items: center;
justify-content: center;
}
@mixin flex-column($gap: 0) {
display: flex;
flex-direction: column;
gap: $gap;
}
@mixin grid-responsive($min-width: 960px) {
display: grid;
grid-template-columns: 1fr;
@media (min-width: $min-width) {
// stylelint-disable-next-line no-invalid-position-declaration
grid-template-columns: 1fr 1fr;
}
}
@mixin card-base {
background: $color-surface-light;
border-radius: $radius-md;
border: 1px solid transparent;
background-clip: padding-box;
}
@mixin hover-lift {
transition:
transform $duration-fast $ease-default,
background $duration-fast $ease-default,
box-shadow $duration-fast $ease-default;
will-change: transform;
transform: translateZ(0);
backface-visibility: hidden;
&:hover {
transform: translateY(-2px);
background: color.adjust($color-surface-light, $lightness: 5%);
box-shadow: $shadow-md;
}
}
@mixin scrollbar {
scrollbar-width: thin;
scrollbar-color: #333 transparent;
}
@mixin animate-fade-up($duration: 0.4s) {
animation: fade-slide-up $duration ease-out backwards;
@keyframes fade-slide-up {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
}

5
client/src/styles/abstracts/_variables.scss Normal file
View File

@@ -0,0 +1,5 @@
@forward 'variables/colors';
@forward 'variables/typography';
@forward 'variables/spacing';
@forward 'variables/layout';
@forward 'variables/effects';

18
client/src/styles/abstracts/variables/_colors.scss Normal file
View File

@@ -0,0 +1,18 @@
$color-primary: hsl(178deg 100% 40%);
$color-secondary: hsl(46deg 100% 82%);
$color-bg-dark: hsl(0deg 0% 7%);
$color-surface: hsl(240deg 9% 13%);
$color-surface-light: hsl(221deg 17% 22%);
$color-text-white: hsl(0deg 0% 100%);
$color-text-grey: hsl(213deg 14% 70%);
$color-border: hsl(0deg 0% 100% / 8%);
$color-srs-1: hsl(0deg 100% 73%);
$color-srs-2: hsl(39deg 98% 71%);
$color-srs-3: hsl(163deg 85% 64%);
$color-srs-4: hsl(206deg 92% 46%);
$color-srs-5: hsl(244deg 100% 82%);
$color-srs-6: hsl(247deg 72% 63%);
$color-danger: hsl(0deg 85% 65%);
$color-success: hsl(160deg 80% 45%);
$color-stroke-inactive: hsl(0deg 0% 33%);
$color-dot-base: hsl(0deg 0% 27%);

30
client/src/styles/abstracts/variables/_effects.scss Normal file
View File

@@ -0,0 +1,30 @@
@use 'sass:color';
@use 'colors' as *;
$opacity-disabled: 0.5;
$opacity-inactive: 0.3;
$opacity-hover: 0.8;
$opacity-active: 1;
$blur-sm: blur(4px);
$blur-md: blur(10px);
$blur-lg: blur(20px);
$bg-glass-subtle: hsl(0deg 0% 100% / 5%);
$bg-glass-light: hsl(0deg 0% 100% / 6%);
$bg-glass-strong: hsl(0deg 0% 100% / 10%);
$bg-glass-dark: hsl(0deg 0% 0% / 20%);
$shadow-sm: 0 2px 4px hsl(0deg 0% 0% / 20%);
$shadow-md: 0 4px 15px hsl(0deg 0% 0% / 30%);
$shadow-lg: 0 20px 50px hsl(0deg 0% 0% / 50%);
$shadow-inset: inset 0 0 20px hsl(0deg 0% 0% / 30%);
$text-shadow: 0 2px 10px hsl(0deg 0% 0% / 50%);
$shadow-glow-xs: 0 0 4px hsl(0deg 0% 100% / 50%);
$shadow-glow-base: 0 0 20px color.change($color-primary, $alpha: 0.4);
$shadow-glow-hover: 0 0 40px color.change($color-primary, $alpha: 0.6);
$shadow-glow-active: 0 0 20px color.change($color-primary, $alpha: 0.4);
$dist-slide-sm: 10px;
$duration-fast: 0.2s;
$duration-normal: 0.3s;
$duration-slow: 0.5s;
$duration-chart: 1s;
$ease-default: ease;
$ease-out-back: cubic-bezier(0.175, 0.885, 0.32, 1.275);

46
client/src/styles/abstracts/variables/_layout.scss Normal file
View File

@@ -0,0 +1,46 @@
@use 'colors' as *;
$radius-sm: 4px;
$radius-md: 8px;
$radius-lg: 12px;
$radius-xl: 24px;
$radius-pill: 999px;
$radius-circle: 50%;
$border-width-sm: 1px;
$border-width-md: 2px;
$border-subtle: $border-width-sm solid $color-border;
$border-focus: $border-width-md solid $color-primary;
$border-transparent: $border-width-md solid transparent;
$z-back: -1;
$z-normal: 1;
$z-sticky: 10;
$z-dropdown: 50;
$z-modal: 100;
$z-tooltip: 200;
$z-above: 2;
$size-canvas: 300px;
$size-kanji-preview: 200px;
$size-icon-btn: 32px;
$size-icon-small: 18px;
$stroke-width-main: 3px;
$stroke-width-arrow: 2px;
$font-size-svg-number: 5px;
$radius-xs: 2px;
$radius-sm: 4px;
$radius-md: 8px;
$radius-lg: 12px;
$radius-xl: 24px;
$radius-pill: 999px;
$radius-circle: 50%;
$size-legend-box: 12px;
$size-streak-dot: 24px;
$size-srs-track: 24px;
$size-chart-height: 160px;
$size-ghost-min-height: 80px;
$max-width-heatmap: 950px;
$max-width-desktop: 1400px;
$padding-page-y: 40px;
$padding-page-x: 24px;
$breakpoint-md: 960px;
$offset-fab: 20px;
$size-heatmap-cell-height: 10px;

10
client/src/styles/abstracts/variables/_spacing.scss Normal file
View File

@@ -0,0 +1,10 @@
$spacing-2xs: 2px;
$spacing-xs: 4px;
$spacing-sm: 8px;
$spacing-md: 16px;
$spacing-lg: 24px;
$spacing-xl: 32px;
$spacing-xxl: 48px;
$size-loading-spinner: 64px;
$gap-heatmap: 3px;
$size-card-min: 60px;

25
client/src/styles/abstracts/variables/_typography.scss Normal file
View File

@@ -0,0 +1,25 @@
$font-family-sans:
'Inter',
system-ui,
-apple-system,
sans-serif;
$font-family-mono: 'Fira Code', monospace;
$font-xs: 0.75rem;
$font-sm: 0.875rem;
$font-md: 1rem;
$font-lg: 1.25rem;
$font-xl: 1.5rem;
$font-2xl: 2rem;
$font-3xl: 3rem;
$weight-regular: 400;
$weight-medium: 500;
$weight-bold: 700;
$weight-black: 900;
$tracking-tighter: -0.05em;
$tracking-tight: -0.025em;
$tracking-normal: 0em;
$tracking-wide: 0.025em;
$tracking-wider: 0.05em;
$leading-tight: 1.2;
$leading-normal: 1.5;
$leading-loose: 1.8;

23
client/src/styles/base/_typography.scss Normal file
View File

@@ -0,0 +1,23 @@
@use '../abstracts/variables' as *;
body {
font-family: $font-family-sans;
line-height: $leading-normal;
-webkit-font-smoothing: antialiased;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: $weight-bold;
line-height: $leading-tight;
letter-spacing: $tracking-tight;
}
code,
pre {
font-family: $font-family-mono;
}

26
client/src/styles/components/_buttons.scss Normal file
View File

@@ -0,0 +1,26 @@
@use '../abstracts/variables' as *;
.glow-btn {
box-shadow: $shadow-glow-base;
transition:
transform $duration-fast $ease-default,
box-shadow $duration-fast $ease-default;
will-change: transform, box-shadow;
&:hover {
transform: translateY(-2px);
box-shadow: $shadow-glow-hover;
}
&:active {
transform: translateY(0);
box-shadow: $shadow-glow-active;
}
&:disabled {
box-shadow: none;
transform: none;
opacity: $opacity-disabled;
cursor: not-allowed;
}
}

147
client/src/styles/components/_kanji.scss Normal file
View File

@@ -0,0 +1,147 @@
@use '../abstracts/variables' as *;
@use '../abstracts/mixins' as *;
.canvas-container {
position: relative;
@include flex-center;
margin-bottom: $spacing-xl;
}
.canvas-wrapper {
width: $size-canvas;
height: $size-canvas;
border-radius: $radius-lg;
background: rgba($color-surface, 0.95);
border: $border-width-md solid $color-surface-light;
position: relative;
cursor: crosshair;
box-shadow: $shadow-inset;
canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
touch-action: none;
}
}
.loading-text {
position: absolute;
color: $color-text-grey;
z-index: $z-sticky;
font-size: $font-sm;
font-weight: $weight-medium;
letter-spacing: $tracking-wide;
}
.svg-container {
width: $size-kanji-preview;
height: $size-kanji-preview;
margin: 0 auto $spacing-lg;
background: rgba($color-bg-dark, 0.2);
border-radius: $radius-md;
border: $border-subtle;
position: relative;
@include flex-center;
overflow: hidden;
}
.stroke-path {
fill: none;
stroke: $color-stroke-inactive;
stroke-width: $stroke-width-main;
stroke-linecap: round;
stroke-linejoin: round;
transition: stroke $duration-normal;
&.hidden {
opacity: 0;
}
&.animating {
stroke: $color-primary;
stroke-dasharray: var(--len);
stroke-dashoffset: var(--len);
animation: draw-stroke var(--duration) linear forwards;
}
&.drawn {
stroke: $color-text-white;
opacity: 1;
}
}
@keyframes draw-stroke {
to {
stroke-dashoffset: 0;
}
}
.stroke-start-circle {
fill: $color-srs-1;
}
.stroke-number {
fill: $color-text-white;
font-size: $font-size-svg-number;
font-family: $font-family-sans;
font-weight: $weight-bold;
text-anchor: middle;
dominant-baseline: middle;
pointer-events: none;
}
.stroke-arrow-line {
fill: none;
stroke: rgba($color-secondary, 0.7);
stroke-width: $stroke-width-arrow;
stroke-linecap: round;
stroke-linejoin: round;
}
.loading-spinner {
color: $color-text-grey;
font-size: $font-sm;
}
.play-btn {
position: absolute;
top: $spacing-sm;
right: $spacing-sm;
background: rgba($color-bg-dark, 0.3);
border: $border-width-sm solid rgba($color-primary, 0.5);
color: $color-primary;
border-radius: $radius-circle;
width: $size-icon-btn;
height: $size-icon-btn;
@include flex-center;
cursor: pointer;
transition: all $duration-fast ease;
z-index: $z-sticky;
backdrop-filter: $blur-sm;
&:hover {
transform: scale(1.1);
background: $color-primary;
color: $color-bg-dark;
border-color: $color-primary;
box-shadow: $shadow-glow-base;
}
&:active {
transform: scale(0.95);
}
svg {
width: $size-icon-small;
height: $size-icon-small;
}
}

174
client/src/styles/components/_widgets.scss Normal file
View File

@@ -0,0 +1,174 @@
@use '../abstracts/variables' as *;
@use '../abstracts/mixins' as *;
@use 'sass:color';
.widget-card {
@include card-base;
border: $border-subtle;
}
.level-0 {
background-color: $bg-glass-subtle;
}
.level-1 {
background-color: color.mix($color-primary, $color-surface, 25%);
}
.level-2 {
background-color: color.mix($color-primary, $color-surface, 50%);
}
.level-3 {
background-color: $color-primary;
}
.level-4 {
background-color: color.scale($color-primary, $lightness: 40%);
}
.heatmap-container {
width: 100%;
@include flex-center;
}
.heatmap-year {
display: grid;
grid-template-columns: repeat(53, 1fr);
gap: $gap-heatmap;
width: 100%;
}
.heatmap-week {
display: grid;
grid-template-rows: repeat(7, max-content);
gap: $gap-heatmap;
}
.heatmap-day-wrapper {
width: 100%;
}
.heatmap-cell {
width: 100%;
height: $size-heatmap-cell-height;
border-radius: $radius-xs;
transition:
opacity $duration-fast,
background-color $duration-fast;
&:hover {
opacity: $opacity-hover;
}
}
.today-cell {
border: $border-width-sm solid $color-text-white;
box-shadow: $shadow-glow-xs;
z-index: $z-above;
position: relative;
box-sizing: border-box;
}
.legend-container {
display: flex;
align-items: center;
gap: $spacing-xs;
}
.legend-box {
width: $size-legend-box;
height: $size-legend-box;
border-radius: $radius-xs;
}
.ghost-card {
background: $bg-glass-subtle;
border-radius: $radius-md;
padding: $spacing-sm;
text-align: center;
border: $border-width-sm solid $bg-glass-subtle;
display: flex;
flex-direction: column;
justify-content: center;
min-height: $size-ghost-min-height;
}
.srs-chart-container {
height: $size-chart-height;
width: 100%;
}
.srs-column {
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.srs-track {
width: $size-srs-track;
flex-grow: 1;
background: $bg-glass-light;
border-radius: $radius-md;
position: relative;
overflow: hidden;
display: flex;
align-items: flex-end;
margin: $spacing-xs 0;
}
.srs-fill {
width: 100%;
border-radius: $radius-sm;
transition: height 1s $ease-out-back;
min-height: 0;
}
.transition-text {
transition: color $duration-normal $ease-default;
}
.streak-dot {
width: $size-streak-dot;
height: $size-streak-dot;
border-radius: $radius-circle;
background: $bg-glass-strong;
@include flex-center;
transition: all $duration-normal;
&.active {
background: $color-primary;
box-shadow: $shadow-glow-active;
}
}
.forecast-list {
overflow-y: auto;
@include scrollbar;
}
.gap-1 {
gap: $spacing-xs;
}
.gap-2 {
gap: $spacing-sm;
}
.border-subtle {
border: $border-subtle;
}
.border-b-subtle {
border-bottom: $border-subtle;
}
.border-t-subtle {
border-top: $border-subtle;
}

10
client/src/styles/main.scss Normal file
View File

@@ -0,0 +1,10 @@
@use 'abstracts/variables';
@use 'abstracts/mixins';
@use 'base/typography';
@use 'components/buttons';
@use 'components/widgets';
@use 'components/kanji';
@use 'pages/app';
@use 'pages/dashboard';
@use 'pages/review';
@use 'pages/collection';

61
client/src/styles/pages/_app.scss Normal file
View File

@@ -0,0 +1,61 @@
@use '../abstracts/variables' as *;
:root {
--v-theme-background: #{$color-bg-dark};
}
body,
html,
.zen-app,
.v-application {
background-color: $color-bg-dark !important;
font-family: $font-family-sans;
color: $color-text-white;
}
.v-navigation-drawer {
background-color: $color-surface !important;
// stylelint-disable-next-line selector-class-pattern
.v-list-item--active {
background-color: rgba($color-primary, 0.15);
color: $color-primary !important;
.v-icon {
color: $color-primary !important;
}
}
}
.v-card {
box-shadow: $shadow-lg !important;
}
.app-bar-blur {
border-bottom-color: $color-border !important;
backdrop-filter: $blur-md;
}
.cursor-pointer {
cursor: pointer;
}
.tracking-wide {
letter-spacing: $tracking-wider;
}
.tracking-tight {
letter-spacing: $tracking-tight;
}
.border-subtle {
border: $border-subtle;
}
.logo-hover {
transition: opacity $duration-fast $ease-default;
&:hover {
opacity: $opacity-hover;
}
}

128
client/src/styles/pages/_collection.scss Normal file
View File

@@ -0,0 +1,128 @@
@use '../abstracts/variables' as *;
@use '../abstracts/mixins' as *;
.sticky-search {
position: sticky;
top: $spacing-sm;
z-index: $z-sticky;
box-shadow: $shadow-md;
border-radius: $radius-sm;
}
.fade-slide-up {
@include animate-fade-up;
}
.kanji-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax($size-card-min, 1fr));
gap: $spacing-sm;
}
.kanji-card {
@include card-base;
@include hover-lift;
aspect-ratio: 1;
@include flex-column;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
.k-char {
font-size: $font-2xl;
font-weight: $weight-medium;
line-height: $leading-tight;
transition: all 0.3s ease;
}
&.zen-master {
border: 1px solid rgb(255 215 0 / 50%);
background: linear-gradient(135deg, rgb(30 30 36 / 100%) 0%, rgb(45 45 55 / 100%) 100%);
box-shadow: 0 0 15px rgb(255 215 0 / 15%);
animation: zen-pulse 4s infinite ease-in-out;
.k-char {
text-shadow: 0 0 15px rgb(255 215 0 / 60%);
transform: scale(1.1);
}
}
.k-dots {
display: flex;
gap: $spacing-2xs;
margin-top: $spacing-xs;
.dot {
width: $spacing-xs;
height: $spacing-xs;
border-radius: $radius-circle;
background: $color-dot-base;
}
}
.k-bars {
display: flex;
gap: 3px;
width: 60%;
height: 4px;
margin-top: $spacing-sm;
.bar {
flex: 1;
background: rgb(255 255 255 / 10%);
border-radius: 2px;
transition: background-color 0.3s ease;
&.filled {
box-shadow: 0 0 4px rgb(0 0 0 / 30%);
}
}
}
}
@keyframes zen-pulse {
0% {
box-shadow: 0 0 10px rgb(255 215 0 / 10%);
border-color: rgb(255 215 0 / 30%);
}
50% {
box-shadow: 0 0 20px rgb(255 215 0 / 30%);
border-color: rgb(255 215 0 / 80%);
}
100% {
box-shadow: 0 0 10px rgb(255 215 0 / 10%);
border-color: rgb(255 215 0 / 30%);
}
}
.readings-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: $spacing-sm;
text-align: left;
.reading-group {
background: $bg-glass-dark;
padding: $spacing-sm $spacing-md;
border-radius: $radius-md;
.reading-label {
font-size: $font-xs;
color: $color-text-grey;
text-transform: uppercase;
letter-spacing: $tracking-wider;
margin-bottom: $spacing-2xs;
}
.reading-value {
color: $color-text-white;
font-size: $font-sm;
}
}
}

34
client/src/styles/pages/_dashboard.scss Normal file
View File

@@ -0,0 +1,34 @@
@use '../abstracts/variables' as *;
@use '../abstracts/mixins' as *;
.dashboard-layout {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: min-content;
gap: $spacing-lg;
width: 100%;
max-width: $max-width-desktop;
margin: 0 auto;
padding: $padding-page-y $padding-page-x;
box-sizing: border-box;
&.fade-in {
@include animate-fade-up($duration-slow);
}
.grid-area-full {
grid-column: 1 / -1;
}
.stats-split-layout {
grid-column: 1 / -1;
gap: $spacing-lg;
@include grid-responsive($breakpoint-md);
.stats-left,
.stats-right {
@include flex-column($spacing-lg);
}
}
}

47
client/src/styles/pages/_review.scss Normal file
View File

@@ -0,0 +1,47 @@
@use '../abstracts/variables' as *;
.text-shadow {
text-shadow: $text-shadow;
}
.canvas-wrapper {
position: relative;
width: $size-canvas;
height: $size-canvas;
border-radius: $radius-lg;
background: $bg-glass-dark;
box-shadow: $shadow-inset;
.next-fab {
position: absolute;
bottom: -#{$offset-fab};
right: -#{$offset-fab};
z-index: $z-sticky;
}
}
.scale-enter-active,
.scale-leave-active {
transition: all $duration-normal $ease-out-back;
}
.scale-enter-from,
.scale-leave-to {
opacity: 0;
transform: scale(0);
}
.fade-slide-enter-active,
.fade-slide-leave-active {
transition: all $duration-normal $ease-default;
}
.fade-slide-enter-from {
opacity: 0;
transform: translateY($dist-slide-sm);
}
.fade-slide-leave-to {
opacity: 0;
transform: translateY(-#{$dist-slide-sm});
}