449 lines
11 KiB
CSS
Executable File
449 lines
11 KiB
CSS
Executable File
html,
|
|
body,
|
|
#page_container {
|
|
color: #ecf8ff !important;
|
|
background-size: cover !important;
|
|
background-attachment: fixed !important;
|
|
}
|
|
|
|
/* =========================
|
|
GROUPS / SECTIONS
|
|
========================= */
|
|
div[data-name],
|
|
section {
|
|
margin-bottom: 24px !important;
|
|
padding: 14px 14px 18px 14px !important;
|
|
border-radius: 18px !important;
|
|
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);
|
|
}
|
|
|
|
div[data-name] h2,
|
|
section h2,
|
|
h2 {
|
|
font-weight: 700 !important;
|
|
letter-spacing: 0.2px !important;
|
|
color: #eaf7ff !important;
|
|
margin-bottom: 14px !important;
|
|
text-shadow: 0 1px 8px rgba(0, 0, 0, 0.18);
|
|
}
|
|
|
|
/* =========================
|
|
CARDS GENERAL
|
|
========================= */
|
|
.service-card,
|
|
.bookmark,
|
|
.widget-card,
|
|
div[class*="service_"],
|
|
div[class*="bookmark_"] {
|
|
min-height: 92px !important;
|
|
border-radius: 16px !important;
|
|
border: 1px solid rgba(0, 180, 216, 0.13) !important;
|
|
background:
|
|
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 20px rgba(0, 0, 0, 0.32),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.025) !important;
|
|
transition:
|
|
transform 0.18s ease,
|
|
border-color 0.18s ease,
|
|
box-shadow 0.18s 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.24) !important;
|
|
box-shadow:
|
|
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;
|
|
}
|
|
|
|
/* =========================
|
|
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.97rem !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.86rem !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: 18px !important;
|
|
height: 18px !important;
|
|
object-fit: contain !important;
|
|
flex-shrink: 0 !important;
|
|
opacity: 0.95 !important;
|
|
}
|
|
|
|
/* =========================
|
|
WIDGET / METRICS
|
|
========================= */
|
|
[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;
|
|
}
|
|
|
|
.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
|
|
========================= */
|
|
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;
|
|
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.24) !important;
|
|
box-shadow:
|
|
0 0 0 3px rgba(72, 202, 228, 0.07),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
|
|
}
|
|
|
|
/* =========================
|
|
ERROR / WARNING STATES
|
|
========================= */
|
|
[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.72),
|
|
rgba(92, 12, 40, 0.72)
|
|
) !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;
|
|
}
|
|
|
|
[class*="error"] *,
|
|
[class*="Error"] * {
|
|
color: #ffd5df !important;
|
|
}
|
|
|
|
/* =========================
|
|
STATUS DOTS / BADGES
|
|
========================= */
|
|
[class*="status"],
|
|
[class*="badge"] {
|
|
border-radius: 999px !important;
|
|
opacity: 0.92 !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;
|
|
}
|
|
|
|
/* =========================
|
|
FOOTER / SMALL TEXT
|
|
========================= */
|
|
footer,
|
|
small,
|
|
.text-xs {
|
|
color: rgba(225, 239, 250, 0.68) !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: 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 {
|
|
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;
|
|
}
|
|
} |