diff --git a/asciinema/entrypoint-wrapper.sh b/asciinema/entrypoint-wrapper.sh deleted file mode 100755 index 9974e2f..0000000 --- a/asciinema/entrypoint-wrapper.sh +++ /dev/null @@ -1,22 +0,0 @@ -#!/bin/sh -set -e - -# Inject custom CSS into app.css if it exists -if [ -f /opt/app/lib/asciinema-1.0.0/priv/static/assets/custom.css ]; then - echo "Injecting custom CSS into app.css..." - cat /opt/app/lib/asciinema-1.0.0/priv/static/assets/custom.css >> /opt/app/lib/asciinema-1.0.0/priv/static/assets/app.css - # Also append to the hashed version - CSS_FILE=$(ls /opt/app/lib/asciinema-1.0.0/priv/static/assets/app-*.css 2>/dev/null | head -1) - if [ -n "$CSS_FILE" ]; then - cat /opt/app/lib/asciinema-1.0.0/priv/static/assets/custom.css >> "$CSS_FILE" - echo "Custom CSS injected successfully" - - # Remove pre-compressed .gz files so updated CSS is served - rm -f /opt/app/lib/asciinema-1.0.0/priv/static/assets/app.css.gz - rm -f /opt/app/lib/asciinema-1.0.0/priv/static/assets/app-*.css.gz - echo "Removed pre-compressed CSS files to force serving updated version" - fi -fi - -# Execute the original entrypoint -exec /sbin/tini -- /opt/app/bin/server "$@" diff --git a/asciinema/theme/custom.css b/asciinema/theme/custom.css deleted file mode 100644 index 053a72b..0000000 --- a/asciinema/theme/custom.css +++ /dev/null @@ -1,514 +0,0 @@ -/** - * Asciinema Custom Theme - "Pivoine on Metal" - * Rose accents on varied metal gray backgrounds - * - * Color Palette: - * - Primary Accent: RGB(206, 39, 91) - Deep rose/magenta (Pivoine) - * - Varied Gray Backgrounds: Multiple shades for visual hierarchy - * - High contrast with bold rose color pops on dark metal - */ - -:root { - /* Pivoine Rose Accent - KEPT */ - --pivoine-rose: rgb(206, 39, 91); - --pivoine-rose-light: rgb(226, 79, 121); - --pivoine-rose-dark: rgb(166, 19, 71); - --pivoine-rose-fade: rgba(206, 39, 91, 0.12); - --pivoine-rose-glow: rgba(206, 39, 91, 0.25); - - /* Polished Metal Gray Palette - Smoother, more cohesive */ - --metal-bg-base: hsl(210, 12%, 16%); /* Base background - soft dark */ - --metal-bg-elevated: hsl(210, 12%, 19%); /* Elevated surfaces (header, footer) */ - --metal-bg-surface: hsl(210, 11%, 22%); /* Surface elements (cards) */ - --metal-bg-interactive: hsl(210, 10%, 25%); /* Interactive elements */ - --metal-bg-input: hsl(210, 10%, 28%); /* Form inputs */ - --metal-border: hsl(210, 12%, 32%); /* Borders - subtle */ - --metal-border-strong: hsl(210, 15%, 40%); /* Strong borders */ - - /* Refined Text Colors */ - --metal-text-primary: hsl(210, 12%, 94%); - --metal-text-secondary: hsl(210, 10%, 75%); - --metal-text-muted: hsl(210, 8%, 60%); - - /* Accent Variants */ - --pivoine-success: rgb(16, 185, 129); - --pivoine-warning: rgb(245, 158, 11); - --pivoine-info: rgb(59, 130, 246); -} - -/* Global Styling - Override default light backgrounds */ -body, -main { - background-color: var(--metal-bg-base) !important; -} - -body { - color: var(--metal-text-primary) !important; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif !important; -} - -/* Headings with accent color */ -h1, h2, h3, h4, h5, h6, -.h1, .h2, .h3, .h4, .h5, .h6 { - color: var(--metal-text-primary) !important; -} - -h1, h2, .h1, .h2 { - border-bottom: 2px solid var(--pivoine-rose) !important; - padding-bottom: 8px !important; - margin-bottom: 16px !important; -} - -.heading { - background-color: transparent !important; - padding: 0 0 24px 0 !important; - margin: 0 !important; -} - -.heading h2 { - color: var(--pivoine-rose-light) !important; - margin: 0 !important; - padding-bottom: 12px !important; -} - -/* Header & Navigation */ -header, -.header { - background-color: var(--metal-bg-elevated) !important; - border-bottom: 2px solid var(--pivoine-rose) !important; -} - -nav, -.navbar, -.navbar-dark, -.bg-dark { - background-color: var(--metal-bg-elevated) !important; -} - -/* Override asciinema's .l-app header .navbar.bg-dark black background with maximum specificity */ -body .l-app header .navbar.bg-dark, -body .l-app header .navbar-dark.bg-dark, -body .l-app header nav.navbar.bg-dark, -html body .l-app header .navbar.bg-dark { - background-color: var(--metal-bg-elevated) !important; -} - -.navbar, -.nav-link { - color: var(--metal-text-primary) !important; -} - -.nav-link:hover, -.nav-link:focus { - color: var(--pivoine-rose-light) !important; - background-color: var(--pivoine-rose-fade) !important; - border-radius: 4px; - transition: all 0.3s ease; -} - -/* Primary Buttons & Links */ -a { - color: var(--pivoine-rose-light) !important; - text-decoration: none; - transition: color 0.2s ease; -} - -a:hover, -a:focus { - color: var(--pivoine-rose) !important; - text-decoration: underline; -} - -/* Primary buttons and submit buttons */ -button:not(.btn-light):not(.btn-group .btn), -input[type="submit"] { - background-color: var(--pivoine-rose) !important; - color: white !important; - border: none !important; - border-radius: 6px !important; - padding: 8px 16px !important; - font-weight: 600 !important; - cursor: pointer; - transition: all 0.3s ease; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); -} - -button:not(.btn-light):not(.btn-group .btn):hover, -input[type="submit"]:hover { - background-color: var(--pivoine-rose-light) !important; - box-shadow: 0 4px 8px var(--pivoine-rose-glow); - transform: translateY(-1px); -} - -button:not(.btn-light):not(.btn-group .btn):active, -input[type="submit"]:active { - transform: translateY(0); - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); -} - -/* Button groups */ -.btn-group { - gap: 8px !important; -} - -/* Filter buttons (btn-light in btn-group) */ -.btn-group .btn, -.btn-light { - background-color: var(--metal-bg-interactive) !important; - color: var(--metal-text-secondary) !important; - border: 1px solid var(--metal-border) !important; - border-radius: 6px !important; - padding: 8px 16px !important; - font-weight: 500 !important; - font-size: 0.875em !important; - cursor: pointer; - transition: all 0.2s ease; - box-shadow: none !important; -} - -.btn-group .btn:hover, -.btn-light:hover { - background-color: var(--metal-bg-surface) !important; - border-color: var(--metal-border-strong) !important; - color: var(--metal-text-primary) !important; - transform: none !important; -} - -/* Active state for filter buttons */ -.btn-group .btn.active, -.btn-light.active { - background-color: var(--pivoine-rose) !important; - border-color: var(--pivoine-rose) !important; - color: white !important; - font-weight: 600 !important; -} - -/* Cards & Containers */ -.card, -.panel, -.recording-item, -article { - background-color: var(--metal-bg-surface) !important; - border: 1px solid var(--metal-border) !important; - border-radius: 8px !important; - padding: 16px !important; - margin-bottom: 16px !important; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); - transition: all 0.2s ease; -} - -.card:hover, -.recording-item:hover { - border-color: var(--pivoine-rose) !important; - box-shadow: 0 2px 8px var(--pivoine-rose-glow); - transform: translateY(-1px); -} - -/* Don't style Bootstrap .container - it's a layout wrapper */ -.container { - background-color: transparent !important; - border: none !important; - box-shadow: none !important; - padding-left: 15px !important; - padding-right: 15px !important; -} - -/* Main container - add surface background and padding */ -main .container { - background-color: var(--metal-bg-surface) !important; - padding: 24px !important; - border-radius: 8px !important; - margin-top: 16px !important; - margin-bottom: 16px !important; -} - -/* Forms & Inputs */ -input[type="text"], -input[type="email"], -input[type="password"], -input[type="search"], -textarea, -select { - background-color: var(--metal-bg-input) !important; - color: var(--metal-text-primary) !important; - border: 1px solid var(--metal-border) !important; - border-radius: 6px !important; - padding: 10px 14px !important; - transition: all 0.2s ease; -} - -input:focus, -textarea:focus, -select:focus { - outline: none !important; - border-color: var(--pivoine-rose) !important; - box-shadow: 0 0 0 3px var(--pivoine-rose-fade); - background-color: var(--metal-bg-surface) !important; -} - -/* Terminal Player */ -.asciinema-player, -.player-wrapper, -.terminal { - background-color: var(--metal-bg-base) !important; - border: 2px solid var(--pivoine-rose) !important; - border-radius: 8px !important; - box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); -} - -.asciinema-player .control-bar { - background-color: var(--metal-bg-elevated) !important; - border-top: 1px solid var(--metal-border) !important; -} - -.asciinema-player .play-button, -.asciinema-player button { - color: var(--pivoine-rose) !important; -} - -.asciinema-player .play-button:hover, -.asciinema-player button:hover { - color: var(--pivoine-rose-light) !important; -} - -.asciinema-player .progressbar { - background-color: var(--metal-border) !important; -} - -.asciinema-player .progressbar .bar { - background-color: var(--pivoine-rose) !important; -} - -/* Recording Metadata */ -.recording-meta, -.info, -.metadata { - color: var(--metal-text-secondary) !important; - font-size: 0.9em; - padding: 8px 0; -} - -.recording-meta strong, -.metadata .label { - color: var(--pivoine-rose-light) !important; - font-weight: 600; -} - -/* Tags & Badges */ -.tag, -.badge, -.label { - background-color: var(--pivoine-rose-fade) !important; - color: var(--pivoine-rose-light) !important; - border: 1px solid var(--pivoine-rose) !important; - border-radius: 4px !important; - padding: 4px 10px !important; - font-size: 0.85em; - font-weight: 600; - display: inline-block; - margin: 4px 4px 4px 0; -} - -/* Tables */ -table { - background-color: var(--metal-bg-surface) !important; - border-collapse: collapse; - width: 100%; -} - -thead { - background-color: var(--metal-bg-elevated) !important; - border-bottom: 2px solid var(--pivoine-rose) !important; -} - -th { - color: var(--pivoine-rose-light) !important; - font-weight: 700; - padding: 12px !important; - text-align: left; -} - -td { - color: var(--metal-text-primary) !important; - padding: 10px 12px !important; - border-bottom: 1px solid var(--metal-border) !important; -} - -tr:hover { - background-color: var(--pivoine-rose-fade) !important; -} - -/* Pagination */ -.pagination a, -.pagination span { - background-color: var(--metal-bg-interactive) !important; - color: var(--metal-text-secondary) !important; - border: 1px solid var(--metal-border) !important; - border-radius: 6px !important; - padding: 8px 14px !important; - margin: 0 4px; - display: inline-block; - transition: all 0.2s ease; -} - -.pagination a:hover { - background-color: var(--metal-bg-surface) !important; - border-color: var(--metal-border-strong) !important; - color: var(--metal-text-primary) !important; -} - -.pagination .current { - background-color: var(--pivoine-rose) !important; - border-color: var(--pivoine-rose) !important; - color: white !important; -} - -/* Footer */ -footer { - background-color: var(--metal-bg-elevated) !important; - border-top: 2px solid var(--pivoine-rose) !important; - color: var(--metal-text-secondary) !important; - padding: 24px 0 !important; - margin-top: 48px; -} - -/* Code Blocks - Override default light background */ -pre, -code, -pre code { - background-color: var(--metal-bg-elevated) !important; - color: var(--metal-text-primary) !important; - border: 1px solid var(--metal-border) !important; - border-radius: 6px !important; - padding: 12px !important; - font-family: "JetBrains Mono", "Fira Code", "Consolas", monospace !important; - font-size: 0.9em; -} - -/* Alerts & Messages */ -.alert, -.message, -.notice { - border-radius: 6px !important; - padding: 12px 16px !important; - margin: 16px 0 !important; - border-left: 4px solid; -} - -.alert-success, -.message-success { - background-color: rgba(76, 175, 80, 0.15) !important; - border-left-color: var(--pivoine-success) !important; - color: var(--pivoine-success) !important; -} - -.alert-warning, -.message-warning { - background-color: rgba(255, 152, 0, 0.15) !important; - border-left-color: var(--pivoine-warning) !important; - color: var(--pivoine-warning) !important; -} - -.alert-info, -.message-info { - background-color: rgba(33, 150, 243, 0.15) !important; - border-left-color: var(--pivoine-info) !important; - color: var(--pivoine-info) !important; -} - -.alert-error, -.message-error { - background-color: var(--pivoine-rose-fade) !important; - border-left-color: var(--pivoine-rose) !important; - color: var(--pivoine-rose-light) !important; -} - -/* User Profile */ -.avatar, -.user-avatar { - border: 3px solid var(--pivoine-rose) !important; - border-radius: 50% !important; - box-shadow: 0 2px 8px var(--pivoine-rose-glow); -} - -/* Loading States */ -.spinner, -.loading { - border-color: var(--metal-border) !important; - border-top-color: var(--pivoine-rose) !important; -} - -/* Scrollbar Styling */ -::-webkit-scrollbar { - width: 10px; - height: 10px; -} - -::-webkit-scrollbar-track { - background-color: var(--metal-bg-base); -} - -::-webkit-scrollbar-thumb { - background-color: var(--metal-border); - border-radius: 5px; - border: 2px solid var(--metal-bg-base); -} - -::-webkit-scrollbar-thumb:hover { - background-color: var(--pivoine-rose); -} - -/* Selection */ -::selection { - background-color: var(--pivoine-rose-glow) !important; - color: white !important; -} - -::-moz-selection { - background-color: var(--pivoine-rose-glow) !important; - color: white !important; -} - -/* Responsive Design */ -@media (max-width: 768px) { - .card, - .panel { - padding: 12px !important; - } - - button, - .btn { - padding: 6px 12px !important; - font-size: 0.9em !important; - } -} - -/* Animations */ -@keyframes pivoine-pulse { - 0%, 100% { - box-shadow: 0 0 0 0 var(--pivoine-rose-glow); - } - 50% { - box-shadow: 0 0 0 8px rgba(206, 39, 91, 0); - } -} - -.recording-item:hover, -.card:hover { - animation: pivoine-pulse 2s ease-in-out infinite; -} - -/* Logo & Branding */ -.navbar-brand img, -.logo { - filter: brightness(0) saturate(100%) invert(47%) sepia(74%) saturate(1845%) hue-rotate(319deg) brightness(93%) contrast(87%); -} - -/* Custom Highlight */ -mark, -.highlight { - background-color: var(--pivoine-rose-fade) !important; - color: var(--pivoine-rose-light) !important; - padding: 2px 6px; - border-radius: 3px; -}