屿风 发表于 2026-10-4 10:38:56

音乐发帖明暗主题

<style>
.music-card{
    --w:480px;
    --r:16px;
    --shadow-light:rgba(0,0,0,0.10);
    --shadow-dark:rgba(0,0,0,0.30);
    width:var(--w);
    max-width:100%;
    margin:30px auto;
    padding:18px 18px 35px 18px; /* 上18 | 右18 | 下35 | 左18 */
    border-radius:var(--r);
    box-sizing:border-box;
    font-family:system-ui,Microsoft Yahei,sans-serif;
    transition:background .3s ease,color .3s,box-shadow .3s;
}
/* 亮色主题 主流柔和配色 */
.music-card{
    --bg:#ffffff;
    --text-1:#1d2129;
    --text-2:#4e5969;
    --card-border:#f2f3f5;
    --primary:#ff7d37;
    --primary-light:#fff0e8;
    --fold-btn-bg:#f2f3f5;
    --fold-btn-color:#1d2129;
    background:var(--bg);
    box-shadow:0 4px 14px var(--shadow-light);
    border:1px solid var(--card-border);
}
/* 深色主题 主流暗色配色 */
#theme-switch:checked ~ .music-card{
    --bg:#17171a;
    --text-1:#f2f3f5;
    --text-2:#b0b8c4;
    --card-border:#2c2c32;
    --primary:#ff945a;
    --primary-light:#2c2320;
    --fold-btn-bg:#2c2c32;
    --fold-btn-color:#f2f3f5;
    background:var(--bg);
    box-shadow:0 4px 14px var(--shadow-dark);
    border:1px solid var(--card-border);
}
.theme-checkbox{display:none;}
.theme-label{display:block;text-align:right;margin-bottom:10px;cursor:pointer;user-select:none;}
.theme-icon{width:22px;height:22px;display:block;}
.music-cover{width:100%;border-radius:12px;overflow:hidden;}
.music-cover img{width:100%;height:auto;display:block;}
.music-txt{text-align:center;margin:14px 0;}
.music-name{font-size:16px;font-weight:600;color:var(--text-1);margin-bottom:4px;}
.music-artist{font-size:14px;color:var(--text-2);}
.music-player{width:100%;height:62px;border-radius:8px;overflow:hidden;}
.music-player iframe{width:100%;height:100%;border:0;margin:0;padding:0;aspect-ratio:unset !important;}
.music-check{display:none;}
.music-fold{margin-top:12px;text-align:center;}
.music-label{
    display:inline-block;
    padding:6px 14px;
    background:var(--fold-btn-bg);
    border-radius:99px;
    font-size:13px;
    cursor:pointer;
    color:var(--fold-btn-color);
    transition:background .3s ease,color .3s ease;
}
.music-label:hover{
    background:var(--primary-light);
    color:var(--primary);
}
.music-content{max-height:0;overflow:hidden;transition:max-height .3s ease;}
.music-check:checked ~ .music-content{max-height:120px;margin-top:10px;}
/* 跳转链接按钮 主题主色 */
.music-link{
    display:inline-block;
    padding:5px 16px;
    background:var(--primary);
    color:#fff !important;
    text-decoration:none !important;
    border-radius:999px;
    font-size:13px;
    transition:opacity .25s ease;
}
.music-link:hover{opacity:0.85;color:#fff;text-decoration:none !important;}
.theme-icon-light{display:inline-block;}
.theme-icon-dark{display:none;}
#theme-switch:checked ~ .music-card .theme-icon-light{display:none;}
#theme-switch:checked ~ .music-card .theme-icon-dark{display:inline-block;}
</style>
<input type="checkbox" class="theme-checkbox" id="theme-switch">
<div class="music-card">
    <label for="theme-switch" class="theme-label">
      <img src="https://www.qqmcc.net/data/attachment/album/202610/04/105259it7jschytcc1tly0.png" class="theme-icon theme-icon-light" alt="亮色">
      <img src="https://www.qqmcc.net/data/attachment/album/202610/04/105259qmuz7tpnvbua6tuu.png" class="theme-icon theme-icon-dark" alt="深色">
    </label>
    <div class="music-cover">
      
    </div>
    <div class="music-txt">
      <div class="music-name">Put It Up (feat. Rihanna)</div>
      <div class="music-artist">歌手：Chris Brown / Rihanna</div>
    </div>
    <div class="music-player">
      <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=298 height=52 src="//music.163.com/outchain/player?type=2&id=504492133&auto=0&height=32"></iframe>
    </div>
    <div class="music-fold">
      <input type="checkbox" class="music-check" id="m-fold">
      <label for="m-fold" class="music-label"> 查看音乐地址链接</label>
      <div class="music-content">
            <a href="替换音乐地址链接" target="_blank" class="music-link">点击跳转至音乐链接页面</a>
      </div>
    </div>
</div>

屿风 发表于 2026-10-4 10:41:59

<style>
.music-card{
    --w:480px;--r:16px;
    --shadow-light:rgba(0,0,0,0.10);--shadow-dark:rgba(0,0,0,0.30);
    --bg:#fff;--text-1:#1d2129;--text-2:#4e5969;--card-border:#f2f3f5;
    --primary:#ff7d37;--primary-light:#fff0e8;--fold-btn-bg:#f2f3f5;--fold-btn-color:#1d2129;
    width:var(--w);max-width:100%;margin:30px auto;
    padding:18px 18px 35px 18px;border-radius:var(--r);box-sizing:border-box;
    font-family:system-ui,Microsoft Yahei,sans-serif;
    transition:background .3s ease,color .3s,box-shadow .3s;
    background:var(--bg);box-shadow:0 4px 14px var(--shadow-light);border:1px solid var(--card-border);
}
#theme-switch:checked ~ .music-card{
    --bg:#17171a;--text-1:#f2f3f5;--text-2:#b0b8c4;--card-border:#2c2c32;
    --primary:#ff945a;--primary-light:#2c2320;--fold-btn-bg:#2c2c32;--fold-btn-color:#f2f3f5;
    box-shadow:0 4px 14px var(--shadow-dark);border:1px solid var(--card-border);
}
.theme-checkbox,.music-check{display:none;}
.theme-label{display:block;text-align:right;margin-bottom:10px;cursor:pointer;user-select:none;}
.theme-icon{width:22px;height:22px;display:block;}
.music-cover{width:100%;border-radius:12px;overflow:hidden;}
.music-cover img{width:100%;height:auto;display:block;}
.music-txt{text-align:center;margin:14px 0;}
.music-name{font-size:16px;font-weight:600;color:var(--text-1);margin-bottom:4px;}
.music-artist{font-size:14px;color:var(--text-2);}
.music-player{width:100%;height:62px;border-radius:8px;overflow:hidden;}
.music-player iframe{width:100%;height:100%;border:0;margin:0;padding:0;aspect-ratio:unset !important;}
.music-fold{margin-top:12px;text-align:center;}
.music-label{display:inline-block;padding:6px 14px;background:var(--fold-btn-bg);border-radius:99px;font-size:13px;cursor:pointer;color:var(--fold-btn-color);transition:background .3s ease,color .3s ease;}
.music-label:hover{background:var(--primary-light);color:var(--primary);}
.music-content{max-height:0;overflow:hidden;transition:max-height .3s ease;}
.music-check:checked ~ .music-content{max-height:120px;margin-top:10px;}
.music-link{display:inline-block;padding:5px 16px;background:var(--primary);color:#fff !important;text-decoration:none !important;border-radius:999px;font-size:13px;transition:opacity .25s ease;}
.music-link:hover{opacity:0.85;color:#fff;text-decoration:none !important;}
.theme-icon-light{display:inline-block;}
.theme-icon-dark{display:none;}
#theme-switch:checked ~ .music-card .theme-icon-light{display:none;}
#theme-switch:checked ~ .music-card .theme-icon-dark{display:inline-block;}
</style>
<input type="checkbox" class="theme-checkbox" id="theme-switch">
<div class="music-card">
    <label for="theme-switch" class="theme-label">
      <img src="https://www.qqmcc.net/data/attachment/album/202610/04/105259it7jschytcc1tly0.png" class="theme-icon theme-icon-light" alt="亮色">
      <img src="https://www.qqmcc.net/data/attachment/album/202610/04/105259qmuz7tpnvbua6tuu.png" class="theme-icon theme-icon-dark" alt="深色">
    </label>
    <div class="music-cover">
       <上传图片封面替换>
    </div>
    <div class="music-txt">
      <div class="music-name">Put It Up (feat. Rihanna)</div>
      <div class="music-artist">歌手：Chris Brown / Rihanna</div>
    </div>
    <div class="music-player">
      <网易云音乐播放器外链替换>
    </div>
    <div class="music-fold">
      <input type="checkbox" class="music-check" id="m-fold">
      <label for="m-fold" class="music-label"> 查看链接</label>
      <div class="music-content">
            <a href="替换音乐地址链接" target="_blank" class="music-link">点击跳转至音乐链接页面</a>
      </div>
    </div>
</div>
页: [1]
查看完整版本: 音乐发帖明暗主题