nxemu/lang/english/css/main_window.css

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

#StatusBar
{
  background: var(--color-statusbar-background);
  flow: horizontal;
  color: var(--color-ui-text-primary);
  padding: 0.2em 1em;
  border-top: 1px solid var(--color-statusbar-border);
  font-family: var(--font-ui);
  font-size: 0.8em;
  font-weight: 100;
  height: 1.6rem;
}

#StatusText
{
  width: *;
  text-align: right;
  display: inline-block;
  height: 100%%;
  padding: 0.2em;
}

#StatusBar #volumeAnchor
{
  display: inline-block;
  flow: horizontal;
  vertical-align: middle;
}

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

#StatusBar #volume:hover,
#StatusBar #renderer:hover,
#StatusBar #dockedMode:hover,
#StatusBar #volumePopupBtn:hover
{
  border: 1px solid var(--color-statusbar-hover-border);
}

#StatusBar #volumePopupBtn svg
{
  width: 1.2em;
  height: 1.2em;
  fill: var(--color-ui-text-primary);
  vertical-align: middle;
}

#StatusBar #volumePopupBtn.open svg
{
  transform: rotate(180deg);
}

#VolumePopup
{
  background: var(--color-statusbar-background);
  border: 1px solid var(--color-statusbar-border);
  padding: 1em;
}

.main-contents-panel
{
  width: 100%%;
  height: 100%%;
  display: none;
}

#PausePanel
{
  background: var(--color-pause-panel-background);
  color: var(--color-ui-text-primary);
  overflow: hidden;
}

#PausePanel .pause-panel-container
{
  width: 100%%;
  height: 100%%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  box-sizing: border-box;
}

#PausePanel .pause-panel-title
{
  font-family: var(--font-ui);
  font-size: 2rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
}

#PausePanel .pause-panel-subtitle
{
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 300;
  color: var(--color-ui-text-muted);
  margin: 0;
}

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: var(--color-ui-text-primary);
}

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: var(--font-ui);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--color-ui-text-primary);
  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%%;
  flow: vertical;
  background-color: black;
  color: white;
  overflow: hidden;
  text-align: center;
}

#LoadingCornerLogo
{
  horizontal-align: left;
  padding: 1.3rem;
}

#LoadingPanel .loading-main
{
  height: *;
  flow: horizontal;
}

#LoadingGameIcon
{
  margin-left: *;
  margin-top: *;
  margin-bottom: *;
  margin-right: 2rem;
}

#loadingText
{
  font-size: 1.4em;
  color: white;
  margin-bottom: 0.6rem;
}

#LoadingPanel .loading-text-column
{
  margin-right: *;
  margin-top: *;
  margin-bottom: *;
}

#LoadingPanel .loading-main.no-game-icon .loading-text-column
{
  margin-left: *;
  text-align: center;
}

#LoadingPanel .loading-main.no-game-icon .loading-progress-wrap
{
  width: 20rem;
}

#LoadingCornerBanner
{
  horizontal-align: right;
  padding: 1rem;
}

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

#LoadingPanel .loading-progress-track
{
  height: 0.55rem;
  border-radius: 999px;
  background-color: #18242f;
  overflow: hidden;
}

#LoadingPanel .loading-progress-fill
{
  height: 100%%;
  width: 0%%;
  border-radius: 999px;
  background-color: #00d4ff;
  background-image: linear-gradient(90deg, #00b8e8 0%%, #33eeff 50%%, #00b8e8 100%%);
  background-size: 100%% 100%%;
  transition: width 0.15s ease-out;
}

#LoadingPanel .loading-progress-fill.building
{
  background-image: linear-gradient(90deg, #00a3cc 0%%, #55f0ff 45%%, #00a3cc 95%%);
  background-size: 200%% 100%%;
  animation: loading-bar-build-shimmer 1s linear infinite;
}

#LoadingPanel .loading-progress-fill.indeterminate
{
  width: 42%%;
  animation: loading-bar-wait-pulse 0.85s ease-in-out infinite;
}

@keyframes loading-bar-build-shimmer {
  0%% { background-position: 0%% 0; }
  100%% { background-position: 100%% 0; }
}

@keyframes loading-bar-wait-pulse {
  0%%, 100%% { opacity: 0.5; }
  50%% { opacity: 1; }
}

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

.nx-fullscreen-hide
{
  display: none !important;
}