github-personal/www.shadoll
1
0
Fork 0
mirror of https://github.com/shadoll/www.shadoll.git synced 2026-08-28 03:28:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: enhance logo animations with interactive tilt and mixed mode support

Browse Source
This commit is contained in:
sha
2025-12-28 04:25:53 +02:00
parent ae1f607424
commit c3e092e305
3 changed files with 334 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/styles.css
+131 -46
View File
@@ -185,6 +185,12 @@ html, body {
}
}
/* Interactive Tilt - responds to cursor/gyroscope, controlled by JavaScript */
.logo--interactive {
transition: transform 0.15s ease-out;
will-change: transform;
}
/* All Full Logo Animations Combined */
.logo--all {
animation:
@@ -357,19 +363,25 @@ html, body {
top: 20px;
left: 50%;
transform: translateX(-50%) translateY(-100px);
background: rgba(0, 0, 0, 0.85);
background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.08));
color: #fff;
padding: 16px 24px;
border-radius: 8px;
border-radius: 16px;
font-size: 14px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.3),
0 2px 8px rgba(0, 0, 0, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.3),
inset 0 -1px 0 rgba(0, 0, 0, 0.1);
z-index: 999;
opacity: 0;
transition: all 0.3s ease;
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
pointer-events: none;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(40px) saturate(180%);
-webkit-backdrop-filter: blur(40px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.25);
min-width: 200px;
}
.toast.show {
@@ -378,27 +390,29 @@ html, body {
}
.toast-title {
font-weight: bold;
font-weight: 600;
margin-bottom: 4px;
color: var(--gradient-color-1);
color: rgba(255, 255, 255, 0.95);
font-size: 14px;
}
.toast-message {
font-size: 13px;
opacity: 0.9;
color: rgba(255, 255, 255, 0.85);
}
/* ===== Help Button ===== */
.help-button {
position: fixed;
top: 20px;
bottom: 20px;
right: 20px;
width: 44px;
height: 44px;
padding: 0;
border-radius: 50%;
background: rgba(0, 0, 0, 0.75);
color: #fff;
border: 2px solid rgba(255, 255, 255, 0.2);
background: transparent;
color: rgba(255, 255, 255, 0.5);
border: 2px solid transparent;
font-size: 24px;
font-weight: bold;
cursor: pointer;
@@ -407,15 +421,23 @@ html, body {
align-items: center;
justify-content: center;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
backdrop-filter: none;
box-shadow: none;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.help-button:hover {
background: rgba(102, 126, 234, 0.9);
border-color: rgba(255, 255, 255, 0.4);
background: linear-gradient(135deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.1));
border-color: rgba(255, 255, 255, 0.3);
color: #fff;
transform: scale(1.1);
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.4),
inset 0 -1px 0 rgba(0, 0, 0, 0.1);
backdrop-filter: blur(40px) saturate(180%);
-webkit-backdrop-filter: blur(40px) saturate(180%);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.help-button:active {
@@ -430,16 +452,21 @@ html, body {
width: 500px;
max-width: calc(100vw - 40px);
max-height: calc(100vh - 120px);
background: rgba(20, 20, 30, 0.95);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
backdrop-filter: blur(20px);
background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.05));
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 20px;
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.3),
0 2px 8px rgba(0, 0, 0, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.3),
inset 0 -1px 0 rgba(0, 0, 0, 0.1);
backdrop-filter: blur(40px) saturate(180%);
-webkit-backdrop-filter: blur(40px) saturate(180%);
z-index: 1000;
opacity: 0;
transform: translateY(-20px) scale(0.95);
pointer-events: none;
transition: all 0.3s ease;
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
overflow: hidden;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}
@@ -455,8 +482,10 @@ html, body {
justify-content: space-between;
align-items: center;
padding: 20px 24px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(102, 126, 234, 0.15);
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05));
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
.help-header h2 {
@@ -469,22 +498,26 @@ html, body {
.help-close {
width: 32px;
height: 32px;
border: none;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05));
color: #fff;
font-size: 24px;
line-height: 1;
border-radius: 6px;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.help-close:hover {
background: rgba(255, 255, 255, 0.2);
background: linear-gradient(135deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.1));
border-color: rgba(255, 255, 255, 0.3);
transform: rotate(90deg);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.help-content {
@@ -495,21 +528,25 @@ html, body {
}
.help-content::-webkit-scrollbar {
width: 8px;
width: 10px;
}
.help-content::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.05);
border-radius: 4px;
border-radius: 5px;
margin: 4px 0;
}
.help-content::-webkit-scrollbar-thumb {
background: rgba(102, 126, 234, 0.5);
border-radius: 4px;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.15));
border-radius: 5px;
border: 2px solid transparent;
background-clip: padding-box;
}
.help-content::-webkit-scrollbar-thumb:hover {
background: rgba(102, 126, 234, 0.7);
background: linear-gradient(135deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.25));
background-clip: padding-box;
}
.help-section {
@@ -523,7 +560,7 @@ html, body {
.help-section h3 {
font-size: 14px;
font-weight: 600;
color: var(--gradient-color-1);
color: rgba(255, 255, 255, 0.9);
margin: 0 0 12px 0;
text-transform: uppercase;
letter-spacing: 0.5px;
@@ -541,16 +578,38 @@ html, body {
display: inline-block;
min-width: 28px;
padding: 4px 8px;
margin-right: 12px;
background: rgba(102, 126, 234, 0.2);
border: 1px solid rgba(102, 126, 234, 0.4);
border-radius: 4px;
margin: 0 6px;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 6px;
font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Courier New', monospace;
font-size: 13px;
font-weight: 600;
text-align: center;
color: var(--gradient-color-1);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
color: rgba(255, 255, 255, 0.95);
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.25);
cursor: pointer;
transition: all 0.2s ease;
user-select: none;
-webkit-user-select: none;
}
.help-item kbd:hover {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.15));
border-color: rgba(255, 255, 255, 0.4);
transform: translateY(-1px);
box-shadow:
0 4px 8px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.help-item kbd:active {
transform: translateY(0);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.help-section-url {
@@ -562,13 +621,13 @@ html, body {
.help-code {
background: rgba(0, 0, 0, 0.4);
padding: 12px;
border-radius: 6px;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.15);
font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Courier New', monospace;
font-size: 12px;
color: var(--gradient-color-3);
color: rgba(255, 255, 255, 0.85);
margin-bottom: 16px;
word-break: break-all;
border: 1px solid rgba(249, 147, 251, 0.2);
}
.help-params {
@@ -582,7 +641,7 @@ html, body {
}
.help-params strong {
color: var(--gradient-color-1);
color: rgba(255, 255, 255, 0.9);
font-weight: 600;
margin-right: 8px;
}
@@ -650,6 +709,19 @@ html, body {
.footer p {
font-size: 12px;
}
.help-button {
bottom: 15px;
right: 15px;
font-size: 20px;
width: 40px;
height: 40px;
}
.help-button:hover {
width: 40px;
height: 40px;
}
}
@media (max-width: 480px) {
@@ -713,6 +785,19 @@ html, body {
.footer p {
font-size: 11px;
}
.help-button {
bottom: 12px;
right: 12px;
font-size: 18px;
width: 36px;
height: 36px;
}
.help-button:hover {
width: 36px;
height: 36px;
}
}
/* ===== Accessibility ===== */