From b16ed2a2d2d1e8c3249e42396b021023f1e66033 Mon Sep 17 00:00:00 2001
From: Nicol <vingle@users.noreply.github.com>
Date: Wed, 6 Dec 2023 14:10:29 +0000
Subject: [PATCH] Adds utility class: .crm-accordion-light

A style to match Civi's transparent background, non-bold accordion header.

Commit also adds hover states and comments.
---
 css/civicrm.css | 27 +++++++++++++++------------
 1 file changed, 15 insertions(+), 12 deletions(-)

diff --git a/css/civicrm.css b/css/civicrm.css
index 8699b5bccf..6bc8269f6c 100644
--- a/css/civicrm.css
+++ b/css/civicrm.css
@@ -2211,7 +2211,7 @@ div.crm-master-accordion-header a.helpicon {
   color: #3e3e3e;
 }
 
-.crm-container summary {
+.crm-container summary { /* default summary setting*/
   display: list-item;
   list-style: none;
   cursor: pointer;
@@ -2223,7 +2223,7 @@ div.crm-master-accordion-header a.helpicon {
 .crm-container .crm-accordion-header,
 .crm-container .collapsed .crm-accordion-header,
 .crm-container .crm-accordion-bold > summary,
-.crm-container details > .crm-accordion-header {
+.crm-container details > .crm-accordion-header { /* applies civi's default accordion header to summary & .crm-accrdion-bold */
   color: #f5f6f1;
   font-weight: normal;
   padding: 4px 8px;
@@ -2233,12 +2233,12 @@ div.crm-master-accordion-header a.helpicon {
 
 .crm-container div.crm-accordion-header,
 .crm-container details[open] > .crm-accordion-header,
-.crm-container .crm-accordion-bold[open] > summary {
-  border-radius: 4px 4px 0 0;
+.crm-container .crm-accordion-bold[open] > summary { /* open version of that */
+  border-radius: 4px 4px 0 0; 
 }
 
 .crm-container .crm-accordion-header.active,
-.crm-container .crm-accordion-bold > summary.active {
+.crm-container .crm-accordion-bold > summary.active { /* active version of that */
   font-weight: bold;
   background-color: #3e3e3e;
 }
@@ -2246,7 +2246,7 @@ div.crm-master-accordion-header a.helpicon {
 .crm-container .crm-accordion-header:hover,
 .crm-container .crm-accordion-header:focus,
 .crm-container .crm-accordion-bold > summary:hover,
-.crm-container .crm-accordion-bold > summary:focus {
+.crm-container .crm-accordion-bold > summary:focus { /* hover version of that */
   background-color: #2f2f2e;
 }
 
@@ -2254,17 +2254,20 @@ div.crm-master-accordion-header a.helpicon {
   background-color: #e8e8de;
 }
 
-.crm-container .crm-accordion-wrapper .crm-master-accordion-header {
+.crm-container .crm-accordion-wrapper .crm-master-accordion-header,
+.crm-container .crm-accordion-light > summary { /* adds a utility class to match civi's transparent accordion header style */
   background-color: transparent;
+  font-weight: normal;
   color: #3e3e3e;
-}
-
-.crm-container .crm-accordion-wrapper .crm-master-accordion-header {
-  font-size: 16px;
+  font-size: 1rem;
 }
 
 .crm-container .crm-master-accordion-header.crm-accordion-header:hover,
-.crm-container .crm-collapsible .collapsible-title:hover {
+.crm-container .crm-accordion-light > summary:hover,
+.crm-container .crm-collapsible .collapsible-title:hover,
+.crm-container .crm-master-accordion-header.crm-accordion-header:focus,
+.crm-container .crm-accordion-light > summary:focus,
+.crm-container .crm-collapsible .collapsible-title:focus { /* hover state for this */
   color: #121a2d;
 }
 
-- 
2.25.1