 Das HammWiki wünscht allen Nutzern ein frohes Weihnachstfest und ein erfolgreiches und vor allem gesundes Jahr 2026
|
Vorlage:Hauptseite/style.css: Unterschied zwischen den Versionen
RaWen (Diskussion | Beiträge) K Änderung 276361 von RaWen (Diskussion) rückgängig gemacht. Markierung: Rückgängigmachung |
RaWen (Diskussion | Beiträge) KKeine Bearbeitungszusammenfassung |
||
| (6 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
| Zeile 24: | Zeile 24: | ||
} | } | ||
/* Grid (2 Spalten) */ | /* Grid (responsive, 2 Spalten) */ | ||
.content-grid { | .content-grid { | ||
display: grid; | display: grid; | ||
grid-template-columns: repeat( | grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); | ||
gap: 1.25rem; | gap: 1.25rem; | ||
width: 100%; | |||
overflow: visible; | overflow: visible; | ||
box-sizing: border-box; | box-sizing: border-box; | ||
} | } | ||
| Zeile 45: | Zeile 44: | ||
display: inline-block; | display: inline-block; | ||
margin-bottom: 1.5rem; | margin-bottom: 1.5rem; | ||
transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), border-color 0.3s ease-in; | |||
transition: | |||
transform-origin: center; | transform-origin: center; | ||
} | } | ||
| Zeile 52: | Zeile 50: | ||
@media screen and (min-width: 769px) { | @media screen and (min-width: 769px) { | ||
.content-box:hover { | .content-box:hover { | ||
transform: scale(1. | transform: scale(1.0125); | ||
transition: transform 0.5s ease-in; | transition: transform 0.5s ease-in; | ||
border-color: rgba(0,0,0,0.12); | border-color: rgba(0,0,0,0.12); | ||
} | } | ||
} | } | ||
/* Dark-Mode */ | /* Dark-Mode Hover-Border */ | ||
@media screen and (min-width: 769px) { | @media screen and (min-width: 769px) { | ||
html.skin-theme-clientpref-night .content-box:hover { | html.skin-theme-clientpref-night .content-box:hover { | ||
| Zeile 107: | Zeile 104: | ||
} | } | ||
.box-content p:last-child | .box-content p:last-child, | ||
.box-content p:last-of-type { | .box-content p:last-of-type { | ||
margin-bottom: 0; | margin-bottom: 0; | ||
| Zeile 124: | Zeile 118: | ||
background: #000; | background: #000; | ||
border-color: rgba(255,255,255,0.2); | border-color: rgba(255,255,255,0.2); | ||
box-shadow: 0 0.4rem 1.2rem rgba(0,0,0,0.6), | box-shadow: 0 0.4rem 1.2rem rgba(0,0,0,0.6), | ||
0 0.1rem 0.3rem rgba(0,0,0,0.4); | 0 0.1rem 0.3rem rgba(0,0,0,0.4); | ||
} | } | ||
| Zeile 133: | Zeile 127: | ||
background: #000; | background: #000; | ||
border-color: rgba(255,255,255,0.2); | border-color: rgba(255,255,255,0.2); | ||
box-shadow: 0 0.4rem 1.2rem rgba(0,0,0,0.6), | box-shadow: 0 0.4rem 1.2rem rgba(0,0,0,0.6), | ||
0 0.1rem 0.3rem rgba(0,0,0,0.4); | 0 0.1rem 0.3rem rgba(0,0,0,0.4); | ||
} | } | ||
| Zeile 203: | Zeile 197: | ||
@media screen { | @media screen { | ||
html.skin-theme-clientpref-night .photos img { | html.skin-theme-clientpref-night .photos img { | ||
box-shadow: 0 0.4rem 1.2rem rgba(0,0,0,0.7), | box-shadow: 0 0.4rem 1.2rem rgba(0,0,0,0.7), | ||
0 0.1rem 0.4rem rgba(0,0,0,0.5); | 0 0.1rem 0.4rem rgba(0,0,0,0.5); | ||
} | } | ||
| Zeile 210: | Zeile 204: | ||
@media screen and (prefers-color-scheme: dark) { | @media screen and (prefers-color-scheme: dark) { | ||
html.skin-theme-clientpref-os .photos img { | html.skin-theme-clientpref-os .photos img { | ||
box-shadow: 0 0.4rem 1.2rem rgba(0,0,0,0.7), | box-shadow: 0 0.4rem 1.2rem rgba(0,0,0,0.7), | ||
0 0.1rem 0.4rem rgba(0,0,0,0.5); | 0 0.1rem 0.4rem rgba(0,0,0,0.5); | ||
} | } | ||
| Zeile 314: | Zeile 308: | ||
width: 100%; | width: 100%; | ||
margin: 1rem 0 0; | margin: 1rem 0 0; | ||
} | |||
.main-register a, .main-register a:visited { | |||
color: white !important; | |||
text-decoration: none !important; | |||
} | |||
.main-register a:hover { | |||
color: white !important; | |||
} | } | ||
| Zeile 448: | Zeile 451: | ||
outline-color: #6bb6ff; | outline-color: #6bb6ff; | ||
} | } | ||
} | } | ||
/* Media Queries */ | /* Media Queries */ | ||
@media screen and (max-width: 900px) { | @media screen and (max-width: 900px) { | ||
.box-content { | .box-content { | ||
| Zeile 471: | Zeile 462: | ||
padding: 0 !important; | padding: 0 !important; | ||
} | } | ||
} | } | ||
| Zeile 477: | Zeile 467: | ||
.content-grid { | .content-grid { | ||
grid-template-columns: 1fr; | grid-template-columns: 1fr; | ||
max-width: | max-width: 100%; | ||
margin: 0 auto; | margin: 0 auto; | ||
} | } | ||
| Zeile 558: | Zeile 548: | ||
max-width: 80%; | max-width: 80%; | ||
margin: 0 auto; | margin: 0 auto; | ||
} | } | ||
} | } | ||