From 876b4c742ca673d69a8ea1490158f5b1c14f1129 Mon Sep 17 00:00:00 2001 From: Dome Date: Tue, 7 Apr 2026 18:44:10 +0200 Subject: [PATCH] Update main.css --- css/main.css | 237 ++++++++++++++++----------------------------------- 1 file changed, 75 insertions(+), 162 deletions(-) diff --git a/css/main.css b/css/main.css index fe88b07..86cfd38 100644 --- a/css/main.css +++ b/css/main.css @@ -1,17 +1,6 @@ /* Copyright 2020 The Matrix.org Foundation C.I.C. - -Licensed under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. -You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software -distributed under the License is distributed on an "AS IS" BASIS, -WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -See the License for the specific language governing permissions and -limitations under the License. +Modified 2026 for Zeitfresser Matrix Community Look */ @import url('spinner.css'); @@ -21,56 +10,49 @@ limitations under the License. @import url('open.css'); :root { - --app-background: #1e1f29; /* Hintergrund der Seite */ - --background: #282a36; /* Hintergrund der Card/Kachel */ - --foreground: #f7f7fa; /* Haupt-Textfarbe */ - --font: #f7f7fa; - --sub-text: #bdc3c7; /* Für Beschreibungen */ - --accent: #0dbd8b; /* Matrix Green */ - --link: #f7f7fa; /* Links weiß wie im Entwurf */ + --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 */ + --accent: #0dbd8b; /* Matrix-Green */ + --ztfr-purple: #bd93f9; /* Das Zeitfresser-Lila Akzent */ + --error: #ff5555; + --link: #f7f7fa; --borders: #2f313d; --lightgrey: #383a59; - --error: #ff5555; --spinner-stroke-size: 2px; } html { margin: 0; padding: 0; + height: 100%; } body { background-color: var(--app-background); - /* Das Standard-Hintergrundbild entfernen für den cleanen Look */ - background-image: none; + background-image: none !important; /* Entfernt das Standard-Muster */ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: var(--font); + padding: 80px 20px 0 20px; + margin: 0; + min-height: 100vh; display: flex; flex-direction: column; align-items: center; - padding: 60px 20px; - margin: 0; - height: auto; - min-height: 100vh; } -noscript { - display: block; - padding: 20px; +h1, h2, h3 { + color: var(--foreground); + letter-spacing: -0.5px; } -p { line-height: 150%; } -a { text-decoration: none; } +p { line-height: 1.7; } +a { text-decoration: none; color: var(--link); } -h1 { font-size: 24px; } -h2 { font-size: 21px; } -h3 { font-size: 16px; } - -body, -button, -input, -textarea { - font-family: Helvetica Neue, Helvetica, Arial, sans-serif; +body, button, input, textarea { + font-size: 14px; font-style: normal; } @@ -78,13 +60,14 @@ button, input[type=submit] { cursor: pointer; } -button, input { - font-size: inherit; - font-weight: inherit; -} - -input[type="checkbox"], input[type="radio"] { - margin: 0 8px 0 0; +/* Die zentrale Kachel */ +.card { + background-color: var(--background); + border-radius: 4px; /* Eckig wie die Room-Cards */ + border-left: 4px solid var(--ztfr-purple); + box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.3); + padding: 2.5rem; + box-sizing: border-box; } .RootView { @@ -93,138 +76,68 @@ input[type="checkbox"], input[type="radio"] { width: 100%; } -.card { - background-color: var(--background); - border-radius: 4px; /* Eckig wie in deinem Entwurf */ - border-left: 4px solid #bd93f9; /* Der lila Akzent-Strich vom Hover-Effekt */ - box-shadow: 0 10px 30px rgba(0,0,0,0.3); - padding: 2rem; - max-width: 480px; - width: 100%; -} - -.card, .footer { - padding: 2rem; -} - -.hidden { - display: none !important; -} - - -@media screen and (max-width: 480px) { - body { - background-image: none; - background-color: var(--background); - padding: 0; - } - - .card { - border-radius: unset; - box-shadow: unset; - } -} - -.footer .links li:not(:first-child) { - margin-left: 0.5em; -} - -.footer .links li:not(:first-child)::before { - content: "·"; - margin-right: 0.5em; -} - -.footer .links li { - display: inline-block; -} - -.footer .links { - font-size: 12px; - list-style: none; - padding: 0; -} - -a, button.text { - color: var(--link); -} - -button.text { - background: none; - border: none; - font-style: normal; - font-weight: normal; - font-size: inherit; - padding: 8px 0; - margin: -8px 0; -} - -button.text:hover { - cursor: pointer; +/* Buttons: Eckig & Kontrastreich */ +.primary, .secondary { + text-decoration: none; + font-weight: bold; + text-align: center; + padding: 14px 20px; + margin: 12px 0; + display: block; + text-transform: uppercase; + letter-spacing: 1px; + transition: all 0.2s ease; } .primary { - background-color: var(--font) !important; /* Weißer Hintergrund */ - color: var(--app-background) !important; /* Dunkler Text */ - border-radius: 4px !important; - text-transform: uppercase; - letter-spacing: 1px; - font-weight: 600; + background: var(--foreground); + color: var(--app-background) !important; + border-radius: 4px; + border: none; +} + +.primary:hover { + filter: brightness(0.9); + transform: translateY(-2px); } .secondary { - background: transparent !important; - border: 1px solid var(--font) !important; - color: var(--font) !important; - border-radius: 4px !important; - text-transform: uppercase; - letter-spacing: 1px; + background: transparent; + color: var(--foreground); + border: 1px solid var(--foreground); + border-radius: 4px; } -.primary { - background: var(--link); - color: var(--background); - border-radius: 32px; -} - -.primary.icon, .secondary.icon { - background-repeat: no-repeat; - background-position: 12px center; -} - -.icon.link { background-image: url('../images/link.svg'); } -.icon.tick { background-image: url('../images/tick.svg'); } -.icon.copy { background-image: url('../images/copy.svg'); } - -button.primary, input[type='submit'].primary, button.secondary, input[type='submit'].secondary { - border: none; - font-size: inherit; +.secondary:hover { + background: rgba(255,255,255,0.05); } +/* Input Felder: Dunkel statt Weiß */ input[type='text'].large { width: 100%; - padding: 12px; - background: var(--background); - border: 1px solid var(--foreground); - border-radius: 16px; + padding: 14px; + background: #1a1a1a !important; + border: 1px solid var(--borders); + border-radius: 4px; font-size: 14px; -} - -.fullwidth { - display: block; - width: 100%; + color: var(--foreground); box-sizing: border-box; + margin-bottom: 10px; } -.LoadServerPolicyView { - display: flex; +.footer { + padding: 2rem; + color: var(--grey); + text-align: center; + font-size: 12px; } -.LoadServerPolicyView .spinner { - width: 32px; - height: 32px; - margin-right: 12px; -} +.footer a { color: var(--grey); border-bottom: 1px solid transparent; } +.footer a:hover { color: var(--foreground); border-bottom-color: var(--ztfr-purple); } -.LoadServerPolicyView h2 { - margin-top: 0; +.hidden { display: none !important; } + +@media screen and (max-width: 480px) { + body { padding: 0; background-color: var(--background); } + .card { border-radius: unset; box-shadow: unset; border-left: none; } }