:root { --dr-card-bg: #1a1b26; --dr-text: #c0caf5; --dr-text-muted: #565f89; --dr-border: #2a2e3e; --dr-accent: #7aa2f7; --dr-l0: #1e2030; --dr-l1: #0d4a2e; --dr-l2: #127a3f; --dr-l3: #1db954; --dr-link-hover: #7dcfff; } @media (prefers-color-scheme: light) { :root { --dr-card-bg: #f6f8fa; --dr-text: #24292f; --dr-text-muted: #656d76; --dr-border: #d0d7de; --dr-accent: #0969da; --dr-l0: #ebedf0; --dr-l1: #9be9a8; --dr-l2: #40c463; --dr-l3: #216e39; --dr-link-hover: #0969da; } } .dr-wrapper { max-width: 1100px; margin: 0 auto; padding: 20px 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC", sans-serif; } .dr-section-title { font-size: 1.5em; font-weight: 700; margin: 2.5em 0 1em; padding-bottom: 0.5em; border-bottom: 1px solid rgba(128,128,128,0.2); } .dr-cal-wrapper { overflow-x: auto; padding: 10px 0; } .dr-cal-months { display: flex; align-items: flex-end; margin-bottom: 4px; } .dr-cal-weekday-spacer { width: 30px; flex-shrink: 0; } .dr-cal-months-track { display: grid; gap: 0; position: relative; height: 20px; } .dr-cal-month-label { font-size: 11px; color: #888; white-space: nowrap; } .dr-cal-main { display: flex; gap: 4px; } .dr-cal-weekdays { display: flex; flex-direction: column; gap: 3px; width: 26px; flex-shrink: 0; } .dr-cal-weekday { font-size: 10px; color: #888; height: 11px; line-height: 11px; } .dr-cal-grid { display: flex; gap: 3px; } .dr-cal-week { display: flex; flex-direction: column; gap: 3px; } .dr-cal-cell { width: 11px; height: 11px; border-radius: 2px; display: block; text-decoration: none; transition: transform 0.1s; } .dr-cal-cell:hover { transform: scale(1.4); z-index: 10; position: relative; } .dr-cal-empty { background: transparent; } .dr-cal-level-0 { background: var(--dr-l0); } .dr-cal-level-1 { background: var(--dr-l1); } .dr-cal-level-2 { background: var(--dr-l2); } .dr-cal-level-3 { background: var(--dr-l3); } .dr-cal-legend { display: flex; align-items: center; gap: 4px; margin-top: 8px; margin-left: 30px; font-size: 11px; color: #888; } .dr-cal-legend-cell { width: 11px; height: 11px; border-radius: 2px; } .dr-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px; margin: 1em 0; } .dr-stat-card { background: var(--dr-card-bg); border: 1px solid var(--dr-border); border-radius: 12px; padding: 20px; text-align: center; transition: transform 0.2s, box-shadow 0.2s; } .dr-stat-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.15); } .dr-stat-value { font-size: 1.6em; font-weight: 800; color: var(--dr-accent); line-height: 1.2; } .dr-stat-label { font-size: 0.85em; color: var(--dr-text-muted); margin-top: 6px; } .dr-nav-layout { display: flex; gap: 24px; margin-top: 1em; } .dr-nav-sidebar { width: 180px; flex-shrink: 0; position: sticky; top: 80px; align-self: flex-start; max-height: calc(100vh - 100px); overflow-y: auto; } .dr-nav-sidebar-title { font-size: 0.85em; font-weight: 700; text-transform: uppercase; color: var(--dr-text-muted); margin-bottom: 10px; letter-spacing: 0.05em; } .dr-nav-year-group { margin-bottom: 12px; } .dr-nav-year-link { display: block; font-weight: 600; color: var(--dr-text); text-decoration: none; padding: 4px 8px; border-radius: 6px; font-size: 0.95em; } .dr-nav-year-link:hover { background: var(--dr-card-bg); color: var(--dr-accent); } .dr-nav-month-links { display: flex; flex-wrap: wrap; gap: 2px; padding-left: 8px; margin-top: 4px; } .dr-nav-month-link { font-size: 0.78em; color: var(--dr-text-muted); text-decoration: none; padding: 2px 6px; border-radius: 4px; } .dr-nav-month-link:hover { color: var(--dr-accent); background: var(--dr-card-bg); } .dr-nav-content { flex: 1; min-width: 0; } .dr-nav-year-section { margin-bottom: 2em; } .dr-nav-year-title { font-size: 1.3em; font-weight: 700; color: var(--dr-text); margin-bottom: 12px; display: flex; align-items: center; gap: 10px; } .dr-nav-year-count { font-size: 0.65em; font-weight: 400; color: var(--dr-text-muted); background: var(--dr-card-bg); padding: 2px 10px; border-radius: 20px; } .dr-nav-month { margin-bottom: 10px; border: 1px solid var(--dr-border); border-radius: 10px; overflow: hidden; } .dr-nav-month-summary { padding: 10px 16px; cursor: pointer; font-weight: 600; font-size: 1em; color: var(--dr-text); display: flex; justify-content: space-between; align-items: center; list-style: none; user-select: none; } .dr-nav-month-summary::-webkit-details-marker { display: none; } .dr-nav-month-summary::before { content: "\25B6"; font-size: 0.7em; margin-right: 8px; transition: transform 0.2s; color: var(--dr-text-muted); } .dr-nav-month[open] .dr-nav-month-summary::before { transform: rotate(90deg); } .dr-nav-month-name { flex: 1; } .dr-nav-month-count { font-size: 0.8em; font-weight: 400; color: var(--dr-text-muted); } .dr-nav-month-list { padding: 4px 8px; } .dr-nav-entry { display: flex; align-items: center; gap: 12px; padding: 8px 12px; text-decoration: none; color: var(--dr-text); border-radius: 8px; transition: background 0.15s; font-size: 0.9em; } .dr-nav-entry:hover { background: var(--dr-card-bg); color: var(--dr-link-hover); } .dr-nav-entry-day { font-weight: 600; color: var(--dr-accent); min-width: 70px; font-size: 0.88em; } .dr-nav-entry-date { color: var(--dr-text-muted); } .dr-search-box { margin-bottom: 16px; } .dr-search-input { width: 100%; padding: 10px 16px; border: 1px solid var(--dr-border); border-radius: 10px; background: var(--dr-card-bg); color: var(--dr-text); font-size: 0.95em; outline: none; transition: border-color 0.2s; box-sizing: border-box; } .dr-search-input:focus { border-color: var(--dr-accent); } .dr-search-input::placeholder { color: var(--dr-text-muted); } @media (max-width: 768px) { .dr-nav-sidebar { display: none; } .dr-nav-layout { flex-direction: column; } .dr-stats { grid-template-columns: repeat(2, 1fr); } }