Test custom.css
This commit is contained in:
+163
-144
@@ -2,6 +2,8 @@ html,
|
||||
body,
|
||||
#page_container {
|
||||
color: #ecf8ff !important;
|
||||
background-size: cover !important;
|
||||
background-attachment: fixed !important;
|
||||
}
|
||||
|
||||
/* =========================
|
||||
@@ -9,16 +11,15 @@ body,
|
||||
========================= */
|
||||
div[data-name],
|
||||
section {
|
||||
margin-bottom: 26px !important;
|
||||
margin-bottom: 24px !important;
|
||||
padding: 14px 14px 18px 14px !important;
|
||||
border-radius: 18px !important;
|
||||
background: rgba(10, 17, 28, 0.42) !important;
|
||||
border: 1px solid rgba(72, 202, 228, 0.10) !important;
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
background: rgba(10, 17, 28, 0.38) !important;
|
||||
border: 1px solid rgba(72, 202, 228, 0.08) !important;
|
||||
backdrop-filter: blur(8px);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
/* Gruppentitel */
|
||||
div[data-name] h2,
|
||||
section h2,
|
||||
h2 {
|
||||
@@ -26,6 +27,7 @@ h2 {
|
||||
letter-spacing: 0.2px !important;
|
||||
color: #eaf7ff !important;
|
||||
margin-bottom: 14px !important;
|
||||
text-shadow: 0 1px 8px rgba(0, 0, 0, 0.18);
|
||||
}
|
||||
|
||||
/* =========================
|
||||
@@ -36,20 +38,19 @@ h2 {
|
||||
.widget-card,
|
||||
div[class*="service_"],
|
||||
div[class*="bookmark_"] {
|
||||
min-height: 94px !important;
|
||||
min-height: 92px !important;
|
||||
border-radius: 16px !important;
|
||||
border: 1px solid rgba(0, 180, 216, 0.14) !important;
|
||||
border: 1px solid rgba(0, 180, 216, 0.13) !important;
|
||||
background:
|
||||
radial-gradient(circle at top left, rgba(90, 170, 255, 0.08), transparent 40%),
|
||||
linear-gradient(180deg, rgba(18, 28, 45, 0.80), rgba(10, 17, 30, 0.90)) !important;
|
||||
radial-gradient(circle at top left, rgba(90, 170, 255, 0.07), transparent 38%),
|
||||
linear-gradient(180deg, rgba(18, 28, 45, 0.78), rgba(10, 17, 30, 0.90)) !important;
|
||||
box-shadow:
|
||||
0 8px 22px rgba(0, 0, 0, 0.34),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
|
||||
0 8px 20px rgba(0, 0, 0, 0.32),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.025) !important;
|
||||
transition:
|
||||
transform 0.2s ease,
|
||||
border-color 0.2s ease,
|
||||
box-shadow 0.2s ease,
|
||||
background 0.2s ease !important;
|
||||
transform 0.18s ease,
|
||||
border-color 0.18s ease,
|
||||
box-shadow 0.18s ease !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
@@ -59,10 +60,31 @@ div[class*="bookmark_"] {
|
||||
div[class*="service_"]:hover,
|
||||
div[class*="bookmark_"]:hover {
|
||||
transform: translateY(-2px);
|
||||
border-color: rgba(72, 202, 228, 0.30) !important;
|
||||
border-color: rgba(72, 202, 228, 0.24) !important;
|
||||
box-shadow:
|
||||
0 12px 26px rgba(0, 0, 0, 0.38),
|
||||
0 0 0 1px rgba(72, 202, 228, 0.05) inset !important;
|
||||
0 11px 24px rgba(0, 0, 0, 0.36),
|
||||
0 0 0 1px rgba(72, 202, 228, 0.04) inset !important;
|
||||
}
|
||||
|
||||
/* =========================
|
||||
CORE CARDS OBEN
|
||||
nur leicht hervorgehoben
|
||||
========================= */
|
||||
div[data-name="🖥️ Infrastruktur"] .service-card:nth-of-type(1),
|
||||
div[data-name="🖥️ Infrastruktur"] .service-card:nth-of-type(2),
|
||||
div[data-name="🖥️ Infrastruktur"] .service-card:nth-of-type(3),
|
||||
div[data-name="🖥️ Infrastruktur"] .service-card:nth-of-type(4),
|
||||
div[data-name="🖥️ Infrastruktur"] div[class*="service_"]:nth-of-type(1),
|
||||
div[data-name="🖥️ Infrastruktur"] div[class*="service_"]:nth-of-type(2),
|
||||
div[data-name="🖥️ Infrastruktur"] div[class*="service_"]:nth-of-type(3),
|
||||
div[data-name="🖥️ Infrastruktur"] div[class*="service_"]:nth-of-type(4) {
|
||||
background:
|
||||
radial-gradient(circle at top left, rgba(72, 202, 228, 0.10), transparent 40%),
|
||||
linear-gradient(180deg, rgba(20, 32, 55, 0.84), rgba(10, 18, 35, 0.94)) !important;
|
||||
border-color: rgba(72, 202, 228, 0.18) !important;
|
||||
box-shadow:
|
||||
0 10px 24px rgba(0, 0, 0, 0.36),
|
||||
0 0 0 1px rgba(72, 202, 228, 0.04) inset !important;
|
||||
}
|
||||
|
||||
/* =========================
|
||||
@@ -102,7 +124,7 @@ div[class*="service_"] a > div {
|
||||
.widget-card h3,
|
||||
div[class*="service_"] h3,
|
||||
div[class*="bookmark_"] h3 {
|
||||
font-size: 0.98rem !important;
|
||||
font-size: 0.97rem !important;
|
||||
font-weight: 700 !important;
|
||||
line-height: 1.2 !important;
|
||||
margin-bottom: 5px !important;
|
||||
@@ -114,7 +136,7 @@ div[class*="bookmark_"] h3 {
|
||||
.widget-card p,
|
||||
div[class*="service_"] p,
|
||||
div[class*="bookmark_"] p {
|
||||
font-size: 0.87rem !important;
|
||||
font-size: 0.86rem !important;
|
||||
line-height: 1.3 !important;
|
||||
color: #9fb3c8 !important;
|
||||
margin: 0 !important;
|
||||
@@ -139,44 +161,15 @@ div[class*="service_"] svg {
|
||||
.bookmark svg,
|
||||
div[class*="bookmark_"] img,
|
||||
div[class*="bookmark_"] svg {
|
||||
width: 19px !important;
|
||||
height: 19px !important;
|
||||
width: 18px !important;
|
||||
height: 18px !important;
|
||||
object-fit: contain !important;
|
||||
flex-shrink: 0 !important;
|
||||
opacity: 0.95 !important;
|
||||
}
|
||||
|
||||
/* =========================
|
||||
BOOKMARK / DOC SECTIONS
|
||||
kompakter und ruhiger
|
||||
========================= */
|
||||
.bookmark,
|
||||
div[class*="bookmark_"] {
|
||||
min-height: 74px !important;
|
||||
border-radius: 15px !important;
|
||||
}
|
||||
|
||||
.bookmark > a,
|
||||
div[class*="bookmark_"] > a {
|
||||
align-items: center !important;
|
||||
gap: 12px !important;
|
||||
padding: 13px 14px !important;
|
||||
}
|
||||
|
||||
.bookmark h3,
|
||||
div[class*="bookmark_"] h3 {
|
||||
font-size: 0.93rem !important;
|
||||
margin-bottom: 2px !important;
|
||||
}
|
||||
|
||||
.bookmark p,
|
||||
div[class*="bookmark_"] p {
|
||||
font-size: 0.82rem !important;
|
||||
color: #a9bbcd !important;
|
||||
}
|
||||
|
||||
/* =========================
|
||||
METRICS / WIDGET CONTENT
|
||||
WIDGET / METRICS
|
||||
========================= */
|
||||
[class*="widget"] [class*="value"],
|
||||
[class*="widget"] [class*="metric"],
|
||||
@@ -196,13 +189,92 @@ div[class*="bookmark_"] p {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
/* Zahlen/Metriken unten optisch ruhiger */
|
||||
.service-card [class*="grid"],
|
||||
.widget-card [class*="grid"],
|
||||
div[class*="service_"] [class*="grid"] {
|
||||
gap: 8px !important;
|
||||
}
|
||||
|
||||
/* =========================
|
||||
MONITORING leicht lebendiger
|
||||
========================= */
|
||||
div[data-name="📊 Monitoring"] .service-card,
|
||||
div[data-name="📊 Monitoring"] div[class*="service_"] {
|
||||
background:
|
||||
radial-gradient(circle at top left, rgba(110, 180, 255, 0.08), transparent 36%),
|
||||
linear-gradient(180deg, rgba(17, 28, 48, 0.82), rgba(10, 17, 30, 0.92)) !important;
|
||||
}
|
||||
|
||||
/* =========================
|
||||
MEDIEN leichte Balance
|
||||
========================= */
|
||||
div[data-name="🎬 Medien"] .service-card:first-of-type,
|
||||
div[data-name="🎬 Medien"] div[class*="service_"]:first-of-type {
|
||||
border-color: rgba(72, 202, 228, 0.18) !important;
|
||||
}
|
||||
|
||||
/* =========================
|
||||
BACKENDS ruhiger
|
||||
========================= */
|
||||
div[data-name="🗄️ Daten & Backends"] .service-card,
|
||||
div[data-name="🗄️ Daten & Backends"] div[class*="service_"] {
|
||||
min-height: 82px !important;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(17, 26, 43, 0.74), rgba(10, 17, 30, 0.84)) !important;
|
||||
border-color: rgba(255, 255, 255, 0.07) !important;
|
||||
}
|
||||
|
||||
div[data-name="🗄️ Daten & Backends"] .service-card h3,
|
||||
div[data-name="🗄️ Daten & Backends"] div[class*="service_"] h3 {
|
||||
font-size: 0.94rem !important;
|
||||
}
|
||||
|
||||
div[data-name="🗄️ Daten & Backends"] .service-card p,
|
||||
div[data-name="🗄️ Daten & Backends"] div[class*="service_"] p {
|
||||
font-size: 0.82rem !important;
|
||||
color: #9eb2c8 !important;
|
||||
}
|
||||
|
||||
/* =========================
|
||||
BOOKMARK / DOC SECTIONS
|
||||
========================= */
|
||||
.bookmark,
|
||||
div[class*="bookmark_"] {
|
||||
min-height: 70px !important;
|
||||
border-radius: 15px !important;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(17, 26, 43, 0.64), rgba(10, 17, 30, 0.74)) !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.055) !important;
|
||||
box-shadow:
|
||||
0 6px 16px rgba(0, 0, 0, 0.22),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.02) !important;
|
||||
}
|
||||
|
||||
.bookmark > a,
|
||||
div[class*="bookmark_"] > a {
|
||||
align-items: center !important;
|
||||
gap: 12px !important;
|
||||
padding: 12px 14px !important;
|
||||
}
|
||||
|
||||
.bookmark h3,
|
||||
div[class*="bookmark_"] h3 {
|
||||
font-size: 0.92rem !important;
|
||||
margin-bottom: 2px !important;
|
||||
}
|
||||
|
||||
.bookmark p,
|
||||
div[class*="bookmark_"] p {
|
||||
font-size: 0.80rem !important;
|
||||
color: #a9bbcd !important;
|
||||
}
|
||||
|
||||
.bookmark:hover,
|
||||
div[class*="bookmark_"]:hover {
|
||||
transform: translateY(-1px);
|
||||
border-color: rgba(72, 202, 228, 0.20) !important;
|
||||
}
|
||||
|
||||
/* =========================
|
||||
SEARCH
|
||||
========================= */
|
||||
@@ -214,21 +286,27 @@ input[type="text"] {
|
||||
border-radius: 12px !important;
|
||||
color: #ecf8ff !important;
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
|
||||
backdrop-filter: blur(8px);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
input::placeholder,
|
||||
.search-input::placeholder {
|
||||
color: rgba(220, 235, 248, 0.46) !important;
|
||||
}
|
||||
|
||||
input:focus,
|
||||
.search-input:focus,
|
||||
input[type="text"]:focus {
|
||||
outline: none !important;
|
||||
border-color: rgba(72, 202, 228, 0.28) !important;
|
||||
border-color: rgba(72, 202, 228, 0.24) !important;
|
||||
box-shadow:
|
||||
0 0 0 3px rgba(72, 202, 228, 0.08),
|
||||
0 0 0 3px rgba(72, 202, 228, 0.07),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
|
||||
}
|
||||
|
||||
/* =========================
|
||||
ERROR / WARNING STATES
|
||||
weniger brutal als vorher
|
||||
========================= */
|
||||
[class*="error"],
|
||||
[class*="Error"],
|
||||
@@ -238,16 +316,17 @@ input[type="text"]:focus {
|
||||
.bg-rose-600 {
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(120, 18, 52, 0.78),
|
||||
rgba(92, 12, 40, 0.78)
|
||||
rgba(120, 18, 52, 0.72),
|
||||
rgba(92, 12, 40, 0.72)
|
||||
) !important;
|
||||
border: 1px solid rgba(255, 70, 120, 0.26) !important;
|
||||
border-left: 3px solid rgba(255, 85, 128, 0.55) !important;
|
||||
border: 1px solid rgba(255, 70, 120, 0.22) !important;
|
||||
border-left: 2px solid rgba(255, 85, 128, 0.45) !important;
|
||||
border-radius: 10px !important;
|
||||
color: #ffd5df !important;
|
||||
padding: 6px 10px !important;
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
|
||||
}
|
||||
|
||||
/* Fehlertexte in Balken */
|
||||
[class*="error"] *,
|
||||
[class*="Error"] * {
|
||||
color: #ffd5df !important;
|
||||
@@ -259,6 +338,7 @@ input[type="text"]:focus {
|
||||
[class*="status"],
|
||||
[class*="badge"] {
|
||||
border-radius: 999px !important;
|
||||
opacity: 0.92 !important;
|
||||
}
|
||||
|
||||
/* =========================
|
||||
@@ -283,6 +363,15 @@ summary {
|
||||
opacity: 0.92 !important;
|
||||
}
|
||||
|
||||
/* =========================
|
||||
FOOTER / SMALL TEXT
|
||||
========================= */
|
||||
footer,
|
||||
small,
|
||||
.text-xs {
|
||||
color: rgba(225, 239, 250, 0.68) !important;
|
||||
}
|
||||
|
||||
/* =========================
|
||||
SCROLLBAR
|
||||
========================= */
|
||||
@@ -307,6 +396,18 @@ summary {
|
||||
/* =========================
|
||||
MOBILE / SMALLER WIDTH
|
||||
========================= */
|
||||
@media (max-width: 1200px) {
|
||||
.bookmark,
|
||||
div[class*="bookmark_"] {
|
||||
min-height: 64px !important;
|
||||
}
|
||||
|
||||
div[data-name="🗄️ Daten & Backends"] .service-card,
|
||||
div[data-name="🗄️ Daten & Backends"] div[class*="service_"] {
|
||||
min-height: 78px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
div[data-name],
|
||||
section {
|
||||
@@ -345,86 +446,4 @@ summary {
|
||||
div[class*="bookmark_"] p {
|
||||
font-size: 0.81rem !important;
|
||||
}
|
||||
}
|
||||
/* =========================
|
||||
HERO-LAYER (optische Priorität)
|
||||
========================= */
|
||||
|
||||
/* Erste 4 Services optisch hervorheben */
|
||||
div[data-name="🖥️ Infrastruktur"] .service-card:nth-child(-n+4) {
|
||||
background:
|
||||
radial-gradient(circle at top left, rgba(72, 202, 228, 0.12), transparent 40%),
|
||||
linear-gradient(180deg, rgba(20, 32, 55, 0.9), rgba(10, 18, 35, 0.95)) !important;
|
||||
border: 1px solid rgba(72, 202, 228, 0.25) !important;
|
||||
box-shadow:
|
||||
0 10px 30px rgba(0,0,0,0.45),
|
||||
0 0 0 1px rgba(72, 202, 228, 0.08) inset !important;
|
||||
}
|
||||
|
||||
/* =========================
|
||||
ERROR ULTRA CLEAN (kein Banner mehr)
|
||||
========================= */
|
||||
|
||||
[class*="error"],
|
||||
[class*="Error"],
|
||||
.bg-red-500,
|
||||
.bg-rose-500,
|
||||
.bg-red-600,
|
||||
.bg-rose-600 {
|
||||
background: rgba(255, 80, 120, 0.12) !important;
|
||||
border: 1px solid rgba(255, 80, 120, 0.25) !important;
|
||||
border-left: 2px solid rgba(255, 80, 120, 0.5) !important;
|
||||
color: #ffb3c7 !important;
|
||||
font-size: 0.85rem !important;
|
||||
padding: 6px 10px !important;
|
||||
border-radius: 10px !important;
|
||||
}
|
||||
|
||||
/* =========================
|
||||
DOKU / TOOLBOX LOOK
|
||||
========================= */
|
||||
|
||||
.bookmark,
|
||||
div[class*="bookmark_"] {
|
||||
background:
|
||||
linear-gradient(180deg, rgba(18, 28, 45, 0.65), rgba(10, 17, 30, 0.75)) !important;
|
||||
border: 1px solid rgba(255,255,255,0.06) !important;
|
||||
}
|
||||
|
||||
.bookmark:hover,
|
||||
div[class*="bookmark_"]:hover {
|
||||
border-color: rgba(72, 202, 228, 0.25) !important;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
/* =========================
|
||||
MEDIA SECTION BALANCE
|
||||
========================= */
|
||||
|
||||
/* Immich leicht hervorheben */
|
||||
div[data-name="🎬 Medien"] .service-card:first-child {
|
||||
border-color: rgba(72, 202, 228, 0.25) !important;
|
||||
background:
|
||||
radial-gradient(circle at top left, rgba(72, 202, 228, 0.1), transparent 40%),
|
||||
linear-gradient(180deg, rgba(18, 28, 45, 0.85), rgba(10, 17, 30, 0.95)) !important;
|
||||
}
|
||||
|
||||
/* Plex Error weniger dominant */
|
||||
div[data-name="🎬 Medien"] .service-card:nth-child(2) {
|
||||
opacity: 0.92;
|
||||
}
|
||||
|
||||
/* =========================
|
||||
MICRO-POLISH
|
||||
========================= */
|
||||
|
||||
/* Status dots dezenter */
|
||||
[class*="status"] {
|
||||
transform: scale(0.85);
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
/* mehr Luft zwischen Reihen */
|
||||
div[class*="services"] {
|
||||
gap: 16px !important;
|
||||
}
|
||||
Reference in New Issue
Block a user