* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
--bg: #0d1117;
--bg-card: #161b22;
--bg-input: #0d1117;
--border: #30363d;
--text: #e6edf3;
--text-muted: #8b949e;
--accent: #58a6ff;
--accent-hover: #79c0ff;
--green: #3fb950;
--red: #f85149;
--mastodon: #6364ff;
--atproto: #0085ff;
--instagram: #e1306c;
--local: #3fb950;
--radius: 8px;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
background: var(--bg);
color: var(--text);
line-height: 1.5;
}
#app {
max-width: 640px;
margin: 0 auto;
padding: 0 16px;
}
/* Header */
header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 0;
border-bottom: 1px solid var(--border);
margin-bottom: 16px;
}
header h1 { font-size: 18px; font-weight: 600; }
header h1 a { color: var(--text); text-decoration: none; }
nav { display: flex; gap: 8px; }
nav a {
color: var(--text-muted);
text-decoration: none;
padding: 6px 12px;
border-radius: var(--radius);
font-size: 14px;
}
nav a:hover { color: var(--text); background: var(--bg-card); }
nav a.active { color: var(--accent); background: var(--bg-card); }
/* Buttons */
.btn {
background: var(--bg-card);
color: var(--text);
border: 1px solid var(--border);
padding: 8px 16px;
border-radius: var(--radius);
cursor: pointer;
font-size: 14px;
}
.btn:hover { border-color: var(--accent); }
.btn-primary { background: var(--accent); color: #000; border-color: var(--accent); font-weight: 600; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-small { padding: 4px 10px; font-size: 12px; }
.btn-block { display: block; width: 100%; margin-top: 12px; }
.btn-danger { border-color: var(--red); color: var(--red); }
/* Filters */
.filters { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.filter-btn {
background: var(--bg-card);
color: var(--text-muted);
border: 1px solid var(--border);
padding: 4px 12px;
border-radius: 20px;
cursor: pointer;
font-size: 13px;
}
.filter-btn:hover { color: var(--text); border-color: var(--text-muted); }
.filter-btn.active { color: var(--accent); border-color: var(--accent); }
/* Feed */
.feed { display: flex; flex-direction: column; gap: 2px; }
.post {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 14px;
}
.post-header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 6px;
}
.post-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.post-avatar-placeholder { width: 40px; height: 40px; border-radius: 50%; background: var(--border); flex-shrink: 0; }
.post-author-info { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.post-displayname { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.post-author { font-size: 13px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.post-platform {
font-size: 11px;
padding: 2px 6px;
border-radius: 4px;
font-weight: 600;
text-transform: uppercase;
}
.post-platform.mastodon { background: var(--mastodon); color: #fff; }
.post-platform.atproto { background: var(--atproto); color: #fff; }
.post-platform.instagram { background: var(--instagram); color: #fff; }
.post-platform.local { background: var(--local); color: #000; }
.post-time { color: var(--text-muted); font-size: 12px; margin-left: auto; }
.post-text { font-size: 14px; white-space: pre-wrap; word-wrap: break-word; }
.post-media { margin-top: 8px; }
.post-media img { max-width: 100%; border-radius: var(--radius); }
.post-meta { display: flex; gap: 16px; margin-top: 8px; font-size: 12px; color: var(--text-muted); }
.post-syndicated { margin-top: 6px; font-size: 11px; color: var(--text-muted); }
.post-type-boost { border-left: 3px solid var(--text-muted); }
.post-type-reply { border-left: 3px solid var(--accent); }
/* Compose */
.compose-box { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
.compose-box textarea {
width: 100%;
background: var(--bg-input);
color: var(--text);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 10px;
font-size: 14px;
font-family: inherit;
resize: vertical;
}
.compose-box textarea:focus { outline: none; border-color: var(--accent); }
.compose-media { margin: 10px 0; }
#media-preview { display: flex; align-items: center; gap: 8px; padding: 8px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius); }
#preview-name { font-size: 13px; color: var(--text-muted); flex: 1; }
#alt-text { width: 100%; background: var(--bg-input); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); padding: 6px 8px; font-size: 13px; }
#alt-text:focus { outline: none; border-color: var(--accent); }
.compose-targets { margin: 12px 0; display: flex; gap: 16px; }
.compose-targets label { font-size: 14px; display: flex; align-items: center; gap: 4px; }
.compose-actions { display: flex; justify-content: space-between; align-items: center; }
#char-count { font-size: 13px; color: var(--text-muted); }
/* Themes */
[data-theme="light"] {
--bg: #ffffff;
--bg-card: #f6f8fa;
--bg-input: #ffffff;
--border: #d0d7de;
--text: #1f2328;
--text-muted: #656d76;
--accent: #0969da;
--accent-hover: #0550ae;
}
[data-theme="dark-blue"] {
--bg: #0a1628;
--bg-card: #0f2040;
--bg-input: #0a1628;
--border: #1e3a5f;
--text: #c9d9ef;
--text-muted: #7a8da6;
--accent: #4a9eff;
--accent-hover: #6db3ff;
}
/* Settings */
.settings-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 14px;
margin-bottom: 12px;
}
.settings-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 6px 0;
}
.settings-row + .settings-row { border-top: 1px solid var(--border); }
.settings-label { font-size: 13px; color: var(--text-muted); min-width: 100px; }
.settings-value { font-size: 14px; }
.identity-card-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 10px;
}
.identity-avatar {
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--border);
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
flex-shrink: 0;
}
.identity-name { font-size: 18px; font-weight: 600; }
.identity-handle { font-size: 14px; color: var(--text-muted); }
.perm-badge {
display: inline-block;
font-size: 11px;
padding: 2px 8px;
border-radius: 12px;
font-weight: 600;
text-transform: uppercase;
}
.perm-badge.admin { background: rgba(248,81,73,0.2); color: var(--red); }
.perm-badge.write { background: rgba(88,166,255,0.2); color: var(--accent); }
.perm-badge.read { background: rgba(139,148,158,0.2); color: var(--text-muted); }
.theme-buttons { display: flex; gap: 8px; }
.theme-btn.active { border-color: var(--accent); color: var(--accent); }
.mono { font-family: monospace; font-size: 12px; word-break: break-all; }
.identity-item {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 0;
}
.identity-item + .identity-item { border-top: 1px solid var(--border); }
.identity-method {
font-size: 12px;
padding: 2px 6px;
border-radius: 4px;
background: var(--bg-input);
border: 1px solid var(--border);
white-space: nowrap;
}
.connect-form { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
.connect-form select, .connect-form input {
display: block;
width: 100%;
background: var(--bg-input);
color: var(--text);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 8px 10px;
font-size: 14px;
margin-bottom: 8px;
}
.connect-form select:focus, .connect-form input:focus { outline: none; border-color: var(--accent); }
.connect-form .btn { margin-top: 8px; }
.account-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 12px;
margin-bottom: 8px;
display: flex;
align-items: center;
justify-content: space-between;
}
.account-info { display: flex; align-items: center; gap: 8px; }
/* Notifications */
.notification {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 10px 14px;
font-size: 14px;
}
.notification .notif-type { font-weight: 600; text-transform: capitalize; }
/* Result messages */
.result { margin-top: 10px; padding: 8px 12px; border-radius: var(--radius); font-size: 13px; }
.result.success { background: rgba(63,185,80,0.15); color: var(--green); border: 1px solid rgba(63,185,80,0.3); }
.result.error { background: rgba(248,81,73,0.15); color: var(--red); border: 1px solid rgba(248,81,73,0.3); }
h2 { font-size: 18px; margin-bottom: 12px; }
h3 { font-size: 15px; margin: 16px 0 8px; color: var(--text-muted); }
/* Responsive */
@media (max-width: 480px) {
header { flex-direction: column; gap: 8px; }
nav { flex-wrap: wrap; justify-content: center; }
.compose-targets { flex-direction: column; gap: 8px; }
}