diff options
Diffstat (limited to 'frontend-vanilla/src/style.css')
| -rw-r--r-- | frontend-vanilla/src/style.css | 382 |
1 files changed, 193 insertions, 189 deletions
diff --git a/frontend-vanilla/src/style.css b/frontend-vanilla/src/style.css index c79fd3d..575be9d 100644 --- a/frontend-vanilla/src/style.css +++ b/frontend-vanilla/src/style.css @@ -1,40 +1,28 @@ :root { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; + /* Font Variables */ + --font-body: Palatino, 'Palatino Linotype', 'Palatino LT STD', 'Book Antiqua', Georgia, serif; + --font-heading: 'Helvetica Neue', Helvetica, Arial, sans-serif; + --font-sans: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; + line-height: 1.5; - font-weight: 400; + font-size: 18px; - color-scheme: light dark; + /* Light Mode Defaults */ --bg-color: #ffffff; - --text-color: #213547; - --sidebar-bg: #f8f9fa; - --border-color: #e9ecef; + --text-color: rgba(0, 0, 0, 0.87); + --sidebar-bg: #ccc; + --link-color: #0000ee; + --border-color: #999; --accent-color: #007bff; - --hover-color: #e2e6ea; - --sidebar-width: 250px; - --item-list-width: 350px; -} - -.theme-dark { - --bg-color: #1a1a1a; - --text-color: #e9ecef; - --sidebar-bg: #212529; - --border-color: #343a40; - --accent-color: #375a7f; - --hover-color: #2c3034; -} - -.font-serif { - font-family: Georgia, serif; -} -.font-mono { - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; + color-scheme: light dark; } body { margin: 0; - color: var(--text-color); + font-family: var(--font-body); background-color: var(--bg-color); + color: var(--text-color); height: 100vh; overflow: hidden; } @@ -46,59 +34,67 @@ body { .layout { display: flex; height: 100%; + width: 100%; } -/* Sidebar */ +/* Sidebar - glassmorphism by default */ .sidebar { - width: var(--sidebar-width); - background-color: var(--sidebar-bg); - border-right: 1px solid var(--border-color); + width: 14rem; + background: rgba(255, 255, 255, 0.05); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + border-right: 1px solid rgba(255, 255, 255, 0.1); display: flex; flex-direction: column; + height: 100%; + overflow: hidden; + z-index: 100; + padding: 1.5rem; } -.sidebar-header { - padding: 1rem; - border-bottom: 1px solid var(--border-color); +.theme-dark .sidebar { + background: rgba(0, 0, 0, 0.2); + border-right-color: rgba(255, 255, 255, 0.05); } .sidebar-header h2 { - margin: 0; - font-size: 1.1rem; + font-family: var(--font-heading); + font-size: 1.5rem; + margin: 0 0 2rem 0; + opacity: 0.8; + cursor: pointer; } .sidebar-search { - padding: 0.75rem 1rem; - border-bottom: 1px solid var(--border-color); + margin-bottom: 2rem; } .sidebar-search input { width: 100%; - padding: 0.4rem 0.6rem; - background-color: var(--bg-color); - border: 1px solid var(--border-color); - border-radius: 4px; + border-radius: 20px; + background: rgba(0, 0, 0, 0.05); + border: 1px solid rgba(255, 255, 255, 0.1); color: var(--text-color); - font-size: 0.85rem; + padding: 0.5rem 1rem; + font-size: 0.9rem; } .sidebar-scroll { flex: 1; overflow-y: auto; - padding: 1rem 0; -} - -.sidebar-section { - margin-bottom: 2rem; + margin: 0 -1.5rem; + padding: 0 1.5rem; } .sidebar-section h3 { - padding: 0 1rem; - font-size: 0.7rem; + font-family: var(--font-heading); + font-size: 0.75rem; text-transform: uppercase; - color: #888; - margin: 0 0 0.5rem 0; - letter-spacing: 0.05rem; + letter-spacing: 0.1em; + opacity: 0.5; + margin-top: 2rem; + margin-bottom: 0.5rem; + font-weight: 600; } .sidebar-section ul { @@ -109,206 +105,200 @@ body { .sidebar-section li a { display: block; - padding: 0.4rem 1rem; + padding: 0.4rem 0.8rem; + margin: 0.2rem 0; + border-radius: 8px; + transition: all 0.2s ease; + font-weight: 500; text-decoration: none; color: var(--text-color); - font-size: 0.9rem; + opacity: 0.8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } -.sidebar-section li:hover { - background-color: var(--hover-color); -} - -.sidebar-section li.active { - background-color: var(--hover-color); - font-weight: bold; +.sidebar-section li a:hover { + background: rgba(255, 255, 255, 0.1); + opacity: 1; + transform: translateX(4px); } .sidebar-section li.active a { - color: var(--accent-color); + background: rgba(255, 255, 255, 0.25); + opacity: 1; + font-weight: 700; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); + border: 1px solid rgba(255, 255, 255, 0.2); } .sidebar-footer { - padding: 1rem; - border-top: 1px solid var(--border-color); + margin-top: auto; + padding-top: 1.5rem; + border-top: 1px solid rgba(255, 255, 255, 0.1); display: flex; - justify-content: space-between; - font-size: 0.85rem; + flex-direction: column; + gap: 0.5rem; } .sidebar-footer a { - color: var(--text-color); + opacity: 0.6; + padding: 0.5rem 0.8rem; + border-radius: 8px; text-decoration: none; - opacity: 0.7; + color: var(--text-color); + font-size: 0.9rem; + font-family: var(--font-heading); } .sidebar-footer a:hover { + background: rgba(255, 255, 255, 0.05); opacity: 1; } -/* Item List Pane */ -.item-list-pane { - width: var(--item-list-width); - border-right: 1px solid var(--border-color); - display: flex; - flex-direction: column; - background-color: var(--bg-color); -} - -.top-bar { - padding: 0.75rem 1rem; - border-bottom: 1px solid var(--border-color); +/* Main Content area */ +.main-content { + flex: 1; + min-width: 0; + overflow-y: auto; background-color: var(--bg-color); - height: 40px; - display: flex; - align-items: center; -} - -.top-bar h1 { - margin: 0; - font-size: 0.95rem; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; + padding: 2rem; } -.item-list-container { - flex: 1; - overflow-y: auto; +.main-content>* { + max-width: 35em; + margin: 0 auto; } +/* Feed Items Styles (from v2) */ .item-list { list-style: none; padding: 0; margin: 0; } -.item-row { - padding: 0.75rem 1rem; - border-bottom: 1px solid var(--border-color); - cursor: pointer; - transition: background 0.1s; -} - -.item-row:hover { - background-color: var(--hover-color); -} - -.item-row.active { - background-color: var(--hover-color); - border-left: 3px solid var(--accent-color); +.feed-item { + padding: 1rem 0; + margin-top: 5rem; + border-bottom: none; } -.item-row.read { - opacity: 0.6; +.item-header { + display: flex; + justify-content: space-between; + align-items: flex-start; + margin-bottom: 0.5rem; } .item-title { - font-weight: 600; - font-size: 0.9rem; - margin-bottom: 0.2rem; - line-height: 1.3; -} - -.item-meta { - font-size: 0.75rem; - color: #888; + font-family: var(--font-heading); + font-size: 1.8rem; + font-weight: bold; + text-decoration: none; + color: var(--link-color); + display: block; + flex: 1; + cursor: pointer; } -.load-more { - padding: 1.5rem; - text-align: center; - color: #888; - font-size: 0.85rem; +.item-title:hover { + text-decoration: underline; } -/* Item Detail Pane */ -.item-detail-pane { - flex: 1; - overflow-y: auto; - background-color: var(--bg-color); +.star-btn { + background: none; + border: none; + cursor: pointer; + font-size: 1.25rem; + padding: 0 0 0 0.5rem; + vertical-align: middle; + transition: color 0.2s; + line-height: 1; } -.item-detail-content { - max-width: 700px; - margin: 0 auto; - padding: 2rem; +.star-btn.is-starred { + color: blue; } -.item-detail header { - margin-bottom: 2rem; - border-bottom: 1px solid var(--border-color); - padding-bottom: 1.5rem; +.star-btn.is-unstarred { + color: var(--text-color); + opacity: 0.3; } -.item-detail h1 { - font-size: 1.75rem; - margin: 0 0 0.75rem 0; - line-height: 1.2; +.dateline { + margin-top: 0; + font-weight: normal; + font-size: 0.75em; + color: #ccc; + margin-bottom: 1rem; } -.item-detail h1 a { - color: var(--text-color); +.dateline a { + color: #ccc; text-decoration: none; } -.item-detail h1 a:hover { - text-decoration: underline; -} - -.item-actions { - display: flex; - gap: 0.5rem; +.item-description { + color: var(--text-color); + line-height: 1.5; + font-size: 1rem; margin-top: 1rem; + overflow-wrap: break-word; + word-break: break-word; } -.item-actions button { - padding: 0.3rem 0.6rem; - font-size: 0.8rem; - cursor: pointer; - background-color: var(--bg-color); - border: 1px solid var(--border-color); - color: var(--text-color); - border-radius: 4px; +.item-description img { + max-width: 100%; + height: auto; + display: block; + margin: 1rem 0; } -.item-actions button:hover { - background-color: var(--hover-color); +.scrape-btn { + background: var(--bg-color); + border: 1px solid var(--border-color, #ccc); + color: blue; + cursor: pointer; + font-family: var(--font-heading); + font-weight: bold; + font-size: 0.8rem; + padding: 2px 6px; + margin-left: 0.5rem; } -.full-content { - font-size: 1.1rem; - line-height: 1.7; +/* Themes */ +.theme-dark { + --bg-color: #000000; + --text-color: #ffffff; + --sidebar-bg: #111111; + --link-color: rgb(90, 200, 250); + --border-color: #333; } -.full-content img { - max-width: 100%; - height: auto; - display: block; - margin: 1.5rem 0; - border-radius: 4px; +.font-serif { + --font-body: Georgia, 'Times New Roman', Times, serif; + font-family: var(--font-body); } -.full-content a { - color: var(--accent-color); +.font-mono { + --font-body: Menlo, Monaco, Consolas, 'Courier New', monospace; + font-family: var(--font-body); } +/* Settings View */ .settings-view { - padding: 2rem; + padding-top: 2rem; } .settings-section { - margin-bottom: 2rem; + margin-bottom: 2.5rem; } .settings-section h3 { - font-size: 1rem; - margin-bottom: 1rem; + font-family: var(--font-heading); border-bottom: 1px solid var(--border-color); padding-bottom: 0.5rem; + margin-bottom: 1rem; } .theme-options { @@ -316,23 +306,37 @@ body { gap: 1rem; } -.theme-options button.active { +button { + border-radius: 8px; + border: 1px solid var(--border-color); + padding: 0.6em 1.2em; + font-size: 1em; + font-weight: bold; + font-family: inherit; + background-color: #f9f9f9; + cursor: pointer; + transition: all 0.2s; +} + +.theme-dark button { + background-color: #1a1a1a; + color: #fff; + border-color: #333; +} + +button.active { border-color: var(--accent-color); - background-color: var(--hover-color); + background-color: #eef; } -.empty-state { - display: flex; - align-items: center; - justify-content: center; - height: 100%; - color: #888; - font-size: 1.1rem; +.theme-dark button.active { + background-color: #224; + border-color: var(--accent-color); } -.loading, -.empty { - padding: 2rem; - text-align: center; - color: #888; +@media (max-width: 768px) { + .sidebar { + display: none; + /* Mobile sidebar will need to be handled later */ + } }
\ No newline at end of file |