rebrand theme: throwback → loch, --tb- → --ds-, drop Press Start 2P
Rename the design system from "throwback" to "loch" — a deep-navy design system. CSS variable prefix --tb- → --ds-. Press Start 2P replaced with IBM Plex Mono weight 600 for headings. Same hex colours, same layout, same mood — just a grown-up name. fix #50, fix #51, refs #54
This commit is contained in:
kert
143
README.md
143
README.md
@@ -2,7 +2,7 @@
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
Self-hosted infrastructure stack with GPU support, S3-compatible storage, Git server with container registry, CI/CD, data lakehouse, observability, documentation, and research tools. All services share a unified retro "throwback" theme injected via Traefik middleware.
|
Self-hosted infrastructure stack with GPU support, S3-compatible storage, Git server with container registry, CI/CD, data lakehouse, observability, documentation, and research tools. All services share a unified deep-navy design system ("loch") injected via Traefik middleware.
|
||||||
|
|
||||||
## Services
|
## Services
|
||||||
|
|
||||||
@@ -81,28 +81,28 @@ Routes are defined in `traefik/dynamic/services.yml` using Go templates with Spr
|
|||||||
"gitea" (dict "port" "3000" "theme" true "mw" "secure-headers")
|
"gitea" (dict "port" "3000" "theme" true "mw" "secure-headers")
|
||||||
```
|
```
|
||||||
|
|
||||||
- **`theme: true`** applies the `inject-throwback` middleware (injects favicon + CSS via HTML rewrite)
|
- **`theme: true`** applies the `inject-loch` middleware (injects favicon + CSS via HTML rewrite)
|
||||||
- **`theme: false`** skips injection (API-only services like Nessie, Polaris, Loki)
|
- **`theme: false`** skips injection (API-only services like Nessie, Polaris, Loki)
|
||||||
- **`mw`** is a comma-separated list of additional middlewares (`secure-headers`, `local-only`, `infra-headers`)
|
- **`mw`** is a comma-separated list of additional middlewares (`secure-headers`, `local-only`, `infra-headers`)
|
||||||
- **`subdomain`** overrides the FQDN prefix (e.g. `woodpecker-server` → `ci.homelab.fhirworx.io`)
|
- **`subdomain`** overrides the FQDN prefix (e.g. `woodpecker-server` → `ci.homelab.fhirworx.io`)
|
||||||
|
|
||||||
To add a new service, add one line to the `$reef` dict and a service block to `compose.yml`.
|
To add a new service, add one line to the `$reef` dict and a service block to `compose.yml`.
|
||||||
|
|
||||||
### Throwback Theme
|
### Loch Design System
|
||||||
|
|
||||||
All HTML-serving services get a unified retro theme via the `inject-throwback` Traefik middleware, which uses the [rewrite-body](https://github.com/packruler/rewrite-body) plugin to inject `<link>` tags before `</head>`:
|
All HTML-serving services get a unified deep-navy design system via the `inject-loch` Traefik middleware, which uses the [rewrite-body](https://github.com/packruler/rewrite-body) plugin to inject `<link>` tags before `</head>`:
|
||||||
|
|
||||||
- **`fav32.png`** — 32x32 PNG favicon served from the dashboard container
|
- **`fav32.png`** — 32x32 PNG favicon served from the dashboard container
|
||||||
- **`throwback.css`** — Global CSS overrides (colors, fonts, borders)
|
- **`loch.css`** — Global CSS overrides (colors, fonts, borders)
|
||||||
- **`inject.css`** — Served as `throwback.css`, hides service-specific logos and applies the palette
|
- **`inject.css`** — Served as `loch.css`, hides service-specific logos and applies the palette
|
||||||
|
|
||||||
Per-service CSS files handle service-specific overrides:
|
Per-service CSS files handle service-specific overrides:
|
||||||
|
|
||||||
| File | Purpose |
|
| File | Purpose |
|
||||||
|------|---------|
|
|------|---------|
|
||||||
| `styles/inject.css` | Global throwback palette + logo hiding (served as `throwback.css`) |
|
| `styles/inject.css` | Global loch palette + logo hiding (served as `loch.css`) |
|
||||||
| `styles/dashboard.css` | Dashboard tile grid layout |
|
| `styles/dashboard.css` | Dashboard tile grid layout |
|
||||||
| `styles/gitea.css` | Gitea theme (registered as `throwback` in Gitea UI settings) |
|
| `styles/gitea.css` | Gitea theme (registered as `loch` in Gitea UI settings) |
|
||||||
| `styles/woodpecker.css` | Woodpecker custom CSS (via `WOODPECKER_CUSTOM_CSS_FILE`) |
|
| `styles/woodpecker.css` | Woodpecker custom CSS (via `WOODPECKER_CUSTOM_CSS_FILE`) |
|
||||||
| `styles/marimo.css` | Marimo notebook theme |
|
| `styles/marimo.css` | Marimo notebook theme |
|
||||||
| `styles/fav32.png` | 32x32 PNG favicon (canonical, injected by Traefik) |
|
| `styles/fav32.png` | 32x32 PNG favicon (canonical, injected by Traefik) |
|
||||||
@@ -173,114 +173,44 @@ EOF
|
|||||||
```bash
|
```bash
|
||||||
docker compose up -d postgres rustfs traefik
|
docker compose up -d postgres rustfs traefik
|
||||||
|
|
||||||
# Bootstrap: creates DB roles, databases, derives all credentials, writes .env
|
# Bootstrap: creates DB roles, databases, RustFS buckets/users/IAM,
|
||||||
|
# derives all 21 credentials, rotates Grafana password, writes .env
|
||||||
ROOT_KEY=$ROOT_KEY uv run python -m api.auth bootstrap $(git rev-parse HEAD)
|
ROOT_KEY=$ROOT_KEY uv run python -m api.auth bootstrap $(git rev-parse HEAD)
|
||||||
```
|
```
|
||||||
|
|
||||||
### 3. Configure RustFS
|
Bootstrap automatically handles:
|
||||||
|
- PostgreSQL roles and databases (gitea, woodpecker, nessie, polaris)
|
||||||
|
- RustFS buckets (`gitea`, `gitea-lfs`, `gitea-packages`, `lakehouse`)
|
||||||
|
- RustFS IAM users and per-user policies from `rustfs/policies/`
|
||||||
|
- Gitea admin password rotation and API token creation
|
||||||
|
- Grafana admin password rotation (non-fatal if unreachable)
|
||||||
|
- Woodpecker CI secret provisioning
|
||||||
|
|
||||||
1. Access console at `s3console.homelab.fhirworx.io`
|
### 3. Start All Services
|
||||||
2. Create user `git` with S3 credentials matching `.env`
|
|
||||||
3. Create buckets: `gitea`, `gitea-lfs`, `gitea-packages`
|
|
||||||
4. Create user `nessie` with S3 credentials matching `.env`
|
|
||||||
5. Create bucket: `lakehouse`
|
|
||||||
6. Apply IAM policies to users (see below)
|
|
||||||
|
|
||||||
**Gitea IAM Policy:**
|
|
||||||
|
|
||||||
```json
|
|
||||||
{
|
|
||||||
"Version": "2012-10-17",
|
|
||||||
"Statement": [
|
|
||||||
{
|
|
||||||
"Effect": "Allow",
|
|
||||||
"Action": [
|
|
||||||
"s3:GetBucketLocation",
|
|
||||||
"s3:ListBucket",
|
|
||||||
"s3:ListBucketMultipartUploads"
|
|
||||||
],
|
|
||||||
"Resource": [
|
|
||||||
"arn:aws:s3:::gitea",
|
|
||||||
"arn:aws:s3:::gitea-lfs",
|
|
||||||
"arn:aws:s3:::gitea-packages"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"Effect": "Allow",
|
|
||||||
"Action": [
|
|
||||||
"s3:GetObject",
|
|
||||||
"s3:PutObject",
|
|
||||||
"s3:DeleteObject",
|
|
||||||
"s3:ListMultipartUploadParts",
|
|
||||||
"s3:AbortMultipartUpload"
|
|
||||||
],
|
|
||||||
"Resource": [
|
|
||||||
"arn:aws:s3:::gitea/*",
|
|
||||||
"arn:aws:s3:::gitea-lfs/*",
|
|
||||||
"arn:aws:s3:::gitea-packages/*"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
**Nessie IAM Policy:**
|
|
||||||
|
|
||||||
```json
|
|
||||||
{
|
|
||||||
"Version": "2012-10-17",
|
|
||||||
"Statement": [
|
|
||||||
{
|
|
||||||
"Effect": "Allow",
|
|
||||||
"Action": [
|
|
||||||
"s3:GetBucketLocation",
|
|
||||||
"s3:ListBucket",
|
|
||||||
"s3:ListBucketMultipartUploads"
|
|
||||||
],
|
|
||||||
"Resource": ["arn:aws:s3:::lakehouse"]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"Effect": "Allow",
|
|
||||||
"Action": [
|
|
||||||
"s3:GetObject",
|
|
||||||
"s3:PutObject",
|
|
||||||
"s3:DeleteObject",
|
|
||||||
"s3:ListMultipartUploadParts",
|
|
||||||
"s3:AbortMultipartUpload"
|
|
||||||
],
|
|
||||||
"Resource": ["arn:aws:s3:::lakehouse/*"]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### 4. Start All Services
|
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
docker compose up -d
|
docker compose up -d
|
||||||
```
|
```
|
||||||
|
|
||||||
### 5. Configure Gitea
|
### 4. Configure Gitea
|
||||||
|
|
||||||
1. Complete initial setup at `gitea.homelab.fhirworx.io`
|
1. Complete initial setup at `gitea.homelab.fhirworx.io`
|
||||||
2. Create organization `homelab`
|
2. Create organization `homelab`
|
||||||
3. Create repository `stack`
|
3. Create repository `stack`
|
||||||
4. Generate API token for container registry access
|
4. Create OAuth2 application for Woodpecker:
|
||||||
5. Create OAuth2 application for Woodpecker:
|
|
||||||
- Name: `Woodpecker CI`
|
- Name: `Woodpecker CI`
|
||||||
- Redirect URI: `http://ci.homelab.fhirworx.io/authorize`
|
- Redirect URI: `http://ci.homelab.fhirworx.io/authorize`
|
||||||
- Copy Client ID and Secret to `.env`
|
- Copy Client ID and Secret to `.env`
|
||||||
|
|
||||||
### 6. Configure Woodpecker Secrets
|
### 5. Configure Woodpecker Root Key
|
||||||
|
|
||||||
Add secrets in Woodpecker UI (`ci.homelab.fhirworx.io`):
|
Add one secret in Woodpecker UI (`ci.homelab.fhirworx.io`):
|
||||||
- `root_key` — The hex-encoded root key (enables auto-rotation on every deploy)
|
- `root_key` — The hex-encoded root key (enables auto-rotation on every deploy)
|
||||||
- `registry_user` — Gitea username
|
- `registry_user` — Gitea username
|
||||||
- `registry_pass` — Gitea token
|
|
||||||
- `s3_access_key` — RustFS access key
|
|
||||||
- `s3_secret_key` — RustFS secret key
|
|
||||||
|
|
||||||
### 7. Verify Services
|
All other Woodpecker secrets (`registry_pass`, `s3_access_key`, `s3_secret_key`, `gitea_token`, `gitea_url`) are provisioned automatically by `bootstrap` and rotated on each deploy by `provision`.
|
||||||
|
|
||||||
|
### 6. Verify Services
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
# Check Traefik routes
|
# Check Traefik routes
|
||||||
@@ -346,7 +276,7 @@ The derivation uses two tiers:
|
|||||||
| **Bootstrap** | `b"bootstrap"` | Only when root key changes | Superuser passwords, OAuth2 app |
|
| **Bootstrap** | `b"bootstrap"` | Only when root key changes | Superuser passwords, OAuth2 app |
|
||||||
| **Service** | `commit_sha` | Every deploy | DB passwords, S3 keys, API tokens |
|
| **Service** | `commit_sha` | Every deploy | DB passwords, S3 keys, API tokens |
|
||||||
|
|
||||||
### Managed Credentials (18 derived, 2 skipped)
|
### Managed Credentials (19 derived, 2 skipped)
|
||||||
|
|
||||||
| Variable | Tier | Format | Backend |
|
| Variable | Tier | Format | Backend |
|
||||||
|----------|------|--------|---------|
|
|----------|------|--------|---------|
|
||||||
@@ -359,8 +289,9 @@ The derivation uses two tiers:
|
|||||||
| `RUSTFS_SECRET_KEY` | Service | hex | env only |
|
| `RUSTFS_SECRET_KEY` | Service | hex | env only |
|
||||||
| `GITEA_S3_*`, `NESSIE_S3_*`, `POLARIS_S3_*` | Service | hex | env only (aliases of RUSTFS) |
|
| `GITEA_S3_*`, `NESSIE_S3_*`, `POLARIS_S3_*` | Service | hex | env only (aliases of RUSTFS) |
|
||||||
| `WOODPECKER_AGENT_SECRET` | Service | hex | env only |
|
| `WOODPECKER_AGENT_SECRET` | Service | hex | env only |
|
||||||
|
| `STACK_API_SECRET` | Service | hex | env only |
|
||||||
| `POLARIS_ROOT_SECRET` | Service | password | env only |
|
| `POLARIS_ROOT_SECRET` | Service | password | env only |
|
||||||
| `GF_ADMIN_PASSWORD` | Service | password | env only |
|
| `GF_ADMIN_PASSWORD` | Service | password | Grafana (admin API) |
|
||||||
| `GITEA_ADMIN_PASSWORD` | Service | password | Gitea (change-password) |
|
| `GITEA_ADMIN_PASSWORD` | Service | password | Gitea (change-password) |
|
||||||
| `GITEA_TOKEN` | Service | — | Gitea (API token) |
|
| `GITEA_TOKEN` | Service | — | Gitea (API token) |
|
||||||
|
|
||||||
@@ -381,7 +312,15 @@ ROOT_KEY=$KEY uv run python -m api.auth derive $COMMIT_SHA --redact
|
|||||||
|
|
||||||
### Auto-Rotation via CI
|
### Auto-Rotation via CI
|
||||||
|
|
||||||
The `provision` step in `.woodpecker/deploy.yml` runs after every deploy, deriving fresh service-tier credentials from the commit SHA and rotating PostgreSQL passwords and Gitea tokens automatically.
|
The `provision` step in `.woodpecker/deploy.yml` runs after every deploy, deriving fresh service-tier credentials from the commit SHA and rotating PostgreSQL passwords, Gitea tokens, Grafana admin password, and Woodpecker CI secrets automatically.
|
||||||
|
|
||||||
|
### Troubleshooting
|
||||||
|
|
||||||
|
**CI provision step fails with `No module named 'api'`**: The provision step needs `UV_PROJECT_ENVIRONMENT: .venv` and `UV_LINK_MODE: copy` in its environment block (matching the CI pipeline pattern). Without these, `uv run` creates a fresh venv in the CI container and doesn't find the installed project.
|
||||||
|
|
||||||
|
**Grafana password rotation fails**: This is non-fatal — bootstrap/provision will log a warning but continue. Check that Grafana is running and reachable at its internal URL. On first bootstrap with default `admin`/`admin` credentials, rotation should succeed. On subsequent provisions, the old password is read from `.env` before overwrite.
|
||||||
|
|
||||||
|
**RustFS bucket creation fails**: Ensure RustFS is running and the `RUSTFS_ACCESS_KEY`/`RUSTFS_SECRET_KEY` in `.env` match the root credentials configured in the RustFS container environment.
|
||||||
|
|
||||||
## Documentation Site
|
## Documentation Site
|
||||||
|
|
||||||
@@ -468,9 +407,9 @@ stack/
|
|||||||
├── .env # Environment variables (not in git)
|
├── .env # Environment variables (not in git)
|
||||||
├── README.md
|
├── README.md
|
||||||
├── styles/ # Centralized theme assets
|
├── styles/ # Centralized theme assets
|
||||||
│ ├── inject.css # Global throwback CSS (served as throwback.css)
|
│ ├── inject.css # Global loch CSS (served as loch.css)
|
||||||
│ ├── dashboard.css # Dashboard tile grid
|
│ ├── dashboard.css # Dashboard tile grid
|
||||||
│ ├── gitea.css # Gitea throwback theme
|
│ ├── gitea.css # Gitea loch theme
|
||||||
│ ├── woodpecker.css # Woodpecker custom CSS
|
│ ├── woodpecker.css # Woodpecker custom CSS
|
||||||
│ ├── marimo.css # Marimo notebook theme
|
│ ├── marimo.css # Marimo notebook theme
|
||||||
│ ├── fav32.png # 32x32 PNG favicon (canonical, injected by Traefik)
|
│ ├── fav32.png # 32x32 PNG favicon (canonical, injected by Traefik)
|
||||||
@@ -551,8 +490,8 @@ Custom images use the `fhirworx/<svc>:<sha>` naming convention locally. The regi
|
|||||||
echo "<GITEA_TOKEN>" | docker login localhost:3000 -u <username> --password-stdin
|
echo "<GITEA_TOKEN>" | docker login localhost:3000 -u <username> --password-stdin
|
||||||
|
|
||||||
# Tag and push
|
# Tag and push
|
||||||
docker tag fhirworx/<svc>:latest localhost:3000/fhirworx/<svc>:latest
|
docker tag fhirworx/<svc>:latest localhost:3000/homelab/<svc>:latest
|
||||||
docker push localhost:3000/fhirworx/<svc>:latest
|
docker push localhost:3000/homelab/<svc>:latest
|
||||||
```
|
```
|
||||||
|
|
||||||
Custom images: `notebooks`, `zotero`, `docs`. Compose resolves `fhirworx/<svc>:${COMMIT_SHA:-latest}`.
|
Custom images: `notebooks`, `zotero`, `docs`. Compose resolves `fhirworx/<svc>:${COMMIT_SHA:-latest}`.
|
||||||
|
|||||||
42
compose.yml
42
compose.yml
@@ -110,13 +110,13 @@ services:
|
|||||||
- GITEA__server__ROOT_URL=http://gitea.${DOMAIN:-homelab.fhirworx.io}/
|
- GITEA__server__ROOT_URL=http://gitea.${DOMAIN:-homelab.fhirworx.io}/
|
||||||
- GITEA__server__SSH_DOMAIN=${DOMAIN:-homelab.fhirworx.io}
|
- GITEA__server__SSH_DOMAIN=${DOMAIN:-homelab.fhirworx.io}
|
||||||
- GITEA__webhook__ALLOWED_HOST_LIST=woodpecker-server,ci.${DOMAIN:-homelab.fhirworx.io},${HOST_IP:-192.168.1.192},172.19.0.0/16
|
- GITEA__webhook__ALLOWED_HOST_LIST=woodpecker-server,ci.${DOMAIN:-homelab.fhirworx.io},${HOST_IP:-192.168.1.192},172.19.0.0/16
|
||||||
- GITEA__ui__THEMES=gitea-auto,gitea-light,gitea-dark,throwback
|
- GITEA__ui__THEMES=gitea-auto,gitea-light,gitea-dark,loch
|
||||||
- GITEA__ui__DEFAULT_THEME=throwback
|
- GITEA__ui__DEFAULT_THEME=loch
|
||||||
volumes:
|
volumes:
|
||||||
- gitea_data:/var/lib/gitea
|
- gitea_data:/var/lib/gitea
|
||||||
- gitea_config:/etc/gitea
|
- gitea_config:/etc/gitea
|
||||||
- ./gitea/custom:/var/lib/gitea/custom
|
- ./gitea/custom:/var/lib/gitea/custom
|
||||||
- ./styles/gitea.css:/var/lib/gitea/custom/public/assets/css/theme-throwback.css:ro
|
- ./styles/gitea.css:/var/lib/gitea/custom/public/assets/css/theme-loch.css:ro
|
||||||
ports:
|
ports:
|
||||||
- "2222:2222"
|
- "2222:2222"
|
||||||
- "3000:3000"
|
- "3000:3000"
|
||||||
@@ -186,7 +186,7 @@ services:
|
|||||||
volumes:
|
volumes:
|
||||||
- ./notebooks:/home/kert/notebooks
|
- ./notebooks:/home/kert/notebooks
|
||||||
- ./notebooks/.marimo-config:/home/kert/.config/marimo
|
- ./notebooks/.marimo-config:/home/kert/.config/marimo
|
||||||
- ./styles/marimo.css:/home/kert/.config/marimo/retro-arcade.css:ro
|
- ./styles/marimo.css:/home/kert/.config/marimo/loch.css:ro
|
||||||
- ./notebooks/home-page-DUMF8ZY4.js:/home/kert/workspace/.venv/lib/python3.13/site-packages/marimo/_static/assets/home-page-DUMF8ZY4.js:ro
|
- ./notebooks/home-page-DUMF8ZY4.js:/home/kert/workspace/.venv/lib/python3.13/site-packages/marimo/_static/assets/home-page-DUMF8ZY4.js:ro
|
||||||
- ./data:/home/kert/data
|
- ./data:/home/kert/data
|
||||||
- ./zotero/data:/home/kert/zotero:ro
|
- ./zotero/data:/home/kert/zotero:ro
|
||||||
@@ -336,7 +336,7 @@ services:
|
|||||||
- ./nginx/nginx.conf:/etc/nginx/nginx.conf:ro
|
- ./nginx/nginx.conf:/etc/nginx/nginx.conf:ro
|
||||||
- ./nginx/index.html:/usr/share/nginx/html/index.html:ro
|
- ./nginx/index.html:/usr/share/nginx/html/index.html:ro
|
||||||
- ./styles/dashboard.css:/usr/share/nginx/html/dashboard.css:ro
|
- ./styles/dashboard.css:/usr/share/nginx/html/dashboard.css:ro
|
||||||
- ./styles/inject.css:/usr/share/nginx/html/throwback.css:ro
|
- ./styles/inject.css:/usr/share/nginx/html/loch.css:ro
|
||||||
- ./styles/fav32.png:/usr/share/nginx/html/fav32.png:ro
|
- ./styles/fav32.png:/usr/share/nginx/html/fav32.png:ro
|
||||||
security_opt:
|
security_opt:
|
||||||
- no-new-privileges:true
|
- no-new-privileges:true
|
||||||
@@ -349,6 +349,38 @@ services:
|
|||||||
- gateway
|
- gateway
|
||||||
restart: unless-stopped
|
restart: unless-stopped
|
||||||
|
|
||||||
|
api:
|
||||||
|
image: fhirworx/api:${COMMIT_SHA:-latest}
|
||||||
|
container_name: api
|
||||||
|
networks:
|
||||||
|
- gateway
|
||||||
|
- storage
|
||||||
|
- data
|
||||||
|
- observability
|
||||||
|
environment:
|
||||||
|
- STACK_API_SECRET=${STACK_API_SECRET}
|
||||||
|
- GITEA_TOKEN=${GITEA_TOKEN}
|
||||||
|
# Postgres
|
||||||
|
- POSTGRES_PASSWORD=${POSTGRES_PASSWORD:-changeme}
|
||||||
|
# S3 / RustFS
|
||||||
|
- NESSIE_S3_ACCESS_KEY=${NESSIE_S3_ACCESS_KEY}
|
||||||
|
- NESSIE_S3_SECRET_KEY=${NESSIE_S3_SECRET_KEY}
|
||||||
|
- S3_ENDPOINT=${S3_ENDPOINT:-http://rustfs:9000}
|
||||||
|
- S3_REGION=${S3_REGION:-us-east-1}
|
||||||
|
- S3_WAREHOUSE=${S3_WAREHOUSE:-s3://lakehouse/}
|
||||||
|
# OpenTelemetry
|
||||||
|
- OTEL_SERVICE_NAME=api
|
||||||
|
- OTEL_EXPORTER_OTLP_ENDPOINT=http://jaeger:4317
|
||||||
|
volumes:
|
||||||
|
- ./data:/app/data
|
||||||
|
depends_on:
|
||||||
|
- postgres
|
||||||
|
- rustfs
|
||||||
|
- nessie
|
||||||
|
security_opt:
|
||||||
|
- no-new-privileges:true
|
||||||
|
restart: unless-stopped
|
||||||
|
|
||||||
# Observability Stack
|
# Observability Stack
|
||||||
jaeger:
|
jaeger:
|
||||||
image: jaegertracing/all-in-one:latest
|
image: jaegertracing/all-in-one:latest
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
/* Throwback palette — matches styles/inject.css */
|
/* LOCH — deep-navy design system — matches styles/inject.css */
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
--ifm-color-primary: #3366cc;
|
--ifm-color-primary: #3366cc;
|
||||||
|
|||||||
@@ -11,7 +11,7 @@
|
|||||||
border-bottom: 4px solid var(--color-red);
|
border-bottom: 4px solid var(--color-red);
|
||||||
}
|
}
|
||||||
.homelab-dashboard .hdr h1 {
|
.homelab-dashboard .hdr h1 {
|
||||||
font-family: 'Press Start 2P', monospace !important;
|
font-family: 'IBM Plex Mono', monospace !important;
|
||||||
font-size: 2rem !important;
|
font-size: 2rem !important;
|
||||||
color: var(--color-text) !important;
|
color: var(--color-text) !important;
|
||||||
letter-spacing: 6px !important;
|
letter-spacing: 6px !important;
|
||||||
@@ -20,7 +20,7 @@
|
|||||||
border: none !important;
|
border: none !important;
|
||||||
}
|
}
|
||||||
.homelab-dashboard .subtitle {
|
.homelab-dashboard .subtitle {
|
||||||
font-family: 'Press Start 2P', monospace;
|
font-family: 'IBM Plex Mono', monospace;
|
||||||
color: var(--color-primary);
|
color: var(--color-primary);
|
||||||
font-size: 0.55rem;
|
font-size: 0.55rem;
|
||||||
margin-top: 15px;
|
margin-top: 15px;
|
||||||
@@ -31,7 +31,7 @@
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
gap: 40px;
|
gap: 40px;
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
font-family: 'Press Start 2P', monospace;
|
font-family: 'IBM Plex Mono', monospace;
|
||||||
font-size: 0.5rem;
|
font-size: 0.5rem;
|
||||||
}
|
}
|
||||||
.homelab-dashboard .score-item {
|
.homelab-dashboard .score-item {
|
||||||
@@ -81,7 +81,7 @@
|
|||||||
.homelab-dashboard .tile.logs .icon { color: var(--color-primary-light-1); }
|
.homelab-dashboard .tile.logs .icon { color: var(--color-primary-light-1); }
|
||||||
.homelab-dashboard .tile.proxy .icon { color: var(--color-text); }
|
.homelab-dashboard .tile.proxy .icon { color: var(--color-text); }
|
||||||
.homelab-dashboard .tile-title {
|
.homelab-dashboard .tile-title {
|
||||||
font-family: 'Press Start 2P', monospace !important;
|
font-family: 'IBM Plex Mono', monospace !important;
|
||||||
font-size: 0.7rem !important;
|
font-size: 0.7rem !important;
|
||||||
color: var(--color-text) !important;
|
color: var(--color-text) !important;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
@@ -119,7 +119,7 @@
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
top: -1px;
|
top: -1px;
|
||||||
left: 20px;
|
left: 20px;
|
||||||
font-family: 'Press Start 2P', monospace;
|
font-family: 'IBM Plex Mono', monospace;
|
||||||
color: var(--color-text);
|
color: var(--color-text);
|
||||||
font-size: 0.35rem;
|
font-size: 0.35rem;
|
||||||
padding: 4px 8px;
|
padding: 4px 8px;
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
/* THROWBACK THEME - Tecmo Super Bowl */
|
/* LOCH — deep-navy design system */
|
||||||
/* Uses marimo's native CSS variable system for proper theming */
|
/* Uses marimo's native CSS variable system for proper theming */
|
||||||
|
|
||||||
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=IBM+Plex+Mono:wght@400;500;600&display=swap');
|
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap');
|
||||||
|
|
||||||
/* ============================================
|
/* ============================================
|
||||||
FONT CONFIGURATION
|
FONT CONFIGURATION
|
||||||
@@ -9,30 +9,30 @@
|
|||||||
:root {
|
:root {
|
||||||
--marimo-monospace-font: 'IBM Plex Mono', 'Courier New', monospace;
|
--marimo-monospace-font: 'IBM Plex Mono', 'Courier New', monospace;
|
||||||
--marimo-text-font: 'IBM Plex Mono', 'Courier New', monospace;
|
--marimo-text-font: 'IBM Plex Mono', 'Courier New', monospace;
|
||||||
--marimo-heading-font: 'Press Start 2P', 'IBM Plex Mono', monospace;
|
--marimo-heading-font: 'IBM Plex Mono', monospace;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ============================================
|
/* ============================================
|
||||||
THROWBACK COLOR PALETTE
|
LOCH COLOR PALETTE
|
||||||
============================================ */
|
============================================ */
|
||||||
:root {
|
:root {
|
||||||
--tb-navy: #0a1628;
|
--ds-navy: #0a1628;
|
||||||
--tb-navy-light: #162040;
|
--ds-navy-light: #162040;
|
||||||
--tb-navy-mid: #1e2d50;
|
--ds-navy-mid: #1e2d50;
|
||||||
--tb-slate: #2a3f5f;
|
--ds-slate: #2a3f5f;
|
||||||
--tb-steel: #8a9fbb;
|
--ds-steel: #8a9fbb;
|
||||||
--tb-white: #f0f0f0;
|
--ds-white: #f0f0f0;
|
||||||
|
|
||||||
--tb-blue: #4477dd;
|
--ds-blue: #4477dd;
|
||||||
--tb-blue-light: #6699ee;
|
--ds-blue-light: #6699ee;
|
||||||
--tb-blue-bright: #99bbff;
|
--ds-blue-bright: #99bbff;
|
||||||
|
|
||||||
--tb-red: #cc2244;
|
--ds-red: #cc2244;
|
||||||
--tb-red-light: #ee6688;
|
--ds-red-light: #ee6688;
|
||||||
|
|
||||||
--tb-green: #44aa44;
|
--ds-green: #44aa44;
|
||||||
--tb-green-light: #77dd77;
|
--ds-green-light: #77dd77;
|
||||||
--tb-yellow: #eebb44;
|
--ds-yellow: #eebb44;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ============================================
|
/* ============================================
|
||||||
@@ -40,39 +40,39 @@
|
|||||||
============================================ */
|
============================================ */
|
||||||
:root {
|
:root {
|
||||||
/* Base colors */
|
/* Base colors */
|
||||||
--background: var(--tb-navy);
|
--background: var(--ds-navy);
|
||||||
--foreground: var(--tb-white);
|
--foreground: var(--ds-white);
|
||||||
|
|
||||||
/* Muted/secondary text */
|
/* Muted/secondary text */
|
||||||
--muted: var(--tb-navy-light);
|
--muted: var(--ds-navy-light);
|
||||||
--muted-foreground: var(--tb-steel);
|
--muted-foreground: var(--ds-steel);
|
||||||
|
|
||||||
/* Popover/dropdown backgrounds */
|
/* Popover/dropdown backgrounds */
|
||||||
--popover: var(--tb-navy-light);
|
--popover: var(--ds-navy-light);
|
||||||
--popover-foreground: var(--tb-white);
|
--popover-foreground: var(--ds-white);
|
||||||
|
|
||||||
/* Cards (cells) */
|
/* Cards (cells) */
|
||||||
--card: var(--tb-navy);
|
--card: var(--ds-navy);
|
||||||
--card-foreground: var(--tb-white);
|
--card-foreground: var(--ds-white);
|
||||||
|
|
||||||
/* Borders and inputs */
|
/* Borders and inputs */
|
||||||
--border: var(--tb-slate);
|
--border: var(--ds-slate);
|
||||||
--input: var(--tb-navy-mid);
|
--input: var(--ds-navy-mid);
|
||||||
|
|
||||||
/* Primary action color */
|
/* Primary action color */
|
||||||
--primary: var(--tb-blue);
|
--primary: var(--ds-blue);
|
||||||
--primary-foreground: var(--tb-white);
|
--primary-foreground: var(--ds-white);
|
||||||
|
|
||||||
/* Secondary elements */
|
/* Secondary elements */
|
||||||
--secondary: var(--tb-slate);
|
--secondary: var(--ds-slate);
|
||||||
--secondary-foreground: var(--tb-white);
|
--secondary-foreground: var(--ds-white);
|
||||||
|
|
||||||
/* Accent/highlight */
|
/* Accent/highlight */
|
||||||
--accent: var(--tb-blue-light);
|
--accent: var(--ds-blue-light);
|
||||||
--accent-foreground: var(--tb-white);
|
--accent-foreground: var(--ds-white);
|
||||||
|
|
||||||
/* Focus ring */
|
/* Focus ring */
|
||||||
--ring: var(--tb-blue-light);
|
--ring: var(--ds-blue-light);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ============================================
|
/* ============================================
|
||||||
@@ -80,23 +80,23 @@
|
|||||||
============================================ */
|
============================================ */
|
||||||
:root {
|
:root {
|
||||||
/* Error states */
|
/* Error states */
|
||||||
--destructive: var(--tb-red);
|
--destructive: var(--ds-red);
|
||||||
--destructive-foreground: var(--tb-white);
|
--destructive-foreground: var(--ds-white);
|
||||||
--error: var(--tb-red);
|
--error: var(--ds-red);
|
||||||
--error-foreground: var(--tb-white);
|
--error-foreground: var(--ds-white);
|
||||||
|
|
||||||
/* Success states */
|
/* Success states */
|
||||||
--success: var(--tb-green);
|
--success: var(--ds-green);
|
||||||
--success-foreground: var(--tb-white);
|
--success-foreground: var(--ds-white);
|
||||||
|
|
||||||
/* Action buttons (run, etc) */
|
/* Action buttons (run, etc) */
|
||||||
--action: var(--tb-green);
|
--action: var(--ds-green);
|
||||||
--action-hover: var(--tb-green-light);
|
--action-hover: var(--ds-green-light);
|
||||||
--action-foreground: var(--tb-white);
|
--action-foreground: var(--ds-white);
|
||||||
|
|
||||||
/* Links */
|
/* Links */
|
||||||
--link: var(--tb-blue-bright);
|
--link: var(--ds-blue-bright);
|
||||||
--link-visited: var(--tb-blue-light);
|
--link-visited: var(--ds-blue-light);
|
||||||
|
|
||||||
/* Stale indicator */
|
/* Stale indicator */
|
||||||
--stale: rgba(221, 170, 51, 0.25);
|
--stale: rgba(221, 170, 51, 0.25);
|
||||||
@@ -122,7 +122,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background: var(--tb-navy) !important;
|
background: var(--ds-navy) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ============================================
|
/* ============================================
|
||||||
@@ -131,7 +131,7 @@ body {
|
|||||||
.cm-editor {
|
.cm-editor {
|
||||||
font-family: var(--marimo-monospace-font) !important;
|
font-family: var(--marimo-monospace-font) !important;
|
||||||
font-size: 14px !important;
|
font-size: 14px !important;
|
||||||
background: var(--tb-navy) !important;
|
background: var(--ds-navy) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cm-content {
|
.cm-content {
|
||||||
@@ -140,43 +140,43 @@ body {
|
|||||||
|
|
||||||
.cm-line {
|
.cm-line {
|
||||||
font-family: var(--marimo-monospace-font) !important;
|
font-family: var(--marimo-monospace-font) !important;
|
||||||
color: var(--tb-white) !important;
|
color: var(--ds-white) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cm-gutters {
|
.cm-gutters {
|
||||||
background: var(--tb-navy-light) !important;
|
background: var(--ds-navy-light) !important;
|
||||||
border-right: 2px solid var(--tb-slate) !important;
|
border-right: 2px solid var(--ds-slate) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cm-lineNumbers .cm-gutterElement {
|
.cm-lineNumbers .cm-gutterElement {
|
||||||
color: var(--tb-steel) !important;
|
color: var(--ds-steel) !important;
|
||||||
font-family: var(--marimo-monospace-font) !important;
|
font-family: var(--marimo-monospace-font) !important;
|
||||||
font-size: 12px !important;
|
font-size: 12px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Syntax highlighting */
|
/* Syntax highlighting */
|
||||||
.cm-keyword, .tok-keyword { color: var(--tb-blue-bright) !important; }
|
.cm-keyword, .tok-keyword { color: var(--ds-blue-bright) !important; }
|
||||||
.cm-string, .tok-string { color: var(--tb-green-light) !important; }
|
.cm-string, .tok-string { color: var(--ds-green-light) !important; }
|
||||||
.cm-number, .tok-number { color: var(--tb-yellow) !important; }
|
.cm-number, .tok-number { color: var(--ds-yellow) !important; }
|
||||||
.cm-comment, .tok-comment { color: var(--tb-steel) !important; font-style: italic !important; }
|
.cm-comment, .tok-comment { color: var(--ds-steel) !important; font-style: italic !important; }
|
||||||
.cm-function, .tok-function { color: var(--tb-white) !important; }
|
.cm-function, .tok-function { color: var(--ds-white) !important; }
|
||||||
.cm-variableName, .tok-variableName { color: var(--tb-white) !important; }
|
.cm-variableName, .tok-variableName { color: var(--ds-white) !important; }
|
||||||
.cm-operator, .tok-operator { color: var(--tb-blue-light) !important; }
|
.cm-operator, .tok-operator { color: var(--ds-blue-light) !important; }
|
||||||
.cm-propertyName, .tok-propertyName { color: var(--tb-blue-bright) !important; }
|
.cm-propertyName, .tok-propertyName { color: var(--ds-blue-bright) !important; }
|
||||||
.tok-standard, .cm-builtin { color: var(--tb-red-light) !important; }
|
.tok-standard, .cm-builtin { color: var(--ds-red-light) !important; }
|
||||||
.tok-definition, .cm-def { color: var(--tb-blue-bright) !important; }
|
.tok-definition, .cm-def { color: var(--ds-blue-bright) !important; }
|
||||||
.tok-typeName { color: var(--tb-yellow) !important; }
|
.tok-typeName { color: var(--ds-yellow) !important; }
|
||||||
.tok-bool { color: var(--tb-red-light) !important; }
|
.tok-bool { color: var(--ds-red-light) !important; }
|
||||||
|
|
||||||
/* Cursor */
|
/* Cursor */
|
||||||
.cm-cursor {
|
.cm-cursor {
|
||||||
border-left: 2px solid var(--tb-white) !important;
|
border-left: 2px solid var(--ds-white) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Selection */
|
/* Selection */
|
||||||
.cm-selectionBackground,
|
.cm-selectionBackground,
|
||||||
::selection {
|
::selection {
|
||||||
background: var(--tb-blue) !important;
|
background: var(--ds-blue) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Active line */
|
/* Active line */
|
||||||
@@ -189,29 +189,30 @@ body {
|
|||||||
============================================ */
|
============================================ */
|
||||||
h1, h2, h3, h4, h5, h6 {
|
h1, h2, h3, h4, h5, h6 {
|
||||||
font-family: var(--marimo-heading-font) !important;
|
font-family: var(--marimo-heading-font) !important;
|
||||||
|
font-weight: 600 !important;
|
||||||
letter-spacing: 0.5px !important;
|
letter-spacing: 0.5px !important;
|
||||||
line-height: 1.8 !important;
|
line-height: 1.8 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
font-size: 18px !important;
|
font-size: 18px !important;
|
||||||
color: var(--tb-white) !important;
|
color: var(--ds-white) !important;
|
||||||
}
|
}
|
||||||
h2 {
|
h2 {
|
||||||
font-size: 14px !important;
|
font-size: 14px !important;
|
||||||
color: var(--tb-blue-bright) !important;
|
color: var(--ds-blue-bright) !important;
|
||||||
}
|
}
|
||||||
h3 {
|
h3 {
|
||||||
font-size: 12px !important;
|
font-size: 12px !important;
|
||||||
color: var(--tb-white) !important;
|
color: var(--ds-white) !important;
|
||||||
}
|
}
|
||||||
h4, h5, h6 {
|
h4, h5, h6 {
|
||||||
font-size: 11px !important;
|
font-size: 11px !important;
|
||||||
color: var(--tb-white) !important;
|
color: var(--ds-white) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ============================================
|
/* ============================================
|
||||||
TABLES (Scoreboard style)
|
TABLES (Table styling)
|
||||||
============================================ */
|
============================================ */
|
||||||
table {
|
table {
|
||||||
border-collapse: collapse !important;
|
border-collapse: collapse !important;
|
||||||
@@ -219,26 +220,26 @@ table {
|
|||||||
}
|
}
|
||||||
|
|
||||||
th {
|
th {
|
||||||
background: var(--tb-blue) !important;
|
background: var(--ds-blue) !important;
|
||||||
color: var(--tb-white) !important;
|
color: var(--ds-white) !important;
|
||||||
font-family: var(--marimo-heading-font) !important;
|
font-family: var(--marimo-heading-font) !important;
|
||||||
font-size: 10px !important;
|
font-size: 10px !important;
|
||||||
padding: 10px 12px !important;
|
padding: 10px 12px !important;
|
||||||
text-transform: uppercase !important;
|
text-transform: uppercase !important;
|
||||||
letter-spacing: 1px !important;
|
letter-spacing: 1px !important;
|
||||||
border: 1px solid var(--tb-blue-light) !important;
|
border: 1px solid var(--ds-blue-light) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
td {
|
td {
|
||||||
background: var(--tb-navy) !important;
|
background: var(--ds-navy) !important;
|
||||||
color: var(--tb-white) !important;
|
color: var(--ds-white) !important;
|
||||||
padding: 8px 12px !important;
|
padding: 8px 12px !important;
|
||||||
border: 1px solid var(--tb-navy-light) !important;
|
border: 1px solid var(--ds-navy-light) !important;
|
||||||
font-size: 13px !important;
|
font-size: 13px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
tr:nth-child(even) td {
|
tr:nth-child(even) td {
|
||||||
background: var(--tb-navy-light) !important;
|
background: var(--ds-navy-light) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
tr:hover td {
|
tr:hover td {
|
||||||
@@ -261,15 +262,15 @@ button,
|
|||||||
button[data-variant="primary"],
|
button[data-variant="primary"],
|
||||||
button.primary,
|
button.primary,
|
||||||
[data-action="run"] {
|
[data-action="run"] {
|
||||||
background: var(--tb-green) !important;
|
background: var(--ds-green) !important;
|
||||||
color: var(--tb-white) !important;
|
color: var(--ds-white) !important;
|
||||||
border: 2px solid var(--tb-green-light) !important;
|
border: 2px solid var(--ds-green-light) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
button[data-variant="primary"]:hover,
|
button[data-variant="primary"]:hover,
|
||||||
button.primary:hover,
|
button.primary:hover,
|
||||||
[data-action="run"]:hover {
|
[data-action="run"]:hover {
|
||||||
background: var(--tb-green-light) !important;
|
background: var(--ds-green-light) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ============================================
|
/* ============================================
|
||||||
@@ -279,9 +280,9 @@ input,
|
|||||||
textarea,
|
textarea,
|
||||||
select {
|
select {
|
||||||
font-family: var(--marimo-monospace-font) !important;
|
font-family: var(--marimo-monospace-font) !important;
|
||||||
background: var(--tb-navy-mid) !important;
|
background: var(--ds-navy-mid) !important;
|
||||||
color: var(--tb-white) !important;
|
color: var(--ds-white) !important;
|
||||||
border: 2px solid var(--tb-slate) !important;
|
border: 2px solid var(--ds-slate) !important;
|
||||||
border-radius: 4px !important;
|
border-radius: 4px !important;
|
||||||
padding: 8px 12px !important;
|
padding: 8px 12px !important;
|
||||||
}
|
}
|
||||||
@@ -289,7 +290,7 @@ select {
|
|||||||
input:focus,
|
input:focus,
|
||||||
textarea:focus,
|
textarea:focus,
|
||||||
select:focus {
|
select:focus {
|
||||||
border-color: var(--tb-blue-light) !important;
|
border-color: var(--ds-blue-light) !important;
|
||||||
outline: none !important;
|
outline: none !important;
|
||||||
box-shadow: 0 0 0 2px rgba(85, 136, 221, 0.3) !important;
|
box-shadow: 0 0 0 2px rgba(85, 136, 221, 0.3) !important;
|
||||||
}
|
}
|
||||||
@@ -302,16 +303,16 @@ pre, code {
|
|||||||
}
|
}
|
||||||
|
|
||||||
code {
|
code {
|
||||||
background: var(--tb-navy-light) !important;
|
background: var(--ds-navy-light) !important;
|
||||||
color: var(--tb-blue-bright) !important;
|
color: var(--ds-blue-bright) !important;
|
||||||
padding: 2px 6px !important;
|
padding: 2px 6px !important;
|
||||||
border-radius: 3px !important;
|
border-radius: 3px !important;
|
||||||
font-size: 0.9em !important;
|
font-size: 0.9em !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
pre {
|
pre {
|
||||||
background: var(--tb-navy) !important;
|
background: var(--ds-navy) !important;
|
||||||
border: 2px solid var(--tb-slate) !important;
|
border: 2px solid var(--ds-slate) !important;
|
||||||
border-radius: 4px !important;
|
border-radius: 4px !important;
|
||||||
padding: 12px !important;
|
padding: 12px !important;
|
||||||
}
|
}
|
||||||
@@ -325,18 +326,18 @@ pre code {
|
|||||||
LINKS
|
LINKS
|
||||||
============================================ */
|
============================================ */
|
||||||
a {
|
a {
|
||||||
color: var(--tb-blue-bright) !important;
|
color: var(--ds-blue-bright) !important;
|
||||||
text-decoration: none !important;
|
text-decoration: none !important;
|
||||||
transition: color 0.15s ease !important;
|
transition: color 0.15s ease !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
a:hover {
|
a:hover {
|
||||||
color: var(--tb-white) !important;
|
color: var(--ds-white) !important;
|
||||||
text-decoration: underline !important;
|
text-decoration: underline !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
a:visited {
|
a:visited {
|
||||||
color: var(--tb-blue-light) !important;
|
color: var(--ds-blue-light) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ============================================
|
/* ============================================
|
||||||
@@ -348,17 +349,17 @@ a:visited {
|
|||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar-track {
|
::-webkit-scrollbar-track {
|
||||||
background: var(--tb-navy-light);
|
background: var(--ds-navy-light);
|
||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb {
|
::-webkit-scrollbar-thumb {
|
||||||
background: var(--tb-slate);
|
background: var(--ds-slate);
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
border: 2px solid var(--tb-navy-light);
|
border: 2px solid var(--ds-navy-light);
|
||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb:hover {
|
::-webkit-scrollbar-thumb:hover {
|
||||||
background: var(--tb-steel);
|
background: var(--ds-steel);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ============================================
|
/* ============================================
|
||||||
@@ -370,17 +371,17 @@ a:visited {
|
|||||||
[data-state="open"][data-side] {
|
[data-state="open"][data-side] {
|
||||||
font-family: var(--marimo-monospace-font) !important;
|
font-family: var(--marimo-monospace-font) !important;
|
||||||
font-size: 12px !important;
|
font-size: 12px !important;
|
||||||
background: var(--tb-navy-light) !important;
|
background: var(--ds-navy-light) !important;
|
||||||
color: var(--tb-white) !important;
|
color: var(--ds-white) !important;
|
||||||
border: 2px solid var(--tb-slate) !important;
|
border: 2px solid var(--ds-slate) !important;
|
||||||
border-radius: 4px !important;
|
border-radius: 4px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Dropdown menus */
|
/* Dropdown menus */
|
||||||
[role="menu"],
|
[role="menu"],
|
||||||
[role="listbox"] {
|
[role="listbox"] {
|
||||||
background: var(--tb-navy-light) !important;
|
background: var(--ds-navy-light) !important;
|
||||||
border: 2px solid var(--tb-slate) !important;
|
border: 2px solid var(--ds-slate) !important;
|
||||||
border-radius: 4px !important;
|
border-radius: 4px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -388,8 +389,8 @@ a:visited {
|
|||||||
[role="option"]:hover,
|
[role="option"]:hover,
|
||||||
[role="menuitem"][data-highlighted],
|
[role="menuitem"][data-highlighted],
|
||||||
[role="option"][data-highlighted] {
|
[role="option"][data-highlighted] {
|
||||||
background: var(--tb-blue) !important;
|
background: var(--ds-blue) !important;
|
||||||
color: var(--tb-white) !important;
|
color: var(--ds-white) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Badges and pills */
|
/* Badges and pills */
|
||||||
@@ -403,7 +404,7 @@ a:visited {
|
|||||||
|
|
||||||
/* Focus visible for accessibility */
|
/* Focus visible for accessibility */
|
||||||
:focus-visible {
|
:focus-visible {
|
||||||
outline: 2px solid var(--tb-blue-light) !important;
|
outline: 2px solid var(--ds-blue-light) !important;
|
||||||
outline-offset: 2px !important;
|
outline-offset: 2px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -413,7 +414,7 @@ a:visited {
|
|||||||
[data-testid="outputs"],
|
[data-testid="outputs"],
|
||||||
.output-area {
|
.output-area {
|
||||||
background: rgba(22, 32, 64, 0.5) !important;
|
background: rgba(22, 32, 64, 0.5) !important;
|
||||||
border-top: 2px solid var(--tb-slate) !important;
|
border-top: 2px solid var(--ds-slate) !important;
|
||||||
padding: 12px !important;
|
padding: 12px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -433,20 +434,20 @@ svg {
|
|||||||
HOME PAGE - "CREATE NEW NOTEBOOK" CARD
|
HOME PAGE - "CREATE NEW NOTEBOOK" CARD
|
||||||
============================================ */
|
============================================ */
|
||||||
a[rel="noreferrer"][target="_blank"] {
|
a[rel="noreferrer"][target="_blank"] {
|
||||||
background: var(--tb-navy-light) !important;
|
background: var(--ds-navy-light) !important;
|
||||||
border: 3px solid var(--tb-slate) !important;
|
border: 3px solid var(--ds-slate) !important;
|
||||||
border-radius: 0 !important;
|
border-radius: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
a[rel="noreferrer"][target="_blank"]:hover {
|
a[rel="noreferrer"][target="_blank"]:hover {
|
||||||
border-color: var(--tb-blue) !important;
|
border-color: var(--ds-blue) !important;
|
||||||
background: var(--tb-navy-mid) !important;
|
background: var(--ds-navy-mid) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
a[rel="noreferrer"][target="_blank"] h2 {
|
a[rel="noreferrer"][target="_blank"] h2 {
|
||||||
font-family: var(--marimo-heading-font) !important;
|
font-family: var(--marimo-heading-font) !important;
|
||||||
font-size: 12px !important;
|
font-size: 12px !important;
|
||||||
color: var(--tb-white) !important;
|
color: var(--ds-white) !important;
|
||||||
text-transform: uppercase !important;
|
text-transform: uppercase !important;
|
||||||
letter-spacing: 2px !important;
|
letter-spacing: 2px !important;
|
||||||
}
|
}
|
||||||
@@ -459,30 +460,30 @@ h2.text-xl {
|
|||||||
font-size: 11px !important;
|
font-size: 11px !important;
|
||||||
text-transform: uppercase !important;
|
text-transform: uppercase !important;
|
||||||
letter-spacing: 2px !important;
|
letter-spacing: 2px !important;
|
||||||
color: var(--tb-white) !important;
|
color: var(--ds-white) !important;
|
||||||
padding-bottom: 6px;
|
padding-bottom: 6px;
|
||||||
border-bottom: 2px solid var(--tb-slate);
|
border-bottom: 2px solid var(--ds-slate);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ============================================
|
/* ============================================
|
||||||
HOME PAGE - FILE LISTS (notebook lists)
|
HOME PAGE - FILE LISTS (notebook lists)
|
||||||
============================================ */
|
============================================ */
|
||||||
.divide-y.border.rounded {
|
.divide-y.border.rounded {
|
||||||
border: 3px solid var(--tb-slate) !important;
|
border: 3px solid var(--ds-slate) !important;
|
||||||
border-radius: 0 !important;
|
border-radius: 0 !important;
|
||||||
background: var(--tb-navy) !important;
|
background: var(--ds-navy) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.divide-y.border > a,
|
.divide-y.border > a,
|
||||||
.divide-y.border > div > a {
|
.divide-y.border > div > a {
|
||||||
border-color: var(--tb-navy-light) !important;
|
border-color: var(--ds-navy-light) !important;
|
||||||
transition: all 0.1s ease !important;
|
transition: all 0.1s ease !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.divide-y.border > a:hover,
|
.divide-y.border > a:hover,
|
||||||
.divide-y.border > div > a:hover {
|
.divide-y.border > div > a:hover {
|
||||||
background: rgba(51, 102, 204, 0.2) !important;
|
background: rgba(51, 102, 204, 0.2) !important;
|
||||||
border-left: 3px solid var(--tb-blue) !important;
|
border-left: 3px solid var(--ds-blue) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.divide-y.border a .flex-1 span {
|
.divide-y.border a .flex-1 span {
|
||||||
@@ -502,7 +503,7 @@ h2.text-xl {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* ============================================
|
/* ============================================
|
||||||
PIXEL-PERFECT BORDERS
|
BORDERS
|
||||||
============================================ */
|
============================================ */
|
||||||
.rounded-lg,
|
.rounded-lg,
|
||||||
.rounded-md {
|
.rounded-md {
|
||||||
@@ -518,33 +519,33 @@ h2.text-xl {
|
|||||||
TOP BAR / ACTION BUTTONS
|
TOP BAR / ACTION BUTTONS
|
||||||
============================================ */
|
============================================ */
|
||||||
.absolute.top-3.right-5 button {
|
.absolute.top-3.right-5 button {
|
||||||
border: 2px solid var(--tb-slate) !important;
|
border: 2px solid var(--ds-slate) !important;
|
||||||
border-radius: 0 !important;
|
border-radius: 0 !important;
|
||||||
background: var(--tb-navy-light) !important;
|
background: var(--ds-navy-light) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.absolute.top-3.right-5 button:hover {
|
.absolute.top-3.right-5 button:hover {
|
||||||
background: var(--tb-blue) !important;
|
background: var(--ds-blue) !important;
|
||||||
border-color: var(--tb-blue-light) !important;
|
border-color: var(--ds-blue-light) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ============================================
|
/* ============================================
|
||||||
SEARCH INPUT
|
SEARCH INPUT
|
||||||
============================================ */
|
============================================ */
|
||||||
input#search {
|
input#search {
|
||||||
border: 3px solid var(--tb-slate) !important;
|
border: 3px solid var(--ds-slate) !important;
|
||||||
border-radius: 0 !important;
|
border-radius: 0 !important;
|
||||||
background: var(--tb-navy) !important;
|
background: var(--ds-navy) !important;
|
||||||
font-family: var(--marimo-monospace-font) !important;
|
font-family: var(--marimo-monospace-font) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
input#search:focus {
|
input#search:focus {
|
||||||
border-color: var(--tb-blue-light) !important;
|
border-color: var(--ds-blue-light) !important;
|
||||||
box-shadow: 0 0 8px rgba(85, 136, 221, 0.3) !important;
|
box-shadow: 0 0 8px rgba(85, 136, 221, 0.3) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ============================================
|
/* ============================================
|
||||||
BUTTON PRESS EFFECT
|
BUTTON STATES
|
||||||
============================================ */
|
============================================ */
|
||||||
button:active,
|
button:active,
|
||||||
[role="button"]:active {
|
[role="button"]:active {
|
||||||
@@ -55,7 +55,7 @@ theme = "dark"
|
|||||||
default_table_page_size = 10
|
default_table_page_size = 10
|
||||||
default_table_max_columns = 50
|
default_table_max_columns = 50
|
||||||
reference_highlighting = true
|
reference_highlighting = true
|
||||||
custom_css = ["/home/kert/.config/marimo/retro-arcade.css"]
|
custom_css = ["/home/kert/.config/marimo/loch.css"]
|
||||||
code_editor_font_size = 14
|
code_editor_font_size = 14
|
||||||
|
|
||||||
[keymap]
|
[keymap]
|
||||||
|
|||||||
@@ -1,3 +1,3 @@
|
|||||||
[display]
|
[display]
|
||||||
theme = "dark"
|
theme = "dark"
|
||||||
custom_css = ["/home/kert/.config/marimo/retro-arcade.css"]
|
custom_css = ["/home/kert/.config/marimo/loch.css"]
|
||||||
|
|||||||
@@ -46,7 +46,7 @@ RUN uv python install ${PYTHON_VERSION} \
|
|||||||
# Create marimo config directory and config
|
# Create marimo config directory and config
|
||||||
RUN mkdir -p /home/${USERNAME}/.config/marimo
|
RUN mkdir -p /home/${USERNAME}/.config/marimo
|
||||||
COPY --chown=${USER_UID}:${USER_GID} .marimo.toml /home/${USERNAME}/.config/marimo/marimo.toml
|
COPY --chown=${USER_UID}:${USER_GID} .marimo.toml /home/${USERNAME}/.config/marimo/marimo.toml
|
||||||
COPY --chown=${USER_UID}:${USER_GID} .marimo-config/retro-arcade.css /home/${USERNAME}/.config/marimo/retro-arcade.css
|
COPY --chown=${USER_UID}:${USER_GID} .marimo-config/loch.css /home/${USERNAME}/.config/marimo/loch.css
|
||||||
|
|
||||||
EXPOSE 2718
|
EXPOSE 2718
|
||||||
|
|
||||||
|
|||||||
@@ -1,21 +1,20 @@
|
|||||||
/* THROWBACK THEME — Dashboard (nginx landing page)
|
/* LOCH — deep-navy design system for Dashboard (nginx landing page) */
|
||||||
Extracted from nginx/index.html inline styles */
|
|
||||||
|
|
||||||
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=IBM+Plex+Mono:wght@400;500;600&display=swap');
|
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap');
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
--tb-navy: #0a1628;
|
--ds-navy: #0a1628;
|
||||||
--tb-navy-light: #162040;
|
--ds-navy-light: #162040;
|
||||||
--tb-navy-mid: #1e2d50;
|
--ds-navy-mid: #1e2d50;
|
||||||
--tb-slate: #2a3f5f;
|
--ds-slate: #2a3f5f;
|
||||||
--tb-steel: #5a7090;
|
--ds-steel: #5a7090;
|
||||||
--tb-white: #f0f0f0;
|
--ds-white: #f0f0f0;
|
||||||
--tb-blue: #3366cc;
|
--ds-blue: #3366cc;
|
||||||
--tb-blue-light: #5588dd;
|
--ds-blue-light: #5588dd;
|
||||||
--tb-blue-bright: #88aaee;
|
--ds-blue-bright: #88aaee;
|
||||||
--tb-red: #cc2244;
|
--ds-red: #cc2244;
|
||||||
--tb-red-light: #dd4466;
|
--ds-red-light: #dd4466;
|
||||||
--tb-green: #44aa44;
|
--ds-green: #44aa44;
|
||||||
}
|
}
|
||||||
|
|
||||||
* {
|
* {
|
||||||
@@ -26,10 +25,10 @@
|
|||||||
|
|
||||||
body {
|
body {
|
||||||
font-family: 'IBM Plex Mono', 'Courier New', monospace;
|
font-family: 'IBM Plex Mono', 'Courier New', monospace;
|
||||||
background: var(--tb-navy);
|
background: var(--ds-navy);
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
color: var(--tb-white);
|
color: var(--ds-white);
|
||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
@@ -41,20 +40,21 @@ body {
|
|||||||
header {
|
header {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 40px 20px;
|
padding: 40px 20px;
|
||||||
border-bottom: 4px solid var(--tb-red);
|
border-bottom: 4px solid var(--ds-red);
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
font-family: 'Press Start 2P', monospace;
|
font-family: 'IBM Plex Mono', monospace;
|
||||||
|
font-weight: 600;
|
||||||
font-size: 2rem;
|
font-size: 2rem;
|
||||||
color: var(--tb-white);
|
color: var(--ds-white);
|
||||||
letter-spacing: 6px;
|
letter-spacing: 6px;
|
||||||
text-shadow: 3px 3px 0 var(--tb-navy-mid);
|
text-shadow: 3px 3px 0 var(--ds-navy-mid);
|
||||||
}
|
}
|
||||||
|
|
||||||
.subtitle {
|
.subtitle {
|
||||||
font-family: 'Press Start 2P', monospace;
|
font-family: 'IBM Plex Mono', monospace;
|
||||||
color: var(--tb-blue-bright);
|
color: var(--ds-blue-bright);
|
||||||
font-size: 0.55rem;
|
font-size: 0.55rem;
|
||||||
margin-top: 15px;
|
margin-top: 15px;
|
||||||
letter-spacing: 2px;
|
letter-spacing: 2px;
|
||||||
@@ -65,15 +65,15 @@ h1 {
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
gap: 40px;
|
gap: 40px;
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
font-family: 'Press Start 2P', monospace;
|
font-family: 'IBM Plex Mono', monospace;
|
||||||
font-size: 0.5rem;
|
font-size: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.score-item {
|
.score-item {
|
||||||
color: var(--tb-white);
|
color: var(--ds-white);
|
||||||
background: var(--tb-blue);
|
background: var(--ds-blue);
|
||||||
padding: 6px 14px;
|
padding: 6px 14px;
|
||||||
border: 2px solid var(--tb-blue-light);
|
border: 2px solid var(--ds-blue-light);
|
||||||
}
|
}
|
||||||
|
|
||||||
.grid {
|
.grid {
|
||||||
@@ -85,8 +85,8 @@ h1 {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.tile {
|
.tile {
|
||||||
background: var(--tb-navy-light);
|
background: var(--ds-navy-light);
|
||||||
border: 3px solid var(--tb-slate);
|
border: 3px solid var(--ds-slate);
|
||||||
padding: 25px;
|
padding: 25px;
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
@@ -97,8 +97,8 @@ h1 {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.tile:hover {
|
.tile:hover {
|
||||||
border-color: var(--tb-blue);
|
border-color: var(--ds-blue);
|
||||||
background: var(--tb-navy-mid);
|
background: var(--ds-navy-mid);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* All tile variants use the same base style */
|
/* All tile variants use the same base style */
|
||||||
@@ -109,36 +109,36 @@ h1 {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.tile.storage .icon,
|
.tile.storage .icon,
|
||||||
.tile.database .icon { color: var(--tb-red); }
|
.tile.database .icon { color: var(--ds-red); }
|
||||||
.tile.git .icon { color: var(--tb-blue-bright); }
|
.tile.git .icon { color: var(--ds-blue-bright); }
|
||||||
.tile.ci .icon { color: var(--tb-blue-light); }
|
.tile.ci .icon { color: var(--ds-blue-light); }
|
||||||
.tile.notebook .icon,
|
.tile.notebook .icon,
|
||||||
.tile.research .icon { color: var(--tb-white); }
|
.tile.research .icon { color: var(--ds-white); }
|
||||||
.tile.catalog .icon { color: var(--tb-blue-bright); }
|
.tile.catalog .icon { color: var(--ds-blue-bright); }
|
||||||
.tile.query .icon { color: var(--tb-blue-light); }
|
.tile.query .icon { color: var(--ds-blue-light); }
|
||||||
.tile.observability .icon { color: var(--tb-red-light); }
|
.tile.observability .icon { color: var(--ds-red-light); }
|
||||||
.tile.metrics .icon { color: var(--tb-blue-bright); }
|
.tile.metrics .icon { color: var(--ds-blue-bright); }
|
||||||
.tile.logs .icon { color: var(--tb-blue-light); }
|
.tile.logs .icon { color: var(--ds-blue-light); }
|
||||||
.tile.proxy .icon { color: var(--tb-white); }
|
.tile.proxy .icon { color: var(--ds-white); }
|
||||||
|
|
||||||
.tile-title {
|
.tile-title {
|
||||||
font-family: 'Press Start 2P', monospace;
|
font-family: 'IBM Plex Mono', monospace;
|
||||||
font-size: 0.7rem;
|
font-size: 0.7rem;
|
||||||
color: var(--tb-white);
|
color: var(--ds-white);
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
letter-spacing: 1px;
|
letter-spacing: 1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tile-desc {
|
.tile-desc {
|
||||||
font-size: 0.75rem;
|
font-size: 0.75rem;
|
||||||
color: var(--tb-steel);
|
color: var(--ds-steel);
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
margin-bottom: 15px;
|
margin-bottom: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tile-port {
|
.tile-port {
|
||||||
font-size: 0.7rem;
|
font-size: 0.7rem;
|
||||||
color: var(--tb-blue-bright);
|
color: var(--ds-blue-bright);
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -148,7 +148,7 @@ h1 {
|
|||||||
right: 15px;
|
right: 15px;
|
||||||
width: 10px;
|
width: 10px;
|
||||||
height: 10px;
|
height: 10px;
|
||||||
background: var(--tb-green);
|
background: var(--ds-green);
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -158,20 +158,20 @@ h1 {
|
|||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
height: 3px;
|
height: 3px;
|
||||||
background: var(--tb-red);
|
background: var(--ds-red);
|
||||||
}
|
}
|
||||||
|
|
||||||
footer {
|
footer {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 40px;
|
padding: 40px;
|
||||||
color: var(--tb-slate);
|
color: var(--ds-slate);
|
||||||
font-size: 0.7rem;
|
font-size: 0.7rem;
|
||||||
border-top: 3px solid var(--tb-slate);
|
border-top: 3px solid var(--ds-slate);
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
footer span {
|
footer span {
|
||||||
color: var(--tb-red);
|
color: var(--ds-red);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Badges */
|
/* Badges */
|
||||||
@@ -179,14 +179,14 @@ footer span {
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
top: -1px;
|
top: -1px;
|
||||||
left: 20px;
|
left: 20px;
|
||||||
font-family: 'Press Start 2P', monospace;
|
font-family: 'IBM Plex Mono', monospace;
|
||||||
color: var(--tb-white);
|
color: var(--ds-white);
|
||||||
font-size: 0.35rem;
|
font-size: 0.35rem;
|
||||||
padding: 4px 8px;
|
padding: 4px 8px;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
letter-spacing: 1px;
|
letter-spacing: 1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.badge.new { background: var(--tb-red); }
|
.badge.new { background: var(--ds-red); }
|
||||||
.badge.gpu { background: var(--tb-blue); }
|
.badge.gpu { background: var(--ds-blue); }
|
||||||
.badge.data { background: var(--tb-blue); }
|
.badge.data { background: var(--ds-blue); }
|
||||||
|
|||||||
233
styles/gitea.css
233
styles/gitea.css
@@ -1,81 +1,81 @@
|
|||||||
/* THROWBACK THEME FOR GITEA - Tecmo Super Bowl */
|
/* LOCH — deep-navy design system for Gitea */
|
||||||
|
|
||||||
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=IBM+Plex+Mono:wght@400;500;600&display=swap');
|
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap');
|
||||||
|
|
||||||
/* Theme metadata */
|
/* Theme metadata */
|
||||||
gitea-theme-meta-info {
|
gitea-theme-meta-info {
|
||||||
--theme-display-name: "Throwback";
|
--theme-display-name: "Loch";
|
||||||
}
|
}
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
--is-dark-theme: true;
|
--is-dark-theme: true;
|
||||||
|
|
||||||
/* Throwback Color Palette */
|
/* Loch Color Palette */
|
||||||
--tb-navy: #0a1628;
|
--ds-navy: #0a1628;
|
||||||
--tb-navy-light: #162040;
|
--ds-navy-light: #162040;
|
||||||
--tb-navy-mid: #1e2d50;
|
--ds-navy-mid: #1e2d50;
|
||||||
--tb-slate: #2a3f5f;
|
--ds-slate: #2a3f5f;
|
||||||
--tb-steel: #5a7090;
|
--ds-steel: #5a7090;
|
||||||
--tb-white: #f0f0f0;
|
--ds-white: #f0f0f0;
|
||||||
|
|
||||||
--tb-blue: #3366cc;
|
--ds-blue: #3366cc;
|
||||||
--tb-blue-light: #5588dd;
|
--ds-blue-light: #5588dd;
|
||||||
--tb-blue-bright: #88aaee;
|
--ds-blue-bright: #88aaee;
|
||||||
|
|
||||||
--tb-red: #cc2244;
|
--ds-red: #cc2244;
|
||||||
--tb-red-light: #dd4466;
|
--ds-red-light: #dd4466;
|
||||||
|
|
||||||
--tb-green: #44aa44;
|
--ds-green: #44aa44;
|
||||||
--tb-green-light: #66cc66;
|
--ds-green-light: #66cc66;
|
||||||
--tb-yellow: #ddaa33;
|
--ds-yellow: #ddaa33;
|
||||||
|
|
||||||
/* Gitea color mappings */
|
/* Gitea color mappings */
|
||||||
--color-primary: var(--tb-blue);
|
--color-primary: var(--ds-blue);
|
||||||
--color-primary-light: var(--tb-blue-light);
|
--color-primary-light: var(--ds-blue-light);
|
||||||
--color-primary-dark: #2255aa;
|
--color-primary-dark: #2255aa;
|
||||||
--color-primary-alpha-10: rgba(51, 102, 204, 0.1);
|
--color-primary-alpha-10: rgba(51, 102, 204, 0.1);
|
||||||
--color-primary-alpha-20: rgba(51, 102, 204, 0.2);
|
--color-primary-alpha-20: rgba(51, 102, 204, 0.2);
|
||||||
--color-primary-alpha-40: rgba(51, 102, 204, 0.4);
|
--color-primary-alpha-40: rgba(51, 102, 204, 0.4);
|
||||||
|
|
||||||
--color-secondary: var(--tb-slate);
|
--color-secondary: var(--ds-slate);
|
||||||
--color-secondary-light: var(--tb-steel);
|
--color-secondary-light: var(--ds-steel);
|
||||||
--color-secondary-dark: var(--tb-navy-light);
|
--color-secondary-dark: var(--ds-navy-light);
|
||||||
|
|
||||||
/* Background colors */
|
/* Background colors */
|
||||||
--color-body: var(--tb-navy);
|
--color-body: var(--ds-navy);
|
||||||
--color-box-body: var(--tb-navy);
|
--color-box-body: var(--ds-navy);
|
||||||
--color-box-header: var(--tb-navy-light);
|
--color-box-header: var(--ds-navy-light);
|
||||||
|
|
||||||
/* Text colors */
|
/* Text colors */
|
||||||
--color-text: var(--tb-white);
|
--color-text: var(--ds-white);
|
||||||
--color-text-light: var(--tb-steel);
|
--color-text-light: var(--ds-steel);
|
||||||
--color-text-dark: var(--tb-white);
|
--color-text-dark: var(--ds-white);
|
||||||
|
|
||||||
/* Input colors */
|
/* Input colors */
|
||||||
--color-input-text: var(--tb-white);
|
--color-input-text: var(--ds-white);
|
||||||
--color-input-background: var(--tb-navy-mid);
|
--color-input-background: var(--ds-navy-mid);
|
||||||
--color-input-border: var(--tb-slate);
|
--color-input-border: var(--ds-slate);
|
||||||
|
|
||||||
/* Status colors */
|
/* Status colors */
|
||||||
--color-success: var(--tb-green);
|
--color-success: var(--ds-green);
|
||||||
--color-success-text: var(--tb-white);
|
--color-success-text: var(--ds-white);
|
||||||
--color-warning: var(--tb-yellow);
|
--color-warning: var(--ds-yellow);
|
||||||
--color-warning-text: var(--tb-navy);
|
--color-warning-text: var(--ds-navy);
|
||||||
--color-error: var(--tb-red);
|
--color-error: var(--ds-red);
|
||||||
--color-error-text: var(--tb-white);
|
--color-error-text: var(--ds-white);
|
||||||
--color-info: var(--tb-blue-light);
|
--color-info: var(--ds-blue-light);
|
||||||
--color-info-text: var(--tb-white);
|
--color-info-text: var(--ds-white);
|
||||||
|
|
||||||
/* Border */
|
/* Border */
|
||||||
--color-border: var(--tb-slate);
|
--color-border: var(--ds-slate);
|
||||||
|
|
||||||
/* Link colors */
|
/* Link colors */
|
||||||
--color-link: var(--tb-blue-bright);
|
--color-link: var(--ds-blue-bright);
|
||||||
--color-link-hover: var(--tb-white);
|
--color-link-hover: var(--ds-white);
|
||||||
|
|
||||||
/* Code */
|
/* Code */
|
||||||
--color-code-bg: var(--tb-navy-light);
|
--color-code-bg: var(--ds-navy-light);
|
||||||
--color-code-border: var(--tb-slate);
|
--color-code-border: var(--ds-slate);
|
||||||
|
|
||||||
/* Shadows */
|
/* Shadows */
|
||||||
--color-shadow: rgba(0, 0, 0, 0.4);
|
--color-shadow: rgba(0, 0, 0, 0.4);
|
||||||
@@ -84,40 +84,41 @@ gitea-theme-meta-info {
|
|||||||
/* Global styles */
|
/* Global styles */
|
||||||
body {
|
body {
|
||||||
font-family: 'IBM Plex Mono', monospace !important;
|
font-family: 'IBM Plex Mono', monospace !important;
|
||||||
background: var(--tb-navy) !important;
|
background: var(--ds-navy) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Headings */
|
/* Headings */
|
||||||
h1, h2, h3, h4, h5, h6,
|
h1, h2, h3, h4, h5, h6,
|
||||||
.header-wrapper .header {
|
.header-wrapper .header {
|
||||||
font-family: 'Press Start 2P', monospace !important;
|
font-family: 'IBM Plex Mono', monospace !important;
|
||||||
|
font-weight: 600 !important;
|
||||||
letter-spacing: 0.5px !important;
|
letter-spacing: 0.5px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 { font-size: 18px !important; color: var(--tb-white) !important; }
|
h1 { font-size: 18px !important; color: var(--ds-white) !important; }
|
||||||
h2 { font-size: 14px !important; color: var(--tb-blue-bright) !important; }
|
h2 { font-size: 14px !important; color: var(--ds-blue-bright) !important; }
|
||||||
h3 { font-size: 12px !important; color: var(--tb-white) !important; }
|
h3 { font-size: 12px !important; color: var(--ds-white) !important; }
|
||||||
|
|
||||||
/* Navbar */
|
/* Navbar */
|
||||||
.ui.secondary.menu.navbar,
|
.ui.secondary.menu.navbar,
|
||||||
.navbar {
|
.navbar {
|
||||||
background: var(--tb-navy-light) !important;
|
background: var(--ds-navy-light) !important;
|
||||||
border-bottom: 3px solid var(--tb-slate) !important;
|
border-bottom: 3px solid var(--ds-slate) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar .item {
|
.navbar .item {
|
||||||
font-family: 'IBM Plex Mono', monospace !important;
|
font-family: 'IBM Plex Mono', monospace !important;
|
||||||
color: var(--tb-white) !important;
|
color: var(--ds-white) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar .item:hover {
|
.navbar .item:hover {
|
||||||
background: var(--tb-navy-mid) !important;
|
background: var(--ds-navy-mid) !important;
|
||||||
color: var(--tb-blue-bright) !important;
|
color: var(--ds-blue-bright) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar .item.active {
|
.navbar .item.active {
|
||||||
background: var(--tb-blue) !important;
|
background: var(--ds-blue) !important;
|
||||||
color: var(--tb-white) !important;
|
color: var(--ds-white) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Buttons */
|
/* Buttons */
|
||||||
@@ -131,31 +132,31 @@ h3 { font-size: 12px !important; color: var(--tb-white) !important; }
|
|||||||
|
|
||||||
.ui.primary.button,
|
.ui.primary.button,
|
||||||
.ui.blue.button {
|
.ui.blue.button {
|
||||||
background: var(--tb-blue) !important;
|
background: var(--ds-blue) !important;
|
||||||
color: var(--tb-white) !important;
|
color: var(--ds-white) !important;
|
||||||
border: 2px solid var(--tb-blue-light) !important;
|
border: 2px solid var(--ds-blue-light) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ui.primary.button:hover,
|
.ui.primary.button:hover,
|
||||||
.ui.blue.button:hover {
|
.ui.blue.button:hover {
|
||||||
background: var(--tb-blue-light) !important;
|
background: var(--ds-blue-light) !important;
|
||||||
color: var(--tb-white) !important;
|
color: var(--ds-white) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ui.green.button {
|
.ui.green.button {
|
||||||
background: var(--tb-green) !important;
|
background: var(--ds-green) !important;
|
||||||
color: var(--tb-white) !important;
|
color: var(--ds-white) !important;
|
||||||
border: 2px solid var(--tb-green-light) !important;
|
border: 2px solid var(--ds-green-light) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ui.green.button:hover {
|
.ui.green.button:hover {
|
||||||
background: var(--tb-green-light) !important;
|
background: var(--ds-green-light) !important;
|
||||||
color: var(--tb-navy) !important;
|
color: var(--ds-navy) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ui.red.button {
|
.ui.red.button {
|
||||||
background: var(--tb-red) !important;
|
background: var(--ds-red) !important;
|
||||||
color: var(--tb-white) !important;
|
color: var(--ds-white) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Segments and boxes */
|
/* Segments and boxes */
|
||||||
@@ -163,39 +164,39 @@ h3 { font-size: 12px !important; color: var(--tb-white) !important; }
|
|||||||
.ui.segments,
|
.ui.segments,
|
||||||
.repository,
|
.repository,
|
||||||
.box {
|
.box {
|
||||||
background: var(--tb-navy) !important;
|
background: var(--ds-navy) !important;
|
||||||
border: 2px solid var(--tb-slate) !important;
|
border: 2px solid var(--ds-slate) !important;
|
||||||
border-radius: 4px !important;
|
border-radius: 4px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ui.attached.header,
|
.ui.attached.header,
|
||||||
.box-header {
|
.box-header {
|
||||||
background: var(--tb-navy-light) !important;
|
background: var(--ds-navy-light) !important;
|
||||||
border-bottom: 2px solid var(--tb-slate) !important;
|
border-bottom: 2px solid var(--ds-slate) !important;
|
||||||
font-family: 'Press Start 2P', monospace !important;
|
font-family: 'IBM Plex Mono', monospace !important;
|
||||||
font-size: 11px !important;
|
font-size: 11px !important;
|
||||||
color: var(--tb-white) !important;
|
color: var(--ds-white) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Tables */
|
/* Tables */
|
||||||
.ui.table {
|
.ui.table {
|
||||||
background: var(--tb-navy) !important;
|
background: var(--ds-navy) !important;
|
||||||
border: 2px solid var(--tb-slate) !important;
|
border: 2px solid var(--ds-slate) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ui.table th {
|
.ui.table th {
|
||||||
background: var(--tb-blue) !important;
|
background: var(--ds-blue) !important;
|
||||||
color: var(--tb-white) !important;
|
color: var(--ds-white) !important;
|
||||||
font-family: 'Press Start 2P', monospace !important;
|
font-family: 'IBM Plex Mono', monospace !important;
|
||||||
font-size: 10px !important;
|
font-size: 10px !important;
|
||||||
text-transform: uppercase !important;
|
text-transform: uppercase !important;
|
||||||
border: 1px solid var(--tb-blue-light) !important;
|
border: 1px solid var(--ds-blue-light) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ui.table td {
|
.ui.table td {
|
||||||
background: var(--tb-navy) !important;
|
background: var(--ds-navy) !important;
|
||||||
color: var(--tb-white) !important;
|
color: var(--ds-white) !important;
|
||||||
border: 1px solid var(--tb-navy-light) !important;
|
border: 1px solid var(--ds-navy-light) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ui.table tr:hover td {
|
.ui.table tr:hover td {
|
||||||
@@ -208,17 +209,17 @@ h3 { font-size: 12px !important; color: var(--tb-white) !important; }
|
|||||||
.ui.form select,
|
.ui.form select,
|
||||||
.ui.input input {
|
.ui.input input {
|
||||||
font-family: 'IBM Plex Mono', monospace !important;
|
font-family: 'IBM Plex Mono', monospace !important;
|
||||||
background: var(--tb-navy-mid) !important;
|
background: var(--ds-navy-mid) !important;
|
||||||
color: var(--tb-white) !important;
|
color: var(--ds-white) !important;
|
||||||
border: 2px solid var(--tb-slate) !important;
|
border: 2px solid var(--ds-slate) !important;
|
||||||
border-radius: 4px !important;
|
border-radius: 4px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ui.form input:focus,
|
.ui.form input:focus,
|
||||||
.ui.form textarea:focus,
|
.ui.form textarea:focus,
|
||||||
.ui.input input:focus {
|
.ui.input input:focus {
|
||||||
border-color: var(--tb-blue-light) !important;
|
border-color: var(--ds-blue-light) !important;
|
||||||
background: var(--tb-navy-mid) !important;
|
background: var(--ds-navy-mid) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Labels */
|
/* Labels */
|
||||||
@@ -229,16 +230,16 @@ h3 { font-size: 12px !important; color: var(--tb-white) !important; }
|
|||||||
|
|
||||||
/* Dropdowns */
|
/* Dropdowns */
|
||||||
.ui.dropdown .menu {
|
.ui.dropdown .menu {
|
||||||
background: var(--tb-navy-light) !important;
|
background: var(--ds-navy-light) !important;
|
||||||
border: 2px solid var(--tb-slate) !important;
|
border: 2px solid var(--ds-slate) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ui.dropdown .menu .item {
|
.ui.dropdown .menu .item {
|
||||||
color: var(--tb-white) !important;
|
color: var(--ds-white) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ui.dropdown .menu .item:hover {
|
.ui.dropdown .menu .item:hover {
|
||||||
background: var(--tb-blue) !important;
|
background: var(--ds-blue) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Code and diffs */
|
/* Code and diffs */
|
||||||
@@ -247,35 +248,35 @@ h3 { font-size: 12px !important; color: var(--tb-white) !important; }
|
|||||||
.CodeMirror,
|
.CodeMirror,
|
||||||
.highlight {
|
.highlight {
|
||||||
font-family: 'IBM Plex Mono', monospace !important;
|
font-family: 'IBM Plex Mono', monospace !important;
|
||||||
background: var(--tb-navy) !important;
|
background: var(--ds-navy) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.diff-file-box .diff-file-header {
|
.diff-file-box .diff-file-header {
|
||||||
background: var(--tb-navy-light) !important;
|
background: var(--ds-navy-light) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Commit graph */
|
/* Commit graph */
|
||||||
.repository .commit-list .commit {
|
.repository .commit-list .commit {
|
||||||
border-bottom: 1px solid var(--tb-navy-light) !important;
|
border-bottom: 1px solid var(--ds-navy-light) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Issues and PRs */
|
/* Issues and PRs */
|
||||||
.issue-list .item,
|
.issue-list .item,
|
||||||
.pull-list .item {
|
.pull-list .item {
|
||||||
border-bottom: 1px solid var(--tb-navy-light) !important;
|
border-bottom: 1px solid var(--ds-navy-light) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Footer */
|
/* Footer */
|
||||||
.footer {
|
.footer {
|
||||||
background: var(--tb-navy-light) !important;
|
background: var(--ds-navy-light) !important;
|
||||||
border-top: 3px solid var(--tb-slate) !important;
|
border-top: 3px solid var(--ds-slate) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Cards */
|
/* Cards */
|
||||||
.ui.card,
|
.ui.card,
|
||||||
.ui.cards .card {
|
.ui.cards .card {
|
||||||
background: var(--tb-navy) !important;
|
background: var(--ds-navy) !important;
|
||||||
border: 2px solid var(--tb-slate) !important;
|
border: 2px solid var(--ds-slate) !important;
|
||||||
border-radius: 4px !important;
|
border-radius: 4px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -288,27 +289,27 @@ h3 { font-size: 12px !important; color: var(--tb-white) !important; }
|
|||||||
.ui.positive.message,
|
.ui.positive.message,
|
||||||
.ui.success.message {
|
.ui.success.message {
|
||||||
background: rgba(68, 170, 68, 0.2) !important;
|
background: rgba(68, 170, 68, 0.2) !important;
|
||||||
border: 2px solid var(--tb-green) !important;
|
border: 2px solid var(--ds-green) !important;
|
||||||
color: var(--tb-green-light) !important;
|
color: var(--ds-green-light) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ui.negative.message,
|
.ui.negative.message,
|
||||||
.ui.error.message {
|
.ui.error.message {
|
||||||
background: rgba(204, 34, 68, 0.2) !important;
|
background: rgba(204, 34, 68, 0.2) !important;
|
||||||
border: 2px solid var(--tb-red) !important;
|
border: 2px solid var(--ds-red) !important;
|
||||||
color: var(--tb-red-light) !important;
|
color: var(--ds-red-light) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ui.warning.message {
|
.ui.warning.message {
|
||||||
background: rgba(221, 170, 51, 0.2) !important;
|
background: rgba(221, 170, 51, 0.2) !important;
|
||||||
border: 2px solid var(--tb-yellow) !important;
|
border: 2px solid var(--ds-yellow) !important;
|
||||||
color: var(--tb-yellow) !important;
|
color: var(--ds-yellow) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ui.info.message {
|
.ui.info.message {
|
||||||
background: rgba(85, 136, 221, 0.2) !important;
|
background: rgba(85, 136, 221, 0.2) !important;
|
||||||
border: 2px solid var(--tb-blue-light) !important;
|
border: 2px solid var(--ds-blue-light) !important;
|
||||||
color: var(--tb-blue-bright) !important;
|
color: var(--ds-blue-bright) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Scrollbars */
|
/* Scrollbars */
|
||||||
@@ -318,29 +319,29 @@ h3 { font-size: 12px !important; color: var(--tb-white) !important; }
|
|||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar-track {
|
::-webkit-scrollbar-track {
|
||||||
background: var(--tb-navy-light);
|
background: var(--ds-navy-light);
|
||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb {
|
::-webkit-scrollbar-thumb {
|
||||||
background: var(--tb-slate);
|
background: var(--ds-slate);
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb:hover {
|
::-webkit-scrollbar-thumb:hover {
|
||||||
background: var(--tb-steel);
|
background: var(--ds-steel);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Selection */
|
/* Selection */
|
||||||
::selection {
|
::selection {
|
||||||
background: var(--tb-blue) !important;
|
background: var(--ds-blue) !important;
|
||||||
color: var(--tb-white) !important;
|
color: var(--ds-white) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Links */
|
/* Links */
|
||||||
a {
|
a {
|
||||||
color: var(--tb-blue-bright) !important;
|
color: var(--ds-blue-bright) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
a:hover {
|
a:hover {
|
||||||
color: var(--tb-white) !important;
|
color: var(--ds-white) !important;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,32 +1,32 @@
|
|||||||
/* THROWBACK THEME - Universal Injectable CSS
|
/* LOCH — deep-navy design system
|
||||||
Tecmo Super Bowl inspired: deep navy, white text, patriotic red/blue
|
Universal injectable CSS.
|
||||||
Injected via Traefik rewrite-body plugin into:
|
Injected via Traefik rewrite-body plugin into:
|
||||||
Grafana, Traefik Dashboard, RustFS/MinIO, Jaeger, Prometheus, Trino
|
Grafana, Traefik Dashboard, RustFS/MinIO, Jaeger, Prometheus, Trino
|
||||||
Palette matches: Gitea, Woodpecker, Marimo, nginx dashboard themes */
|
Palette matches: Gitea, Woodpecker, Marimo, nginx dashboard themes */
|
||||||
|
|
||||||
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=IBM+Plex+Mono:wght@400;500;600&display=swap');
|
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap');
|
||||||
|
|
||||||
/* ============================================
|
/* ============================================
|
||||||
THROWBACK COLOR PALETTE
|
LOCH COLOR PALETTE
|
||||||
============================================ */
|
============================================ */
|
||||||
:root {
|
:root {
|
||||||
--tb-navy: #0a1628;
|
--ds-navy: #0a1628;
|
||||||
--tb-navy-light: #162040;
|
--ds-navy-light: #162040;
|
||||||
--tb-navy-mid: #1e2d50;
|
--ds-navy-mid: #1e2d50;
|
||||||
--tb-slate: #2a3f5f;
|
--ds-slate: #2a3f5f;
|
||||||
--tb-steel: #5a7090;
|
--ds-steel: #5a7090;
|
||||||
--tb-white: #f0f0f0;
|
--ds-white: #f0f0f0;
|
||||||
|
|
||||||
--tb-blue: #3366cc;
|
--ds-blue: #3366cc;
|
||||||
--tb-blue-light: #5588dd;
|
--ds-blue-light: #5588dd;
|
||||||
--tb-blue-bright: #88aaee;
|
--ds-blue-bright: #88aaee;
|
||||||
|
|
||||||
--tb-red: #cc2244;
|
--ds-red: #cc2244;
|
||||||
--tb-red-light: #dd4466;
|
--ds-red-light: #dd4466;
|
||||||
|
|
||||||
--tb-green: #44aa44;
|
--ds-green: #44aa44;
|
||||||
--tb-green-light: #66cc66;
|
--ds-green-light: #66cc66;
|
||||||
--tb-yellow: #ddaa33;
|
--ds-yellow: #ddaa33;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ============================================
|
/* ============================================
|
||||||
@@ -34,34 +34,35 @@
|
|||||||
============================================ */
|
============================================ */
|
||||||
body, html {
|
body, html {
|
||||||
font-family: 'IBM Plex Mono', 'Courier New', monospace !important;
|
font-family: 'IBM Plex Mono', 'Courier New', monospace !important;
|
||||||
background: var(--tb-navy) !important;
|
background: var(--ds-navy) !important;
|
||||||
color: var(--tb-white) !important;
|
color: var(--ds-white) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ============================================
|
/* ============================================
|
||||||
HEADINGS
|
HEADINGS
|
||||||
============================================ */
|
============================================ */
|
||||||
h1, h2, h3, h4, h5, h6 {
|
h1, h2, h3, h4, h5, h6 {
|
||||||
font-family: 'Press Start 2P', 'IBM Plex Mono', monospace !important;
|
font-family: 'IBM Plex Mono', monospace !important;
|
||||||
|
font-weight: 600 !important;
|
||||||
letter-spacing: 0.5px !important;
|
letter-spacing: 0.5px !important;
|
||||||
line-height: 1.8 !important;
|
line-height: 1.8 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
font-size: 16px !important;
|
font-size: 16px !important;
|
||||||
color: var(--tb-white) !important;
|
color: var(--ds-white) !important;
|
||||||
}
|
}
|
||||||
h2 {
|
h2 {
|
||||||
font-size: 13px !important;
|
font-size: 13px !important;
|
||||||
color: var(--tb-blue-bright) !important;
|
color: var(--ds-blue-bright) !important;
|
||||||
}
|
}
|
||||||
h3 {
|
h3 {
|
||||||
font-size: 11px !important;
|
font-size: 11px !important;
|
||||||
color: var(--tb-white) !important;
|
color: var(--ds-white) !important;
|
||||||
}
|
}
|
||||||
h4, h5, h6 {
|
h4, h5, h6 {
|
||||||
font-size: 10px !important;
|
font-size: 10px !important;
|
||||||
color: var(--tb-white) !important;
|
color: var(--ds-white) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ============================================
|
/* ============================================
|
||||||
@@ -75,9 +76,9 @@ header,
|
|||||||
[class*="topbar"],
|
[class*="topbar"],
|
||||||
[class*="top-bar"],
|
[class*="top-bar"],
|
||||||
[class*="app-bar"] {
|
[class*="app-bar"] {
|
||||||
background: var(--tb-navy-light) !important;
|
background: var(--ds-navy-light) !important;
|
||||||
border-bottom: 3px solid var(--tb-slate) !important;
|
border-bottom: 3px solid var(--ds-slate) !important;
|
||||||
color: var(--tb-white) !important;
|
color: var(--ds-white) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ============================================
|
/* ============================================
|
||||||
@@ -89,13 +90,13 @@ aside,
|
|||||||
[class*="side-nav"],
|
[class*="side-nav"],
|
||||||
[class*="drawer"],
|
[class*="drawer"],
|
||||||
[class*="menu-panel"] {
|
[class*="menu-panel"] {
|
||||||
background: var(--tb-navy) !important;
|
background: var(--ds-navy) !important;
|
||||||
border-right: 3px solid var(--tb-slate) !important;
|
border-right: 3px solid var(--ds-slate) !important;
|
||||||
color: var(--tb-white) !important;
|
color: var(--ds-white) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ============================================
|
/* ============================================
|
||||||
TABLES (Scoreboard style)
|
TABLES (Table styling)
|
||||||
============================================ */
|
============================================ */
|
||||||
table {
|
table {
|
||||||
border-collapse: collapse !important;
|
border-collapse: collapse !important;
|
||||||
@@ -103,26 +104,26 @@ table {
|
|||||||
}
|
}
|
||||||
|
|
||||||
th {
|
th {
|
||||||
background: var(--tb-blue) !important;
|
background: var(--ds-blue) !important;
|
||||||
color: var(--tb-white) !important;
|
color: var(--ds-white) !important;
|
||||||
font-family: 'Press Start 2P', monospace !important;
|
font-family: 'IBM Plex Mono', monospace !important;
|
||||||
font-size: 9px !important;
|
font-size: 9px !important;
|
||||||
padding: 10px 12px !important;
|
padding: 10px 12px !important;
|
||||||
text-transform: uppercase !important;
|
text-transform: uppercase !important;
|
||||||
letter-spacing: 1px !important;
|
letter-spacing: 1px !important;
|
||||||
border: 1px solid var(--tb-blue-light) !important;
|
border: 1px solid var(--ds-blue-light) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
td {
|
td {
|
||||||
background: var(--tb-navy) !important;
|
background: var(--ds-navy) !important;
|
||||||
color: var(--tb-white) !important;
|
color: var(--ds-white) !important;
|
||||||
padding: 8px 12px !important;
|
padding: 8px 12px !important;
|
||||||
border: 1px solid var(--tb-navy-light) !important;
|
border: 1px solid var(--ds-navy-light) !important;
|
||||||
font-size: 13px !important;
|
font-size: 13px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
tr:nth-child(even) td {
|
tr:nth-child(even) td {
|
||||||
background: var(--tb-navy-light) !important;
|
background: var(--ds-navy-light) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
tr:hover td {
|
tr:hover td {
|
||||||
@@ -138,9 +139,9 @@ button,
|
|||||||
[class*="button"] {
|
[class*="button"] {
|
||||||
font-family: 'IBM Plex Mono', monospace !important;
|
font-family: 'IBM Plex Mono', monospace !important;
|
||||||
font-weight: 500 !important;
|
font-weight: 500 !important;
|
||||||
background: var(--tb-navy-light) !important;
|
background: var(--ds-navy-light) !important;
|
||||||
color: var(--tb-white) !important;
|
color: var(--ds-white) !important;
|
||||||
border: 2px solid var(--tb-slate) !important;
|
border: 2px solid var(--ds-slate) !important;
|
||||||
border-radius: 4px !important;
|
border-radius: 4px !important;
|
||||||
transition: all 0.15s ease !important;
|
transition: all 0.15s ease !important;
|
||||||
}
|
}
|
||||||
@@ -149,8 +150,8 @@ button:hover,
|
|||||||
[role="button"]:hover,
|
[role="button"]:hover,
|
||||||
.btn:hover,
|
.btn:hover,
|
||||||
[class*="button"]:hover {
|
[class*="button"]:hover {
|
||||||
background: var(--tb-blue) !important;
|
background: var(--ds-blue) !important;
|
||||||
border-color: var(--tb-blue-light) !important;
|
border-color: var(--ds-blue-light) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
button:active,
|
button:active,
|
||||||
@@ -163,14 +164,14 @@ button:active,
|
|||||||
button[type="submit"],
|
button[type="submit"],
|
||||||
[class*="primary"],
|
[class*="primary"],
|
||||||
[class*="submit"] {
|
[class*="submit"] {
|
||||||
background: var(--tb-blue) !important;
|
background: var(--ds-blue) !important;
|
||||||
color: var(--tb-white) !important;
|
color: var(--ds-white) !important;
|
||||||
border: 2px solid var(--tb-blue-light) !important;
|
border: 2px solid var(--ds-blue-light) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
button[type="submit"]:hover,
|
button[type="submit"]:hover,
|
||||||
[class*="primary"]:hover {
|
[class*="primary"]:hover {
|
||||||
background: var(--tb-blue-light) !important;
|
background: var(--ds-blue-light) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ============================================
|
/* ============================================
|
||||||
@@ -182,16 +183,16 @@ select,
|
|||||||
[class*="input"],
|
[class*="input"],
|
||||||
[contenteditable="true"] {
|
[contenteditable="true"] {
|
||||||
font-family: 'IBM Plex Mono', monospace !important;
|
font-family: 'IBM Plex Mono', monospace !important;
|
||||||
background: var(--tb-navy-mid) !important;
|
background: var(--ds-navy-mid) !important;
|
||||||
color: var(--tb-white) !important;
|
color: var(--ds-white) !important;
|
||||||
border: 2px solid var(--tb-slate) !important;
|
border: 2px solid var(--ds-slate) !important;
|
||||||
border-radius: 4px !important;
|
border-radius: 4px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
input:focus,
|
input:focus,
|
||||||
textarea:focus,
|
textarea:focus,
|
||||||
select:focus {
|
select:focus {
|
||||||
border-color: var(--tb-blue-light) !important;
|
border-color: var(--ds-blue-light) !important;
|
||||||
outline: none !important;
|
outline: none !important;
|
||||||
box-shadow: 0 0 0 2px rgba(85, 136, 221, 0.3) !important;
|
box-shadow: 0 0 0 2px rgba(85, 136, 221, 0.3) !important;
|
||||||
}
|
}
|
||||||
@@ -204,15 +205,15 @@ pre, code {
|
|||||||
}
|
}
|
||||||
|
|
||||||
code {
|
code {
|
||||||
background: var(--tb-navy-light) !important;
|
background: var(--ds-navy-light) !important;
|
||||||
color: var(--tb-blue-bright) !important;
|
color: var(--ds-blue-bright) !important;
|
||||||
padding: 2px 6px !important;
|
padding: 2px 6px !important;
|
||||||
border-radius: 3px !important;
|
border-radius: 3px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
pre {
|
pre {
|
||||||
background: var(--tb-navy) !important;
|
background: var(--ds-navy) !important;
|
||||||
border: 2px solid var(--tb-slate) !important;
|
border: 2px solid var(--ds-slate) !important;
|
||||||
border-radius: 4px !important;
|
border-radius: 4px !important;
|
||||||
padding: 12px !important;
|
padding: 12px !important;
|
||||||
}
|
}
|
||||||
@@ -226,18 +227,18 @@ pre code {
|
|||||||
LINKS
|
LINKS
|
||||||
============================================ */
|
============================================ */
|
||||||
a {
|
a {
|
||||||
color: var(--tb-blue-bright) !important;
|
color: var(--ds-blue-bright) !important;
|
||||||
text-decoration: none !important;
|
text-decoration: none !important;
|
||||||
transition: color 0.15s ease !important;
|
transition: color 0.15s ease !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
a:hover {
|
a:hover {
|
||||||
color: var(--tb-white) !important;
|
color: var(--ds-white) !important;
|
||||||
text-decoration: underline !important;
|
text-decoration: underline !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
a:visited {
|
a:visited {
|
||||||
color: var(--tb-blue-light) !important;
|
color: var(--ds-blue-light) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ============================================
|
/* ============================================
|
||||||
@@ -248,9 +249,9 @@ a:visited {
|
|||||||
[class*="widget"],
|
[class*="widget"],
|
||||||
[class*="Paper"],
|
[class*="Paper"],
|
||||||
[class*="container"]:not(body):not(html) {
|
[class*="container"]:not(body):not(html) {
|
||||||
background: var(--tb-navy) !important;
|
background: var(--ds-navy) !important;
|
||||||
border: 2px solid var(--tb-slate) !important;
|
border: 2px solid var(--ds-slate) !important;
|
||||||
color: var(--tb-white) !important;
|
color: var(--ds-white) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ============================================
|
/* ============================================
|
||||||
@@ -264,16 +265,16 @@ a:visited {
|
|||||||
[class*="Popover"],
|
[class*="Popover"],
|
||||||
[class*="Menu-list"],
|
[class*="Menu-list"],
|
||||||
[class*="MenuList"] {
|
[class*="MenuList"] {
|
||||||
background: var(--tb-navy-light) !important;
|
background: var(--ds-navy-light) !important;
|
||||||
border: 2px solid var(--tb-slate) !important;
|
border: 2px solid var(--ds-slate) !important;
|
||||||
color: var(--tb-white) !important;
|
color: var(--ds-white) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
[role="menuitem"]:hover,
|
[role="menuitem"]:hover,
|
||||||
[role="option"]:hover,
|
[role="option"]:hover,
|
||||||
[class*="MenuItem"]:hover {
|
[class*="MenuItem"]:hover {
|
||||||
background: var(--tb-blue) !important;
|
background: var(--ds-blue) !important;
|
||||||
color: var(--tb-white) !important;
|
color: var(--ds-white) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ============================================
|
/* ============================================
|
||||||
@@ -286,9 +287,9 @@ a:visited {
|
|||||||
[class*="pill"] {
|
[class*="pill"] {
|
||||||
font-family: 'IBM Plex Mono', monospace !important;
|
font-family: 'IBM Plex Mono', monospace !important;
|
||||||
font-size: 11px !important;
|
font-size: 11px !important;
|
||||||
background: var(--tb-blue) !important;
|
background: var(--ds-blue) !important;
|
||||||
color: var(--tb-white) !important;
|
color: var(--ds-white) !important;
|
||||||
border: 1px solid var(--tb-blue-light) !important;
|
border: 1px solid var(--ds-blue-light) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Status indicators */
|
/* Status indicators */
|
||||||
@@ -297,19 +298,19 @@ a:visited {
|
|||||||
[class*="running"],
|
[class*="running"],
|
||||||
[class*="active"],
|
[class*="active"],
|
||||||
[class*="ok"] {
|
[class*="ok"] {
|
||||||
color: var(--tb-green-light) !important;
|
color: var(--ds-green-light) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
[class*="error"],
|
[class*="error"],
|
||||||
[class*="danger"],
|
[class*="danger"],
|
||||||
[class*="failed"],
|
[class*="failed"],
|
||||||
[class*="critical"] {
|
[class*="critical"] {
|
||||||
color: var(--tb-red) !important;
|
color: var(--ds-red) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
[class*="warning"],
|
[class*="warning"],
|
||||||
[class*="pending"] {
|
[class*="pending"] {
|
||||||
color: var(--tb-yellow) !important;
|
color: var(--ds-yellow) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ============================================
|
/* ============================================
|
||||||
@@ -321,32 +322,32 @@ a:visited {
|
|||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar-track {
|
::-webkit-scrollbar-track {
|
||||||
background: var(--tb-navy-light);
|
background: var(--ds-navy-light);
|
||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb {
|
::-webkit-scrollbar-thumb {
|
||||||
background: var(--tb-slate);
|
background: var(--ds-slate);
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
border: 2px solid var(--tb-navy-light);
|
border: 2px solid var(--ds-navy-light);
|
||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb:hover {
|
::-webkit-scrollbar-thumb:hover {
|
||||||
background: var(--tb-steel);
|
background: var(--ds-steel);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ============================================
|
/* ============================================
|
||||||
TEXT SELECTION
|
TEXT SELECTION
|
||||||
============================================ */
|
============================================ */
|
||||||
::selection {
|
::selection {
|
||||||
background: var(--tb-blue) !important;
|
background: var(--ds-blue) !important;
|
||||||
color: var(--tb-white) !important;
|
color: var(--ds-white) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ============================================
|
/* ============================================
|
||||||
FOCUS STYLES
|
FOCUS STYLES
|
||||||
============================================ */
|
============================================ */
|
||||||
:focus-visible {
|
:focus-visible {
|
||||||
outline: 2px solid var(--tb-blue-light) !important;
|
outline: 2px solid var(--ds-blue-light) !important;
|
||||||
outline-offset: 2px !important;
|
outline-offset: 2px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -392,15 +393,15 @@ img[alt*="Logo" i] {
|
|||||||
.grafana-app [class*="NavBar"],
|
.grafana-app [class*="NavBar"],
|
||||||
.grafana-app [class*="Topbar"],
|
.grafana-app [class*="Topbar"],
|
||||||
.grafana-app [aria-label="Main menu"] {
|
.grafana-app [aria-label="Main menu"] {
|
||||||
background: var(--tb-navy-light) !important;
|
background: var(--ds-navy-light) !important;
|
||||||
border-bottom: 3px solid var(--tb-slate) !important;
|
border-bottom: 3px solid var(--ds-slate) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Sidenav */
|
/* Sidenav */
|
||||||
.grafana-app [class*="sidemenu"],
|
.grafana-app [class*="sidemenu"],
|
||||||
.grafana-app [class*="NavBar"][class*="wrapper"] {
|
.grafana-app [class*="NavBar"][class*="wrapper"] {
|
||||||
background: var(--tb-navy) !important;
|
background: var(--ds-navy) !important;
|
||||||
border-right: 3px solid var(--tb-slate) !important;
|
border-right: 3px solid var(--ds-slate) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Dashboard container */
|
/* Dashboard container */
|
||||||
@@ -413,8 +414,8 @@ img[alt*="Logo" i] {
|
|||||||
.grafana-app .panel-container,
|
.grafana-app .panel-container,
|
||||||
.grafana-app [class*="panel-content"],
|
.grafana-app [class*="panel-content"],
|
||||||
.grafana-app [class*="PanelChrome"] {
|
.grafana-app [class*="PanelChrome"] {
|
||||||
background: var(--tb-navy) !important;
|
background: var(--ds-navy) !important;
|
||||||
border: 2px solid var(--tb-slate) !important;
|
border: 2px solid var(--ds-slate) !important;
|
||||||
border-radius: 0 !important;
|
border-radius: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -422,10 +423,10 @@ img[alt*="Logo" i] {
|
|||||||
.grafana-app .panel-title,
|
.grafana-app .panel-title,
|
||||||
.grafana-app [class*="panel-header"],
|
.grafana-app [class*="panel-header"],
|
||||||
.grafana-app [class*="PanelHeader"] {
|
.grafana-app [class*="PanelHeader"] {
|
||||||
background: var(--tb-navy-light) !important;
|
background: var(--ds-navy-light) !important;
|
||||||
font-family: 'Press Start 2P', monospace !important;
|
font-family: 'IBM Plex Mono', monospace !important;
|
||||||
font-size: 9px !important;
|
font-size: 9px !important;
|
||||||
color: var(--tb-white) !important;
|
color: var(--ds-white) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Explore page */
|
/* Explore page */
|
||||||
@@ -437,21 +438,21 @@ img[alt*="Logo" i] {
|
|||||||
/* Grafana query editor */
|
/* Grafana query editor */
|
||||||
.grafana-app [class*="query-editor"],
|
.grafana-app [class*="query-editor"],
|
||||||
.grafana-app [class*="QueryEditor"] {
|
.grafana-app [class*="QueryEditor"] {
|
||||||
background: var(--tb-navy-light) !important;
|
background: var(--ds-navy-light) !important;
|
||||||
border: 2px solid var(--tb-slate) !important;
|
border: 2px solid var(--ds-slate) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Alert list */
|
/* Alert list */
|
||||||
.grafana-app [class*="AlertList"],
|
.grafana-app [class*="AlertList"],
|
||||||
.grafana-app [class*="alert-rule"] {
|
.grafana-app [class*="alert-rule"] {
|
||||||
background: var(--tb-navy) !important;
|
background: var(--ds-navy) !important;
|
||||||
border: 1px solid var(--tb-slate) !important;
|
border: 1px solid var(--ds-slate) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Grafana page toolbar */
|
/* Grafana page toolbar */
|
||||||
.grafana-app [class*="page-toolbar"],
|
.grafana-app [class*="page-toolbar"],
|
||||||
.grafana-app [class*="PageToolbar"] {
|
.grafana-app [class*="PageToolbar"] {
|
||||||
background: var(--tb-navy-light) !important;
|
background: var(--ds-navy-light) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@@ -473,8 +474,8 @@ header img[alt*="Jaeger" i] {
|
|||||||
.jaeger-ui [class*="TopNav"],
|
.jaeger-ui [class*="TopNav"],
|
||||||
[class*="jaeger"] [class*="TopNav"],
|
[class*="jaeger"] [class*="TopNav"],
|
||||||
[data-testid="TopNav"] {
|
[data-testid="TopNav"] {
|
||||||
background: var(--tb-navy-light) !important;
|
background: var(--ds-navy-light) !important;
|
||||||
border-bottom: 3px solid var(--tb-slate) !important;
|
border-bottom: 3px solid var(--ds-slate) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Trace page */
|
/* Trace page */
|
||||||
@@ -486,8 +487,8 @@ header img[alt*="Jaeger" i] {
|
|||||||
/* Timeline viewer */
|
/* Timeline viewer */
|
||||||
.TraceTimelineViewer,
|
.TraceTimelineViewer,
|
||||||
[class*="TraceTimelineViewer"] {
|
[class*="TraceTimelineViewer"] {
|
||||||
background: var(--tb-navy) !important;
|
background: var(--ds-navy) !important;
|
||||||
border: 2px solid var(--tb-slate) !important;
|
border: 2px solid var(--ds-slate) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Span bars */
|
/* Span bars */
|
||||||
@@ -499,16 +500,16 @@ header img[alt*="Jaeger" i] {
|
|||||||
.SearchForm,
|
.SearchForm,
|
||||||
[class*="SearchForm"],
|
[class*="SearchForm"],
|
||||||
[class*="search-form"] {
|
[class*="search-form"] {
|
||||||
background: var(--tb-navy-light) !important;
|
background: var(--ds-navy-light) !important;
|
||||||
border: 2px solid var(--tb-slate) !important;
|
border: 2px solid var(--ds-slate) !important;
|
||||||
padding: 12px !important;
|
padding: 12px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Trace result list */
|
/* Trace result list */
|
||||||
[class*="ResultItem"],
|
[class*="ResultItem"],
|
||||||
[class*="result-item"] {
|
[class*="result-item"] {
|
||||||
background: var(--tb-navy) !important;
|
background: var(--ds-navy) !important;
|
||||||
border: 1px solid var(--tb-slate) !important;
|
border: 1px solid var(--ds-slate) !important;
|
||||||
margin-bottom: 4px !important;
|
margin-bottom: 4px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -520,15 +521,15 @@ header img[alt*="Jaeger" i] {
|
|||||||
/* Span detail */
|
/* Span detail */
|
||||||
[class*="SpanDetail"],
|
[class*="SpanDetail"],
|
||||||
[class*="AccordianKeyValues"] {
|
[class*="AccordianKeyValues"] {
|
||||||
background: var(--tb-navy-light) !important;
|
background: var(--ds-navy-light) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Jaeger-specific selects */
|
/* Jaeger-specific selects */
|
||||||
.jaeger-ui select,
|
.jaeger-ui select,
|
||||||
[class*="jaeger"] select {
|
[class*="jaeger"] select {
|
||||||
background: var(--tb-navy-mid) !important;
|
background: var(--ds-navy-mid) !important;
|
||||||
color: var(--tb-white) !important;
|
color: var(--ds-white) !important;
|
||||||
border: 2px solid var(--tb-slate) !important;
|
border: 2px solid var(--ds-slate) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@@ -547,23 +548,23 @@ nav.navbar svg,
|
|||||||
/* Main navbar */
|
/* Main navbar */
|
||||||
.prometheus-app nav.navbar,
|
.prometheus-app nav.navbar,
|
||||||
nav.navbar {
|
nav.navbar {
|
||||||
background: var(--tb-navy-light) !important;
|
background: var(--ds-navy-light) !important;
|
||||||
border-bottom: 3px solid var(--tb-slate) !important;
|
border-bottom: 3px solid var(--ds-slate) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
nav.navbar .navbar-brand {
|
nav.navbar .navbar-brand {
|
||||||
font-family: 'Press Start 2P', monospace !important;
|
font-family: 'IBM Plex Mono', monospace !important;
|
||||||
font-size: 10px !important;
|
font-size: 10px !important;
|
||||||
color: var(--tb-white) !important;
|
color: var(--ds-white) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Expression input */
|
/* Expression input */
|
||||||
.prometheus-app .expression-input,
|
.prometheus-app .expression-input,
|
||||||
[class*="expression-input"],
|
[class*="expression-input"],
|
||||||
.cm-expression-input {
|
.cm-expression-input {
|
||||||
background: var(--tb-navy) !important;
|
background: var(--ds-navy) !important;
|
||||||
border: 3px solid var(--tb-slate) !important;
|
border: 3px solid var(--ds-slate) !important;
|
||||||
color: var(--tb-white) !important;
|
color: var(--ds-white) !important;
|
||||||
font-family: 'IBM Plex Mono', monospace !important;
|
font-family: 'IBM Plex Mono', monospace !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -571,8 +572,8 @@ nav.navbar .navbar-brand {
|
|||||||
.graph-container,
|
.graph-container,
|
||||||
[class*="graph-container"],
|
[class*="graph-container"],
|
||||||
.panel {
|
.panel {
|
||||||
background: var(--tb-navy) !important;
|
background: var(--ds-navy) !important;
|
||||||
border: 2px solid var(--tb-slate) !important;
|
border: 2px solid var(--ds-slate) !important;
|
||||||
border-radius: 0 !important;
|
border-radius: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -580,52 +581,52 @@ nav.navbar .navbar-brand {
|
|||||||
.graph-controls,
|
.graph-controls,
|
||||||
[class*="graph-controls"],
|
[class*="graph-controls"],
|
||||||
.nav-tabs {
|
.nav-tabs {
|
||||||
background: var(--tb-navy-light) !important;
|
background: var(--ds-navy-light) !important;
|
||||||
border-bottom: 2px solid var(--tb-slate) !important;
|
border-bottom: 2px solid var(--ds-slate) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-tabs .nav-link,
|
.nav-tabs .nav-link,
|
||||||
.nav-tabs a {
|
.nav-tabs a {
|
||||||
color: var(--tb-steel) !important;
|
color: var(--ds-steel) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-tabs .nav-link.active,
|
.nav-tabs .nav-link.active,
|
||||||
.nav-tabs .active a {
|
.nav-tabs .active a {
|
||||||
color: var(--tb-white) !important;
|
color: var(--ds-white) !important;
|
||||||
border-bottom: 3px solid var(--tb-blue) !important;
|
border-bottom: 3px solid var(--ds-blue) !important;
|
||||||
background: transparent !important;
|
background: transparent !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Alert/Rule manager */
|
/* Alert/Rule manager */
|
||||||
.rules-head,
|
.rules-head,
|
||||||
[class*="rules"] th {
|
[class*="rules"] th {
|
||||||
background: var(--tb-blue) !important;
|
background: var(--ds-blue) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Prometheus targets page */
|
/* Prometheus targets page */
|
||||||
.target-head,
|
.target-head,
|
||||||
[class*="scrape-pool"] h2 {
|
[class*="scrape-pool"] h2 {
|
||||||
font-family: 'Press Start 2P', monospace !important;
|
font-family: 'IBM Plex Mono', monospace !important;
|
||||||
font-size: 10px !important;
|
font-size: 10px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Status badges */
|
/* Status badges */
|
||||||
.badge-success,
|
.badge-success,
|
||||||
.label-success {
|
.label-success {
|
||||||
background: var(--tb-green) !important;
|
background: var(--ds-green) !important;
|
||||||
color: var(--tb-white) !important;
|
color: var(--ds-white) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.badge-danger,
|
.badge-danger,
|
||||||
.label-danger {
|
.label-danger {
|
||||||
background: var(--tb-red) !important;
|
background: var(--ds-red) !important;
|
||||||
color: var(--tb-white) !important;
|
color: var(--ds-white) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.badge-warning,
|
.badge-warning,
|
||||||
.label-warning {
|
.label-warning {
|
||||||
background: var(--tb-yellow) !important;
|
background: var(--ds-yellow) !important;
|
||||||
color: var(--tb-navy) !important;
|
color: var(--ds-navy) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@@ -651,22 +652,22 @@ nav.navbar .navbar-brand {
|
|||||||
#app nav,
|
#app nav,
|
||||||
#app [class*="nav-bar"],
|
#app [class*="nav-bar"],
|
||||||
#app .navbar {
|
#app .navbar {
|
||||||
background: var(--tb-navy-light) !important;
|
background: var(--ds-navy-light) !important;
|
||||||
border-bottom: 3px solid var(--tb-slate) !important;
|
border-bottom: 3px solid var(--ds-slate) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Sidebar */
|
/* Sidebar */
|
||||||
#app [class*="sidebar"],
|
#app [class*="sidebar"],
|
||||||
#app [class*="side-menu"],
|
#app [class*="side-menu"],
|
||||||
#app aside {
|
#app aside {
|
||||||
background: var(--tb-navy) !important;
|
background: var(--ds-navy) !important;
|
||||||
border-right: 3px solid var(--tb-slate) !important;
|
border-right: 3px solid var(--ds-slate) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Sidebar menu items */
|
/* Sidebar menu items */
|
||||||
#app [class*="sidebar"] a,
|
#app [class*="sidebar"] a,
|
||||||
#app [class*="side-menu"] a {
|
#app [class*="side-menu"] a {
|
||||||
color: var(--tb-steel) !important;
|
color: var(--ds-steel) !important;
|
||||||
border-left: 3px solid transparent !important;
|
border-left: 3px solid transparent !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -674,9 +675,9 @@ nav.navbar .navbar-brand {
|
|||||||
#app [class*="side-menu"] a:hover,
|
#app [class*="side-menu"] a:hover,
|
||||||
#app [class*="sidebar"] a.active,
|
#app [class*="sidebar"] a.active,
|
||||||
#app [class*="side-menu"] a.active {
|
#app [class*="side-menu"] a.active {
|
||||||
color: var(--tb-white) !important;
|
color: var(--ds-white) !important;
|
||||||
background: rgba(51, 102, 204, 0.2) !important;
|
background: rgba(51, 102, 204, 0.2) !important;
|
||||||
border-left-color: var(--tb-blue) !important;
|
border-left-color: var(--ds-blue) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Main content area */
|
/* Main content area */
|
||||||
@@ -691,22 +692,22 @@ nav.navbar .navbar-brand {
|
|||||||
#app [class*="status"][class*="success"],
|
#app [class*="status"][class*="success"],
|
||||||
#app [class*="pill"][class*="green"],
|
#app [class*="pill"][class*="green"],
|
||||||
#app [class*="positive"] {
|
#app [class*="positive"] {
|
||||||
background: var(--tb-green) !important;
|
background: var(--ds-green) !important;
|
||||||
color: var(--tb-white) !important;
|
color: var(--ds-white) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
#app [class*="status"][class*="negative"],
|
#app [class*="status"][class*="negative"],
|
||||||
#app [class*="status"][class*="error"],
|
#app [class*="status"][class*="error"],
|
||||||
#app [class*="pill"][class*="red"],
|
#app [class*="pill"][class*="red"],
|
||||||
#app [class*="negative"] {
|
#app [class*="negative"] {
|
||||||
background: var(--tb-red) !important;
|
background: var(--ds-red) !important;
|
||||||
color: var(--tb-white) !important;
|
color: var(--ds-white) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
#app [class*="status"][class*="warning"],
|
#app [class*="status"][class*="warning"],
|
||||||
#app [class*="pill"][class*="orange"] {
|
#app [class*="pill"][class*="orange"] {
|
||||||
background: var(--tb-yellow) !important;
|
background: var(--ds-yellow) !important;
|
||||||
color: var(--tb-navy) !important;
|
color: var(--ds-navy) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Traefik table rows */
|
/* Traefik table rows */
|
||||||
@@ -717,8 +718,8 @@ nav.navbar .navbar-brand {
|
|||||||
/* Service detail panels */
|
/* Service detail panels */
|
||||||
#app [class*="detail"],
|
#app [class*="detail"],
|
||||||
#app [class*="panel-block"] {
|
#app [class*="panel-block"] {
|
||||||
background: var(--tb-navy) !important;
|
background: var(--ds-navy) !important;
|
||||||
border: 2px solid var(--tb-slate) !important;
|
border: 2px solid var(--ds-slate) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@@ -745,8 +746,8 @@ nav.navbar .navbar-brand {
|
|||||||
/* App bar */
|
/* App bar */
|
||||||
#root .MuiAppBar-root,
|
#root .MuiAppBar-root,
|
||||||
#root [class*="MuiAppBar"] {
|
#root [class*="MuiAppBar"] {
|
||||||
background: var(--tb-navy-light) !important;
|
background: var(--ds-navy-light) !important;
|
||||||
border-bottom: 3px solid var(--tb-slate) !important;
|
border-bottom: 3px solid var(--ds-slate) !important;
|
||||||
box-shadow: none !important;
|
box-shadow: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -754,45 +755,45 @@ nav.navbar .navbar-brand {
|
|||||||
#root .MuiDrawer-root,
|
#root .MuiDrawer-root,
|
||||||
#root .MuiDrawer-paper,
|
#root .MuiDrawer-paper,
|
||||||
#root [class*="MuiDrawer"] {
|
#root [class*="MuiDrawer"] {
|
||||||
background: var(--tb-navy) !important;
|
background: var(--ds-navy) !important;
|
||||||
border-right: 3px solid var(--tb-slate) !important;
|
border-right: 3px solid var(--ds-slate) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Drawer list items */
|
/* Drawer list items */
|
||||||
#root .MuiListItem-root,
|
#root .MuiListItem-root,
|
||||||
#root .MuiListItemButton-root,
|
#root .MuiListItemButton-root,
|
||||||
#root [class*="MuiListItem"] {
|
#root [class*="MuiListItem"] {
|
||||||
color: var(--tb-steel) !important;
|
color: var(--ds-steel) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
#root .MuiListItem-root:hover,
|
#root .MuiListItem-root:hover,
|
||||||
#root .MuiListItemButton-root:hover,
|
#root .MuiListItemButton-root:hover,
|
||||||
#root [class*="MuiListItem"]:hover {
|
#root [class*="MuiListItem"]:hover {
|
||||||
background: rgba(51, 102, 204, 0.2) !important;
|
background: rgba(51, 102, 204, 0.2) !important;
|
||||||
color: var(--tb-white) !important;
|
color: var(--ds-white) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
#root .Mui-selected,
|
#root .Mui-selected,
|
||||||
#root [class*="Mui-selected"] {
|
#root [class*="Mui-selected"] {
|
||||||
background: rgba(51, 102, 204, 0.3) !important;
|
background: rgba(51, 102, 204, 0.3) !important;
|
||||||
color: var(--tb-white) !important;
|
color: var(--ds-white) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* MUI Paper */
|
/* MUI Paper */
|
||||||
#root .MuiPaper-root,
|
#root .MuiPaper-root,
|
||||||
#root [class*="MuiPaper"] {
|
#root [class*="MuiPaper"] {
|
||||||
background: var(--tb-navy) !important;
|
background: var(--ds-navy) !important;
|
||||||
color: var(--tb-white) !important;
|
color: var(--ds-white) !important;
|
||||||
border: 2px solid var(--tb-slate) !important;
|
border: 2px solid var(--ds-slate) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* MUI Buttons */
|
/* MUI Buttons */
|
||||||
#root .MuiButton-root,
|
#root .MuiButton-root,
|
||||||
#root [class*="MuiButton"] {
|
#root [class*="MuiButton"] {
|
||||||
font-family: 'IBM Plex Mono', monospace !important;
|
font-family: 'IBM Plex Mono', monospace !important;
|
||||||
background: var(--tb-navy-light) !important;
|
background: var(--ds-navy-light) !important;
|
||||||
color: var(--tb-white) !important;
|
color: var(--ds-white) !important;
|
||||||
border: 2px solid var(--tb-slate) !important;
|
border: 2px solid var(--ds-slate) !important;
|
||||||
border-radius: 4px !important;
|
border-radius: 4px !important;
|
||||||
text-transform: none !important;
|
text-transform: none !important;
|
||||||
box-shadow: none !important;
|
box-shadow: none !important;
|
||||||
@@ -800,34 +801,34 @@ nav.navbar .navbar-brand {
|
|||||||
|
|
||||||
#root .MuiButton-root:hover,
|
#root .MuiButton-root:hover,
|
||||||
#root [class*="MuiButton"]:hover {
|
#root [class*="MuiButton"]:hover {
|
||||||
background: var(--tb-blue) !important;
|
background: var(--ds-blue) !important;
|
||||||
border-color: var(--tb-blue-light) !important;
|
border-color: var(--ds-blue-light) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
#root .MuiButton-containedPrimary,
|
#root .MuiButton-containedPrimary,
|
||||||
#root [class*="MuiButton-containedPrimary"] {
|
#root [class*="MuiButton-containedPrimary"] {
|
||||||
background: var(--tb-blue) !important;
|
background: var(--ds-blue) !important;
|
||||||
color: var(--tb-white) !important;
|
color: var(--ds-white) !important;
|
||||||
border: 2px solid var(--tb-blue-light) !important;
|
border: 2px solid var(--ds-blue-light) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
#root .MuiButton-containedPrimary:hover {
|
#root .MuiButton-containedPrimary:hover {
|
||||||
background: var(--tb-blue-light) !important;
|
background: var(--ds-blue-light) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* MUI Table */
|
/* MUI Table */
|
||||||
#root .MuiTableCell-root,
|
#root .MuiTableCell-root,
|
||||||
#root [class*="MuiTableCell"] {
|
#root [class*="MuiTableCell"] {
|
||||||
border-color: var(--tb-slate) !important;
|
border-color: var(--ds-slate) !important;
|
||||||
color: var(--tb-white) !important;
|
color: var(--ds-white) !important;
|
||||||
font-family: 'IBM Plex Mono', monospace !important;
|
font-family: 'IBM Plex Mono', monospace !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
#root .MuiTableCell-head,
|
#root .MuiTableCell-head,
|
||||||
#root [class*="MuiTableCell-head"] {
|
#root [class*="MuiTableCell-head"] {
|
||||||
background: var(--tb-blue) !important;
|
background: var(--ds-blue) !important;
|
||||||
color: var(--tb-white) !important;
|
color: var(--ds-white) !important;
|
||||||
font-family: 'Press Start 2P', monospace !important;
|
font-family: 'IBM Plex Mono', monospace !important;
|
||||||
font-size: 9px !important;
|
font-size: 9px !important;
|
||||||
text-transform: uppercase !important;
|
text-transform: uppercase !important;
|
||||||
}
|
}
|
||||||
@@ -842,64 +843,64 @@ nav.navbar .navbar-brand {
|
|||||||
#root .MuiOutlinedInput-root,
|
#root .MuiOutlinedInput-root,
|
||||||
#root [class*="MuiInputBase"],
|
#root [class*="MuiInputBase"],
|
||||||
#root [class*="MuiOutlinedInput"] {
|
#root [class*="MuiOutlinedInput"] {
|
||||||
background: var(--tb-navy-mid) !important;
|
background: var(--ds-navy-mid) !important;
|
||||||
color: var(--tb-white) !important;
|
color: var(--ds-white) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
#root .MuiOutlinedInput-notchedOutline,
|
#root .MuiOutlinedInput-notchedOutline,
|
||||||
#root [class*="notchedOutline"] {
|
#root [class*="notchedOutline"] {
|
||||||
border-color: var(--tb-slate) !important;
|
border-color: var(--ds-slate) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
#root .MuiInputLabel-root,
|
#root .MuiInputLabel-root,
|
||||||
#root [class*="MuiInputLabel"] {
|
#root [class*="MuiInputLabel"] {
|
||||||
color: var(--tb-steel) !important;
|
color: var(--ds-steel) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* MUI Dialogs */
|
/* MUI Dialogs */
|
||||||
#root .MuiDialog-paper,
|
#root .MuiDialog-paper,
|
||||||
#root [class*="MuiDialog-paper"] {
|
#root [class*="MuiDialog-paper"] {
|
||||||
background: var(--tb-navy-light) !important;
|
background: var(--ds-navy-light) !important;
|
||||||
border: 3px solid var(--tb-slate) !important;
|
border: 3px solid var(--ds-slate) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* MUI Tabs */
|
/* MUI Tabs */
|
||||||
#root .MuiTab-root,
|
#root .MuiTab-root,
|
||||||
#root [class*="MuiTab"] {
|
#root [class*="MuiTab"] {
|
||||||
color: var(--tb-steel) !important;
|
color: var(--ds-steel) !important;
|
||||||
font-family: 'IBM Plex Mono', monospace !important;
|
font-family: 'IBM Plex Mono', monospace !important;
|
||||||
text-transform: none !important;
|
text-transform: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
#root .MuiTab-root.Mui-selected,
|
#root .MuiTab-root.Mui-selected,
|
||||||
#root [class*="MuiTab"][class*="Mui-selected"] {
|
#root [class*="MuiTab"][class*="Mui-selected"] {
|
||||||
color: var(--tb-white) !important;
|
color: var(--ds-white) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
#root .MuiTabs-indicator,
|
#root .MuiTabs-indicator,
|
||||||
#root [class*="MuiTabs-indicator"] {
|
#root [class*="MuiTabs-indicator"] {
|
||||||
background: var(--tb-blue) !important;
|
background: var(--ds-blue) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* MUI Breadcrumbs */
|
/* MUI Breadcrumbs */
|
||||||
#root .MuiBreadcrumbs-root,
|
#root .MuiBreadcrumbs-root,
|
||||||
#root [class*="MuiBreadcrumbs"] {
|
#root [class*="MuiBreadcrumbs"] {
|
||||||
color: var(--tb-steel) !important;
|
color: var(--ds-steel) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* MUI Chips */
|
/* MUI Chips */
|
||||||
#root .MuiChip-root,
|
#root .MuiChip-root,
|
||||||
#root [class*="MuiChip"] {
|
#root [class*="MuiChip"] {
|
||||||
background: var(--tb-blue) !important;
|
background: var(--ds-blue) !important;
|
||||||
color: var(--tb-white) !important;
|
color: var(--ds-white) !important;
|
||||||
border: 1px solid var(--tb-blue-light) !important;
|
border: 1px solid var(--ds-blue-light) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* MUI Icons */
|
/* MUI Icons */
|
||||||
#root .MuiSvgIcon-root,
|
#root .MuiSvgIcon-root,
|
||||||
#root [class*="MuiSvgIcon"],
|
#root [class*="MuiSvgIcon"],
|
||||||
#root svg {
|
#root svg {
|
||||||
color: var(--tb-steel) !important;
|
color: var(--ds-steel) !important;
|
||||||
fill: currentColor !important;
|
fill: currentColor !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -911,10 +912,10 @@ nav.navbar .navbar-brand {
|
|||||||
/* Trino has a simple UI - mostly tables and headers */
|
/* Trino has a simple UI - mostly tables and headers */
|
||||||
body > h2,
|
body > h2,
|
||||||
body > h3 {
|
body > h3 {
|
||||||
font-family: 'Press Start 2P', monospace !important;
|
font-family: 'IBM Plex Mono', monospace !important;
|
||||||
color: var(--tb-white) !important;
|
color: var(--ds-white) !important;
|
||||||
padding: 10px 0 !important;
|
padding: 10px 0 !important;
|
||||||
border-bottom: 3px solid var(--tb-slate) !important;
|
border-bottom: 3px solid var(--ds-slate) !important;
|
||||||
margin-bottom: 15px !important;
|
margin-bottom: 15px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -927,8 +928,8 @@ body > table {
|
|||||||
/* Trino worker status */
|
/* Trino worker status */
|
||||||
[class*="query-list"],
|
[class*="query-list"],
|
||||||
[class*="query-detail"] {
|
[class*="query-detail"] {
|
||||||
background: var(--tb-navy) !important;
|
background: var(--ds-navy) !important;
|
||||||
border: 2px solid var(--tb-slate) !important;
|
border: 2px solid var(--ds-slate) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Progress bars used by various services */
|
/* Progress bars used by various services */
|
||||||
@@ -936,15 +937,15 @@ progress,
|
|||||||
[role="progressbar"],
|
[role="progressbar"],
|
||||||
[class*="progress-bar"],
|
[class*="progress-bar"],
|
||||||
[class*="ProgressBar"] {
|
[class*="ProgressBar"] {
|
||||||
background: var(--tb-navy-light) !important;
|
background: var(--ds-navy-light) !important;
|
||||||
border: 1px solid var(--tb-slate) !important;
|
border: 1px solid var(--ds-slate) !important;
|
||||||
border-radius: 0 !important;
|
border-radius: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
progress::-webkit-progress-bar {
|
progress::-webkit-progress-bar {
|
||||||
background: var(--tb-navy-light) !important;
|
background: var(--ds-navy-light) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
progress::-webkit-progress-value {
|
progress::-webkit-progress-value {
|
||||||
background: var(--tb-blue) !important;
|
background: var(--ds-blue) !important;
|
||||||
}
|
}
|
||||||
|
|||||||
26
styles/loch.css
Normal file
26
styles/loch.css
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
/* LOCH — deep-navy design system
|
||||||
|
Single source of truth for the colour palette.
|
||||||
|
When changing a color here, propagate to the service-specific files:
|
||||||
|
inject.css, dashboard.css, gitea.css, woodpecker.css, marimo.css */
|
||||||
|
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap');
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--ds-navy: #0a1628;
|
||||||
|
--ds-navy-light: #162040;
|
||||||
|
--ds-navy-mid: #1e2d50;
|
||||||
|
--ds-slate: #2a3f5f;
|
||||||
|
--ds-steel: #5a7090;
|
||||||
|
--ds-white: #f0f0f0;
|
||||||
|
|
||||||
|
--ds-blue: #3366cc;
|
||||||
|
--ds-blue-light: #5588dd;
|
||||||
|
--ds-blue-bright: #88aaee;
|
||||||
|
|
||||||
|
--ds-red: #cc2244;
|
||||||
|
--ds-red-light: #dd4466;
|
||||||
|
|
||||||
|
--ds-green: #44aa44;
|
||||||
|
--ds-green-light: #66cc66;
|
||||||
|
--ds-yellow: #ddaa33;
|
||||||
|
}
|
||||||
@@ -1,41 +1,41 @@
|
|||||||
/* THROWBACK THEME - Tecmo Super Bowl */
|
/* LOCH — deep-navy design system */
|
||||||
/* Full marimo theme: semantic vars, Radix scales, prose, CodeMirror */
|
/* Full marimo theme: semantic vars, Radix scales, prose, CodeMirror */
|
||||||
|
|
||||||
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=IBM+Plex+Mono:wght@400;500;600&display=swap');
|
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap');
|
||||||
|
|
||||||
/* ============================================
|
/* ============================================
|
||||||
THROWBACK COLOR PALETTE
|
LOCH COLOR PALETTE
|
||||||
============================================ */
|
============================================ */
|
||||||
:root {
|
:root {
|
||||||
--tb-navy: #0a1628;
|
--ds-navy: #0a1628;
|
||||||
--tb-navy-light: #162040;
|
--ds-navy-light: #162040;
|
||||||
--tb-navy-mid: #1e2d50;
|
--ds-navy-mid: #1e2d50;
|
||||||
--tb-slate: #2a3f5f;
|
--ds-slate: #2a3f5f;
|
||||||
--tb-steel: #8a9fbb;
|
--ds-steel: #8a9fbb;
|
||||||
--tb-silver: #b0c0d8;
|
--ds-silver: #b0c0d8;
|
||||||
--tb-white: #f0f0f0;
|
--ds-white: #f0f0f0;
|
||||||
|
|
||||||
--tb-blue: #4477dd;
|
--ds-blue: #4477dd;
|
||||||
--tb-blue-light: #6699ee;
|
--ds-blue-light: #6699ee;
|
||||||
--tb-blue-bright: #99bbff;
|
--ds-blue-bright: #99bbff;
|
||||||
|
|
||||||
--tb-red: #cc2244;
|
--ds-red: #cc2244;
|
||||||
--tb-red-light: #ee6688;
|
--ds-red-light: #ee6688;
|
||||||
--tb-red-bright: #ffaabc;
|
--ds-red-bright: #ffaabc;
|
||||||
|
|
||||||
--tb-green: #44aa44;
|
--ds-green: #44aa44;
|
||||||
--tb-green-light: #77dd77;
|
--ds-green-light: #77dd77;
|
||||||
--tb-green-bright: #b1f1b1;
|
--ds-green-bright: #b1f1b1;
|
||||||
|
|
||||||
--tb-yellow: #eebb44;
|
--ds-yellow: #eebb44;
|
||||||
--tb-yellow-light: #ffdd77;
|
--ds-yellow-light: #ffdd77;
|
||||||
--tb-yellow-bright: #fff0bb;
|
--ds-yellow-bright: #fff0bb;
|
||||||
|
|
||||||
--tb-purple: #9977cc;
|
--ds-purple: #9977cc;
|
||||||
--tb-purple-light: #bb99ee;
|
--ds-purple-light: #bb99ee;
|
||||||
|
|
||||||
--tb-cyan: #55bbcc;
|
--ds-cyan: #55bbcc;
|
||||||
--tb-cyan-light: #88ddee;
|
--ds-cyan-light: #88ddee;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ============================================
|
/* ============================================
|
||||||
@@ -44,57 +44,57 @@
|
|||||||
:root {
|
:root {
|
||||||
--monospace-font: 'IBM Plex Mono', 'Courier New', monospace;
|
--monospace-font: 'IBM Plex Mono', 'Courier New', monospace;
|
||||||
--text-font: 'IBM Plex Mono', 'Courier New', monospace;
|
--text-font: 'IBM Plex Mono', 'Courier New', monospace;
|
||||||
--heading-font: 'Press Start 2P', 'IBM Plex Mono', monospace;
|
--heading-font: 'IBM Plex Mono', monospace;
|
||||||
--marimo-monospace-font: 'IBM Plex Mono', 'Courier New', monospace;
|
--marimo-monospace-font: 'IBM Plex Mono', 'Courier New', monospace;
|
||||||
--marimo-text-font: 'IBM Plex Mono', 'Courier New', monospace;
|
--marimo-text-font: 'IBM Plex Mono', 'Courier New', monospace;
|
||||||
--marimo-heading-font: 'Press Start 2P', 'IBM Plex Mono', monospace;
|
--marimo-heading-font: 'IBM Plex Mono', monospace;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ============================================
|
/* ============================================
|
||||||
MARIMO SEMANTIC VARIABLES
|
MARIMO SEMANTIC VARIABLES
|
||||||
============================================ */
|
============================================ */
|
||||||
:root {
|
:root {
|
||||||
--background: var(--tb-navy);
|
--background: var(--ds-navy);
|
||||||
--foreground: var(--tb-white);
|
--foreground: var(--ds-white);
|
||||||
|
|
||||||
--muted: var(--tb-navy-light);
|
--muted: var(--ds-navy-light);
|
||||||
--muted-foreground: var(--tb-steel);
|
--muted-foreground: var(--ds-steel);
|
||||||
|
|
||||||
--popover: var(--tb-navy-light);
|
--popover: var(--ds-navy-light);
|
||||||
--popover-foreground: var(--tb-white);
|
--popover-foreground: var(--ds-white);
|
||||||
|
|
||||||
--card: var(--tb-navy);
|
--card: var(--ds-navy);
|
||||||
--card-foreground: var(--tb-white);
|
--card-foreground: var(--ds-white);
|
||||||
|
|
||||||
--border: var(--tb-slate);
|
--border: var(--ds-slate);
|
||||||
--input: var(--tb-navy-mid);
|
--input: var(--ds-navy-mid);
|
||||||
--ring: var(--tb-blue-light);
|
--ring: var(--ds-blue-light);
|
||||||
--radius: 2px;
|
--radius: 2px;
|
||||||
|
|
||||||
--primary: var(--tb-blue);
|
--primary: var(--ds-blue);
|
||||||
--primary-foreground: var(--tb-white);
|
--primary-foreground: var(--ds-white);
|
||||||
|
|
||||||
--secondary: var(--tb-slate);
|
--secondary: var(--ds-slate);
|
||||||
--secondary-foreground: var(--tb-white);
|
--secondary-foreground: var(--ds-white);
|
||||||
|
|
||||||
--accent: var(--tb-navy-mid);
|
--accent: var(--ds-navy-mid);
|
||||||
--accent-foreground: var(--tb-blue-bright);
|
--accent-foreground: var(--ds-blue-bright);
|
||||||
|
|
||||||
--destructive: var(--tb-red);
|
--destructive: var(--ds-red);
|
||||||
--destructive-foreground: var(--tb-white);
|
--destructive-foreground: var(--ds-white);
|
||||||
|
|
||||||
--error: var(--tb-red);
|
--error: var(--ds-red);
|
||||||
--error-foreground: var(--tb-white);
|
--error-foreground: var(--ds-white);
|
||||||
|
|
||||||
--success: var(--tb-green-light);
|
--success: var(--ds-green-light);
|
||||||
--success-foreground: var(--tb-white);
|
--success-foreground: var(--ds-white);
|
||||||
|
|
||||||
--action: var(--tb-yellow);
|
--action: var(--ds-yellow);
|
||||||
--action-hover: var(--tb-yellow-light);
|
--action-hover: var(--ds-yellow-light);
|
||||||
--action-foreground: var(--tb-navy);
|
--action-foreground: var(--ds-navy);
|
||||||
|
|
||||||
--link: var(--tb-blue-bright);
|
--link: var(--ds-blue-bright);
|
||||||
--link-visited: var(--tb-purple-light);
|
--link-visited: var(--ds-purple-light);
|
||||||
|
|
||||||
--stale: rgba(238, 187, 68, 0.25);
|
--stale: rgba(238, 187, 68, 0.25);
|
||||||
|
|
||||||
@@ -102,7 +102,7 @@
|
|||||||
--base-shadow-darker: rgba(0, 0, 0, 0.6);
|
--base-shadow-darker: rgba(0, 0, 0, 0.6);
|
||||||
--base-shadow-opacity: 20%;
|
--base-shadow-opacity: 20%;
|
||||||
|
|
||||||
--cm-background: var(--tb-navy);
|
--cm-background: var(--ds-navy);
|
||||||
|
|
||||||
--background-image: none;
|
--background-image: none;
|
||||||
--background-repeat: no-repeat;
|
--background-repeat: no-repeat;
|
||||||
@@ -332,51 +332,51 @@
|
|||||||
TAILWIND PROSE - Markdown content
|
TAILWIND PROSE - Markdown content
|
||||||
============================================ */
|
============================================ */
|
||||||
:root {
|
:root {
|
||||||
--tw-prose-body: var(--tb-white);
|
--tw-prose-body: var(--ds-white);
|
||||||
--tw-prose-headings: var(--tb-white);
|
--tw-prose-headings: var(--ds-white);
|
||||||
--tw-prose-lead: var(--tb-silver);
|
--tw-prose-lead: var(--ds-silver);
|
||||||
--tw-prose-links: var(--tb-blue-bright);
|
--tw-prose-links: var(--ds-blue-bright);
|
||||||
--tw-prose-bold: var(--tb-white);
|
--tw-prose-bold: var(--ds-white);
|
||||||
--tw-prose-counters: var(--tb-steel);
|
--tw-prose-counters: var(--ds-steel);
|
||||||
--tw-prose-bullets: var(--tb-steel);
|
--tw-prose-bullets: var(--ds-steel);
|
||||||
--tw-prose-hr: var(--tb-slate);
|
--tw-prose-hr: var(--ds-slate);
|
||||||
--tw-prose-quotes: var(--tb-silver);
|
--tw-prose-quotes: var(--ds-silver);
|
||||||
--tw-prose-quote-borders: var(--tb-slate);
|
--tw-prose-quote-borders: var(--ds-slate);
|
||||||
--tw-prose-captions: var(--tb-steel);
|
--tw-prose-captions: var(--ds-steel);
|
||||||
--tw-prose-kbd: var(--tb-white);
|
--tw-prose-kbd: var(--ds-white);
|
||||||
--tw-prose-kbd-shadows: rgba(240, 240, 240, 0.1);
|
--tw-prose-kbd-shadows: rgba(240, 240, 240, 0.1);
|
||||||
--tw-prose-code: var(--tb-blue-bright);
|
--tw-prose-code: var(--ds-blue-bright);
|
||||||
--tw-prose-pre-code: var(--tb-silver);
|
--tw-prose-pre-code: var(--ds-silver);
|
||||||
--tw-prose-pre-bg: var(--tb-navy-light);
|
--tw-prose-pre-bg: var(--ds-navy-light);
|
||||||
--tw-prose-th-borders: var(--tb-slate);
|
--tw-prose-th-borders: var(--ds-slate);
|
||||||
--tw-prose-td-borders: var(--tb-navy-mid);
|
--tw-prose-td-borders: var(--ds-navy-mid);
|
||||||
|
|
||||||
/* Invert variants (used in dark mode) */
|
/* Invert variants (used in dark mode) */
|
||||||
--tw-prose-invert-body: var(--tb-white);
|
--tw-prose-invert-body: var(--ds-white);
|
||||||
--tw-prose-invert-headings: var(--tb-white);
|
--tw-prose-invert-headings: var(--ds-white);
|
||||||
--tw-prose-invert-lead: var(--tb-silver);
|
--tw-prose-invert-lead: var(--ds-silver);
|
||||||
--tw-prose-invert-links: var(--tb-blue-bright);
|
--tw-prose-invert-links: var(--ds-blue-bright);
|
||||||
--tw-prose-invert-bold: var(--tb-white);
|
--tw-prose-invert-bold: var(--ds-white);
|
||||||
--tw-prose-invert-counters: var(--tb-steel);
|
--tw-prose-invert-counters: var(--ds-steel);
|
||||||
--tw-prose-invert-bullets: var(--tb-steel);
|
--tw-prose-invert-bullets: var(--ds-steel);
|
||||||
--tw-prose-invert-hr: var(--tb-slate);
|
--tw-prose-invert-hr: var(--ds-slate);
|
||||||
--tw-prose-invert-quotes: var(--tb-silver);
|
--tw-prose-invert-quotes: var(--ds-silver);
|
||||||
--tw-prose-invert-quote-borders: var(--tb-slate);
|
--tw-prose-invert-quote-borders: var(--ds-slate);
|
||||||
--tw-prose-invert-captions: var(--tb-steel);
|
--tw-prose-invert-captions: var(--ds-steel);
|
||||||
--tw-prose-invert-kbd: var(--tb-white);
|
--tw-prose-invert-kbd: var(--ds-white);
|
||||||
--tw-prose-invert-kbd-shadows: rgba(240, 240, 240, 0.1);
|
--tw-prose-invert-kbd-shadows: rgba(240, 240, 240, 0.1);
|
||||||
--tw-prose-invert-code: var(--tb-blue-bright);
|
--tw-prose-invert-code: var(--ds-blue-bright);
|
||||||
--tw-prose-invert-pre-code: var(--tb-silver);
|
--tw-prose-invert-pre-code: var(--ds-silver);
|
||||||
--tw-prose-invert-pre-bg: var(--tb-navy-light);
|
--tw-prose-invert-pre-bg: var(--ds-navy-light);
|
||||||
--tw-prose-invert-th-borders: var(--tb-slate);
|
--tw-prose-invert-th-borders: var(--ds-slate);
|
||||||
--tw-prose-invert-td-borders: var(--tb-navy-mid);
|
--tw-prose-invert-td-borders: var(--ds-navy-mid);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ============================================
|
/* ============================================
|
||||||
BODY & BACKGROUNDS
|
BODY & BACKGROUNDS
|
||||||
============================================ */
|
============================================ */
|
||||||
body {
|
body {
|
||||||
background: var(--tb-navy) !important;
|
background: var(--ds-navy) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ============================================
|
/* ============================================
|
||||||
@@ -385,7 +385,7 @@ body {
|
|||||||
.cm-editor {
|
.cm-editor {
|
||||||
font-family: var(--monospace-font) !important;
|
font-family: var(--monospace-font) !important;
|
||||||
font-size: 14px !important;
|
font-size: 14px !important;
|
||||||
background: var(--tb-navy) !important;
|
background: var(--ds-navy) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cm-content {
|
.cm-content {
|
||||||
@@ -394,41 +394,41 @@ body {
|
|||||||
|
|
||||||
.cm-line {
|
.cm-line {
|
||||||
font-family: var(--monospace-font) !important;
|
font-family: var(--monospace-font) !important;
|
||||||
color: var(--tb-white) !important;
|
color: var(--ds-white) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cm-gutters {
|
.cm-gutters {
|
||||||
background: var(--tb-navy-light) !important;
|
background: var(--ds-navy-light) !important;
|
||||||
border-right: 2px solid var(--tb-slate) !important;
|
border-right: 2px solid var(--ds-slate) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cm-lineNumbers .cm-gutterElement {
|
.cm-lineNumbers .cm-gutterElement {
|
||||||
color: var(--tb-steel) !important;
|
color: var(--ds-steel) !important;
|
||||||
font-family: var(--monospace-font) !important;
|
font-family: var(--monospace-font) !important;
|
||||||
font-size: 12px !important;
|
font-size: 12px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Syntax highlighting */
|
/* Syntax highlighting */
|
||||||
.cm-keyword, .tok-keyword { color: var(--tb-blue-bright) !important; }
|
.cm-keyword, .tok-keyword { color: var(--ds-blue-bright) !important; }
|
||||||
.cm-string, .tok-string { color: var(--tb-green-light) !important; }
|
.cm-string, .tok-string { color: var(--ds-green-light) !important; }
|
||||||
.cm-number, .tok-number { color: var(--tb-yellow) !important; }
|
.cm-number, .tok-number { color: var(--ds-yellow) !important; }
|
||||||
.cm-comment, .tok-comment { color: var(--tb-steel) !important; font-style: italic !important; }
|
.cm-comment, .tok-comment { color: var(--ds-steel) !important; font-style: italic !important; }
|
||||||
.cm-function, .tok-function { color: var(--tb-white) !important; }
|
.cm-function, .tok-function { color: var(--ds-white) !important; }
|
||||||
.cm-variableName, .tok-variableName { color: var(--tb-white) !important; }
|
.cm-variableName, .tok-variableName { color: var(--ds-white) !important; }
|
||||||
.cm-operator, .tok-operator { color: var(--tb-blue-light) !important; }
|
.cm-operator, .tok-operator { color: var(--ds-blue-light) !important; }
|
||||||
.cm-propertyName, .tok-propertyName { color: var(--tb-blue-bright) !important; }
|
.cm-propertyName, .tok-propertyName { color: var(--ds-blue-bright) !important; }
|
||||||
.tok-standard, .cm-builtin { color: var(--tb-red-light) !important; }
|
.tok-standard, .cm-builtin { color: var(--ds-red-light) !important; }
|
||||||
.tok-definition, .cm-def { color: var(--tb-blue-bright) !important; }
|
.tok-definition, .cm-def { color: var(--ds-blue-bright) !important; }
|
||||||
.tok-typeName { color: var(--tb-yellow) !important; }
|
.tok-typeName { color: var(--ds-yellow) !important; }
|
||||||
.tok-bool { color: var(--tb-red-light) !important; }
|
.tok-bool { color: var(--ds-red-light) !important; }
|
||||||
|
|
||||||
.cm-cursor {
|
.cm-cursor {
|
||||||
border-left: 2px solid var(--tb-white) !important;
|
border-left: 2px solid var(--ds-white) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cm-selectionBackground,
|
.cm-selectionBackground,
|
||||||
::selection {
|
::selection {
|
||||||
background: var(--tb-blue) !important;
|
background: var(--ds-blue) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cm-activeLine {
|
.cm-activeLine {
|
||||||
@@ -440,18 +440,19 @@ body {
|
|||||||
============================================ */
|
============================================ */
|
||||||
h1, h2, h3, h4, h5, h6 {
|
h1, h2, h3, h4, h5, h6 {
|
||||||
font-family: var(--heading-font) !important;
|
font-family: var(--heading-font) !important;
|
||||||
|
font-weight: 600 !important;
|
||||||
letter-spacing: 0.5px !important;
|
letter-spacing: 0.5px !important;
|
||||||
line-height: 1.8 !important;
|
line-height: 1.8 !important;
|
||||||
color: var(--tb-white) !important;
|
color: var(--ds-white) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 { font-size: 18px !important; }
|
h1 { font-size: 18px !important; }
|
||||||
h2 { font-size: 14px !important; color: var(--tb-blue-bright) !important; }
|
h2 { font-size: 14px !important; color: var(--ds-blue-bright) !important; }
|
||||||
h3 { font-size: 12px !important; }
|
h3 { font-size: 12px !important; }
|
||||||
h4, h5, h6 { font-size: 11px !important; }
|
h4, h5, h6 { font-size: 11px !important; }
|
||||||
|
|
||||||
/* ============================================
|
/* ============================================
|
||||||
TABLES (Scoreboard style)
|
TABLES (Table styling)
|
||||||
============================================ */
|
============================================ */
|
||||||
table {
|
table {
|
||||||
border-collapse: collapse !important;
|
border-collapse: collapse !important;
|
||||||
@@ -459,27 +460,27 @@ table {
|
|||||||
}
|
}
|
||||||
|
|
||||||
th {
|
th {
|
||||||
background: var(--tb-navy-mid) !important;
|
background: var(--ds-navy-mid) !important;
|
||||||
color: var(--tb-white) !important;
|
color: var(--ds-white) !important;
|
||||||
font-family: var(--heading-font) !important;
|
font-family: var(--heading-font) !important;
|
||||||
font-size: 10px !important;
|
font-size: 10px !important;
|
||||||
padding: 10px 12px !important;
|
padding: 10px 12px !important;
|
||||||
text-transform: uppercase !important;
|
text-transform: uppercase !important;
|
||||||
letter-spacing: 1px !important;
|
letter-spacing: 1px !important;
|
||||||
border: 1px solid var(--tb-slate) !important;
|
border: 1px solid var(--ds-slate) !important;
|
||||||
border-bottom: 2px solid var(--tb-blue) !important;
|
border-bottom: 2px solid var(--ds-blue) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
td {
|
td {
|
||||||
background: var(--tb-navy) !important;
|
background: var(--ds-navy) !important;
|
||||||
color: var(--tb-white) !important;
|
color: var(--ds-white) !important;
|
||||||
padding: 8px 12px !important;
|
padding: 8px 12px !important;
|
||||||
border: 1px solid var(--tb-navy-light) !important;
|
border: 1px solid var(--ds-navy-light) !important;
|
||||||
font-size: 13px !important;
|
font-size: 13px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
tr:nth-child(even) td {
|
tr:nth-child(even) td {
|
||||||
background: var(--tb-navy-light) !important;
|
background: var(--ds-navy-light) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
tr:hover td {
|
tr:hover td {
|
||||||
@@ -501,15 +502,15 @@ button,
|
|||||||
button[data-variant="primary"],
|
button[data-variant="primary"],
|
||||||
button.primary,
|
button.primary,
|
||||||
[data-action="run"] {
|
[data-action="run"] {
|
||||||
background: var(--tb-green) !important;
|
background: var(--ds-green) !important;
|
||||||
color: var(--tb-white) !important;
|
color: var(--ds-white) !important;
|
||||||
border: 2px solid var(--tb-green-light) !important;
|
border: 2px solid var(--ds-green-light) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
button[data-variant="primary"]:hover,
|
button[data-variant="primary"]:hover,
|
||||||
button.primary:hover,
|
button.primary:hover,
|
||||||
[data-action="run"]:hover {
|
[data-action="run"]:hover {
|
||||||
background: var(--tb-green-light) !important;
|
background: var(--ds-green-light) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ============================================
|
/* ============================================
|
||||||
@@ -519,9 +520,9 @@ input,
|
|||||||
textarea,
|
textarea,
|
||||||
select {
|
select {
|
||||||
font-family: var(--monospace-font) !important;
|
font-family: var(--monospace-font) !important;
|
||||||
background: var(--tb-navy-mid) !important;
|
background: var(--ds-navy-mid) !important;
|
||||||
color: var(--tb-white) !important;
|
color: var(--ds-white) !important;
|
||||||
border: 2px solid var(--tb-slate) !important;
|
border: 2px solid var(--ds-slate) !important;
|
||||||
border-radius: 2px !important;
|
border-radius: 2px !important;
|
||||||
padding: 8px 12px !important;
|
padding: 8px 12px !important;
|
||||||
}
|
}
|
||||||
@@ -529,7 +530,7 @@ select {
|
|||||||
input:focus,
|
input:focus,
|
||||||
textarea:focus,
|
textarea:focus,
|
||||||
select:focus {
|
select:focus {
|
||||||
border-color: var(--tb-blue-light) !important;
|
border-color: var(--ds-blue-light) !important;
|
||||||
outline: none !important;
|
outline: none !important;
|
||||||
box-shadow: 0 0 0 2px rgba(102, 153, 238, 0.3) !important;
|
box-shadow: 0 0 0 2px rgba(102, 153, 238, 0.3) !important;
|
||||||
}
|
}
|
||||||
@@ -542,16 +543,16 @@ pre, code {
|
|||||||
}
|
}
|
||||||
|
|
||||||
code {
|
code {
|
||||||
background: var(--tb-navy-light) !important;
|
background: var(--ds-navy-light) !important;
|
||||||
color: var(--tb-blue-bright) !important;
|
color: var(--ds-blue-bright) !important;
|
||||||
padding: 2px 6px !important;
|
padding: 2px 6px !important;
|
||||||
border-radius: 2px !important;
|
border-radius: 2px !important;
|
||||||
font-size: 0.9em !important;
|
font-size: 0.9em !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
pre {
|
pre {
|
||||||
background: var(--tb-navy-light) !important;
|
background: var(--ds-navy-light) !important;
|
||||||
border: 2px solid var(--tb-slate) !important;
|
border: 2px solid var(--ds-slate) !important;
|
||||||
border-radius: 2px !important;
|
border-radius: 2px !important;
|
||||||
padding: 12px !important;
|
padding: 12px !important;
|
||||||
}
|
}
|
||||||
@@ -565,18 +566,18 @@ pre code {
|
|||||||
LINKS
|
LINKS
|
||||||
============================================ */
|
============================================ */
|
||||||
a {
|
a {
|
||||||
color: var(--tb-blue-bright) !important;
|
color: var(--ds-blue-bright) !important;
|
||||||
text-decoration: none !important;
|
text-decoration: none !important;
|
||||||
transition: color 0.15s ease !important;
|
transition: color 0.15s ease !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
a:hover {
|
a:hover {
|
||||||
color: var(--tb-white) !important;
|
color: var(--ds-white) !important;
|
||||||
text-decoration: underline !important;
|
text-decoration: underline !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
a:visited {
|
a:visited {
|
||||||
color: var(--tb-purple-light) !important;
|
color: var(--ds-purple-light) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ============================================
|
/* ============================================
|
||||||
@@ -588,17 +589,17 @@ a:visited {
|
|||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar-track {
|
::-webkit-scrollbar-track {
|
||||||
background: var(--tb-navy-light);
|
background: var(--ds-navy-light);
|
||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb {
|
::-webkit-scrollbar-thumb {
|
||||||
background: var(--tb-slate);
|
background: var(--ds-slate);
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
border: 2px solid var(--tb-navy-light);
|
border: 2px solid var(--ds-navy-light);
|
||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb:hover {
|
::-webkit-scrollbar-thumb:hover {
|
||||||
background: var(--tb-steel);
|
background: var(--ds-steel);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ============================================
|
/* ============================================
|
||||||
@@ -608,16 +609,16 @@ a:visited {
|
|||||||
[data-state="open"][data-side] {
|
[data-state="open"][data-side] {
|
||||||
font-family: var(--monospace-font) !important;
|
font-family: var(--monospace-font) !important;
|
||||||
font-size: 12px !important;
|
font-size: 12px !important;
|
||||||
background: var(--tb-navy-light) !important;
|
background: var(--ds-navy-light) !important;
|
||||||
color: var(--tb-white) !important;
|
color: var(--ds-white) !important;
|
||||||
border: 2px solid var(--tb-slate) !important;
|
border: 2px solid var(--ds-slate) !important;
|
||||||
border-radius: 2px !important;
|
border-radius: 2px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
[role="menu"],
|
[role="menu"],
|
||||||
[role="listbox"] {
|
[role="listbox"] {
|
||||||
background: var(--tb-navy-light) !important;
|
background: var(--ds-navy-light) !important;
|
||||||
border: 2px solid var(--tb-slate) !important;
|
border: 2px solid var(--ds-slate) !important;
|
||||||
border-radius: 2px !important;
|
border-radius: 2px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -625,8 +626,8 @@ a:visited {
|
|||||||
[role="option"]:hover,
|
[role="option"]:hover,
|
||||||
[role="menuitem"][data-highlighted],
|
[role="menuitem"][data-highlighted],
|
||||||
[role="option"][data-highlighted] {
|
[role="option"][data-highlighted] {
|
||||||
background: var(--tb-blue) !important;
|
background: var(--ds-blue) !important;
|
||||||
color: var(--tb-white) !important;
|
color: var(--ds-white) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Badges and pills */
|
/* Badges and pills */
|
||||||
@@ -639,7 +640,7 @@ a:visited {
|
|||||||
}
|
}
|
||||||
|
|
||||||
:focus-visible {
|
:focus-visible {
|
||||||
outline: 2px solid var(--tb-blue-light) !important;
|
outline: 2px solid var(--ds-blue-light) !important;
|
||||||
outline-offset: 2px !important;
|
outline-offset: 2px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -649,7 +650,7 @@ a:visited {
|
|||||||
[data-testid="outputs"],
|
[data-testid="outputs"],
|
||||||
.output-area {
|
.output-area {
|
||||||
background: rgba(22, 32, 64, 0.5) !important;
|
background: rgba(22, 32, 64, 0.5) !important;
|
||||||
border-top: 2px solid var(--tb-slate) !important;
|
border-top: 2px solid var(--ds-slate) !important;
|
||||||
padding: 12px !important;
|
padding: 12px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -667,20 +668,20 @@ svg {
|
|||||||
HOME PAGE
|
HOME PAGE
|
||||||
============================================ */
|
============================================ */
|
||||||
a[rel="noreferrer"][target="_blank"] {
|
a[rel="noreferrer"][target="_blank"] {
|
||||||
background: var(--tb-navy-light) !important;
|
background: var(--ds-navy-light) !important;
|
||||||
border: 3px solid var(--tb-slate) !important;
|
border: 3px solid var(--ds-slate) !important;
|
||||||
border-radius: 0 !important;
|
border-radius: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
a[rel="noreferrer"][target="_blank"]:hover {
|
a[rel="noreferrer"][target="_blank"]:hover {
|
||||||
border-color: var(--tb-blue) !important;
|
border-color: var(--ds-blue) !important;
|
||||||
background: var(--tb-navy-mid) !important;
|
background: var(--ds-navy-mid) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
a[rel="noreferrer"][target="_blank"] h2 {
|
a[rel="noreferrer"][target="_blank"] h2 {
|
||||||
font-family: var(--heading-font) !important;
|
font-family: var(--heading-font) !important;
|
||||||
font-size: 12px !important;
|
font-size: 12px !important;
|
||||||
color: var(--tb-white) !important;
|
color: var(--ds-white) !important;
|
||||||
text-transform: uppercase !important;
|
text-transform: uppercase !important;
|
||||||
letter-spacing: 2px !important;
|
letter-spacing: 2px !important;
|
||||||
}
|
}
|
||||||
@@ -690,27 +691,27 @@ h2.text-xl {
|
|||||||
font-size: 11px !important;
|
font-size: 11px !important;
|
||||||
text-transform: uppercase !important;
|
text-transform: uppercase !important;
|
||||||
letter-spacing: 2px !important;
|
letter-spacing: 2px !important;
|
||||||
color: var(--tb-white) !important;
|
color: var(--ds-white) !important;
|
||||||
padding-bottom: 6px;
|
padding-bottom: 6px;
|
||||||
border-bottom: 2px solid var(--tb-slate);
|
border-bottom: 2px solid var(--ds-slate);
|
||||||
}
|
}
|
||||||
|
|
||||||
.divide-y.border.rounded {
|
.divide-y.border.rounded {
|
||||||
border: 3px solid var(--tb-slate) !important;
|
border: 3px solid var(--ds-slate) !important;
|
||||||
border-radius: 0 !important;
|
border-radius: 0 !important;
|
||||||
background: var(--tb-navy) !important;
|
background: var(--ds-navy) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.divide-y.border > a,
|
.divide-y.border > a,
|
||||||
.divide-y.border > div > a {
|
.divide-y.border > div > a {
|
||||||
border-color: var(--tb-navy-light) !important;
|
border-color: var(--ds-navy-light) !important;
|
||||||
transition: all 0.1s ease !important;
|
transition: all 0.1s ease !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.divide-y.border > a:hover,
|
.divide-y.border > a:hover,
|
||||||
.divide-y.border > div > a:hover {
|
.divide-y.border > div > a:hover {
|
||||||
background: rgba(68, 119, 221, 0.2) !important;
|
background: rgba(68, 119, 221, 0.2) !important;
|
||||||
border-left: 3px solid var(--tb-blue) !important;
|
border-left: 3px solid var(--ds-blue) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.divide-y.border a .flex-1 span {
|
.divide-y.border a .flex-1 span {
|
||||||
@@ -727,7 +728,7 @@ h2.text-xl {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* ============================================
|
/* ============================================
|
||||||
PIXEL-PERFECT BORDERS
|
BORDERS
|
||||||
============================================ */
|
============================================ */
|
||||||
.rounded-lg,
|
.rounded-lg,
|
||||||
.rounded-md {
|
.rounded-md {
|
||||||
@@ -743,33 +744,33 @@ h2.text-xl {
|
|||||||
TOP BAR / ACTION BUTTONS
|
TOP BAR / ACTION BUTTONS
|
||||||
============================================ */
|
============================================ */
|
||||||
.absolute.top-3.right-5 button {
|
.absolute.top-3.right-5 button {
|
||||||
border: 2px solid var(--tb-slate) !important;
|
border: 2px solid var(--ds-slate) !important;
|
||||||
border-radius: 0 !important;
|
border-radius: 0 !important;
|
||||||
background: var(--tb-navy-light) !important;
|
background: var(--ds-navy-light) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.absolute.top-3.right-5 button:hover {
|
.absolute.top-3.right-5 button:hover {
|
||||||
background: var(--tb-blue) !important;
|
background: var(--ds-blue) !important;
|
||||||
border-color: var(--tb-blue-light) !important;
|
border-color: var(--ds-blue-light) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ============================================
|
/* ============================================
|
||||||
SEARCH INPUT
|
SEARCH INPUT
|
||||||
============================================ */
|
============================================ */
|
||||||
input#search {
|
input#search {
|
||||||
border: 3px solid var(--tb-slate) !important;
|
border: 3px solid var(--ds-slate) !important;
|
||||||
border-radius: 0 !important;
|
border-radius: 0 !important;
|
||||||
background: var(--tb-navy) !important;
|
background: var(--ds-navy) !important;
|
||||||
font-family: var(--monospace-font) !important;
|
font-family: var(--monospace-font) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
input#search:focus {
|
input#search:focus {
|
||||||
border-color: var(--tb-blue-light) !important;
|
border-color: var(--ds-blue-light) !important;
|
||||||
box-shadow: 0 0 8px rgba(102, 153, 238, 0.3) !important;
|
box-shadow: 0 0 8px rgba(102, 153, 238, 0.3) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ============================================
|
/* ============================================
|
||||||
BUTTON PRESS EFFECT
|
BUTTON STATES
|
||||||
============================================ */
|
============================================ */
|
||||||
button:active,
|
button:active,
|
||||||
[role="button"]:active {
|
[role="button"]:active {
|
||||||
@@ -782,10 +783,10 @@ button:active,
|
|||||||
============================================ */
|
============================================ */
|
||||||
.dark .text-foreground,
|
.dark .text-foreground,
|
||||||
.text-foreground {
|
.text-foreground {
|
||||||
color: var(--tb-white) !important;
|
color: var(--ds-white) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dark .text-muted-foreground,
|
.dark .text-muted-foreground,
|
||||||
.text-muted-foreground {
|
.text-muted-foreground {
|
||||||
color: var(--tb-steel) !important;
|
color: var(--ds-steel) !important;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,26 +0,0 @@
|
|||||||
/* THROWBACK COLOR PALETTE — Single Source of Truth
|
|
||||||
Tecmo Super Bowl inspired: deep navy, white text, patriotic red/blue
|
|
||||||
When changing a color here, propagate to the service-specific files:
|
|
||||||
inject.css, dashboard.css, gitea.css, woodpecker.css, marimo.css */
|
|
||||||
|
|
||||||
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=IBM+Plex+Mono:wght@400;500;600&display=swap');
|
|
||||||
|
|
||||||
:root {
|
|
||||||
--tb-navy: #0a1628;
|
|
||||||
--tb-navy-light: #162040;
|
|
||||||
--tb-navy-mid: #1e2d50;
|
|
||||||
--tb-slate: #2a3f5f;
|
|
||||||
--tb-steel: #5a7090;
|
|
||||||
--tb-white: #f0f0f0;
|
|
||||||
|
|
||||||
--tb-blue: #3366cc;
|
|
||||||
--tb-blue-light: #5588dd;
|
|
||||||
--tb-blue-bright: #88aaee;
|
|
||||||
|
|
||||||
--tb-red: #cc2244;
|
|
||||||
--tb-red-light: #dd4466;
|
|
||||||
|
|
||||||
--tb-green: #44aa44;
|
|
||||||
--tb-green-light: #66cc66;
|
|
||||||
--tb-yellow: #ddaa33;
|
|
||||||
}
|
|
||||||
@@ -1,69 +1,70 @@
|
|||||||
/* THROWBACK THEME FOR WOODPECKER CI - Tecmo Super Bowl */
|
/* LOCH — deep-navy design system for Woodpecker CI */
|
||||||
|
|
||||||
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=IBM+Plex+Mono:wght@400;500;600&display=swap');
|
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap');
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
/* Throwback Color Palette */
|
/* Loch Color Palette */
|
||||||
--tb-navy: #0a1628;
|
--ds-navy: #0a1628;
|
||||||
--tb-navy-light: #162040;
|
--ds-navy-light: #162040;
|
||||||
--tb-navy-mid: #1e2d50;
|
--ds-navy-mid: #1e2d50;
|
||||||
--tb-slate: #2a3f5f;
|
--ds-slate: #2a3f5f;
|
||||||
--tb-steel: #5a7090;
|
--ds-steel: #5a7090;
|
||||||
--tb-white: #f0f0f0;
|
--ds-white: #f0f0f0;
|
||||||
|
|
||||||
--tb-blue: #3366cc;
|
--ds-blue: #3366cc;
|
||||||
--tb-blue-light: #5588dd;
|
--ds-blue-light: #5588dd;
|
||||||
--tb-blue-bright: #88aaee;
|
--ds-blue-bright: #88aaee;
|
||||||
|
|
||||||
--tb-red: #cc2244;
|
--ds-red: #cc2244;
|
||||||
--tb-red-light: #dd4466;
|
--ds-red-light: #dd4466;
|
||||||
|
|
||||||
--tb-green: #44aa44;
|
--ds-green: #44aa44;
|
||||||
--tb-green-light: #66cc66;
|
--ds-green-light: #66cc66;
|
||||||
--tb-yellow: #ddaa33;
|
--ds-yellow: #ddaa33;
|
||||||
|
|
||||||
/* Woodpecker color overrides */
|
/* Woodpecker color overrides */
|
||||||
--color-wp-primary-100: var(--tb-blue-bright);
|
--color-wp-primary-100: var(--ds-blue-bright);
|
||||||
--color-wp-primary-200: var(--tb-blue-light);
|
--color-wp-primary-200: var(--ds-blue-light);
|
||||||
--color-wp-primary-300: var(--tb-blue);
|
--color-wp-primary-300: var(--ds-blue);
|
||||||
--color-wp-primary-400: #2255aa;
|
--color-wp-primary-400: #2255aa;
|
||||||
--color-wp-primary-500: var(--tb-navy);
|
--color-wp-primary-500: var(--ds-navy);
|
||||||
|
|
||||||
--color-wp-success-100: var(--tb-green-light);
|
--color-wp-success-100: var(--ds-green-light);
|
||||||
--color-wp-success-200: var(--tb-green);
|
--color-wp-success-200: var(--ds-green);
|
||||||
|
|
||||||
--color-wp-error-100: var(--tb-red-light);
|
--color-wp-error-100: var(--ds-red-light);
|
||||||
--color-wp-error-200: var(--tb-red);
|
--color-wp-error-200: var(--ds-red);
|
||||||
|
|
||||||
--color-wp-warning-100: var(--tb-yellow);
|
--color-wp-warning-100: var(--ds-yellow);
|
||||||
--color-wp-warning-200: #bb8822;
|
--color-wp-warning-200: #bb8822;
|
||||||
|
|
||||||
--color-wp-gray-100: var(--tb-white);
|
--color-wp-gray-100: var(--ds-white);
|
||||||
--color-wp-gray-200: var(--tb-steel);
|
--color-wp-gray-200: var(--ds-steel);
|
||||||
--color-wp-gray-300: var(--tb-slate);
|
--color-wp-gray-300: var(--ds-slate);
|
||||||
--color-wp-gray-400: var(--tb-navy-mid);
|
--color-wp-gray-400: var(--ds-navy-mid);
|
||||||
--color-wp-gray-500: var(--tb-navy-light);
|
--color-wp-gray-500: var(--ds-navy-light);
|
||||||
--color-wp-gray-600: var(--tb-navy);
|
--color-wp-gray-600: var(--ds-navy);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Global styles */
|
/* Global styles */
|
||||||
body,
|
body,
|
||||||
html {
|
html {
|
||||||
font-family: 'IBM Plex Mono', monospace !important;
|
font-family: 'IBM Plex Mono', monospace !important;
|
||||||
background: var(--tb-navy) !important;
|
background: var(--ds-navy) !important;
|
||||||
color: var(--tb-white) !important;
|
color: var(--ds-white) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Headings */
|
/* Headings */
|
||||||
h1, h2, h3, h4, h5, h6 {
|
h1, h2, h3, h4, h5, h6 {
|
||||||
font-family: 'Press Start 2P', monospace !important;
|
font-family: 'IBM Plex Mono', monospace !important;
|
||||||
|
font-weight: 600 !important;
|
||||||
letter-spacing: 0.5px !important;
|
letter-spacing: 0.5px !important;
|
||||||
line-height: 1.8 !important;
|
line-height: 1.8 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 { font-size: 18px !important; color: var(--tb-white) !important; }
|
h1 { font-size: 18px !important; color: var(--ds-white) !important; }
|
||||||
h2 { font-size: 14px !important; color: var(--tb-blue-bright) !important; }
|
h2 { font-size: 14px !important; color: var(--ds-blue-bright) !important; }
|
||||||
h3 { font-size: 12px !important; color: var(--tb-white) !important; }
|
h3 { font-size: 12px !important; color: var(--ds-white) !important; }
|
||||||
|
|
||||||
/* Header/Navbar */
|
/* Header/Navbar */
|
||||||
header,
|
header,
|
||||||
@@ -71,16 +72,16 @@ nav,
|
|||||||
.navbar,
|
.navbar,
|
||||||
[class*="header"],
|
[class*="header"],
|
||||||
[class*="Header"] {
|
[class*="Header"] {
|
||||||
background: var(--tb-navy-light) !important;
|
background: var(--ds-navy-light) !important;
|
||||||
border-bottom: 3px solid var(--tb-slate) !important;
|
border-bottom: 3px solid var(--ds-slate) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Sidebar */
|
/* Sidebar */
|
||||||
aside,
|
aside,
|
||||||
[class*="sidebar"],
|
[class*="sidebar"],
|
||||||
[class*="Sidebar"] {
|
[class*="Sidebar"] {
|
||||||
background: var(--tb-navy) !important;
|
background: var(--ds-navy) !important;
|
||||||
border-right: 3px solid var(--tb-slate) !important;
|
border-right: 3px solid var(--ds-slate) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Main content area */
|
/* Main content area */
|
||||||
@@ -97,8 +98,8 @@ main,
|
|||||||
[class*="Panel"],
|
[class*="Panel"],
|
||||||
[class*="box"],
|
[class*="box"],
|
||||||
[class*="Box"] {
|
[class*="Box"] {
|
||||||
background: var(--tb-navy) !important;
|
background: var(--ds-navy) !important;
|
||||||
border: 2px solid var(--tb-slate) !important;
|
border: 2px solid var(--ds-slate) !important;
|
||||||
border-radius: 4px !important;
|
border-radius: 4px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -118,16 +119,16 @@ button,
|
|||||||
[class*="primary"],
|
[class*="primary"],
|
||||||
[class*="Primary"],
|
[class*="Primary"],
|
||||||
button[type="submit"] {
|
button[type="submit"] {
|
||||||
background: var(--tb-blue) !important;
|
background: var(--ds-blue) !important;
|
||||||
color: var(--tb-white) !important;
|
color: var(--ds-white) !important;
|
||||||
border: 2px solid var(--tb-blue-light) !important;
|
border: 2px solid var(--ds-blue-light) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
[class*="primary"]:hover,
|
[class*="primary"]:hover,
|
||||||
[class*="Primary"]:hover,
|
[class*="Primary"]:hover,
|
||||||
button[type="submit"]:hover {
|
button[type="submit"]:hover {
|
||||||
background: var(--tb-blue-light) !important;
|
background: var(--ds-blue-light) !important;
|
||||||
color: var(--tb-white) !important;
|
color: var(--ds-white) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Success/green buttons */
|
/* Success/green buttons */
|
||||||
@@ -135,15 +136,15 @@ button[type="submit"]:hover {
|
|||||||
[class*="Success"],
|
[class*="Success"],
|
||||||
[class*="green"],
|
[class*="green"],
|
||||||
[class*="Green"] {
|
[class*="Green"] {
|
||||||
background: var(--tb-green) !important;
|
background: var(--ds-green) !important;
|
||||||
color: var(--tb-white) !important;
|
color: var(--ds-white) !important;
|
||||||
border: 2px solid var(--tb-green-light) !important;
|
border: 2px solid var(--ds-green-light) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
[class*="success"]:hover,
|
[class*="success"]:hover,
|
||||||
[class*="Success"]:hover {
|
[class*="Success"]:hover {
|
||||||
background: var(--tb-green-light) !important;
|
background: var(--ds-green-light) !important;
|
||||||
color: var(--tb-navy) !important;
|
color: var(--ds-navy) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Danger/red buttons */
|
/* Danger/red buttons */
|
||||||
@@ -153,8 +154,8 @@ button[type="submit"]:hover {
|
|||||||
[class*="Error"],
|
[class*="Error"],
|
||||||
[class*="red"],
|
[class*="red"],
|
||||||
[class*="Red"] {
|
[class*="Red"] {
|
||||||
background: var(--tb-red) !important;
|
background: var(--ds-red) !important;
|
||||||
color: var(--tb-white) !important;
|
color: var(--ds-white) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Forms */
|
/* Forms */
|
||||||
@@ -162,9 +163,9 @@ input,
|
|||||||
textarea,
|
textarea,
|
||||||
select {
|
select {
|
||||||
font-family: 'IBM Plex Mono', monospace !important;
|
font-family: 'IBM Plex Mono', monospace !important;
|
||||||
background: var(--tb-navy-mid) !important;
|
background: var(--ds-navy-mid) !important;
|
||||||
color: var(--tb-white) !important;
|
color: var(--ds-white) !important;
|
||||||
border: 2px solid var(--tb-slate) !important;
|
border: 2px solid var(--ds-slate) !important;
|
||||||
border-radius: 4px !important;
|
border-radius: 4px !important;
|
||||||
padding: 8px 12px !important;
|
padding: 8px 12px !important;
|
||||||
}
|
}
|
||||||
@@ -172,37 +173,37 @@ select {
|
|||||||
input:focus,
|
input:focus,
|
||||||
textarea:focus,
|
textarea:focus,
|
||||||
select:focus {
|
select:focus {
|
||||||
border-color: var(--tb-blue-light) !important;
|
border-color: var(--ds-blue-light) !important;
|
||||||
outline: none !important;
|
outline: none !important;
|
||||||
box-shadow: 0 0 0 2px rgba(85, 136, 221, 0.3) !important;
|
box-shadow: 0 0 0 2px rgba(85, 136, 221, 0.3) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Tables */
|
/* Tables */
|
||||||
table {
|
table {
|
||||||
background: var(--tb-navy) !important;
|
background: var(--ds-navy) !important;
|
||||||
border: 2px solid var(--tb-slate) !important;
|
border: 2px solid var(--ds-slate) !important;
|
||||||
border-collapse: collapse !important;
|
border-collapse: collapse !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
th {
|
th {
|
||||||
background: var(--tb-blue) !important;
|
background: var(--ds-blue) !important;
|
||||||
color: var(--tb-white) !important;
|
color: var(--ds-white) !important;
|
||||||
font-family: 'Press Start 2P', monospace !important;
|
font-family: 'IBM Plex Mono', monospace !important;
|
||||||
font-size: 10px !important;
|
font-size: 10px !important;
|
||||||
text-transform: uppercase !important;
|
text-transform: uppercase !important;
|
||||||
padding: 10px 12px !important;
|
padding: 10px 12px !important;
|
||||||
border: 1px solid var(--tb-blue-light) !important;
|
border: 1px solid var(--ds-blue-light) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
td {
|
td {
|
||||||
background: var(--tb-navy) !important;
|
background: var(--ds-navy) !important;
|
||||||
color: var(--tb-white) !important;
|
color: var(--ds-white) !important;
|
||||||
padding: 8px 12px !important;
|
padding: 8px 12px !important;
|
||||||
border: 1px solid var(--tb-navy-light) !important;
|
border: 1px solid var(--ds-navy-light) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
tr:nth-child(even) td {
|
tr:nth-child(even) td {
|
||||||
background: var(--tb-navy-light) !important;
|
background: var(--ds-navy-light) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
tr:hover td {
|
tr:hover td {
|
||||||
@@ -214,14 +215,14 @@ tr:hover td {
|
|||||||
[class*="Running"],
|
[class*="Running"],
|
||||||
[class*="pending"],
|
[class*="pending"],
|
||||||
[class*="Pending"] {
|
[class*="Pending"] {
|
||||||
color: var(--tb-yellow) !important;
|
color: var(--ds-yellow) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
[class*="success"],
|
[class*="success"],
|
||||||
[class*="Success"],
|
[class*="Success"],
|
||||||
[class*="passed"],
|
[class*="passed"],
|
||||||
[class*="Passed"] {
|
[class*="Passed"] {
|
||||||
color: var(--tb-green-light) !important;
|
color: var(--ds-green-light) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
[class*="failure"],
|
[class*="failure"],
|
||||||
@@ -230,7 +231,7 @@ tr:hover td {
|
|||||||
[class*="Failed"],
|
[class*="Failed"],
|
||||||
[class*="error"],
|
[class*="error"],
|
||||||
[class*="Error"] {
|
[class*="Error"] {
|
||||||
color: var(--tb-red) !important;
|
color: var(--ds-red) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Build logs */
|
/* Build logs */
|
||||||
@@ -241,28 +242,28 @@ code,
|
|||||||
[class*="console"],
|
[class*="console"],
|
||||||
[class*="Console"] {
|
[class*="Console"] {
|
||||||
font-family: 'IBM Plex Mono', monospace !important;
|
font-family: 'IBM Plex Mono', monospace !important;
|
||||||
background: var(--tb-navy) !important;
|
background: var(--ds-navy) !important;
|
||||||
color: var(--tb-white) !important;
|
color: var(--ds-white) !important;
|
||||||
border: 2px solid var(--tb-slate) !important;
|
border: 2px solid var(--ds-slate) !important;
|
||||||
border-radius: 4px !important;
|
border-radius: 4px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Inline code */
|
/* Inline code */
|
||||||
code {
|
code {
|
||||||
background: var(--tb-navy-light) !important;
|
background: var(--ds-navy-light) !important;
|
||||||
color: var(--tb-blue-bright) !important;
|
color: var(--ds-blue-bright) !important;
|
||||||
padding: 2px 6px !important;
|
padding: 2px 6px !important;
|
||||||
border: none !important;
|
border: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Links */
|
/* Links */
|
||||||
a {
|
a {
|
||||||
color: var(--tb-blue-bright) !important;
|
color: var(--ds-blue-bright) !important;
|
||||||
text-decoration: none !important;
|
text-decoration: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
a:hover {
|
a:hover {
|
||||||
color: var(--tb-white) !important;
|
color: var(--ds-white) !important;
|
||||||
text-decoration: underline !important;
|
text-decoration: underline !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -273,8 +274,8 @@ a:hover {
|
|||||||
[class*="Menu"],
|
[class*="Menu"],
|
||||||
[class*="popover"],
|
[class*="popover"],
|
||||||
[class*="Popover"] {
|
[class*="Popover"] {
|
||||||
background: var(--tb-navy-light) !important;
|
background: var(--ds-navy-light) !important;
|
||||||
border: 2px solid var(--tb-slate) !important;
|
border: 2px solid var(--ds-slate) !important;
|
||||||
border-radius: 4px !important;
|
border-radius: 4px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -282,7 +283,7 @@ a:hover {
|
|||||||
[class*="menu"] li:hover,
|
[class*="menu"] li:hover,
|
||||||
[role="menuitem"]:hover,
|
[role="menuitem"]:hover,
|
||||||
[role="option"]:hover {
|
[role="option"]:hover {
|
||||||
background: var(--tb-blue) !important;
|
background: var(--ds-blue) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Badges and tags */
|
/* Badges and tags */
|
||||||
@@ -302,9 +303,9 @@ a:hover {
|
|||||||
[class*="tooltip"],
|
[class*="tooltip"],
|
||||||
[class*="Tooltip"] {
|
[class*="Tooltip"] {
|
||||||
font-family: 'IBM Plex Mono', monospace !important;
|
font-family: 'IBM Plex Mono', monospace !important;
|
||||||
background: var(--tb-navy-light) !important;
|
background: var(--ds-navy-light) !important;
|
||||||
color: var(--tb-white) !important;
|
color: var(--ds-white) !important;
|
||||||
border: 2px solid var(--tb-slate) !important;
|
border: 2px solid var(--ds-slate) !important;
|
||||||
border-radius: 4px !important;
|
border-radius: 4px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -312,17 +313,17 @@ a:hover {
|
|||||||
progress,
|
progress,
|
||||||
[class*="progress"],
|
[class*="progress"],
|
||||||
[class*="Progress"] {
|
[class*="Progress"] {
|
||||||
background: var(--tb-navy-light) !important;
|
background: var(--ds-navy-light) !important;
|
||||||
border: 2px solid var(--tb-slate) !important;
|
border: 2px solid var(--ds-slate) !important;
|
||||||
border-radius: 4px !important;
|
border-radius: 4px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
progress::-webkit-progress-bar {
|
progress::-webkit-progress-bar {
|
||||||
background: var(--tb-navy-light) !important;
|
background: var(--ds-navy-light) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
progress::-webkit-progress-value {
|
progress::-webkit-progress-value {
|
||||||
background: var(--tb-blue) !important;
|
background: var(--ds-blue) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Scrollbars */
|
/* Scrollbars */
|
||||||
@@ -332,22 +333,22 @@ progress::-webkit-progress-value {
|
|||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar-track {
|
::-webkit-scrollbar-track {
|
||||||
background: var(--tb-navy-light);
|
background: var(--ds-navy-light);
|
||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb {
|
::-webkit-scrollbar-thumb {
|
||||||
background: var(--tb-slate);
|
background: var(--ds-slate);
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb:hover {
|
::-webkit-scrollbar-thumb:hover {
|
||||||
background: var(--tb-steel);
|
background: var(--ds-steel);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Selection */
|
/* Selection */
|
||||||
::selection {
|
::selection {
|
||||||
background: var(--tb-blue) !important;
|
background: var(--ds-blue) !important;
|
||||||
color: var(--tb-white) !important;
|
color: var(--ds-white) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Icons - ensure visibility */
|
/* Icons - ensure visibility */
|
||||||
@@ -360,7 +361,7 @@ svg,
|
|||||||
/* Avatar images */
|
/* Avatar images */
|
||||||
img[class*="avatar"],
|
img[class*="avatar"],
|
||||||
[class*="avatar"] img {
|
[class*="avatar"] img {
|
||||||
border: 2px solid var(--tb-slate) !important;
|
border: 2px solid var(--ds-slate) !important;
|
||||||
border-radius: 4px !important;
|
border-radius: 4px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -369,7 +370,7 @@ img[class*="avatar"],
|
|||||||
[class*="Item"],
|
[class*="Item"],
|
||||||
[class*="list-item"],
|
[class*="list-item"],
|
||||||
[class*="ListItem"] {
|
[class*="ListItem"] {
|
||||||
border-bottom: 1px solid var(--tb-navy-light) !important;
|
border-bottom: 1px solid var(--ds-navy-light) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
[class*="item"]:hover,
|
[class*="item"]:hover,
|
||||||
|
|||||||
@@ -6,6 +6,7 @@
|
|||||||
"woodpecker-server" (dict "port" "8000" "theme" true "subdomain" "ci" "mw" "local-only,secure-headers")
|
"woodpecker-server" (dict "port" "8000" "theme" true "subdomain" "ci" "mw" "local-only,secure-headers")
|
||||||
"notebooks" (dict "port" "2718" "theme" true "mw" "local-only,secure-headers")
|
"notebooks" (dict "port" "2718" "theme" true "mw" "local-only,secure-headers")
|
||||||
"zotero" (dict "port" "8080" "theme" true "mw" "secure-headers")
|
"zotero" (dict "port" "8080" "theme" true "mw" "secure-headers")
|
||||||
|
"api" (dict "port" "8000" "theme" false "mw" "secure-headers")
|
||||||
"nessie" (dict "port" "19120" "theme" false "mw" "local-only,infra-headers")
|
"nessie" (dict "port" "19120" "theme" false "mw" "local-only,infra-headers")
|
||||||
"trino" (dict "port" "8080" "theme" true "mw" "local-only,infra-headers")
|
"trino" (dict "port" "8080" "theme" true "mw" "local-only,infra-headers")
|
||||||
"polaris" (dict "port" "8181" "theme" false "mw" "local-only,infra-headers")
|
"polaris" (dict "port" "8181" "theme" false "mw" "local-only,infra-headers")
|
||||||
@@ -40,13 +41,13 @@ http:
|
|||||||
referrerPolicy: "strict-origin-when-cross-origin"
|
referrerPolicy: "strict-origin-when-cross-origin"
|
||||||
customResponseHeaders:
|
customResponseHeaders:
|
||||||
X-Robots-Tag: "noindex, nofollow"
|
X-Robots-Tag: "noindex, nofollow"
|
||||||
inject-throwback:
|
inject-loch:
|
||||||
plugin:
|
plugin:
|
||||||
rewrite-body:
|
rewrite-body:
|
||||||
lastModified: true
|
lastModified: true
|
||||||
rewrites:
|
rewrites:
|
||||||
- regex: "</head>"
|
- regex: "</head>"
|
||||||
replacement: '<link rel="icon" type="image/png" sizes="32x32" href="http://{{ $domain }}/fav32.png"><link rel="stylesheet" type="text/css" href="http://{{ $domain }}/throwback.css"></head>'
|
replacement: '<link rel="icon" type="image/png" sizes="32x32" href="http://{{ $domain }}/fav32.png"><link rel="stylesheet" type="text/css" href="http://{{ $domain }}/loch.css"></head>'
|
||||||
routers:
|
routers:
|
||||||
{{- range $name, $svc := $reef }}
|
{{- range $name, $svc := $reef }}
|
||||||
{{ $name }}:
|
{{ $name }}:
|
||||||
@@ -55,7 +56,7 @@ http:
|
|||||||
entryPoints:
|
entryPoints:
|
||||||
- web
|
- web
|
||||||
{{- $mwList := list -}}
|
{{- $mwList := list -}}
|
||||||
{{- if get $svc "theme" }}{{ $mwList = append $mwList "inject-throwback" }}{{ end -}}
|
{{- if get $svc "theme" }}{{ $mwList = append $mwList "inject-loch" }}{{ end -}}
|
||||||
{{- $extra := get $svc "mw" | default "" -}}
|
{{- $extra := get $svc "mw" | default "" -}}
|
||||||
{{- if ne $extra "" }}{{ range splitList "," $extra }}{{ $mwList = append $mwList (trim .) }}{{ end }}{{ end -}}
|
{{- if ne $extra "" }}{{ range splitList "," $extra }}{{ $mwList = append $mwList (trim .) }}{{ end }}{{ end -}}
|
||||||
{{- if $mwList }}
|
{{- if $mwList }}
|
||||||
@@ -72,7 +73,7 @@ http:
|
|||||||
entryPoints:
|
entryPoints:
|
||||||
- web
|
- web
|
||||||
{{- $mwList := list -}}
|
{{- $mwList := list -}}
|
||||||
{{- if get $svc "theme" }}{{ $mwList = append $mwList "inject-throwback" }}{{ end -}}
|
{{- if get $svc "theme" }}{{ $mwList = append $mwList "inject-loch" }}{{ end -}}
|
||||||
{{- $extra := get $svc "mw" | default "" -}}
|
{{- $extra := get $svc "mw" | default "" -}}
|
||||||
{{- if ne $extra "" }}{{ range splitList "," $extra }}{{ $mwList = append $mwList (trim .) }}{{ end }}{{ end -}}
|
{{- if ne $extra "" }}{{ range splitList "," $extra }}{{ $mwList = append $mwList (trim .) }}{{ end }}{{ end -}}
|
||||||
{{- if $mwList }}
|
{{- if $mwList }}
|
||||||
@@ -88,7 +89,7 @@ http:
|
|||||||
entryPoints:
|
entryPoints:
|
||||||
- web
|
- web
|
||||||
middlewares:
|
middlewares:
|
||||||
- inject-throwback
|
- inject-loch
|
||||||
- local-only
|
- local-only
|
||||||
- infra-headers
|
- infra-headers
|
||||||
services:
|
services:
|
||||||
|
|||||||
Reference in New Issue
Block a user