Update main.css
This commit is contained in:
Dome
+75
-162
@@ -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; }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user