661 lines
11 KiB
Plaintext
661 lines
11 KiB
Plaintext
.cast-shell {
|
|
display: flex;
|
|
height: 100vh;
|
|
gap: 14rpx;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.cast-head {
|
|
display: grid;
|
|
min-height: 62px;
|
|
flex: 0 0 auto;
|
|
grid-template-columns: 110px minmax(0, 1fr) auto;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 6px 10px;
|
|
}
|
|
|
|
.cast-back,
|
|
.font-button,
|
|
.modal-close,
|
|
.modal-done {
|
|
min-width: 48px;
|
|
min-height: 48px;
|
|
}
|
|
|
|
.cast-back {
|
|
width: 100%;
|
|
min-width: 0;
|
|
padding-right: 8px;
|
|
padding-left: 8px;
|
|
}
|
|
|
|
.cast-heading-copy {
|
|
display: flex;
|
|
min-width: 0;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.cast-title {
|
|
overflow: hidden;
|
|
font-size: 27px;
|
|
font-weight: 850;
|
|
letter-spacing: 2px;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.cast-heading-copy .eyebrow {
|
|
overflow: hidden;
|
|
font-size: 15px;
|
|
letter-spacing: 1px;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.cast-head-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10rpx;
|
|
justify-self: end;
|
|
}
|
|
|
|
.font-button {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* The WeChat capsule occupies this part of a custom landscape title bar. */
|
|
.capsule-safe-space {
|
|
width: 102px;
|
|
height: 40px;
|
|
flex: 0 0 102px;
|
|
}
|
|
|
|
.cast-scroll {
|
|
min-height: 0;
|
|
flex: 1;
|
|
}
|
|
|
|
.cast-intro {
|
|
padding: 2px 6px 10px;
|
|
color: #f4e5bd;
|
|
font-size: 17px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.cast-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 10px;
|
|
padding: 0 2px 20px;
|
|
}
|
|
|
|
.cast-card {
|
|
display: grid;
|
|
width: 100%;
|
|
min-width: 0;
|
|
min-height: 144px;
|
|
overflow: hidden;
|
|
grid-template-columns: 132px minmax(0, 1fr);
|
|
text-align: left;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.cast-card-hover {
|
|
transform: translateY(2rpx);
|
|
opacity: 0.88;
|
|
}
|
|
|
|
.cast-image-wrap {
|
|
display: flex;
|
|
min-height: 144px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
background: #d4c29a;
|
|
border-right: 5px solid var(--cinnabar);
|
|
}
|
|
|
|
.cast-portrait-window,
|
|
.modal-portrait-window {
|
|
position: relative;
|
|
overflow: hidden;
|
|
background: #dfcfaa;
|
|
border: 1px solid rgba(98, 65, 40, 0.35);
|
|
}
|
|
|
|
.cast-portrait-window {
|
|
height: 126px;
|
|
}
|
|
|
|
.cast-portrait-window.poses-5 {
|
|
width: 45px;
|
|
}
|
|
|
|
.cast-portrait-window.poses-4 {
|
|
width: 56px;
|
|
}
|
|
|
|
.cast-image {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 224px;
|
|
height: 126px;
|
|
}
|
|
|
|
.cast-copy {
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 10px 13px;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.name-row {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 8rpx;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.cast-name {
|
|
font-size: 23px;
|
|
font-weight: 850;
|
|
line-height: 1.2;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.eras {
|
|
color: var(--muted);
|
|
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
|
|
font-size: 14px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.cast-role-title {
|
|
margin-top: 4px;
|
|
color: #8d3028;
|
|
font-size: 17px;
|
|
font-weight: 750;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.cast-relationship {
|
|
display: -webkit-box;
|
|
margin-top: 5px;
|
|
overflow: hidden;
|
|
color: #554333;
|
|
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
|
|
font-size: 15px;
|
|
line-height: 1.35;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
}
|
|
|
|
.cast-hint {
|
|
margin-top: 7px;
|
|
color: var(--muted);
|
|
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
|
|
font-size: 15px;
|
|
font-weight: 700;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.list-scroll-guide {
|
|
display: flex;
|
|
min-height: 40px;
|
|
flex: 0 0 auto;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 10px;
|
|
color: #f4e5bd;
|
|
background: rgba(58, 40, 28, 0.94);
|
|
border: 1px solid rgba(222, 194, 139, 0.55);
|
|
border-radius: 8px;
|
|
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
|
|
font-size: 17px;
|
|
font-weight: 750;
|
|
}
|
|
|
|
.scroll-guide-mark {
|
|
color: #f0c86b;
|
|
font-size: 24px;
|
|
line-height: 1;
|
|
}
|
|
|
|
.modal-backdrop {
|
|
position: fixed;
|
|
z-index: 100;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding:
|
|
calc(10px + constant(safe-area-inset-top))
|
|
calc(112px + constant(safe-area-inset-right))
|
|
calc(10px + constant(safe-area-inset-bottom))
|
|
calc(10px + constant(safe-area-inset-left));
|
|
padding:
|
|
calc(10px + env(safe-area-inset-top))
|
|
calc(112px + env(safe-area-inset-right))
|
|
calc(10px + env(safe-area-inset-bottom))
|
|
calc(10px + env(safe-area-inset-left));
|
|
background: rgba(19, 13, 9, 0.82);
|
|
}
|
|
|
|
.character-modal {
|
|
position: relative;
|
|
display: grid;
|
|
width: 100%;
|
|
height: 100%;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
grid-template-columns: minmax(240px, 42%) minmax(0, 58%);
|
|
grid-template-rows: minmax(0, 1fr);
|
|
border-radius: 10rpx;
|
|
}
|
|
|
|
.modal-image-wrap {
|
|
position: relative;
|
|
display: flex;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
background: #d1bf96;
|
|
border-right: 6rpx solid #7d2a23;
|
|
}
|
|
|
|
.modal-portrait-window {
|
|
height: 560px;
|
|
}
|
|
|
|
.modal-portrait-window.poses-5 {
|
|
width: 200px;
|
|
}
|
|
|
|
.modal-portrait-window.poses-4 {
|
|
width: 249px;
|
|
}
|
|
|
|
.modal-image {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 996px;
|
|
height: 560px;
|
|
}
|
|
|
|
.modal-copy {
|
|
position: relative;
|
|
display: grid;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
grid-template-rows: minmax(76px, auto) minmax(0, 1fr) minmax(68px, auto);
|
|
}
|
|
|
|
.modal-head {
|
|
display: flex;
|
|
min-height: 76px;
|
|
align-items: center;
|
|
padding: 12rpx 88px 8rpx 22rpx;
|
|
border-bottom: 2rpx solid rgba(125, 42, 35, 0.22);
|
|
}
|
|
|
|
.modal-heading {
|
|
display: flex;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
flex: 1;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.modal-heading .eyebrow {
|
|
overflow: hidden;
|
|
font-size: 18rpx;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.modal-name {
|
|
margin-top: 2rpx;
|
|
font-size: 42rpx;
|
|
font-weight: 900;
|
|
line-height: 1.12;
|
|
}
|
|
|
|
.modal-close {
|
|
position: absolute;
|
|
z-index: 3;
|
|
top: 12px;
|
|
right: 12px;
|
|
display: flex;
|
|
width: 68px;
|
|
height: 48px;
|
|
min-width: 68px;
|
|
min-height: 48px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0 8px;
|
|
color: #6f201b;
|
|
background: #fff8e5;
|
|
border: 2rpx solid #9f6d54;
|
|
border-radius: 8px;
|
|
box-shadow: 0 4px 10px rgba(48, 37, 28, 0.18);
|
|
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
|
|
font-size: 18px;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.modal-story-scroll {
|
|
width: 100%;
|
|
height: 100%;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.modal-story {
|
|
display: flex;
|
|
padding: 12rpx 24rpx 28rpx;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.section-label {
|
|
margin-top: 10rpx;
|
|
color: #8d3028;
|
|
font-size: 22rpx;
|
|
font-weight: 850;
|
|
}
|
|
|
|
.modal-text {
|
|
margin-top: 6rpx;
|
|
color: #4f3e30;
|
|
font-size: 23rpx;
|
|
line-height: 1.55;
|
|
}
|
|
|
|
.modal-done {
|
|
width: 100%;
|
|
min-width: 48px;
|
|
min-height: 48px;
|
|
height: 48px;
|
|
padding: 0 14px;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.modal-footer {
|
|
display: flex;
|
|
min-height: 68px;
|
|
align-items: center;
|
|
padding: 8px 14px 12px;
|
|
background: rgba(243, 229, 189, 0.96);
|
|
border-top: 2rpx solid rgba(125, 42, 35, 0.22);
|
|
}
|
|
|
|
.font-xlarge .cast-title {
|
|
font-size: 35rpx;
|
|
}
|
|
|
|
.font-xlarge .cast-intro,
|
|
.font-xlarge .cast-role-title,
|
|
.font-xlarge .section-label {
|
|
font-size: 20px;
|
|
}
|
|
|
|
.font-xlarge .cast-name {
|
|
font-size: 26px;
|
|
}
|
|
|
|
.font-xlarge .eras,
|
|
.font-xlarge .cast-hint,
|
|
.font-xlarge .modal-heading .eyebrow {
|
|
font-size: 17px;
|
|
}
|
|
|
|
.font-xlarge .cast-relationship,
|
|
.font-xlarge .list-scroll-guide {
|
|
font-size: 18px;
|
|
}
|
|
|
|
.font-xlarge .modal-name {
|
|
font-size: 46rpx;
|
|
}
|
|
|
|
.font-xlarge .modal-text {
|
|
font-size: 26rpx;
|
|
}
|
|
|
|
@media (max-height: 620px) {
|
|
.cast-shell {
|
|
gap: 8px;
|
|
}
|
|
|
|
.cast-scroll {
|
|
padding-left: 18px;
|
|
}
|
|
|
|
.cast-head {
|
|
min-height: 62px;
|
|
grid-template-columns: 96px minmax(0, 1fr) auto;
|
|
gap: 8px;
|
|
padding: 6px 8px;
|
|
}
|
|
|
|
.cast-back,
|
|
.font-button {
|
|
min-height: 48px;
|
|
font-size: 17px;
|
|
}
|
|
|
|
.font-button {
|
|
padding: 0 12px;
|
|
}
|
|
|
|
.cast-title {
|
|
font-size: 25px;
|
|
}
|
|
|
|
.cast-heading-copy .eyebrow {
|
|
font-size: 15px;
|
|
letter-spacing: 2px;
|
|
}
|
|
|
|
.cast-intro {
|
|
padding: 0 4px 8px;
|
|
font-size: 17px;
|
|
}
|
|
|
|
.cast-grid {
|
|
gap: 10px;
|
|
padding: 0 2px 16px;
|
|
}
|
|
|
|
.cast-card {
|
|
min-height: 144px;
|
|
grid-template-columns: 132px minmax(0, 1fr);
|
|
}
|
|
|
|
.cast-image-wrap {
|
|
min-height: 144px;
|
|
}
|
|
|
|
.cast-copy {
|
|
padding: 8px 10px;
|
|
}
|
|
|
|
.cast-name {
|
|
font-size: 22px;
|
|
}
|
|
|
|
.eras {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.cast-role-title {
|
|
font-size: 17px;
|
|
}
|
|
|
|
.cast-relationship {
|
|
font-size: 15px;
|
|
}
|
|
|
|
.cast-hint {
|
|
margin-top: 6px;
|
|
font-size: 15px;
|
|
}
|
|
|
|
.modal-head {
|
|
min-height: 68px;
|
|
padding: 8px 82px 6px 14px;
|
|
}
|
|
|
|
.modal-copy {
|
|
grid-template-rows: minmax(68px, auto) minmax(0, 1fr) minmax(64px, auto);
|
|
}
|
|
|
|
.modal-heading .eyebrow {
|
|
font-size: 14px;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.modal-name {
|
|
font-size: 30px;
|
|
}
|
|
|
|
.modal-story {
|
|
padding: 7px 16px 16px;
|
|
}
|
|
|
|
.modal-close {
|
|
top: 10px;
|
|
right: 10px;
|
|
width: 64px;
|
|
min-width: 64px;
|
|
height: 48px;
|
|
min-height: 48px;
|
|
font-size: 17px;
|
|
}
|
|
|
|
.modal-footer {
|
|
min-height: 64px;
|
|
padding: 8px 12px;
|
|
}
|
|
|
|
.modal-done {
|
|
height: 48px;
|
|
min-height: 48px;
|
|
}
|
|
|
|
.section-label {
|
|
margin-top: 7px;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.modal-text {
|
|
margin-top: 4px;
|
|
font-size: 18px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.modal-backdrop {
|
|
padding-right: calc(98px + constant(safe-area-inset-right));
|
|
padding-left: calc(32px + constant(safe-area-inset-left));
|
|
padding-right: calc(98px + env(safe-area-inset-right));
|
|
padding-left: calc(32px + env(safe-area-inset-left));
|
|
}
|
|
|
|
.modal-portrait-window {
|
|
height: 280px;
|
|
}
|
|
|
|
.modal-portrait-window.poses-5 {
|
|
width: 100px;
|
|
}
|
|
|
|
.modal-portrait-window.poses-4 {
|
|
width: 125px;
|
|
}
|
|
|
|
.modal-image {
|
|
width: 498px;
|
|
height: 280px;
|
|
}
|
|
|
|
.font-xlarge .cast-title {
|
|
font-size: 28px;
|
|
}
|
|
|
|
.font-xlarge .cast-intro,
|
|
.font-xlarge .cast-role-title,
|
|
.font-xlarge .section-label {
|
|
font-size: 20px;
|
|
}
|
|
|
|
.font-xlarge .cast-name {
|
|
font-size: 25px;
|
|
}
|
|
|
|
.font-xlarge .eras,
|
|
.font-xlarge .cast-hint,
|
|
.font-xlarge .modal-heading .eyebrow {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.font-xlarge .cast-relationship,
|
|
.font-xlarge .list-scroll-guide {
|
|
font-size: 17px;
|
|
}
|
|
|
|
.font-xlarge .modal-name {
|
|
font-size: 33px;
|
|
}
|
|
|
|
.font-xlarge .modal-text {
|
|
font-size: 21px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 720px) and (orientation: landscape) {
|
|
.cast-head {
|
|
grid-template-columns: 96px minmax(0, 1fr) auto;
|
|
gap: 8px;
|
|
}
|
|
|
|
.capsule-safe-space {
|
|
width: 88px;
|
|
flex-basis: 88px;
|
|
}
|
|
|
|
.font-button {
|
|
min-width: 84px;
|
|
padding-right: 9px;
|
|
padding-left: 9px;
|
|
}
|
|
|
|
.cast-heading-copy .eyebrow {
|
|
display: none;
|
|
}
|
|
|
|
.cast-grid {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
|
|
.cast-card {
|
|
grid-template-columns: 150px minmax(0, 1fr);
|
|
}
|
|
|
|
.modal-backdrop {
|
|
padding-right: calc(98px + env(safe-area-inset-right));
|
|
}
|
|
|
|
.character-modal {
|
|
grid-template-columns: minmax(210px, 40%) minmax(0, 60%);
|
|
}
|
|
}
|