ClaudeandClaude Opus 5.5
57ba2c06f9
Der Fix aus bd7b1fc (Seite mindestens bildschirmhoch) hat nicht gewirkt
und wird zurueckgenommen. Die Ursache ist nicht die Seitenhoehe:
Bei black-translucent ist der Bereich fuer fixierte Elemente in der
installierten iOS-App um die Statusleiste (59 pt) kuerzer als der
Bildschirm. Solange die Seite oben steht, klebt dieser Bereich oben, und
die Tab-Leiste haengt ueber dem unteren Rand. Nach dem Herunterscrollen
sitzt sie richtig, deshalb sah es nur im Chat gut aus.
Mit undurchsichtiger Statusleiste (black) beginnt die App unterhalb der
Statusleiste, und der Bereich ist korrekt bemessen. Nachteil: Der lila
Schimmer reicht nicht mehr hinter die Uhrzeit. Die Abstaende oben kommen
weiter aus env(safe-area-inset-top), das dann 0 ist.
Browser, Android und Desktop unveraendert (pixelgleich).
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
636 lines
11 KiB
CSS
636 lines
11 KiB
CSS
/* Webklar Portal – gemeinsames Theme (Login + Dashboard) */
|
||
|
||
.portal-page,
|
||
.login-page {
|
||
--primary: #9d3dfe;
|
||
--error: #f9191d;
|
||
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
|
||
--input-size: 50px;
|
||
--input-gap: 10px;
|
||
--input-radius: 20px;
|
||
--glass: rgba(255, 255, 255, 0.25);
|
||
--glass-border: rgba(255, 255, 255, 0.12);
|
||
min-height: 100svh;
|
||
margin: 0;
|
||
background: #0a0a0a;
|
||
color: #fff;
|
||
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||
overflow-x: hidden;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
@media (min-width: 62em) {
|
||
.portal-page,
|
||
.login-page {
|
||
--input-size: 64px;
|
||
--input-gap: 5px;
|
||
--input-radius: 25px;
|
||
}
|
||
}
|
||
|
||
.portal-page:not(.dashboard-page):not(.login-page)::before {
|
||
content: '';
|
||
position: fixed;
|
||
inset: 0;
|
||
z-index: 0;
|
||
pointer-events: none;
|
||
background:
|
||
radial-gradient(circle at 50% 45%, rgba(157, 61, 254, 0.35) 0%, transparent 55%),
|
||
radial-gradient(ellipse 80% 50% at 50% 50%, #1a1030 0%, #0a0a0a 70%);
|
||
}
|
||
|
||
.portal-bg {
|
||
position: fixed;
|
||
inset: 0;
|
||
z-index: 0;
|
||
background: #0a0a0a;
|
||
}
|
||
|
||
/* Aceternity Dot Background (CSS-Port für Dashboard) */
|
||
|
||
.dashboard-page {
|
||
background: #000;
|
||
}
|
||
|
||
.dashboard-page::before {
|
||
display: none;
|
||
}
|
||
|
||
.dot-background {
|
||
position: fixed;
|
||
inset: 0;
|
||
z-index: 0;
|
||
overflow: hidden;
|
||
background: #000;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.dot-pattern {
|
||
position: absolute;
|
||
inset: 0;
|
||
background-size: 20px 20px;
|
||
background-image: radial-gradient(#404040 1px, transparent 1px);
|
||
}
|
||
|
||
.dot-fade {
|
||
position: absolute;
|
||
inset: 0;
|
||
pointer-events: none;
|
||
background: #000;
|
||
-webkit-mask-image: radial-gradient(ellipse at center, transparent 20%, #000);
|
||
mask-image: radial-gradient(ellipse at center, transparent 20%, #000);
|
||
}
|
||
|
||
.dashboard-content-reveal {
|
||
animation: login-reveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
|
||
}
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.dashboard-content-reveal {
|
||
animation: none;
|
||
}
|
||
}
|
||
|
||
/* Aceternity Aurora Background (CSS-Port für Vanilla HTML) */
|
||
|
||
.login-page {
|
||
background: #09090b;
|
||
}
|
||
|
||
.aurora-background {
|
||
position: fixed;
|
||
inset: 0;
|
||
z-index: 0;
|
||
overflow: hidden;
|
||
background: #09090b;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.aurora-beams {
|
||
position: absolute;
|
||
inset: -10px;
|
||
opacity: 0.55;
|
||
filter: blur(12px);
|
||
will-change: transform, background-position;
|
||
--blue-300: #93c5fd;
|
||
--blue-400: #60a5fa;
|
||
--blue-500: #3b82f6;
|
||
--indigo-300: #a5b4fc;
|
||
--violet-200: #ddd6fe;
|
||
--aurora: repeating-linear-gradient(
|
||
100deg,
|
||
var(--blue-500) 10%,
|
||
var(--indigo-300) 15%,
|
||
var(--blue-300) 20%,
|
||
var(--violet-200) 25%,
|
||
var(--blue-400) 30%
|
||
);
|
||
--dark-gradient: repeating-linear-gradient(
|
||
100deg,
|
||
#000 0%,
|
||
#000 7%,
|
||
transparent 10%,
|
||
transparent 12%,
|
||
#000 16%
|
||
);
|
||
background-image: var(--dark-gradient), var(--aurora);
|
||
background-size: 300% 200%, 300% 200%;
|
||
background-position: 50% 50%, 50% 50%;
|
||
-webkit-mask-image: radial-gradient(ellipse at 100% 0%, #000 10%, transparent 70%);
|
||
mask-image: radial-gradient(ellipse at 100% 0%, #000 10%, transparent 70%);
|
||
animation: aurora-drift 60s linear infinite;
|
||
}
|
||
|
||
.aurora-beams::after {
|
||
content: '';
|
||
position: absolute;
|
||
inset: 0;
|
||
background-image: var(--dark-gradient), var(--aurora);
|
||
background-size: 200% 100%, 200% 100%;
|
||
background-attachment: fixed;
|
||
background-position: 50% 50%, 50% 50%;
|
||
animation: aurora-drift 60s linear infinite reverse;
|
||
}
|
||
|
||
@keyframes aurora-drift {
|
||
0% {
|
||
background-position: 50% 50%, 50% 50%;
|
||
}
|
||
100% {
|
||
background-position: 350% 50%, 350% 50%;
|
||
}
|
||
}
|
||
|
||
.login-content-reveal {
|
||
animation: login-reveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
|
||
}
|
||
|
||
@keyframes login-reveal {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(40px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.aurora-beams,
|
||
.aurora-beams::after {
|
||
animation: none;
|
||
}
|
||
|
||
.login-content-reveal {
|
||
animation: none;
|
||
}
|
||
}
|
||
|
||
.portal-header,
|
||
.login-header {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 2;
|
||
width: 100%;
|
||
padding: 24px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 1rem;
|
||
flex-wrap: wrap;
|
||
box-sizing: border-box;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.portal-header > *,
|
||
.login-header > * {
|
||
pointer-events: auto;
|
||
}
|
||
|
||
@media (min-width: 62em) {
|
||
.portal-header,
|
||
.login-header {
|
||
padding: 42px 50px;
|
||
}
|
||
}
|
||
|
||
.portal-logo,
|
||
.login-logo {
|
||
text-decoration: none;
|
||
color: #fff;
|
||
font-size: 1.125rem;
|
||
font-weight: 700;
|
||
letter-spacing: 0.06em;
|
||
text-transform: uppercase;
|
||
transition: color 0.25s var(--ease-out);
|
||
}
|
||
|
||
.portal-logo:hover,
|
||
.portal-logo:focus-visible,
|
||
.login-logo:hover,
|
||
.login-logo:focus-visible {
|
||
color: var(--primary);
|
||
}
|
||
|
||
.portal-header-actions {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 1rem;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.portal-meta {
|
||
font-size: 0.875rem;
|
||
color: rgba(255, 255, 255, 0.65);
|
||
}
|
||
|
||
.portal-btn-outline {
|
||
border: 1px solid var(--glass-border);
|
||
background: var(--glass);
|
||
backdrop-filter: blur(10px);
|
||
-webkit-backdrop-filter: blur(10px);
|
||
color: #fff;
|
||
border-radius: 32px;
|
||
padding: 10px 24px;
|
||
font-size: 0.8125rem;
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.06em;
|
||
cursor: pointer;
|
||
transition:
|
||
color 0.25s var(--ease-out),
|
||
background-color 0.25s var(--ease-out),
|
||
border-color 0.25s var(--ease-out);
|
||
}
|
||
|
||
.portal-btn-outline:hover {
|
||
background: #fff;
|
||
color: #1c1c1c;
|
||
border-color: #fff;
|
||
}
|
||
|
||
.portal-main,
|
||
.login-main {
|
||
position: relative;
|
||
z-index: 1;
|
||
min-height: 100svh;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.login-main {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
align-items: stretch;
|
||
}
|
||
|
||
.portal-main {
|
||
padding: 100px 24px 60px;
|
||
max-width: 900px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
@media (min-width: 62em) {
|
||
.portal-main {
|
||
padding: 140px 50px 80px;
|
||
}
|
||
}
|
||
|
||
.portal-title {
|
||
margin: 0 0 2rem;
|
||
font-size: 0.8125rem;
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.1em;
|
||
text-align: center;
|
||
color: #fff;
|
||
}
|
||
|
||
@media (min-width: 62em) {
|
||
.portal-title {
|
||
font-size: 1rem;
|
||
}
|
||
}
|
||
|
||
.login-panel {
|
||
width: 100%;
|
||
max-width: 730px;
|
||
min-height: 100svh;
|
||
padding: 60px 40px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
@media (min-width: 62em) {
|
||
.login-panel {
|
||
padding: 164px 40px;
|
||
}
|
||
}
|
||
|
||
.AuthForm {
|
||
width: 100%;
|
||
max-width: 420px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.AuthForm .login-section {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.auth-label {
|
||
text-align: center;
|
||
margin: 0 0 50px;
|
||
font-size: 0.8125rem;
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.1em;
|
||
line-height: 1;
|
||
color: #fff;
|
||
}
|
||
|
||
@media (min-width: 62em) {
|
||
.auth-label {
|
||
font-size: 1rem;
|
||
}
|
||
}
|
||
|
||
.login-form {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--input-gap);
|
||
}
|
||
|
||
.auth-input {
|
||
color: #fff;
|
||
background-color: var(--glass);
|
||
padding-inline: 40px;
|
||
backdrop-filter: blur(10px);
|
||
-webkit-backdrop-filter: blur(10px);
|
||
border-radius: var(--input-radius);
|
||
width: 100%;
|
||
height: var(--input-size);
|
||
border: none;
|
||
margin: 0;
|
||
box-sizing: border-box;
|
||
font-size: 1rem;
|
||
font-family: inherit;
|
||
}
|
||
|
||
.auth-input::placeholder {
|
||
color: #fff;
|
||
opacity: 0.5;
|
||
}
|
||
|
||
.auth-input:focus {
|
||
outline: 2px solid rgba(157, 61, 254, 0.6);
|
||
outline-offset: 2px;
|
||
}
|
||
|
||
.auth-input.invalid {
|
||
border: 2px solid var(--error);
|
||
}
|
||
|
||
.login-form .error,
|
||
.portal-page .error {
|
||
text-align: center;
|
||
margin: 0;
|
||
font-size: 0.875rem;
|
||
color: #fca5a5;
|
||
}
|
||
|
||
.auth-button {
|
||
width: 100%;
|
||
height: var(--input-size);
|
||
margin-top: var(--input-gap);
|
||
border: none;
|
||
border-radius: 32px;
|
||
background: #fff;
|
||
color: #1c1c1c;
|
||
font-size: 1rem;
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 10px;
|
||
position: relative;
|
||
transition:
|
||
color 0.25s var(--ease-out),
|
||
background-color 0.25s var(--ease-out),
|
||
transform 0.25s var(--ease-out);
|
||
}
|
||
|
||
.auth-button svg {
|
||
width: 12px;
|
||
height: 12px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.auth-button:hover:not(:disabled) {
|
||
background: #1c1c1c;
|
||
color: #fff;
|
||
}
|
||
|
||
.auth-button:active:not(:disabled) {
|
||
transform: scale(0.98);
|
||
}
|
||
|
||
.auth-button:disabled {
|
||
opacity: 0.65;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
.auth-button.is-loading .button-label {
|
||
opacity: 0;
|
||
}
|
||
|
||
.auth-button .loading-spinner {
|
||
display: none;
|
||
width: 22px;
|
||
height: 22px;
|
||
}
|
||
|
||
.auth-button.is-loading .loading-spinner {
|
||
display: block;
|
||
position: absolute;
|
||
}
|
||
|
||
.loading-spinner {
|
||
animation: login-spin 1s linear infinite;
|
||
}
|
||
|
||
@keyframes login-spin {
|
||
to {
|
||
transform: rotate(360deg);
|
||
}
|
||
}
|
||
|
||
.login-hint {
|
||
text-align: center;
|
||
margin: 50px 0 0;
|
||
font-size: 0.875rem;
|
||
line-height: 1.5;
|
||
color: rgba(255, 255, 255, 0.55);
|
||
max-width: 420px;
|
||
margin-inline: auto;
|
||
}
|
||
|
||
.portal-page .muted {
|
||
color: rgba(255, 255, 255, 0.55);
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.portal-page .hidden {
|
||
display: none !important;
|
||
}
|
||
|
||
/* Dashboard */
|
||
|
||
.projects {
|
||
list-style: none;
|
||
padding: 0;
|
||
margin: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 1rem;
|
||
}
|
||
|
||
.project-card,
|
||
.portal-card {
|
||
background: var(--glass);
|
||
backdrop-filter: blur(10px);
|
||
-webkit-backdrop-filter: blur(10px);
|
||
border: 1px solid var(--glass-border);
|
||
border-radius: var(--input-radius);
|
||
padding: 1.5rem 1.75rem;
|
||
margin: 0;
|
||
}
|
||
|
||
.project-card h2 {
|
||
margin: 0 0 1rem;
|
||
font-size: 1.125rem;
|
||
font-weight: 600;
|
||
color: #fff;
|
||
}
|
||
|
||
.project-card dl {
|
||
margin: 0;
|
||
display: grid;
|
||
grid-template-columns: 8rem 1fr;
|
||
gap: 0.35rem 1rem;
|
||
}
|
||
|
||
.project-card dt {
|
||
color: rgba(255, 255, 255, 0.5);
|
||
font-size: 0.8125rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.04em;
|
||
}
|
||
|
||
.project-card dd {
|
||
margin: 0;
|
||
color: #fff;
|
||
word-break: break-word;
|
||
}
|
||
|
||
.project-card a {
|
||
color: var(--primary);
|
||
text-decoration: none;
|
||
transition: opacity 0.2s var(--ease-out);
|
||
}
|
||
|
||
.project-card a:hover {
|
||
opacity: 0.85;
|
||
text-decoration: underline;
|
||
}
|
||
|
||
.feature-tags {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 0.5rem;
|
||
margin-top: 1rem;
|
||
}
|
||
|
||
.feature-tag {
|
||
background: rgba(157, 61, 254, 0.25);
|
||
border: 1px solid rgba(157, 61, 254, 0.45);
|
||
border-radius: 999px;
|
||
padding: 0.25rem 0.75rem;
|
||
font-size: 0.75rem;
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.04em;
|
||
color: #fff;
|
||
}
|
||
|
||
.portal-status {
|
||
text-align: center;
|
||
padding: 2rem 1rem;
|
||
}
|
||
|
||
@media (max-width: 48em) {
|
||
.login-main {
|
||
justify-content: center;
|
||
}
|
||
|
||
.login-panel {
|
||
max-width: none;
|
||
padding: 100px 24px 60px;
|
||
}
|
||
|
||
.project-card dl {
|
||
grid-template-columns: 1fr;
|
||
gap: 0.15rem;
|
||
}
|
||
|
||
.project-card dt {
|
||
margin-top: 0.5rem;
|
||
}
|
||
|
||
.project-card dt:first-of-type {
|
||
margin-top: 0;
|
||
}
|
||
}
|
||
|
||
/* Login als App (Handy): App-Icon ueber dem Formular, Abstand zu Statusleiste und Home-Balken */
|
||
.login-app-brand {
|
||
display: none;
|
||
}
|
||
|
||
@media (max-width: 48em) {
|
||
.login-header {
|
||
padding-top: calc(24px + env(safe-area-inset-top));
|
||
}
|
||
|
||
.login-panel {
|
||
padding-top: calc(88px + env(safe-area-inset-top));
|
||
padding-bottom: calc(40px + env(safe-area-inset-bottom));
|
||
}
|
||
|
||
.login-app-brand {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 14px;
|
||
margin: 0 0 40px;
|
||
font-size: 0.9375rem;
|
||
font-weight: 700;
|
||
letter-spacing: 0.02em;
|
||
}
|
||
|
||
.login-app-brand img {
|
||
width: 64px;
|
||
height: 64px;
|
||
border-radius: 16px;
|
||
box-shadow: 0 10px 30px rgba(157, 61, 254, 0.35);
|
||
}
|
||
|
||
.auth-label {
|
||
margin-bottom: 28px;
|
||
}
|
||
}
|