diff options
Diffstat (limited to 'layouts/recordings/recordings-plain.html')
| -rw-r--r-- | layouts/recordings/recordings-plain.html | 100 |
1 files changed, 84 insertions, 16 deletions
diff --git a/layouts/recordings/recordings-plain.html b/layouts/recordings/recordings-plain.html index d3c273e..fcd67ff 100644 --- a/layouts/recordings/recordings-plain.html +++ b/layouts/recordings/recordings-plain.html @@ -5,6 +5,26 @@ <title>{{ .Title }}</title> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style> + :root { + --bg: #0d0d12; + --card: #171721; + --text: #e6e6f2; + --muted: #acacc1; + --border: #2b2b3c; + --badge-bg: #242437; + --badge-text: #f4f4ff; + --hover: #1f1f2f; + } + body.theme-light { + --bg: #f7f7f9; + --card: #ffffff; + --text: #141416; + --muted: #656575; + --border: #ddddf0; + --badge-bg: #efeff5; + --badge-text: #13131a; + --hover: #f2f2fb; + } body { font-family: system-ui, @@ -16,6 +36,9 @@ max-width: 900px; margin: 32px auto; padding: 0 16px; + background: var(--bg); + color: var(--text); + transition: background 0.2s ease, color 0.2s ease; } h1 { margin-bottom: 12px; @@ -26,12 +49,13 @@ } a { text-decoration: none; + color: inherit; } a:hover { text-decoration: underline; } .meta { - color: #666; + color: var(--muted); margin-top: 4px; } video { @@ -46,19 +70,25 @@ } .badge { font-size: 0.8rem; - border: 1px solid #ccc; - border-radius: 6px; - padding: 2px 6px; + border: 1px solid var(--border); + border-radius: 999px; + padding: 3px 10px; margin-left: 6px; + background: var(--badge-bg); + color: var(--badge-text); } .folder-section { margin: 16px 0; - border: 1px solid #ddd; - border-radius: 8px; - background: #f9f9f9; + border: 1px solid var(--border); + border-radius: 12px; + background: var(--card); + box-shadow: 0 12px 28px rgba(8, 8, 15, 0.25); + } + body.theme-light .folder-section { + box-shadow: 0 18px 32px rgba(0, 0, 0, 0.08); } .folder-header { - padding: 8px 12px; + padding: 10px 14px; cursor: pointer; font-weight: 600; display: flex; @@ -66,26 +96,26 @@ align-items: center; } .folder-header:hover { - background: #f0f0f0; + background: var(--hover); } .folder-name { - color: #333; + color: var(--text); } .folder-count { - color: #666; + color: var(--muted); font-size: 0.9rem; font-weight: normal; } .folder-content { - padding: 0 12px 12px; + padding: 0 14px 14px; margin: 0; - border-top: 1px solid #eee; - background: white; + border-top: 1px solid var(--border); + background: var(--card); } .folder-content li { margin: 8px 0; padding: 4px 0; - border-bottom: 1px solid #f0f0f0; + border-bottom: 1px solid var(--border); } .folder-content li:last-child { border-bottom: none; @@ -97,6 +127,18 @@ li.folder-section[data-restricted="true"].allowed { display: block; } + .top-bar { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 12px; + } + #theme-toggle { + border: none; + cursor: pointer; + font-weight: 600; + } </style> <script> // 즉시 실행: 제한된 폴더 숨기기 (FOUC 방지) @@ -156,7 +198,12 @@ </script> </head> <body> - <h1>{{ .Title }}</h1> + <div class="top-bar"> + <div> + <h1>{{ .Title }}</h1> + </div> + <button id="theme-toggle" class="badge" style="border:none;cursor:pointer">Light mode</button> + </div> <!-- 섹션 소개 글 --> <div class="content">{{ .Content }}</div> @@ -665,5 +712,26 @@ }); }); </script> + <script> + (function() { + const stored = localStorage.getItem('theme'); + if (stored === 'light') { + document.body.classList.add('theme-light'); + } + const toggle = document.getElementById('theme-toggle'); + const updateLabel = () => { + if (!toggle) return; + toggle.textContent = document.body.classList.contains('theme-light') ? 'Dark mode' : 'Light mode'; + }; + updateLabel(); + if (toggle) { + toggle.addEventListener('click', () => { + document.body.classList.toggle('theme-light'); + localStorage.setItem('theme', document.body.classList.contains('theme-light') ? 'light' : 'dark'); + updateLabel(); + }); + } + })(); + </script> </body> </html> |