mirror of
https://github.com/codybontecou/timemd-visualizer.git
synced 2026-07-22 07:04:17 +00:00
2380 lines
44 KiB
CSS
2380 lines
44 KiB
CSS
.timemd-view {
|
|
padding: 16px 20px 24px;
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.timemd-view-header {
|
|
display: flex;
|
|
align-items: baseline;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
margin-bottom: 16px;
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
.timemd-view-title {
|
|
margin: 0;
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
.timemd-view-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.timemd-view-loaded {
|
|
color: var(--text-muted);
|
|
font-size: 0.85em;
|
|
}
|
|
|
|
.timemd-btn {
|
|
padding: 4px 12px;
|
|
border-radius: 4px;
|
|
border: 1px solid var(--background-modifier-border);
|
|
background: var(--background-secondary);
|
|
cursor: pointer;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.timemd-btn:hover {
|
|
background: var(--background-modifier-hover);
|
|
}
|
|
|
|
.timemd-empty,
|
|
.timemd-empty-inline {
|
|
color: var(--text-muted);
|
|
padding: 24px;
|
|
text-align: center;
|
|
}
|
|
|
|
.timemd-empty-inline {
|
|
padding: 12px;
|
|
}
|
|
|
|
.timemd-body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
}
|
|
|
|
.timemd-stats-row {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
|
gap: 12px;
|
|
}
|
|
|
|
.timemd-stat {
|
|
background: var(--background-secondary);
|
|
border-radius: 8px;
|
|
padding: 12px 14px;
|
|
border: 1px solid var(--background-modifier-border);
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.timemd-stat-label {
|
|
color: var(--text-muted);
|
|
font-size: 0.8em;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.timemd-stat-value {
|
|
font-size: 1.3em;
|
|
font-weight: 600;
|
|
margin-top: 4px;
|
|
color: var(--text-normal);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.timemd-card {
|
|
background: var(--background-secondary);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 8px;
|
|
padding: 14px 16px;
|
|
}
|
|
|
|
.timemd-card h3 {
|
|
margin: 0 0 12px 0;
|
|
font-size: 1em;
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.timemd-columns {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
|
gap: 16px;
|
|
}
|
|
|
|
.timemd-chart {
|
|
display: block;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.timemd-chart-grid {
|
|
stroke: var(--background-modifier-border);
|
|
stroke-dasharray: 2 2;
|
|
}
|
|
|
|
.timemd-axis-label {
|
|
fill: var(--text-muted);
|
|
font-size: 11px;
|
|
font-family: var(--font-interface);
|
|
}
|
|
|
|
.timemd-heatmap-cell {
|
|
stroke: var(--background-primary);
|
|
stroke-width: 1;
|
|
}
|
|
|
|
.timemd-bars {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
|
|
.timemd-bar-row {
|
|
display: grid;
|
|
grid-template-columns: minmax(100px, 1fr) 2fr minmax(70px, auto);
|
|
align-items: center;
|
|
gap: 10px;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.timemd-bar-label {
|
|
color: var(--text-normal);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.timemd-bar-track {
|
|
background: var(--background-modifier-border);
|
|
border-radius: 4px;
|
|
height: 10px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.timemd-bar-fill {
|
|
background: var(--timemd-accent, var(--interactive-accent));
|
|
height: 100%;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.timemd-bar-value {
|
|
color: var(--text-muted);
|
|
text-align: right;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.timemd-table-wrap {
|
|
max-height: 600px;
|
|
overflow: auto;
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.timemd-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.timemd-table thead th {
|
|
position: sticky;
|
|
top: 0;
|
|
background: var(--background-secondary);
|
|
text-align: left;
|
|
padding: 8px 10px;
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.timemd-table tbody td {
|
|
padding: 6px 10px;
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
}
|
|
|
|
.timemd-table tbody tr:nth-child(even) {
|
|
background: var(--background-primary-alt);
|
|
}
|
|
|
|
.timemd-toolbar {
|
|
display: flex;
|
|
gap: 12px;
|
|
align-items: center;
|
|
}
|
|
|
|
.timemd-filter-input {
|
|
flex: 1;
|
|
padding: 6px 10px;
|
|
border-radius: 4px;
|
|
border: 1px solid var(--background-modifier-border);
|
|
background: var(--background-primary);
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.timemd-toolbar-count {
|
|
color: var(--text-muted);
|
|
font-size: 0.85em;
|
|
}
|
|
|
|
.timemd-months {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
|
gap: 16px;
|
|
}
|
|
|
|
.timemd-month-title {
|
|
font-weight: 600;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.timemd-month-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(7, 1fr);
|
|
gap: 3px;
|
|
}
|
|
|
|
.timemd-month-dow {
|
|
text-align: center;
|
|
color: var(--text-muted);
|
|
font-size: 0.75em;
|
|
padding-bottom: 4px;
|
|
}
|
|
|
|
.timemd-month-day {
|
|
aspect-ratio: 1 / 1;
|
|
border-radius: 4px;
|
|
padding: 2px 4px;
|
|
font-size: 0.75em;
|
|
color: var(--text-normal);
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.timemd-month-day-empty {
|
|
background: transparent;
|
|
}
|
|
|
|
.timemd-month-day-num {
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.timemd-settings-stats {
|
|
margin-top: 20px;
|
|
color: var(--text-muted);
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.timemd-warning {
|
|
color: var(--text-error);
|
|
}
|
|
|
|
.timemd-skipped-banner {
|
|
background: var(--background-modifier-error-hover, rgba(229, 79, 79, 0.1));
|
|
border: 1px solid var(--text-error);
|
|
border-radius: 6px;
|
|
padding: 10px 12px;
|
|
margin-bottom: 12px;
|
|
font-size: 0.85em;
|
|
}
|
|
|
|
.timemd-skipped-title {
|
|
font-weight: 600;
|
|
color: var(--text-error);
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.timemd-skipped-item {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.timemd-skipped-path {
|
|
font-family: var(--font-monospace);
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.timemd-skipped-reason {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.timemd-embed {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
padding: 12px 14px;
|
|
background: var(--background-secondary);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 8px;
|
|
margin: 8px 0;
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.timemd-embed.timemd-embed-bare {
|
|
background: none;
|
|
border: none;
|
|
padding: 0;
|
|
margin: 8px 0;
|
|
}
|
|
|
|
.timemd-embed-bare .timemd-projects-donut-wrap {
|
|
padding: 0;
|
|
}
|
|
|
|
.timemd-embed-title {
|
|
margin: 0 0 4px 0;
|
|
font-size: 0.95em;
|
|
color: var(--text-muted);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
|
|
.timemd-embed-empty {
|
|
color: var(--text-muted);
|
|
font-size: 0.9em;
|
|
padding: 8px 0;
|
|
}
|
|
|
|
.timemd-embed-chart,
|
|
.timemd-embed-bars {
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.timemd-stat-card {
|
|
padding: 16px 18px;
|
|
background: var(--background-primary-alt);
|
|
border-radius: 8px;
|
|
border: 1px solid var(--background-modifier-border);
|
|
}
|
|
|
|
.timemd-stat-value-large {
|
|
font-size: 2em;
|
|
font-weight: 700;
|
|
margin-top: 6px;
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.timemd-session-list {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
|
|
.timemd-session-item {
|
|
font-size: 0.88em;
|
|
padding: 4px 6px;
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
}
|
|
|
|
.timemd-session-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.timemd-session-app {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.timemd-session-sep {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.timemd-session-duration {
|
|
color: var(--text-muted);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
/* =============================================================
|
|
Projects view
|
|
============================================================= */
|
|
/* Projects view — recreates the time.md desktop "Projects" tab */
|
|
|
|
.timemd-projects {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
}
|
|
|
|
.timemd-projects-header {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
}
|
|
|
|
.timemd-projects-titlewrap {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
|
|
.timemd-projects-title {
|
|
margin: 0;
|
|
font-size: 1.6em;
|
|
font-weight: 700;
|
|
color: var(--text-normal);
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
.timemd-projects-subtitle {
|
|
color: var(--text-muted);
|
|
font-size: 0.78em;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.timemd-projects-toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
}
|
|
|
|
.timemd-projects-search {
|
|
flex: 1;
|
|
max-width: 460px;
|
|
padding: 7px 12px;
|
|
border-radius: 6px;
|
|
border: 1px solid var(--background-modifier-border);
|
|
background: var(--background-secondary);
|
|
color: var(--text-normal);
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.timemd-projects-search:focus {
|
|
outline: none;
|
|
border-color: var(--interactive-accent);
|
|
}
|
|
|
|
.timemd-projects-expand-btn {
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--text-muted);
|
|
font-size: 0.85em;
|
|
cursor: pointer;
|
|
padding: 6px 8px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.timemd-projects-expand-btn:hover {
|
|
background: var(--background-modifier-hover);
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.timemd-projects-grid {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
|
|
gap: 24px;
|
|
align-items: start;
|
|
}
|
|
|
|
@media (max-width: 720px) {
|
|
.timemd-projects-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
.timemd-projects-section-label {
|
|
color: var(--text-muted);
|
|
font-size: 0.75em;
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
font-weight: 600;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.timemd-projects-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.timemd-projects-row {
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
}
|
|
|
|
.timemd-projects-row:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.timemd-projects-row-header {
|
|
display: grid;
|
|
grid-template-columns:
|
|
16px /* caret */
|
|
12px /* color dot */
|
|
20px /* folder */
|
|
minmax(120px, 1.4fr) /* category name */
|
|
minmax(0, 1fr) /* bar */
|
|
auto /* time */
|
|
auto; /* pct */
|
|
gap: 10px;
|
|
align-items: center;
|
|
padding: 10px 6px;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
|
|
.timemd-projects-row-header:hover {
|
|
background: var(--background-modifier-hover);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.timemd-projects-caret {
|
|
color: var(--text-muted);
|
|
font-size: 0.85em;
|
|
text-align: center;
|
|
width: 16px;
|
|
}
|
|
|
|
.timemd-projects-dot {
|
|
display: inline-block;
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.timemd-projects-folder {
|
|
font-size: 1em;
|
|
line-height: 1;
|
|
}
|
|
|
|
.timemd-projects-name {
|
|
font-weight: 500;
|
|
color: var(--text-normal);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.timemd-projects-count {
|
|
color: var(--text-muted);
|
|
font-size: 0.85em;
|
|
}
|
|
|
|
.timemd-projects-bar-track {
|
|
background: var(--background-modifier-border);
|
|
border-radius: 4px;
|
|
height: 6px;
|
|
overflow: hidden;
|
|
min-width: 60px;
|
|
}
|
|
|
|
.timemd-projects-bar-fill {
|
|
height: 100%;
|
|
border-radius: 4px;
|
|
background: var(--interactive-accent);
|
|
transition: width 120ms ease-out;
|
|
}
|
|
|
|
.timemd-projects-time {
|
|
color: var(--text-normal);
|
|
font-weight: 600;
|
|
font-variant-numeric: tabular-nums;
|
|
min-width: 64px;
|
|
text-align: right;
|
|
}
|
|
|
|
.timemd-projects-pct {
|
|
color: var(--text-muted);
|
|
font-variant-numeric: tabular-nums;
|
|
min-width: 38px;
|
|
text-align: right;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.timemd-projects-row-detail {
|
|
padding: 6px 12px 14px 56px;
|
|
}
|
|
|
|
.timemd-projects-fallback {
|
|
color: var(--text-muted);
|
|
font-size: 0.85em;
|
|
font-style: italic;
|
|
padding: 8px 0;
|
|
}
|
|
|
|
/* Right column */
|
|
|
|
.timemd-projects-right,
|
|
.timemd-projects-distribution-embed {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
}
|
|
|
|
.timemd-projects-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.timemd-projects-donut-wrap {
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 4px 0 14px;
|
|
}
|
|
|
|
.timemd-projects-donut {
|
|
display: block;
|
|
}
|
|
|
|
.timemd-projects-donut-slice {
|
|
cursor: pointer;
|
|
transition: opacity 0.15s ease;
|
|
}
|
|
|
|
.timemd-projects-donut.is-hovering .timemd-projects-donut-slice {
|
|
opacity: 0.3;
|
|
}
|
|
|
|
.timemd-projects-donut.is-hovering .timemd-projects-donut-slice.is-hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
.timemd-projects-donut-center-label {
|
|
fill: var(--text-muted);
|
|
font-size: 11px;
|
|
font-family: var(--font-interface);
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.timemd-projects-donut-center-value {
|
|
fill: var(--text-normal);
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
font-family: var(--font-interface);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.timemd-projects-donut-center-pct {
|
|
fill: var(--text-muted);
|
|
font-size: 11px;
|
|
font-family: var(--font-interface);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.timemd-projects-legend-item.is-dim {
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.timemd-projects-legend-item.is-active {
|
|
opacity: 1;
|
|
}
|
|
|
|
.timemd-projects-legend {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.timemd-projects-legend-item {
|
|
display: grid;
|
|
grid-template-columns: 12px minmax(0, 1fr) auto;
|
|
gap: 10px;
|
|
align-items: center;
|
|
font-size: 0.9em;
|
|
transition: opacity 0.15s ease;
|
|
}
|
|
|
|
.timemd-projects-legend-name {
|
|
color: var(--text-normal);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.timemd-projects-legend-time {
|
|
color: var(--text-muted);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.timemd-projects-stats {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
|
|
.timemd-projects-stat-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: baseline;
|
|
padding: 4px 0;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.timemd-projects-stat-label {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.timemd-projects-stat-value {
|
|
color: var(--text-normal);
|
|
font-weight: 600;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
/* =============================================================
|
|
Web History view
|
|
============================================================= */
|
|
/* Web History view styles. All classes prefixed with timemd-history- */
|
|
|
|
.timemd-history {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
}
|
|
|
|
.timemd-history-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
gap: 16px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.timemd-history-header-left {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
|
|
.timemd-history-title {
|
|
font-size: 1.4em;
|
|
font-weight: 700;
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.timemd-history-subtitle {
|
|
color: var(--text-muted);
|
|
font-size: 0.78em;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.timemd-history-browsers {
|
|
display: inline-flex;
|
|
gap: 4px;
|
|
padding: 4px;
|
|
background: var(--background-secondary);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 8px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.timemd-history-pill {
|
|
background: transparent;
|
|
border: 1px solid transparent;
|
|
color: var(--text-muted);
|
|
padding: 4px 12px;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
font-size: 0.85em;
|
|
font-family: inherit;
|
|
}
|
|
|
|
.timemd-history-pill:hover {
|
|
background: var(--background-modifier-hover);
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.timemd-history-pill-active,
|
|
.timemd-history-pill-active:hover {
|
|
background: var(--background-primary);
|
|
border-color: var(--background-modifier-border);
|
|
color: var(--text-normal);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.timemd-history-stats {
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.timemd-history-stat {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
|
|
.timemd-history-stat-top {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.timemd-history-stat-icon {
|
|
width: 22px;
|
|
height: 22px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 6px;
|
|
background: var(--background-primary-alt);
|
|
color: var(--timemd-accent, var(--interactive-accent));
|
|
font-size: 0.85em;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.timemd-history-stat-label {
|
|
margin: 0;
|
|
}
|
|
|
|
.timemd-history-stat-value {
|
|
font-size: 1.5em;
|
|
font-weight: 700;
|
|
color: var(--text-normal);
|
|
margin-top: 0;
|
|
}
|
|
|
|
.timemd-history-tabs {
|
|
display: flex;
|
|
gap: 4px;
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
}
|
|
|
|
.timemd-history-tab {
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--text-muted);
|
|
padding: 8px 14px;
|
|
cursor: pointer;
|
|
font-size: 0.9em;
|
|
border-bottom: 2px solid transparent;
|
|
margin-bottom: -1px;
|
|
font-family: inherit;
|
|
}
|
|
|
|
.timemd-history-tab:hover {
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.timemd-history-tab-active,
|
|
.timemd-history-tab-active:hover {
|
|
color: var(--text-normal);
|
|
border-bottom-color: var(--timemd-accent, var(--interactive-accent));
|
|
font-weight: 600;
|
|
}
|
|
|
|
.timemd-history-tab-body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
|
|
.timemd-history-search {
|
|
display: flex;
|
|
width: 100%;
|
|
}
|
|
|
|
.timemd-history-search-input {
|
|
width: 100%;
|
|
}
|
|
|
|
.timemd-history-table-wrap {
|
|
max-height: 600px;
|
|
overflow: auto;
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.timemd-history-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font-size: 0.88em;
|
|
}
|
|
|
|
.timemd-history-table thead th {
|
|
position: sticky;
|
|
top: 0;
|
|
background: var(--background-secondary);
|
|
color: var(--text-muted);
|
|
text-align: left;
|
|
padding: 8px 12px;
|
|
font-size: 0.75em;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
}
|
|
|
|
.timemd-history-table tbody tr.timemd-history-row:nth-child(even) {
|
|
background: var(--background-primary-alt);
|
|
}
|
|
|
|
.timemd-history-table tbody td {
|
|
padding: 8px 12px;
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
vertical-align: top;
|
|
}
|
|
|
|
.timemd-history-table tbody tr.timemd-history-day-row td {
|
|
background: var(--background-primary);
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
padding-top: 12px;
|
|
padding-bottom: 6px;
|
|
}
|
|
|
|
.timemd-history-day-cell {
|
|
color: var(--timemd-accent, var(--interactive-accent));
|
|
font-size: 0.78em;
|
|
font-weight: 700;
|
|
letter-spacing: 0.1em;
|
|
}
|
|
|
|
.timemd-history-time {
|
|
color: var(--text-muted);
|
|
font-variant-numeric: tabular-nums;
|
|
white-space: nowrap;
|
|
width: 64px;
|
|
}
|
|
|
|
.timemd-history-title-cell {
|
|
max-width: 0;
|
|
min-width: 200px;
|
|
}
|
|
|
|
.timemd-history-row-title {
|
|
color: var(--text-normal);
|
|
font-weight: 500;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.timemd-history-row-url {
|
|
color: var(--text-muted);
|
|
font-size: 0.82em;
|
|
margin-top: 2px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.timemd-history-domain {
|
|
color: var(--text-muted);
|
|
font-size: 0.88em;
|
|
white-space: nowrap;
|
|
width: 1%;
|
|
}
|
|
|
|
.timemd-history-brc {
|
|
width: 36px;
|
|
text-align: center;
|
|
}
|
|
|
|
.timemd-history-browser-dot {
|
|
display: inline-block;
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background: var(--text-muted);
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.timemd-history-browser-safari {
|
|
background: #1da1f2;
|
|
opacity: 1;
|
|
}
|
|
|
|
.timemd-history-browser-chrome,
|
|
.timemd-history-browser-google-chrome {
|
|
background: #f4b400;
|
|
opacity: 1;
|
|
}
|
|
|
|
.timemd-history-browser-arc {
|
|
background: #ff6f4d;
|
|
opacity: 1;
|
|
}
|
|
|
|
.timemd-history-browser-firefox {
|
|
background: #ff7139;
|
|
opacity: 1;
|
|
}
|
|
|
|
.timemd-history-browser-edge,
|
|
.timemd-history-browser-microsoft-edge {
|
|
background: #0078d4;
|
|
opacity: 1;
|
|
}
|
|
|
|
.timemd-history-overflow {
|
|
color: var(--text-muted);
|
|
font-size: 0.85em;
|
|
padding: 6px 4px 0;
|
|
}
|
|
|
|
.timemd-history-bars {
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.timemd-history-domain-stats {
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.timemd-history-domain-section,
|
|
.timemd-history-classification {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
|
|
.timemd-history-section-heading {
|
|
display: flex;
|
|
align-items: baseline;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.timemd-history-section-title {
|
|
font-weight: 700;
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.timemd-history-section-note {
|
|
color: var(--text-muted);
|
|
font-size: 0.82em;
|
|
}
|
|
|
|
.timemd-history-domain-tiles {
|
|
display: grid;
|
|
grid-template-columns: repeat(8, minmax(0, 1fr));
|
|
grid-auto-rows: minmax(96px, auto);
|
|
gap: 10px;
|
|
}
|
|
|
|
.timemd-history-domain-tile {
|
|
min-width: 0;
|
|
padding: 12px;
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 10px;
|
|
background: linear-gradient(135deg, var(--background-secondary), var(--background-primary-alt));
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.timemd-history-domain-tile-1 {
|
|
grid-column: span 2;
|
|
min-height: 96px;
|
|
}
|
|
|
|
.timemd-history-domain-tile-2 {
|
|
grid-column: span 2;
|
|
min-height: 112px;
|
|
}
|
|
|
|
.timemd-history-domain-tile-3 {
|
|
grid-column: span 3;
|
|
min-height: 132px;
|
|
}
|
|
|
|
.timemd-history-domain-tile-4 {
|
|
grid-column: span 4;
|
|
min-height: 132px;
|
|
}
|
|
|
|
.timemd-history-domain-tile-top {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
}
|
|
|
|
.timemd-history-domain-tile-domain {
|
|
min-width: 0;
|
|
font-weight: 700;
|
|
color: var(--text-normal);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.timemd-history-domain-tile-class {
|
|
flex: 0 0 auto;
|
|
max-width: 45%;
|
|
padding: 2px 6px;
|
|
border-radius: 999px;
|
|
background: var(--background-primary);
|
|
color: var(--text-muted);
|
|
font-size: 0.72em;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.timemd-history-domain-tile-value {
|
|
font-size: 1.35em;
|
|
font-weight: 750;
|
|
color: var(--timemd-accent, var(--interactive-accent));
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.timemd-history-domain-tile-meta {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
color: var(--text-muted);
|
|
font-size: 0.78em;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.timemd-history-domain-tile-meta span {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.timemd-history-domain-tile-meta span:last-child {
|
|
text-align: right;
|
|
}
|
|
|
|
.timemd-history-classification .timemd-bars {
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.timemd-history-classification-chips {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
|
gap: 8px;
|
|
}
|
|
|
|
.timemd-history-classification-chip {
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 8px;
|
|
padding: 8px 10px;
|
|
background: var(--background-primary-alt);
|
|
}
|
|
|
|
.timemd-history-classification-chip-label {
|
|
font-weight: 650;
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.timemd-history-classification-chip-value {
|
|
margin-top: 2px;
|
|
color: var(--text-muted);
|
|
font-size: 0.82em;
|
|
}
|
|
|
|
.timemd-history-domain-table {
|
|
margin-top: 8px;
|
|
}
|
|
|
|
@media (max-width: 720px) {
|
|
.timemd-history-domain-tiles {
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.timemd-history-domain-tiles {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.timemd-history-domain-tiles .timemd-history-domain-tile {
|
|
grid-column: span 2;
|
|
}
|
|
}
|
|
|
|
.timemd-history-activity {
|
|
background: var(--background-secondary);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 8px;
|
|
padding: 16px;
|
|
}
|
|
|
|
.timemd-history-activity-chart {
|
|
display: grid;
|
|
grid-template-columns: repeat(24, 1fr);
|
|
gap: 4px;
|
|
height: 180px;
|
|
align-items: end;
|
|
}
|
|
|
|
.timemd-history-activity-col {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
height: 100%;
|
|
gap: 4px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.timemd-history-activity-bar {
|
|
flex: 0 0 auto;
|
|
background: var(--timemd-accent, var(--interactive-accent));
|
|
border-radius: 3px 3px 0 0;
|
|
min-height: 2px;
|
|
align-self: end;
|
|
width: 100%;
|
|
}
|
|
|
|
.timemd-history-activity-label {
|
|
color: var(--text-muted);
|
|
font-size: 0.7em;
|
|
text-align: center;
|
|
height: 12px;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.timemd-history-activity-summary {
|
|
margin-top: 12px;
|
|
color: var(--text-muted);
|
|
font-size: 0.85em;
|
|
text-align: center;
|
|
}
|
|
|
|
/* Embed-specific tweaks */
|
|
.timemd-history-embed {
|
|
padding: 4px;
|
|
}
|
|
|
|
.timemd-history-embed .timemd-history-tab-body {
|
|
gap: 8px;
|
|
}
|
|
|
|
/* =============================================================
|
|
Reports view
|
|
============================================================= */
|
|
.timemd-reports {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 18px;
|
|
}
|
|
|
|
.timemd-reports-header {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
}
|
|
|
|
.timemd-reports-title-block {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
|
|
.timemd-reports-title {
|
|
margin: 0;
|
|
font-size: 1.6em;
|
|
font-weight: 700;
|
|
color: var(--text-normal);
|
|
line-height: 1.1;
|
|
}
|
|
|
|
.timemd-reports-subtitle {
|
|
color: var(--text-muted);
|
|
font-size: 0.78em;
|
|
letter-spacing: 0.06em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.timemd-reports-export-btn {
|
|
background: var(--timemd-accent, var(--interactive-accent));
|
|
color: white;
|
|
border: none;
|
|
border-radius: 6px;
|
|
padding: 8px 18px;
|
|
font-size: 0.9em;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: filter 120ms ease;
|
|
}
|
|
|
|
.timemd-reports-export-btn:hover {
|
|
filter: brightness(1.08);
|
|
}
|
|
|
|
.timemd-reports-toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.timemd-reports-pillgroup {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.timemd-reports-pillgroup-right {
|
|
margin-left: auto;
|
|
}
|
|
|
|
.timemd-reports-pill-label {
|
|
color: var(--text-muted);
|
|
font-size: 0.85em;
|
|
}
|
|
|
|
.timemd-reports-pills {
|
|
display: inline-flex;
|
|
background: var(--background-secondary);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 8px;
|
|
padding: 3px;
|
|
gap: 2px;
|
|
}
|
|
|
|
.timemd-reports-pill {
|
|
background: transparent;
|
|
color: var(--text-normal);
|
|
border: none;
|
|
border-radius: 6px;
|
|
padding: 5px 12px;
|
|
font-size: 0.85em;
|
|
cursor: pointer;
|
|
transition: background 120ms ease, color 120ms ease;
|
|
}
|
|
|
|
.timemd-reports-pill:hover {
|
|
background: var(--background-modifier-hover);
|
|
}
|
|
|
|
.timemd-reports-pill-active,
|
|
.timemd-reports-pill-active:hover {
|
|
background: var(--timemd-accent, var(--interactive-accent));
|
|
color: white;
|
|
}
|
|
|
|
.timemd-reports-stats {
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
}
|
|
|
|
.timemd-reports-stat {
|
|
text-align: center;
|
|
padding: 14px 16px;
|
|
}
|
|
|
|
.timemd-reports-stat .timemd-stat-label {
|
|
white-space: normal;
|
|
}
|
|
|
|
.timemd-reports-stat .timemd-stat-value {
|
|
font-size: 1.6em;
|
|
font-weight: 700;
|
|
white-space: normal;
|
|
}
|
|
|
|
.timemd-reports-stat-sub {
|
|
margin-top: 4px;
|
|
color: var(--text-muted);
|
|
font-size: 0.78em;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
|
|
.timemd-reports-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.timemd-reports-section-title {
|
|
color: var(--text-muted);
|
|
font-size: 0.78em;
|
|
font-weight: 600;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.timemd-reports-vbars {
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
.timemd-reports-vbar-value {
|
|
font-size: 10px;
|
|
}
|
|
|
|
.timemd-reports-table thead th {
|
|
cursor: pointer;
|
|
user-select: none;
|
|
font-size: 0.78em;
|
|
letter-spacing: 0.06em;
|
|
text-transform: uppercase;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.timemd-reports-table thead th:hover {
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.timemd-reports-table .timemd-reports-num {
|
|
text-align: right;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.timemd-reports-th.timemd-reports-sort-asc::after {
|
|
content: ' \25B2';
|
|
font-size: 0.7em;
|
|
color: var(--timemd-accent, var(--interactive-accent));
|
|
}
|
|
|
|
.timemd-reports-th.timemd-reports-sort-desc::after {
|
|
content: ' \25BC';
|
|
font-size: 0.7em;
|
|
color: var(--timemd-accent, var(--interactive-accent));
|
|
}
|
|
|
|
.timemd-reports-embed {
|
|
display: block;
|
|
padding: 12px 14px;
|
|
background: var(--background-secondary);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 8px;
|
|
margin: 8px 0;
|
|
}
|
|
|
|
/* =============================================================
|
|
Input Tracking view
|
|
============================================================= */
|
|
|
|
.timemd-input-card-head {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 12px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.timemd-input-card-head h3 {
|
|
margin: 0;
|
|
font-size: 1em;
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.timemd-input-redact-toggle {
|
|
background: var(--background-primary);
|
|
color: var(--text-normal);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 4px;
|
|
padding: 4px 10px;
|
|
cursor: pointer;
|
|
font-size: 0.8em;
|
|
}
|
|
|
|
.timemd-input-redact-toggle:hover {
|
|
background: var(--background-modifier-hover);
|
|
}
|
|
|
|
.timemd-input-heatmap-toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
margin-bottom: 12px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.timemd-input-screen-tabs {
|
|
display: inline-flex;
|
|
gap: 4px;
|
|
padding: 3px;
|
|
background: var(--background-primary);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.timemd-input-screen-tab {
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--text-muted);
|
|
padding: 4px 12px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 0.85em;
|
|
font-family: inherit;
|
|
}
|
|
|
|
.timemd-input-screen-tab:hover {
|
|
background: var(--background-modifier-hover);
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.timemd-input-screen-tab.is-active,
|
|
.timemd-input-screen-tab.is-active:hover {
|
|
background: var(--timemd-accent, var(--interactive-accent));
|
|
color: white;
|
|
}
|
|
|
|
.timemd-input-bundle-filter {
|
|
padding: 5px 8px;
|
|
border-radius: 4px;
|
|
border: 1px solid var(--background-modifier-border);
|
|
background: var(--background-primary);
|
|
color: var(--text-normal);
|
|
font-size: 0.85em;
|
|
max-width: 320px;
|
|
}
|
|
|
|
.timemd-input-heatmap-canvas {
|
|
display: flex;
|
|
justify-content: center;
|
|
background: var(--background-primary);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 6px;
|
|
padding: 8px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.timemd-input-heatmap-svg {
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
.timemd-input-heatmap-bg {
|
|
fill: var(--background-primary-alt);
|
|
}
|
|
|
|
.timemd-input-click-dot {
|
|
fill: rgba(229, 79, 79, 0.65);
|
|
stroke: rgba(229, 79, 79, 0.95);
|
|
stroke-width: 0.5;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.timemd-input-heatmap-note {
|
|
margin-top: 8px;
|
|
color: var(--text-muted);
|
|
font-size: 0.8em;
|
|
text-align: right;
|
|
}
|
|
|
|
.timemd-input-raw-details summary {
|
|
cursor: pointer;
|
|
font-weight: 600;
|
|
color: var(--text-normal);
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.timemd-input-raw-details[open] summary {
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
/* Desktop-parity visualization additions */
|
|
.timemd-overview-grid,
|
|
.timemd-details-viz-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
|
gap: 16px;
|
|
}
|
|
|
|
.timemd-overview-distribution .timemd-projects-distribution-embed {
|
|
padding: 0;
|
|
border: 0;
|
|
background: transparent;
|
|
}
|
|
|
|
.timemd-overview-web-stats {
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.timemd-segmented {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 4px;
|
|
background: var(--background-secondary);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 8px;
|
|
width: fit-content;
|
|
}
|
|
|
|
.timemd-segmented-btn {
|
|
border: 0;
|
|
border-radius: 6px;
|
|
padding: 6px 12px;
|
|
background: transparent;
|
|
color: var(--text-muted);
|
|
font: inherit;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.timemd-segmented-btn:hover {
|
|
background: var(--background-modifier-hover);
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.timemd-segmented-btn.is-active {
|
|
background: var(--timemd-accent, var(--interactive-accent));
|
|
color: white;
|
|
}
|
|
|
|
.timemd-vbar,
|
|
.timemd-stacked-segment {
|
|
transition: opacity 120ms ease;
|
|
}
|
|
|
|
.timemd-vbar:hover,
|
|
.timemd-stacked-segment:hover {
|
|
opacity: 0.78;
|
|
}
|
|
|
|
.timemd-vbar-value {
|
|
font-size: 9px;
|
|
}
|
|
|
|
.timemd-chart-legend {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px 14px;
|
|
margin-top: 10px;
|
|
color: var(--text-muted);
|
|
font-size: 0.85em;
|
|
}
|
|
|
|
.timemd-chart-legend-item {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.timemd-chart-legend-dot {
|
|
width: 9px;
|
|
height: 9px;
|
|
border-radius: 999px;
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.timemd-details-wide-card {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.timemd-insight-row .timemd-stat-value {
|
|
font-size: 1.15em;
|
|
}
|
|
|
|
.timemd-card-note {
|
|
color: var(--text-muted);
|
|
font-size: 0.82em;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.timemd-session-timeline {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
width: 100%;
|
|
}
|
|
|
|
.timemd-session-timeline-row {
|
|
display: grid;
|
|
grid-template-columns: 116px minmax(0, 1fr) 104px;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.timemd-session-timeline-label {
|
|
color: var(--text-muted);
|
|
font-size: 0.82em;
|
|
font-variant-numeric: tabular-nums;
|
|
text-align: right;
|
|
line-height: 1.25;
|
|
}
|
|
|
|
.timemd-session-timeline-date {
|
|
color: var(--text-normal);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.timemd-session-timeline-weekday,
|
|
.timemd-session-timeline-summary {
|
|
color: var(--text-muted);
|
|
font-size: 0.78em;
|
|
}
|
|
|
|
.timemd-session-timeline-summary {
|
|
font-variant-numeric: tabular-nums;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.timemd-session-timeline-track {
|
|
position: relative;
|
|
height: 28px;
|
|
border-radius: 8px;
|
|
background:
|
|
linear-gradient(to right, transparent calc(25% - 1px), var(--background-modifier-border) 25%, transparent calc(25% + 1px), transparent calc(50% - 1px), var(--background-modifier-border) 50%, transparent calc(50% + 1px), transparent calc(75% - 1px), var(--background-modifier-border) 75%, transparent calc(75% + 1px)),
|
|
var(--background-primary);
|
|
border: 1px solid var(--background-modifier-border);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.timemd-session-timeline-segment {
|
|
position: absolute;
|
|
top: 4px;
|
|
bottom: 4px;
|
|
min-width: 2px;
|
|
border-radius: 4px;
|
|
border-right: 1px solid rgba(255, 255, 255, 0.22);
|
|
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
.timemd-session-timeline-segment.is-short {
|
|
min-width: 3px;
|
|
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35);
|
|
}
|
|
|
|
.timemd-session-timeline-segment:hover {
|
|
filter: brightness(1.15);
|
|
z-index: 2;
|
|
}
|
|
|
|
.timemd-session-timeline-axis {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding-left: 126px;
|
|
padding-right: 114px;
|
|
color: var(--text-muted);
|
|
font-size: 0.75em;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.timemd-session-timeline-axis-top {
|
|
margin-top: 2px;
|
|
margin-bottom: -2px;
|
|
}
|
|
|
|
.timemd-transitions-card {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.timemd-transition-sankey {
|
|
width: 100%;
|
|
height: auto;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.timemd-sankey-link {
|
|
stroke-opacity: var(--timemd-sankey-link-opacity, 0.34);
|
|
transition: stroke-opacity 120ms ease;
|
|
mix-blend-mode: var(--timemd-sankey-link-blend-mode, multiply);
|
|
}
|
|
|
|
.theme-dark .timemd-sankey-link {
|
|
stroke-opacity: var(--timemd-sankey-link-opacity, 0.56);
|
|
mix-blend-mode: var(--timemd-sankey-link-blend-mode, normal);
|
|
}
|
|
|
|
.timemd-sankey-link:hover {
|
|
stroke-opacity: var(--timemd-sankey-link-hover-opacity, 0.64);
|
|
}
|
|
|
|
.theme-dark .timemd-sankey-link:hover {
|
|
stroke-opacity: var(--timemd-sankey-link-hover-opacity, 0.78);
|
|
}
|
|
|
|
.timemd-sankey-node {
|
|
stroke: var(--background-secondary);
|
|
stroke-width: 1;
|
|
}
|
|
|
|
.timemd-sankey-label {
|
|
font-size: 10px;
|
|
}
|
|
|
|
.timemd-sankey-heading {
|
|
font-size: 10px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
}
|
|
|
|
.timemd-lane-timeline,
|
|
.timemd-session-waterfall {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
}
|
|
|
|
.timemd-lane-day,
|
|
.timemd-waterfall-day {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
|
|
.timemd-lane-day-head,
|
|
.timemd-waterfall-day-head {
|
|
display: flex;
|
|
align-items: baseline;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
padding-bottom: 2px;
|
|
}
|
|
|
|
.timemd-lane-day-title,
|
|
.timemd-waterfall-day-title {
|
|
font-weight: 650;
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.timemd-lane-day-meta,
|
|
.timemd-waterfall-day-meta {
|
|
color: var(--text-muted);
|
|
font-size: 0.82em;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.timemd-lane-axis {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding-left: 130px;
|
|
color: var(--text-muted);
|
|
font-size: 0.72em;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.timemd-lane-row {
|
|
display: grid;
|
|
grid-template-columns: 120px minmax(0, 1fr);
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.timemd-lane-label {
|
|
min-width: 0;
|
|
text-align: right;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.timemd-lane-app {
|
|
color: var(--text-normal);
|
|
font-size: 0.85em;
|
|
font-weight: 600;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.timemd-lane-meta {
|
|
color: var(--text-muted);
|
|
font-size: 0.72em;
|
|
font-variant-numeric: tabular-nums;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.timemd-lane-row.is-other .timemd-lane-app {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.timemd-lane-track {
|
|
position: relative;
|
|
height: 24px;
|
|
border-radius: 7px;
|
|
background:
|
|
linear-gradient(to right, transparent calc(25% - 1px), var(--background-modifier-border) 25%, transparent calc(25% + 1px), transparent calc(50% - 1px), var(--background-modifier-border) 50%, transparent calc(50% + 1px), transparent calc(75% - 1px), var(--background-modifier-border) 75%, transparent calc(75% + 1px)),
|
|
var(--background-primary);
|
|
border: 1px solid var(--background-modifier-border);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.timemd-lane-segment {
|
|
position: absolute;
|
|
top: 4px;
|
|
bottom: 4px;
|
|
min-width: 2px;
|
|
border-radius: 4px;
|
|
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
.timemd-lane-segment.is-short {
|
|
min-width: 3px;
|
|
}
|
|
|
|
.timemd-lane-segment:hover {
|
|
filter: brightness(1.15);
|
|
z-index: 2;
|
|
}
|
|
|
|
.timemd-waterfall-row {
|
|
display: grid;
|
|
grid-template-columns: 112px minmax(120px, 1fr) 78px minmax(120px, 1.6fr);
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 5px 0;
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
font-size: 0.88em;
|
|
}
|
|
|
|
.timemd-waterfall-row:last-child {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.timemd-waterfall-time,
|
|
.timemd-waterfall-duration {
|
|
color: var(--text-muted);
|
|
font-variant-numeric: tabular-nums;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.timemd-waterfall-app {
|
|
color: var(--text-normal);
|
|
font-weight: 500;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.timemd-waterfall-duration {
|
|
text-align: right;
|
|
}
|
|
|
|
.timemd-waterfall-track {
|
|
height: 9px;
|
|
border-radius: 999px;
|
|
background: var(--background-modifier-border);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.timemd-waterfall-fill {
|
|
height: 100%;
|
|
border-radius: 999px;
|
|
min-width: 2px;
|
|
}
|
|
|
|
@media (max-width: 720px) {
|
|
.timemd-lane-axis {
|
|
padding-left: 0;
|
|
}
|
|
|
|
.timemd-lane-row {
|
|
grid-template-columns: 1fr;
|
|
gap: 4px;
|
|
}
|
|
|
|
.timemd-lane-label {
|
|
text-align: left;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
}
|
|
|
|
.timemd-waterfall-row {
|
|
grid-template-columns: 88px minmax(0, 1fr) 66px;
|
|
}
|
|
|
|
.timemd-waterfall-track {
|
|
grid-column: 1 / -1;
|
|
}
|
|
}
|
|
|
|
.timemd-transition-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
|
|
.timemd-transition-row {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) minmax(44px, auto) minmax(54px, auto);
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 7px 0;
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.timemd-transition-row:last-child {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.timemd-transition-from,
|
|
.timemd-transition-to {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.timemd-transition-arrow,
|
|
.timemd-transition-count,
|
|
.timemd-transition-percent {
|
|
color: var(--text-muted);
|
|
font-variant-numeric: tabular-nums;
|
|
text-align: right;
|
|
}
|
|
|
|
.timemd-transition-to {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.timemd-intensity-legend {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
margin: 4px 0 14px;
|
|
color: var(--text-muted);
|
|
font-size: 0.78em;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.timemd-intensity-swatch {
|
|
width: 20px;
|
|
height: 14px;
|
|
border: 1px solid var(--background-modifier-border);
|
|
}
|
|
|
|
.timemd-intensity-legend-label:first-child {
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.timemd-intensity-legend-label:last-child {
|
|
margin-left: 4px;
|
|
}
|
|
|
|
.timemd-contribution-wrap,
|
|
.timemd-date-hour-wrap {
|
|
max-width: 100%;
|
|
overflow: auto;
|
|
padding-bottom: 4px;
|
|
}
|
|
|
|
.timemd-date-hour-wrap {
|
|
max-height: 560px;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.timemd-contribution-cell,
|
|
.timemd-date-hour-cell {
|
|
stroke: var(--background-primary);
|
|
stroke-width: 1;
|
|
transition: opacity 120ms ease, filter 120ms ease;
|
|
}
|
|
|
|
.timemd-contribution-cell:hover,
|
|
.timemd-date-hour-cell:hover {
|
|
filter: brightness(1.16);
|
|
}
|
|
|
|
.timemd-contribution-cell.is-outside-range {
|
|
stroke: transparent;
|
|
}
|
|
|
|
.timemd-contribution-month {
|
|
font-size: 10px;
|
|
}
|
|
|
|
.timemd-top-apps-by-day {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
max-height: 520px;
|
|
overflow: auto;
|
|
}
|
|
|
|
.timemd-top-app-day-row {
|
|
display: grid;
|
|
grid-template-columns: minmax(86px, 110px) minmax(0, 1fr);
|
|
gap: 10px;
|
|
align-items: start;
|
|
padding: 6px 0;
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
}
|
|
|
|
.timemd-top-app-day-row:last-child {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.timemd-top-app-day-date {
|
|
color: var(--text-muted);
|
|
font-size: 0.82em;
|
|
font-variant-numeric: tabular-nums;
|
|
line-height: 1.8;
|
|
}
|
|
|
|
.timemd-top-app-day-apps {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.timemd-top-app-chip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
max-width: 100%;
|
|
padding: 4px 8px;
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 999px;
|
|
background: var(--background-primary);
|
|
font-size: 0.82em;
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.timemd-top-app-chip-value {
|
|
color: var(--text-muted);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.timemd-trends-wide-card {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.timemd-app-rhythm-wrap {
|
|
max-width: 100%;
|
|
overflow: auto;
|
|
padding-bottom: 4px;
|
|
}
|
|
|
|
.timemd-app-rhythm-cell,
|
|
.timemd-scatter-point {
|
|
transition: opacity 120ms ease, filter 120ms ease;
|
|
}
|
|
|
|
.timemd-app-rhythm-cell:hover,
|
|
.timemd-scatter-point:hover {
|
|
filter: brightness(1.16);
|
|
}
|
|
|
|
.timemd-app-rhythm-label {
|
|
font-size: 10px;
|
|
}
|
|
|
|
.timemd-scatter-chart {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.timemd-archetype-chips {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.timemd-archetype-chip,
|
|
.timemd-archetype-pill {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
border-radius: 999px;
|
|
border: 1px solid var(--background-modifier-border);
|
|
background: var(--background-primary);
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.timemd-archetype-chip {
|
|
padding: 5px 9px;
|
|
font-size: 0.85em;
|
|
}
|
|
|
|
.timemd-archetype-pill {
|
|
padding: 3px 8px;
|
|
font-size: 0.82em;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.timemd-archetype-chip-count {
|
|
color: var(--text-muted);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.timemd-archetype-chip.is-deep-work,
|
|
.timemd-archetype-pill.is-deep-work {
|
|
border-color: rgba(34, 197, 94, 0.45);
|
|
background: rgba(34, 197, 94, 0.12);
|
|
}
|
|
|
|
.timemd-archetype-chip.is-comms-heavy,
|
|
.timemd-archetype-pill.is-comms-heavy {
|
|
border-color: rgba(59, 130, 246, 0.45);
|
|
background: rgba(59, 130, 246, 0.12);
|
|
}
|
|
|
|
.timemd-archetype-chip.is-browsing-heavy,
|
|
.timemd-archetype-pill.is-browsing-heavy {
|
|
border-color: rgba(245, 158, 11, 0.45);
|
|
background: rgba(245, 158, 11, 0.12);
|
|
}
|
|
|
|
.timemd-archetype-chip.is-fragmented,
|
|
.timemd-archetype-pill.is-fragmented {
|
|
border-color: rgba(239, 68, 68, 0.45);
|
|
background: rgba(239, 68, 68, 0.12);
|
|
}
|
|
|
|
.timemd-archetype-chip.is-low-activity,
|
|
.timemd-archetype-pill.is-low-activity {
|
|
border-color: rgba(100, 116, 139, 0.45);
|
|
background: rgba(100, 116, 139, 0.12);
|
|
}
|
|
|
|
.timemd-archetype-table-wrap {
|
|
max-height: 520px;
|
|
}
|
|
|
|
.timemd-archetype-table td:nth-child(3),
|
|
.timemd-archetype-table td:nth-child(5),
|
|
.timemd-archetype-table td:nth-child(6),
|
|
.timemd-archetype-table td:nth-child(7) {
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
/* Period comparison */
|
|
.timemd-period-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 14px;
|
|
}
|
|
|
|
.timemd-period-stats {
|
|
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
|
|
}
|
|
|
|
.timemd-period-before-after,
|
|
.timemd-period-delta-col {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.timemd-period-bar-row,
|
|
.timemd-period-delta-row {
|
|
display: grid;
|
|
grid-template-columns: minmax(96px, 1fr) minmax(120px, 2fr) minmax(76px, auto);
|
|
align-items: center;
|
|
gap: 10px;
|
|
font-size: 0.88em;
|
|
}
|
|
|
|
.timemd-period-bar-label,
|
|
.timemd-period-delta-app {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.timemd-period-bar-track,
|
|
.timemd-period-delta-track {
|
|
height: 10px;
|
|
border-radius: 999px;
|
|
background: var(--background-modifier-border);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.timemd-period-bar-fill,
|
|
.timemd-period-delta-fill {
|
|
height: 100%;
|
|
border-radius: 999px;
|
|
background: var(--timemd-accent, var(--interactive-accent));
|
|
}
|
|
|
|
.timemd-period-bar-value,
|
|
.timemd-period-delta-value {
|
|
color: var(--text-muted);
|
|
font-variant-numeric: tabular-nums;
|
|
text-align: right;
|
|
}
|
|
|
|
.timemd-period-delta-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
|
gap: 16px;
|
|
}
|
|
|
|
.timemd-period-delta-title {
|
|
font-weight: 600;
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.timemd-period-delta-positive .timemd-period-delta-fill {
|
|
background: var(--color-green, #22c55e);
|
|
}
|
|
|
|
.timemd-period-delta-negative .timemd-period-delta-fill {
|
|
background: var(--color-red, #ef4444);
|
|
}
|
|
|
|
/* Calendar annotations */
|
|
.timemd-contribution-cell,
|
|
.timemd-month-day {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.timemd-day-marker-ring {
|
|
fill: none;
|
|
stroke: var(--text-warning, #f59e0b);
|
|
stroke-width: 1.4;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.timemd-day-marker-ring.is-selected {
|
|
stroke: var(--interactive-accent);
|
|
stroke-width: 2;
|
|
}
|
|
|
|
.timemd-day-marker-dot {
|
|
fill: var(--interactive-accent);
|
|
stroke: var(--background-secondary);
|
|
stroke-width: 1;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.timemd-month-day {
|
|
position: relative;
|
|
border: 1px solid transparent;
|
|
}
|
|
|
|
.timemd-month-day.has-high-context {
|
|
box-shadow: inset 0 0 0 1.5px var(--text-warning, #f59e0b);
|
|
}
|
|
|
|
.timemd-month-day.is-selected {
|
|
border-color: var(--interactive-accent);
|
|
box-shadow: inset 0 0 0 2px var(--interactive-accent);
|
|
}
|
|
|
|
.timemd-month-day-dot {
|
|
position: absolute;
|
|
right: 3px;
|
|
bottom: 3px;
|
|
width: 5px;
|
|
height: 5px;
|
|
border-radius: 50%;
|
|
background: var(--interactive-accent);
|
|
box-shadow: 0 0 0 1px var(--background-secondary);
|
|
}
|
|
|
|
.timemd-date-hour-cell.has-high-context {
|
|
stroke: var(--text-warning, #f59e0b);
|
|
stroke-width: 0.8;
|
|
}
|
|
|
|
.timemd-date-hour-cell.has-focus-block {
|
|
stroke: var(--interactive-accent);
|
|
stroke-width: 0.8;
|
|
}
|
|
|
|
.timemd-calendar-day-detail-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.timemd-calendar-day-detail-header h3 {
|
|
margin: 0;
|
|
}
|
|
|
|
.timemd-calendar-detail-subtitle {
|
|
margin: 12px 0 6px;
|
|
font-weight: 600;
|
|
color: var(--text-normal);
|
|
}
|