1758
This commit is contained in:
Vaica committed
1 parent
bf85f06292
commit
c203d49aec
3 files changed
+561
-234
No files matched your search
@@ -1,9 +1,540 @@
|
||||
/* ============================================================
|
||||
Shortcodes 样式 - 实况照片、语音、音乐卡片
|
||||
移植自 Hugo-Theme-Amigo
|
||||
============================================================ */
|
||||
/* ==========================================================================
|
||||
Shortcodes 样式 - 1:1 移植自 Hugo-Theme-Amigo
|
||||
========================================================================== */
|
||||
|
||||
/* ---- CSS 变量定义（Amigo 主题） ---- */
|
||||
:root {
|
||||
/* 字体 */
|
||||
--font-family: 'ZQL', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
|
||||
|
||||
/* 核心配色 - 亮色模式 */
|
||||
--bg-body: #f2f2f2;
|
||||
--bg-card: #ffffff;
|
||||
--bg-header: rgba(255, 255, 255, 0.85);
|
||||
--bg-header-transparent: rgba(255, 255, 255, 0);
|
||||
--bg-hover: rgba(0, 0, 0, 0.05);
|
||||
--bg-active: rgba(0, 0, 0, 0.1);
|
||||
--bg-input: #f7f7f7;
|
||||
--bg-code: rgba(27, 31, 35, 0.05);
|
||||
--bg-code-block: #f6f8fa;
|
||||
--bg-popover: #ffffff;
|
||||
--bg-mask: rgba(20, 20, 20, 0.85);
|
||||
|
||||
/* 文字颜色 */
|
||||
--text-main: #333333;
|
||||
--text-desc: #777777;
|
||||
--text-muted: #999999;
|
||||
--text-link: #576b95;
|
||||
--text-white: #ffffff;
|
||||
--text-on-cover: #ffffff;
|
||||
--text-quote: #6a737d;
|
||||
|
||||
/* 功能性颜色 */
|
||||
--theme-color: #07c160; /* 微信绿 */
|
||||
--border-main: #eeeeee;
|
||||
--border-quote: #dfe2e5;
|
||||
--shadow-main: rgba(0, 0, 0, 0.03);
|
||||
--shadow-header: rgba(0, 0, 0, 0.05);
|
||||
--shadow-popover: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||||
--shadow-button: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
--shadow-button-hover: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
--shadow-card: 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||
--shadow-text: 0 1px 1px rgba(0, 0, 0, 0.5);
|
||||
|
||||
/* 布局参数 */
|
||||
--max-width: 680px;
|
||||
}
|
||||
|
||||
/* 深色模式变量 */
|
||||
[data-theme="dark"] {
|
||||
--bg-body: #111111;
|
||||
--bg-card: #1e1e1e;
|
||||
--bg-header: rgba(30, 30, 30, 0.85);
|
||||
--bg-header-transparent: rgba(30, 30, 30, 0);
|
||||
--bg-hover: rgba(255, 255, 255, 0.1);
|
||||
--bg-active: rgba(255, 255, 255, 0.15);
|
||||
--bg-input: #222222;
|
||||
--bg-code: rgba(200, 200, 200, 0.1);
|
||||
--bg-code-block: #2d2d2d;
|
||||
--bg-popover: #2d2d2d;
|
||||
--bg-mask: rgba(0, 0, 0, 0.9);
|
||||
|
||||
--text-main: #e0e0e0;
|
||||
--text-desc: #a0a0a0;
|
||||
--text-muted: #777777;
|
||||
--text-link: #7a95cc;
|
||||
--text-quote: #999999;
|
||||
|
||||
--border-main: #333333;
|
||||
--border-quote: #444444;
|
||||
--shadow-main: rgba(0, 0, 0, 0.3);
|
||||
--shadow-header: rgba(0, 0, 0, 0.5);
|
||||
--shadow-popover: 0 4px 20px rgba(0, 0, 0, 0.4);
|
||||
--shadow-button: 0 2px 8px rgba(0, 0, 0, 0.3);
|
||||
--shadow-button-hover: 0 4px 12px rgba(0, 0, 0, 0.45);
|
||||
--shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3);
|
||||
--shadow-text: 0 1px 1px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Voice Bubble - 语音气泡（1:1 移植自 Amigo）
|
||||
========================================================================== */
|
||||
|
||||
.amigo-voice-bubble {
|
||||
position: relative;
|
||||
background: #42c27a;
|
||||
color: #111;
|
||||
width: auto;
|
||||
max-width: 200px;
|
||||
min-width: 100px;
|
||||
height: 36px;
|
||||
border-radius: 8px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
padding: 0 18px;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
transition: background 0.2s, transform 0.1s;
|
||||
}
|
||||
|
||||
/* 左侧尾巴 */
|
||||
.amigo-voice-bubble::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: -8px;
|
||||
top: 14px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-right: 10px solid #42c27a;
|
||||
border-top: 6px solid transparent;
|
||||
border-bottom: 6px solid transparent;
|
||||
}
|
||||
|
||||
.amigo-voice-bubble:active {
|
||||
transform: scale(0.97);
|
||||
}
|
||||
|
||||
.amigo-voice-bubble.is-playing {
|
||||
background: #38b56e;
|
||||
}
|
||||
|
||||
.amigo-voice-bubble.is-playing::before {
|
||||
border-right-color: #38b56e;
|
||||
}
|
||||
|
||||
/* 语音图标动画 */
|
||||
.amigo-voice-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
height: 16px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.amigo-voice-icon span {
|
||||
display: block;
|
||||
width: 3px;
|
||||
border-radius: 2px;
|
||||
background: currentColor;
|
||||
animation: amigo-voice-wave 1.2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.amigo-voice-icon span:nth-child(1) {
|
||||
height: 8px;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.amigo-voice-icon span:nth-child(2) {
|
||||
height: 12px;
|
||||
animation-delay: 0.15s;
|
||||
}
|
||||
|
||||
.amigo-voice-icon span:nth-child(3) {
|
||||
height: 6px;
|
||||
animation-delay: 0.3s;
|
||||
}
|
||||
|
||||
@keyframes amigo-voice-wave {
|
||||
0%, 100% { transform: scaleY(0.5); }
|
||||
50% { transform: scaleY(1); }
|
||||
}
|
||||
|
||||
.amigo-voice-duration {
|
||||
color: #111;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 首页语音气泡：柔和风格 */
|
||||
.moments-feed .amigo-voice-bubble {
|
||||
background: var(--bg-hover);
|
||||
color: var(--text-main);
|
||||
border: 1px solid var(--border-main);
|
||||
height: 34px;
|
||||
min-width: 180px;
|
||||
max-width: 170px;
|
||||
padding: 0 14px;
|
||||
font-size: 15px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.moments-feed .amigo-voice-bubble::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.moments-feed .amigo-voice-bubble.is-playing {
|
||||
background: var(--bg-active);
|
||||
}
|
||||
|
||||
.moments-feed .amigo-voice-icon span {
|
||||
background: var(--text-desc);
|
||||
}
|
||||
|
||||
.moments-feed .amigo-voice-duration {
|
||||
color: var(--text-desc);
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Music Card - 音乐卡片（1:1 移植自 Amigo）
|
||||
========================================================================== */
|
||||
|
||||
.amigo-music-card {
|
||||
--music-accent: #d43c33;
|
||||
--music-progress: 0%;
|
||||
--music-card-bg: #f7f7f8;
|
||||
--music-card-border: rgba(0, 0, 0, 0.05);
|
||||
--music-card-hover-border: rgba(0, 0, 0, 0.08);
|
||||
--music-card-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
|
||||
--music-cover-bg: #ececef;
|
||||
--music-cover-image-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
|
||||
--music-title-color: var(--text-main);
|
||||
--music-artist-color: var(--text-desc);
|
||||
--music-meta-color: var(--text-muted);
|
||||
--music-button-border: rgba(0, 0, 0, 0.05);
|
||||
--music-button-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 248, 249, 0.92));
|
||||
--music-button-color: color-mix(in srgb, var(--music-accent) 60%, #111 40%);
|
||||
--music-button-shadow: 0 6px 12px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
|
||||
--music-track-bg: rgba(0, 0, 0, 0.06);
|
||||
--music-track-fill-shadow: 0 1px 3px color-mix(in srgb, var(--music-accent) 30%, transparent);
|
||||
--music-thumb-bg: #fff;
|
||||
--music-thumb-border: var(--music-accent);
|
||||
--music-thumb-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
|
||||
--music-equalizer-bg: rgba(0, 0, 0, 0.55);
|
||||
padding: 12px;
|
||||
border-radius: 14px;
|
||||
border: 1px solid var(--music-card-border);
|
||||
background: var(--music-card-bg);
|
||||
box-shadow: var(--music-card-shadow);
|
||||
transition: border-color 0.2s ease;
|
||||
}
|
||||
|
||||
.amigo-music-card__hero {
|
||||
display: grid;
|
||||
grid-template-columns: 62px minmax(0, 1fr);
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.amigo-music-card__art {
|
||||
position: relative;
|
||||
width: 62px;
|
||||
min-width: 62px;
|
||||
border-radius: 11px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.amigo-music-card__cover {
|
||||
width: 62px;
|
||||
height: 62px;
|
||||
border-radius: 11px;
|
||||
background: var(--music-cover-bg);
|
||||
}
|
||||
|
||||
.amigo-music-card__cover--image {
|
||||
display: block;
|
||||
object-fit: cover;
|
||||
box-shadow: var(--music-cover-image-shadow);
|
||||
}
|
||||
|
||||
.amigo-music-card__meta {
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.amigo-music-card__title {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
color: var(--music-title-color);
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
line-height: 1.22;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.amigo-music-card__subtitle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.amigo-music-card__subtitle > span {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.amigo-music-card__artist {
|
||||
overflow: hidden;
|
||||
font-size: 12px;
|
||||
line-height: 1.3;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
color: var(--music-artist-color);
|
||||
}
|
||||
|
||||
.amigo-music-card__play {
|
||||
position: absolute;
|
||||
right: 4px;
|
||||
bottom: 4px;
|
||||
z-index: 2;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border: 1px solid var(--music-button-border);
|
||||
border-radius: 50%;
|
||||
background: var(--music-button-bg);
|
||||
color: var(--music-button-color);
|
||||
box-shadow: var(--music-button-shadow);
|
||||
cursor: pointer;
|
||||
transition: border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
|
||||
}
|
||||
|
||||
.amigo-music-card__play-icon {
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin-left: 1px;
|
||||
border-top: 4px solid transparent;
|
||||
border-bottom: 4px solid transparent;
|
||||
border-left: 6px solid;
|
||||
}
|
||||
|
||||
.amigo-music-card[data-playing="true"] .amigo-music-card__play-icon {
|
||||
width: 6px;
|
||||
height: 8px;
|
||||
margin-left: 0;
|
||||
border: 0;
|
||||
background: linear-gradient(90deg, currentColor 0 2px, transparent 2px 4px, currentColor 4px 6px, transparent 6px 100%);
|
||||
}
|
||||
|
||||
.amigo-music-card__equalizer {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: 5px;
|
||||
z-index: 2;
|
||||
display: inline-flex;
|
||||
align-items: end;
|
||||
gap: 2px;
|
||||
width: 0;
|
||||
height: 12px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
border-radius: 999px;
|
||||
background: var(--music-equalizer-bg);
|
||||
opacity: 0;
|
||||
transition: width 0.16s ease, padding 0.16s ease, opacity 0.16s ease;
|
||||
}
|
||||
|
||||
.amigo-music-card[data-playing="true"] .amigo-music-card__equalizer {
|
||||
width: 16px;
|
||||
padding: 2px 3px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.amigo-music-card__equalizer span {
|
||||
width: 3px;
|
||||
height: 4px;
|
||||
border-radius: 999px;
|
||||
background: #fff;
|
||||
transform-origin: bottom center;
|
||||
}
|
||||
|
||||
.amigo-music-card[data-playing="true"] .amigo-music-card__equalizer span {
|
||||
animation: amigo-music-bars 1s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.amigo-music-card[data-playing="true"] .amigo-music-card__equalizer span:nth-child(2) {
|
||||
animation-delay: 0.12s;
|
||||
}
|
||||
|
||||
.amigo-music-card[data-playing="true"] .amigo-music-card__equalizer span:nth-child(3) {
|
||||
animation-delay: 0.24s;
|
||||
}
|
||||
|
||||
@keyframes amigo-music-bars {
|
||||
0%, 100% { height: 4px; }
|
||||
50% { height: 12px; }
|
||||
}
|
||||
|
||||
/* 时间线 */
|
||||
.amigo-music-card__timeline {
|
||||
--music-track-height: 4px;
|
||||
--music-thumb-size: 12px;
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(0, 1fr) auto;
|
||||
grid-template-areas: "seek seek seek" "current . duration";
|
||||
align-items: center;
|
||||
margin-top: 6px;
|
||||
row-gap: 6px;
|
||||
column-gap: 8px;
|
||||
}
|
||||
|
||||
.amigo-music-card__time {
|
||||
min-width: 28px;
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
font-variant-numeric: tabular-nums;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.amigo-music-card__time--current {
|
||||
grid-area: current;
|
||||
text-align: left;
|
||||
color: var(--music-meta-color);
|
||||
}
|
||||
|
||||
.amigo-music-card__time--duration {
|
||||
grid-area: duration;
|
||||
text-align: right;
|
||||
color: var(--music-meta-color);
|
||||
}
|
||||
|
||||
.amigo-music-card__seek-wrap {
|
||||
grid-area: seek;
|
||||
position: relative;
|
||||
height: var(--music-thumb-size);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.amigo-music-card__seek {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 100%;
|
||||
height: var(--music-track-height);
|
||||
border-radius: 999px;
|
||||
background: var(--music-track-bg);
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.amigo-music-card__seek::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: var(--music-thumb-size);
|
||||
height: var(--music-thumb-size);
|
||||
border-radius: 50%;
|
||||
background: var(--music-thumb-bg);
|
||||
border: 2px solid var(--music-thumb-border);
|
||||
box-shadow: var(--music-thumb-shadow);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.amigo-music-card__seek::-moz-range-thumb {
|
||||
width: var(--music-thumb-size);
|
||||
height: var(--music-thumb-size);
|
||||
border-radius: 50%;
|
||||
background: var(--music-thumb-bg);
|
||||
border: 2px solid var(--music-thumb-border);
|
||||
box-shadow: var(--music-thumb-shadow);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.amigo-music-card__seek-thumb {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: var(--music-thumb-size);
|
||||
height: var(--music-thumb-size);
|
||||
border-radius: 50%;
|
||||
background: var(--music-thumb-bg);
|
||||
border: 2px solid var(--music-thumb-border);
|
||||
box-shadow: var(--music-thumb-shadow);
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
transition: opacity 0.15s ease;
|
||||
}
|
||||
|
||||
.amigo-music-card__seek:active ~ .amigo-music-card__seek-thumb {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* 响应式 */
|
||||
@media (max-width: 640px) {
|
||||
.amigo-music-card {
|
||||
padding: 11px;
|
||||
}
|
||||
.amigo-music-card__hero {
|
||||
grid-template-columns: 56px minmax(0, 1fr);
|
||||
gap: 10px;
|
||||
}
|
||||
.amigo-music-card__art,
|
||||
.amigo-music-card__cover {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
}
|
||||
.amigo-music-card__title {
|
||||
font-size: 15px;
|
||||
}
|
||||
.amigo-music-card__play {
|
||||
right: 3px;
|
||||
bottom: 3px;
|
||||
}
|
||||
.amigo-music-card__timeline {
|
||||
--music-thumb-size: 11px;
|
||||
row-gap: 5px;
|
||||
}
|
||||
.amigo-music-card__time {
|
||||
min-width: 24px;
|
||||
font-size: 9px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 深色模式 */
|
||||
[data-theme="dark"] .amigo-music-card {
|
||||
--music-card-bg: #232427;
|
||||
--music-card-border: rgba(255, 255, 255, 0.06);
|
||||
--music-card-hover-border: rgba(255, 255, 255, 0.1);
|
||||
--music-card-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 1px 3px rgba(0, 0, 0, 0.3);
|
||||
--music-cover-bg: #2a2b2e;
|
||||
--music-cover-image-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
|
||||
--music-title-color: #e8e8e8;
|
||||
--music-artist-color: #9a9a9a;
|
||||
--music-meta-color: #6a6a6a;
|
||||
--music-button-border: rgba(255, 255, 255, 0.08);
|
||||
--music-button-bg: linear-gradient(180deg, rgba(50, 50, 54, 0.98), rgba(40, 40, 44, 0.92));
|
||||
--music-button-color: color-mix(in srgb, var(--music-accent) 70%, #ddd 30%);
|
||||
--music-button-shadow: 0 4px 10px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.2);
|
||||
--music-track-bg: rgba(255, 255, 255, 0.08);
|
||||
--music-thumb-bg: #3a3b3e;
|
||||
--music-thumb-border: var(--music-accent);
|
||||
--music-thumb-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Live Photo - 实况照片
|
||||
========================================================================== */
|
||||
|
||||
/* ---- Live Photo ---- */
|
||||
.live-photo {
|
||||
--border-radius: 4px;
|
||||
--live-photo-aspect: 4 / 5;
|
||||
@@ -120,226 +651,3 @@
|
||||
.live-photo-mute-btn[data-muted="false"] .icon-muted {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* ---- Voice Bubble ---- */
|
||||
.amigo-voice-bubble {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 12px 16px;
|
||||
background: linear-gradient(135deg, #95ec69 0%, #7dd652 100%);
|
||||
border-radius: 16px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
max-width: 200px;
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.amigo-voice-bubble:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.amigo-voice-bubble:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.amigo-voice-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.amigo-voice-icon span {
|
||||
display: block;
|
||||
width: 3px;
|
||||
background: #2d2d2d;
|
||||
border-radius: 2px;
|
||||
animation: voiceWave 1.2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.amigo-voice-icon span:nth-child(1) {
|
||||
height: 8px;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.amigo-voice-icon span:nth-child(2) {
|
||||
height: 14px;
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
.amigo-voice-icon span:nth-child(3) {
|
||||
height: 10px;
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
|
||||
.amigo-voice-bubble.playing .amigo-voice-icon span {
|
||||
animation: voiceWaveActive 0.6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.amigo-voice-duration {
|
||||
font-size: 14px;
|
||||
color: #2d2d2d;
|
||||
font-weight: 500;
|
||||
min-width: 24px;
|
||||
}
|
||||
|
||||
.amigo-voice-unread {
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
right: -4px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: #ff4d4f;
|
||||
border-radius: 50%;
|
||||
border: 2px solid #fff;
|
||||
}
|
||||
|
||||
@keyframes voiceWave {
|
||||
0%, 100% { transform: scaleY(0.5); }
|
||||
50% { transform: scaleY(1); }
|
||||
}
|
||||
|
||||
@keyframes voiceWaveActive {
|
||||
0%, 100% { transform: scaleY(0.3); }
|
||||
50% { transform: scaleY(1); }
|
||||
}
|
||||
|
||||
/* ---- Music Card ---- */
|
||||
.amigo-music-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 16px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border-radius: 12px;
|
||||
max-width: 400px;
|
||||
margin: 16px 0;
|
||||
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.amigo-music-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.6);
|
||||
}
|
||||
|
||||
.amigo-music-card__art {
|
||||
position: relative;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.amigo-music-card__cover {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.amigo-music-card__play {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.amigo-music-card__art:hover .amigo-music-card__play {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.amigo-music-card__play-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") no-repeat center;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.amigo-music-card__meta {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.amigo-music-card__title {
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
margin-bottom: 4px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.amigo-music-card__artist {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.amigo-music-card__timeline {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.amigo-music-card__time {
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
min-width: 36px;
|
||||
}
|
||||
|
||||
.amigo-music-card__seek-wrap {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.amigo-music-card__seek {
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
border-radius: 2px;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.amigo-music-card__seek::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: #fff;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* Dark theme support */
|
||||
[data-theme="dark"] .live-photo {
|
||||
background: #1a1a1a;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .amigo-voice-bubble {
|
||||
background: linear-gradient(135deg, #3d3d3d 0%, #2d2d2d 100%);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .amigo-voice-icon span,
|
||||
[data-theme="dark"] .amigo-voice-duration {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .amigo-music-card {
|
||||
background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
|
||||
}
|
||||
@@ -158,7 +158,8 @@ handlers.help = async (chatId) => {
|
||||
`💡 <b>提示：</b>`,
|
||||
`• 直接发送文字追加到正文`,
|
||||
`• 发送图片添加到文章`,
|
||||
`• 发送语音自动转文字`,
|
||||
`• 发送语音自动转文字并生成语音播放器`,
|
||||
`• 发送 MP3 自动生成音乐卡片`,
|
||||
`• 输入 /cancel 取消写作`,
|
||||
].join("\n"));
|
||||
} else {
|
||||
@@ -193,6 +194,18 @@ handlers.help = async (chatId) => {
|
||||
`🌐 <b>快速访问：</b>`,
|
||||
`├─ 📊 后台：https://post.usj.cc`,
|
||||
`└─ 🌍 博客：https://usj.cc`,
|
||||
``,
|
||||
`━━━━━━━━━━━━━━━━━━`,
|
||||
``,
|
||||
`📱 <b>媒体文件说明：</b>`,
|
||||
`├─ 🎙️ 语音消息：自动转文字 + 生成语音播放器`,
|
||||
`├─ 🎵 MP3 文件：交互式问答生成音乐卡片`,
|
||||
`├─ 📷 普通图片：直接插入文章`,
|
||||
`├─ 📷 HEIC 图片（iOS 实况照片）：`,
|
||||
`│ └─ 动态效果无法自动提取`,
|
||||
`│ └─ 需先转为 GIF/视频再发送`,
|
||||
`├─ 🎬 视频/GIF：直接插入文章`,
|
||||
`└─ 📄 文档：保存到文章目录`,
|
||||
].join("\n"));
|
||||
}
|
||||
};
|
||||
|
||||
@@ -542,15 +542,21 @@ async function handlePhotoEnhanced(chatId: number, photos: { file_id: string }[]
|
||||
const imgCaption = caption || "image";
|
||||
appendContent(chatId, `\n\n`);
|
||||
|
||||
await sendMessage(chatId, `📷 图片已保存：${filename}
|
||||
// 只对 HEIC 文件（iOS 实况照片）显示提示
|
||||
const isHEIC = ext.toLowerCase() === "heic" || ext.toLowerCase() === "heif";
|
||||
if (isHEIC) {
|
||||
await sendMessage(chatId, `📷 图片已保存：${filename}
|
||||
|
||||
💡 <b>检测到 iOS 实况照片（HEIC 格式）</b>
|
||||
|
||||
💡 <b>提示：</b>如果您发送的是 iOS 实况照片（Live Photo），
|
||||
动态效果无法自动提取。如需保留动态效果，请：
|
||||
|
||||
1. 将实况照片转为视频/GIF 后重新发送
|
||||
2. 或者单独发送视频部分
|
||||
1. 在 iPhone 上使用「快捷指令」将实况照片转为 GIF
|
||||
2. 或使用第三方 App 导出为视频后重新发送
|
||||
|
||||
继续发送其他内容...</b>`, { parse_mode: "HTML" });
|
||||
} else {
|
||||
await sendMessage(chatId, `📷 图片已保存：${filename}`);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("[bot:photo]", e instanceof Error ? e.message : String(e));
|
||||
await sendMessage(chatId, "❌ 图片保存失败");
|
||||
|
||||
Reference in new issue
Block a user