[feature/frontend] Hide "engagement" stats, edits, and other info under a little drop down to unclutter status info bar (#4021)

* dick about with stats a bit

* more dicking abuot

* lil tweaks

* more about-dicking

* weee

* comments

* fixie uppie

4 files changed, 47 insertions, 0 deletions

diff --git a/web/assets/themes/ecks-pee.css b/web/assets/themes/ecks-pee.css
index a85e5da0b..bd479c67b 100644
--- a/web/assets/themes/ecks-pee.css
+++ b/web/assets/themes/ecks-pee.css
@@ -238,6 +238,31 @@ blockquote {
   border-right: 1px solid #001ea0;
 }
 
+/* Status info dropdown button */
+.status .status-info .status-stats details.stats-more-info > summary {
+  color: var(--button-fg);
+  background: var(--ecks-pee-start-button);
+  border-left: 1px solid var(--ecks-pee-darkest-green);
+  border-right: 1px solid var(--ecks-pee-darkest-green);
+}
+.status .status-info .status-stats details.stats-more-info > summary:hover {
+  outline: 0;
+  background: var(--ecks-pee-light-green);
+}
+
+/* Status info dropdown content */
+.status .status-info .status-stats .stats-more-info-content,
+.status.expanded .status-info .status-stats .stats-more-info-content {
+  color: black;
+  text-shadow: none;
+  background: var(--ecks-pee-beige);
+  border: 0.2rem outset var(--ecks-pee-darker-beige);
+  border-radius: 0;
+}
+.status .status-info .status-stats .stats-item.edit-timeline {
+  border-top: var(--ecks-pee-dotted-trim);
+}
+
 /* Button stuff */
 button, .button {
   border-left: 1px solid var(--ecks-pee-darkest-green);
diff --git a/web/assets/themes/midnight-trip.css b/web/assets/themes/midnight-trip.css
index 059e4ac8e..3f8619098 100644
--- a/web/assets/themes/midnight-trip.css
+++ b/web/assets/themes/midnight-trip.css
@@ -129,6 +129,16 @@ html, body {
   background: black;
 }
 
+/* Status info dropdown content */
+.status.expanded .status-info .status-stats .stats-more-info-content,
+.status .status-info .status-stats .stats-more-info-content {
+  background-color: black;
+  border: 0.25rem solid var(--magenta);
+}
+.status .status-info .status-stats .stats-item.edit-timeline {
+  border-top: 0.15rem dotted var(--acid-green);
+}
+
 /* Back + next links */
 .backnextlinks {
   background: var(--gray1);
diff --git a/web/assets/themes/moonlight-hunt.css b/web/assets/themes/moonlight-hunt.css
index 630c7cd21..8dcfb0bb6 100644
--- a/web/assets/themes/moonlight-hunt.css
+++ b/web/assets/themes/moonlight-hunt.css
@@ -143,6 +143,12 @@ blockquote {
   background: var(--outer-space);
 }
 
+/* Status info dropdown content */
+.status.expanded .status-info .status-stats .stats-more-info-content,
+.status .status-info .status-stats .stats-more-info-content {
+  background: var(--outer-space);
+}
+
 /* Make show more/less buttons more legible */
 .status .button {
   border: 1px solid var(--feral-orange);
diff --git a/web/assets/themes/soft.css b/web/assets/themes/soft.css
index 691558bee..01a8729f7 100644
--- a/web/assets/themes/soft.css
+++ b/web/assets/themes/soft.css
@@ -142,3 +142,9 @@ code, code[class*="language-"] {
 blockquote {
 	background-color: var(--soft-lilac-translucent);
 }
+
+/* Status info dropdown content */
+.status.expanded .status-info .status-stats .stats-more-info-content,
+.status .status-info .status-stats .stats-more-info-content {
+  background: var(--soft-pink);
+}