821 lines
14 KiB
CSS
821 lines
14 KiB
CSS
@import url(volume_slider.css);
|
|
|
|
#MainContents
|
|
{
|
|
width: *;
|
|
height: *;
|
|
}
|
|
|
|
#StatusBar
|
|
{
|
|
background: color(color-statusbar-background);
|
|
flow: horizontal;
|
|
vertical-align: middle;
|
|
color: color(color-ui-text-primary);
|
|
padding: 0.2em 1em;
|
|
border-top: 1px solid color(color-statusbar-border);
|
|
font-family: var(font-ui), Arial, sans-serif;
|
|
font-size: 0.8em;
|
|
font-weight: 400;
|
|
line-height: 1.2em;
|
|
height: 1.9rem;
|
|
}
|
|
|
|
#StatusText
|
|
{
|
|
width: *;
|
|
text-align: right;
|
|
display: block;
|
|
vertical-align: middle;
|
|
height: 1.2em;
|
|
padding: 0.2em;
|
|
}
|
|
|
|
#StatusBar #volumeSeparator
|
|
{
|
|
display: block;
|
|
width: 1dip;
|
|
height: 1.2em;
|
|
margin: 0 0.6em;
|
|
vertical-align: middle;
|
|
background: color(color-statusbar-border);
|
|
}
|
|
|
|
#StatusBar #volumeAnchor
|
|
{
|
|
display: block;
|
|
flow: horizontal;
|
|
vertical-align: middle;
|
|
height: *;
|
|
}
|
|
|
|
#StatusBar #volumeSlider
|
|
{
|
|
display: block;
|
|
position: relative;
|
|
width: max-content;
|
|
height: max-content;
|
|
flow: vertical;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
#StatusBar #audioVolume
|
|
{
|
|
style-set: volume-slider-control;
|
|
width: 9em;
|
|
position: relative;
|
|
z-index: 1;
|
|
vertical-align: middle;
|
|
margin: 3dip 0;
|
|
}
|
|
|
|
#StatusBar #volumeIcon,
|
|
#StatusBar #volume,
|
|
#StatusBar #renderer,
|
|
#StatusBar #dockedMode,
|
|
#StatusBar #gpuCommandSynchronization
|
|
{
|
|
border: 1px solid transparent;
|
|
border-radius: 4dip;
|
|
padding: 0.2em 0.4em;
|
|
display: block;
|
|
height: 1.2em;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
#StatusBar #volume:hover,
|
|
#StatusBar #volumeIcon:hover,
|
|
#StatusBar #renderer.interactive:hover,
|
|
#StatusBar #dockedMode:hover,
|
|
#StatusBar #gpuCommandSynchronization:hover
|
|
{
|
|
border: 1px solid color(color-statusbar-hover-border);
|
|
background: color(color-accent-soft);
|
|
}
|
|
|
|
#StatusBar #volume
|
|
{
|
|
width: max-content;
|
|
padding: 0.2em 0;
|
|
white-space: nowrap;
|
|
text-align: left;
|
|
}
|
|
|
|
#StatusBar #volumeIcon svg
|
|
{
|
|
size: 1.2em;
|
|
display: block;
|
|
fill: none;
|
|
stroke: color(color-ui-text-primary);
|
|
stroke-width: 2;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
pointer-events: none;
|
|
}
|
|
|
|
#StatusBar #volumeReadout
|
|
{
|
|
display: block;
|
|
flow: horizontal;
|
|
width: 2.8em;
|
|
height: *;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
#StatusBar #volumeIcon.muted .sound-waves
|
|
{
|
|
visibility: hidden;
|
|
}
|
|
|
|
.main-contents-panel
|
|
{
|
|
width: *;
|
|
height: *;
|
|
display: none;
|
|
}
|
|
|
|
#PausePanel
|
|
{
|
|
background: color(color-pause-panel-background);
|
|
color: color(color-ui-text-primary);
|
|
overflow: hidden;
|
|
}
|
|
|
|
#PausePanel .pause-panel-container
|
|
{
|
|
width: *;
|
|
height: *;
|
|
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), Arial, sans-serif;
|
|
font-size: 2rem;
|
|
font-weight: 600;
|
|
margin: 0 0 0.5rem;
|
|
}
|
|
|
|
#PausePanel .pause-panel-subtitle
|
|
{
|
|
font-family: var(font-ui), Arial, sans-serif;
|
|
font-size: 1rem;
|
|
font-weight: 300;
|
|
color: color(color-ui-text-muted);
|
|
margin: 0;
|
|
}
|
|
|
|
rombrowser
|
|
{
|
|
display: block;
|
|
width: *;
|
|
height: *;
|
|
padding: 0.8rem 1.2rem 0.5rem;
|
|
margin: 0;
|
|
background: color(color-main-background);
|
|
}
|
|
|
|
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: color(color-ui-text-primary);
|
|
}
|
|
|
|
rombrowser .config-button:hover .outline
|
|
{
|
|
fill: color(color-ui-text-primary);
|
|
}
|
|
|
|
rombrowser .config-button
|
|
{
|
|
padding: 0.3rem;
|
|
border: 1px solid color(color-card-border);
|
|
border-radius: 6px;
|
|
background-color: color(color-card-background);
|
|
}
|
|
|
|
rombrowser .config-button:hover
|
|
{
|
|
background-color: color(color-accent-soft);
|
|
border-color: color(color-accent);
|
|
}
|
|
|
|
rombrowser .games-title h1
|
|
{
|
|
font-family: var(font-ui), Arial, sans-serif;
|
|
font-size: 1.9rem;
|
|
font-weight: 700;
|
|
color: color(color-ui-text-primary);
|
|
padding: 0 0 0.8rem;
|
|
margin: 0;
|
|
width:*
|
|
}
|
|
|
|
rombrowser .games-grid
|
|
{
|
|
height: *;
|
|
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;
|
|
pointer-events: none;
|
|
}
|
|
|
|
rombrowser .rom-card-content
|
|
{
|
|
width: 100%;
|
|
height: 100%;
|
|
pointer-events: none;
|
|
}
|
|
|
|
rombrowser .rom-card
|
|
{
|
|
cursor: pointer;
|
|
border-radius: 10px;
|
|
border: 3px solid color(color-card-border);
|
|
background-color: color(color-card-background);
|
|
context-menu: selector(menu#RomCardContextMenu);
|
|
transition: border-color linear 120ms;
|
|
}
|
|
|
|
rombrowser .rom-card:hover
|
|
{
|
|
border-color: color(color-card-border-hover);
|
|
}
|
|
|
|
rombrowser .rom-card:visited
|
|
{
|
|
border: 3px solid color(color-accent);
|
|
box-shadow: 0 0 10px rgba(47, 128, 255, 0.45);
|
|
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: *;
|
|
height: *;
|
|
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: 0.5* 0;
|
|
}
|
|
|
|
#LoadingPanel .loading-progress-track
|
|
{
|
|
height: 0.55rem;
|
|
border-radius: 999px;
|
|
background-color: #18242f;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#LoadingPanel .loading-progress-fill
|
|
{
|
|
height: *;
|
|
width: 0*;
|
|
border-radius: 999px;
|
|
background-color: #00d4ff;
|
|
background-image: linear-gradient(90deg, #00b8e8 0*, #33eeff 0.5*, #00b8e8 *);
|
|
background-size: * *;
|
|
transition: width 0.15s ease-out;
|
|
}
|
|
|
|
#LoadingPanel .loading-progress-fill.building
|
|
{
|
|
background-image: linear-gradient(90deg, #00a3cc 0*, #55f0ff 0.45*, #00a3cc 0.95*);
|
|
background-size: 2* *;
|
|
animation: loading-bar-build-shimmer 1s linear infinite;
|
|
}
|
|
|
|
#LoadingPanel .loading-progress-fill.indeterminate
|
|
{
|
|
width: 0.42*;
|
|
animation: loading-bar-wait-pulse 0.85s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes loading-bar-build-shimmer {
|
|
0* { background-position: 0* 0; }
|
|
* { background-position: * 0; }
|
|
}
|
|
|
|
@keyframes loading-bar-wait-pulse {
|
|
0*, * { opacity: 0.5; }
|
|
0.5* { opacity: 1; }
|
|
}
|
|
|
|
#LoadingPanel .loading-text > text
|
|
{
|
|
display: inline-block;
|
|
}
|
|
|
|
.nx-fullscreen-hide
|
|
{
|
|
display: none !important;
|
|
}
|
|
|
|
ul#menu-bar
|
|
{
|
|
margin: 0;
|
|
padding: 0.2em 0.5em;
|
|
background: color(color-menubar-background);
|
|
color: color(color-ui-text-primary);
|
|
border-bottom: 1px solid color(color-menubar-border);
|
|
font-family: var(font-ui), Arial, sans-serif;
|
|
font-size: 0.95em;
|
|
font-weight: 400;
|
|
flow: horizontal;
|
|
}
|
|
|
|
ul#menu-bar > li
|
|
{
|
|
padding: 0.2em 0.6em;
|
|
margin: 0;
|
|
white-space: nowrap;
|
|
width: max-content;
|
|
display: block;
|
|
flow: horizontal;
|
|
border-radius: 5px;
|
|
position: relative;
|
|
}
|
|
|
|
ul#menu-bar > li:hover
|
|
{
|
|
background: color(color-menubar-background-hover);
|
|
}
|
|
|
|
ul#menu-bar:focus > li:current,
|
|
ul#menu-bar > li:owns-popup {
|
|
background-color: color(color-menubar-background-active);
|
|
border-radius: 5px;
|
|
}
|
|
|
|
ul#menu-bar caption u,
|
|
menu li .menu-item-label u
|
|
{
|
|
text-decoration: none;
|
|
}
|
|
|
|
[data-menu-mnemonics="1"] ul#menu-bar caption u,
|
|
[data-menu-mnemonics="1"] menu li .menu-item-label u,
|
|
ul#menu-bar > li:owns-popup caption u,
|
|
menu[window-state="shown"] li .menu-item-label u,
|
|
menu[window-state="shown"] caption u
|
|
{
|
|
text-decoration: underline;
|
|
}
|
|
|
|
menu
|
|
{
|
|
behavior:menu;
|
|
flow: vertical;
|
|
display:none;
|
|
margin:0;
|
|
padding: 0.35em 0;
|
|
min-width: 14em;
|
|
max-width:max-content;
|
|
background: color(color-menu-popup-background);
|
|
color: color(color-ui-text-primary);
|
|
border: 1px solid color(color-menu-popup-border);
|
|
border-radius: 6px;
|
|
box-shadow: 0 0.25em 0.75em color(color-menu-popup-shadow);
|
|
}
|
|
|
|
ul#menu-bar menu
|
|
{
|
|
position: absolute;
|
|
left: 0;
|
|
top: 100%;
|
|
margin-top: 2px;
|
|
z-index: 10000;
|
|
}
|
|
|
|
@media (menu-animation-supported) {
|
|
menu {
|
|
popup-animation: popup-animation(type:blend,duration:100ms);
|
|
}
|
|
}
|
|
|
|
menu menu
|
|
{
|
|
max-width: max-content;
|
|
}
|
|
|
|
ul#menu-bar menu li
|
|
{
|
|
position: relative;
|
|
}
|
|
|
|
ul#menu-bar menu menu
|
|
{
|
|
left: 100%;
|
|
top: 0;
|
|
border-top: 1px solid color(color-menu-popup-border);
|
|
}
|
|
|
|
menu li
|
|
{
|
|
width:*;
|
|
display:block;
|
|
flow:horizontal;
|
|
vertical-align:middle;
|
|
foreground-repeat: no-repeat;
|
|
foreground-position: left 2px top 50%;
|
|
padding: 0.4em 1.75em 0.4em 1.1em;
|
|
margin: 0 0.3em;
|
|
}
|
|
|
|
menu li .menu-item-label
|
|
{
|
|
width: *;
|
|
text-align: left;
|
|
}
|
|
|
|
menu li:has-child-of-type(menu) caption
|
|
{
|
|
width: *;
|
|
text-align: left;
|
|
}
|
|
|
|
menu li:current caption,
|
|
menu li:hover:owns-popup caption
|
|
{
|
|
color: #f0f0f0;
|
|
}
|
|
|
|
menu li .menu-item-glyph
|
|
{
|
|
width: 1.15em;
|
|
min-width: 1.15em;
|
|
max-width: 1.15em;
|
|
min-height: 1.15em;
|
|
max-height: 1.15em;
|
|
margin: 0 0.55em 0 0;
|
|
box-sizing: border-box;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
flex-shrink: 0;
|
|
foreground-image: none;
|
|
}
|
|
|
|
menu li .menu-item-glyph.menu-item-glyph-spacer
|
|
{
|
|
border: 1.5px solid transparent;
|
|
border-radius: 3px;
|
|
position: relative;
|
|
}
|
|
|
|
menu li .menu-item-glyph.menu-item-checkbox
|
|
{
|
|
border: 1.5px solid var(color-ui-text-muted, #8c8c8c);
|
|
border-radius: 3px;
|
|
position: relative;
|
|
foreground-image: none;
|
|
}
|
|
|
|
menu li .menu-item-glyph.menu-item-checkbox.checked
|
|
{
|
|
border-color: var(color-ui-text-primary, #f0f0f0);
|
|
}
|
|
|
|
menu li .menu-item-glyph.menu-item-icon-svg
|
|
{
|
|
border: none;
|
|
width: 1.15em;
|
|
height: 1.15em;
|
|
min-width: 1.15em;
|
|
max-width: 1.15em;
|
|
padding: 0;
|
|
}
|
|
|
|
menu li .menu-item-glyph.menu-item-icon-svg svg
|
|
{
|
|
width: 1.05em;
|
|
height: 1.05em;
|
|
display: block;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
menu li .menu-item-glyph.menu-item-icon-svg path,
|
|
menu li .menu-item-glyph.menu-item-icon-svg circle
|
|
{
|
|
fill: currentColor;
|
|
}
|
|
|
|
menu li .menu-item-glyph.menu-item-icon-svg path[fill="none"],
|
|
menu li .menu-item-glyph.menu-item-icon-svg circle[fill="none"]
|
|
{
|
|
fill: none;
|
|
stroke: currentColor;
|
|
}
|
|
|
|
menu li .menu-item-glyph .menu-item-checkmark
|
|
{
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: *;
|
|
height: *;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
font-size: 0.72em;
|
|
line-height: 1.15em;
|
|
color: var(color-ui-text-primary, #f0f0f0);
|
|
}
|
|
|
|
menu li:current .menu-item-glyph.menu-item-checkbox,
|
|
menu li:hover:owns-popup .menu-item-glyph.menu-item-checkbox
|
|
{
|
|
border-color: #f0f0f0;
|
|
}
|
|
|
|
menu li:current .menu-item-glyph .menu-item-checkmark,
|
|
menu li:hover:owns-popup .menu-item-glyph .menu-item-checkmark
|
|
{
|
|
color: #f0f0f0;
|
|
}
|
|
|
|
menu li .menu-accelerator
|
|
{
|
|
width: max-content;
|
|
margin-left: 2.5em;
|
|
white-space: nowrap;
|
|
text-align: right;
|
|
color: color(color-menu-shortcut-text);
|
|
}
|
|
|
|
menu li .menu-accelerator:empty
|
|
{
|
|
display: none;
|
|
margin: 0;
|
|
width: 0;
|
|
}
|
|
|
|
menu li:hover
|
|
{
|
|
background: color(color-menuitem-background-hover);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
menu li:current,
|
|
menu li:hover:owns-popup
|
|
{
|
|
background-color: color(color-accent);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
menu li:current .menu-item-label,
|
|
menu li:current .menu-accelerator,
|
|
menu li:hover:owns-popup .menu-item-label,
|
|
menu li:hover:owns-popup .menu-accelerator
|
|
{
|
|
color: #f0f0f0;
|
|
}
|
|
|
|
menu li:disabled
|
|
{
|
|
color:graytext;
|
|
foreground-image: none;
|
|
}
|
|
|
|
menu li:has-child-of-type(menu)
|
|
{
|
|
foreground-image:url(stock:arrow-right);
|
|
foreground-repeat: no-repeat;
|
|
foreground-position: top 50% right 2px;
|
|
}
|
|
|
|
menu li:has-child-of-type(menu):rtl
|
|
{
|
|
foreground-image:url(stock:arrow-left);
|
|
foreground-repeat: no-repeat;
|
|
foreground-position: top 50% left 2px;
|
|
}
|
|
|
|
menu hr
|
|
{
|
|
display: block;
|
|
height: 1px;
|
|
margin: 0.4em 0.65em;
|
|
border: none;
|
|
background: color(color-menu-separator);
|
|
}
|
|
|
|
menu.context,
|
|
#RomCardContextMenu
|
|
{
|
|
padding: 0.35em 0.25em;
|
|
min-width: 16.5em;
|
|
max-width: 24em;
|
|
background: color(color-context-menu-background);
|
|
color: color(color-context-menu-text);
|
|
border: 1px solid color(color-context-menu-border);
|
|
border-radius: 0.45em;
|
|
box-shadow: 0 0.4em 1.1em color(color-context-menu-shadow);
|
|
font-family: var(font-ui), Arial, sans-serif;
|
|
font-size: 0.86em;
|
|
font-weight: 400;
|
|
}
|
|
|
|
menu.context > li,
|
|
#RomCardContextMenu > li
|
|
{
|
|
flow: horizontal;
|
|
vertical-align: middle;
|
|
padding: 0.42em 0.85em 0.42em 0.55em;
|
|
margin: 0 0.15em;
|
|
border-radius: 0.28em;
|
|
color: color(color-context-menu-text);
|
|
}
|
|
|
|
menu.context > li:hover,
|
|
menu.context > li:current,
|
|
#RomCardContextMenu > li:hover,
|
|
#RomCardContextMenu > li:current
|
|
{
|
|
background: color(color-context-menu-hover);
|
|
color: #ffffff;
|
|
}
|
|
|
|
menu.context > li:disabled,
|
|
menu.context > li.disabled,
|
|
#RomCardContextMenu > li:disabled,
|
|
#RomCardContextMenu > li.disabled
|
|
{
|
|
color: color(color-context-menu-muted);
|
|
background: transparent;
|
|
opacity: 0.55;
|
|
}
|
|
|
|
menu.context > li .menu-item-glyph,
|
|
#RomCardContextMenu > li .menu-item-glyph
|
|
{
|
|
width: 1.25em;
|
|
height: 1.25em;
|
|
min-width: 1.25em;
|
|
max-width: 1.25em;
|
|
min-height: 1.25em;
|
|
max-height: 1.25em;
|
|
margin: 0 0.65em 0 0.1em;
|
|
padding: 0;
|
|
color: color(color-context-menu-text);
|
|
vertical-align: middle;
|
|
flow: horizontal;
|
|
horizontal-align: center;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
menu.context > li .menu-item-glyph.menu-item-icon-svg svg,
|
|
#RomCardContextMenu > li .menu-item-glyph.menu-item-icon-svg svg
|
|
{
|
|
width: 1.1em;
|
|
height: 1.1em;
|
|
display: block;
|
|
margin: *;
|
|
}
|
|
|
|
menu.context > li .menu-item-label,
|
|
#RomCardContextMenu > li .menu-item-label
|
|
{
|
|
width: *;
|
|
height: *;
|
|
text-align: left;
|
|
vertical-align: middle;
|
|
padding: 0;
|
|
margin: 0;
|
|
line-height: 1.25em;
|
|
}
|
|
|
|
menu.context > hr,
|
|
#RomCardContextMenu > hr
|
|
{
|
|
margin: 0.3em 0.7em;
|
|
background: color(color-context-menu-separator);
|
|
}
|
|
|
|
menu.context > li:has-child-of-type(menu),
|
|
#RomCardContextMenu > li:has-child-of-type(menu)
|
|
{
|
|
foreground-image: url(path: M 0 0 L 4 3 L 0 6);
|
|
foreground-repeat: no-repeat;
|
|
foreground-position: right 0.7em top 50%;
|
|
foreground-size: 0.4em 0.55em;
|
|
foreground-image-transformation: colorize(color(color-context-menu-muted));
|
|
padding-right: 1.6em;
|
|
}
|