/* 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: var(--bs-font-sans-serif); line-height: 1.6; } /* 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: var(--tn-cyan) !important; text-decoration: underline; } /* Card enhancements */ .card { 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.4); } .card-header { background-color: var(--tn-surface-hi); border-bottom: 1px solid var(--tn-border); } /* Jumbotron styling */ .jumbotron-tn { background: linear-gradient(135deg, var(--tn-surface) 0%, var(--tn-bg-dark) 100%); border: 1px solid var(--tn-border); } /* Button enhancements */ .btn { border-radius: 6px; font-weight: 500; transition: all 0.3s ease; } .btn-primary { 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, 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 var(--tn-border); transition: border-color 0.3s ease, box-shadow 0.3s ease; } .form-control:focus { 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 */ .alert { border-radius: 8px; border: none; } .alert-success { background: var(--tn-green); color: var(--tn-bg-dark); } .alert-danger { 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-tn { margin-top: auto; background-color: var(--tn-bg-dark); border-top: 1px solid var(--tn-border); } /* Code block styling */ pre { font-size: 0.9rem; line-height: 1.4; } pre code { color: var(--tn-fg-dark); } /* Responsive adjustments */ @media (max-width: 768px) { .jumbotron-tn { padding: 2rem 1rem; } .display-4 { font-size: 2rem; } .card-body { padding: 1rem; } } /* Animation for page load */ @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } main { animation: fadeIn 0.6s ease-out; } /* Custom utility classes */ .text-gradient { 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.3); } /* Loading animation for forms */ .btn.loading { position: relative; color: transparent; } .btn.loading::after { content: ""; position: absolute; width: 16px; height: 16px; top: 50%; left: 50%; margin-left: -8px; margin-top: -8px; border: 2px solid var(--tn-bg-dark); border-radius: 50%; border-top-color: transparent; animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Finger command specific styles */ .finger-output pre { 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; 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 { width: 8px; } .finger-output pre::-webkit-scrollbar-track { background: var(--tn-surface); } .finger-output pre::-webkit-scrollbar-thumb { background: var(--tn-border); border-radius: 4px; } .finger-output pre::-webkit-scrollbar-thumb:hover { background: var(--tn-comment); }