430 lines
9.8 KiB
CSS
Executable File
430 lines
9.8 KiB
CSS
Executable File
html,
|
|
body,
|
|
#page_container {
|
|
color: #ecf8ff !important;
|
|
}
|
|
|
|
/* =========================
|
|
GROUPS / SECTIONS
|
|
========================= */
|
|
div[data-name],
|
|
section {
|
|
margin-bottom: 26px !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);
|
|
}
|
|
|
|
/* Gruppentitel */
|
|
div[data-name] h2,
|
|
section h2,
|
|
h2 {
|
|
font-weight: 700 !important;
|
|
letter-spacing: 0.2px !important;
|
|
color: #eaf7ff !important;
|
|
margin-bottom: 14px !important;
|
|
}
|
|
|
|
/* =========================
|
|
CARDS GENERAL
|
|
========================= */
|
|
.service-card,
|
|
.bookmark,
|
|
.widget-card,
|
|
div[class*="service_"],
|
|
div[class*="bookmark_"] {
|
|
min-height: 94px !important;
|
|
border-radius: 16px !important;
|
|
border: 1px solid rgba(0, 180, 216, 0.14) !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;
|
|
box-shadow:
|
|
0 8px 22px rgba(0, 0, 0, 0.34),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
|
|
transition:
|
|
transform 0.2s ease,
|
|
border-color 0.2s ease,
|
|
box-shadow 0.2s ease,
|
|
background 0.2s ease !important;
|
|
overflow: hidden !important;
|
|
}
|
|
|
|
.service-card:hover,
|
|
.bookmark:hover,
|
|
.widget-card:hover,
|
|
div[class*="service_"]:hover,
|
|
div[class*="bookmark_"]:hover {
|
|
transform: translateY(-2px);
|
|
border-color: rgba(72, 202, 228, 0.30) !important;
|
|
box-shadow:
|
|
0 12px 26px rgba(0, 0, 0, 0.38),
|
|
0 0 0 1px rgba(72, 202, 228, 0.05) inset !important;
|
|
}
|
|
|
|
/* =========================
|
|
LINKS / INNER CARD LAYOUT
|
|
========================= */
|
|
.service-card > a,
|
|
.bookmark > a,
|
|
.widget-card > a,
|
|
div[class*="service_"] > a,
|
|
div[class*="bookmark_"] > a {
|
|
display: flex !important;
|
|
align-items: flex-start !important;
|
|
gap: 14px !important;
|
|
padding: 15px 16px !important;
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
background: transparent !important;
|
|
text-decoration: none !important;
|
|
box-sizing: border-box !important;
|
|
}
|
|
|
|
.bookmark a > div,
|
|
.service-card a > div,
|
|
.widget-card a > div,
|
|
div[class*="bookmark_"] a > div,
|
|
div[class*="service_"] a > div {
|
|
background: transparent !important;
|
|
box-shadow: none !important;
|
|
border: none !important;
|
|
}
|
|
|
|
/* =========================
|
|
TITLES / TEXT
|
|
========================= */
|
|
.service-card h3,
|
|
.bookmark h3,
|
|
.widget-card h3,
|
|
div[class*="service_"] h3,
|
|
div[class*="bookmark_"] h3 {
|
|
font-size: 0.98rem !important;
|
|
font-weight: 700 !important;
|
|
line-height: 1.2 !important;
|
|
margin-bottom: 5px !important;
|
|
color: #f4fbff !important;
|
|
}
|
|
|
|
.service-card p,
|
|
.bookmark p,
|
|
.widget-card p,
|
|
div[class*="service_"] p,
|
|
div[class*="bookmark_"] p {
|
|
font-size: 0.87rem !important;
|
|
line-height: 1.3 !important;
|
|
color: #9fb3c8 !important;
|
|
margin: 0 !important;
|
|
}
|
|
|
|
/* =========================
|
|
ICONS
|
|
========================= */
|
|
.service-card img,
|
|
.service-card svg,
|
|
.widget-card img,
|
|
.widget-card svg,
|
|
div[class*="service_"] img,
|
|
div[class*="service_"] svg {
|
|
width: 27px !important;
|
|
height: 27px !important;
|
|
object-fit: contain !important;
|
|
flex-shrink: 0 !important;
|
|
}
|
|
|
|
.bookmark img,
|
|
.bookmark svg,
|
|
div[class*="bookmark_"] img,
|
|
div[class*="bookmark_"] svg {
|
|
width: 19px !important;
|
|
height: 19px !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
|
|
========================= */
|
|
[class*="widget"] [class*="value"],
|
|
[class*="widget"] [class*="metric"],
|
|
[class*="widget"] .text-xs,
|
|
[class*="widget"] .text-sm {
|
|
color: #edf8ff !important;
|
|
}
|
|
|
|
[class*="widget"] .text-xs,
|
|
[class*="widget"] .uppercase {
|
|
letter-spacing: 0.02em !important;
|
|
opacity: 0.88 !important;
|
|
}
|
|
|
|
[class*="widget"] strong,
|
|
[class*="widget"] b {
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
/* Zahlen/Metriken unten optisch ruhiger */
|
|
.service-card [class*="grid"],
|
|
.widget-card [class*="grid"],
|
|
div[class*="service_"] [class*="grid"] {
|
|
gap: 8px !important;
|
|
}
|
|
|
|
/* =========================
|
|
SEARCH
|
|
========================= */
|
|
input,
|
|
.search-input,
|
|
input[type="text"] {
|
|
background: rgba(18, 24, 35, 0.78) !important;
|
|
border: 1px solid rgba(255, 255, 255, 0.08) !important;
|
|
border-radius: 12px !important;
|
|
color: #ecf8ff !important;
|
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
|
|
}
|
|
|
|
input:focus,
|
|
.search-input:focus,
|
|
input[type="text"]:focus {
|
|
outline: none !important;
|
|
border-color: rgba(72, 202, 228, 0.28) !important;
|
|
box-shadow:
|
|
0 0 0 3px rgba(72, 202, 228, 0.08),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
|
|
}
|
|
|
|
/* =========================
|
|
ERROR / WARNING STATES
|
|
weniger brutal als vorher
|
|
========================= */
|
|
[class*="error"],
|
|
[class*="Error"],
|
|
.bg-red-500,
|
|
.bg-rose-500,
|
|
.bg-red-600,
|
|
.bg-rose-600 {
|
|
background: linear-gradient(
|
|
180deg,
|
|
rgba(120, 18, 52, 0.78),
|
|
rgba(92, 12, 40, 0.78)
|
|
) !important;
|
|
border: 1px solid rgba(255, 70, 120, 0.26) !important;
|
|
border-left: 3px solid rgba(255, 85, 128, 0.55) !important;
|
|
color: #ffd5df !important;
|
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
|
|
}
|
|
|
|
/* Fehlertexte in Balken */
|
|
[class*="error"] *,
|
|
[class*="Error"] * {
|
|
color: #ffd5df !important;
|
|
}
|
|
|
|
/* =========================
|
|
STATUS DOTS / BADGES
|
|
========================= */
|
|
[class*="status"],
|
|
[class*="badge"] {
|
|
border-radius: 999px !important;
|
|
}
|
|
|
|
/* =========================
|
|
SPACING INSIDE LAYOUT
|
|
========================= */
|
|
div[class*="services"],
|
|
div[class*="bookmarks"],
|
|
div[class*="widgets"] {
|
|
gap: 14px !important;
|
|
}
|
|
|
|
/* =========================
|
|
COLLAPSED / BACKEND GROUPS
|
|
========================= */
|
|
details,
|
|
summary {
|
|
color: #e7f6ff !important;
|
|
}
|
|
|
|
summary {
|
|
cursor: pointer !important;
|
|
opacity: 0.92 !important;
|
|
}
|
|
|
|
/* =========================
|
|
SCROLLBAR
|
|
========================= */
|
|
::-webkit-scrollbar {
|
|
width: 10px;
|
|
height: 10px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: rgba(0, 180, 216, 0.28);
|
|
border-radius: 999px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: rgba(0, 180, 216, 0.42);
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: rgba(255, 255, 255, 0.03);
|
|
}
|
|
|
|
/* =========================
|
|
MOBILE / SMALLER WIDTH
|
|
========================= */
|
|
@media (max-width: 900px) {
|
|
div[data-name],
|
|
section {
|
|
padding: 12px 12px 16px 12px !important;
|
|
margin-bottom: 18px !important;
|
|
}
|
|
|
|
.service-card,
|
|
.bookmark,
|
|
.widget-card,
|
|
div[class*="service_"],
|
|
div[class*="bookmark_"] {
|
|
min-height: 84px !important;
|
|
}
|
|
|
|
.service-card > a,
|
|
.bookmark > a,
|
|
.widget-card > a,
|
|
div[class*="service_"] > a,
|
|
div[class*="bookmark_"] > a {
|
|
padding: 13px 14px !important;
|
|
}
|
|
|
|
.service-card h3,
|
|
.bookmark h3,
|
|
.widget-card h3,
|
|
div[class*="service_"] h3,
|
|
div[class*="bookmark_"] h3 {
|
|
font-size: 0.93rem !important;
|
|
}
|
|
|
|
.service-card p,
|
|
.bookmark p,
|
|
.widget-card p,
|
|
div[class*="service_"] p,
|
|
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;
|
|
} |