zakarya/puzzles
1
0
Fork 0
mirror of git://git.tartarus.org/simon/puzzles.git synced 2025-04-21 16:05:44 -07:00
Code Issues Packages Projects Releases Wiki Activity

js: Simplify menu CSS a little

Browse Source 
Mostly removing redundant rules and simplifying selectors.
This commit is contained in:
Ben Harris
2022-11-12 10:37:07 +00:00
parent 60d2bf5930
commit 27d41e7cf0
1 changed files with 23 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
html/jspage.pl
View File

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