Micha/homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Test custom.css

Browse Source
This commit is contained in:
Micha
2026-03-20 19:29:15 +01:00
parent afde626746
commit 20d66ed811
5 changed files with 6668 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files
custom.css
+343 -26
View File
@@ -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;
}
ervices.yaml widgets.yaml
+122
View File
@@ -0,0 +1,122 @@
diff --git a/services.yaml b/services.yaml
index b859480..d436001 100755
--- a/services.yaml
+++ b/services.yaml
@@ -110,7 +110,7 @@
container: Glances
widget:
type: glances
- url: http://kallilabcore.local:61208
+ url: http://192.168.178.58:61208
version: 4
metric: info

@@ -124,35 +124,30 @@

- Scrutiny:
icon: scrutiny.png
- href: http://kallilabcore.local:8080/web/dashboard
+ href: http://192.168.178.58:8080/web/dashboard
description: S.M.A.R.T.-Monitoring für Festplatten
server: my-docker
container: scrutiny
widget:
type: scrutiny
- url: http://kallilabcore.local:8080
+ url: http://192.168.178.58:8080

- Netdata:
icon: netdata.png
- href: http://kallilabcore.local:19999
+ href: http://192.168.178.58:19999
description: Echtzeit-Telemetrie für Host und Dienste
server: my-docker
container: netdata
widget:
type: netdata
- url: http://kallilabcore.local:19999
+ url: http://192.168.178.58:19999

- NetAlertX:
icon: netalertx.png
- href: http://kallilabcore.local:20211
+ href: http://192.168.178.58:20211
description: Netzwerkgeräte erkennen und überwachen
server: my-docker
container: netalertx
- widget:
- type: netalertx
- url: http://kallilabcore.local:20211
- key: YOUR_NETALERTX_API_TOKEN
- version: 2

- ntopng:
icon: si-ntop
@@ -164,27 +159,24 @@

- Gotify:
icon: gotify.png
- href: http://kallilabcore.local:8088
+ href: http://192.168.178.58:8088
description: Push-Benachrichtigungen für KalliLab
server: my-docker
container: gotify
- widget:
- type: gotify
- url: http://kallilabcore.local:8088
- key: YOUR_GOTIFY_CLIENT_TOKEN
-
+ 
- 🔒 Netzwerk & Sicherheit:
# DNS, Passwortmanagement, sichere Infrastruktur
- Pi-hole:
icon: pi-hole.png
- href: http://kallilabcore.local:8543/admin
+ href: http://kallilabcore.local:8543
description: Netzwerkweites DNS-Blocking
server: my-docker
container: binhex-official-pihole
widget:
type: pihole
- url: http://kallilabcore.local:8543
- key: YOUR_PIHOLE_API_KEY
+ url: http://192.168.178.58:8543
+ version: 6
+ key: kuchen123

- Unbound:
icon: unbound.png
@@ -218,8 +210,8 @@
container: paperless-ngx
widget:
type: paperlessngx
- url: http://kallilabcore.local:8000
- key: YOUR_PAPERLESS_API_TOKEN
+ url: http://192.168.178.58:8000
+ key: 65aa6948d2a6f3ef3d403a4a0d76891e7ae82cbe

- Paperless-AI:
icon: mdi-file-document-edit-outline
@@ -237,8 +229,8 @@
container: mealie
widget:
type: mealie
- url: http://kallilabcore.local:9935
- key: YOUR_MEALIE_API_KEY
+ url: http://192.168.178.58:9935
+ key: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJsb25nX3Rva2VuIjp0cnVlLCJpZCI6IjgxY2VmODBjLTMwZDAtNDM2OS04MjY4LWJkNTRhYmNjZmQ2MyIsIm5hbWUiOiJEYXNoYm9hcmQiLCJpbnRlZ3JhdGlvbl9pZCI6ImdlbmVyaWMiLCJleHAiOjE5MzE3MDM2NDJ9.tdUSLNqmU_uz1HkVgZhnudBnafbGs-pUeY4xqeogAwc
version: 2

- luckyBackup:
@@ -284,8 +276,9 @@
container: immich_server
widget:
type: immich
- url: http://kallilabcore.local:2283
- key: YOUR_IMMICH_API_KEY
+ url: http://192.168.178.58:2283
+ key: FjgVSrXUaHZ7cymFtd1adRpq2naz1nijTqjqxuvGbs
+ version: 2

- Stash:
icon: stash.png
logs/homepage.log
+6121
View File
File diff suppressed because it is too large Load Diff
services.yaml
+81 -80
View File
@@ -1,5 +1,6 @@
# KalliLab Homepage services.yaml
# Generated from kallilab_containers.json
# Bereinigt: Einrückungen korrigiert, Reihenfolge optimiert, bestehende Werte beibehalten
- 🖥️ Infrastruktur:
# Core platform & management
@@ -11,36 +12,17 @@
container: homepage
ping: true
- Code Server:
icon: vscode.png
href: https://code.kaleschke.info
description: Browserbasierte Entwicklungsumgebung
server: my-docker
container: code-server
ping: true
- Gitea:
icon: gitea.png
href: https://git.kaleschke.info
description: Git-Hosting und Projektverwaltung
server: my-docker
container: gitea
widget:
type: gitea
url: https://git.kaleschke.info
key: e0da0f8534d83d8445dd98deee1b35539c4cac01
- Portainer:
icon: portainer.png
href: https://kallilabcore.local:9443
description: Docker- und Stack-Management
server: my-docker
container: PortainerCE
widget:
type: portainer
url: https://192.168.178.58:9443
env: 1
key: ptr_OoyIiXDLUaCj5sbYzr3f2BmeBVgi+WVnZDyX1OOlvJo=
icon: portainer.png
href: https://kallilabcore.local:9443
description: Docker- und Stack-Management
server: my-docker
container: PortainerCE
widget:
type: portainer
url: https://192.168.178.58:9443
env: 1
key: ptr_OoyIiXDLUaCj5sbYzr3f2BmeBVgi+WVnZDyX1OOlvJo=
- Traefik:
icon: traefik.png
@@ -54,11 +36,24 @@
username: admin
password: ichwillcocacola
- DDNS Updater:
icon: sh-qdm12.png
description: DynDNS-Aktualisierung im Hintergrund
- Gitea:
icon: gitea.png
href: https://git.kaleschke.info
description: Git-Hosting und Projektverwaltung
server: my-docker
container: ddns-updater
container: gitea
widget:
type: gitea
url: https://git.kaleschke.info
key: e0da0f8534d83d8445dd98deee1b35539c4cac01
- Code Server:
icon: vscode.png
href: https://code.kaleschke.info
description: Browserbasierte Entwicklungsumgebung
server: my-docker
container: code-server
ping: true
- Tailscale:
icon: tailscale.png
@@ -66,7 +61,13 @@
description: Sichere Remote-Vernetzung
server: my-docker
container: Tailscale-Docker
- DDNS Updater:
icon: sh-qdm12.png
description: DynDNS-Aktualisierung im Hintergrund
server: my-docker
container: ddns-updater
- DIUN:
icon: docker.png
description: Benachrichtigt über neue Container-Images
@@ -92,15 +93,25 @@
- 📊 Monitoring:
# Observability, health & resource tracking
- Uptime Kuma:
icon: uptime-kuma.png
href: http://kallilabcore.local:3001
description: Service-Monitoring und Statusseiten
server: my-docker
container: UptimeKuma
widget:
type: uptimekuma
url: http://192.168.178.58:3001
slug: uk1_ITsgGkyd_fIWRUjkZ5V2QZI5Pd6N_rsCrvLeQ5mJ
icon: uptime-kuma.png
href: http://kallilabcore.local:3001
description: Service-Monitoring und Statusseiten
server: my-docker
container: UptimeKuma
widget:
type: uptimekuma
url: http://192.168.178.58:3001
slug: uk1_ITsgGkyd_fIWRUjkZ5V2QZI5Pd6N_rsCrvLeQ5mJ
- Netdata:
icon: netdata.png
href: http://192.168.178.58:19999
description: Echtzeit-Telemetrie für Host und Dienste
server: my-docker
container: netdata
widget:
type: netdata
url: http://192.168.178.58:19999
- Glances:
icon: glances.png
@@ -132,23 +143,6 @@
type: scrutiny
url: http://192.168.178.58:8080
- Netdata:
icon: netdata.png
href: http://192.168.178.58:19999
description: Echtzeit-Telemetrie für Host und Dienste
server: my-docker
container: netdata
widget:
type: netdata
url: http://192.168.178.58:19999
- NetAlertX:
icon: netalertx.png
href: http://192.168.178.58:20211
description: Netzwerkgeräte erkennen und überwachen
server: my-docker
container: netalertx
- ntopng:
icon: si-ntop
href: http://kallilabcore.local:3000
@@ -157,13 +151,20 @@
container: ntopng
ping: true
- NetAlertX:
icon: netalertx.png
href: http://192.168.178.58:20211
description: Netzwerkgeräte erkennen und überwachen
server: my-docker
container: netalertx
- Gotify:
icon: gotify.png
href: http://192.168.178.58:8088
description: Push-Benachrichtigungen für KalliLab
server: my-docker
container: gotify
- 🔒 Netzwerk & Sicherheit:
# DNS, Passwortmanagement, sichere Infrastruktur
- Pi-hole:
@@ -233,14 +234,6 @@
key: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJsb25nX3Rva2VuIjp0cnVlLCJpZCI6IjgxY2VmODBjLTMwZDAtNDM2OS04MjY4LWJkNTRhYmNjZmQ2MyIsIm5hbWUiOiJEYXNoYm9hcmQiLCJpbnRlZ3JhdGlvbl9pZCI6ImdlbmVyaWMiLCJleHAiOjE5MzE3MDM2NDJ9.tdUSLNqmU_uz1HkVgZhnudBnafbGs-pUeY4xqeogAwc
version: 2
- luckyBackup:
icon: mdi-backup-restore
href: http://kallilabcore.local:7675/vnc.html?autoconnect=true
description: GUI-Backupjobs via noVNC
server: my-docker
container: luckyBackup
ping: true
- Scanopy Server:
icon: mdi-scanner
href: http://kallilabcore.local:60072
@@ -255,19 +248,16 @@
server: my-docker
container: scanopy-daemon
- luckyBackup:
icon: mdi-backup-restore
href: http://kallilabcore.local:7675/vnc.html?autoconnect=true
description: GUI-Backupjobs via noVNC
server: my-docker
container: luckyBackup
ping: true
- 🎬 Medien:
# Medienserver, Fotos und Bibliotheken
- Plex:
icon: plex.png
href: http://kallilabcore.local:32400/web
description: Medienserver für Filme und Serien
server: my-docker
container: Plex-Media-Server
widget:
type: plex
url: http://kallilabcore.local:32400
key: YOUR_PLEX_TOKEN
- Immich:
icon: immich.png
href: http://kallilabcore.local:2283
@@ -280,6 +270,17 @@
key: FjgVSrXUaHZ7cymFtd1adRpq2naz1nijTqjqxuvGbs
version: 2
- Plex:
icon: plex.png
href: http://kallilabcore.local:32400/web
description: Medienserver für Filme und Serien
server: my-docker
container: Plex-Media-Server
widget:
type: plex
url: http://kallilabcore.local:32400
key: YOUR_PLEX_TOKEN
- Stash:
icon: stash.png
href: http://kallilabcore.local:6969
widgets.yaml
+1 -19
View File
@@ -13,15 +13,6 @@
network: true
refresh: 3000
- resources:
label: Storage
expanded: true
disk:
- /mnt/user
- /mnt/cache
- /mnt/disk1
refresh: 3000
- search:
provider: duckduckgo
focus: true
@@ -34,13 +25,4 @@
format:
dateStyle: medium
timeStyle: short
hourCycle: h23
- openweathermap:
label: Horstmar
latitude: YOUR_LATITUDE
longitude: YOUR_LONGITUDE
units: metric
provider: openweathermap
apiKey: YOUR_OPENWEATHERMAP_API_KEY
cache: 5
hourCycle: h23