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

big ui refractor

Browse Source
This commit is contained in:
Rene Kievits
2025-12-23 02:23:44 +01:00
parent 4428a2b7be
commit eaed23a678
62 changed files with 2662 additions and 815 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/styles/pages/_collection.scss
+21 -25
View File
@@ -1,5 +1,4 @@
@use '../abstracts/variables' as *;
@use '../abstracts/mixins' as *;
@use '../abstracts' as *;
.sticky-search {
position: sticky;
@@ -22,11 +21,10 @@
.kanji-card {
@include card-base;
@include hover-lift;
aspect-ratio: 1;
@include flex-column;
display: flex;
flex-direction: column;
gap: 0;
align-items: center;
justify-content: center;
position: relative;
@@ -36,17 +34,17 @@
font-size: $font-2xl;
font-weight: $weight-medium;
line-height: $leading-tight;
transition: all 0.3s ease;
transition: all $duration-normal 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%);
border: $border-width-sm solid $color-gold-glow;
background: linear-gradient(135deg, $color-surface 0%, $color-surface-lighter 100%);
box-shadow: 0 0 0.9375rem $color-gold-glow;
animation: zen-pulse 4s infinite ease-in-out;
.k-char {
text-shadow: 0 0 15px rgb(255 215 0 / 60%);
text-shadow: 0 0 0.9375rem $color-gold-glow-strong;
transform: scale(1.1);
}
}
@@ -66,19 +64,19 @@
.k-bars {
display: flex;
gap: 3px;
gap: 0.1875rem;
width: 60%;
height: 4px;
height: 0.25rem;
margin-top: $spacing-sm;
.bar {
flex: 1;
background: rgb(255 255 255 / 10%);
border-radius: 2px;
transition: background-color 0.3s ease;
background: $color-overlay-white;
border-radius: $radius-xs;
transition: background-color $duration-normal ease;
&.filled {
box-shadow: 0 0 4px rgb(0 0 0 / 30%);
box-shadow: $shadow-srs-fill;
}
}
}
@@ -86,18 +84,16 @@
@keyframes zen-pulse {
0% {
box-shadow: 0 0 10px rgb(255 215 0 / 10%);
border-color: rgb(255 215 0 / 30%);
box-shadow: 0 0 0.625rem $color-gold-border;
border-color: $color-gold-border;
}
50% {
box-shadow: 0 0 20px rgb(255 215 0 / 30%);
border-color: rgb(255 215 0 / 80%);
box-shadow: 0 0 1.25rem $color-gold-border;
border-color: $color-gold-glow;
}
100% {
box-shadow: 0 0 10px rgb(255 215 0 / 10%);
border-color: rgb(255 215 0 / 30%);
box-shadow: 0 0 0.625rem $color-gold-border;
border-color: $color-gold-border;
}
}