ClaudeandClaude Opus 5.5
bd7b1fc671
In der installierten App auf dem iPhone hing die Tab-Leiste auf kurzen Seiten (z. B. leere Tabs Projekte, Rechnungen, Fortschritt) 59 px ueber dem unteren Rand, darunter ein schwarzer Streifen; im Chat nicht. Das ist ein bekannter WebKit-Fehler bei black-translucent: Der Layout-Bereich ist um die Hoehe der Statusleiste kuerzer als der Bildschirm, und auf Seiten, die kuerzer als der Bildschirm sind, docken fixierte Leisten an dieses zu kurze Ende. Der Chat ist hoeher als der Bildschirm und war deshalb nicht betroffen. - Installierte App auf iOS: Seite mindestens bildschirmhoch. Die Hoehe kommt aus screen.* (--kb-screen-h), weil innerHeight, 100svh und 100dvh in diesem Zustand selbst zu kurz sein koennen. Das gilt auch fuer den Login und die Chat-Hoehe. - Safari im Browser, Android und Desktop unveraendert (pixelgleich). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
639 lines
11 KiB
CSS
639 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;
|
||
/* Installierte App auf dem iPhone: mindestens bildschirmhoch, sonst haengen fixierte Leisten
|
||
ueber dem unteren Rand (iOS-Fehler bei black-translucent, siehe syncIosStandaloneHeight in app.js) */
|
||
min-height: max(100svh, var(--kb-screen-h, 0px));
|
||
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;
|
||
}
|
||
}
|