nxemu/lang/english/css/config.css

:root {
  --color-config-background: #181818;
  --color-config-page: #31363B;
  --color-config-page-border: #505050;
}

html
{
  background: var(--color-config-background);
}

button
{
  color: #eff0f1;
  background: #232728;
  border: 1px solid #55575a;
  font-family: 'Segoe UI', Arial, sans-serif;
  font-size: 0.8rem;
  padding: 0.2rem;
  min-width: 5rem;
}

div.ConfigPage
{
  background: var(--color-config-background);
  flow: horizontal;
  width: 100%%;
  height: 100%%;
}

popup.tooltip
{
  background: #4f6459;
  border: 1px solid #6a6a6a;
  padding: 0.5rem;
  color: #eff0f1;
  font-family: 'Segoe UI', Arial, sans-serif;
  font-size: 0.8rem;
}

.config-header button
{
  padding: 0.15rem;
  margin:  0 0 0 0.3rem;
}

button:hover
{
  border: 1px solid #3cafe9;
}

button:active
{
  background: #3cafe9;
}

.tabs {
  display: flex;
  font-size: 0;
}

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

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

.tab-button:active {
  background: #2b2f32;
}

.tab-button.active {
  background: var(--color-config-page);
  border-color: var(--color-config-page-border);
  border-bottom: 1px solid var(--color-config-page);
}

.input-group 
{
  position: relative;
  background-color: var(--color-config-page);
  border: 1px solid #55575a;
  padding: 1.2rem 0.5rem 0.5rem 0.5rem;
  margin: 0 0 1rem 0;
}

.input-grid-directional {
  text-align: center;
  flow: grid( 1 1, 2 3, 4 4, 5 6, 7 7, 8 8);
  padding: 0.5rem 0 0;
}

.group-title 
{
  position: absolute;
  top: -0.5rem;
  left: 0;
  margin: 0 auto;
  background-color: var(--color-config-page);
  padding: 0 6px;
  font-size: 0.8rem;
  color: #f0f0f0;
}

.input-row
{
  display: inline-block;
  position: relative;
  background-color: var(--color-config-page);
  border: 1px solid #55575a;
  padding: 0.4em 0.2rem 0.2rem 0.2rem;
  border-radius: 2px;
  margin: 0 50%% 0.9rem 50%%;
  width: 50%%;
}

.input-row span
{
  position: absolute;
  top: -0.7rem;
  left: 0;
  margin: 0 auto;
  background-color: var(--color-config-page);
  padding: 0 6px;
  font-size: 0.8rem;
  color: #f0f0f0;
}

.input-row button
{
  min-width: 3.8rem;
  height: 1.4rem;
}

.footer
{
  padding: 0.5rem 0 0;
  text-align: right;
}

#ConfigContents {
  width: 100%%;
  height: 100%%;
  color: #ffffff;
}

  @set styled-select < std-select-dropdown {
    :root {
      color: #FFF;
      padding: 0.1em;
      margin: 0 0 0.3em 0;
      width: 100%%;
      border: 1px solid #54575b;
      border-radius: .2em;
      background: #2F2F31;
    }
    :root:disabled,
    :root[disabled] {
      background-color: #1a1a1a !important;
      color: #666666 !important;
      border-color: #333333 !important;
      cursor: not-allowed;
      opacity: 0.6;
    }
    :root:focus,
    :root:active,
    :root:hover
    {
      border-color: #3daee9;
    }
    :root:hover {
      background: #3C3C3C;
    }
    :root > popup.list {
      background-color: #2B2B2B;
      border-color: #1F1F1F;
      color: #FFF;
    }
    :root option {
      vertical-align: middle;
      padding: 0.3em;
    }
    :root > button {
      fill: #FFF;
    }
  }
  select:not([type]) {
    style-set: styled-select;
  }
	
ComboBox
{
  width: 100%%;
}

input[type="checkbox"] {
  appearance:none;
  height: 1em;
  width: 1em;
  border: 1px solid #818183;
  background: none;
  border-radius: 0.3em;
  margin: 0 0.3em 0 0;
}

input[type="checkbox"]:disabled,
input[type="checkbox"][disabled]
{
  background-color: #1a1a1a !important;
  opacity: 0.4;
}

input[type="checkbox"]:checked {
   background: no-repeat 50% 50%;   
   background-image: url(stock:checkmark);
   background-size: 0.7em;
}

input[type="text"] {
  color: #FFF;
  padding: 0.1em;
  margin: 0 0 0.3em 0;
  width: 100%%;
  border: 1px solid #54575b;
  border-radius: .2em;
  background: #2F2F31;
}

input[type="text"]:disabled,
input[type="text"][disabled] {
  background-color: #1a1a1a !important;
  color: #666666 !important;
  border-color: #333333 !important;
  cursor: not-allowed;
  opacity: 0.6;
}

input[type="text"]:focus,
input[type="text"]:active
{
  border-color: #3daee9;
}

input[type="text"]:hover {
  background: #3C3C3C;
}

input[type="text"]:disabled:hover,
input[type="text"][disabled]:hover {
  background-color: #1a1a1a !important;
}

label:disabled {
  color: #666666 !important;
  opacity: 0.6;
}

.hotkeys-page
{
  width: 100%%;
  min-height: 12em;
}

.hotkeys-hint
{
  color: #bdc3c7;
  font-size: 0.85rem;
  margin-bottom: 0.75rem;
}

.hotkeys-table
{
  width: 100%%;
  min-width: 28em;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.hotkeys-table thead tr
{
  background: #2b2f32;
}

.hotkeys-table th,
.hotkeys-table td
{
  border: 1px solid var(--color-config-page-border);
  padding: 0.35rem 0.75rem;
  text-align: left;
  vertical-align: middle;
}

.hotkeys-table th:last-child,
.hotkeys-table td.hotkey-binding
{
  text-align: right;
  min-width: 16em;
  white-space: nowrap;
}

.hotkey-action
{
  width: *;
}

.hotkey-binding
{
  cursor: pointer;
  font-family: Consolas, 'Segoe UI', monospace;
}

.hotkey-binding:hover
{
  background: #3a3f44;
}