From 0a7d4a6c5a51b33f571a89ec55ad8e9b9cce696e Mon Sep 17 00:00:00 2001 From: Eduard Kuzmenko Date: Thu, 14 Apr 2022 03:37:06 +0300 Subject: [PATCH] Use 'Roboto Mono' for monospace text --- src/lib/richtextprocessor.ts | 4 +- src/scss/fonts/_roboto.scss | 59 +++++ src/scss/fonts/_robotoMono.scss | 216 ++++++++++++++++++ .../partials/_autocompletePeerHelper.scss | 2 +- src/scss/partials/_avatar.scss | 2 +- src/scss/partials/_badge.scss | 2 +- src/scss/partials/_button.scss | 6 +- src/scss/partials/_chat.scss | 2 +- src/scss/partials/_chatBubble.scss | 14 +- src/scss/partials/_chatDrop.scss | 2 +- src/scss/partials/_chatInlineHelper.scss | 2 +- src/scss/partials/_chatPinned.scss | 4 +- src/scss/partials/_chatTopbar.scss | 4 +- src/scss/partials/_chatlist.scss | 2 +- src/scss/partials/_document.scss | 2 +- src/scss/partials/_emojiDropdown.scss | 2 +- src/scss/partials/_input.scss | 2 +- src/scss/partials/_leftSidebar.scss | 10 +- src/scss/partials/_mediaViewer.scss | 2 +- src/scss/partials/_poll.scss | 8 +- src/scss/partials/_profile.scss | 2 +- src/scss/partials/_reaction.scss | 2 +- src/scss/partials/_replyKeyboard.scss | 2 +- src/scss/partials/_rightSidebar.scss | 8 +- src/scss/partials/_sidebar.scss | 2 +- src/scss/partials/_slider.scss | 2 +- src/scss/partials/popups/_call.scss | 4 +- src/scss/partials/popups/_createPoll.scss | 2 +- src/scss/partials/popups/_datePicker.scss | 8 +- src/scss/partials/popups/_groupCall.scss | 4 +- src/scss/partials/popups/_mediaAttacher.scss | 2 +- src/scss/partials/popups/_peer.scss | 4 +- src/scss/partials/popups/_popup.scss | 4 +- src/scss/partials/popups/_stickers.scss | 2 +- src/scss/style.scss | 114 ++------- 35 files changed, 352 insertions(+), 157 deletions(-) create mode 100644 src/scss/fonts/_roboto.scss create mode 100644 src/scss/fonts/_robotoMono.scss diff --git a/src/lib/richtextprocessor.ts b/src/lib/richtextprocessor.ts index 218d7c59..eaf6ef8d 100644 --- a/src/lib/richtextprocessor.ts +++ b/src/lib/richtextprocessor.ts @@ -595,7 +595,7 @@ namespace RichTextProcessor { case 'messageEntityCode': { if(options.wrappingDraft) { - insertPart(entity, '', ''); + insertPart(entity, '', ''); } else if(!options.noTextFormat) { insertPart(entity, '', ''); } @@ -605,7 +605,7 @@ namespace RichTextProcessor { case 'messageEntityPre': { if(options.wrappingDraft) { - insertPart(entity, '', ''); + insertPart(entity, '', ''); } else if(!options.noTextFormat) { insertPart(entity, `
`, '
'); } diff --git a/src/scss/fonts/_roboto.scss b/src/scss/fonts/_roboto.scss new file mode 100644 index 00000000..41a73dd2 --- /dev/null +++ b/src/scss/fonts/_roboto.scss @@ -0,0 +1,59 @@ +/* cyrillic */ +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: local('Roboto'), local('Roboto-Regular'), url(assets/fonts/KFOmCnqEu92Fr1Mu5mxKKTU1Kvnz.woff2) format('woff2'); + unicode-range:U + 0400-045F, U + 0490-0491, U + 04B0-04B1, U + 2116 +} + +/* latin-ext */ +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: local('Roboto'), local('Roboto-Regular'), url(assets/fonts/KFOmCnqEu92Fr1Mu7GxKKTU1Kvnz.woff2) format('woff2'); + unicode-range:U + 0100-024F, U + 0259, U + 1E00-1EFF, U + 2020, U + 20A0-20AB, U + 20AD-20CF, U + 2113, U + 2C60-2C7F, U + A720-A7FF +} + +/* latin */ +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: local('Roboto'), local('Roboto-Regular'), url(assets/fonts/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2'); + unicode-range:U + 0000-00FF, U + 0131, U + 0152-0153, U + 02BB-02BC, U + 02C6, U + 02DA, U + 02DC, U + 2000-206F, U + 2074, U + 20AC, U + 2122, U + 2191, U + 2193, U + 2212, U + 2215, U + FEFF, U + FFFD +} + +/* cyrillic */ +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 500; + font-display: swap; + src: local('Roboto Medium'), local('Roboto-Medium'), url(assets/fonts/KFOlCnqEu92Fr1MmEU9fABc4AMP6lbBP.woff2) format('woff2'); + unicode-range:U + 0400-045F, U + 0490-0491, U + 04B0-04B1, U + 2116 +} + +/* latin-ext */ +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 500; + font-display: swap; + src: local('Roboto Medium'), local('Roboto-Medium'), url(assets/fonts/KFOlCnqEu92Fr1MmEU9fChc4AMP6lbBP.woff2) format('woff2'); + unicode-range:U + 0100-024F, U + 0259, U + 1E00-1EFF, U + 2020, U + 20A0-20AB, U + 20AD-20CF, U + 2113, U + 2C60-2C7F, U + A720-A7FF +} + +/* latin */ +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 500; + font-display: swap; + src: local('Roboto Medium'), local('Roboto-Medium'), url(assets/fonts/KFOlCnqEu92Fr1MmEU9fBBc4AMP6lQ.woff2) format('woff2'); + unicode-range:U + 0000-00FF, U + 0131, U + 0152-0153, U + 02BB-02BC, U + 02C6, U + 02DA, U + 02DC, U + 2000-206F, U + 2074, U + 20AC, U + 2122, U + 2191, U + 2193, U + 2212, U + 2215, U + FEFF, U + FFFD +} diff --git a/src/scss/fonts/_robotoMono.scss b/src/scss/fonts/_robotoMono.scss new file mode 100644 index 00000000..39608dfe --- /dev/null +++ b/src/scss/fonts/_robotoMono.scss @@ -0,0 +1,216 @@ +/* cyrillic-ext */ +@font-face { + font-family: 'Roboto Mono'; + font-style: italic; + font-weight: 400; + font-display: swap; + src: url(assets/fonts/L0xdDF4xlVMF-BfR8bXMIjhOsXG-q2oeuFoqFrlnAIe2Imhk1T8rbociImtEluUlco8VkKjG.woff2) format('woff2'); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; +} +/* cyrillic */ +@font-face { + font-family: 'Roboto Mono'; + font-style: italic; + font-weight: 400; + font-display: swap; + src: url(assets/fonts/L0xdDF4xlVMF-BfR8bXMIjhOsXG-q2oeuFoqFrlnAIe2Imhk1T8rbociImtEn-Ulco8VkKjG.woff2) format('woff2'); + unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; +} +/* greek */ +@font-face { + font-family: 'Roboto Mono'; + font-style: italic; + font-weight: 400; + font-display: swap; + src: url(assets/fonts/L0xdDF4xlVMF-BfR8bXMIjhOsXG-q2oeuFoqFrlnAIe2Imhk1T8rbociImtEmOUlco8VkKjG.woff2) format('woff2'); + unicode-range: U+0370-03FF; +} +/* vietnamese */ +@font-face { + font-family: 'Roboto Mono'; + font-style: italic; + font-weight: 400; + font-display: swap; + src: url(assets/fonts/L0xdDF4xlVMF-BfR8bXMIjhOsXG-q2oeuFoqFrlnAIe2Imhk1T8rbociImtElOUlco8VkKjG.woff2) format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB; +} +/* latin-ext */ +@font-face { + font-family: 'Roboto Mono'; + font-style: italic; + font-weight: 400; + font-display: swap; + src: url(assets/fonts/L0xdDF4xlVMF-BfR8bXMIjhOsXG-q2oeuFoqFrlnAIe2Imhk1T8rbociImtEleUlco8VkKjG.woff2) format('woff2'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; +} +/* latin */ +@font-face { + font-family: 'Roboto Mono'; + font-style: italic; + font-weight: 400; + font-display: swap; + src: url(assets/fonts/L0xdDF4xlVMF-BfR8bXMIjhOsXG-q2oeuFoqFrlnAIe2Imhk1T8rbociImtEm-Ulco8VkA.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} +/* cyrillic-ext */ +@font-face { + font-family: 'Roboto Mono'; + font-style: italic; + font-weight: 500; + font-display: swap; + src: url(assets/fonts/L0xdDF4xlVMF-BfR8bXMIjhOsXG-q2oeuFoqFrlnAIe2Imhk1T8rbociImtEluUlco8VkKjG.woff2) format('woff2'); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; +} +/* cyrillic */ +@font-face { + font-family: 'Roboto Mono'; + font-style: italic; + font-weight: 500; + font-display: swap; + src: url(assets/fonts/L0xdDF4xlVMF-BfR8bXMIjhOsXG-q2oeuFoqFrlnAIe2Imhk1T8rbociImtEn-Ulco8VkKjG.woff2) format('woff2'); + unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; +} +/* greek */ +@font-face { + font-family: 'Roboto Mono'; + font-style: italic; + font-weight: 500; + font-display: swap; + src: url(assets/fonts/L0xdDF4xlVMF-BfR8bXMIjhOsXG-q2oeuFoqFrlnAIe2Imhk1T8rbociImtEmOUlco8VkKjG.woff2) format('woff2'); + unicode-range: U+0370-03FF; +} +/* vietnamese */ +@font-face { + font-family: 'Roboto Mono'; + font-style: italic; + font-weight: 500; + font-display: swap; + src: url(assets/fonts/L0xdDF4xlVMF-BfR8bXMIjhOsXG-q2oeuFoqFrlnAIe2Imhk1T8rbociImtElOUlco8VkKjG.woff2) format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB; +} +/* latin-ext */ +@font-face { + font-family: 'Roboto Mono'; + font-style: italic; + font-weight: 500; + font-display: swap; + src: url(assets/fonts/L0xdDF4xlVMF-BfR8bXMIjhOsXG-q2oeuFoqFrlnAIe2Imhk1T8rbociImtEleUlco8VkKjG.woff2) format('woff2'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; +} +/* latin */ +@font-face { + font-family: 'Roboto Mono'; + font-style: italic; + font-weight: 500; + font-display: swap; + src: url(assets/fonts/L0xdDF4xlVMF-BfR8bXMIjhOsXG-q2oeuFoqFrlnAIe2Imhk1T8rbociImtEm-Ulco8VkA.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} +/* cyrillic-ext */ +@font-face { + font-family: 'Roboto Mono'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url(assets/fonts/L0xTDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_3vrtSM1J-gEPT5Ese6hmHSV0me8iUI0lkQ.woff2) format('woff2'); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; +} +/* cyrillic */ +@font-face { + font-family: 'Roboto Mono'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url(assets/fonts/L0xTDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_3vrtSM1J-gEPT5Ese6hmHSx0me8iUI0lkQ.woff2) format('woff2'); + unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; +} +/* greek */ +@font-face { + font-family: 'Roboto Mono'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url(assets/fonts/L0xTDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_3vrtSM1J-gEPT5Ese6hmHSt0me8iUI0lkQ.woff2) format('woff2'); + unicode-range: U+0370-03FF; +} +/* vietnamese */ +@font-face { + font-family: 'Roboto Mono'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url(assets/fonts/L0xTDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_3vrtSM1J-gEPT5Ese6hmHSd0me8iUI0lkQ.woff2) format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB; +} +/* latin-ext */ +@font-face { + font-family: 'Roboto Mono'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url(assets/fonts/L0xTDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_3vrtSM1J-gEPT5Ese6hmHSZ0me8iUI0lkQ.woff2) format('woff2'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; +} +/* latin */ +@font-face { + font-family: 'Roboto Mono'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url(assets/fonts/L0xTDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_3vrtSM1J-gEPT5Ese6hmHSh0me8iUI0.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} +/* cyrillic-ext */ +@font-face { + font-family: 'Roboto Mono'; + font-style: normal; + font-weight: 500; + font-display: swap; + src: url(assets/fonts/L0xTDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_3vrtSM1J-gEPT5Ese6hmHSV0me8iUI0lkQ.woff2) format('woff2'); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; +} +/* cyrillic */ +@font-face { + font-family: 'Roboto Mono'; + font-style: normal; + font-weight: 500; + font-display: swap; + src: url(assets/fonts/L0xTDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_3vrtSM1J-gEPT5Ese6hmHSx0me8iUI0lkQ.woff2) format('woff2'); + unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; +} +/* greek */ +@font-face { + font-family: 'Roboto Mono'; + font-style: normal; + font-weight: 500; + font-display: swap; + src: url(assets/fonts/L0xTDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_3vrtSM1J-gEPT5Ese6hmHSt0me8iUI0lkQ.woff2) format('woff2'); + unicode-range: U+0370-03FF; +} +/* vietnamese */ +@font-face { + font-family: 'Roboto Mono'; + font-style: normal; + font-weight: 500; + font-display: swap; + src: url(assets/fonts/L0xTDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_3vrtSM1J-gEPT5Ese6hmHSd0me8iUI0lkQ.woff2) format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB; +} +/* latin-ext */ +@font-face { + font-family: 'Roboto Mono'; + font-style: normal; + font-weight: 500; + font-display: swap; + src: url(assets/fonts/L0xTDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_3vrtSM1J-gEPT5Ese6hmHSZ0me8iUI0lkQ.woff2) format('woff2'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; +} +/* latin */ +@font-face { + font-family: 'Roboto Mono'; + font-style: normal; + font-weight: 500; + font-display: swap; + src: url(assets/fonts/L0xTDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_3vrtSM1J-gEPT5Ese6hmHSh0me8iUI0.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} diff --git a/src/scss/partials/_autocompletePeerHelper.scss b/src/scss/partials/_autocompletePeerHelper.scss index 8bdfcfb9..b1e75869 100644 --- a/src/scss/partials/_autocompletePeerHelper.scss +++ b/src/scss/partials/_autocompletePeerHelper.scss @@ -32,7 +32,7 @@ &-name { margin-left: .875rem; - font-weight: 500; + font-weight: var(--font-weight-bold); flex: 0 0 auto; } diff --git a/src/scss/partials/_avatar.scss b/src/scss/partials/_avatar.scss index 6b84edce..190c58ac 100644 --- a/src/scss/partials/_avatar.scss +++ b/src/scss/partials/_avatar.scss @@ -20,7 +20,7 @@ avatar-element { /* overflow: hidden; */ user-select: none; text-transform: uppercase; - font-weight: 700; + font-weight: var(--font-weight-bold); &[data-color="red"] { --color-top: var(--peer-avatar-red-top); diff --git a/src/scss/partials/_badge.scss b/src/scss/partials/_badge.scss index 18cf3776..27748161 100644 --- a/src/scss/partials/_badge.scss +++ b/src/scss/partials/_badge.scss @@ -6,7 +6,7 @@ .badge { border-radius: .75rem; - font-weight: 500; + font-weight: var(--font-weight-bold); color: var(--badge-text-color); font-size: .875rem; text-align: center; diff --git a/src/scss/partials/_button.scss b/src/scss/partials/_button.scss index ce27cb93..aec61099 100644 --- a/src/scss/partials/_button.scss +++ b/src/scss/partials/_button.scss @@ -243,7 +243,7 @@ &-header { color: var(--primary-color); height: 2rem; - font-weight: 500; + font-weight: var(--font-weight-bold); pointer-events: none !important; } @@ -498,7 +498,7 @@ text-align: center; height: 54px; border: none; - font-weight: 500; + font-weight: var(--font-weight-bold); cursor: pointer; overflow: hidden; position: relative; @@ -754,7 +754,7 @@ padding: 0 2rem !important; border-radius: var(--size); font-size: 1rem; - font-weight: 500; + font-weight: var(--font-weight-bold); /* margin-right: calc(var(--size) + 0.5rem); */ /* left: var(--offset); */ right: auto; diff --git a/src/scss/partials/_chat.scss b/src/scss/partials/_chat.scss index ffe006f9..6ffd3024 100644 --- a/src/scss/partials/_chat.scss +++ b/src/scss/partials/_chat.scss @@ -907,7 +907,7 @@ $background-transition-total-time: #{$input-transition-time - $background-transi &-count { color: var(--primary-text-color); - font-weight: 500; + font-weight: var(--font-weight-bold); flex-grow: 1; white-space: nowrap; //padding-left: .5rem; diff --git a/src/scss/partials/_chatBubble.scss b/src/scss/partials/_chatBubble.scss index 71aaf75a..91cd6dea 100644 --- a/src/scss/partials/_chatBubble.scss +++ b/src/scss/partials/_chatBubble.scss @@ -155,7 +155,7 @@ $bubble-beside-button-width: 38px; text-align: center; color: var(--primary-color); line-height: 2.1; - font-weight: 500; + font-weight: var(--font-weight-bold); font-size: 15px; background-color: var(--surface-color); z-index: 2; @@ -920,7 +920,7 @@ $bubble-beside-button-width: 38px; } .empty-bubble-placeholder-title { - font-weight: 500; + font-weight: var(--font-weight-bold); font-size: 1rem !important; } @@ -1263,7 +1263,7 @@ $bubble-beside-button-width: 38px; $parent: ".audio"; #{$parent} { &-title { - font-weight: 500; + font-weight: var(--font-weight-bold); } &-ico { @@ -1339,7 +1339,7 @@ $bubble-beside-button-width: 38px; &-name { font-size: 1rem; - font-weight: 500; + font-weight: var(--font-weight-bold); } &-number { @@ -1399,7 +1399,7 @@ $bubble-beside-button-width: 38px; } &-title { - font-weight: 500; + font-weight: var(--font-weight-bold); } &-subtitle { @@ -1866,7 +1866,7 @@ $bubble-beside-button-width: 38px; // &-content > .name, // .document-wrapper > .name { padding: .3125rem .625rem 0 .625rem; - font-weight: 500 !important; + font-weight: var(--font-weight-bold) !important; /* padding-bottom: 4px; */ color: var(--primary-color); font-size: .875rem; @@ -2031,7 +2031,7 @@ $bubble-beside-button-width: 38px; } &-text { - font-weight: 500; + font-weight: var(--font-weight-bold); font-size: .9375rem; margin-left: .5rem; display: flex; diff --git a/src/scss/partials/_chatDrop.scss b/src/scss/partials/_chatDrop.scss index a3e7a906..740622ee 100644 --- a/src/scss/partials/_chatDrop.scss +++ b/src/scss/partials/_chatDrop.scss @@ -86,7 +86,7 @@ } &-header { - font-weight: 500; + font-weight: var(--font-weight-bold); font-size: 1.25rem; &:not(:last-child) { diff --git a/src/scss/partials/_chatInlineHelper.scss b/src/scss/partials/_chatInlineHelper.scss index 9700664a..daeb6a44 100644 --- a/src/scss/partials/_chatInlineHelper.scss +++ b/src/scss/partials/_chatInlineHelper.scss @@ -97,7 +97,7 @@ position: relative; &-title { - font-weight: 500; + font-weight: var(--font-weight-bold); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; diff --git a/src/scss/partials/_chatPinned.scss b/src/scss/partials/_chatPinned.scss index 488d7f95..3e816cdd 100644 --- a/src/scss/partials/_chatPinned.scss +++ b/src/scss/partials/_chatPinned.scss @@ -239,7 +239,7 @@ } .peer-title { - font-weight: 500; + font-weight: var(--font-weight-bold); } } @@ -621,7 +621,7 @@ } &-title { - font-weight: 500; + font-weight: var(--font-weight-bold); } &-subtitle { diff --git a/src/scss/partials/_chatTopbar.scss b/src/scss/partials/_chatTopbar.scss index b501a522..22b5e581 100644 --- a/src/scss/partials/_chatTopbar.scss +++ b/src/scss/partials/_chatTopbar.scss @@ -357,7 +357,7 @@ body.is-right-column-shown { } .peer-title { - font-weight: 500; + font-weight: var(--font-weight-bold); white-space: nowrap; } @@ -407,7 +407,7 @@ body.is-right-column-shown { } .call-description-duration { - font-weight: 500; + font-weight: var(--font-weight-bold); } } diff --git a/src/scss/partials/_chatlist.scss b/src/scss/partials/_chatlist.scss index 571bcfba..90406634 100644 --- a/src/scss/partials/_chatlist.scss +++ b/src/scss/partials/_chatlist.scss @@ -92,7 +92,7 @@ color: var(--secondary-text-color); padding: 0 23px; padding-bottom: 1rem; - font-weight: 500; + font-weight: var(--font-weight-bold); user-select: none; @include respond-to(handhelds) { diff --git a/src/scss/partials/_document.scss b/src/scss/partials/_document.scss index 0e52eb3b..8febfe95 100644 --- a/src/scss/partials/_document.scss +++ b/src/scss/partials/_document.scss @@ -117,7 +117,7 @@ &-name { white-space: nowrap; - font-weight: 500; + font-weight: var(--font-weight-bold); font-size: var(--font-size-16); line-height: var(--line-height-16); } diff --git a/src/scss/partials/_emojiDropdown.scss b/src/scss/partials/_emojiDropdown.scss index 9114c91a..39cafd39 100644 --- a/src/scss/partials/_emojiDropdown.scss +++ b/src/scss/partials/_emojiDropdown.scss @@ -81,7 +81,7 @@ top: 0; //font-size: .85rem; font-size: 14px; - font-weight: 500; + font-weight: var(--font-weight-bold); color: var(--secondary-text-color); //background: linear-gradient(to bottom,#fff 0,rgba(255,255,255,.9) 60%,rgba(255,255,255,0) 100%); z-index: 2; diff --git a/src/scss/partials/_input.scss b/src/scss/partials/_input.scss index ddfab5ed..9671ea3a 100644 --- a/src/scss/partials/_input.scss +++ b/src/scss/partials/_input.scss @@ -198,7 +198,7 @@ &:focus ~ label { color: var(--primary-color); - font-weight: 500; + font-weight: var(--font-weight-bold); } &:focus ~ .input-field-border { diff --git a/src/scss/partials/_leftSidebar.scss b/src/scss/partials/_leftSidebar.scss index 765af36a..2c6cc67b 100644 --- a/src/scss/partials/_leftSidebar.scss +++ b/src/scss/partials/_leftSidebar.scss @@ -791,7 +791,7 @@ } .user-title { - font-weight: 500 !important; + font-weight: var(--font-weight-bold) !important; } .dialog-avatar { @@ -934,7 +934,7 @@ &-h2 { color: var(--primary-color); font-size: 16px; - font-weight: 500; + font-weight: var(--font-weight-bold); } } @@ -1078,7 +1078,7 @@ padding-bottom: .9375rem; &-title:first-child { - font-weight: 500; + font-weight: var(--font-weight-bold); } &-title-right { @@ -1099,7 +1099,7 @@ padding-bottom: 0; .row-title { - font-weight: 500; + font-weight: var(--font-weight-bold); } } } @@ -1252,7 +1252,7 @@ &-header { font-size: 1.25rem; - font-weight: 500; + font-weight: var(--font-weight-bold); } &-subtitle { diff --git a/src/scss/partials/_mediaViewer.scss b/src/scss/partials/_mediaViewer.scss index f950149c..96d856b2 100644 --- a/src/scss/partials/_mediaViewer.scss +++ b/src/scss/partials/_mediaViewer.scss @@ -43,7 +43,7 @@ $inactive-opacity: .4; &-name { line-height: var(--line-height); - font-weight: 500; + font-weight: var(--font-weight-bold); margin: .0625rem 0; @include respond-to(not-handhelds) { diff --git a/src/scss/partials/_poll.scss b/src/scss/partials/_poll.scss index 53f1d45f..d4977a19 100644 --- a/src/scss/partials/_poll.scss +++ b/src/scss/partials/_poll.scss @@ -23,7 +23,7 @@ poll-element { .poll { &-title { - font-weight: 500; + font-weight: var(--font-weight-bold); @include respond-to(handhelds) { max-width: 88%; @@ -105,7 +105,7 @@ poll-element { left: 0; top: 0; opacity: 0; - font-weight: 500; + font-weight: var(--font-weight-bold); margin-top: 7px; font-size: 14px; margin-left: -9px; @@ -207,7 +207,7 @@ poll-element { height: 100%; color: var(--primary-color); //text-transform: uppercase; - font-weight: 500; + font-weight: var(--font-weight-bold); border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; //border-bottom-left-radius: 6px; @@ -236,7 +236,7 @@ poll-element { &-time { font-size: 12px; - font-weight: 500; + font-weight: var(--font-weight-bold); position: absolute; right: 27px; color: #a3adb6; diff --git a/src/scss/partials/_profile.scss b/src/scss/partials/_profile.scss index 757471b7..a97532bf 100644 --- a/src/scss/partials/_profile.scss +++ b/src/scss/partials/_profile.scss @@ -285,7 +285,7 @@ text-align: center; font-size: 1.25rem; line-height: var(--line-height); - font-weight: 500; + font-weight: var(--font-weight-bold); overflow: hidden; max-width: 21.25rem; margin: 0 auto; diff --git a/src/scss/partials/_reaction.scss b/src/scss/partials/_reaction.scss index 8dbf8bfb..e9a64acd 100644 --- a/src/scss/partials/_reaction.scss +++ b/src/scss/partials/_reaction.scss @@ -160,7 +160,7 @@ &-block &-counter { font-size: .9375rem !important; - font-weight: 500; + font-weight: var(--font-weight-bold); margin: 0 .0625rem 0 .375rem; line-height: 1.125rem; position: relative; diff --git a/src/scss/partials/_replyKeyboard.scss b/src/scss/partials/_replyKeyboard.scss index c139b9c4..a94f4317 100644 --- a/src/scss/partials/_replyKeyboard.scss +++ b/src/scss/partials/_replyKeyboard.scss @@ -46,7 +46,7 @@ color: var(--primary-color); background-color: transparent; height: 3rem; - font-weight: 500; + font-weight: var(--font-weight-bold); font-size: .9375rem; @include animation-level(2) { diff --git a/src/scss/partials/_rightSidebar.scss b/src/scss/partials/_rightSidebar.scss index 4667579b..cc1bd52e 100644 --- a/src/scss/partials/_rightSidebar.scss +++ b/src/scss/partials/_rightSidebar.scss @@ -200,7 +200,7 @@ .search-super-month-name { border-top: 1px solid var(--border-color); padding: 24px 0px 0px 24px; - font-weight: 500; + font-weight: var(--font-weight-bold); color: var(--secondary-text-color); @include respond-to(handhelds) { @@ -663,7 +663,7 @@ &-count { flex-grow: 1; - font-weight: 500; + font-weight: var(--font-weight-bold); color: var(--primary-text-color); white-space: nowrap; text-transform: capitalize; @@ -703,7 +703,7 @@ cursor: pointer; &-name { - font-weight: 500; + font-weight: var(--font-weight-bold); } &-count { @@ -771,7 +771,7 @@ color: var(--secondary-text-color); padding: 0 16px 8px 16px; margin: 0; - font-weight: 500; + font-weight: var(--font-weight-bold); justify-content: space-between; display: flex; font-size: 15px; diff --git a/src/scss/partials/_sidebar.scss b/src/scss/partials/_sidebar.scss index 9c9b2f59..543ca27a 100644 --- a/src/scss/partials/_sidebar.scss +++ b/src/scss/partials/_sidebar.scss @@ -31,7 +31,7 @@ &__title { flex: 1; - font-weight: 500; + font-weight: var(--font-weight-bold); padding-left: 1.5rem; font-size: 1.25rem; color: var(--primary-text-color); diff --git a/src/scss/partials/_slider.scss b/src/scss/partials/_slider.scss index c6da0ab7..e9265600 100644 --- a/src/scss/partials/_slider.scss +++ b/src/scss/partials/_slider.scss @@ -59,7 +59,7 @@ text-align: center; flex: 1 1 auto; font-size: 1rem; - font-weight: 500; + font-weight: var(--font-weight-bold); position: relative; transition: none !important; display: flex; diff --git a/src/scss/partials/popups/_call.scss b/src/scss/partials/popups/_call.scss index 11a495d9..ab42559b 100644 --- a/src/scss/partials/popups/_call.scss +++ b/src/scss/partials/popups/_call.scss @@ -83,7 +83,7 @@ } &-title { - font-weight: 500; + font-weight: var(--font-weight-bold); font-size: 1.25rem; } @@ -281,7 +281,7 @@ align-items: center; margin-top: 1rem; backdrop-filter: blur(25px); - font-weight: 500; + font-weight: var(--font-weight-bold); opacity: 0; transform: scale(0) translateY(0); max-width: 100%; diff --git a/src/scss/partials/popups/_createPoll.scss b/src/scss/partials/popups/_createPoll.scss index 483d75b5..7c0ef0c3 100644 --- a/src/scss/partials/popups/_createPoll.scss +++ b/src/scss/partials/popups/_createPoll.scss @@ -65,7 +65,7 @@ .caption { color: var(--secondary-text-color); - font-weight: 500; + font-weight: var(--font-weight-bold); padding: 1rem 1.5rem 0; } diff --git a/src/scss/partials/popups/_datePicker.scss b/src/scss/partials/popups/_datePicker.scss index cc7b17cb..2c763194 100644 --- a/src/scss/partials/popups/_datePicker.scss +++ b/src/scss/partials/popups/_datePicker.scss @@ -36,7 +36,7 @@ } &-title { - font-weight: 500; + font-weight: var(--font-weight-bold); font-size: 20px; } @@ -59,7 +59,7 @@ .date-picker-month-title { font-size: 14px; - font-weight: 500; + font-weight: var(--font-weight-bold); } } @@ -169,7 +169,7 @@ } &-title { - font-weight: 500; + font-weight: var(--font-weight-bold); font-size: 20px; margin-left: -5rem; @@ -180,7 +180,7 @@ .btn-icon { justify-self: auto; - font-weight: 500; + font-weight: var(--font-weight-bold); font-size: 14px; width: 36px; height: 36px; diff --git a/src/scss/partials/popups/_groupCall.scss b/src/scss/partials/popups/_groupCall.scss index 92d89f59..b59056ca 100644 --- a/src/scss/partials/popups/_groupCall.scss +++ b/src/scss/partials/popups/_groupCall.scss @@ -69,7 +69,7 @@ } &-title { - font-weight: 500; + font-weight: var(--font-weight-bold); } &-title, @@ -250,7 +250,7 @@ &-info { .peer-title { - font-weight: 500; + font-weight: var(--font-weight-bold); } .peer-title, diff --git a/src/scss/partials/popups/_mediaAttacher.scss b/src/scss/partials/popups/_mediaAttacher.scss index e613b139..ce78408d 100644 --- a/src/scss/partials/popups/_mediaAttacher.scss +++ b/src/scss/partials/popups/_mediaAttacher.scss @@ -54,7 +54,7 @@ margin: 0; margin-top: -3px; font-size: 1.25rem; - font-weight: 500; + font-weight: var(--font-weight-bold); } &-photo { diff --git a/src/scss/partials/popups/_peer.scss b/src/scss/partials/popups/_peer.scss index 78b98510..8ab73209 100644 --- a/src/scss/partials/popups/_peer.scss +++ b/src/scss/partials/popups/_peer.scss @@ -27,7 +27,7 @@ &-title { font-size: 1.25rem; - font-weight: 500; + font-weight: var(--font-weight-bold); margin-bottom: .125rem; &:not(:first-child) { @@ -51,7 +51,7 @@ margin-right: -.5rem; .btn { - font-weight: 500; + font-weight: var(--font-weight-bold); & + .btn { margin-top: .625rem; diff --git a/src/scss/partials/popups/_popup.scss b/src/scss/partials/popups/_popup.scss index 202df5eb..ff164ff2 100644 --- a/src/scss/partials/popups/_popup.scss +++ b/src/scss/partials/popups/_popup.scss @@ -75,7 +75,7 @@ &-description { .peer-title { - font-weight: 500; + font-weight: var(--font-weight-bold); } } @@ -126,7 +126,7 @@ } .btn { - font-weight: 500; + font-weight: var(--font-weight-bold); padding: .5rem; text-transform: uppercase; border-radius: $border-radius; diff --git a/src/scss/partials/popups/_stickers.scss b/src/scss/partials/popups/_stickers.scss index ab981a0b..8544eef1 100644 --- a/src/scss/partials/popups/_stickers.scss +++ b/src/scss/partials/popups/_stickers.scss @@ -12,7 +12,7 @@ padding: 0 2rem 0 1.5rem; margin: 0; font-size: 1.25rem; - font-weight: 500; + font-weight: var(--font-weight-bold); line-height: var(--line-height); } diff --git a/src/scss/style.scss b/src/scss/style.scss index e764415c..a56edc35 100644 --- a/src/scss/style.scss +++ b/src/scss/style.scss @@ -92,6 +92,8 @@ $chat-input-inner-padding-handhelds: .25rem; --disabled-opacity: .3; --round-video-size: 280px; --menu-box-shadow: 0px 2px 8px 1px var(--menu-box-shadow-color); + --font-monospace: 'Roboto Mono', monospace; + --font-weight-bold: 500; --topbar-floating-scaleX: 1; --topbar-call-height: 3rem; @@ -290,6 +292,8 @@ $chat-input-inner-padding-handhelds: .25rem; } @import "tgico"; +@import "fonts/roboto"; +@import "fonts/robotoMono"; @import "partials/input"; @import "partials/button"; @import "partials/animatedIcon"; @@ -362,98 +366,6 @@ $chat-input-inner-padding-handhelds: .25rem; @import "partials/pages/chats"; @import "partials/pages/password"; -/* cyrillic */ -@font-face { - font-family: 'Roboto'; - font-style: normal; - font-weight: 400; - font-display: swap; - src: local('Roboto'), local('Roboto-Regular'), url(assets/fonts/KFOmCnqEu92Fr1Mu5mxKKTU1Kvnz.woff2) format('woff2'); - unicode-range:U + 0400-045F, U + 0490-0491, U + 04B0-04B1, U + 2116 -} - -/* latin-ext */ -@font-face { - font-family: 'Roboto'; - font-style: normal; - font-weight: 400; - font-display: swap; - src: local('Roboto'), local('Roboto-Regular'), url(assets/fonts/KFOmCnqEu92Fr1Mu7GxKKTU1Kvnz.woff2) format('woff2'); - unicode-range:U + 0100-024F, U + 0259, U + 1E00-1EFF, U + 2020, U + 20A0-20AB, U + 20AD-20CF, U + 2113, U + 2C60-2C7F, U + A720-A7FF -} - -/* latin */ -@font-face { - font-family: 'Roboto'; - font-style: normal; - font-weight: 400; - font-display: swap; - src: local('Roboto'), local('Roboto-Regular'), url(assets/fonts/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2'); - unicode-range:U + 0000-00FF, U + 0131, U + 0152-0153, U + 02BB-02BC, U + 02C6, U + 02DA, U + 02DC, U + 2000-206F, U + 2074, U + 20AC, U + 2122, U + 2191, U + 2193, U + 2212, U + 2215, U + FEFF, U + FFFD -} - -/* cyrillic */ -@font-face { - font-family: 'Roboto'; - font-style: normal; - font-weight: 500; - font-display: swap; - src: local('Roboto Medium'), local('Roboto-Medium'), url(assets/fonts/KFOlCnqEu92Fr1MmEU9fABc4AMP6lbBP.woff2) format('woff2'); - unicode-range:U + 0400-045F, U + 0490-0491, U + 04B0-04B1, U + 2116 -} - -/* latin-ext */ -@font-face { - font-family: 'Roboto'; - font-style: normal; - font-weight: 500; - font-display: swap; - src: local('Roboto Medium'), local('Roboto-Medium'), url(assets/fonts/KFOlCnqEu92Fr1MmEU9fChc4AMP6lbBP.woff2) format('woff2'); - unicode-range:U + 0100-024F, U + 0259, U + 1E00-1EFF, U + 2020, U + 20A0-20AB, U + 20AD-20CF, U + 2113, U + 2C60-2C7F, U + A720-A7FF -} - -/* latin */ -@font-face { - font-family: 'Roboto'; - font-style: normal; - font-weight: 500; - font-display: swap; - src: local('Roboto Medium'), local('Roboto-Medium'), url(assets/fonts/KFOlCnqEu92Fr1MmEU9fBBc4AMP6lQ.woff2) format('woff2'); - unicode-range:U + 0000-00FF, U + 0131, U + 0152-0153, U + 02BB-02BC, U + 02C6, U + 02DA, U + 02DC, U + 2000-206F, U + 2074, U + 20AC, U + 2122, U + 2191, U + 2193, U + 2212, U + 2215, U + FEFF, U + FFFD -} - -// !!! FIX FOR [contenteditable] Ctrl+B, due to font-weight: 500; - -/* cyrillic */ -@font-face { - font-family: 'Roboto'; - font-style: normal; - font-weight: 700; - font-display: swap; - src: local('Roboto Medium'), local('Roboto-Medium'), url(assets/fonts/KFOlCnqEu92Fr1MmEU9fABc4AMP6lbBP.woff2) format('woff2'); - unicode-range:U + 0400-045F, U + 0490-0491, U + 04B0-04B1, U + 2116 -} - -/* latin-ext */ -@font-face { - font-family: 'Roboto'; - font-style: normal; - font-weight: 700; - font-display: swap; - src: local('Roboto Medium'), local('Roboto-Medium'), url(assets/fonts/KFOlCnqEu92Fr1MmEU9fChc4AMP6lbBP.woff2) format('woff2'); - unicode-range:U + 0100-024F, U + 0259, U + 1E00-1EFF, U + 2020, U + 20A0-20AB, U + 20AD-20CF, U + 2113, U + 2C60-2C7F, U + A720-A7FF -} - -/* latin */ -@font-face { - font-family: 'Roboto'; - font-style: normal; - font-weight: 700; - font-display: swap; - src: local('Roboto Medium'), local('Roboto-Medium'), url(assets/fonts/KFOlCnqEu92Fr1MmEU9fBBc4AMP6lQ.woff2) format('woff2'); - unicode-range:U + 0000-00FF, U + 0131, U + 0152-0153, U + 02BB-02BC, U + 02C6, U + 02DA, U + 02DC, U + 2000-206F, U + 2074, U + 20AC, U + 2122, U + 2191, U + 2193, U + 2212, U + 2215, U + FEFF, U + FFFD -} - html, body { height: 100%; width: 100%; @@ -558,6 +470,10 @@ input, textarea, button, select, a, div { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } +pre, code, kbd, samp { + font-family: var(--font-monospace); +} + .whole { min-height: 100%; width: 100%; @@ -581,7 +497,7 @@ input, textarea, button, select, a, div { } h1, h2, h3, h4, h5, h6 { - font-weight: 500; + font-weight: var(--font-weight-bold); } h4 { @@ -602,6 +518,10 @@ input, [contenteditable=true] { background-color: transparent; } +[contenteditable] [style*="bold"] { + font-weight: var(--font-weight-bold) !important; +} + input, textarea { -webkit-appearance: none; } @@ -769,8 +689,8 @@ hr { .user-title, b/* , .user-last-message b */ { color: var(--primary-text-color); - font-weight: bolder; - //font-weight: 500; + // font-weight: bolder; + font-weight: var(--font-weight-bold); //font-weight: normal; } @@ -1558,7 +1478,7 @@ hr { .tgico-char { &:before { font-family: "Roboto" !important; - font-weight: 500; + font-weight: var(--font-weight-bold); width: 1.5rem; text-align: center; } @@ -1615,7 +1535,7 @@ hr { padding: .125rem .25rem; border-radius: .185rem; font-size: .625rem; - font-weight: 500; + font-weight: var(--font-weight-bold); line-height: 1 !important; margin: 0 .25rem; }