nxemu/lang/english/css/main_window.css

#MainContents
{
  width: 100%%;
  height: 100%%;
}

#StatusBar
{
  background: #31363b;
  flow: horizontal;
  color: #eff0f1;
  padding: 0.2em 1em;
  border-top: 1px solid #434242;
  font-family: 'Segoe UI', Arial, sans-serif;
  font-size: 0.8em;
  font-weight: 100;
  height: 1.6rem;
}

#StatusBar #volume,
#StatusBar #renderer
{
  border: 1px solid transparent;
  padding: 0.2em;
  display: inline-block;
}

#StatusBar #volume:hover,
#StatusBar #renderer:hover
{
  border: 1px solid #76797c;
}

#VolumePopup
{
  background: #31363b;
  border: 1px solid #434242;
  padding: 1em;
}

#RomBrowserPanel,
#LoadingPanel
{
  width: 100%%;
  height: 100%%;
  display: none;
}

rombrowser
{
  display: block;
  width: 100%%;
  height: 100%%;
  padding: 0.5rem 1rem;
  margin: 0;
}

rombrowser .games-title
{
  flow: horizontal;
}

rombrowser .buttons-container
{
  padding: 0.2rem 0 0;
}

rombrowser .config-button svg
{
  width: 1.5rem;
  height: 1.5rem;
  cursor: pointer;
}

rombrowser .config-button .outline
{
  fill: #eff0f1;
}

rombrowser .config-button:hover .outline
{
  fill: #232629;
}

rombrowser .config-button
{
  padding: 0.2rem;
}

rombrowser .config-button:hover
{
  background-color: #b3d9f6;
  border-radius: 4px;
}

rombrowser .games-title h1
{
  font-family: 'Segoe UI', Arial, sans-serif;
  font-size: 1.5rem;
  font-weight: 400;
  color: #eff0f1;
  padding: 0 0 0.6rem;
  margin: 0;
  width:*
}

rombrowser .games-grid
{
  height: 100%%;
  flow:horizontal-wrap;
  border-spacing: 1rem;
  overflow-y: auto;
  overflow-x: hidden;
}

rombrowser .games-grid[data-size="1"]
{
  border-spacing: 0.5rem;
}

rombrowser .rom-icon
{
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 5px;
}

rombrowser .rom-card-content
{
  width: 100%;
  height: 100%;
}

rombrowser .rom-card
{
  cursor: pointer;
  border-radius: 8px;
  border: 3px solid transparent;
}

rombrowser .rom-card:visited
{
  border: 3px solid #76B9ED;
  cursor: pointer;
}

rombrowser .games-grid[data-size="1"] .rom-card
{
  width: 6rem;
  height: 6rem;
}

rombrowser .games-grid[data-size="2"] .rom-card
{
  width: 8rem;
  height: 8rem;
}

rombrowser .games-grid[data-size="3"] .rom-card
{
  width: 10rem;
  height: 10rem;
}

rombrowser .games-grid[data-size="4"] .rom-card
{
  width: 13rem;
  height: 13rem;
}

#LoadingPanel .loading-container
{
  width: 100%%;
  height: 100%%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: black;
  color: white;
  overflow: hidden;
  text-align: center;
}

#LoadingPanel .loading-text
{
  font-size: 2em;
  margin: 50%% 0;
}

#LoadingPanel .loading-text > text
{
  display: inline-block;
}

#LoadingPanel .dot-pulse-container
{
  display: inline-block;
  justify-content: center;
  align-items: center;
}
  
#LoadingPanel .dot-pulse
{
  display: inline-block;
  width: 0.3em;
  height: 0.3em;
  margin: 0 0;
  border-radius: 50%;
  background-color: white;
  animation: dot-pulse 1.5s infinite ease-in-out;
}
  
#LoadingPanel .dot-pulse:nth-child(1) { animation-delay: 0s; }
#LoadingPanel .dot-pulse:nth-child(2) { animation-delay: 0.5s; }
#LoadingPanel .dot-pulse:nth-child(3) { animation-delay: 1s; }

@keyframes dot-pulse {
  0%, 100% {
    opacity: 0.2;
    transform: scale(0.75);
  }
  50% {
    opacity: 1;
    transform: scale(1.25);
  }
}