| body { |
| font-family: monospace; |
| background: #1a1a2e; |
| color: #e0e0e0; |
| padding: 20px; |
| } |
|
|
| h1 { |
| color: #e94560; |
| } |
|
|
| .post { |
| background: #16213e; |
| border: 1px solid #444; |
| border-radius: 8px; |
| padding: 16px; |
| margin-bottom: 16px; |
| } |
|
|
| .post-btn { |
| background: none; |
| border: none; |
| color: #e94560; |
| font-size: 1.2em; |
| font-family: inherit; |
| cursor: pointer; |
| padding: 0; |
| text-align: left; |
| width: 100%; |
| } |
|
|
| .post-btn:hover { |
| text-decoration: underline; |
| } |
|
|
| .post-preview { |
| margin-top: 8px; |
| margin-bottom: 0; |
| font-size: 0.9em; |
| color: #b0b0b0; |
| line-height: 1.4; |
| } |
|
|
| dialog { |
| background: #1a1a2e; |
| color: #fff; |
| border: 1px solid #e94560; |
| border-radius: 10px; |
| padding: 20px; |
| max-width: 600px; |
| width: 90%; |
| box-shadow: 0 10px 30px rgba(0,0,0,0.8); |
| } |
|
|
| dialog::backdrop { |
| background: rgba(0,0,0,0.8); |
| } |
|
|
| .close-btn { |
| background: none; |
| border: none; |
| color: #e94560; |
| font-size: 24px; |
| float: right; |
| cursor: pointer; |
| } |
|
|
| #dialog-title { |
| margin: 0; |
| color: #e94560; |
| font-size: 1.4em; |
| } |
|
|
| #post-content { |
| margin-top: 20px; |
| line-height: 1.6; |
| max-height: 60vh; |
| overflow-y: auto; |
| font-size: 16px; |
| } |
|
|
| #post-content h1, #post-content h2 { |
| color: #e94560; |
| } |
|
|
| #post-content a { |
| color: #4dd0e1; |
| } |
|
|
| #post-content pre { |
| background: #111; |
| padding: 10px; |
| border-radius: 6px; |
| } |
|
|
| #post-content code { |
| background: #111; |
| padding: 2px 4px; |
| border-radius: 4px; |
| } |