/* CSS Document */ /* Seiten-Hintergrund liegt auf , nicht auf . Dadurch kann der animierte Mandala-Layer (#mandala-field, z-index:-1, Kind von ) VOR dem Hintergrund und HINTER dem Inhalt gerendert werden – ein opaker body-Hintergrund würde ihn sonst komplett verdecken. */ html{ /* Seiten-Hintergrund: dunkles Grau (nicht ganz schwarz). Darüber liegt der Sternenhimmel-Layer (#starfield-bg, z-index:-2) mit Konstellationslinien und der Mandala-Layer (#mandala-field, -1); beide sind transparent, sodass dieses Grau durchscheint. (Früher: Streifenmuster.) */ background-color: var(--main-bg-color); } body{ background-color: transparent; color: var(--main-color); } h1 { color: #fff; } #topline{ background-color: var(--topline-bg-color); color: var(--topline-color); & a { color: var(--topline-a-color); } & a:hover { color: var(--topline-a-hover-color); } } #top{ background-color: var(--top-bg-color); color: var(--top-a-color); } #nav{ background-color: var(--nav-bg-color); color: var(--nav-color); box-shadow: 0 15px 20px -10px rgba(5,0,9,1.00); margin-bottom: 1rem; & a { color: var(--top-a-color); } } #nav a > div:hover{ color: var(--nav-hover-color); } #nav a > div{ hyphens: none; text-align: left; transition: 0.5s ease; } #main{ } #left{ color: var(--left-color); } #mid{ color: var(--mid-color); } #right{ color: var(--right-color); } #bottom{ background-color: var(--bottom-bg-color); color: var(--bottom-color); margin-top: var(--main-margin); } a { color: var(--main-color); } p a { color: var(--a-color); } #languages *{ color:white; background-color: var(--languages-bg); } #languages *:hover { color:white; background-color: var(--languages-bg); } .box { background-color: var(--top-bg-color); } button, .btn { padding: 0.5rem 1rem; background-color: var(--button-bg-color); color: var(--button-text-color); border: none; cursor: pointer; font-family: inherit; font-size: inherit; line-height: normal; } .btn-red { padding: 0.5rem 1rem; background-color:brown; color: var(--button-text-color); border: none; cursor: pointer; } .btn-yellow { padding: 0.5rem 1rem; background-color: var(--button-bg-yellow-color); color: var(--button-text-color); border: none; cursor: pointer; } .notice { background-color: var(--notice-bg-color); color: var(--notice-text-color); } .notice.ok { background-color: #1a3d2a; color: #2a9d5c; } .notice.err { background-color: #3d1a1a; color: #e05252; } .notice.warn { background-color: #2a2200; color: #e07b00; } .btn-muted { background-color: #444; } .text-ok { color: #2a9d5c; } .text-warn { color: #e07b00; } .data-table { width: 100%; border-collapse: collapse; } .data-table th, .data-table td { padding: .4rem .6rem; border-bottom: 1px solid #3335; text-align: left; } .data-table thead th { font-weight: bold; } .data-table tbody tr:hover { background: rgba(255,255,255,0.04); } .log-ok { color: #2a9d5c; } .log-err { color: #e05252; }