From 84ace1a317cfacad2c08590356864a58f46c39a1 Mon Sep 17 00:00:00 2001
From: Tony Air <tony@twma.pro>
Date: Tue, 3 Jan 2023 06:42:48 +0200
Subject: [PATCH 1/2] FIX: Fonts for Cyrylic languages

---
 src/scss/components/_context-menu.scss   | 750 +++++++++++------------
 src/scss/components/_dropdown-field.scss | 416 ++++++-------
 src/scss/components/_header.scss         | 236 +++----
 src/scss/components/_sidebar.scss        | 422 ++++++-------
 src/scss/global/_core.scss               |   2 +-
 src/scss/global/_forms.scss              |   2 +-
 src/scss/global/_variables.scss          |   3 +-
 7 files changed, 916 insertions(+), 915 deletions(-)

diff --git a/src/scss/components/_context-menu.scss b/src/scss/components/_context-menu.scss
index 169051b5..6aea7835 100755
--- a/src/scss/components/_context-menu.scss
+++ b/src/scss/components/_context-menu.scss
@@ -1,375 +1,375 @@
-
-@include responsive($bp_medium){
-	body.context-menu-open {
-		.body {
-			@include blur(10px);
-		}
-	}
-}
-
-.context-menu {
-	position: fixed;
-	z-index: 99;
-	font-size: 13px;
-	font-weight: 500;
-	font-family: "Overpass";
-
-	&__section {
-		@include animate();
-		overflow-y: scroll;
-
-		&--submenu {
-			z-index: 3;
-			border-radius: 3px;
-			transform: translateX(100%);
-			opacity: 0;
-
-			.context-menu {
-				&__item {
-					width: 100%;
-
-					&--functional {
-						color: colour('mid_grey');
-
-						&:last-of-type {
-							border-bottom: 1px solid colour('middle_grey');
-						}
-					}
-
-					&__label {
-						.icon {
-							margin-bottom: 0.4em;
-							padding-right: 10px;
-							vertical-align: baseline;
-						}
-					}
-				}
-			}
-		}
-
-		&--items {
-			opacity: 1;
-			position: relative;
-			z-index: 2;
-		}
-	}
-
-	&__item {
-		display: block;
-		overflow-x: hidden;
-
-		&--disabled {
-			pointer-events: none;
-			cursor: default;
-			opacity: 0.5;
-		}
-
-		&__link {
-			@include gradient_overlay(3px);
-			cursor: pointer;
-			display: block;
-			padding: 9px 12px 8px;
-			box-sizing: border-box;
-			position: relative;
-			text-decoration: none;
-			color: inherit;
-
-			&--inactive {
-				cursor: default;
-				opacity: 0.5;
-				&:before {
-					display: none;
-				}
-			}
-
-			.notouch &:hover {
-				&:before {
-					opacity: 0.15;
-				}
-			}
-
-			.notouch &:active {
-				background: colour('turquoise');
-				color: colour('white');
-			}
-
-			.icon {
-				font-size: 12px;
-
-				&.submenu-icon {
-					display: inline-block;
-					padding-top: 4px;
-					margin-left: 10px;
-					vertical-align: baseline
-				}
-			}
-		}
-
-		&--loader {
-			padding-top: 75%;
-		}
-	}
-	
-	em {
-		font-style: normal;
-
-		&.context-menu__item:last-of-type {
-			border-bottom: 1px solid colour('middle_grey');
-		}
-	}
-
-	&__divider {
-		height: 1px;
-		padding: 0;
-		margin: 0;
-		background: colour('middle_grey');
-		opacity: 0.5;
-	}
-
-	&--submenu-expanded {
-		.context-menu {
-
-			&__section {
-				transform: translateX(-100%);
-				opacity: 0;
-
-				&--submenu {
-					transform: translateX(0);
-					opacity: 1;
-				}
-			}
-		}
-	}
-
-	@include responsive(null, $bp_medium){
-		width: 200px;
-		overflow-x: hidden;
-		border-radius: 3px;
-		box-shadow: 2px 3px 6px rgba(0,0,0,0.2);
-
-		@include theme('light') {
-			background: colour('white');
-		}
-
-		@include theme('dark') {
-			background: colour('grey');
-		}
-
-		&--closing {
-			display: none;
-		}
-
-		&__section {
-			background: none;
-			overflow: visible;
-
-			&--submenu {
-				position: absolute;
-				top: 0;
-				left: 0;
-				right: 0;
-				bottom: 0;
-
-				@include theme('dark') {
-					background: colour('grey');
-				}
-
-				@include theme('light') {
-					background: colour('white');
-				}
-			}
-		}
-
-		&__title {
-			display: none;
-		}
-	}
-
-	@include responsive($bp_medium){
-		@include fadein(0.2s, 40px);
-		top: 0 !important;
-		right: 0 !important;
-		bottom: 0 !important;
-		left: 0 !important;
-		margin: 0 !important;
-		text-align: center;
-
-		&--closing {
-			@include fadeout(0.2s, 40px);
-		}
-
-		&__background {
-			position: absolute;
-			top: 0;
-			right: 0;
-			bottom: 0;
-			left: 0;
-			background-image: linear-gradient(rgba(24,24,24,0) 0%, rgba(24,24,24,1) 20%);
-			z-index: 1;
-
-			@include theme('light') {
-				background-image: linear-gradient(rgba(255,255,255,0) 0%, rgba(255,255,255,1) 20%);
-			}
-		}
-
-		&__title {
-			@include clearfix();
-			color: colour('mid_grey');
-			padding: 16px 22px;
-
-			@include theme('light') {
-				color: colour('darkest_grey');
-			}
-
-			.thumbnail {
-				float: left;
-				width: 36px;
-				margin-right: 20px;
-			}
-
-			&__text {
-				position: relative;
-				z-index: 2;
-				font-size: 1.2rem;
-				font-weight: 800;
-				padding-top: 8px;
-			}
-
-			&__type {
-				display: none;
-				position: relative;
-				z-index: 2;
-				opacity: 0.3;
-				font-weight: 200;
-				text-transform: capitalize;
-			}
-
-			&__deselect {
-				font-size: 0.86em;
-			}
-
-			a {
-				color: inherit;
-			}
-		}
-
-		&__section {
-			position: absolute;
-			top: 20%;
-			left: 0;
-			right: 0;
-			padding: 0 10%;
-			max-height: 80%;
-			overflow: auto;
-
-			&--submenu {
-				background: none;
-				border-radius: 0;
-				opacity: 0;
-			}
-
-			&--items {
-
-				/**
-				 * The following is for buttons automatically pulled from
-				 * a page header, so we don't have classname control
-				 **/
-				.button {
-					display: block;
-					text-decoration: none;
-					display: block;
-					margin: 0;
-					width: 100% !important;
-					box-sizing: border-box;
-					text-align: center;
-					text-transform: none;
-					font-weight: 700;
-					font-size: 1.2rem;
-					color: colour('white');
-					background: none;
-					transform: none;
-					padding: 16px 22px;
-					border: 0;
-					border-radius: 3px;
-
-					&,
-					&:hover {
-						box-shadow: none;
-					}
-
-					@include theme('light') {
-						color: colour('darkest_grey');
-					}
-
-					.icon {
-						display: none;
-					}
-
-					&:before {
-						display: none !important;
-					}
-
-					&:focus,
-					&:active {
-						@include noanimate();
-						color: colour('white') !important;
-						background: colour('turquoise') !important;
-					}
-				}
-			}
-		}
-
-		&__divider {
-			display: none;
-		}
-
-		&__item {
-			font-size: 1.2rem;
-			font-weight: 800;
-			opacity: 1;
-
-			&__link {
-				@include animate();
-				padding: 16px 22px;
-				box-sizing: border-box;
-
-				@include theme('light') {
-					color: colour('darkest_grey');
-				}
-
-				&:before {
-					display: none !important;
-				}
-
-				&:focus,
-				&:active {
-					@include noanimate();
-					color: colour('white') !important;
-					background: colour('turquoise') !important;
-				}
-			}
-		}
-	}
-}
-
-.context-menu-trigger {
-	position: relative;
-
-	.actions & {
-		font-size: 24px;
-		padding: 2px 10px 1px;
-	}
-
-	.icon {
-		pointer-events: none;
-	}
-
-	h4 &,
-	h4 &:active {
-		margin: -8px 0 0 10px;
-	}
-
-	@include responsive($bp_medium){
-		padding: 12px;
-	}
-}
+
+@include responsive($bp_medium){
+	body.context-menu-open {
+		.body {
+			@include blur(10px);
+		}
+	}
+}
+
+.context-menu {
+	position: fixed;
+	z-index: 99;
+	font-size: 13px;
+	font-weight: 500;
+	font-family: $font-family-alt;
+
+	&__section {
+		@include animate();
+		overflow-y: scroll;
+
+		&--submenu {
+			z-index: 3;
+			border-radius: 3px;
+			transform: translateX(100%);
+			opacity: 0;
+
+			.context-menu {
+				&__item {
+					width: 100%;
+
+					&--functional {
+						color: colour('mid_grey');
+
+						&:last-of-type {
+							border-bottom: 1px solid colour('middle_grey');
+						}
+					}
+
+					&__label {
+						.icon {
+							margin-bottom: 0.4em;
+							padding-right: 10px;
+							vertical-align: baseline;
+						}
+					}
+				}
+			}
+		}
+
+		&--items {
+			opacity: 1;
+			position: relative;
+			z-index: 2;
+		}
+	}
+
+	&__item {
+		display: block;
+		overflow-x: hidden;
+
+		&--disabled {
+			pointer-events: none;
+			cursor: default;
+			opacity: 0.5;
+		}
+
+		&__link {
+			@include gradient_overlay(3px);
+			cursor: pointer;
+			display: block;
+			padding: 9px 12px 8px;
+			box-sizing: border-box;
+			position: relative;
+			text-decoration: none;
+			color: inherit;
+
+			&--inactive {
+				cursor: default;
+				opacity: 0.5;
+				&:before {
+					display: none;
+				}
+			}
+
+			.notouch &:hover {
+				&:before {
+					opacity: 0.15;
+				}
+			}
+
+			.notouch &:active {
+				background: colour('turquoise');
+				color: colour('white');
+			}
+
+			.icon {
+				font-size: 12px;
+
+				&.submenu-icon {
+					display: inline-block;
+					padding-top: 4px;
+					margin-left: 10px;
+					vertical-align: baseline
+				}
+			}
+		}
+
+		&--loader {
+			padding-top: 75%;
+		}
+	}
+	
+	em {
+		font-style: normal;
+
+		&.context-menu__item:last-of-type {
+			border-bottom: 1px solid colour('middle_grey');
+		}
+	}
+
+	&__divider {
+		height: 1px;
+		padding: 0;
+		margin: 0;
+		background: colour('middle_grey');
+		opacity: 0.5;
+	}
+
+	&--submenu-expanded {
+		.context-menu {
+
+			&__section {
+				transform: translateX(-100%);
+				opacity: 0;
+
+				&--submenu {
+					transform: translateX(0);
+					opacity: 1;
+				}
+			}
+		}
+	}
+
+	@include responsive(null, $bp_medium){
+		width: 200px;
+		overflow-x: hidden;
+		border-radius: 3px;
+		box-shadow: 2px 3px 6px rgba(0,0,0,0.2);
+
+		@include theme('light') {
+			background: colour('white');
+		}
+
+		@include theme('dark') {
+			background: colour('grey');
+		}
+
+		&--closing {
+			display: none;
+		}
+
+		&__section {
+			background: none;
+			overflow: visible;
+
+			&--submenu {
+				position: absolute;
+				top: 0;
+				left: 0;
+				right: 0;
+				bottom: 0;
+
+				@include theme('dark') {
+					background: colour('grey');
+				}
+
+				@include theme('light') {
+					background: colour('white');
+				}
+			}
+		}
+
+		&__title {
+			display: none;
+		}
+	}
+
+	@include responsive($bp_medium){
+		@include fadein(0.2s, 40px);
+		top: 0 !important;
+		right: 0 !important;
+		bottom: 0 !important;
+		left: 0 !important;
+		margin: 0 !important;
+		text-align: center;
+
+		&--closing {
+			@include fadeout(0.2s, 40px);
+		}
+
+		&__background {
+			position: absolute;
+			top: 0;
+			right: 0;
+			bottom: 0;
+			left: 0;
+			background-image: linear-gradient(rgba(24,24,24,0) 0%, rgba(24,24,24,1) 20%);
+			z-index: 1;
+
+			@include theme('light') {
+				background-image: linear-gradient(rgba(255,255,255,0) 0%, rgba(255,255,255,1) 20%);
+			}
+		}
+
+		&__title {
+			@include clearfix();
+			color: colour('mid_grey');
+			padding: 16px 22px;
+
+			@include theme('light') {
+				color: colour('darkest_grey');
+			}
+
+			.thumbnail {
+				float: left;
+				width: 36px;
+				margin-right: 20px;
+			}
+
+			&__text {
+				position: relative;
+				z-index: 2;
+				font-size: 1.2rem;
+				font-weight: 800;
+				padding-top: 8px;
+			}
+
+			&__type {
+				display: none;
+				position: relative;
+				z-index: 2;
+				opacity: 0.3;
+				font-weight: 200;
+				text-transform: capitalize;
+			}
+
+			&__deselect {
+				font-size: 0.86em;
+			}
+
+			a {
+				color: inherit;
+			}
+		}
+
+		&__section {
+			position: absolute;
+			top: 20%;
+			left: 0;
+			right: 0;
+			padding: 0 10%;
+			max-height: 80%;
+			overflow: auto;
+
+			&--submenu {
+				background: none;
+				border-radius: 0;
+				opacity: 0;
+			}
+
+			&--items {
+
+				/**
+				 * The following is for buttons automatically pulled from
+				 * a page header, so we don't have classname control
+				 **/
+				.button {
+					display: block;
+					text-decoration: none;
+					display: block;
+					margin: 0;
+					width: 100% !important;
+					box-sizing: border-box;
+					text-align: center;
+					text-transform: none;
+					font-weight: 700;
+					font-size: 1.2rem;
+					color: colour('white');
+					background: none;
+					transform: none;
+					padding: 16px 22px;
+					border: 0;
+					border-radius: 3px;
+
+					&,
+					&:hover {
+						box-shadow: none;
+					}
+
+					@include theme('light') {
+						color: colour('darkest_grey');
+					}
+
+					.icon {
+						display: none;
+					}
+
+					&:before {
+						display: none !important;
+					}
+
+					&:focus,
+					&:active {
+						@include noanimate();
+						color: colour('white') !important;
+						background: colour('turquoise') !important;
+					}
+				}
+			}
+		}
+
+		&__divider {
+			display: none;
+		}
+
+		&__item {
+			font-size: 1.2rem;
+			font-weight: 800;
+			opacity: 1;
+
+			&__link {
+				@include animate();
+				padding: 16px 22px;
+				box-sizing: border-box;
+
+				@include theme('light') {
+					color: colour('darkest_grey');
+				}
+
+				&:before {
+					display: none !important;
+				}
+
+				&:focus,
+				&:active {
+					@include noanimate();
+					color: colour('white') !important;
+					background: colour('turquoise') !important;
+				}
+			}
+		}
+	}
+}
+
+.context-menu-trigger {
+	position: relative;
+
+	.actions & {
+		font-size: 24px;
+		padding: 2px 10px 1px;
+	}
+
+	.icon {
+		pointer-events: none;
+	}
+
+	h4 &,
+	h4 &:active {
+		margin: -8px 0 0 10px;
+	}
+
+	@include responsive($bp_medium){
+		padding: 12px;
+	}
+}
diff --git a/src/scss/components/_dropdown-field.scss b/src/scss/components/_dropdown-field.scss
index 8f568ed6..b24ae9c0 100755
--- a/src/scss/components/_dropdown-field.scss
+++ b/src/scss/components/_dropdown-field.scss
@@ -1,208 +1,208 @@
-
-.dropdown-field {
-	@include noselect();
-	font-size: 13px;
-	font-weight: 500;
-	font-family: "Overpass";
-	position: relative;
-	display: inline-block;
-
-	&__label {
-		display: flex;
-		font-weight: 800;
-
-		&__name {
-			display: none;
-		}
-
-		.icon {
-			padding-right: 8px;
-		}
-
-		&:not(.button) {
-			@include animate();
-			padding: 14px 10px;
-			cursor: pointer;
-
-			.notouch &:hover {
-				color: colour('blue');
-			}
-		}
-	}
-
-	&--expanded {
-		.label:not(.button) {
-			color: colour('blue');
-		}
-		.dropdown-field__options {
-			display: block;
-		}
-	}
-
-	&--no-status-icon {
-		.dropdown-field__options {
-			&__item {
-				padding-left: 12px;
-			}
-		}
-	}
-
-	&--no-label {
-		.label > .text {
-			display: none;
-		}
-	}
-
-	&__options {
-		position: absolute;
-		top: 46px;
-		right: 10px;
-		z-index: 97;
-		display: none;
-		box-shadow: 2px 3px 6px rgba(0,0,0,0.2);
-
-		&:before {
-			content: '';
-			display: block;
-			width: 6px;
-			height: 6px;
-			background: colour('white');
-			-ms-transform: rotate(45deg);
-			-webkit-transform: rotate(45deg);
-			transform: rotate(45deg);
-			position: absolute;
-			top: -3px;
-			right: 9px;
-
-			@include theme('light') {
-				background: colour('white');
-			}
-		}
-
-		&__liner {
-			color: colour('black');
-			background: colour('white');
-			min-width: 120px;
-			max-height: 70vh;
-			overflow-y: auto;
-			border-radius: 3px;
-
-			@include theme('light') {
-				background: colour('white');
-			}
-		}
-
-		&__item {
-			@include animate();
-			@include gradient_overlay(3px);
-			position: relative;
-			padding: 9px 12px 8px 24px;
-			cursor: pointer;
-			color: colour('darkest_grey');
-
-			.icon {
-				position: absolute;
-				top: 8px;
-				left: 6px;
-				font-size: 16px;
-			}
-
-			.notouch &:hover {
-				color: colour('darkest_grey');
-
-				&:before {
-					opacity: 0.15;
-				}
-			}
-		}
-	}
-}
-
-#context-menu {
-	.dropdown-field {
-		padding: 16px 0;
-		display: block;
-
-		&:active,
-		&:focus {
-			background: none !important;
-		}
-
-		&__label {
-			padding: 0 0 3px 0;
-			opacity: 0.5;
-			font-size: 1rem;
-			display: block;
-			cursor: default;
-
-			&__value {
-				display: none;
-			}
-
-			&__name {
-				display: inline-block;
-			}
-
-			&,
-			&:hover {
-				color: colour('white');
-
-				@include theme('light') {
-					color: colour('dark_grey') !important;
-				}
-			}
-		}
-
-		&__options {
-			display: block;
-			position: static;
-			background: transparent;
-			border-radius: 0;
-			border: 0;
-			box-shadow: none;
-			font-weight: 700;
-			font-size: 1.2rem;
-
-			&:before {
-				display: none !important;
-			}
-
-			&__liner {
-				background: transparent;
-				color: colour('white') !important;
-				margin: -3px -5px;
-
-				@include theme('light') {
-					color: colour('dark_grey') !important;
-				}
-
-				&:before {
-					display: none !important;
-				}
-			}
-
-			&__item {
-				display: block;
-				padding: 3px 5px;
-				border-radius: 0;
-				color: colour('white') !important;
-
-				@include theme('light') {
-					color: colour('dark_grey') !important;
-				}
-
-				&:before {
-					display: none !important;
-				}
-
-				.icon {
-					display: inline-block;
-					position: static;
-					padding-right: 2px;
-					padding-bottom: 3px;
-					font-size: 0.9em;
-				}
-			}
-		}
-	}
-}
+
+.dropdown-field {
+	@include noselect();
+	font-size: 13px;
+	font-weight: 500;
+	font-family: $font-family-alt;
+	position: relative;
+	display: inline-block;
+
+	&__label {
+		display: flex;
+		font-weight: 800;
+
+		&__name {
+			display: none;
+		}
+
+		.icon {
+			padding-right: 8px;
+		}
+
+		&:not(.button) {
+			@include animate();
+			padding: 14px 10px;
+			cursor: pointer;
+
+			.notouch &:hover {
+				color: colour('blue');
+			}
+		}
+	}
+
+	&--expanded {
+		.label:not(.button) {
+			color: colour('blue');
+		}
+		.dropdown-field__options {
+			display: block;
+		}
+	}
+
+	&--no-status-icon {
+		.dropdown-field__options {
+			&__item {
+				padding-left: 12px;
+			}
+		}
+	}
+
+	&--no-label {
+		.label > .text {
+			display: none;
+		}
+	}
+
+	&__options {
+		position: absolute;
+		top: 46px;
+		right: 10px;
+		z-index: 97;
+		display: none;
+		box-shadow: 2px 3px 6px rgba(0,0,0,0.2);
+
+		&:before {
+			content: '';
+			display: block;
+			width: 6px;
+			height: 6px;
+			background: colour('white');
+			-ms-transform: rotate(45deg);
+			-webkit-transform: rotate(45deg);
+			transform: rotate(45deg);
+			position: absolute;
+			top: -3px;
+			right: 9px;
+
+			@include theme('light') {
+				background: colour('white');
+			}
+		}
+
+		&__liner {
+			color: colour('black');
+			background: colour('white');
+			min-width: 120px;
+			max-height: 70vh;
+			overflow-y: auto;
+			border-radius: 3px;
+
+			@include theme('light') {
+				background: colour('white');
+			}
+		}
+
+		&__item {
+			@include animate();
+			@include gradient_overlay(3px);
+			position: relative;
+			padding: 9px 12px 8px 24px;
+			cursor: pointer;
+			color: colour('darkest_grey');
+
+			.icon {
+				position: absolute;
+				top: 8px;
+				left: 6px;
+				font-size: 16px;
+			}
+
+			.notouch &:hover {
+				color: colour('darkest_grey');
+
+				&:before {
+					opacity: 0.15;
+				}
+			}
+		}
+	}
+}
+
+#context-menu {
+	.dropdown-field {
+		padding: 16px 0;
+		display: block;
+
+		&:active,
+		&:focus {
+			background: none !important;
+		}
+
+		&__label {
+			padding: 0 0 3px 0;
+			opacity: 0.5;
+			font-size: 1rem;
+			display: block;
+			cursor: default;
+
+			&__value {
+				display: none;
+			}
+
+			&__name {
+				display: inline-block;
+			}
+
+			&,
+			&:hover {
+				color: colour('white');
+
+				@include theme('light') {
+					color: colour('dark_grey') !important;
+				}
+			}
+		}
+
+		&__options {
+			display: block;
+			position: static;
+			background: transparent;
+			border-radius: 0;
+			border: 0;
+			box-shadow: none;
+			font-weight: 700;
+			font-size: 1.2rem;
+
+			&:before {
+				display: none !important;
+			}
+
+			&__liner {
+				background: transparent;
+				color: colour('white') !important;
+				margin: -3px -5px;
+
+				@include theme('light') {
+					color: colour('dark_grey') !important;
+				}
+
+				&:before {
+					display: none !important;
+				}
+			}
+
+			&__item {
+				display: block;
+				padding: 3px 5px;
+				border-radius: 0;
+				color: colour('white') !important;
+
+				@include theme('light') {
+					color: colour('dark_grey') !important;
+				}
+
+				&:before {
+					display: none !important;
+				}
+
+				.icon {
+					display: inline-block;
+					position: static;
+					padding-right: 2px;
+					padding-bottom: 3px;
+					font-size: 0.9em;
+				}
+			}
+		}
+	}
+}
diff --git a/src/scss/components/_header.scss b/src/scss/components/_header.scss
index 28832368..52ccefca 100755
--- a/src/scss/components/_header.scss
+++ b/src/scss/components/_header.scss
@@ -1,118 +1,118 @@
-
-main {
-	header {
-		box-sizing: border-box;
-		padding: 40px;
-		margin-bottom: -40px;
-		display: flex;
-		flex-direction: row;
-
-		h1 {
-			& > .icon {
-				display: inline-block;
-				padding-right: 14px;
-				vertical-align: bottom;
-				margin-bottom: 8px;
-				font-size: 0.9em;
-			}
-		}
-
-		&__text {
-			display: flex;
-			flex-flow: column;
-		}
-
-		h4 {
-			line-height: 1em;
-			opacity: 0.5;
-		}
-
-		.header__options {
-			margin-left: auto;
-
-			&__wrapper {
-				display: flex;
-			}
-
-			.context-menu-trigger {
-				display: none;
-				font-size: 18px;
-				padding: 16px 14px;
-			}
-
-			.button,
-			button {
-				font-size: 13px;
-				font-weight: 800;
-				font-family: "Overpass";
-				background: transparent;
-				text-transform: none;
-				padding: 13px 10px;
-				margin: 0;
-				min-width: 0;
-				color: colour('light_grey');
-				vertical-align: unset;
-				border: none;
-
-				&:hover {
-					color: colour('blue');
-					box-shadow: none;
-
-					&:before {
-						display: none;
-					}
-				}
-
-				@include theme('light') {
-					color: colour('darkest_grey');
-
-					&:hover {
-						color: colour('blue');
-					}
-
-					&:active {
-						background: transparent;
-					}
-				}
-			}
-		}
-
-		&.overlay {
-			position: absolute;
-			top: 0;
-			left: 0;
-			width: 100%;
-			z-index: 98;
-		}
-
-		@include responsive($bp_medium){
-			padding: 10px 10px 10px 0;
-			margin-bottom: -10px;
-
-			h1 {
-				vertical-align: top;
-				padding-top: 6px;
-
-				& > .icon {
-					margin-bottom: 2px;
-					padding-right: 6px;
-					margin-left: 10px;
-				}
-			}
-
-			.header__options {
-				top: 1rem;
-				right: 1rem;
-
-				.context-menu-trigger {
-					display: block;
-					font-size: 1.4rem;
-				}
-
-				&__wrapper {
-					display: none;
-				}
-			}
-		}
-	}
-}
+
+main {
+	header {
+		box-sizing: border-box;
+		padding: 40px;
+		margin-bottom: -40px;
+		display: flex;
+		flex-direction: row;
+
+		h1 {
+			& > .icon {
+				display: inline-block;
+				padding-right: 14px;
+				vertical-align: bottom;
+				margin-bottom: 8px;
+				font-size: 0.9em;
+			}
+		}
+
+		&__text {
+			display: flex;
+			flex-flow: column;
+		}
+
+		h4 {
+			line-height: 1em;
+			opacity: 0.5;
+		}
+
+		.header__options {
+			margin-left: auto;
+
+			&__wrapper {
+				display: flex;
+			}
+
+			.context-menu-trigger {
+				display: none;
+				font-size: 18px;
+				padding: 16px 14px;
+			}
+
+			.button,
+			button {
+				font-size: 13px;
+				font-weight: 800;
+				font-family: $font-family-alt;
+				background: transparent;
+				text-transform: none;
+				padding: 13px 10px;
+				margin: 0;
+				min-width: 0;
+				color: colour('light_grey');
+				vertical-align: unset;
+				border: none;
+
+				&:hover {
+					color: colour('blue');
+					box-shadow: none;
+
+					&:before {
+						display: none;
+					}
+				}
+
+				@include theme('light') {
+					color: colour('darkest_grey');
+
+					&:hover {
+						color: colour('blue');
+					}
+
+					&:active {
+						background: transparent;
+					}
+				}
+			}
+		}
+
+		&.overlay {
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			z-index: 98;
+		}
+
+		@include responsive($bp_medium){
+			padding: 10px 10px 10px 0;
+			margin-bottom: -10px;
+
+			h1 {
+				vertical-align: top;
+				padding-top: 6px;
+
+				& > .icon {
+					margin-bottom: 2px;
+					padding-right: 6px;
+					margin-left: 10px;
+				}
+			}
+
+			.header__options {
+				top: 1rem;
+				right: 1rem;
+
+				.context-menu-trigger {
+					display: block;
+					font-size: 1.4rem;
+				}
+
+				&__wrapper {
+					display: none;
+				}
+			}
+		}
+	}
+}
diff --git a/src/scss/components/_sidebar.scss b/src/scss/components/_sidebar.scss
index 180b1279..e2e34a95 100755
--- a/src/scss/components/_sidebar.scss
+++ b/src/scss/components/_sidebar.scss
@@ -1,211 +1,211 @@
-.sidebar {
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  z-index: 96;
-  width: 220px;
-  overflow: hidden;
-  color: colour('white');
-  box-sizing: border-box;
-  transform-style: preserve-3d;
-
-  &__liner {
-    overflow-y: auto;
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 60px;
-    box-sizing: border-box;
-    z-index: 2;
-    overflow-y: auto;
-  }
-
-  &__menu {
-    z-index: 2;
-    position: relative;
-    padding-top: 20px;
-    line-height: 1em;
-
-    &__item {
-      font-family: "Overpass";
-      font-weight: 600;
-      font-size: 1.05rem;
-      color: colour('white');
-      text-decoration: none;
-      display: flex;
-      padding: 0.75em 0.85em;
-      margin: 0 1.1em;
-      border-radius: 3px;
-      line-break: after-white-space;
-
-      @include theme('dark') {
-        @include gradient_overlay(3px);
-      }
-
-      @include theme('light') {
-        @include animate();
-        color: colour('darkest_grey');
-        font-weight: 600;
-      }
-
-      .icon {
-        padding-right: 8px;
-        font-size: 1em;
-      }
-
-      .status {
-        margin-left: auto;
-
-        .icon {
-          padding-right: 0;
-          padding-left: 8px;
-        }
-      }
-
-      &--submenu {
-        font-size: 1rem;
-        padding: 0.6em 0.7em;
-        font-weight: 400 !important;
-        margin: 0 1.1em 0 3em;
-
-        &:before {
-          display: none;
-        }
-
-        &.sidebar__menu__item {
-          color: colour('mid_grey');
-
-          &:before,
-          &:after {
-            display: none;
-          }
-
-          @include theme('light') {
-            color: colour('soft_grey');
-          }
-
-          &.active {
-            background: transparent !important;
-            color: colour('turquoise') !important;
-          }
-        }
-      }
-
-      &--active {
-        background: colour('turquoise');
-        color: colour('white') !important;
-
-        .status {
-          .icon {
-            color: colour('white') !important;
-          }
-        }
-
-        &:before {
-          opacity: 0.15;
-        }
-      }
-
-      &[disabled] {
-        opacity: 0.3;
-        cursor: not-allowed;
-      }
-
-      &:hover:not([disabled]) {
-        &:before {
-          opacity: 0.15;
-        }
-
-        @include theme('light') {
-          color: lighten(colour('darkest_grey'), 20%);
-        }
-      }
-
-      &:focus:not([disabled]):not(.sidebar__menu__item--active) {
-        background: rgba(128, 128, 128, 0.25);
-      }
-
-      &:active {
-        @include noanimate();
-        transform: translate(1px, 1px);
-      }
-    }
-
-    &__section {
-      padding-bottom: 25px;
-
-      &__title {
-        display: block;
-        padding: 0 26px 5px 26px;
-        font-size: 12px;
-        text-transform: uppercase;
-        color: colour('middle_grey');
-      }
-    }
-  }
-
-  .close {
-    @include click_feedback();
-    display: none;
-    position: absolute;
-    bottom: 4px;
-    right: 4px;
-    padding: 10px;
-    display: inline-block;
-    z-index: 99;
-    font-size: 1.2rem;
-
-    @include theme('light') {
-      color: colour('darkest_grey');
-    }
-  }
-
-  @include responsive($bp_medium) {
-    @include animate(0.15s);
-    width: 250px;
-    left: auto;
-    right: -250px;
-    padding-bottom: 0;
-    position: fixed;
-    z-index: 100;
-
-    @include theme('light') {
-      background: lighten(colour('faint_grey'), 2%);
-    }
-
-    @include theme('dark') {
-      background: colour('darkest_grey');
-    }
-
-    .sidebar-open & {
-      -ms-transform: translate(-250px, 0);
-      -webkit-transform: translate(-250px, 0);
-      transform: translate(-250px, 0);
-    }
-
-    &__liner {
-      bottom: 0 !important;
-      padding-bottom: 30px;
-    }
-
-    .thumbnail {
-      display: none;
-    }
-
-    .close {
-      display: block;
-    }
-
-    &__menu {
-      &__section {
-        padding-bottom: 10px;
-
-        &__title {
-          padding-bottom: 2px;
-        }
-      }
-    }
-  }
-}
+.sidebar {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  z-index: 96;
+  width: 220px;
+  overflow: hidden;
+  color: colour('white');
+  box-sizing: border-box;
+  transform-style: preserve-3d;
+
+  &__liner {
+    overflow-y: auto;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 60px;
+    box-sizing: border-box;
+    z-index: 2;
+    overflow-y: auto;
+  }
+
+  &__menu {
+    z-index: 2;
+    position: relative;
+    padding-top: 20px;
+    line-height: 1em;
+
+    &__item {
+      font-family: $font-family-alt;
+      font-weight: 600;
+      font-size: 1.05rem;
+      color: colour('white');
+      text-decoration: none;
+      display: flex;
+      padding: 0.75em 0.85em;
+      margin: 0 1.1em;
+      border-radius: 3px;
+      line-break: after-white-space;
+
+      @include theme('dark') {
+        @include gradient_overlay(3px);
+      }
+
+      @include theme('light') {
+        @include animate();
+        color: colour('darkest_grey');
+        font-weight: 600;
+      }
+
+      .icon {
+        padding-right: 8px;
+        font-size: 1em;
+      }
+
+      .status {
+        margin-left: auto;
+
+        .icon {
+          padding-right: 0;
+          padding-left: 8px;
+        }
+      }
+
+      &--submenu {
+        font-size: 1rem;
+        padding: 0.6em 0.7em;
+        font-weight: 400 !important;
+        margin: 0 1.1em 0 3em;
+
+        &:before {
+          display: none;
+        }
+
+        &.sidebar__menu__item {
+          color: colour('mid_grey');
+
+          &:before,
+          &:after {
+            display: none;
+          }
+
+          @include theme('light') {
+            color: colour('soft_grey');
+          }
+
+          &.active {
+            background: transparent !important;
+            color: colour('turquoise') !important;
+          }
+        }
+      }
+
+      &--active {
+        background: colour('turquoise');
+        color: colour('white') !important;
+
+        .status {
+          .icon {
+            color: colour('white') !important;
+          }
+        }
+
+        &:before {
+          opacity: 0.15;
+        }
+      }
+
+      &[disabled] {
+        opacity: 0.3;
+        cursor: not-allowed;
+      }
+
+      &:hover:not([disabled]) {
+        &:before {
+          opacity: 0.15;
+        }
+
+        @include theme('light') {
+          color: lighten(colour('darkest_grey'), 20%);
+        }
+      }
+
+      &:focus:not([disabled]):not(.sidebar__menu__item--active) {
+        background: rgba(128, 128, 128, 0.25);
+      }
+
+      &:active {
+        @include noanimate();
+        transform: translate(1px, 1px);
+      }
+    }
+
+    &__section {
+      padding-bottom: 25px;
+
+      &__title {
+        display: block;
+        padding: 0 26px 5px 26px;
+        font-size: 12px;
+        text-transform: uppercase;
+        color: colour('middle_grey');
+      }
+    }
+  }
+
+  .close {
+    @include click_feedback();
+    display: none;
+    position: absolute;
+    bottom: 4px;
+    right: 4px;
+    padding: 10px;
+    display: inline-block;
+    z-index: 99;
+    font-size: 1.2rem;
+
+    @include theme('light') {
+      color: colour('darkest_grey');
+    }
+  }
+
+  @include responsive($bp_medium) {
+    @include animate(0.15s);
+    width: 250px;
+    left: auto;
+    right: -250px;
+    padding-bottom: 0;
+    position: fixed;
+    z-index: 100;
+
+    @include theme('light') {
+      background: lighten(colour('faint_grey'), 2%);
+    }
+
+    @include theme('dark') {
+      background: colour('darkest_grey');
+    }
+
+    .sidebar-open & {
+      -ms-transform: translate(-250px, 0);
+      -webkit-transform: translate(-250px, 0);
+      transform: translate(-250px, 0);
+    }
+
+    &__liner {
+      bottom: 0 !important;
+      padding-bottom: 30px;
+    }
+
+    .thumbnail {
+      display: none;
+    }
+
+    .close {
+      display: block;
+    }
+
+    &__menu {
+      &__section {
+        padding-bottom: 10px;
+
+        &__title {
+          padding-bottom: 2px;
+        }
+      }
+    }
+  }
+}
diff --git a/src/scss/global/_core.scss b/src/scss/global/_core.scss
index 20d9692d..58430cdd 100755
--- a/src/scss/global/_core.scss
+++ b/src/scss/global/_core.scss
@@ -32,7 +32,7 @@
 
 body,
 html {
-  font-family: "Overpass", Helvetica, Arial, sans-serif;
+  font-family: $font-family-alt;
   font-size: 14px;
   letter-spacing: -0.02rem;
   touch-action: manipulation;
diff --git a/src/scss/global/_forms.scss b/src/scss/global/_forms.scss
index c623114a..1d01b908 100755
--- a/src/scss/global/_forms.scss
+++ b/src/scss/global/_forms.scss
@@ -17,7 +17,7 @@ select {
   padding: 10px 14px;
   background: rgba(128, 128, 128, 0.05);
   color: colour('white');
-  font-family: "Overpass", Helvetica, Arial, sans-serif;
+  font-family: $font-family-alt;
   font-size: 14px;
   border-radius: 3px;
   letter-spacing: -0.01rem;
diff --git a/src/scss/global/_variables.scss b/src/scss/global/_variables.scss
index c27e089a..4a9ac367 100755
--- a/src/scss/global/_variables.scss
+++ b/src/scss/global/_variables.scss
@@ -4,6 +4,7 @@ $bp_medium: 800px;
 $bp_small: 500px;
 $bp_narrow: 360px;
 $bp_shallow: 650px;
+$font-family-alt: "Overpass", Helvetica, Arial, sans-serif;
 
 @mixin one_line_text {
   white-space: nowrap;
@@ -343,7 +344,7 @@ $bp_shallow: 650px;
 }
 
 @mixin feature_font() {
-  font-family: "Overpass";
+  font-family: $font-family-alt;
   font-weight: 600;
 }
 

From 8366fcfd438fa516213a52fe58ffe0b729466aa5 Mon Sep 17 00:00:00 2001
From: Tony Air <tony@twma.pro>
Date: Tue, 3 Jan 2023 07:35:38 +0200
Subject: [PATCH 2/2] FIX: Locale

---
 src/js/locale/ru.yaml | 79 ++++++++++++++++++++++++++++++++-----------
 1 file changed, 59 insertions(+), 20 deletions(-)

diff --git a/src/js/locale/ru.yaml b/src/js/locale/ru.yaml
index 7be62a93..8dd5447b 100644
--- a/src/js/locale/ru.yaml
+++ b/src/js/locale/ru.yaml
@@ -19,10 +19,10 @@ errors:
     title: Невозможно изменить порядок элементов
     description: Удалить сортировку/фильтры и повторить попытку
 actions:
-  play: Играть
+  play: Воспроизвести
   play_all: Воспроизвести все
-  play_next: Играть дальше
-  shuffle_play: Играть в случайном порядке
+  play_next: Воспроизвести следующим
+  shuffle_play: Воспроизвести в случайном порядке
   pause: Пауза
   stop: Стоп
   add_to_playlist: Добавить в плейлист
@@ -31,7 +31,7 @@ actions:
   remove_from_library: Удалить из библиотеки
   add_to_queue: Добавить в очередь
   reset: Сброс
-  back: Отменить
+  back: Назад
   refresh: Oбновить
   enable: Включить
   disable: Выключить
@@ -59,7 +59,7 @@ common:
   by: 'после'
   loading_library: 'Загружается %{provider} %{type}'
   play_state:
-    playing: Играет
+    playing: Воспроизведение
     paused: Приостановлено
     stopped: Остановлено
     idle: Бездействие
@@ -78,7 +78,7 @@ fields:
     all: Все
     thumbnails: Миниатюры
     list: Список
-    as_loaded: Как загружено
+    as_loaded: Время добавления
     name: Имя
     artist: Исполнитель
     album: Альбом
@@ -132,7 +132,7 @@ services:
   restore_defaults: Восстановить значения по умолчанию
   mopidy:
     title: Mopidy
-    local: Local
+    local: Локальные
     adding_uris: 'Добавление %{count} URI(s)'
     adding_uris_broadcast: '%{username} добавил %{count} URI(s)'
     searching: 'Поиск %{provider} %{type}'
@@ -165,8 +165,8 @@ services:
 sidebar:
   now_playing: Сейчас играет
   search: Поиск
-  discover: Обнаружить
-  genre: Жанр / Настроение
+  discover: Найти новое
+  moods: Жанр / Настроение
   featured_playlists: Избранные плейлисты.
   new_releases: Новые релизы
   my_music: Моя музыка
@@ -174,7 +174,7 @@ sidebar:
   artists: Исполнитель
   albums: Альбомы
   tracks: Треки
-  browse: Смотреть
+  browse: Сервисы
   settings: Настройки
   servers: Серверы
   not_connected: '%{name} не подключен'
@@ -185,7 +185,7 @@ context_menu:
     title: Добавить в плейлист
     new_playlist: Создать плейлист
     no_playlists: Нет доступных для записи плейлистов
-  play_next: Играть дальше
+  play_next: Воспроизвести следующим
   play_top_tracks: Воспроизвести лучшие треки
   play_all_tracks: Воспроизвести все треки
   love_track: Любимые треки
@@ -213,7 +213,7 @@ snapcast:
   show_disconnected_clients: Показать отключенные клиенты
   no_connected_clients: Нет подключенных клиентов
   host: Host
-  port: Port
+  port: Порт
   name: Имя
   name_disconnected: Имя (Отключен)
   group: Группа
@@ -229,9 +229,9 @@ snapcast:
     incompatible: ' (требуется при подключении из сеанса браузера HTTPS)'
 authentication:
   popup_blocked: Всплывающее окно заблокировано. Разрешите всплывающие окна и повторите попытку.
-  failed: Авторизация не удалась. %{origin} is not the configured authorization_url.
-  log_out: Log out
-  log_in: Log in
+  failed: Авторизация не удалась. %{origin}, не настроен authorization_url.
+  log_out: Выйти
+  log_in: Войти
 
 
 ##
@@ -255,7 +255,7 @@ album:
     title: О
     published: 'Опубликовано: %{date}'
   tracks:
-    title: Треке
+    title: Треки
     sort:
       disc_track: Номер трека
       name: Имя
@@ -418,14 +418,17 @@ settings:
       upgrade_available: 'Доступно обновление (%{version})'
       upgrade: 'Обновить до %{version}'
       up_to_date: Актуально
-    share_configuration: Поделиться конфигурацией
+    shared_configuration:
+      label: Конфигурация
+      share: Поделиться
+      import: Импортировать
     restart: Перезапустить сервер
     reset: Сброс настроек
   about:
     title: О
     blurb_1: ' это проект с открытым исходным кодом от '
     blurb_2: '. It is provided free and with absolutely no warranty. If you paid someone for this software, please let me know.'
-    donate: Donate
+    donate: Поддержать
     github: GitHub
   pusher_connection_list:
     not_connected: Не подключен
@@ -454,7 +457,7 @@ settings:
     unknown: Неизвестно
     current_user: Текущий пользователь
     authorization: Авторизация
-    refresh_token: RОбновить токен
+    refresh_token: Обновить токен
     authorized: Авторизованный
     read_only: Только для чтения
     unauthorized: Неавторизованный
@@ -563,9 +566,45 @@ modal:
     title: Добро пожаловать в Ирис
     username: Пользователь
   kiosk:
-    title: Сейчас играет
+    title: Воспроизведение
     title_window: '%{name} by %{artist} (сейчас воспроизводится)'
     lyrics: Текст песни
+  shared_config:
+    no_peers: Нет соединений
+    recipients: Получатели
+    configurations: Настройки
+    import_now: Импортировать
+    imported: Импортирование завершено
+    share: Поделиться
+    shared: Настройки предоставлены
+    push:
+      title: Поделиться настройками
+      subtitle: Поделиться авторизациями и настройками интерфейса с другими подключенными пользователями
+    pushed:
+      title: Настройки получены
+      subtitle: Другой пользователь поделилился настройками с вами
+    server:
+      title: Импортировать настройки
+      subtitle: Импортировать авторизации сторонних серверов и настройки интерфейса
+      label: Сервер
+      description: Сохранить на сервер чтобы другие пользователи могли импортировать
+    config:
+      label: Настройки
+      ui:
+        label: Пользовательский интерфейс
+        description: Тема, сортировка, фильтры и т.д.
+      spotify:
+        label: Авторизация Spotify
+        description: 'Вы вошли в систему как %{name}'
+      lastfm:
+        label: Авторизация LastFM
+        description: 'Вы вошли в систему как %{name}'
+      genius:
+        label: Авторизация Genius
+        description: 'Вы вошли в систему как %{name}'
+      snapcast:
+        label: Сервер Snapcast
+        description: Настройки подключения
   share_configuration:
     title: Поделиться конфигурацией
     subtitle: Передайте свои авторизации и настройки интерфейса другому подключенному пользователю