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%;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
font-family: $session-font-default;
|
||||
font-family: var(--font-default);
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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,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;
|
||||
|
|
|
@ -99,7 +99,8 @@
|
|||
}
|
||||
|
||||
@mixin session-h-title {
|
||||
@include fontAccentBold();
|
||||
font-weight: bold;
|
||||
font-family: var(--font-accent), var(--font-default);
|
||||
}
|
||||
|
||||
h1 {
|
||||
|
|
|
@ -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);
|
||||
`;
|
||||
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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',
|
||||
|
|
Loading…
Reference in New Issue