forked from Aaron/Kino-Website
Anpassung Design -> Registration / Anmeldung ; Extra Fenster für jeden Film
This commit is contained in:
BIN
img/youtube-logo.png
LFS
Normal file
BIN
img/youtube-logo.png
LFS
Normal file
Binary file not shown.
721
style.css
721
style.css
@@ -4844,3 +4844,724 @@ body.theme-light .limited-special-card.wide-special .snack-img img {
|
|||||||
min-height: 176px;
|
min-height: 176px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* --- Account registration form refresh --- */
|
||||||
|
.auth-field {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-field input,
|
||||||
|
.auth-field select {
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-field .field-error {
|
||||||
|
min-height: 16px;
|
||||||
|
display: block;
|
||||||
|
margin-top: 5px;
|
||||||
|
color: #ff6d7d;
|
||||||
|
font-size: 0.76rem;
|
||||||
|
line-height: 1.25;
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-field.is-invalid input,
|
||||||
|
.auth-field.is-invalid select,
|
||||||
|
.auth-field.is-invalid .gender-selector {
|
||||||
|
border-color: rgba(255, 84, 105, 0.88) !important;
|
||||||
|
box-shadow: 0 0 0 3px rgba(255, 84, 105, 0.12);
|
||||||
|
}
|
||||||
|
|
||||||
|
#login-error {
|
||||||
|
margin: 0 0 8px;
|
||||||
|
padding: 9px 11px;
|
||||||
|
border: 1px solid rgba(255, 84, 105, 0.35);
|
||||||
|
border-radius: 10px;
|
||||||
|
background: rgba(255, 84, 105, 0.1);
|
||||||
|
color: #ff8795;
|
||||||
|
font-size: 0.82rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.register-auth-modal {
|
||||||
|
width: min(1180px, 94vw);
|
||||||
|
max-width: 1180px;
|
||||||
|
max-height: 88vh;
|
||||||
|
overflow-y: auto;
|
||||||
|
padding: 28px 30px 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.register-form-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
||||||
|
gap: 22px;
|
||||||
|
margin-top: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.register-form-section {
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
background: rgba(255, 255, 255, 0.035);
|
||||||
|
border-radius: 14px;
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.register-form-section h3 {
|
||||||
|
margin-bottom: 14px;
|
||||||
|
font-size: 1rem;
|
||||||
|
color: #f7faff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.register-form-section input,
|
||||||
|
.register-form-section select {
|
||||||
|
min-height: 48px;
|
||||||
|
border-width: 0 0 1px;
|
||||||
|
border-radius: 0;
|
||||||
|
background: transparent;
|
||||||
|
padding: 10px 2px;
|
||||||
|
color: #f5f7fb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.register-form-section select {
|
||||||
|
appearance: none;
|
||||||
|
background-image: linear-gradient(45deg, transparent 50%, #9aa7ba 50%), linear-gradient(135deg, #9aa7ba 50%, transparent 50%);
|
||||||
|
background-position: calc(100% - 18px) 21px, calc(100% - 12px) 21px;
|
||||||
|
background-size: 6px 6px, 6px 6px;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
|
||||||
|
.register-row {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
||||||
|
gap: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.street-row {
|
||||||
|
grid-template-columns: minmax(0, 1fr) 110px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gender-selector {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.16);
|
||||||
|
border-radius: 12px;
|
||||||
|
overflow: hidden;
|
||||||
|
background: rgba(255, 255, 255, 0.04);
|
||||||
|
}
|
||||||
|
|
||||||
|
.gender-selector button {
|
||||||
|
min-height: 52px;
|
||||||
|
border: 0;
|
||||||
|
border-right: 1px solid rgba(255, 255, 255, 0.16);
|
||||||
|
background: transparent;
|
||||||
|
color: #f8fbff;
|
||||||
|
font-weight: 700;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gender-selector button:last-child {
|
||||||
|
border-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gender-selector button.active {
|
||||||
|
background: rgba(0, 113, 227, 0.28);
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.register-warning {
|
||||||
|
color: #8f98a7;
|
||||||
|
font-size: 0.84rem;
|
||||||
|
line-height: 1.45;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.account-personal-card h3 {
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.account-personal-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.account-personal-grid p {
|
||||||
|
margin: 0;
|
||||||
|
padding: 11px 12px;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||||
|
border-radius: 10px;
|
||||||
|
background: rgba(255, 255, 255, 0.035);
|
||||||
|
}
|
||||||
|
|
||||||
|
.account-personal-grid span {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
color: #91a0b4;
|
||||||
|
font-size: 0.72rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.account-personal-grid strong {
|
||||||
|
color: #f6f9ff;
|
||||||
|
font-size: 0.92rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.theme-light .auth-field.is-invalid input,
|
||||||
|
body.theme-light .auth-field.is-invalid select,
|
||||||
|
body.theme-light .auth-field.is-invalid .gender-selector {
|
||||||
|
border-color: rgba(216, 42, 66, 0.82) !important;
|
||||||
|
box-shadow: 0 0 0 3px rgba(216, 42, 66, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.theme-light .register-form-section {
|
||||||
|
background: #f7faff;
|
||||||
|
border-color: rgba(28, 56, 94, 0.14);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.theme-light .register-form-section h3 {
|
||||||
|
color: #10213a;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.theme-light .register-form-section input,
|
||||||
|
body.theme-light .register-form-section select {
|
||||||
|
background: transparent !important;
|
||||||
|
color: #10213a !important;
|
||||||
|
border-color: rgba(33, 55, 91, 0.22) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.theme-light .gender-selector {
|
||||||
|
background: #eef4ff;
|
||||||
|
border-color: rgba(28, 56, 94, 0.16);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.theme-light .gender-selector button {
|
||||||
|
color: #1b2f4d;
|
||||||
|
border-color: rgba(28, 56, 94, 0.16);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.theme-light .gender-selector button.active {
|
||||||
|
background: #dcecff;
|
||||||
|
color: #0057ae;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.theme-light .register-warning {
|
||||||
|
color: #5a6c86;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.theme-light .account-personal-grid p {
|
||||||
|
background: #f7faff;
|
||||||
|
border-color: rgba(28, 56, 94, 0.12);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.theme-light .account-personal-grid span {
|
||||||
|
color: #52647f;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.theme-light .account-personal-grid strong {
|
||||||
|
color: #10213a;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.theme-light .auth-field.is-invalid input,
|
||||||
|
body.theme-light .auth-field.is-invalid select,
|
||||||
|
body.theme-light .auth-field.is-invalid .gender-selector,
|
||||||
|
body.theme-light .register-form-section .auth-field.is-invalid input,
|
||||||
|
body.theme-light .register-form-section .auth-field.is-invalid select {
|
||||||
|
border-color: rgba(216, 42, 66, 0.82) !important;
|
||||||
|
box-shadow: 0 0 0 3px rgba(216, 42, 66, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 860px) {
|
||||||
|
.register-form-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.register-auth-modal {
|
||||||
|
padding: 24px 18px 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 560px) {
|
||||||
|
.register-row,
|
||||||
|
.street-row {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Account edit and movie detail overlay --- */
|
||||||
|
.account-header-actions {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.account-edit-btn {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.18);
|
||||||
|
border-radius: 50%;
|
||||||
|
background: rgba(255, 255, 255, 0.06);
|
||||||
|
color: #ffffff;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.account-edit-btn:hover {
|
||||||
|
transform: translateY(-1px);
|
||||||
|
border-color: rgba(0, 113, 227, 0.75);
|
||||||
|
background: rgba(0, 113, 227, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.account-edit-btn svg {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
fill: none;
|
||||||
|
stroke: currentColor;
|
||||||
|
stroke-width: 2;
|
||||||
|
stroke-linecap: round;
|
||||||
|
stroke-linejoin: round;
|
||||||
|
}
|
||||||
|
|
||||||
|
.account-card-title-row {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.account-card-title-row h3 {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.account-card-title-row span {
|
||||||
|
color: #8fa0b6;
|
||||||
|
font-size: 0.82rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.account-edit-form {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
|
||||||
|
gap: 12px 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.account-edit-form .auth-field {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.account-edit-form .auth-field > span:first-child,
|
||||||
|
.account-email-locked > span:first-child {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
color: #91a0b4;
|
||||||
|
font-size: 0.78rem;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.account-edit-form input,
|
||||||
|
.account-edit-form select {
|
||||||
|
min-height: 46px;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||||
|
border-radius: 8px;
|
||||||
|
background: rgba(255, 255, 255, 0.04);
|
||||||
|
color: #f6f9ff;
|
||||||
|
padding: 10px 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.account-email-locked input:disabled {
|
||||||
|
opacity: 0.72;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.account-email-locked small {
|
||||||
|
display: block;
|
||||||
|
margin-top: 6px;
|
||||||
|
color: #7e8da1;
|
||||||
|
font-size: 0.74rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.account-edit-actions {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
gap: 10px;
|
||||||
|
margin-top: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.account-save-btn,
|
||||||
|
.account-secondary-btn {
|
||||||
|
border: 0;
|
||||||
|
border-radius: 999px;
|
||||||
|
padding: 10px 16px;
|
||||||
|
font-weight: 800;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.account-save-btn {
|
||||||
|
background: #0071e3;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.account-secondary-btn {
|
||||||
|
background: rgba(255, 255, 255, 0.08);
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.program-card,
|
||||||
|
.running-poster {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.program-card:focus-within,
|
||||||
|
.running-poster:focus-visible {
|
||||||
|
outline: 2px solid rgba(0, 113, 227, 0.8);
|
||||||
|
outline-offset: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.movie-detail-overlay {
|
||||||
|
position: fixed;
|
||||||
|
z-index: 10000;
|
||||||
|
overflow: hidden;
|
||||||
|
background: #05070a;
|
||||||
|
box-shadow: 0 30px 90px rgba(0, 0, 0, 0.5);
|
||||||
|
transition: left 0.46s cubic-bezier(0.2, 0.82, 0.2, 1),
|
||||||
|
top 0.46s cubic-bezier(0.2, 0.82, 0.2, 1),
|
||||||
|
width 0.46s cubic-bezier(0.2, 0.82, 0.2, 1),
|
||||||
|
height 0.46s cubic-bezier(0.2, 0.82, 0.2, 1),
|
||||||
|
border-radius 0.46s cubic-bezier(0.2, 0.82, 0.2, 1),
|
||||||
|
opacity 0.28s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.movie-detail-overlay.hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.movie-detail-overlay.is-closing {
|
||||||
|
opacity: 0.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.movie-detail-stage {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
overflow-y: auto;
|
||||||
|
opacity: 0;
|
||||||
|
transform: scale(0.985);
|
||||||
|
transition: opacity 0.25s ease 0.12s, transform 0.32s ease 0.1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.movie-detail-overlay.is-open .movie-detail-stage {
|
||||||
|
opacity: 1;
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.movie-detail-backdrop {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0 0 auto;
|
||||||
|
height: min(620px, 76vh);
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
filter: saturate(1.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.movie-detail-content {
|
||||||
|
position: relative;
|
||||||
|
width: min(1180px, calc(100% - 32px));
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 112px 0 70px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.movie-detail-close {
|
||||||
|
position: fixed;
|
||||||
|
top: 22px;
|
||||||
|
right: 24px;
|
||||||
|
z-index: 2;
|
||||||
|
width: 42px;
|
||||||
|
height: 42px;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.18);
|
||||||
|
border-radius: 50%;
|
||||||
|
background: rgba(12, 14, 18, 0.76);
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 1.6rem;
|
||||||
|
line-height: 1;
|
||||||
|
cursor: pointer;
|
||||||
|
backdrop-filter: blur(18px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.movie-detail-hero-block {
|
||||||
|
min-height: 520px;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: minmax(190px, 300px) minmax(0, 1fr);
|
||||||
|
align-items: end;
|
||||||
|
gap: clamp(24px, 5vw, 58px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.movie-detail-poster img {
|
||||||
|
width: 100%;
|
||||||
|
aspect-ratio: 2 / 3;
|
||||||
|
object-fit: cover;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 28px 70px rgba(0, 0, 0, 0.55);
|
||||||
|
}
|
||||||
|
|
||||||
|
.movie-detail-copy {
|
||||||
|
padding-bottom: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.movie-detail-kicker {
|
||||||
|
margin-bottom: 8px;
|
||||||
|
color: #9bc8ff;
|
||||||
|
font-size: 0.78rem;
|
||||||
|
font-weight: 800;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.movie-detail-copy h2 {
|
||||||
|
max-width: 820px;
|
||||||
|
margin: 0 0 14px;
|
||||||
|
font-size: clamp(2.1rem, 5vw, 5.2rem);
|
||||||
|
line-height: 0.96;
|
||||||
|
}
|
||||||
|
|
||||||
|
.movie-detail-meta {
|
||||||
|
gap: 10px;
|
||||||
|
margin-bottom: 18px;
|
||||||
|
color: #dce7f6;
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
|
||||||
|
.movie-detail-copy > p:last-child {
|
||||||
|
max-width: 760px;
|
||||||
|
color: #d5dbe5;
|
||||||
|
font-size: 1rem;
|
||||||
|
line-height: 1.65;
|
||||||
|
}
|
||||||
|
|
||||||
|
.movie-detail-section {
|
||||||
|
margin-top: 28px;
|
||||||
|
padding-top: 28px;
|
||||||
|
border-top: 1px solid rgba(255, 255, 255, 0.12);
|
||||||
|
}
|
||||||
|
|
||||||
|
.movie-detail-section-head {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.movie-detail-section-head h3 {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 1.35rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.movie-detail-section-head span {
|
||||||
|
color: #8d98a8;
|
||||||
|
font-size: 0.82rem;
|
||||||
|
font-weight: 800;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.movie-detail-youtube-logo {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.movie-detail-youtube-logo img {
|
||||||
|
width: 34px;
|
||||||
|
max-height: 18px;
|
||||||
|
object-fit: contain;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.movie-trailer-frame {
|
||||||
|
aspect-ratio: 16 / 9;
|
||||||
|
width: min(920px, 100%);
|
||||||
|
background: #0b0d11;
|
||||||
|
border-radius: 8px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.movie-trailer-preview {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border: 0;
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
align-content: center;
|
||||||
|
gap: 14px;
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
color: #ffffff;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.movie-trailer-preview strong {
|
||||||
|
text-shadow: 0 2px 18px rgba(0, 0, 0, 0.78);
|
||||||
|
}
|
||||||
|
|
||||||
|
.movie-trailer-preview.is-missing {
|
||||||
|
filter: grayscale(0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.movie-trailer-play {
|
||||||
|
width: 74px;
|
||||||
|
height: 74px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: rgba(255, 255, 255, 0.92);
|
||||||
|
position: relative;
|
||||||
|
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
|
||||||
|
}
|
||||||
|
|
||||||
|
.movie-trailer-play::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
left: 30px;
|
||||||
|
top: 23px;
|
||||||
|
border-top: 14px solid transparent;
|
||||||
|
border-bottom: 14px solid transparent;
|
||||||
|
border-left: 20px solid #0a0d12;
|
||||||
|
}
|
||||||
|
|
||||||
|
.movie-trailer-frame iframe {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border: 0;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.movie-actor-list {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.movie-actor-list span {
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.14);
|
||||||
|
border-radius: 999px;
|
||||||
|
padding: 8px 12px;
|
||||||
|
background: rgba(255, 255, 255, 0.06);
|
||||||
|
color: #eef4ff;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.movie-actor-list p {
|
||||||
|
margin: 0;
|
||||||
|
color: #8f9caf;
|
||||||
|
}
|
||||||
|
|
||||||
|
.movie-detail-schedule {
|
||||||
|
padding-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.movie-detail-time-row:hover {
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.theme-light .account-edit-btn,
|
||||||
|
body.theme-light .account-secondary-btn {
|
||||||
|
background: #eef4ff;
|
||||||
|
border-color: rgba(28, 56, 94, 0.16);
|
||||||
|
color: #10213a;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.theme-light .account-card-title-row span,
|
||||||
|
body.theme-light .account-edit-form .auth-field > span:first-child,
|
||||||
|
body.theme-light .account-email-locked > span:first-child,
|
||||||
|
body.theme-light .account-email-locked small {
|
||||||
|
color: #52647f;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.theme-light .account-edit-form input,
|
||||||
|
body.theme-light .account-edit-form select {
|
||||||
|
background: #ffffff;
|
||||||
|
border-color: rgba(28, 56, 94, 0.16);
|
||||||
|
color: #10213a;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.theme-light .movie-detail-overlay {
|
||||||
|
background: #f4f7fb;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.theme-light .movie-detail-backdrop {
|
||||||
|
filter: saturate(1.05) brightness(1.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.theme-light .movie-detail-copy > p:last-child,
|
||||||
|
body.theme-light .movie-detail-meta,
|
||||||
|
body.theme-light .movie-actor-list span {
|
||||||
|
color: #10213a;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.theme-light .movie-detail-copy h2,
|
||||||
|
body.theme-light .movie-detail-copy > p:last-child,
|
||||||
|
body.theme-light .movie-detail-meta {
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.theme-light .movie-detail-section {
|
||||||
|
border-color: rgba(28, 56, 94, 0.14);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.theme-light .movie-actor-list span {
|
||||||
|
background: #ffffff;
|
||||||
|
border-color: rgba(28, 56, 94, 0.14);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 760px) {
|
||||||
|
.account-panel-header,
|
||||||
|
.account-card-title-row {
|
||||||
|
align-items: flex-start;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.account-edit-actions {
|
||||||
|
justify-content: stretch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.account-save-btn,
|
||||||
|
.account-secondary-btn {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.movie-detail-content {
|
||||||
|
width: min(100% - 24px, 560px);
|
||||||
|
padding-top: 78px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.movie-detail-hero-block {
|
||||||
|
min-height: auto;
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.movie-detail-poster {
|
||||||
|
width: min(210px, 62vw);
|
||||||
|
}
|
||||||
|
|
||||||
|
.movie-detail-copy {
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.movie-detail-copy h2 {
|
||||||
|
font-size: clamp(2rem, 12vw, 3.8rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.movie-detail-section-head {
|
||||||
|
align-items: flex-start;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.movie-detail-trailer-head {
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
.movie-trailer-frame {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user