fix: fallback to roboto if Loor does not have glyphs
This commit is contained in:
parent
e4a4945dd4
commit
cce1e89cdf
|
@ -14,7 +14,7 @@ body {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-family: $session-font-default;
|
font-family: var(--font-default);
|
||||||
letter-spacing: 0.3px;
|
letter-spacing: 0.3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -43,13 +43,6 @@ textarea {
|
||||||
background: var(--text-selection-color);
|
background: var(--text-selection-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.shadowed {
|
|
||||||
opacity: $session-shadow-opacity;
|
|
||||||
}
|
|
||||||
.overlayed {
|
|
||||||
opacity: $session-overlay-opacity;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
.overlay {
|
.overlay {
|
||||||
display: flex !important;
|
display: flex !important;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
|
@ -197,7 +190,7 @@ label {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
max-height: 70vh;
|
max-height: 70vh;
|
||||||
max-width: calc(min(70vw, 800px));
|
max-width: calc(min(70vw, 800px));
|
||||||
font-family: $session-font-default;
|
font-family: var(--font-default);
|
||||||
background-color: var(--modal-background-content-color);
|
background-color: var(--modal-background-content-color);
|
||||||
color: var(--modal-text-color);
|
color: var(--modal-text-color);
|
||||||
border: 1px solid var(--border-color);
|
border: 1px solid var(--border-color);
|
||||||
|
@ -256,7 +249,7 @@ label {
|
||||||
|
|
||||||
&__body {
|
&__body {
|
||||||
padding: 0px var(--margins-lg) var(--margins-lg) var(--margins-lg);
|
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;
|
line-height: $session-font-md;
|
||||||
font-size: $session-font-md;
|
font-size: $session-font-md;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
|
|
|
@ -2,81 +2,84 @@
|
||||||
// /////////////////// Fonts ////////////////////
|
// /////////////////// Fonts ////////////////////
|
||||||
// //////////////////////////////////////////////
|
// //////////////////////////////////////////////
|
||||||
|
|
||||||
$session-font-default: 'Roboto';
|
|
||||||
$session-font-accent: 'Loor';
|
|
||||||
$session-font-mono: 'SpaceMono';
|
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: $session-font-mono;
|
font-family: SpaceMono;
|
||||||
src: url('../fonts/SpaceMono-Regular.ttf') format('truetype');
|
src: url('../fonts/SpaceMono-Regular.ttf') format('truetype');
|
||||||
}
|
}
|
||||||
|
|
||||||
// Roboto is an open replacement for $session-font-default
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: $session-font-default;
|
font-family: Roboto;
|
||||||
src: url('../fonts/Roboto-Thin.ttf') format('truetype');
|
src: url('../fonts/Roboto-Thin.ttf') format('truetype');
|
||||||
font-weight: 100;
|
font-weight: 100;
|
||||||
}
|
}
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: $session-font-default;
|
font-family: Roboto;
|
||||||
src: url('../fonts/Roboto-ThinItalic.ttf') format('truetype');
|
src: url('../fonts/Roboto-ThinItalic.ttf') format('truetype');
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
font-weight: 100;
|
font-weight: 100;
|
||||||
}
|
}
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: $session-font-default;
|
font-family: Roboto;
|
||||||
src: url('../fonts/Roboto-Light.ttf') format('truetype');
|
src: url('../fonts/Roboto-Light.ttf') format('truetype');
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
}
|
}
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: $session-font-default;
|
font-family: Roboto;
|
||||||
src: url('../fonts/Roboto-LightItalic.ttf') format('truetype');
|
src: url('../fonts/Roboto-LightItalic.ttf') format('truetype');
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
}
|
}
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: $session-font-default;
|
font-family: Roboto;
|
||||||
src: url('../fonts/Roboto-Regular.ttf') format('truetype');
|
src: url('../fonts/Roboto-Regular.ttf') format('truetype');
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: $session-font-default;
|
font-family: Roboto;
|
||||||
src: url('../fonts/Roboto-Italic.ttf') format('truetype');
|
src: url('../fonts/Roboto-Italic.ttf') format('truetype');
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: $session-font-default;
|
font-family: Roboto;
|
||||||
src: url('../fonts/Roboto-Medium.ttf') format('truetype');
|
src: url('../fonts/Roboto-Medium.ttf') format('truetype');
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: $session-font-default;
|
font-family: Roboto;
|
||||||
src: url('../fonts/Roboto-MediumItalic.ttf') format('truetype');
|
src: url('../fonts/Roboto-MediumItalic.ttf') format('truetype');
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: $session-font-default;
|
font-family: Roboto;
|
||||||
src: url('../fonts/Roboto-Bold.ttf') format('truetype');
|
src: url('../fonts/Roboto-Bold.ttf') format('truetype');
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: $session-font-default;
|
font-family: Roboto;
|
||||||
src: url('../fonts/Roboto-BoldItalic.ttf') format('truetype');
|
src: url('../fonts/Roboto-BoldItalic.ttf') format('truetype');
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
}
|
}
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: $session-font-default;
|
font-family: Roboto;
|
||||||
src: url('../fonts/Roboto-Black.ttf') format('truetype');
|
src: url('../fonts/Roboto-Black.ttf') format('truetype');
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
}
|
}
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: $session-font-default;
|
font-family: Roboto;
|
||||||
src: url('../fonts/Roboto-BlackItalic.ttf') format('truetype');
|
src: url('../fonts/Roboto-BlackItalic.ttf') format('truetype');
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
|
@ -84,19 +87,11 @@ $session-font-mono: 'SpaceMono';
|
||||||
|
|
||||||
// Accented font
|
// Accented font
|
||||||
@font-face {
|
@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');
|
src: url('../fonts/Loor.ttf') format('truetype');
|
||||||
line-height: 1.4rem;
|
line-height: 1.4rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
// //////////////////////////////////////////////
|
|
||||||
// ////////////////// Colors ////////////////////
|
|
||||||
// //////////////////////////////////////////////
|
|
||||||
|
|
||||||
// Opacity and Shadow
|
|
||||||
$session-shadow-opacity: 0.15;
|
|
||||||
$session-overlay-opacity: 0.3;
|
|
||||||
|
|
||||||
// //////////////////////////////////////////////
|
// //////////////////////////////////////////////
|
||||||
// /////////////////// Text /////////////////////
|
// /////////////////// Text /////////////////////
|
||||||
// //////////////////////////////////////////////
|
// //////////////////////////////////////////////
|
||||||
|
@ -106,13 +101,7 @@ $session-font-xs: 11px;
|
||||||
$session-font-sm: 13px;
|
$session-font-sm: 13px;
|
||||||
$session-font-md: 15px;
|
$session-font-md: 15px;
|
||||||
|
|
||||||
$session-font-h2: 24px;
|
|
||||||
|
|
||||||
// Mixins
|
// Mixins
|
||||||
@mixin fontAccentBold {
|
|
||||||
font-weight: bold;
|
|
||||||
font-family: $session-font-accent;
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin text-highlight($color) {
|
@mixin text-highlight($color) {
|
||||||
background-color: $color;
|
background-color: $color;
|
||||||
|
|
|
@ -8,7 +8,7 @@
|
||||||
&-content {
|
&-content {
|
||||||
&-accent {
|
&-accent {
|
||||||
&-text {
|
&-text {
|
||||||
font-family: $session-font-accent;
|
font-family: var(--font-accent), var(--font-default);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
.title {
|
.title {
|
||||||
font-size: 90px;
|
font-size: 90px;
|
||||||
|
@ -91,7 +91,7 @@
|
||||||
&-input-with-label-container {
|
&-input-with-label-container {
|
||||||
height: 46.5px;
|
height: 46.5px;
|
||||||
width: 280px;
|
width: 280px;
|
||||||
font-family: $session-font-default;
|
font-family: var(--font-default);
|
||||||
color: var(--text-primary-color);
|
color: var(--text-primary-color);
|
||||||
|
|
||||||
padding: 2px 0 2px 0;
|
padding: 2px 0 2px 0;
|
||||||
|
@ -126,7 +126,7 @@
|
||||||
background: transparent;
|
background: transparent;
|
||||||
color: var(--input-text-color);
|
color: var(--input-text-color);
|
||||||
|
|
||||||
font-family: $session-font-default;
|
font-family: var(--font-default);
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
line-height: 14px;
|
line-height: 14px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
@ -214,7 +214,7 @@
|
||||||
overflow-wrap: break-word;
|
overflow-wrap: break-word;
|
||||||
padding: 0px 5px 20px 5px;
|
padding: 0px 5px 20px 5px;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
font-family: $session-font-mono;
|
font-family: var(--font-mono), var(--font-default);
|
||||||
user-select: all;
|
user-select: all;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
resize: none;
|
resize: none;
|
||||||
|
|
|
@ -99,7 +99,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin session-h-title {
|
@mixin session-h-title {
|
||||||
@include fontAccentBold();
|
font-weight: bold;
|
||||||
|
font-family: var(--font-accent), var(--font-default);
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
|
|
|
@ -16,7 +16,7 @@ import { SessionSettingCategory } from '../settings/SessionSettings';
|
||||||
import { LeftPaneSectionHeader } from './LeftPaneSectionHeader';
|
import { LeftPaneSectionHeader } from './LeftPaneSectionHeader';
|
||||||
|
|
||||||
const StyledSettingsSectionTitle = styled.strong`
|
const StyledSettingsSectionTitle = styled.strong`
|
||||||
font-family: var(--font-font-accent);
|
font-family: var(--font-accent), var(--font-default);
|
||||||
font-size: var(--font-size-md);
|
font-size: var(--font-size-md);
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
|
|
@ -21,7 +21,7 @@ import { ToastUtils } from '../../../session/utils';
|
||||||
import { createClosedGroup } from '../../../session/conversations/createClosedGroup';
|
import { createClosedGroup } from '../../../session/conversations/createClosedGroup';
|
||||||
|
|
||||||
const StyledMemberListNoContacts = styled.div`
|
const StyledMemberListNoContacts = styled.div`
|
||||||
font-family: var(--font-font-mono);
|
font-family: var(--font-mono), var(--font-default);
|
||||||
background: var(--background-secondary-color);
|
background: var(--background-secondary-color);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
|
|
|
@ -5,8 +5,8 @@ import { COLORS } from './constants/colors';
|
||||||
export type ThemeGlobals = {
|
export type ThemeGlobals = {
|
||||||
/* Fonts */
|
/* Fonts */
|
||||||
'--font-default': string;
|
'--font-default': string;
|
||||||
'--font-font-accent': string;
|
'--font-accent': string;
|
||||||
'--font-font-mono': string;
|
'--font-mono': string;
|
||||||
'--font-size-xs': string;
|
'--font-size-xs': string;
|
||||||
'--font-size-sm': string;
|
'--font-size-sm': string;
|
||||||
'--font-size-md': string;
|
'--font-size-md': string;
|
||||||
|
@ -87,8 +87,8 @@ export type ThemeGlobals = {
|
||||||
// These are only set once in the global style (at root).
|
// These are only set once in the global style (at root).
|
||||||
export const THEME_GLOBALS: ThemeGlobals = {
|
export const THEME_GLOBALS: ThemeGlobals = {
|
||||||
'--font-default': 'Roboto',
|
'--font-default': 'Roboto',
|
||||||
'--font-font-accent': 'Loor',
|
'--font-accent': 'Loor',
|
||||||
'--font-font-mono': 'SpaceMono',
|
'--font-mono': 'SpaceMono',
|
||||||
'--font-size-xs': '11px',
|
'--font-size-xs': '11px',
|
||||||
'--font-size-sm': '13px',
|
'--font-size-sm': '13px',
|
||||||
'--font-size-md': '15px',
|
'--font-size-md': '15px',
|
||||||
|
|
Loading…
Reference in New Issue