feat: 优化剧集连续阅读布局与目录滚动联动
This commit is contained in:
GouJ
+146
-38
@@ -307,19 +307,158 @@ body {
|
||||
grid-template-columns: minmax(0, 1fr) 207px;
|
||||
}
|
||||
.content-with-history > main,
|
||||
.content-with-history > aside,
|
||||
.script-page {
|
||||
.content-with-history > aside {
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
overscroll-behavior: contain;
|
||||
}
|
||||
.script-workspace {
|
||||
min-height: 0;
|
||||
/* 连续阅读区保留双栏，执行记录按需展开，不挤占默认阅读宽度。 */
|
||||
.script-section .n-tabs-tab__label {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.episode-list {
|
||||
max-height: none;
|
||||
.script-section .content-with-history.history-hidden {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
grid-template-rows: minmax(0, 1fr);
|
||||
}
|
||||
.episode-reader {
|
||||
display: grid;
|
||||
grid-template-columns: clamp(190px, 22%, 240px) minmax(0, 1fr);
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
container-type: inline-size;
|
||||
}
|
||||
.reader-directory {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
min-width: 0;
|
||||
background: var(--app-subtle);
|
||||
border-right: 1px solid var(--app-border);
|
||||
}
|
||||
.reader-directory-heading {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
gap: 8px;
|
||||
padding: 22px 20px 14px;
|
||||
font-size: 13px;
|
||||
}
|
||||
.reader-directory-heading h3 {
|
||||
font-weight: 600;
|
||||
}
|
||||
.reader-directory-heading span {
|
||||
font-size: 11px;
|
||||
color: var(--app-muted);
|
||||
white-space: nowrap;
|
||||
}
|
||||
.reader-directory-scroll {
|
||||
flex: 1;
|
||||
}
|
||||
.reader-directory-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
padding: 4px 10px 18px;
|
||||
}
|
||||
.n-button.reader-episode-link {
|
||||
flex-shrink: 0;
|
||||
height: auto;
|
||||
min-height: 64px;
|
||||
padding: 12px 14px;
|
||||
border-radius: 5px;
|
||||
color: var(--app-muted);
|
||||
white-space: normal;
|
||||
text-align: left;
|
||||
}
|
||||
.n-button.reader-episode-link .n-button__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 5px;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
.reader-episode-label {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.reader-episode-title {
|
||||
font-size: 12px;
|
||||
line-height: 1.6;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.n-button.reader-episode-link.active {
|
||||
background: var(--app-surface);
|
||||
color: var(--app-ink);
|
||||
box-shadow: inset 3px 0 var(--app-ink);
|
||||
}
|
||||
.reader-page {
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
background: var(--app-surface);
|
||||
}
|
||||
.reader-scroll .n-scrollbar-container:focus-visible {
|
||||
outline: 2px solid var(--app-ink);
|
||||
outline-offset: -3px;
|
||||
}
|
||||
.reader-content {
|
||||
max-width: 900px;
|
||||
margin-inline: auto;
|
||||
padding: 32px clamp(24px, 5cqw, 64px);
|
||||
}
|
||||
.reader-chapter + .reader-chapter {
|
||||
margin-top: 48px;
|
||||
border-top: 1px solid var(--app-border);
|
||||
padding-top: 36px;
|
||||
}
|
||||
.reader-chapter:last-child {
|
||||
/* 末集较短时仍可定位到阅读线，不必把倒数第二集误认为当前集。 */
|
||||
min-height: max(160px, calc(var(--reader-height) - 64px));
|
||||
}
|
||||
.reader-chapter-heading {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.reader-chapter-heading p {
|
||||
color: var(--app-muted);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.reader-chapter-heading h2 {
|
||||
font-size: clamp(18px, 2cqw, 24px);
|
||||
font-weight: 600;
|
||||
line-height: 1.6;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
@media (max-width: 1000px) {
|
||||
.episode-reader {
|
||||
grid-template-columns: 180px minmax(0, 1fr);
|
||||
}
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.episode-reader {
|
||||
grid-template-columns: 112px minmax(0, 1fr);
|
||||
}
|
||||
.reader-directory-heading {
|
||||
padding: 16px 12px 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.reader-directory-content {
|
||||
padding-inline: 6px;
|
||||
}
|
||||
.n-button.reader-episode-link {
|
||||
padding: 12px 10px;
|
||||
}
|
||||
.reader-content {
|
||||
padding-inline: 18px;
|
||||
}
|
||||
}
|
||||
/* 面板只负责尺寸与裁切；滚动和深浅主题滚动条统一交给 Naive UI。 */
|
||||
.panel-scroll.n-scrollbar {
|
||||
@@ -335,16 +474,13 @@ body {
|
||||
.production-detail,
|
||||
.storyboard-detail,
|
||||
.shot-list,
|
||||
.episode-list,
|
||||
.content-with-history > main {
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
.script-page,
|
||||
.history-panel,
|
||||
.production-shot-list,
|
||||
.shot-list,
|
||||
.episode-list {
|
||||
.shot-list {
|
||||
padding: 0;
|
||||
}
|
||||
.production-shot-list-content {
|
||||
@@ -353,25 +489,17 @@ body {
|
||||
.shot-list-content {
|
||||
padding: 0 8px 20px;
|
||||
}
|
||||
.episode-list-content {
|
||||
padding: 0 7px 20px;
|
||||
}
|
||||
.script-page-content {
|
||||
padding: 36px 40px;
|
||||
}
|
||||
.history-content {
|
||||
padding: 23px 21px;
|
||||
}
|
||||
.production-shot-list-content,
|
||||
.shot-list-content,
|
||||
.episode-list-content,
|
||||
.identity-subject-list-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.n-button.production-shot-link,
|
||||
.n-button.shot-link,
|
||||
.n-button.episode-link,
|
||||
.n-button.identity-subject-item {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
@@ -480,7 +608,6 @@ body {
|
||||
.n-button:disabled {
|
||||
opacity: 1;
|
||||
}
|
||||
.n-button.episode-link,
|
||||
.n-button.shot-link,
|
||||
.n-button.production-shot-link,
|
||||
.n-button.identity-subject-item,
|
||||
@@ -489,7 +616,6 @@ body {
|
||||
height: auto;
|
||||
white-space: normal;
|
||||
}
|
||||
.n-button.episode-link .n-button__content,
|
||||
.n-button.shot-link .n-button__content {
|
||||
width: 100%;
|
||||
justify-content: flex-start;
|
||||
@@ -507,7 +633,6 @@ body {
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.n-button.episode-link .n-button__border,
|
||||
.n-button.shot-link .n-button__border,
|
||||
.n-button.production-shot-link .n-button__border,
|
||||
.n-button.identity-subject-item .n-button__border {
|
||||
@@ -651,23 +776,6 @@ body {
|
||||
overflow: hidden;
|
||||
min-height: 0;
|
||||
}
|
||||
.script-workspace {
|
||||
grid-template-columns: 105px minmax(0, 1fr);
|
||||
}
|
||||
.episode-list {
|
||||
display: block;
|
||||
padding: 0;
|
||||
border-right: 1px solid var(--app-border);
|
||||
}
|
||||
.episode-link {
|
||||
width: 100%;
|
||||
}
|
||||
.script-page {
|
||||
padding: 0;
|
||||
}
|
||||
.script-page-content {
|
||||
padding: 18px;
|
||||
}
|
||||
.project-search {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user