UI: new experimental look and feel (#416)
This commit is contained in:
N3xoX1
GitHub
parent
d200045196
commit
c72f54cf2e
|
|
@ -1,36 +1,43 @@
|
|||
html {
|
||||
var(font-ui): "Segoe UI";
|
||||
var(color-ui-text-primary): #eff0f1;
|
||||
var(color-ui-text-muted): #b0b6bc;
|
||||
var(color-statusbar-background): #31363b;
|
||||
var(color-statusbar-border): #434242;
|
||||
var(color-statusbar-hover-border): #76797c;
|
||||
var(color-pause-panel-background): #25282c;
|
||||
var(color-main-background): #2d2d2d;
|
||||
var(color-titlebar-background): #181818;
|
||||
var(color-titlebar-background-inactive): #2d2d2d;
|
||||
var(color-titlebar-text): #FFF;
|
||||
var(color-titlebar-icon): #FFF;
|
||||
var(color-titlebar-icon-hover): #0078d7;
|
||||
var(color-titlebar-icon-inactive): #2f7bb0;
|
||||
var(color-menubar-background): #181818;
|
||||
var(color-menubar-background-hover): #2c2c2c;
|
||||
var(color-menubar-background-active): #2c2c2c;
|
||||
var(color-menuitem-background): #2c2c2c;
|
||||
var(color-menuitem-background-hover): #383838;
|
||||
var(color-menu-popup-background): #252526;
|
||||
var(color-menu-popup-border): #454545;
|
||||
var(color-menu-popup-shadow): rgba(0, 0, 0, 0.45);
|
||||
var(color-menu-shortcut-text): #b8b8b8;
|
||||
var(color-menu-separator): #3d3d3d;
|
||||
var(color-context-menu-background): #2b2b2b;
|
||||
var(color-context-menu-border): #3c3c3c;
|
||||
var(color-context-menu-hover): #3a3a3a;
|
||||
var(color-context-menu-text): #f3f3f3;
|
||||
var(color-context-menu-muted): #a8a8a8;
|
||||
var(color-context-menu-separator): #404040;
|
||||
var(color-context-menu-shadow): rgba(0, 0, 0, 0.55);
|
||||
var(color-window-border): #353535;
|
||||
var(color-ui-text-primary): #e6ecf5;
|
||||
var(color-ui-text-muted): #8d9bb3;
|
||||
var(color-statusbar-background): #0a1222;
|
||||
var(color-statusbar-border): #1a2840;
|
||||
var(color-statusbar-hover-border): #2f80ff;
|
||||
var(color-pause-panel-background): #0b1422;
|
||||
var(color-main-background): #090f1a;
|
||||
var(color-titlebar-background): #0a1222;
|
||||
var(color-titlebar-background-inactive): #0a1222;
|
||||
var(color-titlebar-text): #e6ecf5;
|
||||
var(color-titlebar-icon): #c9d4e5;
|
||||
var(color-titlebar-icon-hover): #18263f;
|
||||
var(color-titlebar-icon-inactive): #5d6b82;
|
||||
var(color-menubar-background): #0a1222;
|
||||
var(color-menubar-background-hover): #18263f;
|
||||
var(color-menubar-background-active): #1e3050;
|
||||
var(color-menuitem-background): #16233a;
|
||||
var(color-menuitem-background-hover): #1a2a44;
|
||||
var(color-menu-popup-background): #0f1a2c;
|
||||
var(color-menu-popup-border): #22324d;
|
||||
var(color-menu-popup-shadow): rgba(0, 0, 0, 0.55);
|
||||
var(color-menu-shortcut-text): #8d9bb3;
|
||||
var(color-menu-separator): #1f2d45;
|
||||
var(color-context-menu-background): #0f1a2c;
|
||||
var(color-context-menu-border): #22324d;
|
||||
var(color-context-menu-hover): #1a2a44;
|
||||
var(color-context-menu-text): #e6ecf5;
|
||||
var(color-context-menu-muted): #8d9bb3;
|
||||
var(color-context-menu-separator): #1f2d45;
|
||||
var(color-context-menu-shadow): rgba(0, 0, 0, 0.6);
|
||||
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);
|
||||
background-color: color(color-main-background);
|
||||
|
|
@ -64,8 +71,8 @@ html > header > window-caption
|
|||
width: *;
|
||||
padding: 0 1em;
|
||||
font-family: var(font-ui), Arial, sans-serif;
|
||||
font-size: 0.9em;
|
||||
font-weight: 100;
|
||||
font-size: 0.95em;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
html > header > window-caption span
|
||||
|
|
@ -73,6 +80,14 @@ html > header > window-caption span
|
|||
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
|
||||
{
|
||||
vertical-align: middle;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,14 @@
|
|||
html {
|
||||
var(color-config-page): #31363B;
|
||||
var(color-config-page-border): #505050;
|
||||
var(color-config-page): #0f1a2c;
|
||||
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
|
||||
|
|
@ -14,8 +22,9 @@ div.ConfigPage
|
|||
|
||||
popup.tooltip
|
||||
{
|
||||
background: #4f6459;
|
||||
border: 1px solid #6a6a6a;
|
||||
background: color(color-tooltip-background);
|
||||
border: 1px solid color(color-tooltip-border);
|
||||
border-radius: 6px;
|
||||
padding: 0.5rem;
|
||||
color: color(color-ui-text-primary);
|
||||
font-family: var(font-ui), Arial, sans-serif;
|
||||
|
|
@ -34,42 +43,42 @@ popup.tooltip
|
|||
}
|
||||
|
||||
.tab-button {
|
||||
background: #2b2f32;
|
||||
border: 1px solid #55575a;
|
||||
background: color(color-tab-background);
|
||||
border: 1px solid color(color-config-page-border);
|
||||
border-bottom: 1px solid color(color-config-page-border);
|
||||
border-radius: 2px 2px 0 0;
|
||||
color: color(color-ui-text-primary);
|
||||
border-top: 2px solid transparent;
|
||||
border-radius: 6px 6px 0 0;
|
||||
color: color(color-ui-text-muted);
|
||||
font-family: var(font-ui), Arial, sans-serif;
|
||||
font-size: 0.8rem;
|
||||
padding: 0.2rem 1.3rem 0.2rem 1.3rem;
|
||||
margin: 0;
|
||||
padding: 0.25rem 1.1rem;
|
||||
margin: 0 0.2rem -1px 0;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
margin-bottom: -1px;
|
||||
z-index: 2;
|
||||
min-width: 2rem;
|
||||
}
|
||||
|
||||
.tab-button:hover {
|
||||
border: 1px solid #55575a;
|
||||
border-bottom: 1px solid color(color-config-page-border);
|
||||
background: color(color-control-hover);
|
||||
color: color(color-ui-text-primary);
|
||||
}
|
||||
|
||||
.tab-button:active {
|
||||
background: #2b2f32;
|
||||
}
|
||||
|
||||
.tab-button.active {
|
||||
.tab-button.active,
|
||||
.tab-button:visited {
|
||||
background: color(color-config-page);
|
||||
border-color: color(color-config-page-border);
|
||||
border-top: 2px solid color(color-accent);
|
||||
border-bottom: 1px solid color(color-config-page);
|
||||
color: color(color-ui-text-primary);
|
||||
}
|
||||
|
||||
.input-group
|
||||
.input-group
|
||||
{
|
||||
position: relative;
|
||||
background-color: color(color-config-page);
|
||||
border: 1px solid #55575a;
|
||||
padding: 1.2rem 0.5rem 0.5rem 0.5rem;
|
||||
border: 1px solid color(color-config-page-border);
|
||||
border-radius: 6px;
|
||||
padding: 1.2rem 0.6rem 0.5rem 0.6rem;
|
||||
margin: 0 0 1rem 0;
|
||||
flow: vertical;
|
||||
}
|
||||
|
|
@ -80,7 +89,7 @@ popup.tooltip
|
|||
padding: 0.5rem 0 0;
|
||||
}
|
||||
|
||||
.group-title
|
||||
.group-title
|
||||
{
|
||||
position: absolute;
|
||||
top: -0.5rem;
|
||||
|
|
@ -89,7 +98,8 @@ popup.tooltip
|
|||
background-color: color(color-config-page);
|
||||
padding: 0 6px;
|
||||
font-size: 0.8rem;
|
||||
color: #f0f0f0;
|
||||
font-weight: 600;
|
||||
color: color(color-ui-text-primary);
|
||||
}
|
||||
|
||||
.input-row
|
||||
|
|
@ -97,9 +107,9 @@ popup.tooltip
|
|||
display: inline-block;
|
||||
position: relative;
|
||||
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;
|
||||
border-radius: 2px;
|
||||
border-radius: 4px;
|
||||
margin: 0 * 0.9rem *;
|
||||
width: *;
|
||||
}
|
||||
|
|
@ -113,7 +123,7 @@ popup.tooltip
|
|||
background-color: color(color-config-page);
|
||||
padding: 0 6px;
|
||||
font-size: 0.8rem;
|
||||
color: #f0f0f0;
|
||||
color: color(color-ui-text-muted);
|
||||
}
|
||||
|
||||
.input-row button
|
||||
|
|
@ -125,24 +135,24 @@ popup.tooltip
|
|||
#ConfigContents {
|
||||
width: *;
|
||||
height: *;
|
||||
color: #ffffff;
|
||||
color: color(color-ui-text-primary);
|
||||
}
|
||||
|
||||
@set styled-select < std-select-dropdown {
|
||||
:root {
|
||||
color: #FFF;
|
||||
padding: 0.1em;
|
||||
color: color(color-ui-text-primary);
|
||||
padding: 0.2em 0.3em;
|
||||
margin: 0 0 0.3em 0;
|
||||
width: *;
|
||||
border: 1px solid #54575b;
|
||||
border-radius: .2em;
|
||||
background: #2F2F31;
|
||||
border: 1px solid color(color-control-border);
|
||||
border-radius: 6px;
|
||||
background: color(color-control-background);
|
||||
}
|
||||
:root:disabled,
|
||||
:root[disabled] {
|
||||
background-color: #1a1a1a !important;
|
||||
color: #666666 !important;
|
||||
border-color: #333333 !important;
|
||||
background-color: color(color-control-disabled) !important;
|
||||
color: color(color-control-disabled-text) !important;
|
||||
border-color: color(color-config-page-border) !important;
|
||||
cursor: not-allowed;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
|
@ -150,28 +160,36 @@ popup.tooltip
|
|||
:root:active,
|
||||
:root:hover
|
||||
{
|
||||
border-color: #3daee9;
|
||||
border-color: color(color-accent);
|
||||
}
|
||||
:root:hover {
|
||||
background: #3C3C3C;
|
||||
background: color(color-control-hover);
|
||||
}
|
||||
:root > popup.list {
|
||||
background-color: #2B2B2B;
|
||||
border-color: #1F1F1F;
|
||||
color: #FFF;
|
||||
background-color: color(color-config-page);
|
||||
border: 1px solid color(color-control-border);
|
||||
border-radius: 6px;
|
||||
color: color(color-ui-text-primary);
|
||||
}
|
||||
:root option {
|
||||
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 {
|
||||
fill: #FFF;
|
||||
fill: color(color-ui-text-muted);
|
||||
}
|
||||
}
|
||||
select:not([type]) {
|
||||
style-set: styled-select;
|
||||
}
|
||||
|
||||
|
||||
ComboBox,
|
||||
ComboBox > select,
|
||||
ListBox,
|
||||
|
|
@ -185,40 +203,47 @@ input[type="checkbox"] {
|
|||
appearance:none;
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
border: 1px solid #818183;
|
||||
background: none;
|
||||
border-radius: 0.3em;
|
||||
border: 1px solid #4a5b78;
|
||||
background: color(color-control-background);
|
||||
border-radius: 0.25em;
|
||||
margin: 0 0.3em 0 0;
|
||||
}
|
||||
|
||||
input[type="checkbox"]:hover {
|
||||
border-color: color(color-accent);
|
||||
}
|
||||
|
||||
input[type="checkbox"]:disabled,
|
||||
input[type="checkbox"][disabled]
|
||||
{
|
||||
background-color: #1a1a1a !important;
|
||||
background-color: color(color-control-disabled) !important;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
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-size: 0.7em;
|
||||
border-color: color(color-accent);
|
||||
fill: #ffffff;
|
||||
}
|
||||
|
||||
input[type="text"] {
|
||||
color: #FFF;
|
||||
padding: 0.1em;
|
||||
color: color(color-ui-text-primary);
|
||||
padding: 0.2em 0.3em;
|
||||
margin: 0 0 0.3em 0;
|
||||
width: *;
|
||||
border: 1px solid #54575b;
|
||||
border-radius: .2em;
|
||||
background: #2F2F31;
|
||||
border: 1px solid color(color-control-border);
|
||||
border-radius: 6px;
|
||||
background: color(color-control-background);
|
||||
}
|
||||
|
||||
input[type="text"]:disabled,
|
||||
input[type="text"][disabled] {
|
||||
background-color: #1a1a1a !important;
|
||||
color: #666666 !important;
|
||||
border-color: #333333 !important;
|
||||
background-color: color(color-control-disabled) !important;
|
||||
color: color(color-control-disabled-text) !important;
|
||||
border-color: color(color-config-page-border) !important;
|
||||
cursor: not-allowed;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
|
@ -226,20 +251,20 @@ input[type="text"][disabled] {
|
|||
input[type="text"]:focus,
|
||||
input[type="text"]:active
|
||||
{
|
||||
border-color: #3daee9;
|
||||
border-color: color(color-accent);
|
||||
}
|
||||
|
||||
input[type="text"]:hover {
|
||||
background: #3C3C3C;
|
||||
background: color(color-control-hover);
|
||||
}
|
||||
|
||||
input[type="text"]:disabled:hover,
|
||||
input[type="text"][disabled]:hover {
|
||||
background-color: #1a1a1a !important;
|
||||
background-color: color(color-control-disabled) !important;
|
||||
}
|
||||
|
||||
label:disabled {
|
||||
color: #666666 !important;
|
||||
color: color(color-control-disabled-text) !important;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
|
|
@ -251,7 +276,7 @@ label:disabled {
|
|||
|
||||
.hotkeys-hint
|
||||
{
|
||||
color: #bdc3c7;
|
||||
color: color(color-ui-text-muted);
|
||||
font-size: 0.85rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
|
@ -274,9 +299,9 @@ label:disabled {
|
|||
.profile-grid
|
||||
{
|
||||
flow: horizontal-wrap;
|
||||
border: 1px solid #55575a;
|
||||
border-radius: 5px;
|
||||
background: #1e1e1e;
|
||||
border: 1px solid color(color-config-page-border);
|
||||
border-radius: 6px;
|
||||
background: color(color-control-background);
|
||||
padding: 0.5rem;
|
||||
width: *;
|
||||
height: *;
|
||||
|
|
@ -300,13 +325,13 @@ label:disabled {
|
|||
|
||||
.profile-tile:hover
|
||||
{
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
background: color(color-control-hover);
|
||||
}
|
||||
|
||||
.profile-tile.current
|
||||
{
|
||||
background: rgba(61, 174, 233, 0.22);
|
||||
border: 2px solid #3daee9;
|
||||
background: color(color-accent-soft);
|
||||
border: 2px solid color(color-accent);
|
||||
}
|
||||
|
||||
.profile-tile.current > .profile-tile-name
|
||||
|
|
@ -320,7 +345,7 @@ label:disabled {
|
|||
width: 96px;
|
||||
height: 96px;
|
||||
border-radius: 4px;
|
||||
background: #111111;
|
||||
background: color(color-control-background);
|
||||
overflow: hidden;
|
||||
foreground-repeat: no-repeat;
|
||||
foreground-position: 50% 50%;
|
||||
|
|
@ -358,7 +383,7 @@ label:disabled {
|
|||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 12px;
|
||||
background: #2b2f32;
|
||||
background: color(color-tab-background);
|
||||
border: none;
|
||||
color: #ffffff;
|
||||
padding: 0;
|
||||
|
|
@ -393,7 +418,7 @@ label:disabled {
|
|||
|
||||
.profile-tile-edit:hover
|
||||
{
|
||||
background: #3a4045;
|
||||
background: color(color-control-hover);
|
||||
}
|
||||
|
||||
.profile-tile-add
|
||||
|
|
@ -403,7 +428,7 @@ label:disabled {
|
|||
height: 118px;
|
||||
margin: 0.35rem;
|
||||
border-radius: 5px;
|
||||
background: #2b2f32;
|
||||
background: color(color-tab-background);
|
||||
cursor: pointer;
|
||||
behavior: clickable;
|
||||
}
|
||||
|
|
@ -416,8 +441,8 @@ label:disabled {
|
|||
width: 42px;
|
||||
height: 42px;
|
||||
border-radius: 21px;
|
||||
background: #2b2f32;
|
||||
border: 1px solid #55575a;
|
||||
background: color(color-control-background);
|
||||
border: 1px solid color(color-control-border);
|
||||
color: color(color-ui-text-primary);
|
||||
font-size: 1.6rem;
|
||||
font-family: var(font-ui), Arial, sans-serif;
|
||||
|
|
@ -431,8 +456,8 @@ label:disabled {
|
|||
|
||||
.profile-tile-add-button:hover
|
||||
{
|
||||
background: #3a4045;
|
||||
border: 1px solid #3cafe9;
|
||||
background: color(color-control-hover);
|
||||
border: 1px solid color(color-accent);
|
||||
}
|
||||
|
||||
.hotkeys-table
|
||||
|
|
@ -445,7 +470,7 @@ label:disabled {
|
|||
|
||||
.hotkeys-table thead tr
|
||||
{
|
||||
background: #2b2f32;
|
||||
background: color(color-tab-background);
|
||||
}
|
||||
|
||||
.hotkeys-table th,
|
||||
|
|
@ -478,5 +503,5 @@ label:disabled {
|
|||
|
||||
.hotkey-binding:hover
|
||||
{
|
||||
background: #3a3f44;
|
||||
background: color(color-control-hover);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,24 +1,43 @@
|
|||
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);
|
||||
}
|
||||
|
||||
button {
|
||||
color: color(color-ui-text-primary);
|
||||
background: #232728;
|
||||
border: 1px solid #55575a;
|
||||
background: color(color-button-background);
|
||||
border: 1px solid color(color-button-border);
|
||||
border-radius: 6px;
|
||||
font-family: var(font-ui), Arial, sans-serif;
|
||||
font-size: 0.8rem;
|
||||
padding: 0.2rem;
|
||||
padding: 0.25rem 0.6rem;
|
||||
min-width: 5rem;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
border: 1px solid #3cafe9;
|
||||
background: color(color-button-hover);
|
||||
border: 1px solid color(color-accent);
|
||||
}
|
||||
|
||||
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 {
|
||||
|
|
|
|||
|
|
@ -16,16 +16,17 @@
|
|||
border-top: 1px solid color(color-statusbar-border);
|
||||
font-family: var(font-ui), Arial, sans-serif;
|
||||
font-size: 0.8em;
|
||||
font-weight: 100;
|
||||
font-weight: 400;
|
||||
line-height: 1.2em;
|
||||
height: 1.6rem;
|
||||
height: 1.9rem;
|
||||
}
|
||||
|
||||
#StatusText
|
||||
{
|
||||
width: *;
|
||||
text-align: right;
|
||||
display: inline-block;
|
||||
display: block;
|
||||
vertical-align: middle;
|
||||
height: 1.2em;
|
||||
padding: 0.2em;
|
||||
}
|
||||
|
|
@ -37,7 +38,7 @@
|
|||
height: 1.2em;
|
||||
margin: 0 0.6em;
|
||||
vertical-align: middle;
|
||||
background: rgba(239, 240, 241, 0.16);
|
||||
background: color(color-statusbar-border);
|
||||
}
|
||||
|
||||
#StatusBar #volumeAnchor
|
||||
|
|
@ -75,7 +76,8 @@
|
|||
#StatusBar #gpuCommandSynchronization
|
||||
{
|
||||
border: 1px solid transparent;
|
||||
padding: 0.2em;
|
||||
border-radius: 4dip;
|
||||
padding: 0.2em 0.4em;
|
||||
display: block;
|
||||
height: 1.2em;
|
||||
vertical-align: middle;
|
||||
|
|
@ -88,6 +90,7 @@
|
|||
#StatusBar #gpuCommandSynchronization:hover
|
||||
{
|
||||
border: 1px solid color(color-statusbar-hover-border);
|
||||
background: color(color-accent-soft);
|
||||
}
|
||||
|
||||
#StatusBar #volume
|
||||
|
|
@ -173,8 +176,9 @@ rombrowser
|
|||
display: block;
|
||||
width: *;
|
||||
height: *;
|
||||
padding: 0.5rem 1rem;
|
||||
padding: 0.8rem 1.2rem 0.5rem;
|
||||
margin: 0;
|
||||
background: color(color-main-background);
|
||||
}
|
||||
|
||||
rombrowser .games-title
|
||||
|
|
@ -201,27 +205,30 @@ rombrowser .config-button .outline
|
|||
|
||||
rombrowser .config-button:hover .outline
|
||||
{
|
||||
fill: #232629;
|
||||
fill: color(color-ui-text-primary);
|
||||
}
|
||||
|
||||
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
|
||||
{
|
||||
background-color: #b3d9f6;
|
||||
border-radius: 4px;
|
||||
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.5rem;
|
||||
font-weight: 400;
|
||||
font-size: 1.9rem;
|
||||
font-weight: 700;
|
||||
color: color(color-ui-text-primary);
|
||||
padding: 0 0 0.6rem;
|
||||
padding: 0 0 0.8rem;
|
||||
margin: 0;
|
||||
width:*
|
||||
}
|
||||
|
|
@ -259,14 +266,22 @@ rombrowser .rom-card-content
|
|||
rombrowser .rom-card
|
||||
{
|
||||
cursor: pointer;
|
||||
border-radius: 8px;
|
||||
border: 3px solid transparent;
|
||||
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 #76B9ED;
|
||||
border: 3px solid color(color-accent);
|
||||
box-shadow: 0 0 10px rgba(47, 128, 255, 0.45);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
|
@ -417,18 +432,19 @@ rombrowser .games-grid[data-size="4"] .rom-card
|
|||
ul#menu-bar
|
||||
{
|
||||
margin: 0;
|
||||
padding: 0 0.5em 0.3em 0.5em;
|
||||
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.9em;
|
||||
font-weight: 100;
|
||||
font-size: 0.95em;
|
||||
font-weight: 400;
|
||||
flow: horizontal;
|
||||
}
|
||||
|
||||
ul#menu-bar > li
|
||||
{
|
||||
padding: 0.28em 0.55em;
|
||||
padding: 0.2em 0.6em;
|
||||
margin: 0;
|
||||
white-space: nowrap;
|
||||
width: max-content;
|
||||
|
|
@ -446,7 +462,7 @@ ul#menu-bar > li:hover
|
|||
ul#menu-bar:focus > li:current,
|
||||
ul#menu-bar > li:owns-popup {
|
||||
background-color: color(color-menubar-background-active);
|
||||
border-radius: 5px 5px 0;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
ul#menu-bar caption u,
|
||||
|
|
@ -474,9 +490,9 @@ menu
|
|||
min-width: 14em;
|
||||
max-width:max-content;
|
||||
background: color(color-menu-popup-background);
|
||||
color: #f0f0f0;
|
||||
color: color(color-ui-text-primary);
|
||||
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);
|
||||
}
|
||||
|
||||
|
|
@ -485,6 +501,7 @@ ul#menu-bar menu
|
|||
position: absolute;
|
||||
left: 0;
|
||||
top: 100%;
|
||||
margin-top: 2px;
|
||||
z-index: 10000;
|
||||
}
|
||||
|
||||
|
|
@ -520,7 +537,7 @@ menu li
|
|||
foreground-repeat: no-repeat;
|
||||
foreground-position: left 2px top 50%;
|
||||
padding: 0.4em 1.75em 0.4em 1.1em;
|
||||
margin: 0;
|
||||
margin: 0 0.3em;
|
||||
}
|
||||
|
||||
menu li .menu-item-label
|
||||
|
|
@ -652,14 +669,14 @@ menu li .menu-accelerator:empty
|
|||
menu li:hover
|
||||
{
|
||||
background: color(color-menuitem-background-hover);
|
||||
border-radius: 2px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
menu li:current,
|
||||
menu li:hover:owns-popup
|
||||
{
|
||||
background-color: #094771;
|
||||
border-radius: 2px;
|
||||
background-color: color(color-accent);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
menu li:current .menu-item-label,
|
||||
|
|
|
|||
|
|
@ -5,14 +5,14 @@
|
|||
height: 4dip;
|
||||
padding: 5dip 6dip;
|
||||
border: none;
|
||||
background: #505a64;
|
||||
background: #24324a;
|
||||
background-clip: content-box;
|
||||
background-image: url(stock:block);
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0 0;
|
||||
background-size: var(slider-position, 0px) 4dip;
|
||||
border-radius: 3dip;
|
||||
fill: #0078d7;
|
||||
fill: #2f80ff;
|
||||
foreground: none;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
<link href="base.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="volume_slider.css" rel="stylesheet" type="text/css" />
|
||||
<title>Configure Input</title>
|
||||
</head>
|
||||
<header>
|
||||
|
|
@ -44,11 +45,7 @@ body {
|
|||
text-align: center;
|
||||
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 {
|
||||
position: absolute;
|
||||
|
|
@ -86,11 +83,12 @@ div.button-column,
|
|||
{
|
||||
background: color(color-config-page);
|
||||
border: 1px solid color(color-config-page-border);
|
||||
border-radius: 0 8px 8px 8px;
|
||||
width: max-content;
|
||||
height: max-content;
|
||||
font-family: 'Segoe UI', Arial, sans-serif;
|
||||
font-family: var(font-ui), Arial, sans-serif;
|
||||
font-size: 0.8rem;
|
||||
color: #eff0f1;
|
||||
color: color(color-ui-text-primary);
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
|
|
@ -100,11 +98,12 @@ div.button-column,
|
|||
width: fit-content;
|
||||
}
|
||||
|
||||
.controller-config .config-header .group
|
||||
.controller-config .config-header .group
|
||||
{
|
||||
position: relative;
|
||||
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;
|
||||
margin: 0 0 1rem 0;
|
||||
}
|
||||
|
|
@ -128,7 +127,8 @@ div.center-bottom-row
|
|||
{
|
||||
position: relative;
|
||||
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;
|
||||
margin-right: 0.6rem;
|
||||
width: max-content;
|
||||
|
|
@ -201,7 +201,8 @@ div.center-bottom-row
|
|||
.controller-config .group.vibration #labelVibrationStrength: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
|
||||
|
|
@ -221,7 +222,8 @@ div.center-bottom-row
|
|||
#VibrationStrengthPopup
|
||||
{
|
||||
background: color(color-config-page);
|
||||
border: 1px solid #55575a;
|
||||
border: 1px solid color(color-control-border);
|
||||
border-radius: 6px;
|
||||
padding: 0.8em;
|
||||
}
|
||||
|
||||
|
|
@ -338,16 +340,22 @@ button
|
|||
|
||||
input[type=hslider]
|
||||
{
|
||||
style-set: volume-slider-control;
|
||||
display: block;
|
||||
width: *;
|
||||
}
|
||||
|
||||
.input-row > input[type=hslider]
|
||||
{
|
||||
width: 4.6rem;
|
||||
}
|
||||
|
||||
input[type=hslider] > button.slider
|
||||
{
|
||||
size:4dip;
|
||||
foreground: none;
|
||||
background: #009CF6;
|
||||
border:2dip solid #009CF6;
|
||||
background: color(color-accent);
|
||||
border:2dip solid color(color-accent);
|
||||
border-radius:50%;
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
|
|
|
|||
|
|
@ -24,28 +24,31 @@ body {
|
|||
#MainTabNav {
|
||||
width: 12em;
|
||||
height: *;
|
||||
border: 1px solid #54575b;
|
||||
border-radius: 0.5em;
|
||||
border: 1px solid color(color-config-page-border);
|
||||
border-radius: 8px;
|
||||
background-color: color(color-config-page);
|
||||
margin: 0 0.4em 0 0;
|
||||
color: #ffffff;
|
||||
margin: 0 0.6em 0 0;
|
||||
padding: 0.35em;
|
||||
color: color(color-ui-text-primary);
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
#MainTabNav > Page:first-child
|
||||
{
|
||||
border-radius: 0.5em 0.5em 0 0;
|
||||
}
|
||||
|
||||
#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
|
||||
{
|
||||
background: #b3d9f7;
|
||||
color: #303030;
|
||||
background: color(color-accent);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.checkbox-row,
|
||||
|
|
@ -90,6 +93,11 @@ body {
|
|||
width: *;
|
||||
}
|
||||
|
||||
.page_content input[type="hslider"]:not(.volume-normal-marker)
|
||||
{
|
||||
style-set: volume-slider-control;
|
||||
}
|
||||
|
||||
.volume-slider
|
||||
{
|
||||
display: block;
|
||||
|
|
@ -119,51 +127,49 @@ PageNav.page_tabs {
|
|||
}
|
||||
|
||||
PageNav.page_tabs page {
|
||||
background: #2b2f32;
|
||||
border: 1px solid #55575a;
|
||||
background: color(color-tab-background);
|
||||
border: 1px solid color(color-config-page-border);
|
||||
border-bottom: 1px solid color(color-config-page-border);
|
||||
border-radius: 2px 2px 0 0;
|
||||
color: #eff0f1;
|
||||
font-family: 'Segoe UI', Arial, sans-serif;
|
||||
font-size: 1rem;
|
||||
padding: 0.2rem 1.3rem 0.2rem 1.3rem;
|
||||
margin: 0;
|
||||
border-top: 2px solid transparent;
|
||||
border-radius: 6px 6px 0 0;
|
||||
color: color(color-ui-text-muted);
|
||||
font-family: var(font-ui), Arial, sans-serif;
|
||||
font-size: 0.9rem;
|
||||
padding: 0.25rem 1.1rem;
|
||||
margin: 0 0.2rem -1px 0;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
margin-bottom: -1px;
|
||||
z-index: 2;
|
||||
min-width: 2rem;
|
||||
display: inline-block;
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
PageNav.page_tabs page:hover {
|
||||
border: 1px solid #55575a;
|
||||
border-bottom: 1px solid color(color-config-page-border);
|
||||
}
|
||||
|
||||
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);
|
||||
background: color(color-control-hover);
|
||||
color: color(color-ui-text-primary);
|
||||
}
|
||||
|
||||
PageNav.page_tabs page:visited,
|
||||
PageNav.page_tabs page.active {
|
||||
background: color(color-config-page);
|
||||
border-color: color(color-config-page-border);
|
||||
border-top: 2px solid color(color-accent);
|
||||
border-bottom: 1px solid color(color-config-page);
|
||||
color: color(color-ui-text-primary);
|
||||
}
|
||||
|
||||
.page_content
|
||||
{
|
||||
background: color(color-config-page);
|
||||
border: 1px solid color(color-config-page-border);
|
||||
border-radius: 0 8px 8px 8px;
|
||||
width: *;
|
||||
height: *;
|
||||
flow: horizontal;
|
||||
padding: 1em 1em 0 1em;
|
||||
font-family: var(font-ui), Arial, sans-serif;
|
||||
font-size: 0.9rem;
|
||||
color: #eff0f1;
|
||||
color: color(color-ui-text-primary);
|
||||
}
|
||||
|
||||
#gameDirectoryList,
|
||||
|
|
@ -174,9 +180,9 @@ PageNav.page_tabs page.active {
|
|||
|
||||
#gameDirectoryList select,
|
||||
#addOnDirectoryList select {
|
||||
background-color: #1e1e1e;
|
||||
border: 1px solid #404040;
|
||||
border-radius: 4px;
|
||||
background-color: color(color-control-background);
|
||||
border: 1px solid color(color-control-border);
|
||||
border-radius: 6px;
|
||||
box-sizing: border-box;
|
||||
height: 8rem;
|
||||
max-height: 8rem;
|
||||
|
|
@ -191,14 +197,21 @@ PageNav.page_tabs page.active {
|
|||
{
|
||||
padding: 0.2rem 0.3rem;
|
||||
margin: 0.2rem 0.3rem;
|
||||
border-radius: 3px;
|
||||
color: white;
|
||||
border-radius: 4px;
|
||||
color: color(color-ui-text-primary);
|
||||
}
|
||||
|
||||
#gameDirectoryList option:hover,
|
||||
#addOnDirectoryList option:hover
|
||||
{
|
||||
background: color(color-control-hover);
|
||||
}
|
||||
|
||||
#gameDirectoryList option:current,
|
||||
#addOnDirectoryList option:current
|
||||
{
|
||||
color: #1e1e1e;
|
||||
background: color(color-accent);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
body > .footer
|
||||
|
|
|
|||
|
|
@ -1075,7 +1075,15 @@ void SciterMainWindow::SetCaption(const std::string & caption)
|
|||
SciterElement captionElement(m_rootElement.FindFirst("[role='window-caption'] > span"));
|
||||
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());
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue