/* ============================================================
   Pipezoom - activitysplash.css

   The Dashboard's cards under Splash of Color: the 2 run pills, the
   week and month bars, the day's own bar and the run a pill opens.
   activity.css holds the same cards on the 4 plain themes, and the
   css/activity.css set in includes/manifest.php loads this file second.
   Globals: none.
   Notes: docs/notes/app.pipezoom.com/css/activitysplash.css.md
   ============================================================ */

/* Splash of Color
   Every rule here matches only while the switch is on; a mark wears the hue and a button its -btn step. */

/* The 2 run pills: the call run green and the conversation run purple */
[data-splash="on"] .act-streak[data-hue="green"]{background:var(--hue-green-btn);}
[data-splash="on"] .act-streak[data-hue="green"]:hover,
[data-splash="on"] .act-streak[data-hue="green"][data-zero="true"]:hover{background:var(--hue-green);}
[data-splash="on"] .act-streak[data-hue="purple"]{background:var(--hue-purple-btn);}
[data-splash="on"] .act-streak[data-hue="purple"]:hover,
[data-splash="on"] .act-streak[data-hue="purple"][data-zero="true"]:hover{background:var(--hue-purple);}

/* The week and month bars wear the hue of their metric's cards */
[data-splash="on"] .mprog-row[data-hue="green"] .mprog-fill{background:var(--hue-green-btn);}
[data-splash="on"] .mprog-row[data-hue="blue"] .mprog-fill{background:var(--hue-blue-btn);}
[data-splash="on"] .mprog-row[data-hue="purple"] .mprog-fill{background:var(--hue-purple-btn);}

/* The day's own bar and glyph take the hue of the metric's weekly bar */
[data-splash="on"] .act-row[data-hue="green"] .act-bar-fill{background:var(--hue-green-btn);}
[data-splash="on"] .act-row[data-hue="blue"] .act-bar-fill{background:var(--hue-blue-btn);}
[data-splash="on"] .act-row[data-hue="purple"] .act-bar-fill{background:var(--hue-purple-btn);}
[data-splash="on"] .act-row[data-hue="green"] .act-ic{color:var(--hue-green);}
[data-splash="on"] .act-row[data-hue="blue"] .act-ic{color:var(--hue-blue);}
[data-splash="on"] .act-row[data-hue="purple"] .act-ic{color:var(--hue-purple);}

/* The run behind a pill
   It wears the pill's color. Because a day stepped over and a day missed differ, a day off takes the blue. */
[data-splash="on"] .strk-panel[data-hue="green"] .strk-num:not(.strk-num-alt){background:var(--hue-green-btn);}
[data-splash="on"] .strk-panel[data-hue="purple"] .strk-num:not(.strk-num-alt){background:var(--hue-purple-btn);}
[data-splash="on"] .strk-panel[data-hue="purple"] .strk-row[data-state="met"] .strk-mark{background:var(--hue-purple-btn);border-color:var(--hue-purple-btn);}
[data-splash="on"] .strk-panel[data-hue="purple"] .strk-row[data-state="met"] .strk-said{color:var(--hue-purple);}
[data-splash="on"] .strk-row[data-state="off"] .strk-mark{background:var(--hue-blue-btn);border-color:var(--hue-blue-btn);}