shifathosn
/
nxemu
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

UI: new experimental look and feel (#416)

This commit is contained in:
N3xoX1 2026-10-11 23:01:45 +10:30 committed by GitHub
parent d200045196
commit c72f54cf2e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 303 additions and 198 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
lang/english/css/base.css
View File

@ -1,36 +1,43 @@
html { html {
var(font-ui): "Segoe UI"; var(font-ui): "Segoe UI";
var(color-ui-text-primary): #eff0f1; var(color-ui-text-primary): #e6ecf5;
var(color-ui-text-muted): #b0b6bc; var(color-ui-text-muted): #8d9bb3;
var(color-statusbar-background): #31363b; var(color-statusbar-background): #0a1222;
var(color-statusbar-border): #434242; var(color-statusbar-border): #1a2840;
var(color-statusbar-hover-border): #76797c; var(color-statusbar-hover-border): #2f80ff;
var(color-pause-panel-background): #25282c; var(color-pause-panel-background): #0b1422;
var(color-main-background): #2d2d2d; var(color-main-background): #090f1a;
var(color-titlebar-background): #181818; var(color-titlebar-background): #0a1222;
var(color-titlebar-background-inactive): #2d2d2d; var(color-titlebar-background-inactive): #0a1222;
var(color-titlebar-text): #FFF; var(color-titlebar-text): #e6ecf5;
var(color-titlebar-icon): #FFF; var(color-titlebar-icon): #c9d4e5;
var(color-titlebar-icon-hover): #0078d7; var(color-titlebar-icon-hover): #18263f;
var(color-titlebar-icon-inactive): #2f7bb0; var(color-titlebar-icon-inactive): #5d6b82;
var(color-menubar-background): #181818; var(color-menubar-background): #0a1222;
var(color-menubar-background-hover): #2c2c2c; var(color-menubar-background-hover): #18263f;
var(color-menubar-background-active): #2c2c2c; var(color-menubar-background-active): #1e3050;
var(color-menuitem-background): #2c2c2c; var(color-menuitem-background): #16233a;
var(color-menuitem-background-hover): #383838; var(color-menuitem-background-hover): #1a2a44;
var(color-menu-popup-background): #252526; var(color-menu-popup-background): #0f1a2c;
var(color-menu-popup-border): #454545; var(color-menu-popup-border): #22324d;
var(color-menu-popup-shadow): rgba(0, 0, 0, 0.45); var(color-menu-popup-shadow): rgba(0, 0, 0, 0.55);
var(color-menu-shortcut-text): #b8b8b8; var(color-menu-shortcut-text): #8d9bb3;
var(color-menu-separator): #3d3d3d; var(color-menu-separator): #1f2d45;
var(color-context-menu-background): #2b2b2b; var(color-context-menu-background): #0f1a2c;
var(color-context-menu-border): #3c3c3c; var(color-context-menu-border): #22324d;
var(color-context-menu-hover): #3a3a3a; var(color-context-menu-hover): #1a2a44;
var(color-context-menu-text): #f3f3f3; var(color-context-menu-text): #e6ecf5;
var(color-context-menu-muted): #a8a8a8; var(color-context-menu-muted): #8d9bb3;
var(color-context-menu-separator): #404040; var(color-context-menu-separator): #1f2d45;
var(color-context-menu-shadow): rgba(0, 0, 0, 0.55); var(color-context-menu-shadow): rgba(0, 0, 0, 0.6);
var(color-window-border): #353535; var(color-window-border): #263856;
var(color-titlebar-version): #7d8aa3;
var(color-menubar-border): #1a2840;
var(color-accent): #2f80ff;
var(color-accent-soft): rgba(47, 128, 255, 0.16);
var(color-card-background): #111c2e;
var(color-card-border): #1b2a42;
var(color-card-border-hover): #2c4166;
border: 1px solid color(color-window-border); border: 1px solid color(color-window-border);
background-color: color(color-main-background); background-color: color(color-main-background);
@ -64,8 +71,8 @@ html > header > window-caption
width: *; width: *;
padding: 0 1em; padding: 0 1em;
font-family: var(font-ui), Arial, sans-serif; font-family: var(font-ui), Arial, sans-serif;
font-size: 0.9em; font-size: 0.95em;
font-weight: 100; font-weight: 600;
} }
html > header > window-caption span html > header > window-caption span
@ -73,6 +80,14 @@ html > header > window-caption span
vertical-align: middle; vertical-align: middle;
} }
html > header > window-caption span.caption-version
{
display: inline-block;
margin-left: 0.9em;
font-weight: 400;
color: color(color-titlebar-version);
}
html > header > window-caption img html > header > window-caption img
{ {
vertical-align: middle; vertical-align: middle;

171
lang/english/css/config.css
View File

@ -1,6 +1,14 @@
html { html {
var(color-config-page): #31363B; var(color-config-page): #0f1a2c;
var(color-config-page-border): #505050; var(color-config-page-border): #1f2e48;
var(color-control-background): #0b1424;
var(color-control-border): #26385a;
var(color-control-hover): #132138;
var(color-control-disabled): #0a101b;
var(color-control-disabled-text): #56637a;
var(color-tab-background): #111d31;
var(color-tooltip-background): #16233a;
var(color-tooltip-border): #2c4166;
} }
div.ConfigPage div.ConfigPage
@ -14,8 +22,9 @@ div.ConfigPage
popup.tooltip popup.tooltip
{ {
background: #4f6459; background: color(color-tooltip-background);
border: 1px solid #6a6a6a; border: 1px solid color(color-tooltip-border);
border-radius: 6px;
padding: 0.5rem; padding: 0.5rem;
color: color(color-ui-text-primary); color: color(color-ui-text-primary);
font-family: var(font-ui), Arial, sans-serif; font-family: var(font-ui), Arial, sans-serif;
@ -34,42 +43,42 @@ popup.tooltip
} }
.tab-button { .tab-button {
background: #2b2f32; background: color(color-tab-background);
border: 1px solid #55575a; border: 1px solid color(color-config-page-border);
border-bottom: 1px solid color(color-config-page-border); border-bottom: 1px solid color(color-config-page-border);
border-radius: 2px 2px 0 0; border-top: 2px solid transparent;
color: color(color-ui-text-primary); border-radius: 6px 6px 0 0;
color: color(color-ui-text-muted);
font-family: var(font-ui), Arial, sans-serif; font-family: var(font-ui), Arial, sans-serif;
font-size: 0.8rem; font-size: 0.8rem;
padding: 0.2rem 1.3rem 0.2rem 1.3rem; padding: 0.25rem 1.1rem;
margin: 0; margin: 0 0.2rem -1px 0;
position: relative; position: relative;
z-index: 2; z-index: 2;
margin-bottom: -1px;
min-width: 2rem; min-width: 2rem;
} }
.tab-button:hover { .tab-button:hover {
border: 1px solid #55575a; background: color(color-control-hover);
border-bottom: 1px solid color(color-config-page-border); color: color(color-ui-text-primary);
} }
.tab-button:active { .tab-button.active,
background: #2b2f32; .tab-button:visited {
}
.tab-button.active {
background: color(color-config-page); background: color(color-config-page);
border-color: color(color-config-page-border); border-color: color(color-config-page-border);
border-top: 2px solid color(color-accent);
border-bottom: 1px solid color(color-config-page); border-bottom: 1px solid color(color-config-page);
color: color(color-ui-text-primary);
} }
.input-group .input-group
{ {
position: relative; position: relative;
background-color: color(color-config-page); background-color: color(color-config-page);
border: 1px solid #55575a; border: 1px solid color(color-config-page-border);
padding: 1.2rem 0.5rem 0.5rem 0.5rem; border-radius: 6px;
padding: 1.2rem 0.6rem 0.5rem 0.6rem;
margin: 0 0 1rem 0; margin: 0 0 1rem 0;
flow: vertical; flow: vertical;
} }
@ -89,7 +98,8 @@ popup.tooltip
background-color: color(color-config-page); background-color: color(color-config-page);
padding: 0 6px; padding: 0 6px;
font-size: 0.8rem; font-size: 0.8rem;
color: #f0f0f0; font-weight: 600;
color: color(color-ui-text-primary);
} }
.input-row .input-row
@ -97,9 +107,9 @@ popup.tooltip
display: inline-block; display: inline-block;
position: relative; position: relative;
background-color: color(color-config-page); background-color: color(color-config-page);
border: 1px solid #55575a; border: 1px solid color(color-config-page-border);
padding: 0.4em 0.2rem 0.2rem 0.2rem; padding: 0.4em 0.2rem 0.2rem 0.2rem;
border-radius: 2px; border-radius: 4px;
margin: 0 * 0.9rem *; margin: 0 * 0.9rem *;
width: *; width: *;
} }
@ -113,7 +123,7 @@ popup.tooltip
background-color: color(color-config-page); background-color: color(color-config-page);
padding: 0 6px; padding: 0 6px;
font-size: 0.8rem; font-size: 0.8rem;
color: #f0f0f0; color: color(color-ui-text-muted);
} }
.input-row button .input-row button
@ -125,24 +135,24 @@ popup.tooltip
#ConfigContents { #ConfigContents {
width: *; width: *;
height: *; height: *;
color: #ffffff; color: color(color-ui-text-primary);
} }
@set styled-select < std-select-dropdown { @set styled-select < std-select-dropdown {
:root { :root {
color: #FFF; color: color(color-ui-text-primary);
padding: 0.1em; padding: 0.2em 0.3em;
margin: 0 0 0.3em 0; margin: 0 0 0.3em 0;
width: *; width: *;
border: 1px solid #54575b; border: 1px solid color(color-control-border);
border-radius: .2em; border-radius: 6px;
background: #2F2F31; background: color(color-control-background);
} }
:root:disabled, :root:disabled,
:root[disabled] { :root[disabled] {
background-color: #1a1a1a !important; background-color: color(color-control-disabled) !important;
color: #666666 !important; color: color(color-control-disabled-text) !important;
border-color: #333333 !important; border-color: color(color-config-page-border) !important;
cursor: not-allowed; cursor: not-allowed;
opacity: 0.6; opacity: 0.6;
} }
@ -150,22 +160,30 @@ popup.tooltip
:root:active, :root:active,
:root:hover :root:hover
{ {
border-color: #3daee9; border-color: color(color-accent);
} }
:root:hover { :root:hover {
background: #3C3C3C; background: color(color-control-hover);
} }
:root > popup.list { :root > popup.list {
background-color: #2B2B2B; background-color: color(color-config-page);
border-color: #1F1F1F; border: 1px solid color(color-control-border);
color: #FFF; border-radius: 6px;
color: color(color-ui-text-primary);
} }
:root option { :root option {
vertical-align: middle; vertical-align: middle;
padding: 0.3em; padding: 0.3em 0.5em;
}
:root option:hover {
background: color(color-control-hover);
}
:root option:current {
background: color(color-accent);
color: #ffffff;
} }
:root > button { :root > button {
fill: #FFF; fill: color(color-ui-text-muted);
} }
} }
select:not([type]) { select:not([type]) {
@ -185,40 +203,47 @@ input[type="checkbox"] {
appearance:none; appearance:none;
height: 1em; height: 1em;
width: 1em; width: 1em;
border: 1px solid #818183; border: 1px solid #4a5b78;
background: none; background: color(color-control-background);
border-radius: 0.3em; border-radius: 0.25em;
margin: 0 0.3em 0 0; margin: 0 0.3em 0 0;
} }
input[type="checkbox"]:hover {
border-color: color(color-accent);
}
input[type="checkbox"]:disabled, input[type="checkbox"]:disabled,
input[type="checkbox"][disabled] input[type="checkbox"][disabled]
{ {
background-color: #1a1a1a !important; background-color: color(color-control-disabled) !important;
opacity: 0.4; opacity: 0.4;
} }
input[type="checkbox"]:checked { input[type="checkbox"]:checked {
background: no-repeat 50% 50%; background: no-repeat 50% 50%;
background-color: color(color-accent);
background-image: url(stock:checkmark); background-image: url(stock:checkmark);
background-size: 0.7em; background-size: 0.7em;
border-color: color(color-accent);
fill: #ffffff;
} }
input[type="text"] { input[type="text"] {
color: #FFF; color: color(color-ui-text-primary);
padding: 0.1em; padding: 0.2em 0.3em;
margin: 0 0 0.3em 0; margin: 0 0 0.3em 0;
width: *; width: *;
border: 1px solid #54575b; border: 1px solid color(color-control-border);
border-radius: .2em; border-radius: 6px;
background: #2F2F31; background: color(color-control-background);
} }
input[type="text"]:disabled, input[type="text"]:disabled,
input[type="text"][disabled] { input[type="text"][disabled] {
background-color: #1a1a1a !important; background-color: color(color-control-disabled) !important;
color: #666666 !important; color: color(color-control-disabled-text) !important;
border-color: #333333 !important; border-color: color(color-config-page-border) !important;
cursor: not-allowed; cursor: not-allowed;
opacity: 0.6; opacity: 0.6;
} }
@ -226,20 +251,20 @@ input[type="text"][disabled] {
input[type="text"]:focus, input[type="text"]:focus,
input[type="text"]:active input[type="text"]:active
{ {
border-color: #3daee9; border-color: color(color-accent);
} }
input[type="text"]:hover { input[type="text"]:hover {
background: #3C3C3C; background: color(color-control-hover);
} }
input[type="text"]:disabled:hover, input[type="text"]:disabled:hover,
input[type="text"][disabled]:hover { input[type="text"][disabled]:hover {
background-color: #1a1a1a !important; background-color: color(color-control-disabled) !important;
} }
label:disabled { label:disabled {
color: #666666 !important; color: color(color-control-disabled-text) !important;
opacity: 0.6; opacity: 0.6;
} }
@ -251,7 +276,7 @@ label:disabled {
.hotkeys-hint .hotkeys-hint
{ {
color: #bdc3c7; color: color(color-ui-text-muted);
font-size: 0.85rem; font-size: 0.85rem;
margin-bottom: 0.75rem; margin-bottom: 0.75rem;
} }
@ -274,9 +299,9 @@ label:disabled {
.profile-grid .profile-grid
{ {
flow: horizontal-wrap; flow: horizontal-wrap;
border: 1px solid #55575a; border: 1px solid color(color-config-page-border);
border-radius: 5px; border-radius: 6px;
background: #1e1e1e; background: color(color-control-background);
padding: 0.5rem; padding: 0.5rem;
width: *; width: *;
height: *; height: *;
@ -300,13 +325,13 @@ label:disabled {
.profile-tile:hover .profile-tile:hover
{ {
background: rgba(255, 255, 255, 0.06); background: color(color-control-hover);
} }
.profile-tile.current .profile-tile.current
{ {
background: rgba(61, 174, 233, 0.22); background: color(color-accent-soft);
border: 2px solid #3daee9; border: 2px solid color(color-accent);
} }
.profile-tile.current > .profile-tile-name .profile-tile.current > .profile-tile-name
@ -320,7 +345,7 @@ label:disabled {
width: 96px; width: 96px;
height: 96px; height: 96px;
border-radius: 4px; border-radius: 4px;
background: #111111; background: color(color-control-background);
overflow: hidden; overflow: hidden;
foreground-repeat: no-repeat; foreground-repeat: no-repeat;
foreground-position: 50% 50%; foreground-position: 50% 50%;
@ -358,7 +383,7 @@ label:disabled {
width: 24px; width: 24px;
height: 24px; height: 24px;
border-radius: 12px; border-radius: 12px;
background: #2b2f32; background: color(color-tab-background);
border: none; border: none;
color: #ffffff; color: #ffffff;
padding: 0; padding: 0;
@ -393,7 +418,7 @@ label:disabled {
.profile-tile-edit:hover .profile-tile-edit:hover
{ {
background: #3a4045; background: color(color-control-hover);
} }
.profile-tile-add .profile-tile-add
@ -403,7 +428,7 @@ label:disabled {
height: 118px; height: 118px;
margin: 0.35rem; margin: 0.35rem;
border-radius: 5px; border-radius: 5px;
background: #2b2f32; background: color(color-tab-background);
cursor: pointer; cursor: pointer;
behavior: clickable; behavior: clickable;
} }
@ -416,8 +441,8 @@ label:disabled {
width: 42px; width: 42px;
height: 42px; height: 42px;
border-radius: 21px; border-radius: 21px;
background: #2b2f32; background: color(color-control-background);
border: 1px solid #55575a; border: 1px solid color(color-control-border);
color: color(color-ui-text-primary); color: color(color-ui-text-primary);
font-size: 1.6rem; font-size: 1.6rem;
font-family: var(font-ui), Arial, sans-serif; font-family: var(font-ui), Arial, sans-serif;
@ -431,8 +456,8 @@ label:disabled {
.profile-tile-add-button:hover .profile-tile-add-button:hover
{ {
background: #3a4045; background: color(color-control-hover);
border: 1px solid #3cafe9; border: 1px solid color(color-accent);
} }
.hotkeys-table .hotkeys-table
@ -445,7 +470,7 @@ label:disabled {
.hotkeys-table thead tr .hotkeys-table thead tr
{ {
background: #2b2f32; background: color(color-tab-background);
} }
.hotkeys-table th, .hotkeys-table th,
@ -478,5 +503,5 @@ label:disabled {
.hotkey-binding:hover .hotkey-binding:hover
{ {
background: #3a3f44; background: color(color-control-hover);
} }

31
lang/english/css/dialog.css
View File

@ -1,24 +1,43 @@
html { html {
var(color-dialog-background): #181818; var(color-dialog-background): #0a1222;
var(color-button-background): #111d31;
var(color-button-border): #26385a;
var(color-button-hover): #16243d;
var(color-button-primary-hover): #4a91ff;
background: color(color-dialog-background); background: color(color-dialog-background);
} }
button { button {
color: color(color-ui-text-primary); color: color(color-ui-text-primary);
background: #232728; background: color(color-button-background);
border: 1px solid #55575a; border: 1px solid color(color-button-border);
border-radius: 6px;
font-family: var(font-ui), Arial, sans-serif; font-family: var(font-ui), Arial, sans-serif;
font-size: 0.8rem; font-size: 0.8rem;
padding: 0.2rem; padding: 0.25rem 0.6rem;
min-width: 5rem; min-width: 5rem;
} }
button:hover { button:hover {
border: 1px solid #3cafe9; background: color(color-button-hover);
border: 1px solid color(color-accent);
} }
button:active { button:active {
background: #3cafe9; background: color(color-accent);
border-color: color(color-accent);
color: #ffffff;
}
button[role="window-ok"] {
background: color(color-accent);
border-color: color(color-accent);
color: #ffffff;
}
button[role="window-ok"]:hover {
background: color(color-button-primary-hover);
border-color: color(color-button-primary-hover);
} }
.footer { .footer {

71
lang/english/css/main_window.css
View File

@ -16,16 +16,17 @@
border-top: 1px solid color(color-statusbar-border); border-top: 1px solid color(color-statusbar-border);
font-family: var(font-ui), Arial, sans-serif; font-family: var(font-ui), Arial, sans-serif;
font-size: 0.8em; font-size: 0.8em;
font-weight: 100; font-weight: 400;
line-height: 1.2em; line-height: 1.2em;
height: 1.6rem; height: 1.9rem;
} }
#StatusText #StatusText
{ {
width: *; width: *;
text-align: right; text-align: right;
display: inline-block; display: block;
vertical-align: middle;
height: 1.2em; height: 1.2em;
padding: 0.2em; padding: 0.2em;
} }
@ -37,7 +38,7 @@
height: 1.2em; height: 1.2em;
margin: 0 0.6em; margin: 0 0.6em;
vertical-align: middle; vertical-align: middle;
background: rgba(239, 240, 241, 0.16); background: color(color-statusbar-border);
} }
#StatusBar #volumeAnchor #StatusBar #volumeAnchor
@ -75,7 +76,8 @@
#StatusBar #gpuCommandSynchronization #StatusBar #gpuCommandSynchronization
{ {
border: 1px solid transparent; border: 1px solid transparent;
padding: 0.2em; border-radius: 4dip;
padding: 0.2em 0.4em;
display: block; display: block;
height: 1.2em; height: 1.2em;
vertical-align: middle; vertical-align: middle;
@ -88,6 +90,7 @@
#StatusBar #gpuCommandSynchronization:hover #StatusBar #gpuCommandSynchronization:hover
{ {
border: 1px solid color(color-statusbar-hover-border); border: 1px solid color(color-statusbar-hover-border);
background: color(color-accent-soft);
} }
#StatusBar #volume #StatusBar #volume
@ -173,8 +176,9 @@ rombrowser
display: block; display: block;
width: *; width: *;
height: *; height: *;
padding: 0.5rem 1rem; padding: 0.8rem 1.2rem 0.5rem;
margin: 0; margin: 0;
background: color(color-main-background);
} }
rombrowser .games-title rombrowser .games-title
@ -201,27 +205,30 @@ rombrowser .config-button .outline
rombrowser .config-button:hover .outline rombrowser .config-button:hover .outline
{ {
fill: #232629; fill: color(color-ui-text-primary);
} }
rombrowser .config-button rombrowser .config-button
{ {
padding: 0.2rem; padding: 0.3rem;
border: 1px solid color(color-card-border);
border-radius: 6px;
background-color: color(color-card-background);
} }
rombrowser .config-button:hover rombrowser .config-button:hover
{ {
background-color: #b3d9f6; background-color: color(color-accent-soft);
border-radius: 4px; border-color: color(color-accent);
} }
rombrowser .games-title h1 rombrowser .games-title h1
{ {
font-family: var(font-ui), Arial, sans-serif; font-family: var(font-ui), Arial, sans-serif;
font-size: 1.5rem; font-size: 1.9rem;
font-weight: 400; font-weight: 700;
color: color(color-ui-text-primary); color: color(color-ui-text-primary);
padding: 0 0 0.6rem; padding: 0 0 0.8rem;
margin: 0; margin: 0;
width:* width:*
} }
@ -259,14 +266,22 @@ rombrowser .rom-card-content
rombrowser .rom-card rombrowser .rom-card
{ {
cursor: pointer; cursor: pointer;
border-radius: 8px; border-radius: 10px;
border: 3px solid transparent; border: 3px solid color(color-card-border);
background-color: color(color-card-background);
context-menu: selector(menu#RomCardContextMenu); 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 rombrowser .rom-card:visited
{ {
border: 3px solid #76B9ED; border: 3px solid color(color-accent);
box-shadow: 0 0 10px rgba(47, 128, 255, 0.45);
cursor: pointer; cursor: pointer;
} }
@ -417,18 +432,19 @@ rombrowser .games-grid[data-size="4"] .rom-card
ul#menu-bar ul#menu-bar
{ {
margin: 0; margin: 0;
padding: 0 0.5em 0.3em 0.5em; padding: 0.2em 0.5em;
background: color(color-menubar-background); background: color(color-menubar-background);
color: color(color-ui-text-primary); color: color(color-ui-text-primary);
border-bottom: 1px solid color(color-menubar-border);
font-family: var(font-ui), Arial, sans-serif; font-family: var(font-ui), Arial, sans-serif;
font-size: 0.9em; font-size: 0.95em;
font-weight: 100; font-weight: 400;
flow: horizontal; flow: horizontal;
} }
ul#menu-bar > li ul#menu-bar > li
{ {
padding: 0.28em 0.55em; padding: 0.2em 0.6em;
margin: 0; margin: 0;
white-space: nowrap; white-space: nowrap;
width: max-content; width: max-content;
@ -446,7 +462,7 @@ ul#menu-bar > li:hover
ul#menu-bar:focus > li:current, ul#menu-bar:focus > li:current,
ul#menu-bar > li:owns-popup { ul#menu-bar > li:owns-popup {
background-color: color(color-menubar-background-active); background-color: color(color-menubar-background-active);
border-radius: 5px 5px 0; border-radius: 5px;
} }
ul#menu-bar caption u, ul#menu-bar caption u,
@ -474,9 +490,9 @@ menu
min-width: 14em; min-width: 14em;
max-width:max-content; max-width:max-content;
background: color(color-menu-popup-background); background: color(color-menu-popup-background);
color: #f0f0f0; color: color(color-ui-text-primary);
border: 1px solid color(color-menu-popup-border); border: 1px solid color(color-menu-popup-border);
border-top: none; border-radius: 6px;
box-shadow: 0 0.25em 0.75em color(color-menu-popup-shadow); box-shadow: 0 0.25em 0.75em color(color-menu-popup-shadow);
} }
@ -485,6 +501,7 @@ ul#menu-bar menu
position: absolute; position: absolute;
left: 0; left: 0;
top: 100%; top: 100%;
margin-top: 2px;
z-index: 10000; z-index: 10000;
} }
@ -520,7 +537,7 @@ menu li
foreground-repeat: no-repeat; foreground-repeat: no-repeat;
foreground-position: left 2px top 50%; foreground-position: left 2px top 50%;
padding: 0.4em 1.75em 0.4em 1.1em; padding: 0.4em 1.75em 0.4em 1.1em;
margin: 0; margin: 0 0.3em;
} }
menu li .menu-item-label menu li .menu-item-label
@ -652,14 +669,14 @@ menu li .menu-accelerator:empty
menu li:hover menu li:hover
{ {
background: color(color-menuitem-background-hover); background: color(color-menuitem-background-hover);
border-radius: 2px; border-radius: 4px;
} }
menu li:current, menu li:current,
menu li:hover:owns-popup menu li:hover:owns-popup
{ {
background-color: #094771; background-color: color(color-accent);
border-radius: 2px; border-radius: 4px;
} }
menu li:current .menu-item-label, menu li:current .menu-item-label,

4
lang/english/css/volume_slider.css
View File

@ -5,14 +5,14 @@
height: 4dip; height: 4dip;
padding: 5dip 6dip; padding: 5dip 6dip;
border: none; border: none;
background: #505a64; background: #24324a;
background-clip: content-box; background-clip: content-box;
background-image: url(stock:block); background-image: url(stock:block);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 0 0; background-position: 0 0;
background-size: var(slider-position, 0px) 4dip; background-size: var(slider-position, 0px) 4dip;
border-radius: 3dip; border-radius: 3dip;
fill: #0078d7; fill: #2f80ff;
foreground: none; foreground: none;
} }

34
lang/english/html/input_config.html
View File

@ -3,6 +3,7 @@
<link href="base.css" rel="stylesheet" type="text/css" /> <link href="base.css" rel="stylesheet" type="text/css" />
<link href="dialog.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="config.css" rel="stylesheet" type="text/css" />
<link href="volume_slider.css" rel="stylesheet" type="text/css" />
<title>Configure Input</title> <title>Configure Input</title>
</head> </head>
<header> <header>
@ -44,11 +45,7 @@ body {
text-align: center; text-align: center;
min-width: 2.5rem; min-width: 2.5rem;
} }
.tab-button:visited {
background: color(color-config-page);
border-color: color(color-config-page-border);
border-bottom: 1px solid color(color-config-page);
}
.connect { .connect {
position: absolute; position: absolute;
@ -86,11 +83,12 @@ div.button-column,
{ {
background: color(color-config-page); background: color(color-config-page);
border: 1px solid color(color-config-page-border); border: 1px solid color(color-config-page-border);
border-radius: 0 8px 8px 8px;
width: max-content; width: max-content;
height: max-content; height: max-content;
font-family: 'Segoe UI', Arial, sans-serif; font-family: var(font-ui), Arial, sans-serif;
font-size: 0.8rem; font-size: 0.8rem;
color: #eff0f1; color: color(color-ui-text-primary);
padding: 1em; padding: 1em;
} }
@ -104,7 +102,8 @@ div.button-column,
{ {
position: relative; position: relative;
background-color: color(color-config-page); background-color: color(color-config-page);
border: 1px solid #55575a; border: 1px solid color(color-config-page-border);
border-radius: 6px;
padding: 1.2rem 0.5rem 0.5rem 0.5rem; padding: 1.2rem 0.5rem 0.5rem 0.5rem;
margin: 0 0 1rem 0; margin: 0 0 1rem 0;
} }
@ -128,7 +127,8 @@ div.center-bottom-row
{ {
position: relative; position: relative;
background-color: color(color-config-page); background-color: color(color-config-page);
border: 1px solid #55575a; border: 1px solid color(color-config-page-border);
border-radius: 6px;
padding: 1.2rem 0.5rem 0.5rem 0.5rem; padding: 1.2rem 0.5rem 0.5rem 0.5rem;
margin-right: 0.6rem; margin-right: 0.6rem;
width: max-content; width: max-content;
@ -201,7 +201,8 @@ div.center-bottom-row
.controller-config .group.vibration #labelVibrationStrength:hover, .controller-config .group.vibration #labelVibrationStrength:hover,
.controller-config .group.vibration #vibrationStrengthPopupBtn:hover .controller-config .group.vibration #vibrationStrengthPopupBtn:hover
{ {
border: 1px solid #55575a; border: 1px solid color(color-accent);
border-radius: 4px;
} }
.controller-config .group.vibration #vibrationStrengthPopupBtn svg .controller-config .group.vibration #vibrationStrengthPopupBtn svg
@ -221,7 +222,8 @@ div.center-bottom-row
#VibrationStrengthPopup #VibrationStrengthPopup
{ {
background: color(color-config-page); background: color(color-config-page);
border: 1px solid #55575a; border: 1px solid color(color-control-border);
border-radius: 6px;
padding: 0.8em; padding: 0.8em;
} }
@ -338,16 +340,22 @@ button
input[type=hslider] input[type=hslider]
{ {
style-set: volume-slider-control;
display: block; display: block;
width: *; width: *;
} }
.input-row > input[type=hslider]
{
width: 4.6rem;
}
input[type=hslider] > button.slider input[type=hslider] > button.slider
{ {
size:4dip; size:4dip;
foreground: none; foreground: none;
background: #009CF6; background: color(color-accent);
border:2dip solid #009CF6; border:2dip solid color(color-accent);
border-radius:50%; border-radius:50%;
padding: 0px; padding: 0px;
margin: 0px; margin: 0px;

85
lang/english/html/system_config.html
View File

@ -24,28 +24,31 @@ body {
#MainTabNav { #MainTabNav {
width: 12em; width: 12em;
height: *; height: *;
border: 1px solid #54575b; border: 1px solid color(color-config-page-border);
border-radius: 0.5em; border-radius: 8px;
background-color: color(color-config-page); background-color: color(color-config-page);
margin: 0 0.4em 0 0; margin: 0 0.6em 0 0;
color: #ffffff; padding: 0.35em;
color: color(color-ui-text-primary);
font-size: 0.9em; font-size: 0.9em;
} }
#MainTabNav > Page:first-child
{
border-radius: 0.5em 0.5em 0 0;
}
#MainTabNav > Page #MainTabNav > Page
{ {
padding: 0.2em 0.5em; padding: 0.4em 0.7em;
margin: 0 0 0.15em 0;
border-radius: 6px;
}
#MainTabNav > Page:hover
{
background: color(color-control-hover);
} }
#MainTabNav > Page:visited #MainTabNav > Page:visited
{ {
background: #b3d9f7; background: color(color-accent);
color: #303030; color: #ffffff;
} }
.checkbox-row, .checkbox-row,
@ -90,6 +93,11 @@ body {
width: *; width: *;
} }
.page_content input[type="hslider"]:not(.volume-normal-marker)
{
style-set: volume-slider-control;
}
.volume-slider .volume-slider
{ {
display: block; display: block;
@ -119,51 +127,49 @@ PageNav.page_tabs {
} }
PageNav.page_tabs page { PageNav.page_tabs page {
background: #2b2f32; background: color(color-tab-background);
border: 1px solid #55575a; border: 1px solid color(color-config-page-border);
border-bottom: 1px solid color(color-config-page-border); border-bottom: 1px solid color(color-config-page-border);
border-radius: 2px 2px 0 0; border-top: 2px solid transparent;
color: #eff0f1; border-radius: 6px 6px 0 0;
font-family: 'Segoe UI', Arial, sans-serif; color: color(color-ui-text-muted);
font-size: 1rem; font-family: var(font-ui), Arial, sans-serif;
padding: 0.2rem 1.3rem 0.2rem 1.3rem; font-size: 0.9rem;
margin: 0; padding: 0.25rem 1.1rem;
margin: 0 0.2rem -1px 0;
position: relative; position: relative;
z-index: 2; z-index: 2;
margin-bottom: -1px;
min-width: 2rem; min-width: 2rem;
display: inline-block; display: inline-block;
width: max-content; width: max-content;
} }
PageNav.page_tabs page:hover { PageNav.page_tabs page:hover {
border: 1px solid #55575a; background: color(color-control-hover);
border-bottom: 1px solid color(color-config-page-border); color: color(color-ui-text-primary);
}
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:visited,
PageNav.page_tabs page.active { PageNav.page_tabs page.active {
background: color(color-config-page); background: color(color-config-page);
border-color: color(color-config-page-border); border-color: color(color-config-page-border);
border-top: 2px solid color(color-accent);
border-bottom: 1px solid color(color-config-page); border-bottom: 1px solid color(color-config-page);
color: color(color-ui-text-primary);
} }
.page_content .page_content
{ {
background: color(color-config-page); background: color(color-config-page);
border: 1px solid color(color-config-page-border); border: 1px solid color(color-config-page-border);
border-radius: 0 8px 8px 8px;
width: *; width: *;
height: *; height: *;
flow: horizontal; flow: horizontal;
padding: 1em 1em 0 1em; padding: 1em 1em 0 1em;
font-family: var(font-ui), Arial, sans-serif; font-family: var(font-ui), Arial, sans-serif;
font-size: 0.9rem; font-size: 0.9rem;
color: #eff0f1; color: color(color-ui-text-primary);
} }
#gameDirectoryList, #gameDirectoryList,
@ -174,9 +180,9 @@ PageNav.page_tabs page.active {
#gameDirectoryList select, #gameDirectoryList select,
#addOnDirectoryList select { #addOnDirectoryList select {
background-color: #1e1e1e; background-color: color(color-control-background);
border: 1px solid #404040; border: 1px solid color(color-control-border);
border-radius: 4px; border-radius: 6px;
box-sizing: border-box; box-sizing: border-box;
height: 8rem; height: 8rem;
max-height: 8rem; max-height: 8rem;
@ -191,14 +197,21 @@ PageNav.page_tabs page.active {
{ {
padding: 0.2rem 0.3rem; padding: 0.2rem 0.3rem;
margin: 0.2rem 0.3rem; margin: 0.2rem 0.3rem;
border-radius: 3px; border-radius: 4px;
color: white; color: color(color-ui-text-primary);
}
#gameDirectoryList option:hover,
#addOnDirectoryList option:hover
{
background: color(color-control-hover);
} }
#gameDirectoryList option:current, #gameDirectoryList option:current,
#addOnDirectoryList option:current #addOnDirectoryList option:current
{ {
color: #1e1e1e; background: color(color-accent);
color: #ffffff;
} }
body > .footer body > .footer

10
src/nxemu/user_interface/sciter_main_window.cpp
View File

@ -1075,7 +1075,15 @@ void SciterMainWindow::SetCaption(const std::string & caption)
SciterElement captionElement(m_rootElement.FindFirst("[role='window-caption'] > span")); SciterElement captionElement(m_rootElement.FindFirst("[role='window-caption'] > span"));
if (captionElement.IsValid()) if (captionElement.IsValid())
{ {
captionElement.SetHTML((uint8_t *)caption.data(), caption.size()); std::string captionHtml = caption;
size_t versionSep = m_windowTitle.find(' ');
if (versionSep != std::string::npos && caption.size() >= m_windowTitle.size() &&
caption.compare(caption.size() - m_windowTitle.size(), m_windowTitle.size(), m_windowTitle) == 0)
{
size_t versionStart = caption.size() - m_windowTitle.size() + versionSep + 1;
captionHtml = caption.substr(0, versionStart - 1) + "<span class=\"caption-version\">" + caption.substr(versionStart) + "</span>";
}
captionElement.SetHTML((uint8_t *)captionHtml.data(), captionHtml.size());
} }
} }