/* style.css — all the visual styling for the app. Big idea used throughout: the page background color is decided by a CLASS on the tag (theme-pomodoro / theme-shortBreak / theme-longBreak). JavaScript swaps that class when you change modes, and the whole page recolors instantly. We store each theme color in a CSS variable (--bg) so the rest of the file can just say "background: var(--bg)". */ /* ---- Reset a few browser defaults so things look consistent ---- */ * { margin: 0; padding: 0; box-sizing: border-box; /* widths include padding+border — easier to reason about */ } body { font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #fff; min-height: 100vh; /* fill the whole window height */ /* 0.5s transition makes the color change when switching modes feel smooth. */ transition: background-color 0.5s ease; } /* ---- The three themes. Each just sets the --bg variable + applies it. ---- */ .theme-pomodoro { --bg: #ba4949; background-color: var(--bg); } /* red */ .theme-shortBreak { --bg: #4c5b61; background-color: var(--bg); } /* slate gray */ .theme-longBreak { --bg: #38858a; background-color: var(--bg); } /* teal */ /* Utility: hide an element entirely. JS toggles this to swap between the working view and the summary view. */ .is-hidden { display: none !important; } /* ---- Header ---- */ .app-header { display: flex; justify-content: space-between; /* logo left, End session button right */ align-items: center; max-width: 620px; margin: 0 auto; padding: 16px 24px; } .logo { font-weight: 700; font-size: 18px; white-space: nowrap; /* the icon + name always stay on ONE line */ } /* ---- Motivation widget: the little "Let's Go, Ed!" pill in the header ---- */ .motivation-widget { display: inline-flex; align-items: center; gap: 7px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.08)); border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 999px; /* pill shape */ padding: 6px 16px; font-size: 14px; font-weight: 600; letter-spacing: 0.3px; white-space: nowrap; /* never let the pill text wrap */ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12); } /* The emoji gets a gentle bounce so the pill feels alive. */ .motivation-widget .motivation-emoji { display: inline-block; animation: motivation-bounce 2.4s ease-in-out infinite; } @keyframes motivation-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } } /* Small screens: the header becomes TWO rows — row 1: logo (left) + End session (right); row 2: the widget, centered. */ @media (max-width: 480px) { .app-header { flex-wrap: wrap; padding: 16px 20px 10px; row-gap: 10px; } .logo { margin-right: auto; /* pins the End session button to the right on row 1 */ } .motivation-widget { order: 3; /* always drops to its own row */ width: 100%; justify-content: center; padding: 5px 10px; font-size: 12.5px; gap: 5px; } .container { /* Generous side padding + extra room at the bottom for the browser bar. */ padding: 20px 22px 90px; } } /* Very small phones / in-app webviews (~320-375px): shrink the header a bit more. */ @media (max-width: 380px) { .app-header { padding: 12px 14px 8px; row-gap: 8px; } .logo { font-size: 15px; } .motivation-widget { padding: 4px 8px; font-size: 11px; gap: 4px; } .btn-end-session { font-size: 12px; padding: 5px 10px; } } .btn-end-session { background: rgba(255, 255, 255, 0.15); color: #fff; border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 4px; font-size: 14px; padding: 6px 14px; cursor: pointer; } .btn-end-session:hover:not(:disabled) { background: rgba(255, 255, 255, 0.25); } .btn-end-session:disabled { opacity: 0.4; cursor: default; } /* ---- Main layout: center everything in a narrow column ---- */ .container { max-width: 480px; margin: 0 auto; /* center horizontally */ padding: 24px 20px; } /* ---- The timer card ---- */ .timer-card { /* A faint white overlay so the card stands out from the colored background. */ background-color: rgba(255, 255, 255, 0.1); border-radius: 8px; padding: 24px 0 32px; text-align: center; } /* ---- Mode tabs (Pomodoro / Short Break / Long Break) ---- */ .mode-tabs { display: flex; justify-content: center; gap: 8px; margin-bottom: 16px; } .mode-tab { background: transparent; border: none; color: #fff; font-size: 15px; padding: 4px 12px; border-radius: 4px; cursor: pointer; } /* The currently selected tab gets a subtle highlight. JS adds/removes "is-active". */ .mode-tab.is-active { background-color: rgba(0, 0, 0, 0.15); font-weight: 700; } /* ---- The big countdown number ---- */ .time-display { font-size: 96px; font-weight: 700; line-height: 1.1; margin: 8px 0 16px; /* Tabular numbers keep each digit the same width so the timer doesn't "wiggle". */ font-variant-numeric: tabular-nums; } /* ---- The START / PAUSE button (and the summary's START NEW SESSION button) ---- */ .btn-start, .btn-new-session { background-color: #fff; /* The text color matches the current theme via the --bg variable. */ color: var(--bg); border: none; border-radius: 4px; font-size: 22px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 12px 0; width: 180px; cursor: pointer; /* A solid "shadow" under the button that disappears when pressed (see :active). */ box-shadow: 0 6px 0 rgba(0, 0, 0, 0.15); transition: box-shadow 0.05s ease, transform 0.05s ease; } .btn-start:active, .btn-new-session:active { /* Pressed look: drop the button down so it appears to physically click. */ transform: translateY(4px); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.15); } /* ---- Session info under the card ---- */ .session-info { text-align: center; margin-top: 20px; } .session-count { opacity: 0.7; font-size: 14px; } .session-message { font-size: 16px; margin-top: 4px; } .live-stats { opacity: 0.75; font-size: 14px; margin-top: 10px; } /* ---- The end-of-session summary card ---- */ .summary-card { background-color: rgba(255, 255, 255, 0.1); border-radius: 8px; padding: 28px 28px 36px; text-align: center; } .summary-title { font-size: 20px; margin-bottom: 16px; } /* The Started/Ended block sits in its own slightly darker inset box. */ .summary-times { background: rgba(0, 0, 0, 0.12); border-radius: 6px; padding: 12px 16px; margin-bottom: 14px; text-align: left; } .summary-time-row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 15px; } .summary-row { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 0; font-size: 16px; text-align: left; } .summary-break-detail { text-align: right; font-size: 13px; opacity: 0.75; margin-top: -6px; } .summary-divider { border-top: 1px solid rgba(255, 255, 255, 0.35); margin-top: 6px; } .summary-total { font-size: 18px; font-weight: 700; } .summary-note { text-align: center; font-size: 13px; opacity: 0.75; margin-top: 10px; } .btn-new-session { margin-top: 24px; width: auto; padding: 12px 28px; font-size: 16px; }