waffle2k
8c7ba4dbd9
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.
310 lines
6.9 KiB
CSS
310 lines
6.9 KiB
CSS
/* 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: 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);
|
|
}
|