3884 lines
74 KiB
Plaintext
3884 lines
74 KiB
Plaintext
.chapter-page {
|
|
--reader-control-min: 48px;
|
|
position: relative;
|
|
display: flex;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
flex-direction: column;
|
|
color: var(--ink);
|
|
background: #211812;
|
|
}
|
|
|
|
.dialog-backdrop {
|
|
position: fixed;
|
|
z-index: 100;
|
|
inset: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding:
|
|
var(--modal-top)
|
|
max(12rpx, var(--safe-right))
|
|
max(12rpx, var(--safe-bottom))
|
|
max(12rpx, var(--safe-left));
|
|
background: rgba(18, 12, 8, 0.82);
|
|
}
|
|
|
|
.decision-dialog {
|
|
position: relative;
|
|
display: grid;
|
|
width: min(1420rpx, 95vw);
|
|
height: min(760rpx, 89vh);
|
|
overflow: hidden;
|
|
grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
|
|
grid-template-rows: minmax(0, 1fr);
|
|
border-radius: 10rpx;
|
|
}
|
|
|
|
.dialog-close {
|
|
position: absolute;
|
|
z-index: 6;
|
|
top: 14rpx;
|
|
right: 16rpx;
|
|
display: flex;
|
|
width: 50px;
|
|
height: 50px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #4d392a;
|
|
background: #f2e3bd;
|
|
border: 2rpx solid #9d825d;
|
|
border-radius: 50%;
|
|
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
|
|
font-size: 34px;
|
|
}
|
|
|
|
.character-story {
|
|
min-width: 0;
|
|
min-height: 0;
|
|
max-height: 100%;
|
|
height: 100%;
|
|
padding: 0;
|
|
color: #f2e6c7;
|
|
background:
|
|
radial-gradient(circle at 12% 16%, rgba(181, 57, 44, 0.2), transparent 35%),
|
|
#293844;
|
|
border-right: 7rpx solid #822a23;
|
|
}
|
|
|
|
.character-story-inner {
|
|
box-sizing: border-box;
|
|
min-height: 100%;
|
|
padding: 30rpx 34rpx 48rpx;
|
|
}
|
|
|
|
.story-label {
|
|
display: block;
|
|
margin-top: 20rpx;
|
|
color: #e8c477;
|
|
font-size: 21rpx;
|
|
font-weight: 850;
|
|
}
|
|
|
|
.action-description {
|
|
display: block;
|
|
margin-top: 7rpx;
|
|
font-size: 29rpx;
|
|
font-weight: 750;
|
|
line-height: 1.55;
|
|
}
|
|
|
|
.speech-box,
|
|
.evidence-box {
|
|
display: flex;
|
|
margin-top: 16rpx;
|
|
padding: 16rpx 18rpx;
|
|
border-left: 7rpx solid #d0a654;
|
|
flex-direction: column;
|
|
font-size: 24rpx;
|
|
line-height: 1.58;
|
|
}
|
|
|
|
.speech-box {
|
|
background: rgba(246, 225, 180, 0.11);
|
|
}
|
|
|
|
.evidence-box {
|
|
background: rgba(122, 164, 139, 0.14);
|
|
border-left-color: #76a286;
|
|
}
|
|
|
|
.speech-box .story-label,
|
|
.evidence-box .story-label {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.font-xlarge .action-description {
|
|
font-size: 33rpx;
|
|
}
|
|
|
|
.font-xlarge .speech-box,
|
|
.font-xlarge .evidence-box {
|
|
font-size: 27rpx;
|
|
}
|
|
|
|
.judgement-side {
|
|
display: grid;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
max-height: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
grid-template-rows: minmax(0, 1fr) auto;
|
|
background:
|
|
repeating-linear-gradient(0deg, rgba(85, 54, 31, 0.025) 0, rgba(85, 54, 31, 0.025) 1px, transparent 1px, transparent 6px),
|
|
#f2e5bd;
|
|
}
|
|
|
|
.judgement-scroll {
|
|
box-sizing: border-box;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
width: 100%;
|
|
height: auto;
|
|
max-height: 100%;
|
|
padding: 0;
|
|
}
|
|
|
|
.judgement-scroll-inner {
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
width: 100%;
|
|
min-height: 100%;
|
|
padding: 18px 20px 14px;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.judgement-scroll-inner.is-choice {
|
|
justify-content: center;
|
|
}
|
|
|
|
.judgement-scroll-inner.is-result {
|
|
padding: 12px;
|
|
}
|
|
|
|
.judgement-scroll-inner.is-result .result-box {
|
|
min-height: 100%;
|
|
flex: 1 0 auto;
|
|
justify-content: center;
|
|
}
|
|
|
|
.judgement-lead {
|
|
display: block;
|
|
padding-right: 48px;
|
|
color: #6b5138;
|
|
font-size: 17px;
|
|
font-weight: 850;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.judgement-question {
|
|
display: block;
|
|
margin-top: 7px;
|
|
font-size: 28px;
|
|
font-weight: 900;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.font-xlarge .judgement-question {
|
|
font-size: 31px;
|
|
}
|
|
|
|
.font-xlarge .judgement-title {
|
|
font-size: 22px;
|
|
}
|
|
|
|
.font-xlarge .judgement-subtitle {
|
|
font-size: 17px;
|
|
}
|
|
|
|
.font-xlarge .result-box {
|
|
font-size: 20px;
|
|
}
|
|
|
|
.font-xlarge .reason {
|
|
font-size: 21px;
|
|
}
|
|
|
|
.font-xlarge .advice-label {
|
|
font-size: 17px;
|
|
}
|
|
|
|
.judgement-options {
|
|
display: grid;
|
|
gap: 10px;
|
|
margin-top: 14px;
|
|
}
|
|
|
|
.judgement-button {
|
|
display: grid;
|
|
min-height: 72px;
|
|
grid-template-columns: 50px 1fr;
|
|
align-items: center;
|
|
gap: 11px;
|
|
padding: 9px 12px;
|
|
color: #3f3328;
|
|
background: #f4e8c5;
|
|
border: 3px solid #8a7355;
|
|
border-radius: 10px;
|
|
text-align: left;
|
|
}
|
|
|
|
.judgement-button.observe,
|
|
.judgement-button.continue {
|
|
color: #3f3328;
|
|
background: #f4e8c5;
|
|
border-color: #8a7355;
|
|
}
|
|
|
|
.judgement-icon {
|
|
display: flex;
|
|
width: 46px;
|
|
height: 46px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #5e4934;
|
|
background: #e8d6ab;
|
|
border: 3px solid #8a7355;
|
|
border-radius: 50%;
|
|
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
|
|
font-size: 29px;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.judgement-button-copy {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.judgement-title {
|
|
font-size: 20px;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.judgement-subtitle {
|
|
margin-top: 2px;
|
|
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.result-box {
|
|
display: flex;
|
|
margin-top: 14px;
|
|
padding: 14px;
|
|
border: 2px solid;
|
|
border-radius: 9px;
|
|
flex-direction: column;
|
|
font-size: 18px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.result-box.retry,
|
|
.result-box.correct {
|
|
color: #43372b;
|
|
background: #efe2bd;
|
|
border-color: #947a59;
|
|
}
|
|
|
|
.result-title {
|
|
margin-bottom: 5px;
|
|
font-size: 22px;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.reason {
|
|
display: block;
|
|
margin-top: 9px;
|
|
font-size: 19px;
|
|
font-weight: 750;
|
|
}
|
|
|
|
.action-advice {
|
|
display: flex;
|
|
margin-top: 4px;
|
|
padding: 10px;
|
|
color: #4c3f31;
|
|
background: rgba(255, 251, 235, 0.72);
|
|
border-left: 5px solid var(--cinnabar);
|
|
flex-direction: column;
|
|
}
|
|
|
|
.advice-label {
|
|
color: #8b3028;
|
|
font-size: 16px;
|
|
font-weight: 850;
|
|
}
|
|
|
|
.decision-footer {
|
|
position: relative;
|
|
z-index: 8;
|
|
display: flex;
|
|
flex: none;
|
|
min-height: 66px;
|
|
align-items: center;
|
|
padding: 8px 14px max(8px, var(--safe-bottom));
|
|
background: #ead9af;
|
|
border-top: 2px solid rgba(126, 91, 52, 0.34);
|
|
}
|
|
|
|
.decision-footer-button {
|
|
display: flex;
|
|
width: 100%;
|
|
min-height: 54px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 8px 14px;
|
|
color: #f8e8c5;
|
|
background: #4b3628;
|
|
border: 2px solid #806247;
|
|
border-radius: 8px;
|
|
font-size: 20px;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.decision-footer-button.primary {
|
|
background: #8f3028;
|
|
border-color: #ad5a4e;
|
|
}
|
|
|
|
.decision-footer-button.retry {
|
|
color: #f5e7c9;
|
|
background: #5a4634;
|
|
border-color: #80694d;
|
|
}
|
|
|
|
.emotion-prompt {
|
|
margin-top: 18rpx;
|
|
color: #7f2a23;
|
|
font-size: 34rpx;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.emotion-choices {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 18rpx;
|
|
margin-top: 20rpx;
|
|
}
|
|
|
|
.emotion-choice {
|
|
display: grid;
|
|
width: 100%;
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
min-height: 138rpx;
|
|
grid-template-columns: 52rpx 1fr;
|
|
align-items: start;
|
|
gap: 14rpx;
|
|
padding: 20rpx;
|
|
color: #3e4f43;
|
|
background: #dfe8d9;
|
|
border: 3rpx solid #719078;
|
|
border-radius: 12rpx;
|
|
font-size: 25rpx;
|
|
line-height: 1.5;
|
|
text-align: left;
|
|
}
|
|
|
|
.emotion-choice > text:last-child {
|
|
min-width: 0;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.choice-number {
|
|
display: flex;
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #f4e8c8;
|
|
background: var(--jade);
|
|
border-radius: 50%;
|
|
font-family: Georgia, serif;
|
|
font-size: 25rpx;
|
|
}
|
|
|
|
.emotion-note {
|
|
margin-top: 16rpx;
|
|
color: #6d533a;
|
|
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
|
|
font-size: 19rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.feedback {
|
|
margin-top: 26rpx;
|
|
color: #3f503f;
|
|
font-size: 31rpx;
|
|
font-weight: 750;
|
|
line-height: 1.62;
|
|
}
|
|
|
|
.table-echo {
|
|
display: flex;
|
|
margin: 22rpx 0;
|
|
padding: 20rpx 24rpx;
|
|
color: #f4e5bf;
|
|
background: #3c2b20;
|
|
border-left: 9rpx solid var(--cinnabar);
|
|
flex-direction: column;
|
|
font-size: 30rpx;
|
|
font-weight: 780;
|
|
line-height: 1.55;
|
|
}
|
|
|
|
.echo-label {
|
|
margin-bottom: 5rpx;
|
|
color: #e7bd70;
|
|
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
|
|
font-size: 19rpx;
|
|
letter-spacing: 4rpx;
|
|
}
|
|
|
|
/* 横屏手机的 rpx 会按屏幕宽度放大。短高屏的纵向尺寸必须使用 px。 */
|
|
@media (max-height: 620px) {
|
|
.compact-height .dialog-backdrop {
|
|
align-items: stretch;
|
|
justify-content: stretch;
|
|
padding:
|
|
var(--modal-top)
|
|
max(8px, var(--safe-right))
|
|
max(8px, var(--safe-bottom))
|
|
max(8px, var(--safe-left));
|
|
}
|
|
|
|
.compact-height .decision-dialog {
|
|
width: 100%;
|
|
height: 100%;
|
|
grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
|
|
grid-template-rows: minmax(0, 1fr);
|
|
border-radius: 7px;
|
|
}
|
|
|
|
.compact-height .dialog-close {
|
|
top: 6px;
|
|
right: calc(40% + 6px);
|
|
width: 48px;
|
|
height: 48px;
|
|
border-width: 1px;
|
|
font-size: 30px;
|
|
}
|
|
|
|
.compact-height .character-story {
|
|
padding: 0;
|
|
border-right-width: 4px;
|
|
}
|
|
|
|
.compact-height .character-story-inner {
|
|
min-height: 100%;
|
|
padding: 12px 16px 30px;
|
|
}
|
|
|
|
.compact-height .story-label {
|
|
margin-top: 12px;
|
|
font-size: 15px;
|
|
}
|
|
|
|
.compact-height .action-description {
|
|
margin-top: 4px;
|
|
font-size: 20px;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.compact-height .speech-box,
|
|
.compact-height .evidence-box {
|
|
margin-top: 10px;
|
|
padding: 10px 12px;
|
|
border-left-width: 4px;
|
|
font-size: 16px;
|
|
line-height: 1.42;
|
|
}
|
|
|
|
.compact-height.font-xlarge .action-description {
|
|
font-size: 22px;
|
|
}
|
|
|
|
.compact-height.font-xlarge .speech-box,
|
|
.compact-height.font-xlarge .evidence-box {
|
|
font-size: 18px;
|
|
}
|
|
|
|
.compact-height .judgement-side {
|
|
padding: 0;
|
|
}
|
|
|
|
.compact-height .judgement-scroll {
|
|
box-sizing: border-box;
|
|
padding: 0;
|
|
}
|
|
|
|
.compact-height .judgement-scroll-inner {
|
|
padding: 10px 12px;
|
|
}
|
|
|
|
.compact-height .judgement-scroll-inner.is-result {
|
|
padding: 8px 10px;
|
|
}
|
|
|
|
.compact-height .judgement-lead {
|
|
display: none;
|
|
}
|
|
|
|
.compact-height .judgement-question {
|
|
margin-top: 0;
|
|
font-size: 21px;
|
|
line-height: 1.18;
|
|
}
|
|
|
|
.compact-height.font-xlarge .judgement-question {
|
|
font-size: 23px;
|
|
}
|
|
|
|
.compact-height .judgement-options {
|
|
gap: 6px;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.compact-height .judgement-button {
|
|
min-height: 58px;
|
|
grid-template-columns: 38px 1fr;
|
|
gap: 8px;
|
|
padding: 5px 8px;
|
|
border-width: 3px;
|
|
border-radius: 9px;
|
|
}
|
|
|
|
.compact-height .judgement-icon {
|
|
width: 38px;
|
|
height: 38px;
|
|
border-width: 2px;
|
|
font-size: 25px;
|
|
}
|
|
|
|
.compact-height .judgement-title {
|
|
font-size: 18px;
|
|
line-height: 1.15;
|
|
}
|
|
|
|
.compact-height.font-xlarge .judgement-title {
|
|
font-size: 20px;
|
|
}
|
|
|
|
.compact-height .judgement-subtitle {
|
|
font-size: 14px;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.compact-height.font-xlarge .judgement-subtitle {
|
|
font-size: 15px;
|
|
}
|
|
|
|
.compact-height .result-box {
|
|
margin-top: 0;
|
|
padding: 13px;
|
|
border-width: 2px;
|
|
border-radius: 8px;
|
|
font-size: 17px;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.compact-height .result-box.retry {
|
|
margin-top: 0;
|
|
padding: 10px 12px;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.compact-height .result-box.retry .result-title {
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.compact-height .result-title {
|
|
font-size: 22px;
|
|
}
|
|
|
|
.compact-height .reason {
|
|
font-size: 19px;
|
|
}
|
|
|
|
.compact-height.font-xlarge .result-box {
|
|
font-size: 18px;
|
|
}
|
|
|
|
.compact-height.font-xlarge .reason {
|
|
font-size: 20px;
|
|
}
|
|
|
|
.compact-height .action-advice {
|
|
margin-top: 4px;
|
|
padding: 10px;
|
|
border-left-width: 4px;
|
|
}
|
|
|
|
.compact-height .advice-label {
|
|
font-size: 15px;
|
|
}
|
|
|
|
.compact-height.font-xlarge .advice-label {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.compact-height .emotion-prompt {
|
|
margin-top: 10px;
|
|
font-size: 23px;
|
|
}
|
|
|
|
.compact-height .emotion-choices {
|
|
gap: 10px;
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.compact-height .emotion-choice {
|
|
min-height: 88px;
|
|
grid-template-columns: 34px 1fr;
|
|
gap: 9px;
|
|
padding: 12px;
|
|
border-width: 2px;
|
|
border-radius: 8px;
|
|
font-size: 17px;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.compact-height .choice-number {
|
|
width: 32px;
|
|
height: 32px;
|
|
font-size: 17px;
|
|
}
|
|
|
|
.compact-height .emotion-note {
|
|
margin-top: 9px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.compact-height .feedback {
|
|
margin-top: 14px;
|
|
font-size: 21px;
|
|
line-height: 1.46;
|
|
}
|
|
|
|
.compact-height .table-echo {
|
|
margin: 13px 0;
|
|
padding: 12px 15px;
|
|
border-left-width: 5px;
|
|
font-size: 20px;
|
|
line-height: 1.43;
|
|
}
|
|
|
|
.compact-height .echo-label {
|
|
font-size: 14px;
|
|
letter-spacing: 2px;
|
|
}
|
|
}
|
|
|
|
/* V3.5 连环画样板：主阅读页只有画、画下文字和翻页。 */
|
|
.comic-topbar {
|
|
position: relative;
|
|
z-index: 20;
|
|
display: flex;
|
|
flex: none;
|
|
width: 100%;
|
|
align-items: center;
|
|
gap: 14px;
|
|
color: #ead9b5;
|
|
background: #2b1f18;
|
|
border-bottom: 3px solid #8f2c25;
|
|
}
|
|
|
|
.comic-catalog-button,
|
|
.comic-font-button,
|
|
.comic-top-previous-button,
|
|
.c1-front-action-button {
|
|
display: flex;
|
|
min-width: 92px;
|
|
min-height: 48px;
|
|
flex: none;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0 15px;
|
|
color: #f1dfb9;
|
|
border: 1px solid #8b704e;
|
|
border-radius: 7px;
|
|
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
|
|
font-size: 18px;
|
|
font-weight: 750;
|
|
}
|
|
|
|
.comic-catalog-button {
|
|
width: 92px;
|
|
}
|
|
|
|
.comic-font-button {
|
|
width: 104px;
|
|
min-width: 104px;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.comic-top-previous-button {
|
|
width: 48px;
|
|
min-width: 48px;
|
|
padding: 0;
|
|
font-size: 30px;
|
|
line-height: 1;
|
|
}
|
|
|
|
.comic-top-previous-button.is-disabled {
|
|
visibility: hidden;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.c1-front-action-button {
|
|
width: 142px;
|
|
min-width: 142px;
|
|
margin-left: auto;
|
|
padding: 0 12px;
|
|
color: #fff0c8;
|
|
background: #873029;
|
|
border-color: #b96556;
|
|
font-size: 17px;
|
|
}
|
|
|
|
.comic-top-previous-button::after,
|
|
.c1-front-action-button::after {
|
|
border: 0;
|
|
}
|
|
|
|
.comic-page-audio-slot {
|
|
display: grid;
|
|
box-sizing: border-box;
|
|
width: 142px;
|
|
min-width: 142px;
|
|
height: 48px;
|
|
min-height: 48px;
|
|
flex: none;
|
|
grid-template-columns: 28px minmax(0, 1fr);
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 4px 8px;
|
|
color: #f3dfb7;
|
|
background: #3c2c22;
|
|
border: 1px solid #8b704e;
|
|
border-radius: 7px;
|
|
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
|
|
text-align: left;
|
|
}
|
|
|
|
.comic-page-audio-slot::after {
|
|
border: 0;
|
|
}
|
|
|
|
.comic-page-audio-slot.is-text-mode {
|
|
opacity: 1;
|
|
color: #ddcca9;
|
|
background: #382a22;
|
|
border-color: #756147;
|
|
}
|
|
|
|
.text-reading-backdrop {
|
|
z-index: 80;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.text-reading-dialog {
|
|
display: grid;
|
|
box-sizing: border-box;
|
|
width: min(760px, calc(100vw - var(--safe-left) - var(--safe-right) - 28px));
|
|
height: min(520px, calc(100vh - var(--modal-top) - var(--safe-bottom) - 24px));
|
|
grid-template-rows: auto minmax(0, 1fr) auto;
|
|
gap: 12px;
|
|
padding: 22px 26px 20px;
|
|
color: #2e241d;
|
|
background: #f2e3bd;
|
|
border: 3px solid #8c372d;
|
|
border-radius: 10px;
|
|
box-shadow: 0 16px 42px rgba(15, 9, 5, 0.45);
|
|
}
|
|
|
|
.text-reading-kicker {
|
|
padding-right: 58px;
|
|
color: #8e3027;
|
|
font-size: 18px;
|
|
font-weight: 800;
|
|
line-height: 1.25;
|
|
}
|
|
|
|
.text-reading-scroll {
|
|
min-height: 0;
|
|
border-top: 1px solid rgba(126, 79, 43, 0.35);
|
|
border-bottom: 1px solid rgba(126, 79, 43, 0.35);
|
|
}
|
|
|
|
.text-reading-sheet {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
padding: 18px 4px 22px;
|
|
}
|
|
|
|
.text-reading-title {
|
|
color: #752820;
|
|
font-size: 30px;
|
|
font-weight: 900;
|
|
line-height: 1.28;
|
|
}
|
|
|
|
.text-reading-body {
|
|
font-size: 28px;
|
|
font-weight: 750;
|
|
line-height: 1.55;
|
|
}
|
|
|
|
.font-xlarge .text-reading-title {
|
|
font-size: 34px;
|
|
}
|
|
|
|
.font-xlarge .text-reading-body {
|
|
font-size: 31px;
|
|
}
|
|
|
|
.font-xlarge .text-reading-secondary,
|
|
.font-xlarge .text-reading-prompt {
|
|
font-size: 25px;
|
|
}
|
|
|
|
.text-reading-secondary {
|
|
color: #5f4a3d;
|
|
font-size: 22px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.text-reading-prompt {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 7px;
|
|
padding: 14px 16px;
|
|
font-size: 22px;
|
|
line-height: 1.45;
|
|
background: rgba(255, 250, 231, 0.66);
|
|
border-left: 5px solid #8e3027;
|
|
}
|
|
|
|
.text-reading-label {
|
|
color: #8e3027;
|
|
font-size: 17px;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.text-reading-return {
|
|
min-height: 54px;
|
|
color: #fff5d9;
|
|
background: #8e3027;
|
|
border: 0;
|
|
border-radius: 8px;
|
|
font-size: 24px;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.text-reading-return::after {
|
|
border: 0;
|
|
}
|
|
|
|
.compact-height .text-reading-dialog {
|
|
width: min(720px, calc(100vw - var(--safe-left) - var(--safe-right) - 20px));
|
|
height: calc(100vh - var(--modal-top) - var(--safe-bottom) - 14px);
|
|
gap: 8px;
|
|
padding: 14px 20px 12px;
|
|
}
|
|
|
|
.compact-height .text-reading-kicker {
|
|
font-size: 15px;
|
|
}
|
|
|
|
.compact-height .text-reading-sheet {
|
|
gap: 10px;
|
|
padding: 10px 3px 14px;
|
|
}
|
|
|
|
.compact-height .text-reading-title {
|
|
font-size: 24px;
|
|
}
|
|
|
|
.compact-height .text-reading-body {
|
|
font-size: 23px;
|
|
line-height: 1.42;
|
|
}
|
|
|
|
.compact-height.font-xlarge .text-reading-title {
|
|
font-size: 27px;
|
|
}
|
|
|
|
.compact-height.font-xlarge .text-reading-body {
|
|
font-size: 25px;
|
|
}
|
|
|
|
.compact-height.font-xlarge .text-reading-secondary,
|
|
.compact-height.font-xlarge .text-reading-prompt {
|
|
font-size: 20px;
|
|
}
|
|
|
|
.compact-height .text-reading-secondary,
|
|
.compact-height .text-reading-prompt {
|
|
font-size: 18px;
|
|
}
|
|
|
|
.compact-height .text-reading-return {
|
|
min-height: 48px;
|
|
font-size: 21px;
|
|
}
|
|
|
|
.comic-page-audio-slot.is-playing {
|
|
color: #fff0c8;
|
|
background: #7f2a24;
|
|
border-color: #c26e5e;
|
|
}
|
|
|
|
.comic-page-audio-slot.is-replay {
|
|
color: #f1e7ca;
|
|
background: #355344;
|
|
border-color: #76927e;
|
|
}
|
|
|
|
.comic-page-audio-icon {
|
|
display: flex;
|
|
width: 28px;
|
|
height: 28px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: 2px solid currentColor;
|
|
border-radius: 50%;
|
|
font-size: 15px;
|
|
font-weight: 900;
|
|
line-height: 1;
|
|
}
|
|
|
|
.comic-page-audio-copy {
|
|
display: flex;
|
|
min-width: 0;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.comic-page-audio-label,
|
|
.comic-page-audio-meta {
|
|
display: block;
|
|
overflow: hidden;
|
|
line-height: 1.08;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.comic-page-audio-label {
|
|
font-size: 16px;
|
|
font-weight: 850;
|
|
}
|
|
|
|
.comic-page-audio-meta {
|
|
margin-top: 2px;
|
|
color: #c9b995;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.comic-bookmark {
|
|
display: flex;
|
|
min-width: 0;
|
|
flex: 1 1 auto;
|
|
align-items: center;
|
|
gap: 16px;
|
|
color: #dbc79f;
|
|
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.comic-bookmark-label,
|
|
.comic-page-count {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.comic-page-count {
|
|
color: #f1cb73;
|
|
}
|
|
|
|
.compact-height .comic-topbar {
|
|
gap: 7px;
|
|
}
|
|
|
|
.compact-height .comic-catalog-button {
|
|
width: 78px;
|
|
min-width: 78px;
|
|
min-height: 48px;
|
|
padding: 0 9px;
|
|
font-size: 17px;
|
|
}
|
|
|
|
.compact-height .comic-font-button {
|
|
width: 76px;
|
|
min-width: 76px;
|
|
min-height: 48px;
|
|
padding: 0 8px;
|
|
font-size: 17px;
|
|
}
|
|
|
|
.compact-height .comic-top-previous-button {
|
|
width: 48px;
|
|
min-width: 48px;
|
|
min-height: 48px;
|
|
padding: 0;
|
|
}
|
|
|
|
.compact-height .c1-front-action-button {
|
|
width: 118px;
|
|
min-width: 118px;
|
|
min-height: 48px;
|
|
padding: 0 7px;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.compact-height .comic-page-audio-slot {
|
|
width: 128px;
|
|
min-width: 128px;
|
|
padding: 4px 6px;
|
|
grid-template-columns: 26px minmax(0, 1fr);
|
|
}
|
|
|
|
.compact-height .comic-page-audio-icon {
|
|
width: 26px;
|
|
height: 26px;
|
|
}
|
|
|
|
.compact-height .comic-page-audio-label {
|
|
font-size: 15px;
|
|
}
|
|
|
|
.compact-height .comic-page-audio-meta {
|
|
font-size: 11px;
|
|
}
|
|
|
|
.compact-height .comic-bookmark {
|
|
gap: 7px;
|
|
overflow: hidden;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.comic-reader {
|
|
position: relative;
|
|
display: flex;
|
|
min-height: 0;
|
|
flex: 1 1 auto;
|
|
overflow: hidden;
|
|
padding-right: var(--safe-right);
|
|
padding-bottom: var(--safe-bottom);
|
|
padding-left: var(--safe-left);
|
|
background: #17100c;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* 第一章试行母版：正面看画，点击后选择，解释放在纸页背面。 */
|
|
.c1-book-topbar {
|
|
gap: 10px;
|
|
background: #2b1c15;
|
|
border-bottom: 3px solid #913027;
|
|
}
|
|
|
|
.c1-book-topbar.is-front {
|
|
position: absolute;
|
|
z-index: 30;
|
|
inset: 0 0 auto 0;
|
|
background: rgba(33, 24, 19, 0.94);
|
|
border-bottom: 1px solid rgba(205, 171, 106, 0.34);
|
|
box-shadow: none;
|
|
transition: opacity 160ms ease, background-color 160ms ease;
|
|
}
|
|
|
|
.c1-book-topbar.is-front.is-controls-hidden {
|
|
opacity: 0;
|
|
background: transparent;
|
|
border-bottom-color: transparent;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.c1-book-topbar.is-front.is-controls-revealed {
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.c1-book-topbar.is-front .comic-bookmark {
|
|
justify-content: center;
|
|
}
|
|
|
|
.c1-book-topbar .comic-bookmark {
|
|
margin-right: auto;
|
|
}
|
|
|
|
.c1-audio-slot {
|
|
width: 104px;
|
|
min-width: 104px;
|
|
}
|
|
|
|
.c1-audio-slot .comic-page-audio-meta {
|
|
display: none;
|
|
}
|
|
|
|
/* “直接看文字”与“试听本页”都保持整词显示。文字占位态不再挤进图标，
|
|
* 让四个字在最窄横屏上也完整显示，同时保留同一个固定槽位。 */
|
|
.c1-audio-slot.is-text-mode {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
text-align: center;
|
|
}
|
|
|
|
.c1-audio-slot.is-text-mode .comic-page-audio-icon {
|
|
display: none;
|
|
}
|
|
|
|
.c1-comic-page {
|
|
position: relative;
|
|
display: flex;
|
|
width: 100%;
|
|
min-height: 0;
|
|
flex: 1 1 auto;
|
|
overflow: hidden;
|
|
background: #17100c;
|
|
}
|
|
|
|
.c1-front-stage {
|
|
position: relative;
|
|
width: 100%;
|
|
min-height: 0;
|
|
flex: 1 1 auto;
|
|
overflow: hidden;
|
|
background: #1e1510;
|
|
border: 1px solid rgba(213, 178, 112, 0.42);
|
|
box-shadow: inset 0 0 36px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.c1-front-image,
|
|
.c1-front-grain {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.c1-front-reveal-gate {
|
|
position: absolute;
|
|
z-index: 12;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 0;
|
|
background: transparent;
|
|
border: 0;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.c1-front-reveal-gate::after {
|
|
border: 0;
|
|
}
|
|
|
|
.c1-front-first-hint {
|
|
position: absolute;
|
|
z-index: 13;
|
|
bottom: max(18px, calc(var(--safe-bottom) + 12px));
|
|
left: 50%;
|
|
display: flex;
|
|
min-height: 48px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 10px 18px;
|
|
color: #fff1c9;
|
|
background: rgba(31, 21, 15, 0.9);
|
|
border: 1px solid rgba(239, 205, 136, 0.76);
|
|
border-radius: 24px;
|
|
box-shadow: 0 5px 18px rgba(0, 0, 0, 0.46);
|
|
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
|
|
font-size: 18px;
|
|
font-weight: 800;
|
|
line-height: 1.35;
|
|
pointer-events: none;
|
|
transform: translateX(-50%);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.c1-front-image {
|
|
z-index: 1;
|
|
display: block;
|
|
}
|
|
|
|
.c1-front-grain {
|
|
z-index: 3;
|
|
pointer-events: none;
|
|
background:
|
|
linear-gradient(0deg, rgba(30, 18, 11, 0.22), transparent 28%),
|
|
repeating-linear-gradient(0deg, rgba(61, 40, 24, 0.02) 0, rgba(61, 40, 24, 0.02) 1px, transparent 1px, transparent 5px);
|
|
box-shadow: inset 0 0 48px rgba(42, 25, 15, 0.16);
|
|
}
|
|
|
|
.c1-front-fallback {
|
|
position: absolute;
|
|
z-index: 2;
|
|
inset: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
padding: 30px;
|
|
color: #4e3b2b;
|
|
background: #d8c49d;
|
|
flex-direction: column;
|
|
font-size: 20px;
|
|
line-height: 1.5;
|
|
text-align: center;
|
|
}
|
|
|
|
.c1-full-page-tap {
|
|
position: absolute;
|
|
z-index: 5;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 0;
|
|
background: transparent;
|
|
border: 0;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.c1-person-hotspot {
|
|
position: absolute;
|
|
z-index: 7;
|
|
min-width: 104px;
|
|
min-height: 104px;
|
|
padding: 0;
|
|
background: transparent;
|
|
border: 0;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.c1-person-hotspot::after,
|
|
.c1-full-page-tap::after,
|
|
.c1-previous-page::after,
|
|
.c1-back-button::after,
|
|
.c1-natural-choice::after,
|
|
.c1-retry-button::after,
|
|
.c1-tray-close::after {
|
|
border: 0;
|
|
}
|
|
|
|
.c1-hotspot-ring {
|
|
position: absolute;
|
|
inset: -4px;
|
|
opacity: 0.3;
|
|
border: 0;
|
|
border-radius: 48% 52% 46% 54%;
|
|
background: radial-gradient(ellipse at center, rgba(244, 215, 151, 0.2) 0 45%, rgba(151, 69, 52, 0.16) 58%, transparent 72%);
|
|
box-shadow: none;
|
|
animation: c1-ink-breathe 2.8s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes c1-ink-breathe {
|
|
0%, 100% { opacity: 0.28; transform: scale(0.98); }
|
|
50% { opacity: 0.62; transform: scale(1.025); }
|
|
}
|
|
|
|
.c1-front-folio {
|
|
position: absolute;
|
|
z-index: 9;
|
|
right: 18px;
|
|
bottom: 16px;
|
|
left: auto;
|
|
display: flex;
|
|
min-height: 38px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0 12px;
|
|
color: #f3dfb6;
|
|
background: rgba(35, 24, 18, 0.5);
|
|
border: 0;
|
|
border-radius: 5px;
|
|
box-shadow: none;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.c1-front-folio-copy {
|
|
display: flex;
|
|
min-width: 0;
|
|
align-items: baseline;
|
|
gap: 12px;
|
|
}
|
|
|
|
.c1-front-kicker {
|
|
flex: none;
|
|
color: #e8c675;
|
|
font-size: 16px;
|
|
font-weight: 850;
|
|
letter-spacing: 2px;
|
|
}
|
|
|
|
.c1-front-title {
|
|
overflow: hidden;
|
|
font-family: "Songti SC", "STSong", serif;
|
|
font-size: 24px;
|
|
font-weight: 900;
|
|
line-height: 1.25;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.c1-front-hint {
|
|
color: #f0d797;
|
|
font-size: 15px;
|
|
font-weight: 750;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.c1-previous-page {
|
|
position: absolute;
|
|
z-index: 11;
|
|
bottom: 16px;
|
|
left: 15px;
|
|
display: flex;
|
|
width: 50px;
|
|
height: 58px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 0;
|
|
padding: 0;
|
|
color: #ebd6aa;
|
|
background: rgba(43, 29, 20, 0.62);
|
|
border: 1px solid rgba(181, 142, 86, 0.72);
|
|
border-radius: 6px;
|
|
font-size: 35px;
|
|
font-weight: 700;
|
|
line-height: 1;
|
|
}
|
|
|
|
.c1-back-paper {
|
|
position: relative;
|
|
display: grid;
|
|
width: 100%;
|
|
min-height: 0;
|
|
flex: 1 1 auto;
|
|
overflow: hidden;
|
|
color: #34271d;
|
|
background:
|
|
repeating-linear-gradient(0deg, rgba(83, 55, 32, 0.028) 0, rgba(83, 55, 32, 0.028) 1px, transparent 1px, transparent 5px),
|
|
#f1e2bd;
|
|
grid-template-columns: minmax(210px, 2fr) minmax(0, 3fr);
|
|
grid-template-rows: minmax(0, 1fr) auto auto;
|
|
}
|
|
|
|
.c1-back-evidence {
|
|
position: relative;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
background:
|
|
repeating-linear-gradient(0deg, rgba(232, 202, 143, 0.025) 0, rgba(232, 202, 143, 0.025) 1px, transparent 1px, transparent 5px),
|
|
#38271f;
|
|
border-right: 3px solid #883028;
|
|
grid-column: 1;
|
|
grid-row: 1 / span 3;
|
|
}
|
|
|
|
.c1-back-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.c1-back-image-fallback {
|
|
display: flex;
|
|
width: 100%;
|
|
height: 100%;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 22px;
|
|
color: #5b4835;
|
|
background: #d2bd93;
|
|
font-size: 18px;
|
|
line-height: 1.45;
|
|
text-align: center;
|
|
}
|
|
|
|
.c1-back-stamp {
|
|
position: absolute;
|
|
bottom: 14px;
|
|
left: 14px;
|
|
padding: 3px 0 3px 9px;
|
|
color: #e9c879;
|
|
background: transparent;
|
|
border: 0;
|
|
border-left: 3px solid #a64236;
|
|
border-radius: 0;
|
|
font-size: 14px;
|
|
font-weight: 850;
|
|
letter-spacing: 1px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.c1-scroll-hint {
|
|
z-index: 4;
|
|
display: block;
|
|
width: 100%;
|
|
margin: 0;
|
|
padding: 3px 12px;
|
|
color: #6f4b35;
|
|
background: rgba(233, 214, 170, 0.72);
|
|
border-top: 1px solid rgba(119, 82, 52, 0.22);
|
|
border-right: 3px solid rgba(145, 49, 40, 0.72);
|
|
box-shadow: 0 -10px 14px rgba(241, 226, 189, 0.86);
|
|
font-size: 16px;
|
|
font-weight: 750;
|
|
grid-column: 2;
|
|
grid-row: 2;
|
|
pointer-events: none;
|
|
text-align: right;
|
|
}
|
|
|
|
.c1-back-copy {
|
|
min-width: 0;
|
|
min-height: 0;
|
|
height: 100%;
|
|
grid-column: 2;
|
|
grid-row: 1;
|
|
}
|
|
|
|
.c1-back-copy-inner {
|
|
display: flex;
|
|
min-height: 100%;
|
|
justify-content: center;
|
|
gap: 9px;
|
|
padding: 18px 24px 15px;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.c1-back-kicker {
|
|
display: block;
|
|
color: #8f3028;
|
|
font-size: 16px;
|
|
font-weight: 850;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.c1-back-title {
|
|
display: block;
|
|
color: #2f231a;
|
|
font-family: "Songti SC", "STSong", serif;
|
|
font-size: 28px;
|
|
font-weight: 900;
|
|
line-height: 1.25;
|
|
}
|
|
|
|
.font-xlarge .c1-back-title {
|
|
font-size: 31px;
|
|
}
|
|
|
|
.c1-back-body,
|
|
.c1-back-secondary,
|
|
.c1-back-reason,
|
|
.c1-back-family,
|
|
.c1-back-callout,
|
|
.c1-back-action {
|
|
display: block;
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.font-xlarge .c1-back-body,
|
|
.font-xlarge .c1-back-secondary,
|
|
.font-xlarge .c1-back-reason,
|
|
.font-xlarge .c1-back-family,
|
|
.font-xlarge .c1-back-callout,
|
|
.font-xlarge .c1-back-action {
|
|
font-size: 23px;
|
|
}
|
|
|
|
.c1-back-secondary,
|
|
.c1-back-reason {
|
|
color: #654f39;
|
|
}
|
|
|
|
.c1-back-callout,
|
|
.c1-back-action {
|
|
padding: 10px 13px;
|
|
background: rgba(255, 250, 232, 0.54);
|
|
border-left: 5px solid #a58954;
|
|
}
|
|
|
|
.c1-back-action {
|
|
border-left-color: #8f3028;
|
|
}
|
|
|
|
.c1-back-label {
|
|
display: block;
|
|
margin-bottom: 3px;
|
|
color: #8f3028;
|
|
font-size: 16px;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.c1-back-family {
|
|
color: #6c332c;
|
|
font-family: "Songti SC", "STSong", serif;
|
|
}
|
|
|
|
.c1-memory-secondary-actions {
|
|
display: grid;
|
|
gap: 8px;
|
|
margin-top: 2px;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.c1-memory-secondary-action {
|
|
display: flex;
|
|
min-width: 0;
|
|
min-height: 48px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 0;
|
|
padding: 6px 10px;
|
|
color: #604632;
|
|
background: transparent;
|
|
border: 1px solid rgba(118, 87, 58, 0.46);
|
|
border-radius: 5px;
|
|
font-size: 16px;
|
|
font-weight: 760;
|
|
}
|
|
|
|
.c1-memory-secondary-action::after {
|
|
border: 0;
|
|
}
|
|
|
|
.c1-back-footer {
|
|
display: flex;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
gap: 10px;
|
|
padding: 9px 12px;
|
|
background: rgba(106, 74, 44, 0.09);
|
|
border-top: 1px solid rgba(107, 77, 46, 0.28);
|
|
grid-column: 2;
|
|
grid-row: 3;
|
|
justify-self: stretch;
|
|
}
|
|
|
|
.c1-back-button {
|
|
display: flex;
|
|
width: 0;
|
|
min-width: 0;
|
|
min-height: 54px;
|
|
flex: 1 1 0;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 0;
|
|
padding: 7px 12px;
|
|
color: #f6e8c6;
|
|
background: #4b3427;
|
|
border: 2px solid #806247;
|
|
border-radius: 8px;
|
|
font-size: 19px;
|
|
font-weight: 850;
|
|
}
|
|
|
|
.c1-back-button.primary {
|
|
background: #913128;
|
|
border-color: #ad5a4e;
|
|
}
|
|
|
|
.c1-memory-footer {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 10px;
|
|
}
|
|
|
|
.c1-memory-footer .c1-back-button {
|
|
width: 100%;
|
|
min-height: 54px;
|
|
padding: 7px 10px;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.c1-back-button.report,
|
|
.c1-back-button.share {
|
|
color: #513a28;
|
|
background: #ead9ad;
|
|
border-color: #9d8059;
|
|
}
|
|
|
|
.c1-decision-layer {
|
|
position: fixed;
|
|
z-index: 80;
|
|
top: var(--topbar-height);
|
|
right: var(--safe-right);
|
|
bottom: var(--safe-bottom);
|
|
left: var(--safe-left);
|
|
display: flex;
|
|
align-items: stretch;
|
|
justify-content: center;
|
|
padding: 0;
|
|
background: #17100c;
|
|
}
|
|
|
|
.c1-interaction-paper {
|
|
position: relative;
|
|
display: grid;
|
|
width: 100%;
|
|
min-height: 0;
|
|
flex: 1 1 auto;
|
|
overflow: hidden;
|
|
color: #34271d;
|
|
background:
|
|
repeating-linear-gradient(0deg, rgba(83, 55, 32, 0.028) 0, rgba(83, 55, 32, 0.028) 1px, transparent 1px, transparent 5px),
|
|
#f1e2bd;
|
|
grid-template-columns: minmax(210px, 2fr) minmax(0, 3fr);
|
|
grid-template-rows: minmax(0, 1fr);
|
|
}
|
|
|
|
.c1-emotion-interaction-paper {
|
|
position: absolute;
|
|
z-index: 10;
|
|
top: var(--topbar-height);
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: auto;
|
|
}
|
|
|
|
.c1-interaction-evidence {
|
|
position: relative;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
background:
|
|
repeating-linear-gradient(0deg, rgba(232, 202, 143, 0.025) 0, rgba(232, 202, 143, 0.025) 1px, transparent 1px, transparent 5px),
|
|
#38271f;
|
|
border-right: 3px solid #883028;
|
|
grid-column: 1;
|
|
grid-row: 1;
|
|
}
|
|
|
|
.c1-interaction-image {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.c1-interaction-panel {
|
|
position: relative;
|
|
display: flex;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
justify-content: center;
|
|
gap: 12px;
|
|
overflow: hidden;
|
|
padding: 16px 18px;
|
|
flex-direction: column;
|
|
grid-column: 2;
|
|
grid-row: 1;
|
|
}
|
|
|
|
.c1-interaction-panel .c1-tray-heading {
|
|
padding-right: 94px;
|
|
}
|
|
|
|
.c1-choice-stack {
|
|
display: grid;
|
|
min-width: 0;
|
|
gap: 10px;
|
|
grid-template-columns: minmax(0, 1fr);
|
|
grid-template-rows: repeat(2, minmax(70px, auto));
|
|
}
|
|
|
|
.c1-retry-panel {
|
|
align-items: stretch;
|
|
}
|
|
|
|
.c1-decision-tray,
|
|
.c1-emotion-tray {
|
|
position: relative;
|
|
z-index: 30;
|
|
display: grid;
|
|
width: 100%;
|
|
min-height: 118px;
|
|
align-items: stretch;
|
|
gap: 10px;
|
|
padding: 13px 104px 13px 15px;
|
|
color: #34271d;
|
|
background: rgba(244, 231, 196, 0.98);
|
|
border: 3px solid #9e845e;
|
|
border-radius: 11px;
|
|
box-shadow: 0 13px 30px rgba(0, 0, 0, 0.34);
|
|
grid-template-columns: minmax(210px, 1.05fr) repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.c1-emotion-tray {
|
|
position: absolute;
|
|
right: 12px;
|
|
bottom: 12px;
|
|
left: 12px;
|
|
width: auto;
|
|
}
|
|
|
|
.c1-tray-heading {
|
|
display: flex;
|
|
min-width: 0;
|
|
justify-content: center;
|
|
gap: 4px;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.c1-tray-kicker {
|
|
color: #8f3028;
|
|
font-size: 15px;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.c1-tray-question {
|
|
font-size: 20px;
|
|
font-weight: 850;
|
|
line-height: 1.36;
|
|
}
|
|
|
|
.c1-natural-choice {
|
|
display: flex;
|
|
min-width: 0;
|
|
min-height: 70px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 0;
|
|
padding: 8px 12px;
|
|
color: #3e2d21;
|
|
background: #f1dfb3;
|
|
border: 3px solid #8d7353;
|
|
border-radius: 9px;
|
|
font-size: 18px;
|
|
font-weight: 850;
|
|
line-height: 1.35;
|
|
text-align: left;
|
|
}
|
|
|
|
.c1-natural-choice:active {
|
|
background: #e6c98b;
|
|
}
|
|
|
|
.c1-tray-close {
|
|
position: absolute;
|
|
top: 9px;
|
|
right: 9px;
|
|
display: flex;
|
|
width: auto;
|
|
min-width: 82px;
|
|
height: 48px;
|
|
min-height: 48px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 0;
|
|
padding: 0;
|
|
color: #4a3527;
|
|
background: #f4e2b7;
|
|
border: 2px solid #8d7353;
|
|
border-radius: 6px;
|
|
font-size: 16px;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.c1-retry-tray {
|
|
grid-template-columns: minmax(0, 1.3fr) minmax(210px, 0.7fr);
|
|
grid-template-rows: auto auto;
|
|
}
|
|
|
|
.c1-retry-title {
|
|
align-self: end;
|
|
color: #713329;
|
|
font-size: 22px;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.c1-retry-copy {
|
|
align-self: start;
|
|
color: #5f4a36;
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.c1-retry-button {
|
|
display: flex;
|
|
min-height: 58px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 0;
|
|
padding: 8px 12px;
|
|
color: #f8e8c5;
|
|
background: #8f3028;
|
|
border: 2px solid #ad5a4e;
|
|
border-radius: 8px;
|
|
font-size: 19px;
|
|
font-weight: 850;
|
|
grid-column: 2;
|
|
grid-row: 1 / span 2;
|
|
}
|
|
|
|
.c1-event-result-back {
|
|
height: 100%;
|
|
}
|
|
|
|
.comic-normal-page {
|
|
display: grid;
|
|
width: 100%;
|
|
min-height: 0;
|
|
flex: 1;
|
|
overflow: hidden;
|
|
grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
|
|
grid-template-rows: minmax(0, 1fr);
|
|
color: #34271d;
|
|
background: #17100c;
|
|
}
|
|
|
|
.comic-art-column {
|
|
display: flex;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
padding: 6px;
|
|
background:
|
|
repeating-linear-gradient(0deg, rgba(204, 173, 117, 0.035) 0, rgba(204, 173, 117, 0.035) 1px, transparent 1px, transparent 5px),
|
|
#241811;
|
|
}
|
|
|
|
.comic-art-stage {
|
|
position: relative;
|
|
flex: none;
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
overflow: hidden;
|
|
background: #cbb78d;
|
|
border: 1px solid rgba(222, 194, 143, 0.46);
|
|
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
|
|
}
|
|
|
|
.comic-art-image,
|
|
.comic-paper-grain {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.comic-art-image {
|
|
z-index: 0;
|
|
display: block;
|
|
}
|
|
|
|
.comic-paper-grain {
|
|
z-index: 2;
|
|
pointer-events: none;
|
|
background:
|
|
linear-gradient(0deg, rgba(45, 28, 17, 0.12), transparent 38%),
|
|
repeating-linear-gradient(0deg, rgba(62, 43, 25, 0.025) 0, rgba(62, 43, 25, 0.025) 1px, transparent 1px, transparent 4px);
|
|
box-shadow: inset 0 0 42px rgba(56, 38, 24, 0.18);
|
|
}
|
|
|
|
.comic-evidence-composite {
|
|
position: absolute;
|
|
z-index: 6;
|
|
right: 5%;
|
|
bottom: 7%;
|
|
display: flex;
|
|
box-sizing: border-box;
|
|
width: min(62%, 430px);
|
|
max-height: 78%;
|
|
overflow: hidden;
|
|
gap: 5px;
|
|
padding: 14px 16px 15px;
|
|
color: #f7e9c9;
|
|
background: rgba(43, 31, 23, 0.92);
|
|
border: 2px solid rgba(220, 184, 112, 0.88);
|
|
border-left: 7px solid #a63b2e;
|
|
border-radius: 7px;
|
|
box-shadow: 0 12px 28px rgba(20, 12, 8, 0.34);
|
|
flex-direction: column;
|
|
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.comic-evidence-kicker {
|
|
color: #e9c576;
|
|
font-size: 15px;
|
|
font-weight: 850;
|
|
letter-spacing: 2px;
|
|
}
|
|
|
|
.comic-evidence-label {
|
|
font-size: 24px;
|
|
font-weight: 900;
|
|
line-height: 1.22;
|
|
}
|
|
|
|
.comic-evidence-detail {
|
|
display: -webkit-box;
|
|
overflow: hidden;
|
|
color: #eadcc1;
|
|
font-size: 17px;
|
|
line-height: 1.42;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 3;
|
|
}
|
|
|
|
.comic-art-fallback {
|
|
position: absolute;
|
|
z-index: 1;
|
|
inset: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
padding: 28px;
|
|
color: #5c4935;
|
|
background:
|
|
radial-gradient(circle at 38% 42%, rgba(151, 86, 58, 0.14), transparent 32%),
|
|
#d4c39d;
|
|
flex-direction: column;
|
|
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
|
|
font-size: 18px;
|
|
line-height: 1.55;
|
|
text-align: center;
|
|
}
|
|
|
|
.cover-copy {
|
|
position: absolute;
|
|
z-index: 5;
|
|
top: 12%;
|
|
left: 8%;
|
|
display: flex;
|
|
max-width: 58%;
|
|
padding: 18px 24px;
|
|
color: #f5e7c8;
|
|
background: rgba(41, 29, 21, 0.82);
|
|
border-left: 7px solid #9f3028;
|
|
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
|
|
flex-direction: column;
|
|
}
|
|
|
|
.cover-kicker {
|
|
color: #e2bf75;
|
|
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
|
|
font-size: 18px;
|
|
letter-spacing: 3px;
|
|
}
|
|
|
|
.cover-title {
|
|
margin-top: 7px;
|
|
font-size: 34px;
|
|
font-weight: 900;
|
|
letter-spacing: 3px;
|
|
}
|
|
|
|
.comic-actor-hotspot {
|
|
position: absolute;
|
|
z-index: 10;
|
|
min-width: 96px;
|
|
min-height: 96px;
|
|
overflow: visible;
|
|
padding: 0;
|
|
color: transparent;
|
|
background: transparent;
|
|
border: 0;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.comic-actor-hotspot.is-quiet {
|
|
background: transparent;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.comic-fallback-actor-button {
|
|
position: absolute;
|
|
z-index: 10;
|
|
left: 18px;
|
|
right: 18px;
|
|
bottom: 16px;
|
|
display: flex;
|
|
box-sizing: border-box;
|
|
width: calc(100% - 36px);
|
|
min-width: 0;
|
|
min-height: 62px;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
gap: 10px;
|
|
padding: 9px 16px;
|
|
color: #f8e8c7;
|
|
background: rgba(51, 35, 24, 0.92);
|
|
border: 2px solid #d4ad62;
|
|
border-left: 7px solid #9b3028;
|
|
border-radius: 8px;
|
|
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
|
|
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
|
|
text-align: left;
|
|
}
|
|
|
|
.comic-fallback-actor-button.is-seen {
|
|
color: #e6f1e2;
|
|
background: rgba(40, 76, 58, 0.94);
|
|
border-color: #98bd9d;
|
|
}
|
|
|
|
.fallback-proof-label {
|
|
flex: none;
|
|
padding: 4px 8px;
|
|
color: #6c251f;
|
|
background: #e6c87f;
|
|
border-radius: 999px;
|
|
font-size: 15px;
|
|
font-weight: 850;
|
|
}
|
|
|
|
.fallback-actor-action {
|
|
min-width: 0;
|
|
flex: 1 1 auto;
|
|
font-size: 19px;
|
|
font-weight: 850;
|
|
line-height: 1.25;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.hotspot-ink-ring {
|
|
position: absolute;
|
|
inset: -5px;
|
|
opacity: 0.44;
|
|
border: 3px solid rgba(210, 169, 92, 0.82);
|
|
border-radius: 48% 52% 45% 55%;
|
|
box-shadow: 0 0 0 6px rgba(159, 48, 40, 0.12);
|
|
animation: comic-ink-hint 2.8s ease-in-out 0.35s infinite;
|
|
}
|
|
|
|
.hotspot-guide-label {
|
|
position: absolute;
|
|
right: 50%;
|
|
bottom: 4px;
|
|
min-width: 82px;
|
|
transform: translateX(50%);
|
|
padding: 5px 10px;
|
|
color: #fff0c8;
|
|
background: rgba(70, 42, 27, 0.9);
|
|
border: 2px solid rgba(224, 190, 119, 0.88);
|
|
border-radius: 999px;
|
|
box-shadow: 0 5px 12px rgba(31, 18, 10, 0.28);
|
|
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
|
|
font-size: 16px;
|
|
font-weight: 850;
|
|
line-height: 1.2;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.comic-actor-hotspot.is-seen .hotspot-ink-ring {
|
|
display: none;
|
|
}
|
|
|
|
@keyframes comic-ink-hint {
|
|
0%, 100% { opacity: 0.32; transform: scale(0.97); }
|
|
50% { opacity: 0.68; transform: scale(1.04); }
|
|
}
|
|
|
|
.comic-caption-strip {
|
|
display: grid;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
grid-template-columns: minmax(0, 1fr);
|
|
grid-template-rows: minmax(0, 1fr) auto;
|
|
align-items: stretch;
|
|
color: #34271d;
|
|
background:
|
|
repeating-linear-gradient(0deg, rgba(85, 54, 31, 0.028) 0, rgba(85, 54, 31, 0.028) 1px, transparent 1px, transparent 5px),
|
|
#f0e1b9;
|
|
border-left: 4px solid #8f2c25;
|
|
}
|
|
|
|
.comic-caption-copy {
|
|
min-width: 0;
|
|
min-height: 0;
|
|
height: 100%;
|
|
padding: 18px 22px 16px;
|
|
}
|
|
|
|
.comic-cover-caption-layout {
|
|
display: grid;
|
|
min-width: 0;
|
|
min-height: 100%;
|
|
align-items: center;
|
|
gap: 18px;
|
|
grid-template-columns: minmax(190px, 0.9fr) minmax(0, 1.1fr);
|
|
}
|
|
|
|
.comic-cover-caption-heading {
|
|
min-width: 0;
|
|
}
|
|
|
|
.comic-cover-caption-layout .comic-caption-heading,
|
|
.comic-cover-caption-layout .comic-caption-kicker {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.comic-cover-caption-text {
|
|
min-width: 0;
|
|
padding-left: 18px;
|
|
border-left: 2px solid rgba(143, 48, 40, 0.34);
|
|
}
|
|
|
|
.comic-ensemble-caption-layout,
|
|
.comic-event-caption-layout {
|
|
display: grid;
|
|
min-width: 0;
|
|
min-height: 100%;
|
|
align-items: center;
|
|
gap: 16px;
|
|
}
|
|
|
|
.comic-ensemble-caption-layout {
|
|
grid-template-columns: minmax(150px, 0.72fr) minmax(0, 1.28fr);
|
|
}
|
|
|
|
.comic-ensemble-caption-layout > .comic-caption-heading {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.comic-ensemble-caption-copy,
|
|
.comic-event-caption-copy,
|
|
.comic-event-cue {
|
|
min-width: 0;
|
|
}
|
|
|
|
.comic-ensemble-caption-copy,
|
|
.comic-event-cue {
|
|
padding-left: 16px;
|
|
border-left: 2px solid rgba(143, 48, 40, 0.28);
|
|
}
|
|
|
|
.comic-event-caption-layout {
|
|
grid-template-columns: minmax(0, 1.62fr) minmax(150px, 0.88fr);
|
|
}
|
|
|
|
.comic-event-caption-layout .comic-caption {
|
|
font-size: 19px;
|
|
line-height: 1.42;
|
|
}
|
|
|
|
.comic-event-caption-layout .comic-tap-prompt {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.comic-outside-actor-button {
|
|
display: flex;
|
|
box-sizing: border-box;
|
|
width: 160px;
|
|
max-width: 100%;
|
|
min-width: 0;
|
|
min-height: 52px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 7px 9px;
|
|
color: #f7e8c5;
|
|
background: #8f3028;
|
|
border: 2px solid #ad5a4e;
|
|
border-radius: 8px;
|
|
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
|
|
font-size: 17px;
|
|
font-weight: 850;
|
|
line-height: 1.3;
|
|
text-align: center;
|
|
}
|
|
|
|
.comic-art-tap-note { display: block; color: #76533d; font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif; font-size: 14px; font-weight: 750; line-height: 1.25; }
|
|
.comic-event-cue .comic-art-tap-note { margin-bottom: 6px; }
|
|
|
|
.comic-event-caption-layout .comic-seen-row {
|
|
align-items: flex-start;
|
|
margin-top: 0;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.comic-caption-heading {
|
|
display: block;
|
|
margin-bottom: 10px;
|
|
color: #8f3028;
|
|
font-family: "Songti SC", "STSong", serif;
|
|
font-size: 25px;
|
|
font-weight: 900;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.comic-caption-kicker {
|
|
display: block;
|
|
margin-bottom: 5px;
|
|
color: #8f3028;
|
|
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
|
|
font-size: 18px;
|
|
font-weight: 850;
|
|
letter-spacing: 2px;
|
|
}
|
|
|
|
.comic-caption {
|
|
display: block;
|
|
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
|
|
font-size: 21px;
|
|
font-weight: 750;
|
|
line-height: 1.52;
|
|
}
|
|
|
|
.comic-secondary-caption {
|
|
display: block;
|
|
margin-top: 4px;
|
|
color: #735b42;
|
|
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
|
|
font-size: 18px;
|
|
line-height: 1.48;
|
|
}
|
|
|
|
.comic-tap-prompt {
|
|
display: block;
|
|
margin-top: 5px;
|
|
color: #8e2f27;
|
|
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
|
|
font-size: 18px;
|
|
font-weight: 800;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.comic-tap-prompt.is-seen {
|
|
color: #37614c;
|
|
}
|
|
|
|
.comic-seen-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 9px;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.seen-chip {
|
|
flex: none;
|
|
transform: rotate(-3deg);
|
|
padding: 3px 7px;
|
|
color: #8d2923;
|
|
border: 2px double #9f3028;
|
|
border-radius: 4px;
|
|
font-size: 17px;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.comic-seen-row .comic-tap-prompt {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.comic-page-nav {
|
|
display: grid;
|
|
box-sizing: border-box;
|
|
min-width: 0;
|
|
align-items: center;
|
|
gap: 5px;
|
|
padding: 9px 10px;
|
|
grid-template-columns: minmax(72px, 1fr) auto minmax(72px, 1fr);
|
|
background: rgba(105, 74, 45, 0.08);
|
|
border-left: 1px solid rgba(107, 77, 46, 0.26);
|
|
}
|
|
|
|
.page-turn-button {
|
|
position: relative;
|
|
display: flex;
|
|
width: auto;
|
|
min-height: 52px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 0;
|
|
padding: 0 6px;
|
|
color: #f6e8c6;
|
|
background: #493326;
|
|
border: 2px solid #806247;
|
|
border-radius: 8px;
|
|
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
|
|
font-size: 18px;
|
|
font-weight: 800;
|
|
line-height: 1.25;
|
|
}
|
|
|
|
.page-turn-button::after,
|
|
.special-page-button::after,
|
|
.memory-action-cell::after {
|
|
border: 0;
|
|
}
|
|
|
|
.page-turn-button.next {
|
|
background: #8f3028;
|
|
border-color: #ad5a4e;
|
|
}
|
|
|
|
.page-turn-button.is-locked {
|
|
color: #735f47;
|
|
background: #ddcba2;
|
|
border-color: #a9936e;
|
|
}
|
|
|
|
.page-turn-button.is-disabled {
|
|
opacity: 0.58;
|
|
}
|
|
|
|
.folio {
|
|
min-width: 48px;
|
|
color: #715b40;
|
|
font-family: Georgia, serif;
|
|
font-size: 17px;
|
|
text-align: center;
|
|
}
|
|
|
|
.comic-special-page {
|
|
display: grid;
|
|
width: 100%;
|
|
min-height: 0;
|
|
flex: 1;
|
|
overflow: hidden;
|
|
grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
|
|
color: #35281e;
|
|
background: #eedfb8;
|
|
}
|
|
|
|
.special-art {
|
|
position: relative;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
background:
|
|
repeating-linear-gradient(0deg, rgba(65, 42, 25, 0.04) 0, rgba(65, 42, 25, 0.04) 1px, transparent 1px, transparent 5px),
|
|
#2c1e16;
|
|
border-right: 5px solid #8e3027;
|
|
}
|
|
|
|
.special-art-image,
|
|
.special-art-shade {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.special-art-fallback {
|
|
position: absolute;
|
|
z-index: 0;
|
|
inset: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
padding: 28px;
|
|
color: #eadbb9;
|
|
background:
|
|
radial-gradient(circle at 38% 42%, rgba(151, 86, 58, 0.2), transparent 32%),
|
|
#3a2a20;
|
|
flex-direction: column;
|
|
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
|
|
font-size: 18px;
|
|
line-height: 1.55;
|
|
text-align: center;
|
|
}
|
|
|
|
.special-art-shade {
|
|
pointer-events: none;
|
|
background: linear-gradient(0deg, rgba(34, 22, 15, 0.82), transparent 48%);
|
|
}
|
|
|
|
.special-art-copy {
|
|
position: absolute;
|
|
z-index: 2;
|
|
right: 24px;
|
|
bottom: 24px;
|
|
left: 24px;
|
|
display: flex;
|
|
color: #f4e5c4;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.special-kicker {
|
|
color: #e8c877;
|
|
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
|
|
font-size: 16px;
|
|
font-weight: 800;
|
|
letter-spacing: 2px;
|
|
}
|
|
|
|
.special-title {
|
|
margin-top: 5px;
|
|
font-size: 32px;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.special-caption {
|
|
margin-top: 8px;
|
|
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
|
|
font-size: 19px;
|
|
line-height: 1.55;
|
|
}
|
|
|
|
.emotion-panel {
|
|
display: grid;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
grid-template-rows: minmax(0, 1fr) auto auto;
|
|
}
|
|
|
|
.memory-panel {
|
|
display: grid;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
grid-template-rows: minmax(0, 1fr) auto;
|
|
}
|
|
|
|
.emotion-paper {
|
|
min-width: 0;
|
|
min-height: 0;
|
|
height: 100%;
|
|
padding: 22px 26px 18px;
|
|
}
|
|
|
|
.emotion-context {
|
|
display: flex;
|
|
margin-bottom: 14px;
|
|
padding-bottom: 12px;
|
|
border-bottom: 2px solid rgba(143, 48, 40, 0.28);
|
|
flex-direction: column;
|
|
}
|
|
|
|
.emotion-context-kicker {
|
|
color: #8f3028;
|
|
font-size: 15px;
|
|
font-weight: 850;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.emotion-context-title {
|
|
margin-top: 3px;
|
|
font-size: 25px;
|
|
font-weight: 900;
|
|
line-height: 1.25;
|
|
}
|
|
|
|
.emotion-context-caption {
|
|
margin-top: 6px;
|
|
color: #5c4632;
|
|
font-size: 18px;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.emotion-paper .emotion-prompt {
|
|
display: block;
|
|
margin-top: 0;
|
|
font-size: 26px;
|
|
line-height: 1.38;
|
|
}
|
|
|
|
.emotion-choice-dock {
|
|
display: grid;
|
|
min-width: 0;
|
|
gap: 6px;
|
|
padding: 6px 10px;
|
|
grid-template-columns: 1fr;
|
|
background: rgba(111, 79, 45, 0.07);
|
|
border-top: 1px solid rgba(107, 77, 46, 0.22);
|
|
}
|
|
|
|
.emotion-choice-dock .emotion-choice {
|
|
width: auto;
|
|
max-width: none;
|
|
min-height: 58px;
|
|
grid-template-columns: 30px minmax(0, 1fr);
|
|
align-items: center;
|
|
gap: 7px;
|
|
padding: 6px 8px;
|
|
border-width: 2px;
|
|
border-radius: 8px;
|
|
font-size: 16px;
|
|
justify-self: stretch;
|
|
line-height: 1.25;
|
|
}
|
|
|
|
.emotion-choice-dock .choice-number {
|
|
width: 30px;
|
|
height: 30px;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.emotion-page-footer.single-action {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
|
|
.emotion-page-footer .special-page-button {
|
|
width: 100%;
|
|
}
|
|
|
|
.comic-emotion-result .feedback {
|
|
display: block;
|
|
margin-top: 14px;
|
|
font-size: 20px;
|
|
line-height: 1.48;
|
|
}
|
|
|
|
.special-page-footer {
|
|
display: grid;
|
|
min-width: 0;
|
|
flex: none;
|
|
gap: 8px;
|
|
padding: 9px 12px max(9px, var(--safe-bottom));
|
|
grid-template-columns: minmax(92px, 2fr) minmax(0, 3fr);
|
|
background: rgba(111, 79, 45, 0.1);
|
|
border-top: 1px solid rgba(107, 77, 46, 0.28);
|
|
}
|
|
|
|
.special-page-button {
|
|
position: relative;
|
|
display: flex;
|
|
min-width: 0;
|
|
min-height: 54px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 0;
|
|
padding: 7px 10px;
|
|
color: #f3e2bd;
|
|
background: #4b3628;
|
|
border: 2px solid #806247;
|
|
border-radius: 8px;
|
|
font-size: 18px;
|
|
font-weight: 850;
|
|
line-height: 1.25;
|
|
}
|
|
|
|
.special-page-button.primary {
|
|
background: #8f3028;
|
|
border-color: #ad5a4e;
|
|
}
|
|
|
|
.special-page-button.is-disabled {
|
|
opacity: 0.35;
|
|
}
|
|
|
|
.comic-control-visible {
|
|
position: relative;
|
|
z-index: 1;
|
|
display: block;
|
|
width: 100%;
|
|
pointer-events: none;
|
|
line-height: 24px;
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.season-close-page {
|
|
display: grid;
|
|
width: 100%;
|
|
min-height: 0;
|
|
flex: 1;
|
|
overflow: hidden;
|
|
grid-template-rows: minmax(0, 1fr) minmax(62px, auto);
|
|
color: #35281e;
|
|
background: #ead9af;
|
|
}
|
|
|
|
.season-close-body {
|
|
display: grid;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
|
|
}
|
|
|
|
.season-close-art {
|
|
position: relative;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
background:
|
|
repeating-linear-gradient(0deg, rgba(204, 173, 117, 0.035) 0, rgba(204, 173, 117, 0.035) 1px, transparent 1px, transparent 5px),
|
|
#241811;
|
|
border-right: 5px solid #8e3027;
|
|
}
|
|
|
|
.season-close-main-image {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.season-close-art-fallback {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
padding: 20px;
|
|
color: #f0dfba;
|
|
flex-direction: column;
|
|
font-size: 18px;
|
|
line-height: 1.45;
|
|
text-align: center;
|
|
}
|
|
|
|
.season-close-detail-inset {
|
|
position: absolute;
|
|
z-index: 3;
|
|
width: 112px;
|
|
height: 112px;
|
|
overflow: hidden;
|
|
background: #d3bd8e;
|
|
border: 3px solid #f1dfb7;
|
|
border-radius: 8px;
|
|
box-shadow: 0 7px 18px rgba(19, 12, 8, 0.42);
|
|
}
|
|
|
|
.season-close-detail-inset.anchor-top-right {
|
|
top: 10px;
|
|
right: 10px;
|
|
}
|
|
|
|
.season-close-detail-image {
|
|
position: absolute;
|
|
max-width: none;
|
|
max-height: none;
|
|
}
|
|
|
|
.season-close-detail-label {
|
|
position: absolute;
|
|
z-index: 2;
|
|
right: 5px;
|
|
bottom: 5px;
|
|
padding: 3px 7px;
|
|
color: #fff1cb;
|
|
background: rgba(52, 34, 23, 0.9);
|
|
border-radius: 4px;
|
|
font-size: 15px;
|
|
font-weight: 850;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.season-close-copy {
|
|
box-sizing: border-box;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background:
|
|
repeating-linear-gradient(0deg, rgba(85, 54, 31, 0.028) 0, rgba(85, 54, 31, 0.028) 1px, transparent 1px, transparent 6px),
|
|
#f0e2bd;
|
|
}
|
|
|
|
.season-close-copy-sheet {
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
min-height: 100%;
|
|
padding: 12px 15px 16px;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.season-close-kicker {
|
|
color: #913128;
|
|
font-size: 16px;
|
|
font-weight: 900;
|
|
letter-spacing: 2px;
|
|
}
|
|
|
|
.season-close-caption {
|
|
display: block;
|
|
margin-top: 5px;
|
|
font-size: 22px;
|
|
font-weight: 900;
|
|
line-height: 1.34;
|
|
}
|
|
|
|
.season-close-memory-card {
|
|
display: flex;
|
|
margin-top: 9px;
|
|
padding: 9px 11px;
|
|
background: #f6ebce;
|
|
border: 2px solid #9d8058;
|
|
box-shadow: 0 6px 15px rgba(62, 42, 28, 0.12);
|
|
flex-direction: column;
|
|
}
|
|
|
|
.season-close-card-label,
|
|
.season-close-line-label {
|
|
color: #913128;
|
|
font-size: 15px;
|
|
font-weight: 850;
|
|
}
|
|
|
|
.season-close-era {
|
|
margin-top: 2px;
|
|
color: #6d533a;
|
|
font-size: 15px;
|
|
}
|
|
|
|
.season-close-quote {
|
|
margin-top: 4px;
|
|
font-size: 20px;
|
|
font-weight: 850;
|
|
line-height: 1.32;
|
|
}
|
|
|
|
.season-close-life-line,
|
|
.season-close-family-line {
|
|
display: flex;
|
|
margin-top: 6px;
|
|
padding-top: 5px;
|
|
border-top: 1px solid rgba(113, 83, 50, 0.24);
|
|
flex-direction: column;
|
|
font-size: 16px;
|
|
line-height: 1.32;
|
|
}
|
|
|
|
.season-close-tail {
|
|
display: block;
|
|
margin-top: 8px;
|
|
color: #604934;
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.season-close-actions {
|
|
position: relative;
|
|
min-height: 62px;
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
}
|
|
|
|
.season-close-actions .memory-action-cell {
|
|
min-height: 54px;
|
|
}
|
|
|
|
.font-xlarge .season-close-caption {
|
|
font-size: 23px;
|
|
}
|
|
|
|
.font-xlarge .season-close-quote {
|
|
font-size: 21px;
|
|
}
|
|
|
|
.font-xlarge .season-close-life-line,
|
|
.font-xlarge .season-close-family-line {
|
|
font-size: 17px;
|
|
}
|
|
|
|
.memory-page {
|
|
grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
|
|
padding: 0;
|
|
gap: 0;
|
|
background:
|
|
repeating-linear-gradient(0deg, rgba(85, 54, 31, 0.028) 0, rgba(85, 54, 31, 0.028) 1px, transparent 1px, transparent 6px),
|
|
#e9d8ab;
|
|
}
|
|
|
|
.memory-art {
|
|
position: relative;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
background: #2c1e16;
|
|
border-right: 5px solid #8e3027;
|
|
}
|
|
|
|
.memory-art-image,
|
|
.memory-art-shade {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.memory-cliffhanger-copy {
|
|
display: flex;
|
|
margin-bottom: 9px;
|
|
padding: 9px 11px;
|
|
color: #4d3929;
|
|
background: #ead7aa;
|
|
border-left: 5px solid #8f3028;
|
|
flex-direction: column;
|
|
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
|
|
font-size: 18px;
|
|
font-weight: 750;
|
|
line-height: 1.38;
|
|
}
|
|
|
|
.memory-art-shade {
|
|
pointer-events: none;
|
|
background: linear-gradient(0deg, rgba(34, 22, 15, 0.86), transparent 44%);
|
|
}
|
|
|
|
.memory-cliffhanger {
|
|
position: absolute;
|
|
z-index: 2;
|
|
right: 22px;
|
|
bottom: 18px;
|
|
left: 22px;
|
|
display: flex;
|
|
color: #f2e3bd;
|
|
flex-direction: column;
|
|
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
|
|
font-size: 19px;
|
|
font-weight: 700;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.memory-paper {
|
|
box-sizing: border-box;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
height: 100%;
|
|
padding: 14px 16px 12px;
|
|
}
|
|
|
|
.memory-card-sheet {
|
|
position: relative;
|
|
display: flex;
|
|
box-sizing: border-box;
|
|
min-width: 0;
|
|
justify-content: center;
|
|
min-height: 100%;
|
|
padding: 18px 22px;
|
|
background: #f3e8c9;
|
|
border: 2px solid #9d8058;
|
|
box-shadow: 0 9px 22px rgba(62, 42, 28, 0.16);
|
|
flex-direction: column;
|
|
}
|
|
|
|
.memory-stamp {
|
|
position: absolute;
|
|
top: 18px;
|
|
right: 20px;
|
|
transform: rotate(6deg);
|
|
padding: 8px;
|
|
color: #923026;
|
|
border: 3px double #9f3028;
|
|
font-size: 17px;
|
|
font-weight: 850;
|
|
}
|
|
|
|
.memory-era {
|
|
color: #6d533a;
|
|
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.memory-person {
|
|
margin-top: 3px;
|
|
color: #8f2f27;
|
|
font-size: 27px;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.memory-quote {
|
|
display: block;
|
|
max-width: 88%;
|
|
margin-top: 10px;
|
|
font-size: 24px;
|
|
font-weight: 850;
|
|
line-height: 1.48;
|
|
}
|
|
|
|
.memory-action,
|
|
.memory-family {
|
|
display: flex;
|
|
margin-top: 9px;
|
|
padding-top: 8px;
|
|
color: #574431;
|
|
border-top: 1px solid rgba(113, 83, 50, 0.24);
|
|
flex-direction: column;
|
|
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
|
|
font-size: 18px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.memory-family-toggle {
|
|
display: flex;
|
|
min-height: 48px;
|
|
margin-top: 8px;
|
|
padding: 6px 14px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #6b3d2d;
|
|
background: rgba(255, 248, 226, 0.72);
|
|
border: 2rpx solid rgba(126, 77, 45, 0.45);
|
|
border-radius: 10px;
|
|
font-size: 18px;
|
|
font-weight: 750;
|
|
line-height: 1.25;
|
|
}
|
|
|
|
.memory-label {
|
|
margin-bottom: 3px;
|
|
color: #8f3028;
|
|
font-size: 17px;
|
|
font-weight: 850;
|
|
}
|
|
|
|
.memory-ending-label {
|
|
margin-bottom: 9px;
|
|
color: #8f3028;
|
|
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
|
|
font-size: 18px;
|
|
font-weight: 850;
|
|
}
|
|
|
|
.memory-actions {
|
|
display: grid;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
overflow: hidden;
|
|
gap: 7px;
|
|
padding: 8px 10px max(8px, var(--safe-bottom));
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
background: rgba(111, 79, 45, 0.1);
|
|
border-top: 1px solid rgba(107, 77, 46, 0.28);
|
|
}
|
|
|
|
.memory-action-cell {
|
|
position: relative;
|
|
display: flex;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
max-width: 100%;
|
|
min-width: 0;
|
|
min-height: 50px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 0;
|
|
padding: 5px 8px;
|
|
color: #f3e2bd;
|
|
background: #4b3628;
|
|
border: 2px solid #806247;
|
|
border-radius: 7px;
|
|
font-size: 17px;
|
|
font-weight: 850;
|
|
justify-self: stretch;
|
|
line-height: 22px;
|
|
}
|
|
|
|
.memory-action-visible {
|
|
position: relative;
|
|
z-index: 1;
|
|
display: block;
|
|
width: 100%;
|
|
pointer-events: none;
|
|
line-height: 22px;
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.memory-action-cell.report {
|
|
color: #315545;
|
|
background: #dce7d9;
|
|
border-color: #64826e;
|
|
}
|
|
|
|
.memory-action-cell.share {
|
|
color: #5c432f;
|
|
background: #ead9b2;
|
|
border-color: #9a7e56;
|
|
}
|
|
|
|
.memory-action-cell.primary {
|
|
background: #8f3028;
|
|
border-color: #ad5a4e;
|
|
}
|
|
|
|
.c09-p08 .memory-paper-content { display: grid; height: 100%; min-height: 0; gap: 6px; grid-template-rows: auto minmax(0, 1fr); }
|
|
.c09-p08 .memory-card-sheet { display: flex; height: 100%; min-height: 0; align-items: stretch; justify-content: flex-start; flex-direction: column; }
|
|
.c09-p08 .memory-short-lines { display: flex; min-height: 0; justify-content: space-evenly; gap: 3px; margin-top: 2px; flex: 1; flex-direction: column; }
|
|
.c09-p08 .memory-short-line { display: block; padding: 2px 0; color: #574431; border-top: 1px solid rgba(113, 83, 50, 0.24); font-size: 17px; font-weight: 750; line-height: 1.2; }
|
|
.c09-p08 .memory-actions { display: flex; flex-wrap: wrap; }
|
|
.c09-p08 .memory-action-cell { flex: 1 1 0; }
|
|
.c09-p08 .memory-action-cell.primary { min-width: 100%; flex: 1 0 100%; }
|
|
|
|
.memory-action-cell.is-disabled {
|
|
opacity: 0.42;
|
|
}
|
|
|
|
.comic-focus-visual {
|
|
position: relative;
|
|
height: 210px;
|
|
overflow: hidden;
|
|
margin: -30rpx -34rpx 18rpx;
|
|
background:
|
|
repeating-linear-gradient(0deg, rgba(65, 42, 25, 0.04) 0, rgba(65, 42, 25, 0.04) 1px, transparent 1px, transparent 5px),
|
|
#201711;
|
|
}
|
|
|
|
.comic-focus-scene,
|
|
.comic-focus-shade {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.comic-focus-shade {
|
|
pointer-events: none;
|
|
background: linear-gradient(0deg, rgba(28, 20, 15, 0.86), transparent 55%);
|
|
}
|
|
|
|
.comic-focus-name {
|
|
position: absolute;
|
|
z-index: 3;
|
|
bottom: 12px;
|
|
left: 16px;
|
|
display: flex;
|
|
color: #e5c98c;
|
|
flex-direction: column;
|
|
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
|
|
font-size: 17px;
|
|
}
|
|
|
|
.focus-name {
|
|
margin-top: 1px;
|
|
color: #fff0ca;
|
|
font-family: "Songti SC", "STSong", serif;
|
|
font-size: 31px;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.font-xlarge .comic-caption {
|
|
font-size: 24px;
|
|
}
|
|
|
|
.font-xlarge .comic-secondary-caption,
|
|
.font-xlarge .comic-tap-prompt {
|
|
font-size: 19px;
|
|
}
|
|
|
|
.font-xlarge .memory-action,
|
|
.font-xlarge .memory-family {
|
|
font-size: 21px;
|
|
}
|
|
|
|
.font-xlarge .emotion-context-title {
|
|
font-size: 28px;
|
|
}
|
|
|
|
.font-xlarge .emotion-choice-dock .emotion-choice {
|
|
font-size: 17px;
|
|
}
|
|
|
|
.font-xlarge .emotion-context-caption,
|
|
.font-xlarge .memory-cliffhanger-copy {
|
|
font-size: 20px;
|
|
}
|
|
|
|
@media (max-height: 620px) {
|
|
.comic-normal-page {
|
|
grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
|
|
grid-template-rows: minmax(0, 1fr);
|
|
}
|
|
|
|
.comic-art-column {
|
|
padding: 6px;
|
|
}
|
|
|
|
.comic-caption-strip {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
grid-template-rows: minmax(0, 1fr) auto;
|
|
border-top: 0;
|
|
border-left: 4px solid #8f2c25;
|
|
}
|
|
|
|
.comic-special-page {
|
|
grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
|
|
}
|
|
|
|
.comic-caption-copy {
|
|
padding: 8px 12px;
|
|
}
|
|
|
|
.comic-cover-caption-layout {
|
|
align-content: start;
|
|
gap: 10px;
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
|
|
.comic-cover-caption-layout .comic-caption-kicker {
|
|
font-size: 14px;
|
|
line-height: 1.15;
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
.comic-cover-caption-layout .comic-caption-heading {
|
|
margin-top: 2px;
|
|
font-size: 20px;
|
|
line-height: 1.18;
|
|
}
|
|
|
|
.comic-cover-caption-layout .comic-cover-caption-text {
|
|
padding-top: 9px;
|
|
padding-left: 0;
|
|
border-top: 2px solid rgba(143, 48, 40, 0.28);
|
|
border-left: 0;
|
|
font-size: 18px;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.comic-ensemble-caption-layout,
|
|
.comic-event-caption-layout {
|
|
align-content: start;
|
|
gap: 9px;
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
|
|
.comic-ensemble-caption-layout {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
|
|
.comic-ensemble-caption-layout > .comic-caption-heading {
|
|
font-size: 20px;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.comic-ensemble-caption-copy,
|
|
.comic-event-cue {
|
|
padding-top: 8px;
|
|
padding-left: 0;
|
|
border-top: 2px solid rgba(143, 48, 40, 0.24);
|
|
border-left: 0;
|
|
}
|
|
|
|
.comic-ensemble-caption-layout .comic-caption {
|
|
font-size: 18px;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.comic-event-caption-layout {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
|
|
.comic-event-caption-layout .comic-caption,
|
|
.font-xlarge .comic-event-caption-layout .comic-caption {
|
|
font-size: 20px;
|
|
line-height: 1.38;
|
|
}
|
|
|
|
.comic-event-caption-layout .comic-tap-prompt,
|
|
.font-xlarge .comic-event-caption-layout .comic-tap-prompt {
|
|
font-size: 19px;
|
|
line-height: 1.34;
|
|
}
|
|
|
|
.comic-caption-heading {
|
|
margin-bottom: 7px;
|
|
font-size: 23px;
|
|
}
|
|
|
|
.comic-caption {
|
|
font-size: 20px;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.font-xlarge .comic-caption {
|
|
font-size: 23px;
|
|
}
|
|
|
|
.comic-secondary-caption,
|
|
.comic-tap-prompt {
|
|
margin-top: 5px;
|
|
font-size: 18px;
|
|
line-height: 1.42;
|
|
}
|
|
|
|
.font-xlarge .comic-secondary-caption,
|
|
.font-xlarge .comic-tap-prompt {
|
|
font-size: 20px;
|
|
}
|
|
|
|
.comic-page-nav {
|
|
display: grid;
|
|
gap: 4px;
|
|
padding: 7px 6px;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
border-top: 1px solid rgba(107, 77, 46, 0.26);
|
|
border-left: 0;
|
|
}
|
|
|
|
.page-turn-button {
|
|
min-width: 0;
|
|
min-height: 52px;
|
|
font-size: 17px;
|
|
}
|
|
|
|
.comic-page-nav .folio {
|
|
display: none;
|
|
}
|
|
|
|
.cover-copy {
|
|
top: 8%;
|
|
padding: 13px 18px;
|
|
}
|
|
|
|
.cover-title {
|
|
font-size: 29px;
|
|
}
|
|
|
|
.special-art-copy {
|
|
right: 18px;
|
|
bottom: 18px;
|
|
left: 18px;
|
|
}
|
|
|
|
.special-title {
|
|
font-size: 27px;
|
|
}
|
|
|
|
.special-caption {
|
|
font-size: 18px;
|
|
line-height: 1.42;
|
|
}
|
|
|
|
.emotion-paper {
|
|
padding: 10px 12px 8px;
|
|
}
|
|
|
|
.emotion-context {
|
|
margin-bottom: 8px;
|
|
padding-bottom: 7px;
|
|
}
|
|
|
|
.emotion-context-title {
|
|
font-size: 21px;
|
|
}
|
|
|
|
.emotion-context-caption {
|
|
margin-top: 3px;
|
|
font-size: 16px;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.emotion-paper .emotion-prompt {
|
|
font-size: 21px;
|
|
line-height: 1.28;
|
|
}
|
|
|
|
.emotion-choice-dock {
|
|
gap: 5px;
|
|
padding: 5px 8px;
|
|
}
|
|
|
|
.emotion-choice-dock .emotion-choice {
|
|
min-height: 52px;
|
|
gap: 6px;
|
|
padding: 5px 7px;
|
|
grid-template-columns: 30px minmax(0, 1fr);
|
|
font-size: 16px;
|
|
line-height: 1.22;
|
|
}
|
|
|
|
.emotion-choice-dock .choice-number {
|
|
width: 30px;
|
|
height: 30px;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.emotion-page-footer {
|
|
gap: 6px;
|
|
padding: 6px 8px max(6px, var(--safe-bottom));
|
|
}
|
|
|
|
.emotion-page-footer .special-page-button {
|
|
min-height: 52px;
|
|
}
|
|
|
|
.memory-page {
|
|
grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
|
|
padding: 0;
|
|
gap: 0;
|
|
}
|
|
|
|
.memory-cliffhanger-copy {
|
|
margin-bottom: 5px;
|
|
padding: 6px 8px;
|
|
font-size: 18px;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.memory-paper {
|
|
padding: 8px;
|
|
}
|
|
|
|
.memory-card-sheet {
|
|
display: grid;
|
|
min-height: 100%;
|
|
align-content: start;
|
|
column-gap: 8px;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
padding: 8px 10px;
|
|
}
|
|
|
|
.memory-stamp {
|
|
top: 8px;
|
|
right: 8px;
|
|
padding: 4px;
|
|
border-width: 2px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.memory-era {
|
|
grid-column: 1 / -1;
|
|
padding-right: 72px;
|
|
font-size: 15px;
|
|
}
|
|
|
|
.memory-person {
|
|
grid-column: 1 / -1;
|
|
margin-top: 1px;
|
|
font-size: 22px;
|
|
}
|
|
|
|
.memory-quote {
|
|
grid-column: 1 / -1;
|
|
max-width: 100%;
|
|
margin-top: 4px;
|
|
font-size: 19px;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.memory-action,
|
|
.memory-family {
|
|
min-width: 0;
|
|
margin-top: 4px;
|
|
padding-top: 3px;
|
|
font-size: 16px;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.memory-label {
|
|
margin-bottom: 1px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.memory-actions {
|
|
gap: 4px;
|
|
padding: 6px max(6px, var(--safe-right)) max(6px, var(--safe-bottom)) 6px;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.memory-action-cell {
|
|
min-height: 54px;
|
|
padding: 4px 3px;
|
|
font-size: 17px;
|
|
line-height: 22px;
|
|
}
|
|
|
|
.comic-focus-visual {
|
|
height: 128px;
|
|
margin: -12px -16px 10px;
|
|
}
|
|
|
|
.comic-focus-name {
|
|
right: 12px;
|
|
bottom: 9px;
|
|
left: 12px;
|
|
}
|
|
|
|
.comic-fallback-actor-button {
|
|
left: 10px;
|
|
right: 10px;
|
|
bottom: 9px;
|
|
width: calc(100% - 20px);
|
|
min-width: 0;
|
|
min-height: 56px;
|
|
gap: 7px;
|
|
padding: 7px 11px;
|
|
}
|
|
|
|
.fallback-proof-label {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.fallback-actor-action {
|
|
font-size: 17px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 700px) and (max-height: 400px) {
|
|
.compact-height.font-xlarge .emotion-paper .emotion-prompt {
|
|
font-size: 23px;
|
|
}
|
|
|
|
.compact-height.font-xlarge .emotion-choice-dock .emotion-choice {
|
|
font-size: 17px;
|
|
}
|
|
|
|
.compact-height.font-xlarge .emotion-choice-dock {
|
|
gap: 5px;
|
|
}
|
|
|
|
.compact-height .memory-page {
|
|
grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
|
|
}
|
|
|
|
.compact-height .memory-paper {
|
|
padding: 5px;
|
|
}
|
|
|
|
.compact-height .memory-card-sheet {
|
|
column-gap: 6px;
|
|
grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
|
|
padding: 5px 8px;
|
|
}
|
|
|
|
.compact-height .memory-stamp {
|
|
top: 5px;
|
|
right: 5px;
|
|
padding: 3px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.compact-height .memory-era {
|
|
padding-right: 62px;
|
|
font-size: 15px;
|
|
line-height: 1.15;
|
|
}
|
|
|
|
.compact-height .memory-person {
|
|
font-size: 21px;
|
|
line-height: 1.12;
|
|
}
|
|
|
|
.compact-height .memory-quote {
|
|
margin-top: 2px;
|
|
font-size: 18px;
|
|
line-height: 1.18;
|
|
}
|
|
|
|
.compact-height .memory-action,
|
|
.compact-height .memory-family {
|
|
margin-top: 2px;
|
|
padding-top: 2px;
|
|
font-size: 17px;
|
|
line-height: 1.16;
|
|
}
|
|
|
|
.compact-height.font-xlarge .memory-action,
|
|
.compact-height.font-xlarge .memory-family {
|
|
font-size: 19px;
|
|
}
|
|
|
|
.compact-height.font-xlarge .memory-era {
|
|
font-size: 17px;
|
|
}
|
|
|
|
.compact-height.font-xlarge .memory-person {
|
|
font-size: 24px;
|
|
}
|
|
|
|
.compact-height.font-xlarge .memory-quote {
|
|
font-size: 21px;
|
|
}
|
|
|
|
.compact-height.font-xlarge .memory-label {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.compact-height .memory-label {
|
|
margin-bottom: 0;
|
|
font-size: 14px;
|
|
line-height: 1.1;
|
|
}
|
|
|
|
.compact-height .memory-actions {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.compact-height .memory-action-cell {
|
|
min-height: 50px;
|
|
padding: 4px 8px;
|
|
}
|
|
|
|
.compact-height .c09-p08 .memory-paper { padding: 4px 5px; }
|
|
.compact-height .c09-p08 .memory-paper-content { gap: 2px; }
|
|
.compact-height .c09-p08 .memory-cliffhanger-copy { display: block; margin-bottom: 0; padding: 2px 5px; font-size: 14px; line-height: 1.12; }
|
|
.compact-height .c09-p08 .memory-ending-label { margin-right: 5px; color: #8f3028; font-size: 12px; line-height: 1.12; }
|
|
.compact-height .c09-p08 .memory-card-sheet { display: flex; padding: 4px 6px; border-width: 1px; flex-direction: column; }
|
|
.compact-height .c09-p08 .memory-stamp { top: 4px; right: 4px; padding: 2px; border-width: 1px; font-size: 11px; line-height: 1.05; }
|
|
.compact-height .c09-p08 .memory-era { padding-right: 63px; font-size: 13px; line-height: 1.08; }
|
|
.compact-height .c09-p08 .memory-person { margin-top: 0; font-size: 17px; line-height: 1.06; }
|
|
.compact-height .c09-p08 .memory-short-lines { gap: 2px; margin-top: 1px; }
|
|
.compact-height .c09-p08 .memory-short-line { padding: 1px 0; font-size: 17px; line-height: 1.16; }
|
|
.compact-height .c09-p08 .memory-actions { gap: 4px; padding: 3px 6px max(3px, var(--safe-bottom)); }
|
|
.compact-height .c09-p08 .memory-action-cell { min-height: 48px; padding: 2px 3px; font-size: 14px; line-height: 18px; }
|
|
|
|
.compact-height .season-close-actions {
|
|
min-height: 62px;
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
}
|
|
|
|
.compact-height .season-close-actions .memory-action-cell {
|
|
min-height: 54px;
|
|
padding: 4px 6px;
|
|
}
|
|
|
|
.compact-height .season-close-copy-sheet {
|
|
padding: 9px 11px 13px;
|
|
}
|
|
|
|
.compact-height .decision-dialog {
|
|
grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
|
|
}
|
|
|
|
.compact-height .character-story-inner {
|
|
padding: 10px 14px 28px;
|
|
}
|
|
|
|
.compact-height .comic-focus-visual {
|
|
height: 108px;
|
|
margin: -10px -14px 8px;
|
|
}
|
|
|
|
.compact-height .judgement-scroll-inner {
|
|
padding: 8px 9px;
|
|
}
|
|
|
|
.compact-height .judgement-question {
|
|
font-size: 20px;
|
|
line-height: 1.16;
|
|
}
|
|
|
|
.compact-height.font-xlarge .judgement-question {
|
|
font-size: 21px;
|
|
}
|
|
|
|
.compact-height .judgement-options {
|
|
gap: 5px;
|
|
margin-top: 6px;
|
|
}
|
|
|
|
.compact-height .judgement-button {
|
|
min-height: 56px;
|
|
}
|
|
}
|
|
|
|
@media (min-height: 621px) {
|
|
.comic-normal-page {
|
|
grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
|
|
grid-template-rows: minmax(0, 1fr);
|
|
}
|
|
|
|
.comic-caption-strip {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
grid-template-rows: minmax(0, 1fr) auto;
|
|
border-top: 0;
|
|
border-left: 4px solid #8f2c25;
|
|
}
|
|
|
|
.comic-page-nav {
|
|
border-top: 1px solid rgba(107, 77, 46, 0.26);
|
|
border-left: 0;
|
|
}
|
|
}
|
|
|
|
/*
|
|
* WeChat DevTools can report the portrait media-query height after the
|
|
* simulator has rotated to landscape. The page logic already derives the
|
|
* real short-landscape state, so keep the lianhuanhua spread tied to that
|
|
* state as the authoritative fallback.
|
|
*/
|
|
.compact-height .comic-normal-page {
|
|
grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
|
|
grid-template-rows: minmax(0, 1fr);
|
|
}
|
|
|
|
.compact-height .comic-art-column {
|
|
padding: 6px;
|
|
}
|
|
|
|
.compact-height .comic-caption-strip {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
grid-template-rows: minmax(0, 1fr) auto;
|
|
border-top: 0;
|
|
border-left: 4px solid #8f2c25;
|
|
}
|
|
|
|
.compact-height .comic-caption-strip.has-outside-actor-guide {
|
|
grid-template-rows: minmax(0, 1fr) auto auto;
|
|
}
|
|
|
|
.compact-height .comic-caption-copy {
|
|
padding: 8px 12px;
|
|
}
|
|
|
|
.compact-height .emotion-context {
|
|
margin-bottom: 4px;
|
|
padding-bottom: 4px;
|
|
}
|
|
|
|
.compact-height .emotion-context-kicker,
|
|
.compact-height .emotion-context-title {
|
|
display: none;
|
|
}
|
|
|
|
.compact-height .emotion-context-caption {
|
|
margin-top: 0;
|
|
font-size: 17px;
|
|
line-height: 1.28;
|
|
}
|
|
|
|
.compact-height.font-xlarge .emotion-context-caption {
|
|
font-size: 18px;
|
|
}
|
|
|
|
.compact-height .comic-outside-action-dock { display: grid; min-width: 0; align-items: center; gap: 6px; padding: 0 12px 6px; grid-template-columns: minmax(0, 1fr); }
|
|
.compact-height .comic-outside-action-dock.has-art-tap-note { grid-template-columns: auto minmax(0, 1fr); }
|
|
.compact-height .comic-outside-action-dock .comic-art-tap-note { max-width: 82px; font-size: 13px; line-height: 1.2; text-align: center; }
|
|
.compact-height .comic-outside-action-dock .comic-outside-actor-dock { width: 100%; min-height: 52px; margin: 0; padding: 6px; font-size: 16px; line-height: 1.25; }
|
|
|
|
.compact-height .comic-cover-caption-layout,
|
|
.compact-height .comic-ensemble-caption-layout,
|
|
.compact-height .comic-event-caption-layout {
|
|
align-content: start;
|
|
gap: 9px;
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
|
|
.compact-height .comic-cover-caption-text,
|
|
.compact-height .comic-ensemble-caption-copy,
|
|
.compact-height .comic-event-cue {
|
|
padding-top: 8px;
|
|
padding-left: 0;
|
|
border-top: 2px solid rgba(143, 48, 40, 0.26);
|
|
border-left: 0;
|
|
}
|
|
|
|
.compact-height .comic-event-caption-layout .comic-caption {
|
|
font-size: 18px;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.compact-height .comic-event-caption-layout .comic-tap-prompt {
|
|
font-size: 17px;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.compact-height.font-xlarge .comic-event-caption-layout .comic-caption {
|
|
font-size: 21px;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.compact-height.font-xlarge .comic-event-caption-layout .comic-tap-prompt {
|
|
font-size: 19px;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.compact-height .comic-page-nav {
|
|
display: grid;
|
|
gap: 4px;
|
|
padding: 7px 6px;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
border-top: 1px solid rgba(107, 77, 46, 0.26);
|
|
border-left: 0;
|
|
}
|
|
|
|
.compact-height .page-turn-button {
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
min-width: 0;
|
|
min-height: 52px;
|
|
font-size: 17px;
|
|
}
|
|
|
|
.compact-height .comic-page-nav .folio {
|
|
display: none;
|
|
}
|
|
|
|
.compact-height .c1-book-topbar {
|
|
gap: 7px;
|
|
}
|
|
|
|
.compact-height .c1-audio-slot {
|
|
width: 92px;
|
|
min-width: 92px;
|
|
}
|
|
|
|
.compact-height .c1-front-folio {
|
|
right: 10px;
|
|
bottom: 9px;
|
|
left: auto;
|
|
min-height: 40px;
|
|
padding: 0 13px;
|
|
}
|
|
|
|
.compact-height .c1-front-title {
|
|
font-size: 21px;
|
|
}
|
|
|
|
.compact-height .c1-front-hint {
|
|
font-size: 15px;
|
|
}
|
|
|
|
.compact-height .c1-previous-page {
|
|
bottom: 9px;
|
|
left: 9px;
|
|
width: 48px;
|
|
height: 52px;
|
|
}
|
|
|
|
.compact-height .c1-back-paper {
|
|
grid-template-columns: minmax(190px, 2fr) minmax(0, 3fr);
|
|
}
|
|
|
|
.compact-height .c1-back-copy-inner {
|
|
gap: 5px;
|
|
padding: 9px 14px 8px;
|
|
}
|
|
|
|
.compact-height .c1-back-kicker,
|
|
.compact-height .c1-back-label {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.compact-height .c1-back-title {
|
|
font-size: 24px;
|
|
line-height: 1.16;
|
|
}
|
|
|
|
.compact-height.font-xlarge .c1-back-title {
|
|
font-size: 27px;
|
|
}
|
|
|
|
.compact-height .c1-back-body,
|
|
.compact-height .c1-back-secondary,
|
|
.compact-height .c1-back-reason,
|
|
.compact-height .c1-back-family,
|
|
.compact-height .c1-back-callout,
|
|
.compact-height .c1-back-action {
|
|
font-size: 18px;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.compact-height.font-xlarge .c1-back-body,
|
|
.compact-height.font-xlarge .c1-back-secondary,
|
|
.compact-height.font-xlarge .c1-back-reason,
|
|
.compact-height.font-xlarge .c1-back-family,
|
|
.compact-height.font-xlarge .c1-back-callout,
|
|
.compact-height.font-xlarge .c1-back-action {
|
|
font-size: 20px;
|
|
}
|
|
|
|
.compact-height .c1-back-callout,
|
|
.compact-height .c1-back-action {
|
|
padding: 6px 9px;
|
|
}
|
|
|
|
.compact-height .c1-back-footer {
|
|
gap: 7px;
|
|
padding: 6px 8px;
|
|
}
|
|
|
|
.compact-height .c1-memory-footer {
|
|
gap: 5px;
|
|
}
|
|
|
|
.compact-height .c1-memory-footer .c1-back-button {
|
|
min-height: 48px;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.compact-height .c1-back-button {
|
|
min-height: 50px;
|
|
font-size: 17px;
|
|
}
|
|
|
|
.compact-height .c1-decision-layer {
|
|
padding: 0;
|
|
}
|
|
|
|
.compact-height .c1-interaction-paper {
|
|
grid-template-columns: minmax(190px, 2fr) minmax(0, 3fr);
|
|
}
|
|
|
|
.compact-height .c1-interaction-panel {
|
|
gap: 7px;
|
|
padding: 10px 12px;
|
|
}
|
|
|
|
.compact-height .c1-interaction-panel .c1-tray-heading {
|
|
padding-right: 88px;
|
|
}
|
|
|
|
.compact-height .c1-choice-stack {
|
|
gap: 7px;
|
|
grid-template-rows: repeat(2, minmax(62px, auto));
|
|
}
|
|
|
|
.compact-height .c1-decision-tray,
|
|
.compact-height .c1-emotion-tray {
|
|
min-height: 105px;
|
|
gap: 7px;
|
|
padding: 9px 49px 9px 10px;
|
|
grid-template-columns: minmax(185px, 1fr) repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.compact-height .c1-emotion-tray {
|
|
right: 8px;
|
|
bottom: 8px;
|
|
left: 8px;
|
|
}
|
|
|
|
.compact-height .c1-tray-question {
|
|
font-size: 18px;
|
|
line-height: 1.28;
|
|
}
|
|
|
|
.compact-height .c1-natural-choice {
|
|
min-height: 62px;
|
|
padding: 6px 9px;
|
|
font-size: 17px;
|
|
line-height: 1.28;
|
|
}
|
|
|
|
.compact-height .c1-tray-close {
|
|
top: 7px;
|
|
right: 7px;
|
|
width: auto;
|
|
min-width: 82px;
|
|
height: 48px;
|
|
min-height: 48px;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.compact-height .c1-retry-tray {
|
|
grid-template-columns: minmax(0, 1.3fr) minmax(190px, 0.7fr);
|
|
}
|
|
|
|
.compact-height .c1-retry-title {
|
|
font-size: 20px;
|
|
}
|
|
|
|
.compact-height .c1-retry-copy {
|
|
font-size: 17px;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.compact-height .c1-retry-button {
|
|
min-height: 52px;
|
|
font-size: 17px;
|
|
}
|