diff --git a/themes/Ying/assets/css/main.css b/themes/Ying/assets/css/main.css index 498f2a54..eb34eb31 100644 --- a/themes/Ying/assets/css/main.css +++ b/themes/Ying/assets/css/main.css @@ -40,6 +40,7 @@ html { [data-theme="dark"] body { color: var(--text-content-dark-color); background-color: var(--background-dark-color); + background-image: none; } [data-theme="dark"] .main { @@ -5706,3 +5707,84 @@ a.link-card:hover .link-card-arrow { font-size: inherit !important; color: var(--accent, #3b82f6) !important; } + +/* ==================== 视频样式 ==================== */ + +.post-video-wrapper { + margin: 1.5rem 0; + border-radius: 12px; + overflow: hidden; + background: #000; + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); +} + +[data-theme="dark"] .post-video-wrapper { + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4); +} + +.video-container { + position: relative; + width: 100%; + max-width: 100%; +} + +.video-container video { + display: block; + width: 100%; + height: auto; + max-height: 80vh; + border-radius: 12px; + outline: none; +} + +.video-container video::-webkit-media-controls-panel { + background: linear-gradient(transparent, rgba(0, 0, 0, 0.4)); +} + +.video-caption { + padding: 0.75rem 1rem; + text-align: center; + font-size: 0.85rem; + color: #6b7280; + background: #f9fafb; + border-top: 1px solid #e5e7eb; +} + +[data-theme="dark"] .video-caption { + color: #9ca3af; + background: #1f2937; + border-top-color: #374151; +} + +/* Bilibili / YouTube 嵌入 */ +.video-embed { + position: relative; + width: 100%; + padding-bottom: 56.25%; /* 16:9 */ + height: 0; + overflow: hidden; + border-radius: 12px; +} + +.video-embed iframe { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border: none; + border-radius: 12px; +} + +/* 文章内直接写