Something went wrong. Try again.
Personal save-for-later and Miniflux e-reader proxy for Xteink X4 (wip)
Something went wrong. Try again.
3.7 kB · 225 lines
CSS
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226:root { --bg: #faf8f3; --fg: #1c1b17; --muted: #6b6860; --accent: #3a5a40; --border: #d8d2c3; --danger: #9a3b2a; --card: #fffefa;}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: ui-serif, Georgia, "Times New Roman", serif; background: var(--bg); color: var(--fg); -webkit-font-smoothing: antialiased;}
body { max-width: 52rem; margin: 0 auto; padding: 2rem 1rem 4rem; line-height: 1.5;}
header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 2rem; border-bottom: 1px solid var(--border); padding-bottom: 1rem;}
header h1 { margin: 0; font-weight: 600; font-size: 1.75rem; letter-spacing: -0.01em;}
nav { display: flex; gap: 1.5rem;}
nav button { background: none; border: none; font: inherit; cursor: pointer; padding: 0.25rem 0; color: var(--muted); border-bottom: 2px solid transparent;}
nav button.active { color: var(--fg); border-bottom-color: var(--accent);}
form.add { display: flex; gap: 0.5rem; margin-bottom: 1.5rem;}
input[type="url"], input[type="text"] { flex: 1; padding: 0.5rem 0.75rem; border: 1px solid var(--border); border-radius: 3px; background: var(--card); font: inherit; color: var(--fg);}
input[type="url"]:focus, input[type="text"]:focus { outline: none; border-color: var(--accent);}
button.primary, button.ghost, button.danger { padding: 0.5rem 0.85rem; border: 1px solid var(--border); border-radius: 3px; font: inherit; cursor: pointer; background: var(--card); color: var(--fg); white-space: nowrap;}
button.primary { background: var(--accent); color: #fff; border-color: var(--accent);}
button.primary:hover:not(:disabled), button.primary:focus { filter: brightness(1.1);}
button.ghost:hover, button.ghost:focus { background: var(--bg);}
button.danger { color: var(--danger); border-color: transparent; background: transparent; padding: 0.25rem 0.5rem;}
button.danger:hover { background: rgba(154, 59, 42, 0.08);}
button:disabled { opacity: 0.5; cursor: not-allowed;}
.toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; gap: 1rem;}
.filters { display: flex; gap: 0.75rem; align-items: center; color: var(--muted); font-size: 0.9rem;}
.filters label { cursor: pointer;}
ul.list { list-style: none; padding: 0; margin: 0;}
ul.list li { padding: 0.9rem 0; border-bottom: 1px solid var(--border); display: grid; grid-template-columns: 1fr auto; gap: 0.5rem 1rem; align-items: start;}
ul.list li.read { opacity: 0.55;}
.item-title { font-weight: 500; color: var(--fg); text-decoration: none;}
.item-title:hover { text-decoration: underline;}
.item-meta { color: var(--muted); font-size: 0.85rem; margin-top: 0.15rem; word-break: break-all;}
.actions { display: flex; gap: 0.25rem; align-items: center;}
.empty { color: var(--muted); font-style: italic; padding: 2rem 0; text-align: center;}
.error { background: rgba(154, 59, 42, 0.1); color: var(--danger); padding: 0.75rem 1rem; border-radius: 3px; margin-bottom: 1rem; border-left: 3px solid var(--danger);}
.loading { color: var(--muted); padding: 1rem 0;}
.new-token { background: rgba(180, 140, 40, 0.1); border-left: 3px solid #b48c28; padding: 0.75rem 1rem; border-radius: 3px; margin-bottom: 1rem;}
.new-token pre { background: rgba(0, 0, 0, 0.25); padding: 0.5rem 0.75rem; border-radius: 3px; overflow-x: auto; user-select: all; font-size: 0.9rem;}