diff --git a/.github/workflows/docker-build-push.yml b/.github/workflows/docker-build-push.yml
deleted file mode 100644
index 62ee2b4..0000000
--- a/.github/workflows/docker-build-push.yml
+++ /dev/null
@@ -1,50 +0,0 @@
-name: Build and Push Docker Image
-
-on:
- push:
- branches: [ main ]
- workflow_dispatch:
-
-env:
- REGISTRY: ghcr.io
- IMAGE_NAME: finger-web
-
-jobs:
- build-and-push:
- runs-on: ubuntu-latest
- permissions:
- contents: read
- packages: write
-
- steps:
- - name: Checkout repository
- uses: actions/checkout@v4
-
- - name: Set up Docker Buildx
- uses: docker/setup-buildx-action@v3
-
- - name: Log in to Container Registry
- uses: docker/login-action@v3
- with:
- registry: ${{ env.REGISTRY }}
- username: ${{ github.actor }}
- password: ${{ secrets.GITHUB_TOKEN }}
-
- - name: Extract metadata
- id: meta
- uses: docker/metadata-action@v5
- with:
- images: ${{ env.REGISTRY }}/${{ github.repository_owner }}/${{ env.IMAGE_NAME }}
- tags: |
- type=ref,event=branch
- type=raw,value=latest,enable={{is_default_branch}}
-
- - name: Build and push Docker image
- uses: docker/build-push-action@v5
- with:
- context: .
- push: true
- tags: ${{ steps.meta.outputs.tags }}
- labels: ${{ steps.meta.outputs.labels }}
- cache-from: type=gha
- cache-to: type=gha,mode=max
diff --git a/static/css/style.css b/static/css/style.css
index 82c14e3..788a265 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -1,43 +1,111 @@
-/* Custom styles for Finger Web Flask App */
+/* Custom styles for Finger Web Flask App
+ *
+ * Palette: Tokyo Night (https://github.com/folke/tokyonight.nvim), matching
+ * the same anchor colors waffles.yttrx.com's Compost/Tailwind theme uses, so
+ * both sites share one visual identity. Applied on top of Bootstrap 5.3's
+ * native [data-bs-theme=dark] mode (set on in base.html) by
+ * overriding its root-level color tokens rather than fighting individual
+ * utility classes.
+ */
+
+:root {
+ --tn-bg: #1a1b26;
+ --tn-bg-dark: #16161e;
+ --tn-surface: #24283b;
+ --tn-surface-hi: #292e42;
+ --tn-border: #3b4261;
+ --tn-fg: #c0caf5;
+ --tn-fg-dark: #a9b1d6;
+ --tn-comment: #565f89;
+ --tn-blue: #7aa2f7;
+ --tn-blue-bright: #5d86ef;
+ --tn-cyan: #7dcfff;
+ --tn-purple: #bb9af7;
+ --tn-green: #9ece6a;
+ --tn-red: #f7768e;
+ --tn-yellow: #e0af68;
+
+ /* Bootstrap root tokens (color-mode independent, used by .bg-primary,
+ .btn-primary, .text-primary, .border-primary, etc. app-wide). */
+ --bs-primary: var(--tn-blue);
+ --bs-primary-rgb: 122, 162, 247;
+ --bs-danger: var(--tn-red);
+ --bs-danger-rgb: 247, 118, 142;
+ --bs-success: var(--tn-green);
+ --bs-success-rgb: 158, 206, 106;
+ --bs-warning: var(--tn-yellow);
+ --bs-warning-rgb: 224, 175, 104;
+ --bs-info: var(--tn-cyan);
+ --bs-info-rgb: 125, 207, 255;
+ --bs-font-sans-serif: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+}
+
+/* Bootstrap's dark color-mode tokens — override the defaults with the exact
+ Tokyo Night shades instead of Bootstrap's generic dark grays. */
+[data-bs-theme="dark"] {
+ --bs-body-bg: var(--tn-bg);
+ --bs-body-color: var(--tn-fg);
+ --bs-emphasis-color: #ffffff;
+ --bs-secondary-color: var(--tn-comment);
+ --bs-secondary-bg: var(--tn-surface);
+ --bs-tertiary-bg: var(--tn-surface-hi);
+ --bs-border-color: var(--tn-border);
+ --bs-link-color: var(--tn-blue);
+ --bs-link-hover-color: var(--tn-cyan);
+ --bs-link-color-rgb: 122, 162, 247;
+ --bs-link-hover-color-rgb: 125, 207, 255;
+}
/* Global styles */
body {
- font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+ font-family: var(--bs-font-sans-serif);
line-height: 1.6;
}
-/* Navigation enhancements */
+/* Navigation */
+.navbar-tn {
+ background-color: var(--tn-surface-hi);
+ border-bottom: 1px solid var(--tn-border);
+}
+
.navbar-brand {
font-weight: bold;
font-size: 1.5rem;
+ color: var(--tn-blue) !important;
}
.navbar-nav .nav-link {
font-weight: 500;
+ color: var(--tn-fg-dark);
transition: color 0.3s ease;
}
.navbar-nav .nav-link:hover {
- color: #fff !important;
+ color: var(--tn-cyan) !important;
text-decoration: underline;
}
/* Card enhancements */
.card {
- border: none;
- box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+ border: 1px solid var(--tn-border);
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
transform: translateY(-2px);
- box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
+}
+
+.card-header {
+ background-color: var(--tn-surface-hi);
+ border-bottom: 1px solid var(--tn-border);
}
/* Jumbotron styling */
-.jumbotron {
- background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
- border: 1px solid #dee2e6;
+.jumbotron-tn {
+ background: linear-gradient(135deg, var(--tn-surface) 0%, var(--tn-bg-dark) 100%);
+ border: 1px solid var(--tn-border);
}
/* Button enhancements */
@@ -48,29 +116,50 @@ body {
}
.btn-primary {
- background: linear-gradient(45deg, #007bff, #0056b3);
+ background: linear-gradient(45deg, var(--tn-blue), var(--tn-blue-bright));
border: none;
+ color: var(--tn-bg-dark);
}
.btn-primary:hover {
- background: linear-gradient(45deg, #0056b3, #004085);
+ background: linear-gradient(45deg, var(--tn-blue-bright), var(--tn-blue));
+ color: var(--tn-bg-dark);
transform: translateY(-1px);
}
+.btn-outline-secondary {
+ color: var(--tn-fg-dark);
+ border-color: var(--tn-border);
+}
+
+.btn-outline-secondary:hover {
+ background-color: var(--tn-surface-hi);
+ border-color: var(--tn-comment);
+ color: var(--tn-fg);
+}
+
.btn-outline-primary:hover {
transform: translateY(-1px);
}
/* Form enhancements */
.form-control {
+ background-color: var(--tn-surface);
+ color: var(--tn-fg);
border-radius: 6px;
- border: 2px solid #e9ecef;
+ border: 2px solid var(--tn-border);
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.form-control:focus {
- border-color: #007bff;
- box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+ background-color: var(--tn-surface);
+ color: var(--tn-fg);
+ border-color: var(--tn-blue);
+ box-shadow: 0 0 0 0.2rem rgba(122, 162, 247, 0.25);
+}
+
+.form-control::placeholder {
+ color: var(--tn-comment);
}
/* Alert enhancements */
@@ -80,19 +169,30 @@ body {
}
.alert-success {
- background: linear-gradient(45deg, #d4edda, #c3e6cb);
- color: #155724;
+ background: var(--tn-green);
+ color: var(--tn-bg-dark);
}
.alert-danger {
- background: linear-gradient(45deg, #f8d7da, #f5c6cb);
- color: #721c24;
+ background: var(--tn-red);
+ color: var(--tn-bg-dark);
+}
+
+.alert-info {
+ background: var(--tn-surface-hi);
+ color: var(--tn-fg);
+ border: 1px solid var(--tn-cyan);
+}
+
+.alert-link {
+ color: var(--tn-cyan);
}
/* Footer styling */
-footer {
+.footer-tn {
margin-top: auto;
- border-top: 1px solid #e9ecef;
+ background-color: var(--tn-bg-dark);
+ border-top: 1px solid var(--tn-border);
}
/* Code block styling */
@@ -102,19 +202,19 @@ pre {
}
pre code {
- color: #495057;
+ color: var(--tn-fg-dark);
}
/* Responsive adjustments */
@media (max-width: 768px) {
- .jumbotron {
+ .jumbotron-tn {
padding: 2rem 1rem;
}
-
+
.display-4 {
font-size: 2rem;
}
-
+
.card-body {
padding: 1rem;
}
@@ -138,14 +238,14 @@ main {
/* Custom utility classes */
.text-gradient {
- background: linear-gradient(45deg, #007bff, #6610f2);
+ background: linear-gradient(45deg, var(--tn-blue), var(--tn-purple));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.shadow-custom {
- box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}
/* Loading animation for forms */
@@ -163,7 +263,7 @@ main {
left: 50%;
margin-left: -8px;
margin-top: -8px;
- border: 2px solid #ffffff;
+ border: 2px solid var(--tn-bg-dark);
border-radius: 50%;
border-top-color: transparent;
animation: spin 1s linear infinite;
@@ -177,14 +277,18 @@ main {
/* Finger command specific styles */
.finger-output pre {
- font-family: 'Courier New', Consolas, monospace;
+ font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace;
font-size: 0.85rem;
line-height: 1.4;
white-space: pre-wrap;
word-wrap: break-word;
max-height: 500px;
overflow-y: auto;
- color: white;
+ background-color: var(--tn-surface);
+ color: var(--tn-fg);
+ padding: 1rem;
+ border-radius: 6px;
+ border: 1px solid var(--tn-border);
}
.finger-output pre::-webkit-scrollbar {
@@ -192,14 +296,14 @@ main {
}
.finger-output pre::-webkit-scrollbar-track {
- background: #2d3748;
+ background: var(--tn-surface);
}
.finger-output pre::-webkit-scrollbar-thumb {
- background: #4a5568;
+ background: var(--tn-border);
border-radius: 4px;
}
.finger-output pre::-webkit-scrollbar-thumb:hover {
- background: #718096;
+ background: var(--tn-comment);
}
diff --git a/templates/base.html b/templates/base.html
index dbd1c48..0588c2b 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -1,5 +1,5 @@
-
+
@@ -16,7 +16,7 @@
-