ref: 27d41e7cf0f2c21550f495325230201ad0a1be7b
parent: 60d2bf5930d9fbac8860fa440fdf4f5e12c134b8
author: Ben Harris <bjh21@bjh21.me.uk>
date: Sat Nov 12 05:37:07 EST 2022
js: Simplify menu CSS a little Mostly removing redundant rules and simplifying selectors.
--- a/html/jspage.pl
+++ b/html/jspage.pl
@@ -75,25 +75,29 @@
<title>${puzzlename}, ${unfinishedtitlefragment}from Simon Tatham's Portable Puzzle Collection</title> <script defer type="text/javascript" src="${jspath}${filename}.js"></script><style class="text/css">
-/* Margins and centring on the top-level div for the game menu */
-#gamemenu { margin-top: 0; margin-bottom: 0.3em; text-align: center }+/* Top-level form for the game menu */
+#gamemenu {+ margin-top: 0;
+ margin-bottom: 0.375em;
+ /* Add a little mild text formatting */
+ font-weight: bold;
+ font-size: 0.8em;
+ text-align: center
+}
-/* Inside that div, the main menu bar and every submenu inside it is a <ul> */
+/* Inside that form, the main menu bar and every submenu inside it is a <ul> */
#gamemenu ul {list-style: none; /* get rid of the normal unordered-list bullets */
/* make top-level menu bar items appear side by side */
- display: inline-flex;
+ display: flex;
flex-wrap: wrap;
justify-content: center;
- position: relative; /* allow submenus to position themselves near parent */
margin: 0;
padding: 0;
}
/* Individual menu items are <li> elements within such a <ul> */
-#gamemenu ul li {- /* Add a little mild text formatting */
- font-weight: bold; font-size: 0.8em;
+#gamemenu li {/* Suppress the text-selection I-beam pointer */
cursor: default;
/* Surround each menu item with a border. */
@@ -105,36 +109,29 @@
position: relative;
}
-#gamemenu ul li.separator {+#gamemenu li.separator {width: 1.5em;
- color: transparent;
border: 0;
}
/* The interactive contents of menu items are their child elements. */
-#gamemenu ul li > * {+#gamemenu li > * {/* Line height and padding appropriate to top-level menu items */
- padding-left: 0.75em; padding-right: 0.75em;
- padding-top: 0.2em; padding-bottom: 0.2em;
+ padding: 0.2em 0.75em;
margin: 0;
display: block;
}
-#gamemenu ul :disabled {+#gamemenu :disabled {/* Grey out disabled buttons */
color: rgba(0,0,0,0.5);
}
-#gamemenu ul li > :hover {+#gamemenu li > :hover:not(:disabled) {/* When the mouse is over a menu item, highlight it */
background: rgba(0,0,0,0.3);
}
-#gamemenu ul li > :disabled:hover {- /* Disabled menu items don't get a highlight on mouse hover */
- background: inherit;
-}
-
\@media (max-width:18em) {/* Suppress some words in top-level menu items when viewport
* is very small */
@@ -151,7 +148,7 @@
position: absolute;
top: 100%;
left: 0;
- /* Go back to vertical stacking, for drop-down submenus */
+ /* Switch to vertical stacking for drop-down submenus */
flex-direction: column;
/* We must specify an explicit background colour for submenus, because
* they must be opaque (don't want other page contents showing through
@@ -168,13 +165,11 @@
}
/* Menu items in second-level menus and below */
-#gamemenu ul ul li {+#gamemenu li li {/* Inhibit wrapping, so the submenu will expand its width as needed. */
white-space: nowrap;
/* Override the text-align:center from above */
text-align: left;
- /* Don't make the text any smaller than the previous level of menu */
- font-size: 100%;
}
#gamemenu ul ul ul {@@ -189,7 +184,7 @@
left: inherit; right: 100%;
}
-#gamemenu ul li:hover > * > ul {+#gamemenu :hover > ul {/* Last but by no means least, the all-important line that makes
* submenus be displayed! Any <ul> whose parent <li> is being
* hovered over gets display:flex overriding the display:none
@@ -202,7 +197,6 @@
* removing the default button styling. */
appearance: none;
font: inherit;
- padding: initial;
color: inherit;
background: initial;
border: initial;
@@ -218,7 +212,6 @@
margin: initial;
font: inherit;
padding-right: 0.5em;
- color: transparent;
}
#gamemenu .tick::before {@@ -225,9 +218,9 @@
content: "\\2713";
}
-#gamemenu .tick:checked {- /* Tick for a selected menu entry. */
- color: inherit;
+#gamemenu .tick:not(:checked) {+ /* Tick for an unselected menu entry. */
+ color: transparent;
}
#statusbar {