nxemu/lang/english/html/system_config.html

<html window-frame="solid-with-shadow" window-icon="window-icon.png">
  <head>
    <link href="base.css" rel="stylesheet" type="text/css" />
    <link href="dialog.css" rel="stylesheet" type="text/css" />
    <link href="config.css" rel="stylesheet" type="text/css" />
    <link href="volume_slider.css" rel="stylesheet" type="text/css" />
    <title>NxEmu Configuration</title>
<style>
html {
  margin: 0;
  padding: 0;
  overflow: hidden;
  width: *;
  height: *;
}

body {
  margin: 0;
  flow: vertical;
  width: *;
  height: *;
}

  #MainTabNav {
    width: 12em;
    height: *;
    border: 1px solid #54575b;
    border-radius: 0.5em;
    background-color: color(color-config-page);
    margin: 0 0.4em 0 0;
    color: #ffffff;
    font-size: 0.9em;
  }

  #MainTabNav > Page:first-child
  {
    border-radius: 0.5em 0.5em 0 0;
  }

  #MainTabNav > Page
  {
    padding: 0.2em 0.5em;
  }

  #MainTabNav > Page:visited
  {
    background: #b3d9f7;
    color: #303030;
  }

  .checkbox-row,
  .slider-row
  {
    margin: 0 0 1em 0;
  }

  .inputtext-row
  {
    margin: 0 0 0.5em 0;
  }

  .form-row
  {
    flow: horizontal;
    width: *;
    vertical-align: middle;
  }

  .form-row .left,
  .form-row .right
  {
    width: *;
    vertical-align: middle;
  }

  .form-row .right
  {
    flow: horizontal;
  }

  .form-row .right ComboBox,
  .form-row .right input[type="text"]
  {
    display: block;
    width: *;
  }

  .form-row .right input[type="hslider"]
  {
    width: *;
  }

  .volume-slider
  {
    display: block;
    position: relative;
    width: *;
    flow: vertical;
  }

  .volume-slider > #audioVolume
  {
    style-set: volume-slider-control;
    position: relative;
    z-index: 1;
    margin: 3dip 0;
  }

  #VolumeDisplay
  {
    display: block;
    width: 5.2em;
    min-width: 5.2em;
    white-space: nowrap;
    text-align: right;
  }
PageNav.page_tabs {
  display: flex;
}

PageNav.page_tabs page {
  background: #2b2f32;
  border: 1px solid #55575a;
  border-bottom: 1px solid color(color-config-page-border);
  border-radius: 2px 2px 0 0;
  color: #eff0f1;
  font-family: 'Segoe UI', Arial, sans-serif;
  font-size: 1rem;
  padding: 0.2rem 1.3rem 0.2rem 1.3rem;
  margin: 0;
  position: relative;
  z-index: 2; 
  margin-bottom: -1px;
  min-width: 2rem;
  display: inline-block;
  width: max-content;
}

PageNav.page_tabs page:hover {
  border: 1px solid #55575a;
  border-bottom: 1px solid color(color-config-page-border);
}

PageNav.page_tabs page:visited {
  background: color(color-config-page);
  border-color: color(color-config-page-border);
  border-bottom: 1px solid color(color-config-page);
}

PageNav.page_tabs page.active {
  background: color(color-config-page);
  border-color: color(color-config-page-border);
  border-bottom: 1px solid color(color-config-page);
}

.page_content
{
  background: color(color-config-page);
  border: 1px solid color(color-config-page-border);
  width: *;
  height: *;
  flow: horizontal;
  padding: 1em 1em 0 1em;
  font-family: var(font-ui), Arial, sans-serif;
  font-size: 0.9rem;
  color: #eff0f1;
}

#gameDirectoryList,
#addOnDirectoryList {
  display: block;
  width: *;
}

#gameDirectoryList select,
#addOnDirectoryList select {
  background-color: #1e1e1e;
  border: 1px solid #404040;
  border-radius: 4px;
  box-sizing: border-box;
  height: 8rem;
  max-height: 8rem;
  overflow-y: auto;
  padding: 0.1rem;
  margin-bottom: 1rem;
  width: *;
}

#gameDirectoryList option,
#addOnDirectoryList option
{
  padding: 0.2rem 0.3rem;
  margin: 0.2rem 0.3rem;
  border-radius: 3px;
  color: white;
}

#gameDirectoryList option:current,
#addOnDirectoryList option:current
{
  color: #1e1e1e;
}

body > .footer
{
  padding: 0.5rem 0.9rem 0.5rem 0;
}

</style>
  </head>
  <header>
    <window-caption role=window-caption><img src="window-icon-32.png" /><span>NxEmu Configuration</span></window-caption>
    <window-buttons>
      <window-button role="window-close"></window-button>
    </window-buttons>
  </header>
<body>
  <div class="ConfigPage" tooltip-host>
    <PageNav target="ConfigContents" id="MainTabNav">
      <Page contents="system_config_general.html" label="General" Name="General" />
      <Page contents="system_config_game_browser.html" label="Game Browser" Name="GameBrowser" />
      <Page contents="system_config_graphics.html" label="Graphics" Name="Graphics" />
      <Page contents="system_config_audio.html" label="Audio" Name="Audio" />
      <Page contents="system_config_system_tab.html" label="System" Name="System" />
      <Page contents="system_config_profiles.html" label="Profiles" Name="Profiles" />
    </PageNav>
    <div id="ConfigContents" />
  </div>
  <div class="footer">
    <button role="window-ok">OK</button>
    <button role="window-close">Cancel</button>
  </div>
</body>
</html>