More fine tuning of latest UI changes

This commit is contained in:
Raymond Hill 2020-04-22 11:17:58 -04:00
parent 5b82966cd1
commit b277b084d5
No known key found for this signature in database
GPG Key ID: 25E1490B761470C2
4 changed files with 21 additions and 8 deletions

View File

@ -81,8 +81,6 @@ button {
color: var(--button-ink); color: var(--button-ink);
display: inline-flex; display: inline-flex;
fill: var(--button-ink); fill: var(--button-ink);
font-family: Metropolis, sans-serif;
font-weight: 600;
font-size: 14px; font-size: 14px;
justify-content: center; justify-content: center;
letter-spacing: 0.5px; letter-spacing: 0.5px;
@ -148,7 +146,6 @@ input[type="checkbox"] {
} }
.fieldset-header { .fieldset-header {
color: var(--fieldset-header-ink); color: var(--fieldset-header-ink);
font-family: Metropolis, sans-serif;
font-size: 14px; font-size: 14px;
font-weight: 600; font-weight: 600;
letter-spacing: 0.5px; letter-spacing: 0.5px;
@ -204,6 +201,15 @@ input[type="checkbox"] {
width: 1em; width: 1em;
} }
/* high dpi devices */
:root.hidpi button {
font-family: Metropolis, sans-serif;
font-weight: 600;
}
:root.hidpi .fieldset-header {
font-family: Metropolis, sans-serif;
}
/* touch-screen devices */ /* touch-screen devices */
:root.mobile body { :root.mobile body {
font-size: 16px; font-size: 16px;

View File

@ -32,8 +32,6 @@ html, body {
border-top: 3px solid transparent; border-top: 3px solid transparent;
color: var(--dashboard-tab-ink); color: var(--dashboard-tab-ink);
fill: var(--dashboard-tab-ink); fill: var(--dashboard-tab-ink);
font-family: Metropolis, sans-serif;
font-weight: 600;
letter-spacing: 0.5px; letter-spacing: 0.5px;
padding: 0.5em 1.4em calc(0.5em - 3px); padding: 0.5em 1.4em calc(0.5em - 3px);
text-decoration: none; text-decoration: none;
@ -79,6 +77,12 @@ body:not(.canUpdateShortcuts) .tabButton[data-pane="shortcuts.html"] {
display: none; display: none;
} }
/* high dpi devices */
:root.hidpi .tabButton {
font-family: Metropolis, sans-serif;
font-weight: 600;
}
/* hover-able devices */ /* hover-able devices */
:root.desktop .tabButton { :root.desktop .tabButton {
cursor: default; cursor: default;

View File

@ -142,8 +142,8 @@
/* Default dark theme starts here */ /* Default dark theme starts here */
:root.darkTheme { :root.dark {
} }
:root.darkTheme.colorBlind { :root.dark.colorBlind {
} }

View File

@ -106,8 +106,11 @@ DOMListFactory.nodeFromSelector = function(selector) {
) { ) {
root.classList.add('desktop'); root.classList.add('desktop');
} }
if ( window.matchMedia('(min-resolution: 150dpi)').matches ) {
root.classList.add('hidpi');
}
if ( window.matchMedia('(prefers-color-scheme: dark)').matches ) { if ( window.matchMedia('(prefers-color-scheme: dark)').matches ) {
root.classList.add('darkTheme'); root.classList.add('dark');
} }
} }