oxen-io
/
session-desktop
mirror of https://github.com/oxen-io/session-desktop.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix: fallback to roboto if Loor does not have glyphs

This commit is contained in:
Audric Ackermann 2023-08-16 13:07:50 +10:00
parent e4a4945dd4
commit cce1e89cdf
8 changed files with 37 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
stylesheets/_global.scss
View File

@ -14,7 +14,7 @@ body {
height: 100%;
width: 100%;
margin: 0;
font-family: $session-font-default;
font-family: var(--font-default);
letter-spacing: 0.3px;
}

11
stylesheets/_session.scss
View File

@ -43,13 +43,6 @@ textarea {
background: var(--text-selection-color);
}
.shadowed {
opacity: $session-shadow-opacity;
}
.overlayed {
opacity: $session-overlay-opacity;
pointer-events: none;
}
.overlay {
display: flex !important;
z-index: 1;
@ -197,7 +190,7 @@ label {
box-sizing: border-box;
max-height: 70vh;
max-width: calc(min(70vw, 800px));
font-family: $session-font-default;
font-family: var(--font-default);
background-color: var(--modal-background-content-color);
color: var(--modal-text-color);
border: 1px solid var(--border-color);
@ -256,7 +249,7 @@ label {
&__body {
padding: 0px var(--margins-lg) var(--margins-lg) var(--margins-lg);
font-family: $session-font-default;
font-family: var(--font-default);
line-height: $session-font-md;
font-size: $session-font-md;
overflow-y: auto;

55
stylesheets/_session_constants.scss
View File

@ -2,81 +2,84 @@
// /////////////////// Fonts ////////////////////
// //////////////////////////////////////////////
$session-font-default: 'Roboto';
$session-font-accent: 'Loor';
$session-font-mono: 'SpaceMono';
@font-face {
font-family: $session-font-mono;
font-family: SpaceMono;
src: url('../fonts/SpaceMono-Regular.ttf') format('truetype');
}
// Roboto is an open replacement for $session-font-default
@font-face {
font-family: $session-font-default;
font-family: Roboto;
src: url('../fonts/Roboto-Thin.ttf') format('truetype');
font-weight: 100;
}
@font-face {
font-family: $session-font-default;
font-family: Roboto;
src: url('../fonts/Roboto-ThinItalic.ttf') format('truetype');
font-style: italic;
font-weight: 100;
}
@font-face {
font-family: $session-font-default;
font-family: Roboto;
src: url('../fonts/Roboto-Light.ttf') format('truetype');
font-weight: 300;
}
@font-face {
font-family: $session-font-default;
font-family: Roboto;
src: url('../fonts/Roboto-LightItalic.ttf') format('truetype');
font-style: italic;
font-weight: 300;
}
@font-face {
font-family: $session-font-default;
font-family: Roboto;
src: url('../fonts/Roboto-Regular.ttf') format('truetype');
font-weight: 400;
}
@font-face {
font-family: $session-font-default;
font-family: Roboto;
src: url('../fonts/Roboto-Italic.ttf') format('truetype');
font-style: italic;
font-weight: 400;
}
@font-face {
font-family: $session-font-default;
font-family: Roboto;
src: url('../fonts/Roboto-Medium.ttf') format('truetype');
font-weight: 500;
}
@font-face {
font-family: $session-font-default;
font-family: Roboto;
src: url('../fonts/Roboto-MediumItalic.ttf') format('truetype');
font-style: italic;
font-weight: 500;
}
@font-face {
font-family: $session-font-default;
font-family: Roboto;
src: url('../fonts/Roboto-Bold.ttf') format('truetype');
font-weight: 700;
}
@font-face {
font-family: $session-font-default;
font-family: Roboto;
src: url('../fonts/Roboto-BoldItalic.ttf') format('truetype');
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: $session-font-default;
font-family: Roboto;
src: url('../fonts/Roboto-Black.ttf') format('truetype');
font-weight: 900;
}
@font-face {
font-family: $session-font-default;
font-family: Roboto;
src: url('../fonts/Roboto-BlackItalic.ttf') format('truetype');
font-weight: 900;
font-style: italic;
@ -84,19 +87,11 @@ $session-font-mono: 'SpaceMono';
// Accented font
@font-face {
font-family: $session-font-accent;
font-family: Loor; // Loor does not support some Cyrillic ghyphs so where we use it, we add a fallback to Roboto
src: url('../fonts/Loor.ttf') format('truetype');
line-height: 1.4rem;
}
// //////////////////////////////////////////////
// ////////////////// Colors ////////////////////
// //////////////////////////////////////////////
// Opacity and Shadow
$session-shadow-opacity: 0.15;
$session-overlay-opacity: 0.3;
// //////////////////////////////////////////////
// /////////////////// Text /////////////////////
// //////////////////////////////////////////////
@ -106,13 +101,7 @@ $session-font-xs: 11px;
$session-font-sm: 13px;
$session-font-md: 15px;
$session-font-h2: 24px;
// Mixins
@mixin fontAccentBold {
font-weight: bold;
font-family: $session-font-accent;
}
@mixin text-highlight($color) {
background-color: $color;

8
stylesheets/_session_signin.scss
View File

@ -8,7 +8,7 @@
&-content {
&-accent {
&-text {
font-family: $session-font-accent;
font-family: var(--font-accent), var(--font-default);
text-align: center;
.title {
font-size: 90px;
@ -91,7 +91,7 @@
&-input-with-label-container {
height: 46.5px;
width: 280px;
font-family: $session-font-default;
font-family: var(--font-default);
color: var(--text-primary-color);
padding: 2px 0 2px 0;
@ -126,7 +126,7 @@
background: transparent;
color: var(--input-text-color);
font-family: $session-font-default;
font-family: var(--font-default);
font-size: 12px;
line-height: 14px;
position: absolute;
@ -214,7 +214,7 @@
overflow-wrap: break-word;
padding: 0px 5px 20px 5px;
display: inline-block;
font-family: $session-font-mono;
font-family: var(--font-mono), var(--font-default);
user-select: all;
overflow: hidden;
resize: none;

3
stylesheets/_session_theme.scss
View File

@ -99,7 +99,8 @@
}
@mixin session-h-title {
@include fontAccentBold();
font-weight: bold;
font-family: var(--font-accent), var(--font-default);
}
h1 {

2
ts/components/leftpane/LeftPaneSettingSection.tsx
View File

@ -16,7 +16,7 @@ import { SessionSettingCategory } from '../settings/SessionSettings';
import { LeftPaneSectionHeader } from './LeftPaneSectionHeader';
const StyledSettingsSectionTitle = styled.strong`
font-family: var(--font-font-accent);
font-family: var(--font-accent), var(--font-default);
font-size: var(--font-size-md);
`;

2
ts/components/leftpane/overlay/OverlayClosedGroup.tsx
View File

@ -21,7 +21,7 @@ import { ToastUtils } from '../../../session/utils';
import { createClosedGroup } from '../../../session/conversations/createClosedGroup';
const StyledMemberListNoContacts = styled.div`
font-family: var(--font-font-mono);
font-family: var(--font-mono), var(--font-default);
background: var(--background-secondary-color);
text-align: center;
padding: 20px;

8
ts/themes/globals.tsx
View File

@ -5,8 +5,8 @@ import { COLORS } from './constants/colors';
export type ThemeGlobals = {
/* Fonts */
'--font-default': string;
'--font-font-accent': string;
'--font-font-mono': string;
'--font-accent': string;
'--font-mono': string;
'--font-size-xs': string;
'--font-size-sm': string;
'--font-size-md': string;
@ -87,8 +87,8 @@ export type ThemeGlobals = {
// These are only set once in the global style (at root).
export const THEME_GLOBALS: ThemeGlobals = {
'--font-default': 'Roboto',
'--font-font-accent': 'Loor',
'--font-font-mono': 'SpaceMono',
'--font-accent': 'Loor',
'--font-mono': 'SpaceMono',
'--font-size-xs': '11px',
'--font-size-sm': '13px',
'--font-size-md': '15px',