pmb/finger-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Restyle to Tokyo Night, matching waffles.yttrx.com's palette

Browse Source 
Overrides Bootstrap 5.3's native dark color-mode tokens with the exact
Tokyo Night hex values waffles.yttrx.com's Compost/Tailwind theme uses
(same primary blue, neutral backgrounds, etc.), so the two sites share
one visual identity, plus repoints the stale GitHub source link to Gitea.
This commit is contained in:
waffle2k
2026-07-23 22:09:22 -07:00
parent c8786a2a0b
commit 8c7ba4dbd9
4 changed files with 142 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/css/style.css
+137 -33
View File
@@ -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 <html> 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);
}