2026-06-12 01:58:46 +02:00
|
|
|
/* retoor <retoor@molodetz.nl> */
|
|
|
|
|
|
2026-05-12 15:07:34 +02:00
|
|
|
.error-page {
|
|
|
|
|
text-align: center;
|
|
|
|
|
padding: 4rem 1rem;
|
|
|
|
|
}
|
|
|
|
|
.error-code {
|
|
|
|
|
font-size: 5rem;
|
|
|
|
|
font-weight: 800;
|
|
|
|
|
color: var(--accent);
|
|
|
|
|
line-height: 1;
|
|
|
|
|
margin-bottom: 0.5rem;
|
|
|
|
|
}
|
|
|
|
|
.error-message {
|
|
|
|
|
font-size: 1.125rem;
|
|
|
|
|
color: var(--text-secondary);
|
|
|
|
|
margin-bottom: 1.5rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.line-clamp-3 {
|
|
|
|
|
display: -webkit-box;
|
|
|
|
|
-webkit-line-clamp: 3;
|
|
|
|
|
-webkit-box-orient: vertical;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
.line-clamp-4 {
|
|
|
|
|
display: -webkit-box;
|
|
|
|
|
-webkit-line-clamp: 4;
|
|
|
|
|
-webkit-box-orient: vertical;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.modal-card {
|
|
|
|
|
width: 100%;
|
|
|
|
|
max-width: 560px;
|
|
|
|
|
margin: 1rem;
|
|
|
|
|
max-height: 90vh;
|
|
|
|
|
overflow-y: auto;
|
2026-06-14 02:16:22 +02:00
|
|
|
border-radius: var(--radius-xl);
|
|
|
|
|
box-shadow: var(--shadow-lg);
|
2026-05-12 15:07:34 +02:00
|
|
|
}
|
|
|
|
|
.modal-card-wide {
|
|
|
|
|
max-width: 700px;
|
|
|
|
|
}
|
|
|
|
|
.modal-header {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
align-items: center;
|
|
|
|
|
margin-bottom: 1rem;
|
|
|
|
|
}
|
|
|
|
|
.modal-header h3 {
|
|
|
|
|
font-size: 1.125rem;
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
}
|
|
|
|
|
.modal-close-btn {
|
|
|
|
|
font-size: 1.25rem;
|
|
|
|
|
}
|
|
|
|
|
.modal-footer {
|
|
|
|
|
display: flex;
|
|
|
|
|
gap: 0.75rem;
|
|
|
|
|
justify-content: flex-end;
|
|
|
|
|
}
|
|
|
|
|
.form-row {
|
|
|
|
|
display: flex;
|
|
|
|
|
gap: 0.375rem;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
margin-bottom: 1rem;
|
|
|
|
|
}
|
|
|
|
|
.topic-label {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
gap: 0.25rem;
|
|
|
|
|
padding: 0.375rem 0.75rem;
|
|
|
|
|
border-radius: 999px;
|
|
|
|
|
font-size: 0.75rem;
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
background: var(--bg-card-hover);
|
|
|
|
|
}
|
|
|
|
|
.topic-radio {
|
|
|
|
|
width: auto;
|
|
|
|
|
accent-color: var(--accent);
|
|
|
|
|
}
|
|
|
|
|
.inline-form {
|
|
|
|
|
display: inline;
|
|
|
|
|
}
|
feat: add leaderboard router, gamification backfill, and shared content creation helpers
Introduce a new `/leaderboard` endpoint ranking top 50 members by total stars, wire it into the app router and documentation. Implement `_backfill_gamification()` in `database.py` to compute XP/levels for existing accounts from prior posts, comments, votes, and follows. Extract `is_owner()`, `create_content_item()`, and `detail_context()` into `content.py` to centralize content creation, reward awarding, mention notifications, and attachment linking. Update comment creation/deletion in `comments.py` to use `award_rewards()` with `XP_COMMENT` and the new `is_owner()` helper. Add shared template partials documentation for vote bars, star buttons, post headers, and topic selectors to `AGENTS.md`.
2026-05-30 20:16:39 +02:00
|
|
|
.hidden {
|
|
|
|
|
display: none !important;
|
|
|
|
|
}
|
2026-05-12 15:07:34 +02:00
|
|
|
.text-muted {
|
|
|
|
|
color: var(--text-muted);
|
|
|
|
|
}
|
|
|
|
|
.text-secondary {
|
|
|
|
|
color: var(--text-secondary);
|
|
|
|
|
}
|
|
|
|
|
.text-primary {
|
|
|
|
|
color: var(--text-primary);
|
|
|
|
|
}
|
|
|
|
|
.auth-field-gap {
|
|
|
|
|
margin-bottom: 0.75rem;
|
|
|
|
|
}
|
|
|
|
|
.load-more-wrap {
|
|
|
|
|
text-align: center;
|
|
|
|
|
margin-top: 1rem;
|
|
|
|
|
}
|
|
|
|
|
.top-authors-section {
|
|
|
|
|
margin-top: 0.75rem;
|
|
|
|
|
padding-top: 0.75rem;
|
|
|
|
|
border-top: 1px solid var(--border);
|
|
|
|
|
}
|
|
|
|
|
.top-authors-title {
|
|
|
|
|
font-size: 0.75rem;
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
text-transform: uppercase;
|
|
|
|
|
letter-spacing: 0.1em;
|
|
|
|
|
color: var(--text-muted);
|
|
|
|
|
margin-bottom: 0.5rem;
|
|
|
|
|
}
|
|
|
|
|
.no-authors-msg {
|
|
|
|
|
font-size: 0.75rem;
|
|
|
|
|
color: var(--text-muted);
|
|
|
|
|
padding: 0.5rem 0;
|
|
|
|
|
}
|
feat: add leaderboard router, gamification backfill, and shared content creation helpers
Introduce a new `/leaderboard` endpoint ranking top 50 members by total stars, wire it into the app router and documentation. Implement `_backfill_gamification()` in `database.py` to compute XP/levels for existing accounts from prior posts, comments, votes, and follows. Extract `is_owner()`, `create_content_item()`, and `detail_context()` into `content.py` to centralize content creation, reward awarding, mention notifications, and attachment linking. Update comment creation/deletion in `comments.py` to use `award_rewards()` with `XP_COMMENT` and the new `is_owner()` helper. Add shared template partials documentation for vote bars, star buttons, post headers, and topic selectors to `AGENTS.md`.
2026-05-30 20:16:39 +02:00
|
|
|
.top-authors-link {
|
|
|
|
|
display: block;
|
|
|
|
|
margin-top: 0.5rem;
|
|
|
|
|
font-size: 0.75rem;
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
color: var(--accent);
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
2026-05-12 15:07:34 +02:00
|
|
|
.no-comments-msg {
|
|
|
|
|
color: var(--text-muted);
|
|
|
|
|
font-size: 0.875rem;
|
|
|
|
|
text-align: center;
|
|
|
|
|
padding: 2rem 0;
|
|
|
|
|
}
|
|
|
|
|
.topic-wrap {
|
|
|
|
|
margin-bottom: 0.75rem;
|
|
|
|
|
}
|
|
|
|
|
.related-section {
|
|
|
|
|
margin-top: 1.5rem;
|
|
|
|
|
}
|
|
|
|
|
.related-list {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
gap: 0.75rem;
|
|
|
|
|
}
|
|
|
|
|
.related-link {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
align-items: flex-start;
|
|
|
|
|
gap: 0.25rem;
|
|
|
|
|
padding: 0.75rem;
|
|
|
|
|
width: 100%;
|
|
|
|
|
border-radius: var(--radius);
|
|
|
|
|
}
|
|
|
|
|
.related-link:hover {
|
|
|
|
|
background: var(--bg-card);
|
|
|
|
|
}
|
|
|
|
|
.related-title {
|
|
|
|
|
color: var(--text-primary);
|
|
|
|
|
font-size: 0.875rem;
|
|
|
|
|
}
|
|
|
|
|
.related-meta {
|
|
|
|
|
color: var(--text-muted);
|
|
|
|
|
font-size: 0.75rem;
|
|
|
|
|
}
|
|
|
|
|
.v-align-middle {
|
|
|
|
|
vertical-align: middle;
|
|
|
|
|
}
|
|
|
|
|
.mr-0-375 {
|
|
|
|
|
margin-right: 0.375rem;
|
|
|
|
|
}
|
|
|
|
|
.flex-center {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
.flex-center-gap {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
gap: 0.5rem;
|
|
|
|
|
}
|
|
|
|
|
.flex-col-gap {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
gap: 0.5rem;
|
|
|
|
|
}
|
|
|
|
|
.full-width {
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
.justify-center {
|
|
|
|
|
justify-content: center;
|
|
|
|
|
}
|
|
|
|
|
.grid-2col {
|
|
|
|
|
display: grid;
|
|
|
|
|
grid-template-columns: 1fr 1fr;
|
|
|
|
|
gap: 0.75rem;
|
|
|
|
|
margin-bottom: 0.75rem;
|
|
|
|
|
}
|
|
|
|
|
.section-divider {
|
|
|
|
|
border: none;
|
|
|
|
|
border-top: 1px solid var(--border);
|
|
|
|
|
margin: 1.5rem 0;
|
|
|
|
|
}
|
|
|
|
|
.section-label {
|
|
|
|
|
font-size: 0.875rem;
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
margin-bottom: 0.75rem;
|
|
|
|
|
color: var(--text-secondary);
|
|
|
|
|
}
|
|
|
|
|
.inline-flex {
|
|
|
|
|
display: inline-flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
gap: 0.375rem;
|
|
|
|
|
}
|
|
|
|
|
.input-sm {
|
|
|
|
|
font-size: 0.8125rem;
|
|
|
|
|
}
|
|
|
|
|
.min-h-100 {
|
|
|
|
|
min-height: 100px;
|
|
|
|
|
}
|
|
|
|
|
.min-h-120 {
|
|
|
|
|
min-height: 120px;
|
|
|
|
|
}
|
|
|
|
|
.min-h-200 {
|
|
|
|
|
min-height: 200px;
|
|
|
|
|
}
|
|
|
|
|
.flex-between {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
.flex-wrap-gap {
|
|
|
|
|
display: flex;
|
|
|
|
|
gap: 0.375rem;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
}
|
|
|
|
|
.flex-wrap-gap-bottom {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
gap: 0.375rem;
|
|
|
|
|
margin-bottom: 0.5rem;
|
|
|
|
|
}
|
|
|
|
|
.badge-type {
|
|
|
|
|
background: var(--border);
|
|
|
|
|
color: var(--text-muted);
|
|
|
|
|
text-transform: capitalize;
|
|
|
|
|
}
|
|
|
|
|
.empty-state-full {
|
|
|
|
|
grid-column: 1 / -1;
|
|
|
|
|
}
|
|
|
|
|
.projects-settings-btn {
|
|
|
|
|
margin-left: auto;
|
|
|
|
|
}
|
|
|
|
|
.auth-field-gap-last {
|
|
|
|
|
margin-bottom: 1rem;
|
|
|
|
|
}
|
|
|
|
|
.platform-presets-wrap {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
gap: 0.25rem;
|
|
|
|
|
margin-top: 0.5rem;
|
|
|
|
|
}
|
|
|
|
|
.profile-actions {
|
|
|
|
|
margin-top: 1rem;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
gap: 0.5rem;
|
|
|
|
|
}
|
|
|
|
|
.input-edit-field {
|
|
|
|
|
margin-bottom: 0.5rem;
|
|
|
|
|
}
|
|
|
|
|
.save-btn-top {
|
|
|
|
|
margin-top: 0.5rem;
|
|
|
|
|
}
|
|
|
|
|
.post-action-static {
|
|
|
|
|
cursor: default;
|
|
|
|
|
}
|
|
|
|
|
.activity-card {
|
|
|
|
|
padding: 0.75rem 1rem;
|
|
|
|
|
}
|
|
|
|
|
.activity-row {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
gap: 0.5rem;
|
|
|
|
|
font-size: 0.8125rem;
|
|
|
|
|
}
|
|
|
|
|
.activity-icon {
|
|
|
|
|
color: var(--text-muted);
|
|
|
|
|
}
|
|
|
|
|
.activity-type {
|
|
|
|
|
color: var(--text-secondary);
|
|
|
|
|
}
|
|
|
|
|
.activity-time {
|
|
|
|
|
color: var(--text-muted);
|
|
|
|
|
}
|
|
|
|
|
.activity-content {
|
|
|
|
|
font-size: 0.8125rem;
|
|
|
|
|
color: var(--text-muted);
|
|
|
|
|
margin-top: 0.25rem;
|
|
|
|
|
}
|
|
|
|
|
.project-card {
|
|
|
|
|
display: block;
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
color: inherit;
|
|
|
|
|
}
|
|
|
|
|
.gist-card {
|
|
|
|
|
display: block;
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
color: inherit;
|
|
|
|
|
}
|
|
|
|
|
.platform-preset {
|
|
|
|
|
padding: 0.25rem 0.5rem;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
font-size: 0.6875rem;
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
background: var(--border);
|
|
|
|
|
color: var(--text-muted);
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
border: none;
|
|
|
|
|
}
|
2026-05-10 09:08:12 +02:00
|
|
|
|
|
|
|
|
*, *::before, *::after {
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
margin: 0;
|
|
|
|
|
padding: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
html {
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
scroll-behavior: smooth;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
body {
|
|
|
|
|
font-family: var(--font-sans);
|
|
|
|
|
background: var(--bg-primary);
|
|
|
|
|
color: var(--text-primary);
|
|
|
|
|
min-height: 100vh;
|
|
|
|
|
line-height: 1.5;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
a {
|
|
|
|
|
color: var(--accent);
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
a:hover {
|
|
|
|
|
color: var(--accent-hover);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
button {
|
|
|
|
|
font-family: inherit;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
border: none;
|
|
|
|
|
background: none;
|
|
|
|
|
color: inherit;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
input, textarea, select {
|
|
|
|
|
font-family: inherit;
|
|
|
|
|
font-size: 0.875rem;
|
|
|
|
|
color: var(--text-primary);
|
|
|
|
|
background: var(--bg-input);
|
|
|
|
|
border: 1px solid var(--border);
|
2026-06-14 02:16:22 +02:00
|
|
|
border-radius: var(--radius-input);
|
2026-05-10 09:08:12 +02:00
|
|
|
padding: 0.625rem 0.875rem;
|
|
|
|
|
outline: none;
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
input:focus, textarea:focus, select:focus {
|
|
|
|
|
border-color: var(--accent);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
textarea {
|
|
|
|
|
resize: vertical;
|
|
|
|
|
min-height: 80px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
img {
|
|
|
|
|
max-width: 100%;
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
::-webkit-scrollbar {
|
|
|
|
|
width: 6px;
|
|
|
|
|
height: 6px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
::-webkit-scrollbar-track {
|
|
|
|
|
background: transparent;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
|
|
|
background: var(--border);
|
|
|
|
|
border-radius: 3px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
|
|
|
background: var(--border-light);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.btn {
|
|
|
|
|
display: inline-flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
gap: 0.5rem;
|
|
|
|
|
padding: 0.625rem 1.25rem;
|
|
|
|
|
border-radius: var(--radius);
|
|
|
|
|
font-size: 0.875rem;
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.btn-primary {
|
2026-06-14 02:16:22 +02:00
|
|
|
background: var(--accent-gradient);
|
2026-05-23 08:34:13 +02:00
|
|
|
color: var(--white);
|
2026-06-14 02:16:22 +02:00
|
|
|
box-shadow: 0 2px 12px rgba(255, 95, 70, 0.3);
|
2026-05-10 09:08:12 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.btn-primary:hover {
|
2026-05-23 08:34:13 +02:00
|
|
|
color: var(--white);
|
2026-06-14 02:16:22 +02:00
|
|
|
box-shadow: var(--glow-accent);
|
|
|
|
|
transform: translateY(-1px);
|
2026-05-10 09:08:12 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.btn-secondary {
|
|
|
|
|
background: var(--bg-card);
|
|
|
|
|
color: var(--text-primary);
|
|
|
|
|
border: 1px solid var(--border);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.btn-secondary:hover {
|
|
|
|
|
background: var(--bg-card-hover);
|
|
|
|
|
border-color: var(--border-light);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.btn-ghost {
|
|
|
|
|
background: transparent;
|
|
|
|
|
color: var(--text-secondary);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.btn-ghost:hover {
|
|
|
|
|
color: var(--text-primary);
|
|
|
|
|
background: var(--bg-card);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.btn-sm {
|
|
|
|
|
padding: 0.375rem 0.75rem;
|
|
|
|
|
font-size: 0.8125rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.btn-icon {
|
|
|
|
|
padding: 0.5rem;
|
|
|
|
|
border-radius: var(--radius);
|
|
|
|
|
display: inline-flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
}
|
|
|
|
|
|
2026-06-14 09:48:10 +02:00
|
|
|
@keyframes btn-spin {
|
|
|
|
|
to { transform: rotate(360deg); }
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.btn-spinner {
|
|
|
|
|
display: none;
|
|
|
|
|
width: 0.85em;
|
|
|
|
|
height: 0.85em;
|
|
|
|
|
margin-right: 0.4em;
|
|
|
|
|
border: 2px solid currentColor;
|
|
|
|
|
border-right-color: transparent;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
vertical-align: -0.15em;
|
|
|
|
|
animation: btn-spin 0.6s linear infinite;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.btn.is-loading {
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.btn.is-loading .btn-spinner {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
}
|
|
|
|
|
|
2026-05-10 09:08:12 +02:00
|
|
|
.badge {
|
|
|
|
|
display: inline-flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
padding: 0.125rem 0.5rem;
|
|
|
|
|
border-radius: 999px;
|
|
|
|
|
font-size: 0.75rem;
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
text-transform: uppercase;
|
|
|
|
|
letter-spacing: 0.05em;
|
|
|
|
|
}
|
|
|
|
|
|
2026-05-23 08:34:13 +02:00
|
|
|
.badge-devlog { background: var(--topic-devlog); color: var(--white); }
|
|
|
|
|
.badge-showcase { background: var(--topic-showcase); color: var(--white); }
|
|
|
|
|
.badge-question { background: var(--topic-question); color: var(--white); }
|
|
|
|
|
.badge-rant { background: var(--topic-rant); color: var(--white); }
|
2026-05-11 05:30:51 +02:00
|
|
|
.badge-fun { background: var(--topic-fun); color: #000; }
|
2026-05-10 09:08:12 +02:00
|
|
|
.badge-random { background: var(--border-light); color: var(--text-secondary); }
|
2026-05-23 08:34:13 +02:00
|
|
|
.badge-signals { background: var(--topic-signals); color: var(--white); }
|
2026-05-10 09:08:12 +02:00
|
|
|
|
|
|
|
|
.avatar {
|
|
|
|
|
width: 40px;
|
|
|
|
|
height: 40px;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
background: var(--accent);
|
|
|
|
|
display: inline-flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
font-size: 1rem;
|
2026-05-23 08:34:13 +02:00
|
|
|
color: var(--white);
|
2026-05-10 09:08:12 +02:00
|
|
|
flex-shrink: 0;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
|
2026-05-12 15:07:34 +02:00
|
|
|
.avatar-24 { width: 24px; height: 24px; }
|
|
|
|
|
.avatar-xs { width: 20px; height: 20px; font-size: 0.6875rem; }
|
2026-05-10 09:08:12 +02:00
|
|
|
.avatar-sm { width: 32px; height: 32px; font-size: 0.8125rem; }
|
|
|
|
|
.avatar-lg { width: 80px; height: 80px; font-size: 2rem; }
|
2026-05-10 21:33:53 +02:00
|
|
|
.avatar-img { border-radius: 50%; object-fit: cover; flex-shrink: 0; }
|
2026-05-10 09:08:12 +02:00
|
|
|
|
2026-05-11 00:41:41 +02:00
|
|
|
.topnav {
|
|
|
|
|
position: fixed;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
height: var(--nav-height);
|
|
|
|
|
background: var(--bg-secondary);
|
|
|
|
|
border-bottom: 1px solid var(--border);
|
|
|
|
|
z-index: 1000;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
.topnav-inner {
|
|
|
|
|
max-width: var(--max-content);
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
padding: 0 1rem;
|
|
|
|
|
width: 100%;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
gap: 2rem;
|
|
|
|
|
}
|
|
|
|
|
.topnav-logo {
|
|
|
|
|
font-size: 1.25rem;
|
|
|
|
|
font-weight: 800;
|
|
|
|
|
color: var(--text-primary);
|
|
|
|
|
letter-spacing: -0.02em;
|
feat: add responsive layout with media queries for mobile and tablet breakpoints
Implement responsive design adjustments across admin, auth, base, feed, gists, landing, messages, news, notifications, post, profile, projects, and services CSS files with collapsible sidebar, touch-friendly navigation, and reordered content sections for screen widths below 768px and 480px. Add hamburger menu toggle, mobile overlay panel, and back button for messages view in Application.js.
2026-05-16 01:34:45 +02:00
|
|
|
flex-shrink: 0;
|
2026-05-11 00:41:41 +02:00
|
|
|
}
|
|
|
|
|
.topnav-logo span { color: var(--accent); }
|
|
|
|
|
.topnav-links { display: flex; gap: 0.25rem; }
|
|
|
|
|
.topnav-link {
|
|
|
|
|
padding: 0.5rem 0.75rem;
|
|
|
|
|
border-radius: var(--radius);
|
|
|
|
|
font-size: 0.875rem;
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
color: var(--text-secondary);
|
|
|
|
|
}
|
|
|
|
|
.topnav-link:hover { color: var(--text-primary); background: var(--bg-card); }
|
|
|
|
|
.topnav-link.active { color: var(--accent); background: var(--accent-light); }
|
2026-06-14 02:16:22 +02:00
|
|
|
.topnav-link.topnav-link-feature { color: var(--accent); font-weight: 600; background: var(--accent-light); }
|
|
|
|
|
.topnav-link.topnav-link-feature:hover { color: var(--accent); background: var(--accent-light); filter: brightness(1.2); }
|
|
|
|
|
.topnav-link.topnav-link-feature.active { color: var(--white); background: var(--accent-gradient); box-shadow: var(--glow-accent); }
|
feat: add responsive layout with media queries for mobile and tablet breakpoints
Implement responsive design adjustments across admin, auth, base, feed, gists, landing, messages, news, notifications, post, profile, projects, and services CSS files with collapsible sidebar, touch-friendly navigation, and reordered content sections for screen widths below 768px and 480px. Add hamburger menu toggle, mobile overlay panel, and back button for messages view in Application.js.
2026-05-16 01:34:45 +02:00
|
|
|
.topnav-right { margin-left: auto; display: flex; align-items: center; gap: 1rem; flex-shrink: 0; }
|
2026-06-06 16:31:42 +02:00
|
|
|
.topnav-icon { position: relative; padding: 0.375rem; color: var(--text-secondary); font-size: 1.25rem; background: none; border: none; cursor: pointer; font-family: inherit; line-height: 1; }
|
2026-05-11 00:41:41 +02:00
|
|
|
.topnav-icon:hover { color: var(--text-primary); }
|
2026-06-14 03:06:18 +02:00
|
|
|
.topnav-icon.active { color: var(--accent); }
|
2026-06-14 09:48:10 +02:00
|
|
|
.nav-bell { position: relative; display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
|
2026-05-11 00:41:41 +02:00
|
|
|
.nav-badge {
|
2026-06-14 09:48:10 +02:00
|
|
|
position: absolute; top: -6px; right: -8px; z-index: 1; min-width: 16px; height: 16px;
|
2026-06-09 19:03:16 +02:00
|
|
|
padding: 0 0.25rem; border-radius: 8px; background: var(--accent); color: var(--white);
|
2026-05-11 00:41:41 +02:00
|
|
|
font-size: 0.6875rem; font-weight: 700;
|
|
|
|
|
display: flex; align-items: center; justify-content: center;
|
|
|
|
|
}
|
2026-06-06 16:31:42 +02:00
|
|
|
.nav-badge-inline {
|
|
|
|
|
position: static; margin-left: 0.375rem;
|
|
|
|
|
display: inline-flex; vertical-align: middle;
|
|
|
|
|
}
|
|
|
|
|
.nav-badge[hidden] { display: none; }
|
|
|
|
|
.topnav-user { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem; border-radius: var(--radius); }
|
2026-05-11 00:41:41 +02:00
|
|
|
.topnav-user:hover { background: var(--bg-card); }
|
|
|
|
|
.topnav-user-info { display: flex; flex-direction: column; line-height: 1.2; }
|
|
|
|
|
.topnav-user-name { font-size: 0.8125rem; font-weight: 600; color: var(--text-primary); }
|
|
|
|
|
.topnav-user-role { font-size: 0.6875rem; color: var(--text-muted); }
|
2026-05-12 12:45:52 +02:00
|
|
|
.topnav-user-dropdown { position: relative; }
|
|
|
|
|
.topnav-user-dropdown .dropdown-menu {
|
|
|
|
|
display: none;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 100%;
|
|
|
|
|
right: 0;
|
|
|
|
|
min-width: 140px;
|
|
|
|
|
background: var(--bg-secondary);
|
|
|
|
|
border: 1px solid var(--border);
|
|
|
|
|
border-radius: var(--radius);
|
|
|
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
|
|
|
padding: 0.25rem 0;
|
|
|
|
|
z-index: 1001;
|
|
|
|
|
}
|
2026-06-09 19:38:44 +02:00
|
|
|
.topnav-user-dropdown:hover .dropdown-menu,
|
|
|
|
|
.topnav-user-dropdown.open .dropdown-menu { display: block; }
|
2026-06-14 02:16:22 +02:00
|
|
|
|
|
|
|
|
.topnav-tools-dropdown { position: relative; }
|
|
|
|
|
.topnav-tools-toggle { display: inline-flex; align-items: center; gap: 0.25rem; background: none; border: none; cursor: pointer; font-family: inherit; }
|
|
|
|
|
.topnav-tools-dropdown.active .topnav-tools-toggle { color: var(--accent); background: var(--accent-light); }
|
|
|
|
|
.topnav-caret { font-size: 0.625rem; }
|
|
|
|
|
.topnav-tools-dropdown .dropdown-menu {
|
|
|
|
|
display: none;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 100%;
|
|
|
|
|
left: 0;
|
|
|
|
|
min-width: 180px;
|
|
|
|
|
background: var(--bg-secondary);
|
|
|
|
|
border: 1px solid var(--border);
|
|
|
|
|
border-radius: var(--radius);
|
|
|
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
|
|
|
padding: 0.25rem 0;
|
|
|
|
|
z-index: 1001;
|
|
|
|
|
}
|
|
|
|
|
.topnav-tools-dropdown:hover .dropdown-menu,
|
|
|
|
|
.topnav-tools-dropdown.open .dropdown-menu { display: block; }
|
2026-05-12 12:45:52 +02:00
|
|
|
.dropdown-item {
|
|
|
|
|
display: block;
|
|
|
|
|
padding: 0.5rem 0.875rem;
|
|
|
|
|
font-size: 0.875rem;
|
|
|
|
|
color: var(--text-secondary);
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
}
|
|
|
|
|
.dropdown-item:hover { background: var(--bg-card); color: var(--text-primary); }
|
2026-05-11 00:41:41 +02:00
|
|
|
|
feat: add responsive layout with media queries for mobile and tablet breakpoints
Implement responsive design adjustments across admin, auth, base, feed, gists, landing, messages, news, notifications, post, profile, projects, and services CSS files with collapsible sidebar, touch-friendly navigation, and reordered content sections for screen widths below 768px and 480px. Add hamburger menu toggle, mobile overlay panel, and back button for messages view in Application.js.
2026-05-16 01:34:45 +02:00
|
|
|
.topnav-hamburger {
|
|
|
|
|
display: none;
|
|
|
|
|
background: none;
|
|
|
|
|
border: none;
|
|
|
|
|
color: var(--text-primary);
|
|
|
|
|
font-size: 1.5rem;
|
|
|
|
|
padding: 0.375rem;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
line-height: 1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.topnav-mobile-overlay {
|
|
|
|
|
display: none;
|
|
|
|
|
position: fixed;
|
|
|
|
|
inset: 0;
|
|
|
|
|
background: rgba(0, 0, 0, 0.5);
|
|
|
|
|
z-index: 998;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.topnav-mobile-panel {
|
|
|
|
|
position: fixed;
|
|
|
|
|
top: var(--nav-height);
|
|
|
|
|
left: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
background: var(--bg-secondary);
|
|
|
|
|
border-bottom: 1px solid var(--border);
|
|
|
|
|
z-index: 999;
|
|
|
|
|
max-height: 0;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.topnav-mobile-panel.open {
|
|
|
|
|
max-height: 500px;
|
|
|
|
|
overflow-y: auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.topnav-mobile-links {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
padding: 0.5rem;
|
|
|
|
|
gap: 0.125rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.topnav-mobile-link {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
gap: 0.625rem;
|
|
|
|
|
padding: 0.75rem;
|
|
|
|
|
border-radius: var(--radius);
|
|
|
|
|
font-size: 0.9375rem;
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
color: var(--text-secondary);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.topnav-mobile-link:hover {
|
|
|
|
|
background: var(--bg-card);
|
|
|
|
|
color: var(--text-primary);
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.topnav-mobile-link.active {
|
|
|
|
|
color: var(--accent);
|
|
|
|
|
background: var(--accent-light);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.topnav-mobile-divider {
|
|
|
|
|
height: 1px;
|
|
|
|
|
background: var(--border);
|
|
|
|
|
margin: 0.375rem 0.75rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.topnav-mobile-user {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
gap: 0.75rem;
|
|
|
|
|
padding: 0.75rem;
|
|
|
|
|
border-radius: var(--radius);
|
|
|
|
|
color: var(--text-primary);
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
font-size: 0.875rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.topnav-mobile-user:hover {
|
|
|
|
|
background: var(--bg-card);
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.topnav-mobile-user-info {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
line-height: 1.2;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.topnav-mobile-user-role {
|
|
|
|
|
font-size: 0.75rem;
|
|
|
|
|
color: var(--text-muted);
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.topnav-mobile-section-label {
|
|
|
|
|
font-size: 0.6875rem;
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
text-transform: uppercase;
|
|
|
|
|
letter-spacing: 0.1em;
|
|
|
|
|
color: var(--text-muted);
|
|
|
|
|
padding: 0.5rem 0.75rem 0.25rem;
|
|
|
|
|
}
|
|
|
|
|
|
2026-05-11 05:30:51 +02:00
|
|
|
.user-avatar-link { display: inline-flex; flex-shrink: 0; line-height: 0; }
|
|
|
|
|
.user-avatar-link:hover { opacity: 0.85; }
|
2026-06-06 16:31:42 +02:00
|
|
|
.user-link { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--text-primary); }
|
2026-05-11 05:30:51 +02:00
|
|
|
.user-link:hover { color: var(--accent); text-decoration: none; }
|
|
|
|
|
.user-link-name { font-weight: 600; font-size: 0.875rem; }
|
|
|
|
|
.user-link-role { font-size: 0.75rem; color: var(--text-muted); font-weight: 400; }
|
|
|
|
|
.post-author-link { font-weight: 600; font-size: 0.875rem; color: var(--text-primary); }
|
|
|
|
|
.post-author-link:hover { color: var(--accent); }
|
|
|
|
|
.post-detail-author { font-weight: 600; font-size: 0.9375rem; color: var(--text-primary); }
|
|
|
|
|
.post-detail-author:hover { color: var(--accent); }
|
|
|
|
|
.comment-author { font-size: 0.8125rem; font-weight: 600; color: var(--text-primary); }
|
|
|
|
|
.comment-author:hover { color: var(--accent); }
|
|
|
|
|
|
2026-06-05 18:18:11 +02:00
|
|
|
.comment-form {
|
|
|
|
|
display: flex;
|
|
|
|
|
gap: 0.75rem;
|
|
|
|
|
margin-top: 1rem;
|
|
|
|
|
padding-top: 1rem;
|
|
|
|
|
border-top: 1px solid var(--border);
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
|
2026-06-05 18:42:43 +02:00
|
|
|
.comment-reply-form {
|
|
|
|
|
margin-top: 0.75rem;
|
|
|
|
|
}
|
|
|
|
|
|
2026-06-05 18:18:11 +02:00
|
|
|
.comment-form > a {
|
|
|
|
|
flex-shrink: 0;
|
|
|
|
|
line-height: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.comment-form .mention-wrapper {
|
|
|
|
|
flex: 1;
|
|
|
|
|
min-width: 0;
|
|
|
|
|
width: auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.comment-form textarea {
|
|
|
|
|
width: 100%;
|
|
|
|
|
min-height: 44px;
|
|
|
|
|
max-height: 120px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.comment-form-actions {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
align-items: center;
|
|
|
|
|
flex-shrink: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.comment-form-actions button {
|
|
|
|
|
padding: 0.375rem 0.5rem;
|
|
|
|
|
font-size: 1rem;
|
|
|
|
|
line-height: 1;
|
|
|
|
|
color: var(--text-muted);
|
|
|
|
|
background: none;
|
|
|
|
|
border: none;
|
|
|
|
|
border-radius: var(--radius);
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.comment-form-actions button:hover {
|
|
|
|
|
color: var(--text-primary);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
button.comment-form-submit {
|
|
|
|
|
padding: 0.375rem 0.5rem;
|
|
|
|
|
background: var(--accent);
|
2026-06-12 05:37:12 +02:00
|
|
|
color: var(--white);
|
2026-06-05 18:18:11 +02:00
|
|
|
font-weight: 600;
|
|
|
|
|
font-size: 0.8125rem;
|
|
|
|
|
line-height: 1.4;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
button.comment-form-submit:hover {
|
|
|
|
|
background: var(--accent-hover);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media (max-width: 360px) {
|
|
|
|
|
.comment-form {
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
}
|
|
|
|
|
.comment-form > a {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
.comment-form .mention-wrapper {
|
|
|
|
|
flex: 1 1 100%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2026-05-10 09:08:12 +02:00
|
|
|
.card {
|
|
|
|
|
background: var(--bg-card);
|
|
|
|
|
border: 1px solid var(--border);
|
|
|
|
|
border-radius: var(--radius-lg);
|
2026-06-14 02:16:22 +02:00
|
|
|
box-shadow: var(--shadow-sm);
|
2026-05-10 09:08:12 +02:00
|
|
|
padding: 1rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.page {
|
|
|
|
|
max-width: var(--max-content);
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
padding: 1rem;
|
|
|
|
|
}
|
|
|
|
|
|
2026-05-10 21:33:53 +02:00
|
|
|
.empty-state {
|
|
|
|
|
text-align: center;
|
|
|
|
|
padding: 3rem 1rem;
|
|
|
|
|
color: var(--text-muted);
|
|
|
|
|
font-size: 0.9375rem;
|
|
|
|
|
background: var(--bg-card);
|
|
|
|
|
border: 1px solid var(--border);
|
|
|
|
|
border-radius: var(--radius-lg);
|
|
|
|
|
}
|
|
|
|
|
|
2026-05-12 15:07:34 +02:00
|
|
|
.icon {
|
|
|
|
|
font-size: 1rem;
|
|
|
|
|
width: 20px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
flex-shrink: 0;
|
|
|
|
|
}
|
|
|
|
|
|
2026-05-11 05:30:51 +02:00
|
|
|
.back-link {
|
|
|
|
|
display: inline-flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
gap: 0.375rem;
|
|
|
|
|
color: var(--text-secondary);
|
|
|
|
|
font-size: 0.875rem;
|
|
|
|
|
margin-bottom: 1rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.back-link:hover {
|
|
|
|
|
color: var(--text-primary);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.hint-text {
|
|
|
|
|
color: var(--text-muted);
|
|
|
|
|
font-size: 0.75rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.avatar-md { width: 40px; height: 40px; font-size: 1rem; }
|
|
|
|
|
|
|
|
|
|
.emoji-toggle-btn {
|
|
|
|
|
padding: 0.5rem;
|
|
|
|
|
color: var(--text-muted);
|
|
|
|
|
font-size: 1.125rem;
|
|
|
|
|
background: none;
|
|
|
|
|
border: none;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.emoji-toggle-btn:hover {
|
|
|
|
|
color: var(--text-primary);
|
|
|
|
|
}
|
|
|
|
|
|
2026-06-14 09:48:10 +02:00
|
|
|
body:has(.page-messages) {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
height: 100dvh;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
|
2026-05-11 05:30:51 +02:00
|
|
|
.page:has(.page-messages) {
|
|
|
|
|
padding-top: 0;
|
2026-06-14 09:48:10 +02:00
|
|
|
padding-bottom: 0;
|
|
|
|
|
flex: 1 1 auto;
|
|
|
|
|
min-height: 0;
|
2026-06-15 01:00:30 +02:00
|
|
|
width: 100%;
|
2026-06-14 09:48:10 +02:00
|
|
|
display: flex;
|
2026-05-11 05:30:51 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.modal-overlay {
|
|
|
|
|
display: none;
|
|
|
|
|
position: fixed;
|
|
|
|
|
inset: 0;
|
|
|
|
|
background: rgba(0, 0, 0, 0.7);
|
|
|
|
|
z-index: 2000;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.modal-overlay.visible {
|
|
|
|
|
display: flex;
|
|
|
|
|
}
|
|
|
|
|
|
2026-06-09 16:06:02 +02:00
|
|
|
.topnav,
|
|
|
|
|
.topnav-mobile-overlay,
|
|
|
|
|
.topnav-mobile-panel,
|
|
|
|
|
.modal-overlay,
|
|
|
|
|
.dialog-overlay,
|
|
|
|
|
.context-menu,
|
|
|
|
|
.dp-toast-host,
|
|
|
|
|
.feed-fab,
|
2026-06-11 20:52:56 +02:00
|
|
|
.lightbox-overlay {
|
2026-06-09 16:06:02 +02:00
|
|
|
will-change: transform;
|
|
|
|
|
}
|
|
|
|
|
|
feat: add responsive layout with media queries for mobile and tablet breakpoints
Implement responsive design adjustments across admin, auth, base, feed, gists, landing, messages, news, notifications, post, profile, projects, and services CSS files with collapsible sidebar, touch-friendly navigation, and reordered content sections for screen widths below 768px and 480px. Add hamburger menu toggle, mobile overlay panel, and back button for messages view in Application.js.
2026-05-16 01:34:45 +02:00
|
|
|
@media (max-width: 480px) {
|
|
|
|
|
.modal-card {
|
|
|
|
|
margin: 0.5rem;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media (max-width: 360px) {
|
|
|
|
|
.page {
|
2026-06-06 16:31:42 +02:00
|
|
|
padding: 0.5rem;
|
feat: add responsive layout with media queries for mobile and tablet breakpoints
Implement responsive design adjustments across admin, auth, base, feed, gists, landing, messages, news, notifications, post, profile, projects, and services CSS files with collapsible sidebar, touch-friendly navigation, and reordered content sections for screen widths below 768px and 480px. Add hamburger menu toggle, mobile overlay panel, and back button for messages view in Application.js.
2026-05-16 01:34:45 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.card {
|
|
|
|
|
padding: 0.75rem;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2026-05-11 05:30:51 +02:00
|
|
|
.breadcrumb {
|
|
|
|
|
max-width: var(--max-content);
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
padding: 0.5rem 1rem;
|
|
|
|
|
padding-top: calc(var(--nav-height) + 0.5rem);
|
|
|
|
|
font-size: 0.8125rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.breadcrumb ol {
|
|
|
|
|
list-style: none;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
gap: 0.375rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.breadcrumb li {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
gap: 0.375rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.breadcrumb li + li::before {
|
|
|
|
|
content: "/";
|
|
|
|
|
color: var(--text-muted);
|
|
|
|
|
font-size: 0.75rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.breadcrumb a {
|
|
|
|
|
color: var(--text-secondary);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.breadcrumb a:hover {
|
|
|
|
|
color: var(--accent);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.breadcrumb [aria-current="page"] {
|
|
|
|
|
color: var(--text-muted);
|
|
|
|
|
}
|
|
|
|
|
|
2026-05-11 07:02:06 +02:00
|
|
|
.site-footer {
|
|
|
|
|
border-top: 1px solid var(--border);
|
|
|
|
|
margin-top: 2rem;
|
|
|
|
|
padding: 1rem;
|
|
|
|
|
}
|
|
|
|
|
.footer-inner {
|
|
|
|
|
max-width: var(--max-content);
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
feat: add api key auth, devii agent, openai gateway, and admin service management
This commit introduces a comprehensive set of new features including API key authentication with CLI management commands (get, reset, backfill), a Devii agentic assistant with WebSocket terminal and session bootstrap, an OpenAI-compatible LLM gateway service, and an admin service management panel. It also adds Playwright browser automation for bot support, configures internal gateway URLs, refactors content editing/deletion to support JSON API responses, and updates documentation across AGENTS.md, README.md, and the developer docs site.
2026-06-08 17:38:33 +02:00
|
|
|
justify-content: center;
|
2026-05-11 07:02:06 +02:00
|
|
|
font-size: 0.8125rem;
|
|
|
|
|
}
|
|
|
|
|
.footer-copy {
|
|
|
|
|
color: var(--text-muted);
|
|
|
|
|
}
|
|
|
|
|
.footer-links {
|
|
|
|
|
display: flex;
|
feat: add api key auth, devii agent, openai gateway, and admin service management
This commit introduces a comprehensive set of new features including API key authentication with CLI management commands (get, reset, backfill), a Devii agentic assistant with WebSocket terminal and session bootstrap, an OpenAI-compatible LLM gateway service, and an admin service management panel. It also adds Playwright browser automation for bot support, configures internal gateway URLs, refactors content editing/deletion to support JSON API responses, and updates documentation across AGENTS.md, README.md, and the developer docs site.
2026-06-08 17:38:33 +02:00
|
|
|
flex-wrap: wrap;
|
|
|
|
|
justify-content: center;
|
2026-05-11 07:02:06 +02:00
|
|
|
gap: 1rem;
|
|
|
|
|
}
|
|
|
|
|
.footer-links a {
|
|
|
|
|
color: var(--text-muted);
|
|
|
|
|
}
|
|
|
|
|
.footer-links a:hover {
|
|
|
|
|
color: var(--text-primary);
|
|
|
|
|
}
|
|
|
|
|
|
2026-05-11 05:30:51 +02:00
|
|
|
.sr-only {
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 1px;
|
|
|
|
|
height: 1px;
|
|
|
|
|
padding: 0;
|
|
|
|
|
margin: -1px;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
clip: rect(0, 0, 0, 0);
|
|
|
|
|
border: 0;
|
|
|
|
|
}
|
|
|
|
|
|
2026-05-16 01:56:07 +02:00
|
|
|
|
|
|
|
|
@media (max-width: 1024px) {
|
feat: add responsive layout with media queries for mobile and tablet breakpoints
Implement responsive design adjustments across admin, auth, base, feed, gists, landing, messages, news, notifications, post, profile, projects, and services CSS files with collapsible sidebar, touch-friendly navigation, and reordered content sections for screen widths below 768px and 480px. Add hamburger menu toggle, mobile overlay panel, and back button for messages view in Application.js.
2026-05-16 01:34:45 +02:00
|
|
|
.topnav-links {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.topnav-hamburger {
|
|
|
|
|
display: inline-flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.topnav-user-info {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.topnav-inner {
|
|
|
|
|
gap: 0.5rem;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2026-05-16 01:56:07 +02:00
|
|
|
|
|
|
|
|
@media (max-width: 1024px) {
|
2026-05-11 05:30:51 +02:00
|
|
|
.breadcrumb {
|
|
|
|
|
padding: 0.375rem 0.5rem;
|
|
|
|
|
padding-top: calc(var(--nav-height) + 0.375rem);
|
|
|
|
|
font-size: 0.75rem;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2026-05-16 01:56:07 +02:00
|
|
|
|
|
|
|
|
@media (max-width: 1024px) {
|
2026-05-10 09:08:12 +02:00
|
|
|
.page {
|
|
|
|
|
padding: 0.5rem;
|
|
|
|
|
}
|
|
|
|
|
}
|
feat: add responsive layout with media queries for mobile and tablet breakpoints
Implement responsive design adjustments across admin, auth, base, feed, gists, landing, messages, news, notifications, post, profile, projects, and services CSS files with collapsible sidebar, touch-friendly navigation, and reordered content sections for screen widths below 768px and 480px. Add hamburger menu toggle, mobile overlay panel, and back button for messages view in Application.js.
2026-05-16 01:34:45 +02:00
|
|
|
|
|
|
|
|
@media (max-width: 480px) {
|
|
|
|
|
.topnav-inner {
|
|
|
|
|
padding: 0 0.5rem;
|
|
|
|
|
gap: 0.25rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.topnav-logo {
|
|
|
|
|
font-size: 1.125rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.topnav-right {
|
|
|
|
|
gap: 0.375rem;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media (max-width: 360px) {
|
|
|
|
|
.topnav-logo {
|
|
|
|
|
font-size: 1rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.topnav-icon {
|
|
|
|
|
font-size: 1.125rem;
|
|
|
|
|
padding: 0.25rem;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media (hover: none) and (pointer: coarse) {
|
|
|
|
|
.post-action-btn,
|
|
|
|
|
.feed-nav-btn,
|
|
|
|
|
.profile-tab,
|
|
|
|
|
.sidebar-link,
|
|
|
|
|
.topnav-link,
|
2026-06-05 18:18:11 +02:00
|
|
|
.topnav-mobile-link,
|
|
|
|
|
.dropdown-item,
|
|
|
|
|
.btn,
|
|
|
|
|
.comment-form-submit {
|
feat: add responsive layout with media queries for mobile and tablet breakpoints
Implement responsive design adjustments across admin, auth, base, feed, gists, landing, messages, news, notifications, post, profile, projects, and services CSS files with collapsible sidebar, touch-friendly navigation, and reordered content sections for screen widths below 768px and 480px. Add hamburger menu toggle, mobile overlay panel, and back button for messages view in Application.js.
2026-05-16 01:34:45 +02:00
|
|
|
min-height: 44px;
|
|
|
|
|
}
|
|
|
|
|
|
2026-06-05 18:18:11 +02:00
|
|
|
.topnav-icon,
|
|
|
|
|
.emoji-toggle-btn {
|
|
|
|
|
min-width: 44px;
|
|
|
|
|
min-height: 44px;
|
|
|
|
|
display: inline-flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dropdown-item {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
|
feat: add responsive layout with media queries for mobile and tablet breakpoints
Implement responsive design adjustments across admin, auth, base, feed, gists, landing, messages, news, notifications, post, profile, projects, and services CSS files with collapsible sidebar, touch-friendly navigation, and reordered content sections for screen widths below 768px and 480px. Add hamburger menu toggle, mobile overlay panel, and back button for messages view in Application.js.
2026-05-16 01:34:45 +02:00
|
|
|
.modal-card input,
|
|
|
|
|
.modal-card textarea,
|
|
|
|
|
.modal-card select {
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media (max-width: 480px) {
|
|
|
|
|
.post-detail-title {
|
|
|
|
|
font-size: 1.25rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.post-detail-content {
|
|
|
|
|
font-size: 0.875rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.comment-text {
|
|
|
|
|
font-size: 0.8125rem;
|
|
|
|
|
}
|
2026-06-05 18:18:11 +02:00
|
|
|
|
|
|
|
|
.grid-2col {
|
|
|
|
|
grid-template-columns: 1fr;
|
|
|
|
|
}
|
feat: add responsive layout with media queries for mobile and tablet breakpoints
Implement responsive design adjustments across admin, auth, base, feed, gists, landing, messages, news, notifications, post, profile, projects, and services CSS files with collapsible sidebar, touch-friendly navigation, and reordered content sections for screen widths below 768px and 480px. Add hamburger menu toggle, mobile overlay panel, and back button for messages view in Application.js.
2026-05-16 01:34:45 +02:00
|
|
|
}
|
2026-05-27 22:03:12 +02:00
|
|
|
|
|
|
|
|
.card-link-host {
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.card-link {
|
|
|
|
|
position: absolute;
|
|
|
|
|
inset: 0;
|
|
|
|
|
z-index: 1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.card-link-host a:not(.card-link),
|
|
|
|
|
.card-link-host button,
|
|
|
|
|
.card-link-host form {
|
|
|
|
|
position: relative;
|
|
|
|
|
z-index: 2;
|
|
|
|
|
}
|
feat: add leaderboard router, gamification backfill, and shared content creation helpers
Introduce a new `/leaderboard` endpoint ranking top 50 members by total stars, wire it into the app router and documentation. Implement `_backfill_gamification()` in `database.py` to compute XP/levels for existing accounts from prior posts, comments, votes, and follows. Extract `is_owner()`, `create_content_item()`, and `detail_context()` into `content.py` to centralize content creation, reward awarding, mention notifications, and attachment linking. Update comment creation/deletion in `comments.py` to use `award_rewards()` with `XP_COMMENT` and the new `is_owner()` helper. Add shared template partials documentation for vote bars, star buttons, post headers, and topic selectors to `AGENTS.md`.
2026-05-30 20:16:39 +02:00
|
|
|
|
|
|
|
|
.vote-star {
|
|
|
|
|
display: inline-flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
gap: 0.25rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.vote-star::before {
|
|
|
|
|
content: "\2606";
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.vote-star.voted::before {
|
|
|
|
|
content: "\2605";
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.vote-star.voted {
|
|
|
|
|
color: var(--warning);
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
}
|
feat: add api key auth, devii agent, openai gateway, and admin service management
This commit introduces a comprehensive set of new features including API key authentication with CLI management commands (get, reset, backfill), a Devii agentic assistant with WebSocket terminal and session bootstrap, an OpenAI-compatible LLM gateway service, and an admin service management panel. It also adds Playwright browser automation for bot support, configures internal gateway URLs, refactors content editing/deletion to support JSON API responses, and updates documentation across AGENTS.md, README.md, and the developer docs site.
2026-06-08 17:38:33 +02:00
|
|
|
|
|
|
|
|
[aria-disabled="true"],
|
|
|
|
|
.login-required {
|
|
|
|
|
cursor: not-allowed;
|
|
|
|
|
opacity: 0.55;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.login-hint {
|
|
|
|
|
font-size: 0.8125rem;
|
|
|
|
|
color: var(--text-muted);
|
|
|
|
|
text-decoration: underline;
|
|
|
|
|
}
|
