diff --git a/css/index.css b/css/index.css index 24a20f7..2c00785 100644 --- a/css/index.css +++ b/css/index.css @@ -1484,8 +1484,8 @@ body { /* Main */ .main { display: flex; flex-direction: column; overflow: hidden; position: relative; } -.topbar { display: flex; align-items: center; gap: 12px; padding: 16px 24px; border-bottom: 1px solid var(--color-border-tertiary); flex-shrink: 0; background: rgba(var(--color-background-primary), 0.8); backdrop-filter: blur(10px); z-index: 10; } -.topbar-title { font-size: 18px; font-weight: 600; color: var(--color-text-primary); flex: 1; } +.topbar { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; border-bottom: 1px solid var(--color-border-tertiary); flex-shrink: 0; background: rgba(var(--color-background-primary), 0.8); backdrop-filter: blur(10px); z-index: 10; } +.topbar-title { font-size: 18px; font-weight: 700; color: var(--color-text-primary); } .btn { font-family: inherit; font-size: 13px; font-weight: 600; padding: 8px 16px; border: 1px solid var(--color-border-secondary); border-radius: var(--border-radius-sm); background: var(--color-background-primary); color: var(--color-text-primary); cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: var(--shadow-sm); display: inline-flex; align-items: center; justify-content: center; gap: 6px; } .btn:hover { background: var(--color-background-secondary); transform: translateY(-1px); box-shadow: var(--shadow-md); } .btn:active { transform: translateY(0); box-shadow: 0 0 0; } @@ -1494,8 +1494,10 @@ body { /* Calendar */ .cal-section { padding: 16px 24px; border-bottom: 1px solid var(--color-border-tertiary); flex-shrink: 0; } -.cal-header { display: flex; align-items: center; margin-bottom: 16px; } -.cal-title { font-size: 15px; font-weight: 600; flex: 1; color: var(--color-text-primary); } +.cal-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 16px; } +.cal-header-left { display: flex; flex-direction: column; flex: 1; align-items: flex-start; gap: 4px; } +.cal-header-right { display: flex; align-items: center; } +.cal-title { font-size: 15px; font-weight: 600; color: var(--color-text-primary); } .cal-nav { font-size: 18px; color: var(--color-text-secondary); cursor: pointer; padding: 4px 8px; border-radius: 4px; transition: background 0.2s; } .cal-nav:hover { background: var(--color-background-secondary); color: var(--color-text-primary); } .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; } @@ -1510,6 +1512,33 @@ body { .cal-legend span { display: flex; align-items: center; gap: 6px; } .legend-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } +/* Quote Widget */ +.quote-widget { + display: inline-flex; + align-items: center; + gap: 6px; + padding: 6px 12px; + background: var(--color-background-secondary); + border: 1px solid var(--color-border-tertiary); + border-radius: 100px; + transition: all 0.2s ease; +} +.quote-widget:hover { + background: var(--color-background-tertiary); + transform: translateY(-1px); +} +.quote-icon { + color: var(--color-text-tertiary); +} +.quote-widget p { + margin: 0; + font-size: 11px; + color: var(--color-text-secondary); + font-weight: 600; + line-height: 1; + letter-spacing: 0.02em; +} + /* Tasks */ .tasks-section { flex: 1; overflow-y: auto; padding: 0 24px 24px; scroll-behavior: smooth; } .tasks-section::-webkit-scrollbar { width: 6px; } diff --git a/index.html b/index.html index da78416..2298203 100644 --- a/index.html +++ b/index.html @@ -102,6 +102,18 @@