style(theme-2): replace gold components and colors with blue-white scheme on desktop
This commit is contained in:
@@ -1,4 +1,4 @@
|
||||
<script setup lang="ts">
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
@@ -276,8 +276,8 @@ onUnmounted(stopAutoPlay);
|
||||
filter: none;
|
||||
box-shadow:
|
||||
0 16px 40px rgba(0, 0, 0, 0.5),
|
||||
0 0 28px rgba(212, 175, 55, 0.22),
|
||||
0 0 56px rgba(212, 175, 55, 0.1);
|
||||
0 0 28px rgba(0, 102, 204, 0.22),
|
||||
0 0 56px rgba(0, 102, 204, 0.1);
|
||||
animation: banner-breathe 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@@ -292,16 +292,16 @@ onUnmounted(stopAutoPlay);
|
||||
transform: scale(1);
|
||||
box-shadow:
|
||||
0 16px 40px rgba(0, 0, 0, 0.5),
|
||||
0 0 22px rgba(212, 175, 55, 0.16),
|
||||
0 0 48px rgba(212, 175, 55, 0.08);
|
||||
0 0 22px rgba(0, 102, 204, 0.16),
|
||||
0 0 48px rgba(0, 102, 204, 0.08);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scale(1.008);
|
||||
box-shadow:
|
||||
0 18px 44px rgba(0, 0, 0, 0.52),
|
||||
0 0 32px rgba(212, 175, 55, 0.26),
|
||||
0 0 60px rgba(212, 175, 55, 0.12);
|
||||
0 0 32px rgba(0, 102, 204, 0.26),
|
||||
0 0 60px rgba(0, 102, 204, 0.12);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -320,13 +320,13 @@ onUnmounted(stopAutoPlay);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, rgba(212, 175, 55, 0.12), #1a1a1a);
|
||||
background: linear-gradient(135deg, rgba(0, 102, 204, 0.12), #1a1a1a);
|
||||
}
|
||||
|
||||
.fallback-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
color: rgba(212, 175, 55, 0.35);
|
||||
color: rgba(0, 102, 204, 0.35);
|
||||
}
|
||||
|
||||
.click-hint {
|
||||
@@ -348,7 +348,7 @@ onUnmounted(stopAutoPlay);
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: 50%;
|
||||
border: 1px solid rgba(212, 175, 55, 0.45);
|
||||
border: 1px solid rgba(0, 102, 204, 0.45);
|
||||
animation: click-ring-pulse 2.8s ease-out infinite;
|
||||
}
|
||||
|
||||
@@ -356,7 +356,7 @@ onUnmounted(stopAutoPlay);
|
||||
position: relative;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
color: rgba(212, 175, 55, 0.88);
|
||||
color: rgba(0, 102, 204, 0.88);
|
||||
animation: click-icon-bob 2.8s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@@ -410,7 +410,7 @@ onUnmounted(stopAutoPlay);
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid rgba(212, 175, 55, 0.4);
|
||||
border: 1px solid rgba(0, 102, 204, 0.4);
|
||||
background: rgba(10, 10, 10, 0.75);
|
||||
color: var(--primary-light);
|
||||
display: flex;
|
||||
@@ -426,7 +426,7 @@ onUnmounted(stopAutoPlay);
|
||||
}
|
||||
|
||||
.nav-btn:hover {
|
||||
background: rgba(212, 175, 55, 0.2);
|
||||
background: rgba(0, 102, 204, 0.2);
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
@@ -459,7 +459,7 @@ onUnmounted(stopAutoPlay);
|
||||
.dot.active {
|
||||
width: 22px;
|
||||
border-radius: 4px;
|
||||
background: var(--gradient-gold);
|
||||
background: var(--primary);
|
||||
}
|
||||
|
||||
.dot:hover:not(.active) {
|
||||
|
||||
Reference in New Issue
Block a user