bellbind · June 8, 2022 13:07 · bellbind · Jun 6, 2022
diff --git a/index.html b/index.html
 <!doctype html>
 <html>
  <head>
    <meta charset="utf-8">
    <style>
      /* shadow button */
      button {
          border-style: none;
          border-radius: 0.5em;
          color: inherit;
          background-color: transparent;
          margin: 0.4em;
      }
      button:hover {
          box-shadow: 0 0 0.3em -0.15em inset, 0 0 0.6em -0.15em;
      }
      button:active {
          box-shadow: 0 0 0.6em -0.15em inset, 0 0 0.3em -0.15em;
      }          

      /* dropdown menu */
      .dropdown {
          position: relative;
      }
      .dropdown > menu {
          position: absolute;
          top: 0;
          display: none;
          flex-direction: column;
          margin: 0;
      }
      .dropdown > button:active ~ menu {
          display: flex;
      }
      .dropdown > menu:hover {
          display: flex;
      }
      menu:has(button:active) {
          display: none;
      }

      /* color scheme */
      @media (prefers-color-scheme: light) {
          .menubar1 {
              background-color: hsl(0, 0%, 75%);
          }
          .menubar2 {
              background-color: hsl(0, 0%, 50%);
          }
      }
      @media (prefers-color-scheme: dark) {
          body {
              color: #ededed;
              background-color: #212121;
          }
          .menubar1 {
              background-color: hsl(0, 0%, 25%);
          }
          .menubar2 {
              background-color: hsl(0, 0%, 50%);
          }

      }
    </style>
  </head>
  <body ontouchstart="">
    <div style="display: flex; justify-content: center;">
      <button>Cancel</button>
      <button>OK</button>
    </div>
    <div class="menubar1" style="display: flex; justify-content: flex-end;">
      <div class="dropdown">
        <button>&equiv;</button>
        <menu class="menubar1" style="right: 0;">
          <button>Profile</button>
          <button>Config</button>
          <button>Exit</button>
        </menu>
      </div>
    </div>
    <div class="menubar2" style="display: flex;">
      <div class="dropdown">
        <button>&#65049;</button>
        <menu class="menubar2">
          <button>Edit</button>
          <button>Copy</button>
          <button>Paste</button>
        </menu>
      </div>
    </div>
  </body>
 </html>
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<style>
	/* shadow button */
	button {
	border-style: none;
	border-radius: 0.5em;
	color: inherit;
	background-color: transparent;
	margin: 0.4em;
	}
	button:hover {
	box-shadow: 0 0 0.3em -0.15em inset, 0 0 0.6em -0.15em;
	}
	button:active {
	box-shadow: 0 0 0.6em -0.15em inset, 0 0 0.3em -0.15em;
	}

	/* dropdown menu */
	.dropdown {
	position: relative;
	}
	.dropdown > menu {
	position: absolute;
	top: 0;
	display: none;
	flex-direction: column;
	margin: 0;
	}
	.dropdown > button:active ~ menu {
	display: flex;
	}
	.dropdown > menu:hover {
	display: flex;
	}
	menu:has(button:active) {
	display: none;
	}

	/* color scheme */
	@media (prefers-color-scheme: light) {
	.menubar1 {
	background-color: hsl(0, 0%, 75%);
	}
	.menubar2 {
	background-color: hsl(0, 0%, 50%);
	}
	}
	@media (prefers-color-scheme: dark) {
	body {
	color: #ededed;
	background-color: #212121;
	}
	.menubar1 {
	background-color: hsl(0, 0%, 25%);
	}
	.menubar2 {
	background-color: hsl(0, 0%, 50%);
	}

	}
	</style>
	</head>
	<body ontouchstart="">
	<div style="display: flex; justify-content: center;">
	<button>Cancel</button>
	<button>OK</button>
	</div>
	<div class="menubar1" style="display: flex; justify-content: flex-end;">
	<div class="dropdown">
	<button>&equiv;</button>
	<menu class="menubar1" style="right: 0;">
	<button>Profile</button>
	<button>Config</button>
	<button>Exit</button>
	</menu>
	</div>
	</div>
	<div class="menubar2" style="display: flex;">
	<div class="dropdown">
	<button>︙</button>
	<menu class="menubar2">
	<button>Edit</button>
	<button>Copy</button>
	<button>Paste</button>
	</menu>
	</div>
	</div>
	</body>
	</html>