diff --git a/css/main.css b/css/main.css index ca60ee3..b6a696d 100644 --- a/css/main.css +++ b/css/main.css @@ -15,13 +15,13 @@ Modified 2026 for Zeitfresser Matrix Community Look & Mobile Fixes } :root { - --app-background: #1e1f29; /* Tief-Anthrazit der Webseite */ - --background: #282a36; /* Hintergrund der Card */ - --foreground: #f7f7fa; /* Reines Highlight-Weiß */ - --font: #bdc3c7; /* Fließtext-Grau */ - --grey: #64748b; /* Dunkles Grau für Identifier */ + --app-background: #1e1f29; /* Tief-Anthrazit */ + --background: #282a36; /* Card Hintergrund */ + --foreground: #f7f7fa; /* Weiß */ + --font: #bdc3c7; /* Grau */ + --grey: #64748b; /* Dunkles Grau */ --accent: #0dbd8b; /* Matrix-Green */ - --ztfr-purple: #bd93f9; /* Das Zeitfresser-Lila Akzent */ + --ztfr-purple: #bd93f9; /* Zeitfresser-Lila */ --error: #ff5555; --link: #f7f7fa; --borders: #2f313d; @@ -89,7 +89,7 @@ button, input[type=submit] { width: 100%; } -/* Buttons: Eckig & Kontrastreich */ +/* --- GROSSE BUTTONS (z.B. Download, Continue) --- */ .primary, .secondary { text-decoration: none; font-weight: bold; @@ -99,8 +99,12 @@ button, input[type=submit] { display: block; text-transform: uppercase; letter-spacing: 1px; - transition: all 0.2s ease; width: 100%; + + /* Simplifizierung: Nur Farbe, keine Bewegung */ + transition: background-color 0.2s ease, filter 0.2s ease; + transform: none !important; + -webkit-font-smoothing: antialiased; } .primary { @@ -125,7 +129,43 @@ button, input[type=submit] { background: rgba(255,255,255,0.05); } -/* Fix für Button-Container (entfernt versteckte Gaps) */ +/* --- DEZENTE BUTTONS (Change, Custom Instance, Footer-Style) --- */ +.ClientListView button.change, +.PreviewView button.change, +.ClientView button.custom, +.ClientView .footer button, +.CustomInstanceView .actions button.secondary, +.footer button, +.footer a { + background: none !important; + border: none !important; + color: var(--grey) !important; + padding: 0 !important; + margin: 0 !important; + font-family: inherit !important; + font-size: inherit !important; + font-weight: normal !important; + text-transform: none !important; + letter-spacing: normal !important; + cursor: pointer !important; + display: inline !important; + width: auto !important; + border-bottom: 1px solid rgba(189, 195, 199, 0.3) !important; + transition: all 0.3s ease !important; +} + +.ClientListView button.change:hover, +.PreviewView button.change:hover, +.ClientView button.custom:hover, +.ClientView .footer button:hover, +.CustomInstanceView .actions button.secondary:hover, +.footer button:hover, +.footer a:hover { + color: var(--foreground) !important; + border-bottom-color: var(--ztfr-purple) !important; +} + +/* Fix für Button-Container */ .actions, .ClientView .actions, .ClientListView .actions, @@ -135,12 +175,11 @@ button, input[type=submit] { gap: 0px !important; } -/* Entfernt den Abstand beim letzten Button in einer Gruppe für saubere Optik */ .actions > *:last-child { margin-bottom: 0 !important; } -/* Input Felder: Dunkel statt Weiß */ +/* Input Felder */ input[type='text'].large { width: 100%; padding: 14px; @@ -164,60 +203,11 @@ input[type='text'].large { width: 100%; } -.footer ul { - list-style: none; - padding: 0; - margin: 0; -} +.footer ul { list-style: none; padding: 0; margin: 0; } +.footer li { display: inline; margin: 0; } -.footer li { - display: inline; - margin: 0; -} - -.footer a { - color: inherit; - text-decoration: none; - border-bottom: 1px solid rgba(189, 195, 199, 0.3); - transition: all 0.3s ease; -} - -.footer a:hover { - color: var(--foreground) !important; - border-bottom-color: var(--ztfr-purple) !important; -} - -.footer button, -.footer input[type="submit"], -.ClientListView button.change, -.PreviewView button.change { - background: none !important; - border: none !important; - color: var(--grey) !important; - padding: 0 !important; - font-family: inherit !important; - font-size: inherit !important; - cursor: pointer !important; - border-bottom: 1px solid rgba(189, 195, 199, 0.3) !important; -} - -.footer button:hover { - color: var(--foreground) !important; - border-bottom-color: var(--ztfr-purple) !important; -} - -/* SPEZIELLE MOBILE ANPASSUNGEN */ @media screen and (max-width: 480px) { - body { - padding: 40px 10px 0 10px; - } - - .card { - padding: 1.5rem; - border-radius: 2px; - } - - h1 { - font-size: 1.5rem; - } + body { padding: 40px 10px 0 10px; } + .card { padding: 1.5rem; border-radius: 2px; } + h1 { font-size: 1.5rem; } }