documentation

js/menu.css

@@ -0,0 +1,113 @@
+div.menubar {
+   display: flex;
+   align-items: center;
+   width: 100%;
+   top: 0;
+   left: 0;
+   height: 2em;
+   background: #e0e0e0;
+   border-bottom: 1px solid black;
+   margin-bottom: 2px;
+}
+
+div.menubar-item {
+   display: inline-block;
+   height: 100%;
+   align-content: center;
+   padding-left: 0.5em;
+   padding-right: 0.5em;
+   cursor: default;
+}
+
+div.menu, div.submenu {
+   display: flex;
+   flex-direction: column;
+   background: #e0e0e0;
+   border: 1px solid black;
+   z-index: 9999;
+   margin-top: 0.4em;
+   margin-left: -0.5em;
+   position: absolute;
+}
+
+div.submenu {
+   position: absolute;
+   left: calc(100% + 1em);
+   top: 1em;
+}
+
+div.menu-item {
+   min-width: 150px;
+   height: 2em;
+   padding-left: 0.5em;
+   align-content: center;
+   align-items: center;
+   display: flex;
+   cursor: default;
+}
+
+div.menu-item span.menu-icon {
+   width: 2em;
+   height: 2em;
+   padding: 0;
+   margin: 0;
+   display: flex;
+   padding-left: 3px;
+}
+
+div.menu-item span.menu-name {
+   padding-left: 0.25em;
+   display: inline-block;
+   padding-right: 0.5em;
+}
+
+div.menu-item span.menu-submenu {
+   float: right;
+}
+
+span.menu-icon img {
+   width: 85%;
+   height: 85%;
+   align-self: center;
+}
+
+div.menu-item.separator {
+   border-top: 1px solid black;
+}
+
+div.menubar-item:hover, div.menu-item:hover {
+   background: #c0c0c0;;
+}
+
+.popup-menu, .popup-submenu {
+	display: flex;
+	flex-direction: column;
+	margin: 5px;
+	padding: 5px;
+	position: absolute;
+	z-index: 9999;
+	border: 1px solid black;
+	background: #e0e0e0;
+	color: black;
+}
+
+.popup-submenu {
+	display: none;
+}
+
+.menubar .menu-item span.menu-icon, .popup-menu .menu-item span.menu-icon {
+	min-width: unset;
+	width: unset;
+}
+
+.menubar .menu-item {
+	min-width: unset;
+	width: unset;
+	color: black;
+}
+
+.menu-item span.menu-name {
+	text-wrap: nowrap;
+}
+
+