fix: add --surface-subtle token, restore info grouping, and apply theme-aware favorite color

- Add --surface-subtle (oklch 3% opacity) to replace rgba(0,0,0,0.03)
- Fix info items, creator-info, civitai-view, modal-send-btn, header-actions
  to use --surface-subtle instead of --surface-hover
- Keep true hover states on --surface-hover
- Use light #d4a017 / dark #ffc107 for --favorite-color based on theme
- Replace hardcoded #ffc107 and #d4a017 with var(--favorite-color)
This commit is contained in:
Will Miao
2026-05-21 21:14:07 +08:00
parent 08afb05ece
commit eb22054580
25 changed files with 191 additions and 121 deletions

View File

@@ -1,12 +1,12 @@
/* 卡片网格布局 */
/* Card grid layout */
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); /* Base size */
gap: 12px; /* Consistent gap for both row and column spacing */
row-gap: 20px; /* Increase vertical spacing between rows */
margin-top: var(--space-2);
padding-top: 4px; /* 添加顶部内边距,为悬停动画提供空间 */
padding-bottom: 4px; /* 添加底部内边距,为悬停动画提供空间 */
padding-top: 4px;
padding-bottom: 4px;
width: 100%; /* Ensure it takes full width of container */
max-width: 1400px; /* Base container width */
margin-left: auto;
@@ -360,15 +360,19 @@
align-self: flex-end;
}
.card-actions i:hover {
.card-actions i:hover,
.card-actions i:focus-visible {
opacity: 0.9;
transform: scale(1.1);
background-color: rgba(255, 255, 255, 0.1);
outline: 2px solid var(--lora-accent);
outline-offset: 2px;
border-radius: var(--border-radius-xs);
}
.favorite-active {
color: #d4a017 !important;
text-shadow: 0 0 5px rgba(212, 160, 23, 0.5);
color: var(--favorite-color) !important;
text-shadow: 0 0 5px var(--favorite-glow);
}
@media (max-width: 1200px) {
@@ -404,9 +408,13 @@
text-shadow: none;
}
.model-link a:hover {
.model-link a:hover,
.model-link a:focus-visible {
opacity: 0.8;
text-decoration: none;
outline: 2px solid var(--lora-accent);
outline-offset: 2px;
border-radius: var(--border-radius-xs);
}
/* Updated model name to fix text cutoff issues */