congsh/gamegroup2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: beautify all team components and pages with dark gaming theme

Browse Source 
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
congsh
2026-04-17 17:38:27 +08:00
parent 5c007ac069
commit d0c75d25cf
10 changed files with 1020 additions and 373 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/team/InvitationCard.vue
+46 -25
View File
@@ -85,17 +85,23 @@ async function rejectInvitation() {
<style scoped>
.invitation-card {
background: var(--el-bg-color);
border-radius: 12px;
padding: 16px;
border: 1px solid var(--el-border-color);
background: var(--gg-bg-card);
border: 1px solid var(--gg-border);
border-radius: var(--gg-radius-md);
padding: 20px;
transition: border-color 0.2s, box-shadow 0.2s;
}
.invitation-card:hover {
border-color: var(--gg-primary);
box-shadow: 0 0 16px rgba(99, 102, 241, 0.12);
}
.invitation-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
margin-bottom: 14px;
}
.avatar {
@@ -103,6 +109,7 @@ async function rejectInvitation() {
height: 48px;
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--gg-border);
}
.invitation-info {
@@ -113,32 +120,35 @@ async function rejectInvitation() {
.inviter-name {
font-size: 15px;
font-weight: 600;
font-weight: 700;
color: var(--gg-text);
}
.invitation-text {
font-size: 13px;
color: var(--el-text-color-secondary);
color: var(--gg-text-secondary);
}
.session-info {
display: flex;
flex-direction: column;
gap: 4px;
padding: 12px;
background: var(--el-bg-color-page);
border-radius: 8px;
margin-bottom: 12px;
padding: 12px 14px;
background: var(--gg-bg);
border-radius: var(--gg-radius-sm);
margin-bottom: 14px;
border: 1px solid var(--gg-border);
}
.game-name {
font-size: 14px;
font-weight: 500;
font-weight: 600;
color: var(--gg-text);
}
.session-name {
font-size: 12px;
color: var(--el-text-color-secondary);
color: var(--gg-text-secondary);
}
.invitation-actions {
@@ -150,29 +160,32 @@ async function rejectInvitation() {
flex: 1;
padding: 10px;
border: none;
border-radius: 8px;
border-radius: var(--gg-radius-sm);
font-size: 14px;
font-weight: 500;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
transition: opacity 0.2s, box-shadow 0.2s;
}
.accept {
background: var(--el-color-primary);
background: var(--gg-gradient-success);
color: white;
}
.accept:hover {
background: var(--el-color-primary-light-3);
opacity: 0.9;
box-shadow: 0 0 12px rgba(34, 197, 94, 0.3);
}
.reject {
background: var(--el-fill-color);
color: var(--el-text-color-primary);
background: var(--gg-bg-elevated);
color: var(--gg-text);
border: 1px solid var(--gg-border);
}
.reject:hover {
background: var(--el-fill-color-dark);
border-color: var(--gg-danger);
color: var(--gg-danger);
}
.reject-input {
@@ -181,15 +194,23 @@ async function rejectInvitation() {
.reject-input textarea {
width: 100%;
padding: 8px;
border: 1px solid var(--el-border-color);
border-radius: 6px;
padding: 10px 12px;
border: 1px solid var(--gg-border);
border-radius: var(--gg-radius-sm);
font-size: 13px;
resize: none;
background: var(--gg-bg);
color: var(--gg-text);
font-family: inherit;
}
.reject-input textarea::placeholder {
color: var(--gg-text-muted);
}
.reject-input textarea:focus {
outline: none;
border-color: var(--el-color-primary);
border-color: var(--gg-primary);
box-shadow: 0 0 8px rgba(99, 102, 241, 0.15);
}
</style>