init
This commit is contained in:
Rene Kievits
26
client/src/styles/components/_buttons.scss
Normal file
26
client/src/styles/components/_buttons.scss
Normal 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
147
client/src/styles/components/_kanji.scss
Normal 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
174
client/src/styles/components/_widgets.scss
Normal 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;
|
||||
}
|
||||
Reference in New Issue
Block a user