Update main.css
This commit is contained in:
Dome
+75
-162
@@ -1,17 +1,6 @@
|
|||||||
/*
|
/*
|
||||||
Copyright 2020 The Matrix.org Foundation C.I.C.
|
Copyright 2020 The Matrix.org Foundation C.I.C.
|
||||||
|
Modified 2026 for Zeitfresser Matrix Community Look
|
||||||
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.
|
|
||||||
*/
|
*/
|
||||||
|
|
||||||
@import url('spinner.css');
|
@import url('spinner.css');
|
||||||
@@ -21,56 +10,49 @@ limitations under the License.
|
|||||||
@import url('open.css');
|
@import url('open.css');
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
--app-background: #1e1f29; /* Hintergrund der Seite */
|
--app-background: #1e1f29; /* Tief-Anthrazit der Webseite */
|
||||||
--background: #282a36; /* Hintergrund der Card/Kachel */
|
--background: #282a36; /* Hintergrund der Card */
|
||||||
--foreground: #f7f7fa; /* Haupt-Textfarbe */
|
--foreground: #f7f7fa; /* Reines Highlight-Weiß */
|
||||||
--font: #f7f7fa;
|
--font: #bdc3c7; /* Fließtext-Grau */
|
||||||
--sub-text: #bdc3c7; /* Für Beschreibungen */
|
--grey: #64748b; /* Dunkles Grau für Identifier */
|
||||||
--accent: #0dbd8b; /* Matrix Green */
|
--accent: #0dbd8b; /* Matrix-Green */
|
||||||
--link: #f7f7fa; /* Links weiß wie im Entwurf */
|
--ztfr-purple: #bd93f9; /* Das Zeitfresser-Lila Akzent */
|
||||||
|
--error: #ff5555;
|
||||||
|
--link: #f7f7fa;
|
||||||
--borders: #2f313d;
|
--borders: #2f313d;
|
||||||
--lightgrey: #383a59;
|
--lightgrey: #383a59;
|
||||||
--error: #ff5555;
|
|
||||||
--spinner-stroke-size: 2px;
|
--spinner-stroke-size: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
html {
|
html {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background-color: var(--app-background);
|
background-color: var(--app-background);
|
||||||
/* Das Standard-Hintergrundbild entfernen für den cleanen Look */
|
background-image: none !important; /* Entfernt das Standard-Muster */
|
||||||
background-image: none;
|
|
||||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||||
color: var(--font);
|
color: var(--font);
|
||||||
|
padding: 80px 20px 0 20px;
|
||||||
|
margin: 0;
|
||||||
|
min-height: 100vh;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 60px 20px;
|
|
||||||
margin: 0;
|
|
||||||
height: auto;
|
|
||||||
min-height: 100vh;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
noscript {
|
h1, h2, h3 {
|
||||||
display: block;
|
color: var(--foreground);
|
||||||
padding: 20px;
|
letter-spacing: -0.5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
p { line-height: 150%; }
|
p { line-height: 1.7; }
|
||||||
a { text-decoration: none; }
|
a { text-decoration: none; color: var(--link); }
|
||||||
|
|
||||||
h1 { font-size: 24px; }
|
body, button, input, textarea {
|
||||||
h2 { font-size: 21px; }
|
font-size: 14px;
|
||||||
h3 { font-size: 16px; }
|
|
||||||
|
|
||||||
body,
|
|
||||||
button,
|
|
||||||
input,
|
|
||||||
textarea {
|
|
||||||
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
|
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -78,13 +60,14 @@ button, input[type=submit] {
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
button, input {
|
/* Die zentrale Kachel */
|
||||||
font-size: inherit;
|
.card {
|
||||||
font-weight: inherit;
|
background-color: var(--background);
|
||||||
}
|
border-radius: 4px; /* Eckig wie die Room-Cards */
|
||||||
|
border-left: 4px solid var(--ztfr-purple);
|
||||||
input[type="checkbox"], input[type="radio"] {
|
box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.3);
|
||||||
margin: 0 8px 0 0;
|
padding: 2.5rem;
|
||||||
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
.RootView {
|
.RootView {
|
||||||
@@ -93,138 +76,68 @@ input[type="checkbox"], input[type="radio"] {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card {
|
/* Buttons: Eckig & Kontrastreich */
|
||||||
background-color: var(--background);
|
.primary, .secondary {
|
||||||
border-radius: 4px; /* Eckig wie in deinem Entwurf */
|
text-decoration: none;
|
||||||
border-left: 4px solid #bd93f9; /* Der lila Akzent-Strich vom Hover-Effekt */
|
font-weight: bold;
|
||||||
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
|
text-align: center;
|
||||||
padding: 2rem;
|
padding: 14px 20px;
|
||||||
max-width: 480px;
|
margin: 12px 0;
|
||||||
width: 100%;
|
display: block;
|
||||||
}
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 1px;
|
||||||
.card, .footer {
|
transition: all 0.2s ease;
|
||||||
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;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.primary {
|
.primary {
|
||||||
background-color: var(--font) !important; /* Weißer Hintergrund */
|
background: var(--foreground);
|
||||||
color: var(--app-background) !important; /* Dunkler Text */
|
color: var(--app-background) !important;
|
||||||
border-radius: 4px !important;
|
border-radius: 4px;
|
||||||
text-transform: uppercase;
|
border: none;
|
||||||
letter-spacing: 1px;
|
}
|
||||||
font-weight: 600;
|
|
||||||
|
.primary:hover {
|
||||||
|
filter: brightness(0.9);
|
||||||
|
transform: translateY(-2px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.secondary {
|
.secondary {
|
||||||
background: transparent !important;
|
background: transparent;
|
||||||
border: 1px solid var(--font) !important;
|
color: var(--foreground);
|
||||||
color: var(--font) !important;
|
border: 1px solid var(--foreground);
|
||||||
border-radius: 4px !important;
|
border-radius: 4px;
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 1px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.primary {
|
.secondary:hover {
|
||||||
background: var(--link);
|
background: rgba(255,255,255,0.05);
|
||||||
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;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Input Felder: Dunkel statt Weiß */
|
||||||
input[type='text'].large {
|
input[type='text'].large {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 12px;
|
padding: 14px;
|
||||||
background: var(--background);
|
background: #1a1a1a !important;
|
||||||
border: 1px solid var(--foreground);
|
border: 1px solid var(--borders);
|
||||||
border-radius: 16px;
|
border-radius: 4px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
color: var(--foreground);
|
||||||
|
|
||||||
.fullwidth {
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.LoadServerPolicyView {
|
.footer {
|
||||||
display: flex;
|
padding: 2rem;
|
||||||
|
color: var(--grey);
|
||||||
|
text-align: center;
|
||||||
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.LoadServerPolicyView .spinner {
|
.footer a { color: var(--grey); border-bottom: 1px solid transparent; }
|
||||||
width: 32px;
|
.footer a:hover { color: var(--foreground); border-bottom-color: var(--ztfr-purple); }
|
||||||
height: 32px;
|
|
||||||
margin-right: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.LoadServerPolicyView h2 {
|
.hidden { display: none !important; }
|
||||||
margin-top: 0;
|
|
||||||
|
@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