|
|
|
@ -5,7 +5,7 @@ |
|
|
|
*/ |
|
|
|
defineProps({ |
|
|
|
pattern: { type: String, default: 'ice' }, |
|
|
|
opacity: { type: Number, default: 0.3 }, |
|
|
|
opacity: { type: Number, default: 1 }, |
|
|
|
box: { type: Boolean, default: false } |
|
|
|
}) |
|
|
|
defineOptions({ name: 'SongScrim' }) |
|
|
|
@ -81,34 +81,26 @@ const PATTERNS = { |
|
|
|
display: grid; |
|
|
|
grid-template-columns: repeat(2, 1fr); |
|
|
|
grid-template-rows: repeat(2, 1fr); |
|
|
|
opacity: 0.9; |
|
|
|
} |
|
|
|
.song-scrim--box { |
|
|
|
position: absolute !important; |
|
|
|
border-radius: var(--song-radius-l); |
|
|
|
} |
|
|
|
.song-scrim--box :deep(svg) { |
|
|
|
filter: opacity(0.5); |
|
|
|
} |
|
|
|
.song-scrim__tile { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
mix-blend-mode: multiply; |
|
|
|
/* 降低与底色对比度:浅色模式下提亮纹样(乘变浅),暗色模式下压暗(屏变弱) */ |
|
|
|
filter: brightness(1.6); |
|
|
|
} |
|
|
|
.song-scrim__tile :deep(svg) { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
} |
|
|
|
:global([data-theme='dark']) .song-scrim__tile { |
|
|
|
mix-blend-mode: screen; |
|
|
|
filter: brightness(0.62); |
|
|
|
/* 纹样线条颜色由 --song-scrim-line 按主题决定(低对比、确定性渲染,不用 blend/filter 技巧) */ |
|
|
|
.song-scrim__tile :deep(path), |
|
|
|
.song-scrim__tile :deep(line), |
|
|
|
.song-scrim__tile :deep(circle) { |
|
|
|
stroke: var(--song-scrim-line, rgba(90, 107, 116, 0.16)); |
|
|
|
} |
|
|
|
.song-scrim--box :deep(svg) { |
|
|
|
filter: opacity(0.5) brightness(1.4); |
|
|
|
} |
|
|
|
:global([data-theme='dark']) .song-scrim--box :deep(svg) { |
|
|
|
filter: opacity(0.5) brightness(0.72); |
|
|
|
opacity: 0.5; |
|
|
|
} |
|
|
|
</style> |