hnzio/mood-tracking
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 7 Wiki Activity

second commit

Browse Source
This commit is contained in:
Florian Heinz
2026-04-11 19:13:40 +02:00
parent 58bcc8f0f3
commit 87f7859017
25 changed files with 488 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/app.css
+182 -3
View File
@@ -19,6 +19,9 @@
--radius-sm: 14px;
--panel-blur: 28px;
--font-ui: "SF Pro Display", "Avenir Next", "Segoe UI Variable", "Helvetica Neue", system-ui, sans-serif;
--track-accent: rgba(139, 228, 255, 0.34);
--track-surface: rgba(255, 255, 255, 0.08);
--track-glow: rgba(139, 228, 255, 0.18);
}
*,
@@ -110,7 +113,7 @@ button {
.sidebar {
display: flex;
flex-direction: column;
justify-content: space-between;
justify-content: flex-start;
padding: 1.35rem;
border-radius: var(--radius-xl);
min-height: calc(100vh - 2.5rem);
@@ -153,6 +156,24 @@ button {
letter-spacing: 0.01em;
}
.meta-pill--button {
cursor: pointer;
}
.topbar-date-form {
display: inline-flex;
}
.topbar-date-input {
width: auto;
min-height: 2.2rem;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 999px;
padding: 0.45rem 0.9rem;
background: rgba(255, 255, 255, 0.08);
color: var(--text);
}
.chart-chip--warm {
background: rgba(255, 173, 124, 0.12);
}
@@ -209,6 +230,9 @@ button {
}
.main-nav a {
display: flex;
align-items: center;
gap: 0.8rem;
padding: 0.9rem 1rem;
border-radius: 18px;
color: var(--muted);
@@ -225,6 +249,14 @@ button {
.sidebar-footer {
display: grid;
gap: 0.85rem;
margin-top: auto;
padding-top: 1.2rem;
}
.nav-icon {
width: 1.1rem;
height: 1.1rem;
opacity: 0.9;
}
.user-chip {
@@ -497,6 +529,13 @@ button {
gap: 1rem;
}
.section-head__actions {
display: flex;
gap: 0.7rem;
align-items: center;
flex-wrap: wrap;
}
.field-grid--single {
grid-template-columns: 1fr;
}
@@ -560,8 +599,9 @@ input[type="range"] {
.range-card {
padding: 1rem;
border-radius: var(--radius-md);
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.1);
background: var(--track-surface);
border: 1px solid var(--track-accent);
transition: border-color 220ms ease, background 220ms ease, transform 220ms ease, box-shadow 220ms ease;
}
.range-card output {
@@ -570,6 +610,66 @@ input[type="range"] {
font-weight: 700;
}
.preview-card {
position: relative;
overflow: hidden;
border-color: var(--track-accent);
box-shadow: 0 24px 70px rgba(4, 18, 31, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.preview-card::before {
content: "";
position: absolute;
inset: auto -12% -25% auto;
width: 14rem;
height: 14rem;
border-radius: 50%;
background: radial-gradient(circle, var(--track-glow), transparent 70%);
pointer-events: none;
transition: background 220ms ease, transform 220ms ease;
}
.preview-status {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 0.8rem;
}
.preview-status__icon {
width: 4.5rem;
height: 4.5rem;
border-radius: 20px;
display: grid;
place-items: center;
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.preview-status__icon img {
width: 2.3rem;
height: 2.3rem;
}
.preview-status__label {
margin: 0;
font-size: 1.55rem;
font-weight: 750;
}
.preview-scoreline {
margin: 0 0 1rem;
color: var(--muted);
font-size: 0.95rem;
}
.preview-scoreline span {
color: var(--text);
font-size: 1.2rem;
font-weight: 700;
}
.component-list,
.detail-grid {
display: grid;
@@ -684,6 +784,17 @@ input[type="range"] {
text-align: right;
}
.archive-item__actions {
display: flex;
gap: 0.55rem;
flex-wrap: wrap;
}
.archive-action {
min-height: 2.4rem;
padding-inline: 0.85rem;
}
.note-box {
padding: 1rem;
border-radius: 18px;
@@ -740,6 +851,68 @@ input[type="range"] {
width: fit-content;
}
.page-track[data-track-mood="storm"] {
--track-accent: rgba(255, 143, 143, 0.38);
--track-surface: rgba(255, 143, 143, 0.08);
--track-glow: rgba(255, 126, 126, 0.22);
}
.page-track[data-track-mood="heavy"] {
--track-accent: rgba(255, 191, 141, 0.34);
--track-surface: rgba(255, 191, 141, 0.08);
--track-glow: rgba(255, 191, 141, 0.18);
}
.page-track[data-track-mood="steady"] {
--track-accent: rgba(139, 228, 255, 0.34);
--track-surface: rgba(255, 255, 255, 0.08);
--track-glow: rgba(139, 228, 255, 0.18);
}
.page-track[data-track-mood="bright"] {
--track-accent: rgba(143, 243, 198, 0.34);
--track-surface: rgba(143, 243, 198, 0.08);
--track-glow: rgba(143, 243, 198, 0.2);
}
.page-track[data-track-mood="radiant"] {
--track-accent: rgba(255, 233, 140, 0.35);
--track-surface: rgba(255, 233, 140, 0.1);
--track-glow: rgba(255, 233, 140, 0.22);
}
.page-track[data-track-mood] .aurora-one,
.page-track[data-track-mood] .aurora-two,
.page-track[data-track-mood] .range-card,
.page-track[data-track-mood] .preview-card,
.page-track[data-track-mood] .preview-card::before {
transition: background 220ms ease, opacity 220ms ease, transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}
.page-track[data-track-mood="storm"] .aurora-one,
.page-track[data-track-mood="storm"] .aurora-two {
opacity: 0.5;
background: radial-gradient(circle, rgba(255, 128, 128, 0.32), transparent 70%);
}
.page-track[data-track-mood="heavy"] .aurora-one,
.page-track[data-track-mood="heavy"] .aurora-two {
opacity: 0.55;
background: radial-gradient(circle, rgba(255, 192, 128, 0.3), transparent 70%);
}
.page-track[data-track-mood="bright"] .aurora-one,
.page-track[data-track-mood="bright"] .aurora-two {
opacity: 0.72;
background: radial-gradient(circle, rgba(127, 243, 187, 0.3), transparent 70%);
}
.page-track[data-track-mood="radiant"] .aurora-one,
.page-track[data-track-mood="radiant"] .aurora-two {
opacity: 0.78;
background: radial-gradient(circle, rgba(255, 228, 122, 0.32), transparent 70%);
}
@media (max-width: 1100px) {
.shell {
grid-template-columns: 1fr;
@@ -778,6 +951,12 @@ input[type="range"] {
overflow-x: auto;
padding-bottom: 0.4rem;
}
.archive-item,
.preview-status {
flex-direction: column;
align-items: flex-start;
}
}
@media (max-width: 640px) {