Anpassung Design -> Registration / Anmeldung ; Extra Fenster für jeden Film

This commit is contained in:
2026-06-22 13:29:39 +02:00
parent f8fc262290
commit f44be56a8e
2 changed files with 724 additions and 0 deletions

721
style.css
View File

@@ -4844,3 +4844,724 @@ body.theme-light .limited-special-card.wide-special .snack-img img {
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%;
}
}