.menu-bar { position: relative; display: flex; align-items: center; gap: 2px; height: 24px; padding: 1px 6px; font-size: 13px; line-height: 13px; z-index: 5; } .menu-item { position: relative; } .menu-button { height: 20px; min-width: 54px; padding: 0 8px; color: #000000; background: transparent; border: 1px solid transparent; font-family: inherit; font-size: 13px; text-align: left; } .menu-button:hover, .menu-button:focus-visible { border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid #808080; border-bottom: 1px solid #808080; outline: none; } .menu-popup { position: absolute; top: 22px; left: 0; min-width: 198px; padding: 2px; display: none; background: var(--w98-gray); border-top: 2px solid #ffffff; border-left: 2px solid #ffffff; border-right: 2px solid #000000; border-bottom: 2px solid #000000; box-shadow: 3px 3px 0 rgba(0,0,0,.35); z-index: 20; } .menu-item.is-open .menu-popup { display: block; } .menu-action { width: 100%; min-height: 22px; display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 2px 6px; color: #000000; background: transparent; border: 0; font-family: inherit; font-size: 12px; text-align: left; } .menu-action[aria-disabled="true"] { color: #808080; text-shadow: 1px 1px 0 #ffffff; } .menu-action[aria-disabled="true"] img { opacity: .55; filter: grayscale(1); } .menu-action[aria-disabled="true"]:hover, .menu-action[aria-disabled="true"]:focus-visible { color: #808080; background: transparent; } .menu-action img { width: 16px; height: 16px; object-fit: contain; image-rendering: pixelated; } .menu-action:hover, .menu-action:focus-visible { color: #ffffff; background: #000078; outline: none; } .menu-separator { height: 1px; margin: 3px 2px; background: #808080; border-bottom: 1px solid #ffffff; } .shortcut { color: #555555; } .menu-action:hover .shortcut { color: #ffffff; }