Test custom.css
This commit is contained in:
+343
-26
@@ -4,110 +4,427 @@ body,
|
||||
color: #ecf8ff !important;
|
||||
}
|
||||
|
||||
/* =========================
|
||||
GROUPS / SECTIONS
|
||||
========================= */
|
||||
div[data-name],
|
||||
section {
|
||||
margin-bottom: 22px !important;
|
||||
margin-bottom: 26px !important;
|
||||
padding: 14px 14px 18px 14px !important;
|
||||
border-radius: 18px !important;
|
||||
background: rgba(10, 17, 28, 0.45) !important;
|
||||
background: rgba(10, 17, 28, 0.42) !important;
|
||||
border: 1px solid rgba(72, 202, 228, 0.10) !important;
|
||||
backdrop-filter: blur(8px);
|
||||
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: 90px !important;
|
||||
border-radius: 14px !important;
|
||||
border: 1px solid rgba(0, 180, 216, 0.16) !important;
|
||||
background: linear-gradient(180deg, rgba(18, 28, 45, 0.78), rgba(10, 17, 30, 0.88)) !important;
|
||||
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35) !important;
|
||||
transition: all 0.2s ease !important;
|
||||
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.35) !important;
|
||||
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: 16px !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,
|
||||
div[class*="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: 1rem !important;
|
||||
font-size: 0.98rem !important;
|
||||
font-weight: 700 !important;
|
||||
margin-bottom: 6px !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.88rem !important;
|
||||
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: 28px !important;
|
||||
height: 28px !important;
|
||||
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: 20px !important;
|
||||
height: 20px !important;
|
||||
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 {
|
||||
background: rgba(18, 24, 35, 0.8) !important;
|
||||
.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;
|
||||
}
|
||||
|
||||
[class*="error"] {
|
||||
background: rgba(127, 17, 17, 0.35) !important;
|
||||
border-left: 3px solid rgba(239, 68, 68, 0.6) !important;
|
||||
color: #fecaca !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.3);
|
||||
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;
|
||||
}
|
||||
Reference in New Issue
Block a user