201 lines
5.1 KiB
Markdown
201 lines
5.1 KiB
Markdown
<p align="center">
|
|
<a href="https://techniverse.net">
|
|
<img src="https://assets.techniverse.net/f1/git/graphics/repo-techniverse-logo.png" alt="Techniverse Community" height="70" />
|
|
</a>
|
|
</p>
|
|
|
|
<h1 align="center">Kutt Dark Mode CSS</h1>
|
|
|
|
<h4 align="center">
|
|
Ein sauberes Dark-Mode-Theme für Kutt, den selbst gehosteten URL-Shortener.
|
|
</h4>
|
|
|
|
<h6 align="center">
|
|
<a href="https://www.cleveradmin.de">🏰 Website</a>
|
|
·
|
|
<a href="https://techniverse.net">📰 Community</a>
|
|
·
|
|
<a href="https://social.techniverse.net/@donnerwolke">🐘 Mastodon</a>
|
|
·
|
|
<a href="https://matrix.to/#/#support:techniverse.net">💬 Support</a>
|
|
</h6>
|
|
<br><br>
|
|
|
|
|
|
## Vorschau
|
|
|
|
|
|
|
|
- Hintergrund: Dunkles Blaugrau (`#0f1419`)
|
|
- Akzentfarbe: Blau (`#1D6397`)
|
|
- Alle Icons (Edit, Delete, QR-Code, Stats, Ban) bleiben sichtbar und funktional
|
|
|
|
## Installation
|
|
|
|
### 1. Volume in `docker-compose.yaml` einrichten
|
|
|
|
Der Kutt-Container braucht ein Volume, das den Custom-Ordner einbindet:
|
|
|
|
```yaml
|
|
services:
|
|
kutt-app:
|
|
image: kutt/kutt:latest
|
|
volumes:
|
|
- ./data/app/custom:/kutt/custom
|
|
```
|
|
|
|
### 2. CSS-Datei kopieren
|
|
|
|
Die Datei `custom.css` in den CSS-Ordner innerhalb des Custom-Verzeichnisses legen:
|
|
|
|
```bash
|
|
mkdir -p ./data/app/custom/css
|
|
cp custom.css ./data/app/custom/css/custom.css
|
|
```
|
|
|
|
### 3. Container neu starten
|
|
|
|
```bash
|
|
docker restart kutt-app
|
|
```
|
|
|
|
### 4. Im Browser prüfen
|
|
|
|
Die Seite mit `Ctrl + Shift + R` (Hard-Reload) neu laden, damit der Browser-Cache das neue CSS holt.
|
|
|
|
|
|
|
|
## Logo anpassen
|
|
|
|
Kutt unterstützt ein eigenes Logo über das Custom-Verzeichnis:
|
|
|
|
```bash
|
|
mkdir -p ./data/app/custom/images
|
|
cp dein-logo.png ./data/app/custom/images/logo.png
|
|
```
|
|
|
|
Das Logo wird automatisch von Kutt geladen. Das CSS sorgt dafür, dass es als 32x32px Kreis dargestellt wird:
|
|
|
|
```css
|
|
img[src*="logo"] {
|
|
width: 32px;
|
|
height: 32px;
|
|
object-fit: contain;
|
|
border-radius: 50%;
|
|
}
|
|
```
|
|
|
|
Wenn du ein eckiges Logo bevorzugst, einfach `border-radius: 50%;` entfernen oder auf z.B. `border-radius: 6px;` ändern.
|
|
|
|
### Weitere anpassbare Bilder
|
|
|
|
| Datei | Zweck |
|
|
|---|---|
|
|
| `images/logo.png` | Logo im Header |
|
|
| `images/favicon.ico` | Browser-Tab-Icon |
|
|
| `images/favicon-16x16.png` | Favicon 16px |
|
|
| `images/favicon-32x32.png` | Favicon 32px |
|
|
| `images/favicon-196x196.png` | Favicon groß (Android etc.) |
|
|
| `images/card.png` | Social-Media-Vorschaubild (Open Graph) |
|
|
|
|
Alle Dateien kommen in `./data/app/custom/images/`.
|
|
|
|
## Wichtige CSS-Variablen
|
|
|
|
Die wichtigsten Farben werden über CSS Custom Properties gesteuert. Sie stehen ganz oben in der `custom.css` im `:root`-Block und können dort einfach angepasst werden:
|
|
|
|
### Akzentfarbe
|
|
|
|
```css
|
|
--color-primary: #1D6397; /* Hauptfarbe für Links und Buttons */
|
|
--outline-color: #1D6397; /* Fokus-Rahmen */
|
|
--focus-outline-color: rgba(29, 99, 151, 0.5);
|
|
--checkbox-bg-color: #1D6397; /* Checkbox-Farbe */
|
|
```
|
|
|
|
Um die Akzentfarbe zu ändern, diese vier Werte plus die Button-Gradients anpassen:
|
|
|
|
```css
|
|
--button-bg-primary: linear-gradient(to right, #1a5a8a, #1D6397);
|
|
--button-bg-primary-box-shadow-color: rgba(29, 99, 151, 0.35);
|
|
```
|
|
|
|
### Hintergründe
|
|
|
|
```css
|
|
--bg-color: #0f1419; /* Seiten-Hintergrund */
|
|
--table-bg-color: #151d28; /* Tabellen-Header/Footer */
|
|
--table-tr-hover-bg-color: #1a2535; /* Zeile beim Hover */
|
|
```
|
|
|
|
Für Tabellen und Karten wird `#141c26` als Hintergrund und `#1a2332` für erhöhte Elemente (Inputs, Buttons) verwendet. Diese Werte stehen direkt in den CSS-Regeln (nicht als Variable).
|
|
|
|
### Text
|
|
|
|
```css
|
|
--text-color: #dce0e8; /* Haupttext */
|
|
--secondary-text-color: #8b95a5; /* Gedämpfter Text */
|
|
--input-label-color: #c8cdd5; /* Label-Text */
|
|
```
|
|
|
|
## Custom Footer
|
|
|
|
Kutt erlaubt einen eigenen Footer über eine Handlebars-Vorlage:
|
|
|
|
```bash
|
|
mkdir -p ./data/app/custom/views/partials
|
|
```
|
|
|
|
Dort eine Datei `footer.hbs` anlegen, z.B.:
|
|
|
|
```html
|
|
<footer class="site-footer">
|
|
<p>
|
|
<a href="https://example.com" target="_blank" rel="noopener">Powered by Example</a>
|
|
<span aria-hidden="true">|</span>
|
|
<a href="/terms">Nutzungsbedingungen</a>
|
|
</p>
|
|
</footer>
|
|
```
|
|
|
|
Das CSS enthält bereits passende Styles für `.site-footer`.
|
|
|
|
## Verzeichnisstruktur
|
|
|
|
So sollte das Custom-Verzeichnis am Ende aussehen:
|
|
|
|
```
|
|
data/app/custom/
|
|
css/
|
|
custom.css
|
|
images/
|
|
logo.png
|
|
favicon.ico
|
|
favicon-16x16.png
|
|
favicon-32x32.png
|
|
favicon-196x196.png
|
|
card.png
|
|
views/
|
|
partials/
|
|
footer.hbs
|
|
```
|
|
|
|
## Hinweise
|
|
|
|
- Das CSS überschreibt Kutts eingebaute CSS-Variablen. Bei einem Kutt-Update könnten sich Klassennamen ändern — nach Updates kurz prüfen.
|
|
- Die Icons (Edit, Delete, QR, Stats, Ban) werden bewusst nicht über `color`-Overrides verändert, sondern behalten ihre originalen `stroke`/`fill`-Werte. Nur die Hintergründe der Action-Buttons werden dezent angepasst.
|
|
- Getestet mit Kutt `latest` (Stand Juli 2025).
|
|
|
|
|
|
|
|
<br><br>
|
|
<p align="center">
|
|
<img src="https://assets.techniverse.net/f1/git/graphics/gray0-catonline.svg" alt="">
|
|
</p>
|
|
|
|
<p align="center">
|
|
<sub>
|
|
© Patrick Asmus · Techniverse Network · <a href="./LICENSE">Lizenz</a>
|
|
</sub>
|
|
</p>
|