diff --git a/about.html b/about.html
index d203b0224..8ddd23dbb 100644
--- a/about.html
+++ b/about.html
@@ -14,6 +14,8 @@
script-src 'self' 'unsafe-inline';
style-src 'self' 'unsafe-inline';"
/>
+
+
diff --git a/background.html b/background.html
index 69633a779..ca1a69f41 100644
--- a/background.html
+++ b/background.html
@@ -1,4 +1,4 @@
-
+
@@ -25,6 +25,8 @@
/>
Session
+
+
diff --git a/debug_log.html b/debug_log.html
index 2b61a28c8..7e14ae956 100644
--- a/debug_log.html
+++ b/debug_log.html
@@ -14,6 +14,8 @@
script-src 'self' 'unsafe-inline';
style-src 'self' 'unsafe-inline';"
/>
+
+
diff --git a/password.html b/password.html
index 1e61f9f4b..f508420a5 100644
--- a/password.html
+++ b/password.html
@@ -1,4 +1,4 @@
-
+
@@ -24,6 +24,8 @@
style-src 'self' 'unsafe-inline';"
/>
+
+
diff --git a/stylesheets/_index.scss b/stylesheets/_index.scss
index b78bbd374..903921478 100644
--- a/stylesheets/_index.scss
+++ b/stylesheets/_index.scss
@@ -39,27 +39,3 @@
display: flex;
}
}
-
-.scrollable {
- height: 100%;
- overflow: auto;
-}
-
-.section-conversations-container {
- display: flex;
- flex-direction: row;
- margin-inline-end: 3rem;
- align-items: center;
-
- h4 {
- flex: 1;
- }
-}
-
-.left-pane-placeholder {
- flex-grow: 1;
- display: flex;
-}
-.left-pane-wrapper {
- flex: 1;
-}
diff --git a/stylesheets/_mixins.scss b/stylesheets/_mixins.scss
deleted file mode 100644
index e58cdb70a..000000000
--- a/stylesheets/_mixins.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-@mixin color-svg($svg, $color) {
- -webkit-mask: url($svg) no-repeat center;
- -webkit-mask-size: 100%;
- background-color: $color;
-}
diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss
index 7fc7fd981..96ac7f088 100644
--- a/stylesheets/_session.scss
+++ b/stylesheets/_session.scss
@@ -93,13 +93,13 @@ textarea {
font-weight: bold;
width: 100%;
display: flex;
- font-size: $session-font-md;
+ font-size: var(--font-size-md);
&-text {
color: var(--text-primary-color);
font-weight: 400;
- font-size: $session-font-sm;
- line-height: $session-font-sm;
+ font-size: var(--font-size-sm);
+ line-height: var(--font-size-sm);
}
.module-contact-name {
@@ -198,8 +198,8 @@ label {
&__body {
padding: 0px var(--margins-lg) var(--margins-lg) var(--margins-lg);
font-family: var(--font-default);
- line-height: $session-font-md;
- font-size: $session-font-md;
+ line-height: var(--font-size-md);
+ font-size: var(--font-size-md);
overflow-y: auto;
overflow-x: hidden;
@@ -245,9 +245,9 @@ label {
color: var(--black-color);
- font-family: monospace;
+ font-family: var(--font-mono);
font-style: normal;
- font-size: $session-font-xs;
+ font-size: var(--font-size-xs);
}
}
@@ -264,7 +264,7 @@ label {
}
&-main-message {
- font-size: $session-font-md;
+ font-size: var(--font-size-md);
line-height: 1.5;
}
diff --git a/stylesheets/_session_constants.scss b/stylesheets/_session_constants.scss
index d9ff4ace7..3e6d0472d 100644
--- a/stylesheets/_session_constants.scss
+++ b/stylesheets/_session_constants.scss
@@ -1,106 +1,3 @@
-// //////////////////////////////////////////////
-// /////////////////// Fonts ////////////////////
-// //////////////////////////////////////////////
-
-@font-face {
- font-family: SpaceMono;
- src: url('../fonts/SpaceMono-Regular.ttf') format('truetype');
-}
-
-@font-face {
- font-family: Roboto;
- src: url('../fonts/Roboto-Thin.ttf') format('truetype');
- font-weight: 100;
-}
-
-@font-face {
- font-family: Roboto;
- src: url('../fonts/Roboto-ThinItalic.ttf') format('truetype');
- font-style: italic;
- font-weight: 100;
-}
-
-@font-face {
- font-family: Roboto;
- src: url('../fonts/Roboto-Light.ttf') format('truetype');
- font-weight: 300;
-}
-
-@font-face {
- font-family: Roboto;
- src: url('../fonts/Roboto-LightItalic.ttf') format('truetype');
- font-style: italic;
- font-weight: 300;
-}
-
-@font-face {
- font-family: Roboto;
- src: url('../fonts/Roboto-Regular.ttf') format('truetype');
- font-weight: 400;
-}
-
-@font-face {
- font-family: Roboto;
- src: url('../fonts/Roboto-Italic.ttf') format('truetype');
- font-style: italic;
- font-weight: 400;
-}
-
-@font-face {
- font-family: Roboto;
- src: url('../fonts/Roboto-Medium.ttf') format('truetype');
- font-weight: 500;
-}
-
-@font-face {
- font-family: Roboto;
- src: url('../fonts/Roboto-MediumItalic.ttf') format('truetype');
- font-style: italic;
- font-weight: 500;
-}
-
-@font-face {
- font-family: Roboto;
- src: url('../fonts/Roboto-Bold.ttf') format('truetype');
- font-weight: 700;
-}
-
-@font-face {
- font-family: Roboto;
- src: url('../fonts/Roboto-BoldItalic.ttf') format('truetype');
- font-weight: 700;
- font-style: italic;
-}
-
-@font-face {
- font-family: Roboto;
- src: url('../fonts/Roboto-Black.ttf') format('truetype');
- font-weight: 900;
-}
-
-@font-face {
- font-family: Roboto;
- src: url('../fonts/Roboto-BlackItalic.ttf') format('truetype');
- font-weight: 900;
- font-style: italic;
-}
-
-// Accented font
-@font-face {
- 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;
-}
-
-// //////////////////////////////////////////////
-// /////////////////// Text /////////////////////
-// //////////////////////////////////////////////
-
-// Sizing
-$session-font-xs: 11px;
-$session-font-sm: 13px;
-$session-font-md: 15px;
-
// Mixins
@mixin text-highlight($color) {
@@ -110,6 +7,12 @@ $session-font-md: 15px;
display: inline-block;
}
+@mixin color-svg($svg, $color) {
+ -webkit-mask: url($svg) no-repeat center;
+ -webkit-mask-size: 100%;
+ background-color: $color;
+}
+
$session-subtle-factor: 0.6;
@function subtle($color) {
diff --git a/stylesheets/fonts.css b/stylesheets/fonts.css
new file mode 100644
index 000000000..f5596f875
--- /dev/null
+++ b/stylesheets/fonts.css
@@ -0,0 +1,89 @@
+@font-face {
+ font-family: Roboto;
+ src: url('../fonts/Roboto-Thin.ttf') format('truetype');
+ font-weight: 100;
+}
+
+@font-face {
+ font-family: Roboto;
+ src: url('../fonts/Roboto-ThinItalic.ttf') format('truetype');
+ font-style: italic;
+ font-weight: 100;
+}
+
+@font-face {
+ font-family: Roboto;
+ src: url('../fonts/Roboto-Light.ttf') format('truetype');
+ font-weight: 300;
+}
+
+@font-face {
+ font-family: Roboto;
+ src: url('../fonts/Roboto-LightItalic.ttf') format('truetype');
+ font-style: italic;
+ font-weight: 300;
+}
+
+@font-face {
+ font-family: Roboto;
+ src: url('../fonts/Roboto-Regular.ttf') format('truetype');
+ font-weight: 400;
+}
+
+@font-face {
+ font-family: Roboto;
+ src: url('../fonts/Roboto-Italic.ttf') format('truetype');
+ font-style: italic;
+ font-weight: 400;
+}
+
+@font-face {
+ font-family: Roboto;
+ src: url('../fonts/Roboto-Medium.ttf') format('truetype');
+ font-weight: 500;
+}
+
+@font-face {
+ font-family: Roboto;
+ src: url('../fonts/Roboto-MediumItalic.ttf') format('truetype');
+ font-style: italic;
+ font-weight: 500;
+}
+
+@font-face {
+ font-family: Roboto;
+ src: url('../fonts/Roboto-Bold.ttf') format('truetype');
+ font-weight: 700;
+}
+
+@font-face {
+ font-family: Roboto;
+ src: url('../fonts/Roboto-BoldItalic.ttf') format('truetype');
+ font-weight: 700;
+ font-style: italic;
+}
+
+@font-face {
+ font-family: Roboto;
+ src: url('../fonts/Roboto-Black.ttf') format('truetype');
+ font-weight: 900;
+}
+
+@font-face {
+ font-family: Roboto;
+ src: url('../fonts/Roboto-BlackItalic.ttf') format('truetype');
+ font-weight: 900;
+ font-style: italic;
+}
+
+@font-face {
+ font-family: SpaceMono;
+ src: url('../fonts/SpaceMono-Regular.ttf') format('truetype');
+}
+
+/* Accented font */
+@font-face {
+ 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;
+}
diff --git a/stylesheets/manifest.scss b/stylesheets/manifest.scss
index 509c184ef..b17fda42c 100644
--- a/stylesheets/manifest.scss
+++ b/stylesheets/manifest.scss
@@ -9,7 +9,6 @@
// Global Settings and Mixins
@import 'session_constants';
-@import 'mixins';
@import 'global';
// Components