daily-focus 1.2.0-dev.5 → 1.2.0-dev.8

package/public/style.css

@@ -86,7 +86,7 @@
 
 /*
  * The UA stylesheet's `[hidden] { display: none }` loses to any class that sets
- * display, so `.timer`, `.focus-bar` and `.toast` all rendered as empty boxes
+ * display, so `.toast` rendered as an empty box
  * while "hidden". Assert it once here rather than remembering per component.
  */
 [hidden] {
@@ -351,91 +351,6 @@ body[data-view='tickets'] #brief-refresh {
   }
 }
 
-/* ---------- focus timer ---------- */
-
-.timer {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  max-width: 1280px;
-  margin: 0 auto 14px;
-  padding: 10px 14px;
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-left: 3px solid var(--accent);
-  border-radius: var(--radius);
-  box-shadow: var(--shadow);
-  font-size: 13.5px;
-  color: var(--ink-2);
-}
-/* Past the target the timer stops being encouraging and starts being a fact. */
-.timer[data-state='overrun'] {
-  border-left-color: var(--serious);
-}
-.timer[data-state='idle'] {
-  border-left-color: var(--hairline);
-  color: var(--ink-3);
-}
-
-.timer__clock {
-  font-size: 20px;
-  font-weight: 600;
-  font-variant-numeric: tabular-nums;
-  color: var(--ink-1);
-  min-width: 62px;
-}
-.timer[data-state='overrun'] .timer__clock {
-  color: var(--serious);
-}
-
-.timer__title {
-  flex: 1;
-  min-width: 0;
-  color: var(--ink-1);
-  overflow-wrap: anywhere;
-}
-.timer__note {
-  color: var(--ink-3);
-}
-.timer__note--warn {
-  color: var(--critical);
-}
-.timer__tally {
-  color: var(--ink-3);
-  white-space: nowrap;
-}
-
-/*
- * The bar after the timer stopped itself. Marked like the overrun state rather
- * than the idle one: something happened that's worth a glance, even though the
- * thing that happened was the dashboard being careful.
- */
-.timer[data-state='stopped'] {
-  border-left-color: var(--serious);
-}
-.timer__away {
-  display: flex;
-  flex: 1;
-  align-items: center;
-  gap: 12px;
-  min-width: 0;
-}
-.timer__away-body {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  min-width: 0;
-}
-.timer__away-text {
-  color: var(--ink-1);
-  overflow-wrap: anywhere;
-}
-.timer__away-detail {
-  color: var(--ink-3);
-  font-size: 12.5px;
-  overflow-wrap: anywhere;
-}
-
 /* ---------- banners ---------- */
 
 .banners {
@@ -692,47 +607,6 @@ body[data-view='tickets'] #brief-refresh {
   }
 }
 
-/* ---------- focus mode ---------- */
-
-/*
- * Fourteen open rows are fourteen invitations to switch task. Focus mode answers
- * the only question that matters mid-work — "what am I doing right now" — by
- * leaving the objective, one item, and the clock, and taking away the menu.
- */
-.focus-bar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  margin: 0 0 16px;
-  padding: 9px 14px;
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-left: 3px solid var(--accent);
-  border-radius: var(--radius);
-  font-size: 13px;
-  color: var(--ink-2);
-}
-
-/* Scoped to the Today view: the board is a different question, and stays whole. */
-body[data-focus-mode='true'][data-view='today'] .stats,
-body[data-focus-mode='true'][data-view='today'] .headline,
-body[data-focus-mode='true'][data-view='today'] #today .drawer,
-body[data-focus-mode='true'][data-view='today'] #today .section__header,
-/* every section except the first, and every item in it except the first */
-body[data-focus-mode='true'][data-view='today'] #today .section:not(:first-of-type),
-body[data-focus-mode='true'][data-view='today'] #today .section:first-of-type .item:not(:first-child) {
-  display: none;
-}
-
-body[data-focus-mode='true'][data-view='today'] #today .item {
-  padding: 18px 20px;
-}
-body[data-focus-mode='true'][data-view='today'] #today .item__title {
-  font-size: 19px;
-  line-height: 1.35;
-}
-
 /* ---------- standing objective ---------- */
 
 /*
@@ -910,9 +784,9 @@ body[data-focus-mode='true'][data-view='today'] #today .item__title {
   scroll-margin: 90px;
 }
 /*
- * Three states used to share one look: selected, priority and running were all
- * "accent border", so the one that matters most was indistinguishable from a
- * keyboard cursor. They're now ranked — selected is quietest, running loudest.
+ * Two states used to share one look: selected and priority were both "accent
+ * border", so the ranked rows were indistinguishable from a keyboard cursor.
+ * Selected is the quieter of the two.
  */
 .item[data-selected='true'] {
   border-color: var(--ink-3);
@@ -921,33 +795,6 @@ body[data-focus-mode='true'][data-view='today'] #today .item__title {
 .item[data-priority='true'] {
   border-left: 3px solid var(--accent);
 }
-
-/* The one you committed to. Four reinforcing cues, because missing it is the
- * whole failure mode: a thick bar, a wash, a ring, and a live clock on the row. */
-.item[data-running='true'],
-.item[data-running='true'][data-selected='true'] {
-  border-color: var(--accent);
-  border-left: 5px solid var(--accent);
-  background: var(--accent-wash);
-  box-shadow: 0 0 0 2px var(--accent);
-}
-.item[data-running='true'][data-overrun='true'],
-.item[data-running='true'][data-overrun='true'][data-selected='true'] {
-  border-color: var(--serious);
-  border-left-color: var(--serious);
-  box-shadow: 0 0 0 2px var(--serious);
-}
-
-/* While a session runs, everything else recedes — the competing rows are the
- * distraction the timer exists to resist. Hover brings one back so the list is
- * still usable without stopping the clock. */
-body[data-session-active='true'] #today .item:not([data-running='true']) {
-  opacity: 0.45;
-}
-body[data-session-active='true'] #today .item:not([data-running='true']):hover,
-body[data-session-active='true'] #today .item:not([data-running='true']):focus-within {
-  opacity: 1;
-}
 .item[data-status='done'] .item__title,
 .item[data-status='dismissed'] .item__title {
   color: var(--ink-3);
@@ -1058,17 +905,6 @@ body[data-session-active='true'] #today .item:not([data-running='true']):focus-w
   font-weight: 600;
   font-variant-numeric: tabular-nums;
 }
-.pill--running {
-  border-color: transparent;
-  background: var(--accent);
-  color: #fff;
-  font-weight: 600;
-  font-variant-numeric: tabular-nums;
-}
-.item[data-overrun='true'] .pill--running {
-  background: var(--serious);
-  color: #1a1a19;
-}
 .pill--objective {
   border-color: var(--accent);
   color: var(--accent);
@@ -1563,7 +1399,7 @@ kbd {
 }
 
 /*
- * Which view is showing. Focus mode is scoped to Today (see the rules above).
+ * Which view is showing.
  *
  * One rule per panel per view rather than `:not()`, because a view name nobody
  * has written a rule for should show nothing rather than everything at once.
@@ -1629,6 +1465,7 @@ body[data-view='settings'] .layout {
 }
 
 .item--pull[data-status='snoozed'] .item__title,
+.item--pull[data-nudged='true'] .item__title,
 .item--ticket[data-status='snoozed'] .item__title {
   color: var(--ink-3);
 }
@@ -1710,12 +1547,17 @@ body[data-view='settings'] .layout {
   padding-right: 104px;
   font-size: 13.5px;
 }
-/* The exceptions, the notes and the note form all span both columns. */
+/* The exceptions, GitHub's evidence, the notes and the note form all span both columns. */
 #tickets .item__meta--extra,
+#tickets .item__reason,
 #tickets .item__notes,
 #tickets .note-form {
   grid-column: 1 / -1;
 }
+/* The grid's gap already spaces it from the line above. */
+#tickets .item__reason {
+  margin-top: 0;
+}
 
 /*
  * The switch between the ticket tab's two views: what is out of sync, and what