From 271fb7f47c060bf7ebb34e3cb71fc1b47aa23723 Mon Sep 17 00:00:00 2001 From: Ben Harris Date: Thu, 24 Nov 2022 16:13:57 +0000 Subject: js: More conventional marking of menu item types Menu items that open dialogue boxes are now marked with ellipses, while menu items that lead to submenus have pointing triangles. The triangles are implemented as SVG files embedded in data: URLs in the CSS, which is kind of silly but also works really well. There are suitable characters in Unicode, but some of my test systems don't have fonts containing them, so maybe the SVG is better. --- html/jspage.pl | 25 +++++++++++++++++++------ 1 file changed, 19 insertions(+), 6 deletions(-) (limited to 'html') diff --git a/html/jspage.pl b/html/jspage.pl index 03e8695..f5b1952 100755 --- a/html/jspage.pl +++ b/html/jspage.pl @@ -228,6 +228,19 @@ EOF color: transparent; } +#gamemenu li > div:after { + /* Downward arrow for submenu headings at the top level. */ + content: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='10'%20height='10'%3E%3Cpolygon%20points='0,5,10,5,5,10'/%3E%3C/svg%3E"); + margin-left: 0.5em; +} + +#gamemenu li li > div:after { + /* Rightward arrow marker for submenus on lower-level menus. */ + content: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='10'%20height='10'%3E%3Cpolygon%20points='0,0,10,5,0,10'/%3E%3C/svg%3E"); + float: right; +} + + #statusbar { overflow: hidden; height: 1.2em; @@ -307,13 +320,13 @@ ${unfinishedpara}