Demo: Fasl Menu

Press:

Ctrl + Alt + Shift + M

Or:

Right mouse button.

Or click:

80%

100%

Ctrl + S : Update

.module {
  height: 100vh; /* Use vh as a fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100);
  margin: 0 auto;
  max-width: 80%;
}

#content .module {
  height: calc( 100vh - 50px - 20px); /* Use vh as a fallback for browsers that do not support Custom Properties */
  height: calc(( var(--vh, 1vh) * 100 ) - 50px - 20px);
  margin: 0 auto;
  max-width: 80%;
}

.module__item {
  align-items: center;
  display: flex;
  height: 20%;
  justify-content: center;
  flex-direction: column;
  gap: 0px;
}
.module__item * {
  margin: 0;
}
.module__item:nth-child(odd) {
  background-color: #fff;
  color: #F73859;
}

.module__item:nth-child(even) {
  background-color: #F73859;
  color: #F1D08A;
}
</style>
<script src="/static/js/doc/demo/fasl/AllAuthCore.js?v=5"></script>
<script src="/static/js/doc/demo/fasl/fasl_menu_item.js?v=5"></script>
<script src="/static/js/doc/demo/fasl/fasl_menu_tool.js?v=5"></script>
<script src="/static/js/doc/demo/fasl/fast_links.js?v=9"></script>
<div id="demo_module_wrapp">
<div class="module">
  <div class="module__item">20%</div>
  <div class="module__item">40%</div>
  <div class="module__item"><h1>Demo: Fasl Menu</h1>
<h3>Press:</h3>
<h3>Ctrl + Alt + Shift + M</h3>
<h3>Or:</h3>
<h3>Right mouse button.</h3>
<div style="color: green;"><b>Or click: <button onclick="console.log('menu open');document.dispatchEvent(new Event('fasl_menu_2_open'));">Menu</button></b></div>
</div>
  <div class="module__item">80%</div>
  <div class="module__item">100%</div>
</div>
</div>