init
This commit is contained in:
DengDai
584
webplayer/public/style.css
Normal file
584
webplayer/public/style.css
Normal file
@@ -0,0 +1,584 @@
|
||||
/* --- 1. 全局设置 & 字体定义 (无变动) --- */
|
||||
|
||||
@font-face {
|
||||
font-family:'Noto Sans SC';
|
||||
font-style:normal;
|
||||
font-weight:400;
|
||||
/* 常规 */
|
||||
src:url('./fonts/NotoSansSC-Regular.ttf') format('truetype');
|
||||
}
|
||||
@font-face {
|
||||
font-family:'Noto Sans SC';
|
||||
font-style:normal;
|
||||
font-weight:500;
|
||||
/* 中等 */
|
||||
src:url('./fonts/NotoSansSC-Medium.ttf') format('truetype');
|
||||
}
|
||||
@font-face {
|
||||
font-family:'Noto Sans SC';
|
||||
font-style:normal;
|
||||
font-weight:700;
|
||||
/* 粗体 */
|
||||
src:url('./fonts/NotoSansSC-Bold.ttf') format('truetype');
|
||||
}
|
||||
:root {
|
||||
--primary-color:#007bff;
|
||||
--dark-color:#212529;
|
||||
--light-color:#f8f9fa;
|
||||
--background-color:#eef2f7;
|
||||
--text-color:#333;
|
||||
--border-radius:12px;
|
||||
--shadow:0 10px 25px rgba(0,0,0,0.1);
|
||||
--transition-speed:0.3s;
|
||||
}
|
||||
* {
|
||||
box-sizing:border-box;
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
body {
|
||||
font-family:'Noto Sans SC',sans-serif;
|
||||
line-height:1.7;
|
||||
background-color:var(--background-color);
|
||||
color:var(--text-color);
|
||||
}
|
||||
body.modal-open {
|
||||
overflow:hidden;
|
||||
}
|
||||
/* 【优化】修改 container 布局，使其成为页面中心卡片 */
|
||||
.container {
|
||||
max-width:960px;
|
||||
/* 减小最大宽度 */
|
||||
margin:40px auto;
|
||||
/* 上下边距，水平居中 */
|
||||
padding:30px;
|
||||
background-color:var(--light-color);
|
||||
/* 添加背景色以区分 */
|
||||
border-radius:var(--border-radius);
|
||||
box-shadow:var(--shadow);
|
||||
}
|
||||
/* --- 2. 主页面 (Header,Grid,Search) --- */
|
||||
|
||||
.main-header {
|
||||
text-align:center;
|
||||
margin-bottom:30px;
|
||||
}
|
||||
.main-header h1 {
|
||||
font-size:2.5rem;
|
||||
color:var(--dark-color);
|
||||
font-weight:500;
|
||||
}
|
||||
.main-header p {
|
||||
font-size:1.1rem;
|
||||
color:#6c757d;
|
||||
}
|
||||
.header-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.header-btn {
|
||||
padding: 10px 20px;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
color: var(--primary-color);
|
||||
background-color: transparent;
|
||||
border: 1px solid var(--primary-color);
|
||||
border-radius: 50px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
white-space: nowrap; /* 防止按钮文字换行 */
|
||||
}
|
||||
|
||||
.header-btn:hover {
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
}
|
||||
.header-btn:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
border-color: #ccc;
|
||||
color: #999;
|
||||
}
|
||||
/* 在 .modal-content p 样式之后添加 */
|
||||
.history-item {
|
||||
padding: 15px 20px;
|
||||
border-bottom: 1px solid #e9ecef;
|
||||
cursor: pointer;
|
||||
transition: background-color var(--transition-speed);
|
||||
}
|
||||
.history-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
.history-item:hover {
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
.history-item .series-title {
|
||||
font-weight: 500;
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.history-item .episode-name {
|
||||
color: #6c757d;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
.search-container {
|
||||
margin-bottom:2rem;
|
||||
}
|
||||
#search-input {
|
||||
width:100%;
|
||||
padding:12px 15px;
|
||||
font-size:1rem;
|
||||
color:#333;
|
||||
/* 文本颜色调整 */
|
||||
background-color:#fff;
|
||||
border:1px solid #ddd;
|
||||
border-radius:8px;
|
||||
outline:none;
|
||||
transition:border-color 0.3s ease,box-shadow 0.3s ease;
|
||||
}
|
||||
#search-input:focus {
|
||||
border-color:var(--primary-color);
|
||||
box-shadow:0 0 0 3px rgba(0,123,255,0.25);
|
||||
}
|
||||
#search-input::placeholder {
|
||||
color:#888;
|
||||
}
|
||||
/* 【新增】搜索无结果容器的样式 */
|
||||
.no-results {
|
||||
text-align:center;
|
||||
padding:40px 20px;
|
||||
background-color:#fff;
|
||||
border-radius:8px;
|
||||
margin-top:2rem;
|
||||
}
|
||||
.no-results p {
|
||||
margin:0 0 20px 0;
|
||||
font-size:1.1rem;
|
||||
color:#6c757d;
|
||||
}
|
||||
/* 【新增】通用主按钮样式 */
|
||||
.btn-primary {
|
||||
padding:12px 25px;
|
||||
font-size:1rem;
|
||||
font-weight:bold;
|
||||
color:#fff;
|
||||
background-color:var(--primary-color);
|
||||
border:none;
|
||||
border-radius:50px;
|
||||
cursor:pointer;
|
||||
transition:background-color 0.2s,transform 0.2s;
|
||||
}
|
||||
.btn-primary:hover {
|
||||
background-color:#0056b3;
|
||||
transform:translateY(-2px);
|
||||
}
|
||||
.series-grid {
|
||||
display:grid;
|
||||
grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
|
||||
/* 微调卡片最小宽度 */
|
||||
gap:25px;
|
||||
}
|
||||
/* --- 3. 系列卡片 (无变动，样式很棒) --- */
|
||||
|
||||
.series-card {
|
||||
background:white;
|
||||
border-radius:var(--border-radius);
|
||||
box-shadow:var(--shadow);
|
||||
overflow:hidden;
|
||||
cursor:pointer;
|
||||
transition:transform var(--transition-speed) ease,box-shadow var(--transition-speed) ease;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
}
|
||||
.series-card:hover {
|
||||
transform:translateY(-8px);
|
||||
box-shadow:0 15px 30px rgba(0,0,0,0.15);
|
||||
}
|
||||
.series-card__thumbnail {
|
||||
aspect-ratio:2 / 3;
|
||||
background-color:#2a2a2e;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
overflow:hidden;
|
||||
}
|
||||
img.lazy {
|
||||
opacity:0;
|
||||
transition:opacity 0.3s ease-in-out;
|
||||
}
|
||||
img[src] {
|
||||
opacity:1;
|
||||
}
|
||||
.series-card__thumbnail img {
|
||||
width:100%;
|
||||
height:100%;
|
||||
object-fit:cover;
|
||||
}
|
||||
.series-card__thumbnail-placeholder {
|
||||
width:100%;
|
||||
height:100%;
|
||||
background-color:#343a40;
|
||||
color:white;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
font-size:4rem;
|
||||
font-weight:bold;
|
||||
user-select:none;
|
||||
}
|
||||
.series-card__info {
|
||||
padding:20px;
|
||||
flex-grow:1;
|
||||
}
|
||||
.series-card__info h3 {
|
||||
margin:0;
|
||||
font-size:1.2rem;
|
||||
font-weight:500;
|
||||
}
|
||||
/* --- 4. 通用弹窗 (Modal) --- */
|
||||
/* (无变动，结构良好) */
|
||||
.modal-backdrop {
|
||||
display:none;
|
||||
position:fixed;
|
||||
top:0;
|
||||
left:0;
|
||||
width:100%;
|
||||
height:100%;
|
||||
background:rgba(0,0,0,0.7);
|
||||
backdrop-filter:blur(8px);
|
||||
-webkit-backdrop-filter:blur(8px);
|
||||
z-index:1000;
|
||||
opacity:0;
|
||||
transition:opacity var(--transition-speed) ease-in-out;
|
||||
}
|
||||
.modal-backdrop.active {
|
||||
display:block;
|
||||
opacity:1;
|
||||
}
|
||||
.modal,.video-modal {
|
||||
display:none;
|
||||
position:fixed;
|
||||
top:0;
|
||||
left:0;
|
||||
width:100%;
|
||||
height:100%;
|
||||
z-index:1001;
|
||||
opacity:0;
|
||||
transition:opacity var(--transition-speed) ease-in-out;
|
||||
padding:20px;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
}
|
||||
.modal.active,.video-modal.active {
|
||||
display:flex;
|
||||
opacity:1;
|
||||
}
|
||||
.modal-content,.player-layout-container {
|
||||
transform:scale(0.95);
|
||||
transition:transform var(--transition-speed) ease-in-out;
|
||||
}
|
||||
.modal.active .modal-content,.video-modal.active .player-layout-container {
|
||||
transform:scale(1);
|
||||
}
|
||||
/* --- 5. 剧集详情 & 心愿提交 Modal --- */
|
||||
|
||||
.modal-content {
|
||||
background:white;
|
||||
padding:30px;
|
||||
border-radius:var(--border-radius);
|
||||
box-shadow:var(--shadow);
|
||||
width:90%;
|
||||
max-width:500px;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
max-height:80vh;
|
||||
}
|
||||
.modal-content h3,.modal-content #detail-title {
|
||||
text-align:center;
|
||||
margin-bottom:10px;
|
||||
}
|
||||
.modal-content p {
|
||||
text-align:center;
|
||||
color:#6c757d;
|
||||
margin-bottom:20px;
|
||||
}
|
||||
/* 【优化】Modal 内的表单样式 */
|
||||
#request-form {
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
/* 垂直排列 */
|
||||
gap:15px;
|
||||
width:100%;
|
||||
}
|
||||
#request-input {
|
||||
padding:12px 15px;
|
||||
font-size:1rem;
|
||||
border:1px solid #ccc;
|
||||
border-radius:6px;
|
||||
outline:none;
|
||||
}
|
||||
#request-form button {
|
||||
padding:12px 20px;
|
||||
font-size:1rem;
|
||||
font-weight:bold;
|
||||
color:#fff;
|
||||
background-color:var(--primary-color);
|
||||
border:none;
|
||||
border-radius:6px;
|
||||
cursor:pointer;
|
||||
transition:background-color 0.2s;
|
||||
}
|
||||
#request-form button:hover {
|
||||
background-color:#0056b3;
|
||||
}
|
||||
.request-status {
|
||||
margin-top:1rem;
|
||||
min-height:1.2em;
|
||||
font-weight:bold;
|
||||
text-align:center;
|
||||
}
|
||||
.request-status.success {
|
||||
color:#28a745;
|
||||
}
|
||||
.request-status.error {
|
||||
color:#dc3545;
|
||||
}
|
||||
.episode-scroll-container {
|
||||
overflow-y:auto;
|
||||
border:1px solid #ddd;
|
||||
border-radius:8px;
|
||||
flex-grow:1;
|
||||
min-height:0;
|
||||
}
|
||||
.episode-item,.player-episode-item {
|
||||
display:flex;
|
||||
/* 使用 flex 布局对齐 */
|
||||
justify-content:space-between;
|
||||
/* 让内容和对勾分开 */
|
||||
align-items:center;
|
||||
padding:15px 20px;
|
||||
border-bottom:1px solid #e9ecef;
|
||||
cursor:pointer;
|
||||
transition:background-color var(--transition-speed),color var(--transition-speed);
|
||||
}
|
||||
.episode-item:last-child,.player-episode-item:last-child {
|
||||
border-bottom:none;
|
||||
}
|
||||
.episode-item:hover,.player-episode-item:hover {
|
||||
background-color:var(--primary-color);
|
||||
color:white;
|
||||
}
|
||||
.player-episode-item.active {
|
||||
background-color:var(--primary-color);
|
||||
color:white;
|
||||
font-weight:500;
|
||||
}
|
||||
.episode-item.watched span:first-child {
|
||||
color:#888;
|
||||
text-decoration:line-through;
|
||||
}
|
||||
.watched-check {
|
||||
margin-left:auto;
|
||||
font-size:0.9em;
|
||||
padding-left:10px;
|
||||
}
|
||||
.btn-close {
|
||||
display:block;
|
||||
margin:20px auto 0;
|
||||
padding:10px 25px;
|
||||
background:#6c757d;
|
||||
/* 灰色调，不那么刺眼 */
|
||||
color:white;
|
||||
border:none;
|
||||
border-radius:50px;
|
||||
cursor:pointer;
|
||||
font-weight:500;
|
||||
transition:background-color var(--transition-speed),transform var(--transition-speed);
|
||||
flex-shrink:0;
|
||||
}
|
||||
.btn-close:hover {
|
||||
background-color:#5a6268;
|
||||
}
|
||||
/* --- 6. 视频播放器 (Video Player) (无变动) --- */
|
||||
.player-layout-container {
|
||||
display:flex;
|
||||
justify-content:center;
|
||||
align-items:stretch;
|
||||
width:100%;
|
||||
max-width:1200px;
|
||||
height:90vh;
|
||||
gap:25px
|
||||
}
|
||||
.video-wrapper {
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
justify-content:center;
|
||||
align-items:center;
|
||||
position:relative;
|
||||
flex-grow:1;
|
||||
min-width:0
|
||||
}
|
||||
#player-title {
|
||||
color:#fff;
|
||||
text-align:center;
|
||||
margin-bottom:15px;
|
||||
font-weight:500;
|
||||
text-shadow:1px 1px 3px rgba(0,0,0,.5);
|
||||
white-space:nowrap;
|
||||
overflow:hidden;
|
||||
text-overflow:ellipsis;
|
||||
width:100%
|
||||
}
|
||||
.video-container {
|
||||
position:relative;
|
||||
background-color:#000;
|
||||
border-radius:8px;
|
||||
overflow:hidden;
|
||||
aspect-ratio:9/16;
|
||||
height:100%;
|
||||
max-height:calc(100% - 70px)
|
||||
}
|
||||
#video-player {
|
||||
width:100%;
|
||||
height:100%;
|
||||
display:block
|
||||
}
|
||||
.player-controls {
|
||||
display:flex;
|
||||
justify-content:space-between;
|
||||
margin-top:15px;
|
||||
width:100%
|
||||
}
|
||||
.player-nav-btn {
|
||||
padding:10px 20px;
|
||||
background-color:rgba(255,255,255,.2);
|
||||
color:#fff;
|
||||
border:1px solid rgba(255,255,255,.4);
|
||||
border-radius:50px;
|
||||
cursor:pointer;
|
||||
transition:background-color .2s;
|
||||
flex-basis:48%
|
||||
}
|
||||
.player-nav-btn:hover:not(:disabled) {
|
||||
background-color:rgba(255,255,255,.4)
|
||||
}
|
||||
.player-nav-btn:disabled {
|
||||
opacity:.5;
|
||||
cursor:not-allowed
|
||||
}
|
||||
.video-close-btn {
|
||||
position:absolute;
|
||||
top:10px;
|
||||
right:10px;
|
||||
padding:0;
|
||||
width:30px;
|
||||
height:30px;
|
||||
line-height:30px;
|
||||
text-align:center;
|
||||
background:rgba(0,0,0,.5);
|
||||
font-size:1.2rem;
|
||||
z-index:10;
|
||||
border-radius:50%;
|
||||
color:#fff;
|
||||
border:none;
|
||||
cursor:pointer
|
||||
}
|
||||
.player-episode-list-container {
|
||||
display:none;
|
||||
background:#fff;
|
||||
border-radius:var(--border-radius);
|
||||
padding:20px;
|
||||
width:340px;
|
||||
flex-shrink:0;
|
||||
flex-direction:column
|
||||
}
|
||||
.player-episode-list-container h4 {
|
||||
margin-bottom:15px;
|
||||
text-align:center;
|
||||
font-weight:500;
|
||||
flex-shrink:0
|
||||
}
|
||||
/* --- 7. 响应式设计 (Media Queries) --- */
|
||||
/* (微调) */
|
||||
@media(min-width:801px) {
|
||||
.player-episode-list-container {
|
||||
display:flex
|
||||
}
|
||||
}@media(max-width:800px) {
|
||||
.video-modal {
|
||||
padding:0;
|
||||
background:#000
|
||||
}
|
||||
.player-layout-container {
|
||||
height:100%;
|
||||
max-height:100vh;
|
||||
padding:0
|
||||
}
|
||||
.video-wrapper {
|
||||
width:100%;
|
||||
height:100%;
|
||||
justify-content:space-between;
|
||||
padding:30px 15px
|
||||
}
|
||||
.video-container {
|
||||
max-height:none;
|
||||
height:auto;
|
||||
width:100%;
|
||||
flex-grow:1;
|
||||
border-radius:0
|
||||
}
|
||||
#player-title {
|
||||
order:1
|
||||
}
|
||||
.video-container {
|
||||
order:2
|
||||
}
|
||||
.player-controls {
|
||||
order:3
|
||||
}
|
||||
.video-close-btn {
|
||||
top:15px;
|
||||
right:15px
|
||||
}
|
||||
}@media (max-width:992px) {
|
||||
/* 调整 container 边距的断点 */
|
||||
.container {
|
||||
margin:20px;
|
||||
padding:20px;
|
||||
}
|
||||
}@media (max-width:768px) {
|
||||
.main-header h1 {
|
||||
font-size:2rem;
|
||||
}
|
||||
.series-grid {
|
||||
grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
|
||||
}
|
||||
/* 在平板上允许更小的卡片 */
|
||||
.modal-content {
|
||||
padding:20px;
|
||||
width:95%;
|
||||
}
|
||||
}@media (max-width:576px) {
|
||||
.header-content {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
text-align: left;
|
||||
}
|
||||
.main-header {
|
||||
text-align: left;
|
||||
}
|
||||
.header-btn {
|
||||
align-self: flex-start; /* 按钮也靠左 */
|
||||
}
|
||||
.container {
|
||||
margin:15px;
|
||||
padding:15px;
|
||||
}
|
||||
.series-grid {
|
||||
grid-template-columns:1fr;
|
||||
gap:15px;
|
||||
}
|
||||
/* 在手机上变为单列 */}
|
||||
Reference in New Issue
Block a user