aura-web/src/pages/TeamsPage/styles/teams-page-h5.css

327 lines
6.1 KiB
CSS

.h5-page-container {
padding: 0 8px;
}
.teams-page-h5-hero {
border-radius: 16px;
padding: 20px 16px 18px;
background: linear-gradient(135deg, rgba(255,255,255,0.98) 0%, rgba(236,253,245,0.92) 42%, rgba(239,246,255,0.96) 100%);
border: 1px solid rgba(8, 145, 178, 0.12);
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
margin-bottom: 16px;
}
.teams-page-h5-hero-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 16px;
}
.teams-page-h5-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border-radius: 999px;
background: rgba(255,255,255,0.78);
border: 1px solid rgba(8, 145, 178, 0.10);
color: var(--color-text-secondary);
font-size: 11px;
font-weight: 600;
margin-bottom: 12px;
}
.teams-page-h5-title {
margin-bottom: 8px;
font-size: 22px;
}
.teams-page-h5-subtitle {
margin-top: 0;
font-size: 13px;
line-height: 1.6;
}
.teams-page-h5-create-btn {
border-radius: 10px;
height: 40px;
padding: 0 14px;
font-weight: 600;
width: 100%;
}
.teams-page-h5-stats-grid {
display: grid;
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 10px;
}
.teams-page-h5-stat-card {
border-radius: 12px;
padding: 12px 14px;
background: rgba(255,255,255,0.72);
border: 1px solid rgba(255,255,255,0.7);
}
.teams-page-h5-stat-label {
font-size: 11px;
color: var(--color-text-secondary);
margin-bottom: 6px;
}
.teams-page-h5-stat-row {
display: flex;
align-items: baseline;
gap: 6px;
}
.teams-page-h5-stat-value {
font-size: 22px;
font-weight: 700;
color: var(--color-text);
}
.teams-page-h5-stat-chip {
border-radius: 999px;
padding: 3px 6px;
font-size: 10px;
font-weight: 600;
}
.teams-page-h5-stat-chip-brand {
background: var(--color-brand-soft);
color: var(--color-brand);
}
.teams-page-h5-stat-chip-info {
background: var(--color-info-soft);
color: var(--color-info);
}
.teams-page-h5-stat-chip-success {
background: var(--color-success-soft);
color: var(--color-success);
}
.teams-page-h5-list-panel {
background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(252,252,253,1) 100%);
border: 1px solid var(--color-border);
border-radius: 16px;
padding: 12px;
margin-bottom: 16px;
}
.teams-page-h5-list-head {
padding: 4px 6px 10px;
}
.teams-page-h5-section-title {
font-size: 14px;
font-weight: 700;
color: var(--color-text);
margin-bottom: 4px;
}
.teams-page-h5-section-desc {
font-size: 11px;
color: var(--color-text-secondary);
}
.teams-page-h5-nav-item {
padding: 10px 12px;
border-radius: 10px;
cursor: pointer;
margin-bottom: 6px;
background: transparent;
color: var(--color-text-secondary);
font-weight: 500;
border: 1px solid transparent;
}
.teams-page-h5-nav-item.active {
background: rgba(8, 145, 178, 0.10);
color: var(--color-brand);
font-weight: 600;
border: 1px solid rgba(8, 145, 178, 0.16);
}
.teams-page-h5-nav-item-name {
font-size: 13px;
margin-bottom: 3px;
}
.teams-page-h5-nav-item-count {
font-size: 11px;
color: var(--color-text-tertiary);
}
.teams-page-h5-nav-item.active .teams-page-h5-nav-item-count {
color: var(--color-brand);
}
.teams-page-h5-detail-card {
border-radius: 16px;
box-shadow: 0 6px 16px rgba(15, 23, 42, 0.045);
}
.teams-page-web-soft-btn {
border-radius: 8px !important;
}
.teams-page-h5-detail-card .ant-card-body {
padding: 16px !important;
}
.teams-page-h5-detail-head {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 16px;
}
.teams-page-h5-active-title-row {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
margin-bottom: 4px;
}
.teams-page-h5-active-title {
font-size: 18px;
font-weight: 700;
color: var(--color-text);
}
.teams-page-h5-edit-btn {
color: var(--color-text-tertiary);
padding: 0 4px;
}
.teams-page-h5-tag {
border-radius: 999px;
margin: 0;
font-size: 11px;
}
.teams-page-h5-tag-brand {
background: var(--color-brand-soft);
color: var(--color-brand);
}
.teams-page-h5-tag-neutral {
background: var(--color-surface-2);
color: var(--color-text-secondary);
}
.teams-page-h5-mini-grid {
display: grid;
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 10px;
margin-bottom: 16px;
}
.teams-page-h5-mini-card {
border-radius: 12px;
padding: 12px 14px;
border: 1px solid transparent;
}
.teams-page-h5-mini-card-brand {
background: rgba(8, 145, 178, 0.06);
border: 1px solid rgba(8, 145, 178, 0.10);
}
.teams-page-h5-mini-card-success {
background: rgba(34, 197, 94, 0.06);
border: 1px solid rgba(34, 197, 94, 0.10);
}
.teams-page-h5-mini-card-warning {
background: rgba(249, 115, 22, 0.06);
border: 1px solid rgba(249, 115, 22, 0.10);
}
.teams-page-h5-mini-label {
font-size: 11px;
color: var(--color-text-secondary);
margin-bottom: 6px;
}
.teams-page-h5-mini-value {
font-size: 20px;
font-weight: 700;
color: var(--color-text);
}
.teams-page-h5-members-title-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.teams-page-h5-members-title {
font-size: 14px;
font-weight: 700;
color: var(--color-text);
}
.teams-page-h5-member-item {
padding: 10px 0;
}
.teams-page-h5-member-avatar {
width: 36px;
height: 36px;
border-radius: 999px;
background: rgba(8, 145, 178, 0.10);
color: var(--color-brand);
display: flex;
align-items: center;
justify-content: center;
}
.teams-page-h5-member-avatar-icon {
color: var(--color-brand);
font-size: 12px;
}
.teams-page-h5-member-name {
font-weight: 600;
font-size: 14px;
}
.teams-page-h5-member-desc {
display: flex;
flex-direction: column;
gap: 4px;
}
.teams-page-h5-member-email {
font-size: 12px;
}
.teams-page-h5-member-time {
font-size: 11px;
color: var(--color-text-tertiary);
}
.teams-page-h5-tag-role-owner {
background: var(--color-warning-soft);
color: var(--color-warning);
}
.teams-page-h5-tag-role-admin {
background: var(--color-info-soft);
color: var(--color-info);
}
.teams-page-h5-tag-role-member {
background: var(--color-surface-2);
color: var(--color-text-secondary);
}