From 919e2f491b4fb0b47a448aba31cb74f883634f4b Mon Sep 17 00:00:00 2001 From: Brian O'Reilly Date: Tue, 30 Sep 2025 21:24:47 -0400 Subject: [PATCH] courier gives me a headache... and this is kind of a throw-back 8bit computer style font. The colours are still kind of aggressively unpleasant (to me), but I'm hesitant to change due to fear of comitting visual violence to people with normal colour vision. :) --- static/asteroid.css | 780 +------------------------------------- static/asteroid.lass | 9 +- template/front-page.chtml | 11 +- 3 files changed, 14 insertions(+), 786 deletions(-) diff --git a/static/asteroid.css b/static/asteroid.css index 834c22e..54402d2 100644 --- a/static/asteroid.css +++ b/static/asteroid.css @@ -1,779 +1 @@ -body{ - font-family: Courier New, monospace; - background: #0a0a0a; - color: #00ff00; - margin: 0; - padding: 20px; -} - -body .container{ - max-width: 1200px; - margin: 0 auto; -} - -body h1{ - color: #ff6600; - text-align: center; - font-size: 2.5em; - margin-bottom: 30px; -} - -body h2{ - color: #ff6600; -} - -body .status{ - background: #1a1a1a; - padding: 20px; - border: 1px solid #333; - margin: 20px 0; -} - -body .panel{ - background: #1a1a1a; - padding: 20px; - border: 1px solid #333; - margin: 20px 0; -} - -body .nav{ - margin: 20px 0; -} - -body .nav a{ - color: #00ff00; - text-decoration: none; - margin: 0 15px; - padding: 10px 20px; - border: 1px solid #333; - background: #1a1a1a; - display: inline-block; -} - -body .nav a :hover{ - background: #333; -} - -body .controls{ - margin: 20px 0; -} - -body .controls button{ - background: #1a1a1a; - color: #00ff00; - border: 1px solid #333; - padding: 10px 20px; - margin: 5px; - cursor: pointer; -} - -body .controls button :hover{ - background: #333; -} - -body button{ - background: #333; - color: #00ff00; - border: 1px solid #555; - padding: 10px 20px; - margin: 5px; - cursor: pointer; -} - -body button :hover{ - background: #555; -} - -body .now-playing{ - background: #1a1a1a; - padding: 20px; - border: 1px solid #333; - margin: 20px 0; - font-size: 1.5em; - color: #ff6600; -} - -body .back{ - color: #00ff00; - text-decoration: none; - margin-bottom: 20px; - display: inline-block; -} - -body .back :hover{ - text-decoration: underline; -} - -body .player{ - background: #1a1a1a; - padding: 40px; - border: 1px solid #333; - margin: 40px auto; - max-width: 600px; -} - - - -body .player .controls button{ - padding: 15px 30px; - margin: 10px; - font-size: 1.2em; -} - -body .player-section{ - background: #1a1a1a; - padding: 25px; - border: 1px solid #333; - margin: 20px 0; - border-radius: 5px; -} - -body .track-browser{ - margin: 15px 0; -} - -body .search-input{ - width: 100%; - padding: 12px; - background: #0a0a0a; - color: #00ff00; - border: 1px solid #333; - font-family: Courier New, monospace; - font-size: 14px; - margin-bottom: 15px; -} - -body .track-list{ - max-height: 400px; - overflow-y: auto; - border: 1px solid #333; - background: #0a0a0a; -} - -body .track-item{ - display: flex; - justify-content: space-between; - align-items: center; - padding: 12px 15px; - border-bottom: 1px solid #333; - -moz-transition: background-color 0.2s; - -o-transition: background-color 0.2s; - -webkit-transition: background-color 0.2s; - -ms-transition: background-color 0.2s; - transition: background-color 0.2s; -} - -body .track-item :hover{ - background: #1a1a1a; -} - -body .track-info{ - flex: 1; -} - -body .track-info .track-title{ - color: #00ff00; - font-weight: bold; - margin-bottom: 4px; -} - -body .track-info .track-meta{ - color: #888; - font-size: 0.9em; -} - -body .track-actions{ - display: flex; - gap: 8px; -} - -body .audio-player{ - text-align: center; -} - -body .track-art{ - font-size: 3em; - margin-right: 20px; - color: #ff6600; -} - - - -body .track-details .track-title{ - font-size: 1.4em; - color: #00ff00; - margin-bottom: 5px; -} - -body .track-details .track-artist{ - font-size: 1.1em; - color: #ff6600; - margin-bottom: 3px; -} - -body .track-details .track-album{ - color: #888; -} - -body .player-controls{ - margin: 20px 0; - display: flex; - justify-content: center; - gap: 10px; - flex-wrap: wrap; -} - -body .player-info{ - display: flex; - justify-content: space-between; - align-items: center; - margin-top: 15px; - padding: 10px; - background: #0a0a0a; - border: 1px solid #333; - border-radius: 3px; -} - -body .time-display{ - color: #00ff00; - font-family: Courier New, monospace; -} - -body .volume-control{ - display: flex; - align-items: center; - gap: 10px; -} - -body .volume-control label{ - color: #ff6600; -} - -body .volume-slider{ - width: 100px; - height: 5px; - background: #333; - outline: none; - border-radius: 3px; -} - -body .btn{ - background: #333; - color: #00ff00; - border: 1px solid #555; - padding: 8px 16px; - margin: 3px; - cursor: pointer; - font-family: Courier New, monospace; - font-size: 14px; - border-radius: 3px; - -moz-transition: all 0.2s; - -o-transition: all 0.2s; - -webkit-transition: all 0.2s; - -ms-transition: all 0.2s; - transition: all 0.2s; -} - -body .btn :hover{ - background: #555; - border-color: #777; -} - -body .btn-primary{ - background: #0066cc; - border-color: #0088ff; -} - -body .btn-primary :hover{ - background: #0088ff; -} - -body .btn-success{ - background: #006600; - border-color: #00aa00; -} - -body .btn-success :hover{ - background: #00aa00; -} - -body .btn-danger{ - background: #cc0000; - border-color: #ff0000; -} - -body .btn-danger :hover{ - background: #ff0000; -} - -body .btn-info{ - background: #006666; - border-color: #00aaaa; -} - -body .btn-info :hover{ - background: #00aaaa; -} - -body .btn-warning{ - background: #cc6600; - border-color: #ff8800; -} - -body .btn-warning :hover{ - background: #ff8800; -} - -body .btn-secondary{ - background: #444; - border-color: #666; -} - -body .btn-secondary :hover{ - background: #666; -} - -body .btn-sm{ - padding: 4px 8px; - font-size: 12px; -} - -body .btn.active{ - background: #ff6600; - border-color: #ff8800; - color: #000; -} - -body .playlist-controls{ - margin-bottom: 15px; - display: flex; - gap: 10px; - align-items: center; -} - -body .playlist-input{ - flex: 1; - padding: 8px 12px; - background: #0a0a0a; - color: #00ff00; - border: 1px solid #333; - font-family: Courier New, monospace; -} - -body .playlist-list{ - border: 1px solid #333; - background: #0a0a0a; - min-height: 100px; - padding: 10px; -} - -body .queue-controls{ - margin-bottom: 15px; - display: flex; - gap: 10px; -} - -body .play-queue{ - border: 1px solid #333; - background: #0a0a0a; - min-height: 150px; - max-height: 300px; - overflow-y: auto; - padding: 10px; -} - -body .queue-item{ - display: flex; - justify-content: space-between; - align-items: center; - padding: 8px 10px; - border-bottom: 1px solid #333; - margin-bottom: 5px; -} - -body .queue-item :last-child{ - border-bottom: none; - margin-bottom: 0; -} - -body .empty-queue{ - text-align: center; - color: #666; - padding: 20px; - font-style: italic; -} - -body .no-tracks{ - text-align: center; - color: #666; - padding: 20px; - font-style: italic; -} - -body .no-playlists{ - text-align: center; - color: #666; - padding: 20px; - font-style: italic; -} - -body .loading{ - text-align: center; - color: #ff6600; - padding: 20px; -} - -body .error{ - text-align: center; - color: #ff0000; - padding: 20px; - font-weight: bold; -} - -body .upload-section{ - margin: 20px 0; - padding: 20px; - background: #0a0a0a; - border: 1px solid #333; - border-radius: 5px; -} - -body .upload-controls{ - display: flex; - gap: 15px; - align-items: center; - margin-bottom: 15px; -} - -body .upload-info{ - color: #888; - font-size: 0.9em; -} - -body .upload-progress{ - margin-top: 10px; - padding: 10px; - background: #1a1a1a; - border: 1px solid #333; - border-radius: 3px; -} - -body .progress-bar{ - height: 20px; - background: #ff6600; - border-radius: 3px; - -moz-transition: width 0.3s ease; - -o-transition: width 0.3s ease; - -webkit-transition: width 0.3s ease; - -ms-transition: width 0.3s ease; - transition: width 0.3s ease; - width: 0%; -} - -body .progress-text{ - display: block; - margin-top: 5px; - color: #00ff00; - font-size: 0.9em; -} - -body input{ - padding: 8px 12px; - background: #1a1a1a; - color: #00ff00; - border: 1px solid #333; - border-radius: 3px; - font-family: Courier New, monospace; -} - -body .upload-interface{ - margin-top: 2rem; - padding: 1.5rem; - background-color: #1a1a1a; - border-radius: 8px; - border: 1px solid #333; -} - -body .upload-interface h3{ - color: #00ff00; - margin-bottom: 1rem; -} - -body .upload-interface .upload-area{ - border: 2px dashed #333; - border-radius: 8px; - padding: 2rem; - text-align: center; - background-color: #0f0f0f; - -moz-transition: border-color 0.3s ease; - -o-transition: border-color 0.3s ease; - -webkit-transition: border-color 0.3s ease; - -ms-transition: border-color 0.3s ease; - transition: border-color 0.3s ease; -} - -body .upload-interface .upload-area &:hover{ - border-color: #00ff00; -} - -body .upload-interface .upload-area .upload-icon{ - font-size: 3rem; - color: #666; - margin-bottom: 1rem; -} - -body .upload-interface .upload-area p{ - color: #999; - margin-bottom: 1rem; -} - -body .upload-interface .upload-area .btn{ - margin-top: 1rem; -} - -body .auth-container{ - display: flex; - justify-content: center; - align-items: center; - min-height: 60vh; - padding: 2rem; -} - -body .auth-form{ - background-color: #1a1a1a; - border: 1px solid #333; - border-radius: 8px; - padding: 2rem; - width: 100%; - max-width: 400px; - -moz-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); - -o-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); - -webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); - -ms-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); -} - -body .auth-form h2{ - color: #00ff00; - text-align: center; - margin-bottom: 1.5rem; - font-size: 1.5rem; -} - -body .auth-form h3{ - color: #00ff00; - margin-bottom: 1rem; - font-size: 1.2rem; -} - -body .form-group{ - margin-bottom: 1rem; -} - -body .form-group label{ - display: block; - color: #ccc; - margin-bottom: 0.5rem; - font-weight: bold; -} - -body .form-group input{ - width: 100%; - padding: 0.75rem; - background-color: #0f0f0f; - border: 1px solid #333; - border-radius: 4px; - color: #fff; - font-size: 1rem; - box-sizing: border-box; -} - -body .form-group input &:focus{ - border-color: #00ff00; - outline: none; - -moz-box-shadow: 0 0 0 2px rgba(0, 255, 0, 0.2); - -o-box-shadow: 0 0 0 2px rgba(0, 255, 0, 0.2); - -webkit-box-shadow: 0 0 0 2px rgba(0, 255, 0, 0.2); - -ms-box-shadow: 0 0 0 2px rgba(0, 255, 0, 0.2); - box-shadow: 0 0 0 2px rgba(0, 255, 0, 0.2); -} - -body .form-actions{ - display: flex; - gap: 1rem; - margin-top: 1.5rem; -} - -body .message{ - padding: 0.75rem; - border-radius: 4px; - margin-top: 1rem; - text-align: center; - font-weight: bold; -} - -body .message &.success{ - background-color: rgba(0, 255, 0, 0.1); - border: 1px solid #00ff00; - color: #00ff00; -} - -body .message &.error{ - background-color: rgba(255, 0, 0, 0.1); - border: 1px solid #ff0000; - color: #ff0000; -} - -body .auth-link{ - text-align: center; - margin-top: 1.5rem; - color: #999; -} - -body .auth-link a{ - color: #00ff00; - text-decoration: none; -} - -body .auth-link a &:hover{ - text-decoration: underline; -} - -body .profile-container{ - max-width: 600px; - margin: 2rem auto; - padding: 0 1rem; -} - -body .profile-card{ - background-color: #1a1a1a; - border: 1px solid #333; - border-radius: 8px; - padding: 2rem; - margin-bottom: 2rem; -} - -body .profile-card h2{ - color: #00ff00; - margin-bottom: 1.5rem; - text-align: center; -} - -body .profile-info{ - margin-bottom: 2rem; -} - -body .info-group{ - display: flex; - justify-content: space-between; - align-items: center; - padding: 0.75rem 0; - border-bottom: 1px solid #333; -} - -body .info-group &:last-child{ - border-bottom: none; -} - -body .info-group label{ - color: #ccc; - font-weight: bold; -} - -body .info-group span{ - color: #fff; -} - -body .role-badge{ - background-color: #00ff00; - color: #000; - padding: 0.25rem 0.5rem; - border-radius: 4px; - font-size: 0.875rem; - font-weight: bold; -} - -body .profile-actions{ - display: flex; - gap: 1rem; - justify-content: center; -} - -body .user-management{ - margin-top: 2rem; -} - -body .users-table{ - width: 100%; - border-collapse: collapse; - background-color: #1a1a1a; - border: 1px solid #333; - border-radius: 8px; - overflow: hidden; -} - -body .users-table thead{ - background-color: #0f0f0f; -} - -body .users-table thead th{ - padding: 1rem; - text-align: left; - color: #00ff00; - font-weight: bold; - border-bottom: 1px solid #333; -} - - - -body .users-table tbody tr{ - border-bottom: 1px solid #333; -} - -body .users-table tbody tr &:hover{ - background-color: #222; -} - -body .users-table tbody tr td{ - padding: 1rem; - color: #fff; - vertical-align: middle; -} - -body .users-table tbody .user-actions{ - display: flex; - gap: 0.5rem; -} - -body .users-table tbody .user-actions .btn{ - padding: 0.25rem 0.5rem; - font-size: 0.875rem; -} - -body .user-stats{ - display: grid; - grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); - gap: 1rem; - margin-bottom: 2rem; -} - -body .stat-card{ - background-color: #1a1a1a; - border: 1px solid #333; - border-radius: 8px; - padding: 1rem; - text-align: center; -} - -body .stat-card .stat-number{ - font-size: 2rem; - font-weight: bold; - color: #00ff00; - display: block; -} - -body .stat-card .stat-label{ - color: #ccc; - font-size: 0.875rem; - margin-top: 0.5rem; -} \ No newline at end of file +body{font-family:VT323, monospace;font-weight:400;font-style:normal;background:#0a0a0a;color:#00ff00;margin:0;padding:20px;}body .container{max-width:1200px;margin:0 auto;}body h1{color:#ff6600;text-align:center;font-size:2.5em;margin-bottom:30px;}body h2{color:#ff6600;}body .status{background:#1a1a1a;padding:20px;border:1px solid #333;margin:20px 0;}body .panel{background:#1a1a1a;padding:20px;border:1px solid #333;margin:20px 0;}body .nav{margin:20px 0;}body .nav a{color:#00ff00;text-decoration:none;margin:0 15px;padding:10px 20px;border:1px solid #333;background:#1a1a1a;display:inline-block;}body .nav a :hover{background:#333;}body .controls{margin:20px 0;}body .controls button{background:#1a1a1a;color:#00ff00;border:1px solid #333;padding:10px 20px;margin:5px;cursor:pointer;}body .controls button :hover{background:#333;}body button{background:#333;color:#00ff00;border:1px solid #555;padding:10px 20px;margin:5px;cursor:pointer;}body button :hover{background:#555;}body .now-playing{background:#1a1a1a;padding:20px;border:1px solid #333;margin:20px 0;font-size:1.5em;color:#ff6600;}body .back{color:#00ff00;text-decoration:none;margin-bottom:20px;display:inline-block;}body .back :hover{text-decoration:underline;}body .player{background:#1a1a1a;padding:40px;border:1px solid #333;margin:40px auto;max-width:600px;}body .player .controls button{padding:15px 30px;margin:10px;font-size:1.2em;}body .player-section{background:#1a1a1a;padding:25px;border:1px solid #333;margin:20px 0;border-radius:5px;}body .track-browser{margin:15px 0;}body .search-input{width:100%;padding:12px;background:#0a0a0a;color:#00ff00;border:1px solid #333;font-family:Courier New, monospace;font-size:14px;margin-bottom:15px;}body .track-list{max-height:400px;overflow-y:auto;border:1px solid #333;background:#0a0a0a;}body .track-item{display:flex;justify-content:space-between;align-items:center;padding:12px 15px;border-bottom:1px solid #333;-moz-transition:background-color 0.2s;-o-transition:background-color 0.2s;-webkit-transition:background-color 0.2s;-ms-transition:background-color 0.2s;transition:background-color 0.2s;}body .track-item :hover{background:#1a1a1a;}body .track-info{flex:1;}body .track-info .track-title{color:#00ff00;font-weight:bold;margin-bottom:4px;}body .track-info .track-meta{color:#888;font-size:0.9em;}body .track-actions{display:flex;gap:8px;}body .audio-player{text-align:center;}body .track-art{font-size:3em;margin-right:20px;color:#ff6600;}body .track-details .track-title{font-size:1.4em;color:#00ff00;margin-bottom:5px;}body .track-details .track-artist{font-size:1.1em;color:#ff6600;margin-bottom:3px;}body .track-details .track-album{color:#888;}body .player-controls{margin:20px 0;display:flex;justify-content:center;gap:10px;flex-wrap:wrap;}body .player-info{display:flex;justify-content:space-between;align-items:center;margin-top:15px;padding:10px;background:#0a0a0a;border:1px solid #333;border-radius:3px;}body .time-display{color:#00ff00;font-family:Courier New, monospace;}body .volume-control{display:flex;align-items:center;gap:10px;}body .volume-control label{color:#ff6600;}body .volume-slider{width:100px;height:5px;background:#333;outline:none;border-radius:3px;}body .btn{background:#333;color:#00ff00;border:1px solid #555;padding:8px 16px;margin:3px;cursor:pointer;font-family:Courier New, monospace;font-size:14px;border-radius:3px;-moz-transition:all 0.2s;-o-transition:all 0.2s;-webkit-transition:all 0.2s;-ms-transition:all 0.2s;transition:all 0.2s;}body .btn :hover{background:#555;border-color:#777;}body .btn-primary{background:#0066cc;border-color:#0088ff;}body .btn-primary :hover{background:#0088ff;}body .btn-success{background:#006600;border-color:#00aa00;}body .btn-success :hover{background:#00aa00;}body .btn-danger{background:#cc0000;border-color:#ff0000;}body .btn-danger :hover{background:#ff0000;}body .btn-info{background:#006666;border-color:#00aaaa;}body .btn-info :hover{background:#00aaaa;}body .btn-warning{background:#cc6600;border-color:#ff8800;}body .btn-warning :hover{background:#ff8800;}body .btn-secondary{background:#444;border-color:#666;}body .btn-secondary :hover{background:#666;}body .btn-sm{padding:4px 8px;font-size:12px;}body .btn.active{background:#ff6600;border-color:#ff8800;color:#000;}body .playlist-controls{margin-bottom:15px;display:flex;gap:10px;align-items:center;}body .playlist-input{flex:1;padding:8px 12px;background:#0a0a0a;color:#00ff00;border:1px solid #333;font-family:Courier New, monospace;}body .playlist-list{border:1px solid #333;background:#0a0a0a;min-height:100px;padding:10px;}body .queue-controls{margin-bottom:15px;display:flex;gap:10px;}body .play-queue{border:1px solid #333;background:#0a0a0a;min-height:150px;max-height:300px;overflow-y:auto;padding:10px;}body .queue-item{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border-bottom:1px solid #333;margin-bottom:5px;}body .queue-item :last-child{border-bottom:none;margin-bottom:0;}body .empty-queue{text-align:center;color:#666;padding:20px;font-style:italic;}body .no-tracks{text-align:center;color:#666;padding:20px;font-style:italic;}body .no-playlists{text-align:center;color:#666;padding:20px;font-style:italic;}body .loading{text-align:center;color:#ff6600;padding:20px;}body .error{text-align:center;color:#ff0000;padding:20px;font-weight:bold;}body .upload-section{margin:20px 0;padding:20px;background:#0a0a0a;border:1px solid #333;border-radius:5px;}body .upload-controls{display:flex;gap:15px;align-items:center;margin-bottom:15px;}body .upload-info{color:#888;font-size:0.9em;}body .upload-progress{margin-top:10px;padding:10px;background:#1a1a1a;border:1px solid #333;border-radius:3px;}body .progress-bar{height:20px;background:#ff6600;border-radius:3px;-moz-transition:width 0.3s ease;-o-transition:width 0.3s ease;-webkit-transition:width 0.3s ease;-ms-transition:width 0.3s ease;transition:width 0.3s ease;width:0%;}body .progress-text{display:block;margin-top:5px;color:#00ff00;font-size:0.9em;}body input{padding:8px 12px;background:#1a1a1a;color:#00ff00;border:1px solid #333;border-radius:3px;font-family:Courier New, monospace;}body .upload-interface{margin-top:2rem;padding:1.5rem;background-color:#1a1a1a;border-radius:8px;border:1px solid #333;}body .upload-interface h3{color:#00ff00;margin-bottom:1rem;}body .upload-interface .upload-area{border:2px dashed #333;border-radius:8px;padding:2rem;text-align:center;background-color:#0f0f0f;-moz-transition:border-color 0.3s ease;-o-transition:border-color 0.3s ease;-webkit-transition:border-color 0.3s ease;-ms-transition:border-color 0.3s ease;transition:border-color 0.3s ease;}body .upload-interface .upload-area &:hover{border-color:#00ff00;}body .upload-interface .upload-area .upload-icon{font-size:3rem;color:#666;margin-bottom:1rem;}body .upload-interface .upload-area p{color:#999;margin-bottom:1rem;}body .upload-interface .upload-area .btn{margin-top:1rem;}body .auth-container{display:flex;justify-content:center;align-items:center;min-height:60vh;padding:2rem;}body .auth-form{background-color:#1a1a1a;border:1px solid #333;border-radius:8px;padding:2rem;width:100%;max-width:400px;-moz-box-shadow:0 4px 6px rgba(0, 0, 0, 0.3);-o-box-shadow:0 4px 6px rgba(0, 0, 0, 0.3);-webkit-box-shadow:0 4px 6px rgba(0, 0, 0, 0.3);-ms-box-shadow:0 4px 6px rgba(0, 0, 0, 0.3);box-shadow:0 4px 6px rgba(0, 0, 0, 0.3);}body .auth-form h2{color:#00ff00;text-align:center;margin-bottom:1.5rem;font-size:1.5rem;}body .auth-form h3{color:#00ff00;margin-bottom:1rem;font-size:1.2rem;}body .form-group{margin-bottom:1rem;}body .form-group label{display:block;color:#ccc;margin-bottom:0.5rem;font-weight:bold;}body .form-group input{width:100%;padding:0.75rem;background-color:#0f0f0f;border:1px solid #333;border-radius:4px;color:#fff;font-size:1rem;box-sizing:border-box;}body .form-group input &:focus{border-color:#00ff00;outline:none;-moz-box-shadow:0 0 0 2px rgba(0, 255, 0, 0.2);-o-box-shadow:0 0 0 2px rgba(0, 255, 0, 0.2);-webkit-box-shadow:0 0 0 2px rgba(0, 255, 0, 0.2);-ms-box-shadow:0 0 0 2px rgba(0, 255, 0, 0.2);box-shadow:0 0 0 2px rgba(0, 255, 0, 0.2);}body .form-actions{display:flex;gap:1rem;margin-top:1.5rem;}body .message{padding:0.75rem;border-radius:4px;margin-top:1rem;text-align:center;font-weight:bold;}body .message &.success{background-color:rgba(0, 255, 0, 0.1);border:1px solid #00ff00;color:#00ff00;}body .message &.error{background-color:rgba(255, 0, 0, 0.1);border:1px solid #ff0000;color:#ff0000;}body .auth-link{text-align:center;margin-top:1.5rem;color:#999;}body .auth-link a{color:#00ff00;text-decoration:none;}body .auth-link a &:hover{text-decoration:underline;}body .profile-container{max-width:600px;margin:2rem auto;padding:0 1rem;}body .profile-card{background-color:#1a1a1a;border:1px solid #333;border-radius:8px;padding:2rem;margin-bottom:2rem;}body .profile-card h2{color:#00ff00;margin-bottom:1.5rem;text-align:center;}body .profile-info{margin-bottom:2rem;}body .info-group{display:flex;justify-content:space-between;align-items:center;padding:0.75rem 0;border-bottom:1px solid #333;}body .info-group &:last-child{border-bottom:none;}body .info-group label{color:#ccc;font-weight:bold;}body .info-group span{color:#fff;}body .role-badge{background-color:#00ff00;color:#000;padding:0.25rem 0.5rem;border-radius:4px;font-size:0.875rem;font-weight:bold;}body .profile-actions{display:flex;gap:1rem;justify-content:center;}body .user-management{margin-top:2rem;}body .users-table{width:100%;border-collapse:collapse;background-color:#1a1a1a;border:1px solid #333;border-radius:8px;overflow:hidden;}body .users-table thead{background-color:#0f0f0f;}body .users-table thead th{padding:1rem;text-align:left;color:#00ff00;font-weight:bold;border-bottom:1px solid #333;}body .users-table tbody tr{border-bottom:1px solid #333;}body .users-table tbody tr &:hover{background-color:#222;}body .users-table tbody tr td{padding:1rem;color:#fff;vertical-align:middle;}body .users-table tbody .user-actions{display:flex;gap:0.5rem;}body .users-table tbody .user-actions .btn{padding:0.25rem 0.5rem;font-size:0.875rem;}body .user-stats{display:grid;grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));gap:1rem;margin-bottom:2rem;}body .stat-card{background-color:#1a1a1a;border:1px solid #333;border-radius:8px;padding:1rem;text-align:center;}body .stat-card .stat-number{font-size:2rem;font-weight:bold;color:#00ff00;display:block;}body .stat-card .stat-label{color:#ccc;font-size:0.875rem;margin-top:0.5rem;} \ No newline at end of file diff --git a/static/asteroid.lass b/static/asteroid.lass index 0e9e9eb..05fb443 100644 --- a/static/asteroid.lass +++ b/static/asteroid.lass @@ -2,7 +2,10 @@ ;; Hacker-themed green terminal styling (body - :font-family "Courier New, monospace" + ;; :font-family "Courier New, monospace" + :font-family "VT323, monospace" + :font-weight 400 + :font-style normal :background "#0a0a0a" :color "#00ff00" :margin 0 @@ -597,5 +600,5 @@ :margin-top 0.5rem))) ;; Center alignment for player page - (body.player-page - :text-align center)) + ;; (body.player-page + ;; :text-align center) diff --git a/template/front-page.chtml b/template/front-page.chtml index 4754e5f..e6871b8 100644 --- a/template/front-page.chtml +++ b/template/front-page.chtml @@ -1,10 +1,13 @@ - 🎵 ASTEROID RADIO 🎵 - - - + 🎵 ASTEROID RADIO 🎵 + + + + + +