style: UI consistency — tab bar, calendar, button classes, consistent element sizing

Made-with: Cursor
This commit is contained in:
cottongin
2026-04-06 17:41:21 -04:00
parent 8d58fa92b6
commit 45e94d68da
3 changed files with 100 additions and 1 deletions

View File

@@ -36,3 +36,100 @@
.hidden { display: none !important; }
nav .brand { font-weight: bold; font-size: 1.1rem; }
/* Tab bar */
.tab-bar {
display: flex;
gap: 0;
border-bottom: 2px solid var(--pico-primary);
margin-bottom: 1rem;
}
.tab {
padding: 0.5rem 1.2rem;
background: none;
border: none;
border-bottom: 3px solid transparent;
cursor: pointer;
font-size: 0.95rem;
color: var(--pico-muted-color);
}
.tab.active {
color: var(--pico-primary);
border-bottom-color: var(--pico-primary);
font-weight: 600;
}
.tab:hover { color: var(--pico-primary); }
.tab-content { display: none; }
.tab-content.active { display: block; }
/* Calendar widget */
.calendar-widget { margin-bottom: 1.5rem; }
.calendar-nav {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 0.5rem;
}
.calendar-nav button { padding: 0.3rem 0.8rem; }
.calendar-grid {
width: 100%;
border-collapse: collapse;
font-size: 0.9rem;
}
.calendar-grid th,
.calendar-grid td {
text-align: center;
padding: 0.3rem;
}
.cal-dim { opacity: 0.4; }
.cal-wk {
font-weight: 600;
font-size: 0.85rem;
color: var(--pico-primary);
cursor: pointer;
}
.cal-week, .cal-week-multi { cursor: pointer; }
.cal-week:hover, .cal-week-multi:hover {
background: var(--pico-secondary-hover-background);
}
.cal-week.selected, .cal-week-multi.selected {
background: var(--pico-primary-background);
color: var(--pico-primary-inverse);
}
.cal-week-multi.in-range {
background: var(--pico-primary-focus);
color: var(--pico-primary-inverse);
}
/* Publish page */
.publish-summary {
padding: 0.5rem;
border-radius: var(--pico-border-radius);
background: var(--pico-card-background-color);
margin-bottom: 1rem;
}
.publish-actions {
display: flex;
gap: 1rem;
align-items: center;
margin-top: 1rem;
}
.article-check-item,
.article-radio-item {
display: flex;
align-items: flex-start;
gap: 0.5rem;
padding: 0.4rem 0;
border-bottom: 1px solid var(--pico-muted-border-color);
}
/* Consistent interactive elements */
button, [role="button"],
input[type="submit"],
select, input[type="text"],
input[type="number"],
input[type="search"],
input[type="date"],
input[type="url"] {
font-size: 0.95rem;
}