NowChess/NowChess-Frontend
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: move history, export import fixed, timer added

Browse Source
This commit is contained in:
shahdlala66
2026-04-22 13:05:09 +02:00
parent a59e2a023b
commit 5951257c99
7 changed files with 628 additions and 214 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/pages/welcome/welcome.component.css
+1 -190
View File
@@ -8,180 +8,6 @@
position: relative;
}
.theme-toggle-container {
position: absolute;
top: 20px;
right: 20px;
z-index: 100;
}
.switch {
display: inline-block;
position: relative;
}
.switch__input {
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
}
.switch__label {
position: relative;
display: inline-block;
width: 120px;
height: 60px;
background-color: #2B2B2B;
border: 5px solid #5B5B5B;
border-radius: 9999px;
cursor: pointer;
transition: all 0.4s cubic-bezier(.46,.03,.52,.96);
}
.switch__indicator {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) translateX(-72%);
display: block;
width: 40px;
height: 40px;
background-color: #7B7B7B;
border-radius: 9999px;
box-shadow: 10px 0px 0 0 rgba(0, 0, 0, 0.2) inset;
transition: all 0.4s cubic-bezier(.46,.03,.52,.96);
}
.switch__indicator::before,
.switch__indicator::after {
position: absolute;
content: '';
display: block;
background-color: #FFFFFF;
border-radius: 9999px;
transition: all 0.4s cubic-bezier(.46,.03,.52,.96);
}
.switch__indicator::before {
top: 7px;
left: 7px;
width: 9px;
height: 9px;
opacity: 0.6;
}
.switch__indicator::after {
bottom: 8px;
right: 6px;
width: 14px;
height: 14px;
opacity: 0.8;
}
.switch__decoration {
position: absolute;
top: 65%;
left: 50%;
display: block;
width: 5px;
height: 5px;
background-color: #FFFFFF;
border-radius: 9999px;
animation: twinkle-stars 0.8s infinite -0.6s;
transition: all 0.4s cubic-bezier(.46,.03,.52,.96);
}
.switch__decoration::before,
.switch__decoration::after {
position: absolute;
display: block;
content: '';
width: 5px;
height: 5px;
background-color: #FFFFFF;
border-radius: 9999px;
}
.switch__decoration::before {
top: -20px;
left: 10px;
opacity: 1;
animation: twinkle-stars 0.6s infinite;
}
.switch__decoration::after {
top: -7px;
left: 30px;
animation: twinkle-stars 0.6s infinite -0.2s;
}
@keyframes twinkle-stars {
50% { opacity: 0.2; }
}
.switch__input:checked + .switch__label {
background-color: #8FB5F5;
border-color: #347CF8;
}
.switch__input:checked + .switch__label .switch__indicator {
background-color: #ECD21F;
box-shadow: none;
transform: translate(-50%, -50%) translateX(72%);
}
.switch__input:checked + .switch__label .switch__indicator::before,
.switch__input:checked + .switch__label .switch__indicator::after {
display: none;
}
.switch__input:checked + .switch__label .switch__decoration {
top: 50%;
transform: translate(0%, -50%);
animation: cloud 8s linear infinite;
width: 20px;
height: 20px;
}
.switch__input:checked + .switch__label .switch__decoration::before {
width: 10px;
height: 10px;
top: auto;
bottom: 0;
left: -8px;
animation: none;
}
.switch__input:checked + .switch__label .switch__decoration::after {
width: 15px;
height: 15px;
top: auto;
bottom: 0;
left: 16px;
animation: none;
}
.switch__input:checked + .switch__label .switch__decoration,
.switch__input:checked + .switch__label .switch__decoration::before,
.switch__input:checked + .switch__label .switch__decoration::after {
border-radius: 9999px 9999px 0 0;
}
.switch__input:checked + .switch__label .switch__decoration::after {
border-bottom-right-radius: 9999px;
}
@keyframes cloud {
0% { transform: translate(0%, -50%); }
50% { transform: translate(-50%, -50%); }
100% { transform: translate(0%, -50%); }
}
.clouds-container {
display: flex;
justify-content: center;
@@ -370,21 +196,6 @@ p {
}
@media (max-width: 768px) {
.theme-toggle-container {
top: 10px;
right: 10px;
}
.switch__label {
width: 100px;
height: 50px;
}
.switch__indicator {
width: 33px;
height: 33px;
}
.welcome-shell {
padding: var(--size-lg);
}
@@ -589,7 +400,7 @@ p {
padding: var(--size-md-padding);
border: var(--border-width) solid var(--color-border);
border-radius: var(--border-radius-md);
background: white;
background: var(--color-bg-input);
color: var(--color-text-primary);
font-family: inherit;
font-size: 1rem;