Use detail/summary styling as popup menu only for header.

Add common checkbox menu styling.

1 files changed, 11 insertions, 8 deletions

diff --git a/public/common/client.css b/public/common/client.css
index 53b6a38..f328d12 100644
--- a/public/common/client.css
+++ b/public/common/client.css
@@ -12,7 +12,7 @@ html {
 	-webkit-tap-highlight-color: transparent; /* disable blue flashes when tapping on chrome mobile */
 }
 
-summary::-webkit-details-marker {
+header summary::-webkit-details-marker {
 	display: none;
 }
 
@@ -24,7 +24,7 @@ html {
 	user-select: text;
 }
 
-summary img, button img, menu img {
+header summary img, button img, menu img {
 	pointer-events: none;
 }
 
@@ -270,12 +270,12 @@ header.replay {
 
 /* MENUS AND ICONS */
 
-details menu {
+header details menu {
 	display: block;
 	min-width: 140px;
 }
 
-summary img, #toolbar button img {
+header summary img, #toolbar button img {
 	display: block;
 	height: 36px;
 	padding: 4px;
@@ -292,13 +292,13 @@ summary img, #toolbar button img {
 	margin: 0;
 }
 
-details[open] > summary { background-color: #0004; }
+header details[open] > summary { background-color: #0004; }
 @media (hover: hover) {
-	summary:hover, #toolbar button:hover { background-color: #0004; }
+	header summary:hover, #toolbar button:hover { background-color: #0004; }
 }
-summary:active, #toolbar button:active { background-color: #0008; }
+header summary:active, #toolbar button:active { background-color: #0008; }
 
-summary {
+header summary {
 	cursor: pointer;
 	list-style: none;
 }
@@ -323,6 +323,9 @@ menu li {
 	cursor: pointer;
 }
 
+menu li.checked::before { content: "\2714  " }
+menu li.unchecked::before { content: "\2714  "; color:transparent; }
+
 menu li a {
 	display: block;
 	margin: -4px -8px;