Use native CSS instead of SCSS (#8241)

I was tired of having to handle the SCSS themes differently.
fix https://github.com/FreshRSS/FreshRSS/issues/7611
Follow-up of https://github.com/FreshRSS/FreshRSS/pull/8200
Convert Ansum and Mapco themes from SCSS to native CSS.
The changes are actually quite limited (mostly changing the syntax of the variables and a few other things)
Require support for:
* https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Nesting
* https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/Nesting_selector
* https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix

SCSS and SAAS tools and references are also removed.

Tests welcome.
The styles are left as individual CSS files as designed originally in SCSS. I expect proper HTTP caching and HTTP/2 to be sufficient instead of aggregating back to a single CSS, but might be done in another PR if needed.

At the same time, fixed the fact that we had various whitespace styles in our JSON files, in particular in those themes, sometimes with 2 spaces, or 4 spaces, or tabs. Use tabs everywhere as defined in editorconfig.

I would like to merge this one first to complete https://github.com/FreshRSS/FreshRSS/pull/8230

* RTLCSS stringMap
https://github.com/FreshRSS/FreshRSS/pull/8241#discussion_r2553175514
https://github.com/MohammadYounes/rtlcss/issues/108#issuecomment-347033134

94 files changed, 4220 insertions, 6274 deletions

diff --git a/p/themes/.htaccess b/p/themes/.htaccess
index c095eee60..6c281db42 100644
--- a/p/themes/.htaccess
+++ b/p/themes/.htaccess
@@ -1,6 +1,6 @@
 <IfModule mod_authz_core.c>
 	# Deny files without extension or with specific extensions
-	<FilesMatch "^[^.]+$|\.(md|scss|sh)$">
+	<FilesMatch "^[^.]+$|\.(md|sh)$">
 		Require all denied
 	</FilesMatch>
 </IfModule>
diff --git a/p/themes/Alternative-Dark/metadata.json b/p/themes/Alternative-Dark/metadata.json
index 99f13b549..eee77d154 100644
--- a/p/themes/Alternative-Dark/metadata.json
+++ b/p/themes/Alternative-Dark/metadata.json
@@ -1,8 +1,8 @@
 {
-  "name": "Alternative Dark",
-  "author": "Ghost",
-  "description": "Save my eyes!!!",
-  "version": 0.1,
-  "files": ["_frss.css", "adark.css"],
-  "theme-color": "#171717"
+	"name": "Alternative Dark",
+	"author": "Ghost",
+	"description": "Save my eyes!!!",
+	"version": 0.1,
+	"files": ["_frss.css", "adark.css"],
+	"theme-color": "#171717"
 }
diff --git a/p/themes/Ansum/_components.scss b/p/themes/Ansum/_components.css
index b49a4e2da..08f1fb8ad 100644
--- a/p/themes/Ansum/_components.scss
+++ b/p/themes/Ansum/_components.css
@@ -1,13 +1,7 @@
-@use "sass:string";
-
-@use "mixins";
-
-@use "variables";
-
 /*=== COMPONENTS */
 /*===============*/
 /*=== Forms */
-// parti dans _forms.scss
+/* parti dans _forms.css */
 
 /*=== Horizontal-list */
 .horizontal-list {
@@ -24,14 +18,14 @@
 /*=== Dropdown */
 .dropdown {
 	.dropdown-target:target + .btn {
-		background-color: variables.$grey-medium-light;
+		background-color: var(--grey-medium-light);
 	}
 }
 
 .dropdown-menu {
 	margin: 9px 0 0 0;
 	padding: 0.5rem 0 1rem 0;
-	background: variables.$grey-lighter;
+	background: var(--grey-lighter);
 	font-size: 1rem;
 	border: none;
 	border-radius: 3px;
@@ -48,20 +42,20 @@
 		padding: 1rem 1.5rem;
 		font-weight: bold;
 		text-align: left;
-		color: variables.$grey-dark;
+		color: var(--grey-dark);
 		text-transform: uppercase;
 		letter-spacing: 1px;
 	}
 
 	.item {
 
-		@include mixins.transition(all, 0.075s, ease-in-out);
+		transition: all 0.075s ease-in-out;
 
-		> a,
-		> span,
-		> .as-link {
+		& > a,
+		& > span,
+		& > .as-link {
 			padding: 0 2rem;
-			color: variables.$main-font-color;
+			color: var(--main-font-color);
 			font-size: inherit;
 			line-height: 2.5em;
 
@@ -70,11 +64,11 @@
 			}
 		}
 
-		> a,
-		> .as-link {
+		& > a,
+		& > .as-link {
 			&:not(.addItem):hover {
-				background: variables.$main-first;
-				color: variables.$white;
+				background: var(--main-first);
+				color: var(--white);
 
 				.icon {
 					filter: grayscale(100%) brightness(2.5);
@@ -85,8 +79,8 @@
 		&.dropdown-section {
 			margin-top: 0.75rem;
 
-			~ .dropdown-section {
-				border-top-color: variables.$grey-light;
+			& ~ .dropdown-section {
+				border-top-color: var(--grey-light);
 			}
 
 			.item {
@@ -97,10 +91,10 @@
 		}
 
 		&:not(.addItem) {
-			> a:hover,
+			& > a:hover,
 			button:hover {
-				background: variables.$main-first;
-				color: variables.$white;
+				background: var(--main-first);
+				color: var(--white);
 
 				.icon {
 					filter: brightness(3);
@@ -115,15 +109,15 @@
 			}
 		}
 
-		~ .dropdown-header {
+		& ~ .dropdown-header {
 			margin-top: 0.75rem;
 			padding-top: 1.75rem;
-			border-top-color: variables.$grey-light;
+			border-top-color: var(--grey-light);
 		}
 
 		&.separator {
 			margin-top: 0.75rem;
-			border-top-color: variables.$grey-light;
+			border-top-color: var(--grey-light);
 		}
 	}
 
@@ -138,21 +132,21 @@
 }
 
 .tree .tree-folder .tree-folder-items .dropdown-menu {
-	// to reset the appearance of the dropdown in the case of a dark sidebar
+	/* to reset the appearance of the dropdown in the case of a dark sidebar */
 	.item {
 		padding: 0;
 
 		a,
 		button {
-			color: variables.$main-font-color;
+			color: var(--main-font-color);
 
 			&:hover {
-				color: variables.$white;
+				color: var(--white);
 			}
 		}
 
 		&:hover {
-			background: variables.$main-first;
+			background: var(--main-first);
 		}
 	}
 }
@@ -162,12 +156,12 @@
 
 /*=== Alerts */
 .alert {
-	background: variables.$grey-lighter;
-	color: variables.$grey-dark;
+	background: var(--grey-lighter);
+	color: var(--grey-dark);
 	font-size: 1rem;
-	border: 1px solid variables.$grey-medium;
+	border: 1px solid var(--grey-medium);
 	border-radius: 3px;
-	text-shadow: 0 0 1px variables.$grey-light;
+	text-shadow: 0 0 1px var(--grey-light);
 }
 
 .alert-head {
@@ -180,30 +174,30 @@
 }
 
 .alert-warn {
-	background: variables.$warning-light;
-	color: variables.$warning-text;
-	border: 1px solid string.unquote(variables.$warning-text + '33'); // on ajoute l’opacité à la fin
+	background: var(--warning-light);
+	color: var(--warning-text);
+	border: 1px solid color-mix(in srgb, var(--warning-text) 20%, transparent);
 }
 
 .alert-success {
-	background: variables.$success-light;
-	color: variables.$success-text;
-	border: 1px solid string.unquote(variables.$success-text + '33');
+	background: var(--success-light);
+	color: var(--success-text);
+	border: 1px solid color-mix(in srgb, var(--success-text) 20%, transparent);
 }
 
 .alert-error {
-	background: variables.$alert-light;
-	color: variables.$alert-text;
-	border: 1px solid string.unquote(variables.$alert-text + '33');
+	background: var(--alert-light);
+	color: var(--alert-text);
+	border: 1px solid color-mix(in srgb, var(--alert-text) 20%, transparent);
 }
 
 /*=== Pagination */
 .pagination {
-	background: variables.$grey-light;
-	color: variables.$main-font-color;
+	background: var(--grey-light);
+	color: var(--main-font-color);
 
 	.item a {
-		color: variables.$main-font-color;
+		color: var(--main-font-color);
 	}
 }
 
@@ -214,15 +208,15 @@
 
 /*=== Boxes */
 .box {
-	background: variables.$white;
-	// border: 1px solid #ddd;
+	background: var(--white);
+	/* border: 1px solid #ddd; */
 	border: none;
 	border-radius: 3px;
 	box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.25);
 
 	.box-title {
-		background: variables.$grey-light;
-		color: variables.$main-font-color;
+		background: var(--grey-light);
+		color: var(--main-font-color);
 		border-radius: 2px 2px 0 0;
 	}
 
@@ -231,9 +225,9 @@
 
 		.item {
 			padding: 0.5rem 0;
-			color: variables.$main-font-color;
+			color: var(--main-font-color);
 			font-size: 1rem;
-			border-bottom: 1px solid variables.$grey-light;
+			border-bottom: 1px solid var(--grey-light);
 			line-height: 1.7em;
 		}
 
@@ -253,7 +247,7 @@
 
 		&:hover {
 			border-radius: 2px;
-			background-color: variables.$main-first;
+			background-color: var(--main-first);
 
 			.icon {
 				filter: brightness(3);
@@ -266,13 +260,13 @@
 #bigMarkAsRead.big {
 	text-align: center;
 	text-decoration: none;
-	background: variables.$main-first-light;
-	color: variables.$main-first;
+	background: var(--main-first-light);
+	color: var(--main-first);
 
-	@include mixins.transition(all, 0.15s, ease-in-out);
+	transition: all 0.15s ease-in-out;
 
 	&:hover {
-		background: variables.$main-first;
+		background: var(--main-first);
 		color: #fff;
 
 		.bigTick {
diff --git a/p/themes/Ansum/_components.rtl.css b/p/themes/Ansum/_components.rtl.css
new file mode 100644
index 000000000..cf64f2224
--- /dev/null
+++ b/p/themes/Ansum/_components.rtl.css
@@ -0,0 +1,286 @@
+/*=== COMPONENTS */
+/*===============*/
+/*=== Forms */
+/* parti dans _forms.css */
+
+/*=== Horizontal-list */
+.horizontal-list {
+	padding: 0.1rem 0;
+
+	& > .item {
+		&:first-child {
+			padding-right: 0.5rem;
+		}
+
+	}
+}
+
+/*=== Dropdown */
+.dropdown {
+	.dropdown-target:target + .btn {
+		background-color: var(--grey-medium-light);
+	}
+}
+
+.dropdown-menu {
+	margin: 9px 0 0 0;
+	padding: 0.5rem 0 1rem 0;
+	background: var(--grey-lighter);
+	font-size: 1rem;
+	border: none;
+	border-radius: 3px;
+	box-shadow: 0px 6px 8px 0px rgba(0,0,0,0.35);
+	text-align: right;
+
+	&::after {
+		border: none;
+		left: 17px;
+	}
+
+	.dropdown-header,
+	.dropdown-section .dropdown-section-title {
+		padding: 1rem 1.5rem;
+		font-weight: bold;
+		text-align: right;
+		color: var(--grey-dark);
+		text-transform: uppercase;
+		letter-spacing: 1px;
+	}
+
+	.item {
+
+		transition: all 0.075s ease-in-out;
+
+		& > a,
+		& > span,
+		& > .as-link {
+			padding: 0 2rem;
+			color: var(--main-font-color);
+			font-size: inherit;
+			line-height: 2.5em;
+
+			span.icon {
+				padding: 0 0.25rem !important;
+			}
+		}
+
+		& > a,
+		& > .as-link {
+			&:not(.addItem):hover {
+				background: var(--main-first);
+				color: var(--white);
+
+				.icon {
+					filter: grayscale(100%) brightness(2.5);
+				}
+			}
+		}
+
+		&.dropdown-section {
+			margin-top: 0.75rem;
+
+			& ~ .dropdown-section {
+				border-top-color: var(--grey-light);
+			}
+
+			.item {
+				a, .as-link {
+					padding-right: 2rem;
+				}
+			}
+		}
+
+		&:not(.addItem) {
+			& > a:hover,
+			button:hover {
+				background: var(--main-first);
+				color: var(--white);
+
+				.icon {
+					filter: brightness(3);
+				}
+			}
+		}
+
+		&[aria-checked="true"] {
+			a::before {
+				margin: 0 -14px 0 0;
+				font-weight: bold;
+			}
+		}
+
+		& ~ .dropdown-header {
+			margin-top: 0.75rem;
+			padding-top: 1.75rem;
+			border-top-color: var(--grey-light);
+		}
+
+		&.separator {
+			margin-top: 0.75rem;
+			border-top-color: var(--grey-light);
+		}
+	}
+
+	.input {
+		select, input {
+			margin: 0 auto 5px;
+			padding: 2px 5px;
+			border-radius: 3px;
+		}
+	}
+
+}
+
+.tree .tree-folder .tree-folder-items .dropdown-menu {
+	/* to reset the appearance of the dropdown in the case of a dark sidebar */
+	.item {
+		padding: 0;
+
+		a,
+		button {
+			color: var(--main-font-color);
+
+			&:hover {
+				color: var(--white);
+			}
+		}
+
+		&:hover {
+			background: var(--main-first);
+		}
+	}
+}
+
+
+
+
+/*=== Alerts */
+.alert {
+	background: var(--grey-lighter);
+	color: var(--grey-dark);
+	font-size: 1rem;
+	border: 1px solid var(--grey-medium);
+	border-radius: 3px;
+	text-shadow: 0 0 1px var(--grey-light);
+}
+
+.alert-head {
+	font-size: 1.15em;
+}
+
+.alert > a {
+	text-decoration: underline;
+	color: inherit;
+}
+
+.alert-warn {
+	background: var(--warning-light);
+	color: var(--warning-text);
+	border: 1px solid color-mix(in srgb, var(--warning-text) 20%, transparent);
+}
+
+.alert-success {
+	background: var(--success-light);
+	color: var(--success-text);
+	border: 1px solid color-mix(in srgb, var(--success-text) 20%, transparent);
+}
+
+.alert-error {
+	background: var(--alert-light);
+	color: var(--alert-text);
+	border: 1px solid color-mix(in srgb, var(--alert-text) 20%, transparent);
+}
+
+/*=== Pagination */
+.pagination {
+	background: var(--grey-light);
+	color: var(--main-font-color);
+
+	.item a {
+		color: var(--main-font-color);
+	}
+}
+
+#load_more.loading,
+#load_more.loading:hover {
+	background: url("loader.gif") center center no-repeat #34495e;
+}
+
+/*=== Boxes */
+.box {
+	background: var(--white);
+	/* border: 1px solid #ddd; */
+	border: none;
+	border-radius: 3px;
+	box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.25);
+
+	.box-title {
+		background: var(--grey-light);
+		color: var(--main-font-color);
+		border-radius: 2px 2px 0 0;
+	}
+
+	.box-content {
+		padding-right: 30px;
+
+		.item {
+			padding: 0.5rem 0;
+			color: var(--main-font-color);
+			font-size: 1rem;
+			border-bottom: 1px solid var(--grey-light);
+			line-height: 1.7em;
+		}
+
+		.item:last-child {
+			border-bottom: none;
+		}
+	}
+
+	.configure {
+		margin-left: 0.5rem;
+		padding: 0.25rem;
+		border-radius: 3px;
+
+		.icon {
+			vertical-align: middle;
+		}
+
+		&:hover {
+			border-radius: 2px;
+			background-color: var(--main-first);
+
+			.icon {
+				filter: brightness(3);
+			}
+		}
+	}
+}
+
+/*=== "Load more" part */
+#bigMarkAsRead.big {
+	text-align: center;
+	text-decoration: none;
+	background: var(--main-first-light);
+	color: var(--main-first);
+
+	transition: all 0.15s ease-in-out;
+
+	&:hover {
+		background: var(--main-first);
+		color: #fff;
+
+		.bigTick {
+			filter: brightness(7);
+		}
+	}
+
+	.bigTick {
+		margin: 0.5rem 0;
+		background: url(icons/tick-color.svg) center no-repeat;
+		display: inline-block;
+		width: 64px;
+		height: 64px;
+		text-indent: -9999px;
+		white-space: nowrap;
+	}
+}
diff --git a/p/themes/Ansum/_configuration.scss b/p/themes/Ansum/_configuration.css
index 8f77cc5c3..a33afc6d1 100644
--- a/p/themes/Ansum/_configuration.scss
+++ b/p/themes/Ansum/_configuration.css
@@ -1,11 +1,9 @@
-@use "variables";
-
 /*=== Configuration pages */
 .post {
 	font-size: 1rem;
 
 	h1, h2 {
-		color: variables.$main-font-color;
+		color: var(--main-font-color);
 		font-size: 2rem;
 		margin-top: 1.75rem;
 		font-weight: 300;
@@ -17,14 +15,14 @@
 	}
 
 	a[href="./"] {
-		// This is the "Back to your feeds" button.
+		/* This is the "Back to your feeds" button.*/
 		margin: 0;
 		padding: 0.75rem 1.5rem;
-		background: variables.$grey-lighter;
+		background: var(--grey-lighter);
 		display: inline-block;
-		color: variables.$grey-dark;
+		color: var(--grey-dark);
 		font-size: 1rem;
-		border: 1px solid variables.$grey-medium-light;
+		border: 1px solid var(--grey-medium-light);
 		border-radius: 5px;
 		min-width: 15px;
 		line-height: 25px;
@@ -33,9 +31,9 @@
 		overflow: hidden;
 
 		&:hover {
-			background: variables.$main-first;
+			background: var(--main-first);
 			color: white;
-			border: 1px solid variables.$main-first;
+			border: 1px solid var(--main-first);
 			text-decoration: none;
 		}
 	}
diff --git a/p/themes/Ansum/_configuration.rtl.css b/p/themes/Ansum/_configuration.rtl.css
new file mode 100644
index 000000000..b6aa83823
--- /dev/null
+++ b/p/themes/Ansum/_configuration.rtl.css
@@ -0,0 +1,64 @@
+/*=== Configuration pages */
+.post {
+	font-size: 1rem;
+
+	h1, h2 {
+		color: var(--main-font-color);
+		font-size: 2rem;
+		margin-top: 1.75rem;
+		font-weight: 300;
+		line-height: 1.2em;
+	}
+
+	h2 {
+		font-size: 1.5rem;
+	}
+
+	a[href="./"] {
+		/* This is the "Back to your feeds" button.*/
+		margin: 0;
+		padding: 0.75rem 1.5rem;
+		background: var(--grey-lighter);
+		display: inline-block;
+		color: var(--grey-dark);
+		font-size: 1rem;
+		border: 1px solid var(--grey-medium-light);
+		border-radius: 5px;
+		min-width: 15px;
+		line-height: 25px;
+		vertical-align: middle;
+		cursor: pointer;
+		overflow: hidden;
+
+		&:hover {
+			background: var(--main-first);
+			color: white;
+			border: 1px solid var(--main-first);
+			text-decoration: none;
+		}
+	}
+
+}
+
+
+
+#slider {
+	border-right: none;
+	box-shadow: 0px 6px 8px 0px rgba(0,0,0,0.35);
+}
+
+.theme-preview-list {
+	.preview-container {
+		.properties {
+			padding: 1rem;
+			background: rgba(0, 0, 0, 0.75);
+			color: white;
+			border: 0;
+
+			.page-number {
+				left: 1rem;
+				top: 1rem;
+			}
+		}
+	}
+}
diff --git a/p/themes/Ansum/_divers.scss b/p/themes/Ansum/_divers.css
index c6fb1f283..c6fb1f283 100644
--- a/p/themes/Ansum/_divers.scss
+++ b/p/themes/Ansum/_divers.css
diff --git a/p/themes/Ansum/_divers.rtl.css b/p/themes/Ansum/_divers.rtl.css
new file mode 100644
index 000000000..bc8e4c469
--- /dev/null
+++ b/p/themes/Ansum/_divers.rtl.css
@@ -0,0 +1,14 @@
+/*=== DIVERS */
+/*===========*/
+.aside.aside_feed .nav-form input,
+.aside.aside_feed .nav-form select {
+	width: 140px;
+}
+
+.aside.aside_feed .nav-form .dropdown .dropdown-menu {
+	left: -20px;
+}
+
+.aside.aside_feed .nav-form .dropdown .dropdown-menu::after {
+	left: 33px;
+}
diff --git a/p/themes/Ansum/_fonts.scss b/p/themes/Ansum/_fonts.css
index da1cf4ac7..da1cf4ac7 100644
--- a/p/themes/Ansum/_fonts.scss
+++ b/p/themes/Ansum/_fonts.css
diff --git a/p/themes/Ansum/_fonts.rtl.css b/p/themes/Ansum/_fonts.rtl.css
new file mode 100644
index 000000000..da1cf4ac7
--- /dev/null
+++ b/p/themes/Ansum/_fonts.rtl.css
@@ -0,0 +1,63 @@
+@font-face {
+	font-family: "lato";
+	font-style: normal;
+	font-stretch: normal;
+	font-weight: 400;
+	src: local("Lato"), url("../fonts/LatoLatin-Regular.woff") format("woff");
+}
+
+@font-face {
+	font-family: "lato";
+	font-style: italic;
+	font-stretch: normal;
+	font-weight: 400;
+	src: local("Lato"), url("../fonts/LatoLatin-Italic.woff") format("woff");
+}
+
+@font-face {
+	font-family: "lato";
+	font-style: normal;
+	font-stretch: normal;
+	font-weight: 700;
+	src: local("Lato"), url("../fonts/LatoLatin-Bold.woff") format("woff");
+}
+
+@font-face {
+	font-family: "lato";
+	font-style: italic;
+	font-stretch: normal;
+	font-weight: 700;
+	src: local("Lato"), url("../fonts/LatoLatin-BoldItalic.woff") format("woff");
+}
+
+@font-face {
+	font-family: "spectral";
+	font-style: normal;
+	font-stretch: normal;
+	font-weight: 400;
+	src: local("Spectral"), url("../fonts/Spectral-Regular.woff") format("woff");
+}
+
+@font-face {
+	font-family: "spectral";
+	font-style: italic;
+	font-stretch: normal;
+	font-weight: 400;
+	src: local("Spectral"), url("../fonts/Spectral-Italic.woff") format("woff");
+}
+
+@font-face {
+	font-family: "spectral";
+	font-style: normal;
+	font-stretch: normal;
+	font-weight: 700;
+	src: local("Spectral"), url("../fonts/Spectral-Bold.woff") format("woff");
+}
+
+@font-face {
+	font-family: "spectral";
+	font-style: italic;
+	font-stretch: normal;
+	font-weight: 700;
+	src: local("Spectral"), url("../fonts/Spectral-BoldItalic.woff") format("woff");
+}
diff --git a/p/themes/Mapco/_forms.scss b/p/themes/Ansum/_forms.css
index 1a1277b36..c66666074 100644
--- a/p/themes/Mapco/_forms.scss
+++ b/p/themes/Ansum/_forms.css
@@ -1,13 +1,9 @@
-@use "mixins";
-
-@use "variables";
-
 /* btns */
 .btn {
 	margin: 0;
 	padding: 0.5rem 1.5rem;
-	background: variables.$grey-lighter;
-	color: variables.$grey-dark;
+	background: var(--grey-lighter);
+	color: var(--grey-dark);
 	font-size: 1rem;
 	border: none;
 	border-radius: 5px;
@@ -16,15 +12,15 @@
 	line-height: 25px;
 	vertical-align: middle;
 
-	@include mixins.transition(all, 0.15s, ease-in-out);
+	transition: all 0.15s ease-in-out;
 
 	&.btn-important {
-		background: variables.$main-first;
-		color: variables.$white;
+		background: var(--main-first);
+		color: var(--white);
 
 		&:hover,
 		&:active {
-			background: variables.$main-first-alt;
+			background: var(--main-first-alt);
 		}
 
 		img {
@@ -34,12 +30,12 @@
 
 
 	&.btn-attention {
-		background: variables.$alert-bg;
+		background: var(--alert-bg);
 		color: #fff;
 
 		&:hover,
 		&:active {
-			background: variables.$alert-text;
+			background: var(--alert-text);
 		}
 	}
 
@@ -65,7 +61,7 @@ label {
 	min-height: 25px;
 	padding: 5px 0;
 	cursor: pointer;
-	color: variables.$grey-dark;
+	color: var(--grey-dark);
 }
 
 textarea {
@@ -74,11 +70,11 @@ textarea {
 
 input, select, textarea, button {
 	padding: 5px 10px;
-	background: variables.$white;
-	color: variables.$grey-dark;
+	background: var(--white);
+	color: var(--grey-dark);
 	font-family: "lato", "Helvetica", "Arial", sans-serif;
 	font-size: 1rem;
-	border: 1px solid variables.$grey-light;
+	border: 1px solid var(--grey-light);
 	border-radius: 2px;
 	min-height: 25px;
 	line-height: 25px;
@@ -94,18 +90,19 @@ option {
 }
 
 input:focus, select:focus, textarea:focus {
-	color: variables.$main-font-color;
-	border-color: variables.$main-first;
+	color: var(--main-font-color);
+	border-color: var(--main-first);
 }
 
 input:invalid, select:invalid {
-	color: variables.$alert-bg;
-	border-color: variables.$alert-bg;
+	color: var(--alert-bg);
+	border-color: var(--alert-bg);
 	box-shadow: none;
 }
 
 input:disabled, select:disabled {
-	background: variables.$grey-light;
+	color: var(--grey-medium-dark);
+	border-color: var(--grey-medium-dark);
 }
 
 .form-group {
diff --git a/p/themes/Ansum/_forms.rtl.css b/p/themes/Ansum/_forms.rtl.css
new file mode 100644
index 000000000..7ed5e735e
--- /dev/null
+++ b/p/themes/Ansum/_forms.rtl.css
@@ -0,0 +1,141 @@
+/* btns */
+.btn {
+	margin: 0;
+	padding: 0.5rem 1.5rem;
+	background: var(--grey-lighter);
+	color: var(--grey-dark);
+	font-size: 1rem;
+	border: none;
+	border-radius: 5px;
+	min-height: 25px;
+	min-width: 15px;
+	line-height: 25px;
+	vertical-align: middle;
+
+	transition: all 0.15s ease-in-out;
+
+	&.btn-important {
+		background: var(--main-first);
+		color: var(--white);
+
+		&:hover,
+		&:active {
+			background: var(--main-first-alt);
+		}
+
+		img {
+			filter: brightness(3);
+		}
+	}
+
+
+	&.btn-attention {
+		background: var(--alert-bg);
+		color: #fff;
+
+		&:hover,
+		&:active {
+			background: var(--alert-text);
+		}
+	}
+
+	&:hover {
+		text-decoration: none;
+	}
+}
+
+/*=== Forms */
+legend {
+	margin: 2rem 0 1rem 0;
+	padding: 0;
+	display: inline-block;
+	width: auto;
+	font-size: 1rem;
+	clear: both;
+	text-transform: uppercase;
+	letter-spacing: 1px;
+	font-weight: 700;
+}
+
+label {
+	min-height: 25px;
+	padding: 5px 0;
+	cursor: pointer;
+	color: var(--grey-dark);
+}
+
+textarea {
+	max-width: 100%;
+}
+
+input, select, textarea, button {
+	padding: 5px 10px;
+	background: var(--white);
+	color: var(--grey-dark);
+	font-family: "lato", "Helvetica", "Arial", sans-serif;
+	font-size: 1rem;
+	border: 1px solid var(--grey-light);
+	border-radius: 2px;
+	min-height: 25px;
+	line-height: 25px;
+}
+
+select {
+	padding-top: 9px;
+	padding-bottom: 9px;
+}
+
+option {
+	padding: 0 .5em;
+}
+
+input:focus, select:focus, textarea:focus {
+	color: var(--main-font-color);
+	border-color: var(--main-first);
+}
+
+input:invalid, select:invalid {
+	color: var(--alert-bg);
+	border-color: var(--alert-bg);
+	box-shadow: none;
+}
+
+input:disabled, select:disabled {
+	color: var(--grey-medium-dark);
+	border-color: var(--grey-medium-dark);
+}
+
+.form-group {
+	padding: 5px;
+	border-radius: 3px;
+
+	&::after {
+		display: block;
+		clear: both;
+	}
+
+	.group-name {
+		padding: 10px 0;
+	}
+
+	.group-controls {
+		min-height: 25px;
+		padding: 5px 0;
+	}
+
+	.group-controls .control {
+		line-height: 2.0em;
+	}
+
+	&.form-actions {
+		margin: 15px 0 25px;
+		padding: 5px 0;
+	}
+
+	&.form-actions .btn {
+		margin: 0 0 0 0.5rem;
+	}
+}
+
+
+
diff --git a/p/themes/Mapco/_global-view.scss b/p/themes/Ansum/_global-view.css
index e192e2cd8..8fdfda37f 100644
--- a/p/themes/Mapco/_global-view.scss
+++ b/p/themes/Ansum/_global-view.css
@@ -1,5 +1,3 @@
-@use "variables";
-
 /*=== GLOBAL VIEW */
 /*================*/
 #stream {
@@ -13,7 +11,7 @@
 			background: none;
 
 			a.title {
-				color: variables.$grey-dark;
+				color: var(--grey-dark);
 				font-size: 1rem;
 				font-weight: normal;
 				text-decoration: none;
@@ -24,7 +22,7 @@
 				&:not([data-unread="0"])::after {
 					margin: -0.5rem 1rem 0 0;
 					padding: 0 0.75rem;
-					background: variables.$grey-light;
+					background: var(--grey-light);
 					border-radius: 12px;
 					position: absolute;
 					top: 1.75rem;
@@ -34,7 +32,7 @@
 				}
 
 				&:hover {
-					color: variables.$main-first;
+					color: var(--main-first);
 				}
 			}
 		}
@@ -42,11 +40,11 @@
 		.box-content {
 			.item.feed {
 				a {
-					color: variables.$main-font-color;
+					color: var(--main-font-color);
 					font-weight: 400;
 
 					&:hover {
-						color: variables.$main-first;
+						color: var(--main-first);
 						text-decoration: none;
 					}
 				}
@@ -56,7 +54,7 @@
 }
 
 
-// the panel that appears in overlay to display the flows
+/* the panel that appears in overlay to display the flows*/
 #overlay {
 	background: rgba(0, 0, 0, 0.65);
 }
diff --git a/p/themes/Ansum/_global-view.rtl.css b/p/themes/Ansum/_global-view.rtl.css
new file mode 100644
index 000000000..3a0f38ae2
--- /dev/null
+++ b/p/themes/Ansum/_global-view.rtl.css
@@ -0,0 +1,68 @@
+/*=== GLOBAL VIEW */
+/*================*/
+#stream {
+	.box.category {
+		&:not([data-unread="0"]) .box-title .title {
+			font-weight: bold;
+		}
+
+		.box-title {
+			padding: 1.5rem;
+			background: none;
+
+			a.title {
+				color: var(--grey-dark);
+				font-size: 1rem;
+				font-weight: normal;
+				text-decoration: none;
+				text-align: right;
+				text-transform: uppercase;
+				letter-spacing: 1px;
+
+				&:not([data-unread="0"])::after {
+					margin: -0.5rem 0 0 1rem;
+					padding: 0 0.75rem;
+					background: var(--grey-light);
+					border-radius: 12px;
+					position: absolute;
+					top: 1.75rem;
+					left: 0;
+					line-height: 1.5rem;
+					text-align: center;
+				}
+
+				&:hover {
+					color: var(--main-first);
+				}
+			}
+		}
+
+		.box-content {
+			.item.feed {
+				a {
+					color: var(--main-font-color);
+					font-weight: 400;
+
+					&:hover {
+						color: var(--main-first);
+						text-decoration: none;
+					}
+				}
+			}
+		}
+	}
+}
+
+
+/* the panel that appears in overlay to display the flows*/
+#overlay {
+	background: rgba(0, 0, 0, 0.65);
+}
+
+#panel {
+	top: 3rem;
+	left: 3rem;
+	bottom: 3rem;
+	right: 3rem;
+	border-radius: 3px;
+}
diff --git a/p/themes/Ansum/_layout.scss b/p/themes/Ansum/_layout.css
index 97de599b7..a48c5ee94 100644
--- a/p/themes/Ansum/_layout.scss
+++ b/p/themes/Ansum/_layout.css
@@ -1,12 +1,8 @@
-@use "mixins";
-
-@use "variables";
-
 /*=== STRUCTURE */
 /*===============*/
 /*=== Header */
 .header {
-	background: variables.$sid-bg;
+	background: var(--sid-bg);
 
 	.item {
 		vertical-align: middle;
@@ -30,26 +26,26 @@
 		&.search {
 			input {
 				width: 350px;
-				color: variables.$sid-font-color;
+				color: var(--sid-font-color);
 				border: none;
 				border-radius: 2px 0 0 2px;
-				background-color: variables.$sid-bg-alt;
+				background-color: var(--sid-bg-alt);
 
-				@include mixins.transition(all, 0.15s, ease-in-out);
+				transition: all 0.15s ease-in-out;
 
 				&:hover {
-					background-color: variables.$sid-bg-dark;
+					background-color: var(--sid-bg-dark);
 				}
 
 				&:focus {
-					color: variables.$grey-dark;
-					background-color: variables.$white;
+					color: var(--grey-dark);
+					background-color: var(--white);
 				}
 			}
 
 			input:focus ~ .btn,
 			input:hover ~ .btn {
-				background-color: variables.$main-first;
+				background-color: var(--main-first);
 
 				.icon {
 					filter: brightness(3);
@@ -59,7 +55,7 @@
 			.btn {
 				width: 3rem;
 				border-radius: 0 2px 2px 0;
-				background-color: variables.$sid-bg-alt;
+				background-color: var(--sid-bg-alt);
 				border-left-width: 0;
 				min-height: 35px;
 
@@ -68,7 +64,7 @@
 				}
 
 				&:hover {
-					background-color: variables.$main-first-alt;
+					background-color: var(--main-first-alt);
 
 					.icon {
 						filter: brightness(3);
@@ -95,13 +91,13 @@
 
 /*=== Prompt (centered) */
 main.prompt {
-	background: variables.$grey-light;
+	background: var(--grey-light);
 	border-radius: 5px;
 }
 
 /*=== New article notification */
 #new-article {
-	background: variables.$main-first;
+	background: var(--main-first);
 	font-size: 1rem;
 	text-align: center;
 }
@@ -109,18 +105,18 @@ main.prompt {
 #new-article > a {
 	padding: calc(0.75rem + var(--frss-padding-top-bottom)) 1rem;
 	font-weight: bold;
-	color: variables.$white;
+	color: var(--white);
 }
 
 #new-article > a:hover {
 	text-decoration: none;
-	background: variables.$main-first-alt;
+	background: var(--main-first-alt);
 }
 
 /*=== Transition indication, e.g. day */
 .transition {
 	padding: 1rem 0 0 1.25rem;
-	color: variables.$light-font-color;
+	color: var(--light-font-color);
 	font-size: 0.875rem;
 	font-weight: 700;
 	line-height: 3em;
@@ -129,7 +125,7 @@ main.prompt {
 
 	.name {
 		padding: 0 1rem 0 1rem;
-		color: variables.$main-font-color;
+		color: var(--main-font-color);
 		font-size: 0.875rem;
 		position: relative;
 		left: 0;
@@ -140,18 +136,18 @@ main.prompt {
 .btn {
 	border-left-width: 0;
 	padding: 0.5rem 1rem;
-	background-color: variables.$grey-light;
+	background-color: var(--grey-light);
 	background-position: center;
 	background-repeat: no-repeat;
 
-	@include mixins.transition(all, 0.15s, ease-in-out);
+	transition: all 0.15s ease-in-out;
 
 	&:hover {
-		background-color: variables.$grey-medium-light;
+		background-color: var(--grey-medium-light);
 	}
 
 	&.active {
-		background-color: variables.$main-first;
+		background-color: var(--main-first);
 	}
 }
 
@@ -163,12 +159,12 @@ main.prompt {
 	.btn {
 		border-left-width: 0;
 		padding: 0.5rem 1rem;
-		background-color: variables.$grey-lighter;
+		background-color: var(--grey-lighter);
 		background-position: center;
 		background-repeat: no-repeat;
 
 		&:hover {
-			background-color: variables.$grey-medium-light;
+			background-color: var(--grey-medium-light);
 		}
 	}
 
@@ -177,18 +173,18 @@ main.prompt {
 		.btn {
 			border-left-width: 0;
 			padding: 0.5rem 1rem;
-			background-color: variables.$grey-lighter;
+			background-color: var(--grey-lighter);
 			background-position: center;
 			background-repeat: no-repeat;
 
-			@include mixins.transition(all, 0.15s, ease-in-out);
+			transition: all 0.15s ease-in-out;
 
 			&:hover {
-				background-color: variables.$grey-medium-light;
+				background-color: var(--grey-medium-light);
 			}
 
 			&.active {
-				background-color: variables.$main-first;
+				background-color: var(--main-first);
 
 				.icon {
 					filter: brightness(5);
@@ -197,13 +193,13 @@ main.prompt {
 
 			&.read_all {
 				padding: 5px 16px;
-				color: variables.$main-font-color;
-				background-color: variables.$grey-lighter;
+				color: var(--main-font-color);
+				background-color: var(--grey-lighter);
 
-				@include mixins.transition(all, 0.15s, ease-in-out);
+				transition: all 0.15s ease-in-out;
 
 				&:hover {
-					background-color: variables.$grey-medium-light;
+					background-color: var(--grey-medium-light);
 				}
 			}
 		}
@@ -243,19 +239,19 @@ main.prompt {
 
 	h1.title, h1 {
 		a {
-			color: variables.$main-font-color;
+			color: var(--main-font-color);
 			font-family: "spectral", serif;
 			font-size: 2rem;
 
 			&:hover {
-				color: variables.$main-first;
+				color: var(--main-first);
 				text-decoration: none;
 			}
 		}
 	}
 
 	.author {
-		color: variables.$light-font-color;
+		color: var(--light-font-color);
 		font-size: 1.125rem;
 	}
 
@@ -266,38 +262,38 @@ main.prompt {
 
 	.content hr {
 		margin: 30px 10px;
-		background: variables.$grey-medium-light;
+		background: var(--grey-medium-light);
 		height: 1px;
 		border: 0;
 		box-shadow: 0 2px 5px #ccc;
 	}
 
 	pre {
-		background: variables.$main-first-darker;
-		color: variables.$white;
+		background: var(--main-first-darker);
+		color: var(--white);
 		border-radius: 3px;
 
 		code {
 			background: transparent;
-			color: variables.$white;
+			color: var(--white);
 			border: none;
 		}
 	}
 
 	code {
-		background: variables.$grey-lighter;
-		border-color: variables.$grey-light;
+		background: var(--grey-lighter);
+		border-color: var(--grey-light);
 		border-radius: 3px;
 	}
 
 	blockquote {
 		margin: 0;
 		padding: 5px 20px;
-		background: variables.$grey-lighter;
+		background: var(--grey-lighter);
 		display: block;
-		color: variables.$main-font-color;
-		border-top: 1px solid variables.$grey-medium-light;
-		border-bottom: 1px solid variables.$grey-medium-light;
+		color: var(--main-font-color);
+		border-top: 1px solid var(--grey-medium-light);
+		border-bottom: 1px solid var(--grey-medium-light);
 
 		p {
 			margin: 0;
@@ -309,10 +305,10 @@ main.prompt {
 /*=== Notification and actualize notification */
 .notification {
 	padding: 1rem 0;
-	background: variables.$grey-medium-light;
+	background: var(--grey-medium-light);
 	width: 100%;
 	height: 3rem;
-	color: variables.$grey-dark;
+	color: var(--grey-dark);
 	font-size: 1em;
 	border: none;
 	position: fixed;
@@ -333,13 +329,13 @@ main.prompt {
 	}
 
 	&.good {
-		background: variables.$success-bg;
-		color: variables.$white;
+		background: var(--success-bg);
+		color: var(--white);
 	}
 
 	&.bad {
-		background: variables.$alert-bg;
-		color: variables.$white;
+		background: var(--alert-bg);
+		color: var(--white);
 	}
 
 	.close {
@@ -349,11 +345,11 @@ main.prompt {
 	}
 
 	&.good .close:hover {
-		background: variables.$success-text;
+		background: var(--success-text);
 	}
 
 	&.bad .close:hover {
-		background: variables.$alert-text;
+		background: var(--alert-text);
 	}
 
 	&#actualizeProgress {
@@ -369,5 +365,5 @@ main.prompt {
 
 /*=== Navigation menu (for articles) */
 #nav_entries {
-	background: variables.$sid-bg;
+	background: var(--sid-bg);
 }
diff --git a/p/themes/Ansum/_layout.rtl.css b/p/themes/Ansum/_layout.rtl.css
new file mode 100644
index 000000000..4957d6a1f
--- /dev/null
+++ b/p/themes/Ansum/_layout.rtl.css
@@ -0,0 +1,369 @@
+/*=== STRUCTURE */
+/*===============*/
+/*=== Header */
+.header {
+	background: var(--sid-bg);
+
+	.item {
+		vertical-align: middle;
+
+		&.title {
+			a {
+				padding: 0.5rem 1rem;
+
+				.logo {
+					filter: invert(80%);
+				}
+
+				&:hover {
+					.logo {
+						filter: invert(80%) opacity(80%);
+					}
+				}
+			}
+		}
+
+		&.search {
+			input {
+				width: 350px;
+				color: var(--sid-font-color);
+				border: none;
+				border-radius: 0 2px 2px 0;
+				background-color: var(--sid-bg-alt);
+
+				transition: all 0.15s ease-in-out;
+
+				&:hover {
+					background-color: var(--sid-bg-dark);
+				}
+
+				&:focus {
+					color: var(--grey-dark);
+					background-color: var(--white);
+				}
+			}
+
+			input:focus ~ .btn,
+			input:hover ~ .btn {
+				background-color: var(--main-first);
+
+				.icon {
+					filter: brightness(3);
+				}
+			}
+
+			.btn {
+				width: 3rem;
+				border-radius: 2px 0 0 2px;
+				background-color: var(--sid-bg-alt);
+				border-right-width: 0;
+				min-height: 35px;
+
+				.icon {
+					filter: invert(49%) sepia(13%) saturate(2426%) hue-rotate(346deg) brightness(99%) contrast(95%);
+				}
+
+				&:hover {
+					background-color: var(--main-first-alt);
+
+					.icon {
+						filter: brightness(3);
+					}
+				}
+			}
+		}
+
+		&.configure {
+			text-align: center;
+
+			.btn {
+				padding: 0.25rem 1rem;
+				background-color: transparent;
+			}
+		}
+	}
+}
+
+/*=== Body */
+#global {
+	height: calc(100vh - (calc(3rem + 2 * var(--frss-padding-top-bottom))));
+}
+
+/*=== Prompt (centered) */
+main.prompt {
+	background: var(--grey-light);
+	border-radius: 5px;
+}
+
+/*=== New article notification */
+#new-article {
+	background: var(--main-first);
+	font-size: 1rem;
+	text-align: center;
+}
+
+#new-article > a {
+	padding: calc(0.75rem + var(--frss-padding-top-bottom)) 1rem;
+	font-weight: bold;
+	color: var(--white);
+}
+
+#new-article > a:hover {
+	text-decoration: none;
+	background: var(--main-first-alt);
+}
+
+/*=== Transition indication, e.g. day */
+.transition {
+	padding: 1rem 1.25rem 0 0;
+	color: var(--light-font-color);
+	font-size: 0.875rem;
+	font-weight: 700;
+	line-height: 3em;
+	letter-spacing: 1px;
+	text-transform: uppercase;
+
+	.name {
+		padding: 0 1rem 0 1rem;
+		color: var(--main-font-color);
+		font-size: 0.875rem;
+		position: relative;
+		right: 0;
+		text-transform: uppercase;
+	}
+}
+
+.btn {
+	border-right-width: 0;
+	padding: 0.5rem 1rem;
+	background-color: var(--grey-light);
+	background-position: center;
+	background-repeat: no-repeat;
+
+	transition: all 0.15s ease-in-out;
+
+	&:hover {
+		background-color: var(--grey-medium-light);
+	}
+
+	&.active {
+		background-color: var(--main-first);
+	}
+}
+
+/*=== Index menu */
+.nav_menu {
+	text-align: center;
+	padding: 5px 0;
+
+	.btn {
+		border-right-width: 0;
+		padding: 0.5rem 1rem;
+		background-color: var(--grey-lighter);
+		background-position: center;
+		background-repeat: no-repeat;
+
+		&:hover {
+			background-color: var(--grey-medium-light);
+		}
+	}
+
+	.stick,
+	.group {
+		.btn {
+			border-right-width: 0;
+			padding: 0.5rem 1rem;
+			background-color: var(--grey-lighter);
+			background-position: center;
+			background-repeat: no-repeat;
+
+			transition: all 0.15s ease-in-out;
+
+			&:hover {
+				background-color: var(--grey-medium-light);
+			}
+
+			&.active {
+				background-color: var(--main-first);
+
+				.icon {
+					filter: brightness(5);
+				}
+			}
+
+			&.read_all {
+				padding: 5px 16px;
+				color: var(--main-font-color);
+				background-color: var(--grey-lighter);
+
+				transition: all 0.15s ease-in-out;
+
+				&:hover {
+					background-color: var(--grey-medium-light);
+				}
+			}
+		}
+
+		.dropdown:not(#dropdown-search-wrapper) {
+			a.dropdown-toggle {
+				border-right-width: 0;
+				background-image: url(icons/more.svg);
+
+				.icon {
+					display: none;
+				}
+			}
+		}
+
+		#dropdown-search-wrapper.dropdown {
+			a.dropdown-toggle {
+				border-right-width: 0;
+			}
+		}
+	}
+}
+
+
+#dropdown-query ~ .dropdown-menu .dropdown-header .icon {
+	vertical-align: middle;
+	border-radius: 3px;
+}
+
+
+/*=== Content of feed articles */
+.content, .content_thin {
+	padding: 20px 10px;
+
+	font-size: 1.125rem;
+	line-height: 1.8rem;
+
+	h1.title, h1 {
+		a {
+			color: var(--main-font-color);
+			font-family: "spectral", serif;
+			font-size: 2rem;
+
+			&:hover {
+				color: var(--main-first);
+				text-decoration: none;
+			}
+		}
+	}
+
+	.author {
+		color: var(--light-font-color);
+		font-size: 1.125rem;
+	}
+
+	p, ul {
+		font-size: 1.125rem;
+		line-height: 1.8rem;
+	}
+
+	.content hr {
+		margin: 30px 10px;
+		background: var(--grey-medium-light);
+		height: 1px;
+		border: 0;
+		box-shadow: 0 2px 5px #ccc;
+	}
+
+	pre {
+		background: var(--main-first-darker);
+		color: var(--white);
+		border-radius: 3px;
+
+		code {
+			background: transparent;
+			color: var(--white);
+			border: none;
+		}
+	}
+
+	code {
+		background: var(--grey-lighter);
+		border-color: var(--grey-light);
+		border-radius: 3px;
+	}
+
+	blockquote {
+		margin: 0;
+		padding: 5px 20px;
+		background: var(--grey-lighter);
+		display: block;
+		color: var(--main-font-color);
+		border-top: 1px solid var(--grey-medium-light);
+		border-bottom: 1px solid var(--grey-medium-light);
+
+		p {
+			margin: 0;
+		}
+	}
+}
+
+
+/*=== Notification and actualize notification */
+.notification {
+	padding: 1rem 0;
+	background: var(--grey-medium-light);
+	width: 100%;
+	height: 3rem;
+	color: var(--grey-dark);
+	font-size: 1em;
+	border: none;
+	position: fixed;
+	top: auto;
+	bottom: 0;
+	right: 0;
+	left: 0;
+	text-align: center;
+	vertical-align: middle;
+
+	a {
+		color: #000;
+	}
+
+	.msg {
+		display: inline-block;
+		font-size: 1rem;
+	}
+
+	&.good {
+		background: var(--success-bg);
+		color: var(--white);
+	}
+
+	&.bad {
+		background: var(--alert-bg);
+		color: var(--white);
+	}
+
+	.close {
+		.icon {
+			filter: brightness(3);
+		}
+	}
+
+	&.good .close:hover {
+		background: var(--success-text);
+	}
+
+	&.bad .close:hover {
+		background: var(--alert-text);
+	}
+
+	&#actualizeProgress {
+		br {
+			display: none;
+		}
+
+		.title {
+			margin: 0 2rem;
+		}
+	}
+}
+
+/*=== Navigation menu (for articles) */
+#nav_entries {
+	background: var(--sid-bg);
+}
diff --git a/p/themes/Ansum/_list-view.css b/p/themes/Ansum/_list-view.css
new file mode 100644
index 000000000..477916601
--- /dev/null
+++ b/p/themes/Ansum/_list-view.css
@@ -0,0 +1,94 @@
+/*=== Feed articles */
+.flux {
+	/* border-left: 2px solid #ecf0f1;*/
+	background: var(--white);
+
+	transition: all 0.15s ease-in-out;
+
+	.flux_header {
+		&:hover {
+			background: var(--grey-lighter);
+
+			&:not(.current):hover .item .title {
+				background: var(--grey-lighter);
+			}
+		}
+	}
+
+	&.current {
+		background: var(--white);
+		border-left-color: var(--main-first);
+
+		&:not(.active) {
+			background: var(--grey-lighter);
+		}
+	}
+
+	&.not_read:not(.current) {
+		background: var(--unread-bg);
+
+		&:hover .item .title {
+			background: var(--unread-bg);
+		}
+	}
+
+	&.not_read {
+		.item .title {
+			a {
+				color: var(--unread-font-color);
+			}
+		}
+
+		.item.website {
+			a {
+				color: var(--unread-font-color);
+			}
+		}
+
+		.item .date {
+			color: color-mix(in srgb, var(--unread-font-color) 50%, transparent);
+		}
+	}
+
+	&.favorite {
+		border-left-color: var(--fav-bg);
+
+		transition: all 0.15s ease-in-out;
+	}
+
+	&.favorite:not(.current) {
+		background: var(--fav-light);
+
+		&:hover .item .title {
+			background: var(--fav-light);
+		}
+	}
+
+	.website {
+		a {
+			color: var(--main-font-color);
+			opacity: 0.75;
+		}
+	}
+
+	.flux_header .date,
+	.flux_content .bottom .date {
+		color: color-mix(in srgb, var(--main-font-color) 50%, transparent);
+		font-size: 0.85rem;
+	}
+
+	.bottom {
+		font-size: 1rem;
+		text-align: center;
+	}
+}
+
+.flux_header {
+	font-size: 1rem;
+	cursor: pointer;
+	border-top: 1px solid var(--grey-light);
+
+	.title {
+		font-size: 1rem;
+	}
+}
diff --git a/p/themes/Ansum/_list-view.rtl.css b/p/themes/Ansum/_list-view.rtl.css
new file mode 100644
index 000000000..f6beeee10
--- /dev/null
+++ b/p/themes/Ansum/_list-view.rtl.css
@@ -0,0 +1,94 @@
+/*=== Feed articles */
+.flux {
+	/* border-left: 2px solid #ecf0f1;*/
+	background: var(--white);
+
+	transition: all 0.15s ease-in-out;
+
+	.flux_header {
+		&:hover {
+			background: var(--grey-lighter);
+
+			&:not(.current):hover .item .title {
+				background: var(--grey-lighter);
+			}
+		}
+	}
+
+	&.current {
+		background: var(--white);
+		border-right-color: var(--main-first);
+
+		&:not(.active) {
+			background: var(--grey-lighter);
+		}
+	}
+
+	&.not_read:not(.current) {
+		background: var(--unread-bg);
+
+		&:hover .item .title {
+			background: var(--unread-bg);
+		}
+	}
+
+	&.not_read {
+		.item .title {
+			a {
+				color: var(--unread-font-color);
+			}
+		}
+
+		.item.website {
+			a {
+				color: var(--unread-font-color);
+			}
+		}
+
+		.item .date {
+			color: color-mix(in srgb, var(--unread-font-color) 50%, transparent);
+		}
+	}
+
+	&.favorite {
+		border-right-color: var(--fav-bg);
+
+		transition: all 0.15s ease-in-out;
+	}
+
+	&.favorite:not(.current) {
+		background: var(--fav-light);
+
+		&:hover .item .title {
+			background: var(--fav-light);
+		}
+	}
+
+	.website {
+		a {
+			color: var(--main-font-color);
+			opacity: 0.75;
+		}
+	}
+
+	.flux_header .date,
+	.flux_content .bottom .date {
+		color: color-mix(in srgb, var(--main-font-color) 50%, transparent);
+		font-size: 0.85rem;
+	}
+
+	.bottom {
+		font-size: 1rem;
+		text-align: center;
+	}
+}
+
+.flux_header {
+	font-size: 1rem;
+	cursor: pointer;
+	border-top: 1px solid var(--grey-light);
+
+	.title {
+		font-size: 1rem;
+	}
+}
diff --git a/p/themes/Ansum/_list-view.scss b/p/themes/Ansum/_list-view.scss
deleted file mode 100644
index ba297e2ac..000000000
--- a/p/themes/Ansum/_list-view.scss
+++ /dev/null
@@ -1,100 +0,0 @@
-@use "sass:color";
-
-@use "mixins";
-
-@use "variables";
-
-/*=== Feed articles */
-.flux {
-	// border-left: 2px solid #ecf0f1;
-	background: variables.$white;
-
-	@include mixins.transition(all, 0.15s, ease-in-out);
-
-	.flux_header {
-		&:hover {
-			background: variables.$grey-lighter;
-
-			&:not(.current):hover .item .title {
-				background: variables.$grey-lighter;
-			}
-		}
-	}
-
-	&.current {
-		background: variables.$white;
-		border-left-color: variables.$main-first;
-
-		&:not(.active) {
-			background: variables.$grey-lighter;
-		}
-	}
-
-	&.not_read:not(.current) {
-		background: variables.$unread-bg;
-
-		&:hover .item .title {
-			background: variables.$unread-bg;
-		}
-	}
-
-	&.not_read {
-		.item .title {
-			a {
-				color: variables.$unread-font-color;
-			}
-		}
-
-		.item.website {
-			a {
-				color: variables.$unread-font-color;
-			}
-		}
-
-		.item .date {
-			color: color.scale(variables.$unread-font-color, $alpha: -50%);
-		}
-	}
-
-	&.favorite {
-		border-left-color: variables.$fav-bg;
-
-		@include mixins.transition(all, 0.15s, ease-in-out);
-	}
-
-	&.favorite:not(.current) {
-		background: variables.$fav-light;
-
-		&:hover .item .title {
-			background: variables.$fav-light;
-		}
-	}
-
-	.website {
-		a {
-			color: variables.$main-font-color;
-			opacity: 0.75;
-		}
-	}
-
-	.flux_header .date,
-	.flux_content .bottom .date {
-		color: color.scale(variables.$main-font-color, $alpha: -50%);
-		font-size: 0.85rem;
-	}
-
-	.bottom {
-		font-size: 1rem;
-		text-align: center;
-	}
-}
-
-.flux_header {
-	font-size: 1rem;
-	cursor: pointer;
-	border-top: 1px solid variables.$grey-light;
-
-	.title {
-		font-size: 1rem;
-	}
-}
diff --git a/p/themes/Ansum/_logs.css b/p/themes/Ansum/_logs.css
new file mode 100644
index 000000000..60914ec2b
--- /dev/null
+++ b/p/themes/Ansum/_logs.css
@@ -0,0 +1,5 @@
+/*=== LOGS */
+/*=========*/
+.log-item.log-error {
+	background-color: rgba(var(--main-first), 0.2);
+}
diff --git a/p/themes/Ansum/_logs.rtl.css b/p/themes/Ansum/_logs.rtl.css
new file mode 100644
index 000000000..60914ec2b
--- /dev/null
+++ b/p/themes/Ansum/_logs.rtl.css
@@ -0,0 +1,5 @@
+/*=== LOGS */
+/*=========*/
+.log-item.log-error {
+	background-color: rgba(var(--main-first), 0.2);
+}
diff --git a/p/themes/Ansum/_logs.scss b/p/themes/Ansum/_logs.scss
deleted file mode 100644
index 69d0153d1..000000000
--- a/p/themes/Ansum/_logs.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-@use "variables";
-
-/*=== LOGS */
-/*=========*/
-.log-item.log-error {
-	background-color: rgba(variables.$main-first, 0.2);
-}
diff --git a/p/themes/Ansum/_mixins.scss b/p/themes/Ansum/_mixins.scss
deleted file mode 100644
index 9ba940a88..000000000
--- a/p/themes/Ansum/_mixins.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-/* stylelint-disable property-no-vendor-prefix */
-
-/* FUNCTIONS */
-
-@mixin transition($target, $duration, $ease) {
-	transition: $target $duration $ease;
-}
diff --git a/p/themes/Ansum/_mobile.scss b/p/themes/Ansum/_mobile.css
index 19796e3db..b3582e9e2 100644
--- a/p/themes/Ansum/_mobile.scss
+++ b/p/themes/Ansum/_mobile.css
@@ -1,14 +1,10 @@
-@use "mixins";
-
-@use "variables";
-
 /*=== MOBILE */
 /*===========*/
 
 @media (max-width: 840px) {
 	.aside {
 
-		@include mixins.transition(all, 0.2s, ease-in-out);
+		transition: all 0.2s ease-in-out;
 
 		&.aside_feed {
 			padding: 0;
@@ -23,10 +19,10 @@
 	#overlay .close,
 	.dropdown-menu .toggle_aside,
 	#slider .toggle_aside {
-		background-color: variables.$main-first;
+		background-color: var(--main-first);
 
 		&:hover {
-			background-color: variables.$main-first-alt;
+			background-color: var(--main-first-alt);
 		}
 
 		.icon {
@@ -109,15 +105,15 @@
 	}
 
 	.dropdown-target:target {
-		~ .dropdown-toggle::after {
-			background-color: variables.$grey-lighter;
-			border-top: 1px solid variables.$grey-light;
-			border-left: 1px solid variables.$grey-light;
+		& ~ .dropdown-toggle::after {
+			background-color: var(--grey-lighter);
+			border-top: 1px solid var(--grey-light);
+			border-left: 1px solid var(--grey-light);
 			right: 21px;
 			bottom: -14px;
 		}
 
-		~ a.dropdown-toggle {
+		& ~ a.dropdown-toggle {
 			&:not(.btn) {
 				&::after {
 					bottom: -17px;
diff --git a/p/themes/Ansum/_mobile.rtl.css b/p/themes/Ansum/_mobile.rtl.css
new file mode 100644
index 000000000..105bae0d2
--- /dev/null
+++ b/p/themes/Ansum/_mobile.rtl.css
@@ -0,0 +1,161 @@
+/*=== MOBILE */
+/*===========*/
+
+@media (max-width: 840px) {
+	.aside {
+
+		transition: all 0.2s ease-in-out;
+
+		&.aside_feed {
+			padding: 0;
+		}
+
+		.tree .tree-folder .tree-folder-items .item a {
+			padding: 0.5rem 1rem;
+		}
+	}
+
+	.aside .toggle_aside,
+	#overlay .close,
+	.dropdown-menu .toggle_aside,
+	#slider .toggle_aside {
+		background-color: var(--main-first);
+
+		&:hover {
+			background-color: var(--main-first-alt);
+		}
+
+		.icon {
+			filter: grayscale(100%) brightness(2.5);
+		}
+	}
+
+	.header {
+		.item {
+			&.search {
+				display: none;
+			}
+
+			&.configure {
+				position: absolute;
+				top: 0;
+				left: 0;
+			}
+		}
+	}
+
+	#global {
+		height: calc(100% - 8rem);
+	}
+
+	#panel {
+		top: 0;
+		left: 0;
+		bottom: 0;
+		right: 0;
+	}
+
+	.post {
+		padding-right: 1rem;
+		padding-left: 1rem;
+	}
+
+	.nav_menu {
+		.btn {
+			margin: 0;
+			padding: 0.85rem 1.25rem;
+		}
+
+		.stick,
+		.group {
+			margin: 0.5rem 0.5rem;
+
+			.btn {
+				margin: 0;
+				padding: 0.85rem 1.25rem;
+
+				&.read_all {
+					padding: 0.85rem 1.25rem;
+				}
+			}
+		}
+
+		.search {
+			.input {
+				max-width: 97%;
+				width: 90px;
+
+				&:focus {
+					width: 400px;
+				}
+			}
+		}
+	}
+
+	#nav_menu_read_all #nav_menu_read .dropdown-toggle.btn {
+		background-image: none;
+	}
+
+	#stream {
+		.flux {
+			.flux_header {
+				padding: 0.5rem 0;
+			}
+		}
+	}
+
+	.dropdown-target:target {
+		& ~ .dropdown-toggle::after {
+			background-color: var(--grey-lighter);
+			border-top: 1px solid var(--grey-light);
+			border-right: 1px solid var(--grey-light);
+			left: 21px;
+			bottom: -14px;
+		}
+
+		& ~ a.dropdown-toggle {
+			&:not(.btn) {
+				&::after {
+					bottom: -17px;
+				}
+			}
+		}
+	}
+
+	.transition {
+		text-align: center;
+		padding: 1rem 0;
+
+		.name {
+			padding: 0;
+			display: block;
+			width: 100%;
+			line-height: 1.5rem;
+			margin-bottom: 1rem;
+		}
+
+	}
+
+	#nav_entries button {
+		height: 4.5rem;
+	}
+
+	.notification {
+		border-radius: 0;
+
+		a.close {
+			background: transparent;
+			display: block;
+			right: 0;
+		}
+
+		a.close:hover {
+			opacity: 0.5;
+		}
+
+		a.close .icon {
+			display: none;
+
+		}
+	}
+}
diff --git a/p/themes/Ansum/_reader-view.css b/p/themes/Ansum/_reader-view.css
new file mode 100644
index 000000000..85846b631
--- /dev/null
+++ b/p/themes/Ansum/_reader-view.css
@@ -0,0 +1,18 @@
+/*=== READER VIEW */
+/*================*/
+#stream.reader {
+	.flux {
+		background: var(--grey-light);
+		color: var(--main-font-color);
+		border: none;
+
+		.flux_content {
+			background-color: var(--white);
+			border: none;
+
+			.author {
+				color: var(--grey-medium-dark);
+			}
+		}
+	}
+}
diff --git a/p/themes/Ansum/_reader-view.rtl.css b/p/themes/Ansum/_reader-view.rtl.css
new file mode 100644
index 000000000..85846b631
--- /dev/null
+++ b/p/themes/Ansum/_reader-view.rtl.css
@@ -0,0 +1,18 @@
+/*=== READER VIEW */
+/*================*/
+#stream.reader {
+	.flux {
+		background: var(--grey-light);
+		color: var(--main-font-color);
+		border: none;
+
+		.flux_content {
+			background-color: var(--white);
+			border: none;
+
+			.author {
+				color: var(--grey-medium-dark);
+			}
+		}
+	}
+}
diff --git a/p/themes/Ansum/_reader-view.scss b/p/themes/Ansum/_reader-view.scss
deleted file mode 100644
index d0b661887..000000000
--- a/p/themes/Ansum/_reader-view.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-@use "variables";
-
-/*=== READER VIEW */
-/*================*/
-#stream.reader {
-	.flux {
-		background: variables.$grey-light;
-		color: variables.$main-font-color;
-		border: none;
-
-		.flux_content {
-			background-color: variables.$white;
-			border: none;
-
-			.author {
-				color: variables.$grey-medium-dark;
-			}
-		}
-	}
-}
diff --git a/p/themes/Ansum/_sidebar.scss b/p/themes/Ansum/_sidebar.css
index 0f060e399..6621b0d05 100644
--- a/p/themes/Ansum/_sidebar.scss
+++ b/p/themes/Ansum/_sidebar.css
@@ -1,25 +1,19 @@
-@use "sass:string";
-
-@use "mixins";
-
-@use "variables";
-
 /*=== Tree */
 .tree {
 	margin: 10px 0;
 
 	&#sidebar {
 		scrollbar-color: rgba(255,255, 0, 0.1) rgba(0, 0, 0, 0.05);
-		scrollbar-color: string.unquote(variables.$sid-font-color + "33") string.unquote(variables.$sid-font-color + "22");
+		scrollbar-color: color-mix(in srgb, var(--sid-font-color) 20%, transparent) color-mix(in srgb, var(--sid-font-color) 13%, transparent);
 	}
 
 	.tree-folder {
-		border-bottom: 1px solid variables.$sid-sep;
+		border-bottom: 1px solid var(--sid-sep);
 		box-shadow: inset -1px -11px 8px #0003;
 
 		.tree-folder-title {
 			padding: 0.75rem 1rem;
-			background: variables.$sid-bg;
+			background: var(--sid-bg);
 			position: relative;
 			font-size: 0.85rem;
 			letter-spacing: 1px;
@@ -44,7 +38,7 @@
 
 			.title {
 				background: inherit;
-				color: variables.$sid-font-color;
+				color: var(--sid-font-color);
 
 				&:hover {
 					text-decoration: none;
@@ -54,43 +48,43 @@
 
 		&.active {
 			.tree-folder-title {
-				background: variables.$sid-bg;
+				background: var(--sid-bg);
 				font-weight: bold;
 			}
 		}
 
 		.tree-folder-items {
-			background: variables.$sid-bg-alt;
+			background: var(--sid-bg-alt);
 
 			.item {
 				font-size: 1rem;
 				font-weight: 400;
 
-				@include mixins.transition(all, 0.15s, ease-in-out);
+				transition: all 0.15s ease-in-out;
 
 				&.active {
-					background: variables.$sid-active;
+					background: var(--sid-active);
 
 					.dropdown li a {
-						color: variables.$main-font-color;
+						color: var(--main-font-color);
 
 						&:hover {
-							color: variables.$sid-font-color;
+							color: var(--sid-font-color);
 						}
 					}
 
 					a {
-						color: variables.$sid-active-font;
+						color: var(--sid-active-font);
 					}
 				}
 
 				&:hover {
-					background: variables.$sid-bg-dark;
+					background: var(--sid-bg-dark);
 				}
 
 				a {
 					text-decoration: none;
-					color: variables.$sid-font-color;
+					color: var(--sid-font-color);
 
 					&.dropdown-toggle {
 						.icon {
@@ -127,20 +121,20 @@
 	.dropdown + .btn,
 	.dropdown + input,
 	.dropdown + .dropdown > .btn {
-		border-left: 1px solid variables.$grey-medium-light;
+		border-left: 1px solid var(--grey-medium-light);
 	}
 
 }
 
 .aside {
-	background: variables.$sid-bg;
+	background: var(--sid-bg);
 
 
 	&.aside_feed {
 		padding: 10px 0;
 		text-align: center;
-		background: variables.$sid-bg;
-		border-right: 1px solid variables.$sid-sep;
+		background: var(--sid-bg);
+		border-right: 1px solid var(--sid-sep);
 
 		.tree-folder-title:hover button.dropdown-toggle .icon {
 			filter: none;
@@ -176,7 +170,7 @@
 	}
 
 	.item {
-		background: variables.$sid-bg;
+		background: var(--sid-bg);
 		min-height: 2.5em;
 		line-height: 2.5em;
 
@@ -188,25 +182,25 @@
 		a,
 		.as-link {
 			padding: 0 1rem;
-			color: variables.$sid-font-color;
+			color: var(--sid-font-color);
 
-			@include mixins.transition(all, 0.15s, ease-in-out);
+			transition: all 0.15s ease-in-out;
 		}
 
 		a:hover,
 		.as-link:hover {
-			background: variables.$sid-bg-dark;
+			background: var(--sid-bg-dark);
 			text-decoration: none;
 		}
 
 		&.active {
-			background: variables.$main-first;
-			color: variables.$white;
+			background: var(--main-first);
+			color: var(--white);
 
 			a,
 			.as-link {
-				background: variables.$main-first;
-				color: variables.$white;
+				background: var(--main-first);
+				color: var(--white);
 				text-decoration: none;
 			}
 		}
@@ -215,7 +209,7 @@
 	.nav-header {
 		padding: 0 1rem;
 		font-weight: bold;
-		color: variables.$grey-dark;
+		color: var(--grey-dark);
 		text-transform: uppercase;
 		letter-spacing: 1px;
 	}
@@ -233,37 +227,37 @@
 
 .aside.aside_feed .category .title:not([data-unread="0"])::after {
 	margin: 0.75rem 0 0 0;
-	background-color: variables.$sid-pills;
+	background-color: var(--sid-pills);
 }
 
 .aside.aside_feed .feed .item-title:not([data-unread="0"])::after {
 	margin: 0.5em 0 0 0;
-	background-color: variables.$sid-pills;
+	background-color: var(--sid-pills);
 }
 
 .feed.item.empty.active {
-	background: variables.$grey-dark;
+	background: var(--grey-dark);
 }
 
 .feed.item.error.active {
-	background: variables.$grey-dark;
+	background: var(--grey-dark);
 }
 
 .feed.item.empty,
 .feed.item.empty > a {
-	color: variables.$grey-dark;
+	color: var(--grey-dark);
 }
 
 .feed.item.error,
 .feed.item.error > a {
-	color: variables.$grey-dark;
+	color: var(--grey-dark);
 }
 
 .feed.item.empty.active,
 .feed.item.error.active,
 .feed.item.empty.active > a,
 .feed.item.error.active > a {
-	color: variables.$white;
+	color: var(--white);
 }
 
 .aside_feed .tree-folder-items .dropdown-menu::after {
@@ -277,5 +271,5 @@
 }
 
 .aside_feed .stick #btn-add {
-	border-left-color: variables.$sid-bg;
+	border-left-color: var(--sid-bg);
 }
diff --git a/p/themes/Ansum/_sidebar.rtl.css b/p/themes/Ansum/_sidebar.rtl.css
new file mode 100644
index 000000000..28f8233ea
--- /dev/null
+++ b/p/themes/Ansum/_sidebar.rtl.css
@@ -0,0 +1,275 @@
+/*=== Tree */
+.tree {
+	margin: 10px 0;
+
+	&#sidebar {
+		scrollbar-color: rgba(255,255, 0, 0.1) rgba(0, 0, 0, 0.05);
+		scrollbar-color: color-mix(in srgb, var(--sid-font-color) 20%, transparent) color-mix(in srgb, var(--sid-font-color) 13%, transparent);
+	}
+
+	.tree-folder {
+		border-bottom: 1px solid var(--sid-sep);
+		box-shadow: inset 1px -11px 8px #0003;
+
+		.tree-folder-title {
+			padding: 0.75rem 1rem;
+			background: var(--sid-bg);
+			position: relative;
+			font-size: 0.85rem;
+			letter-spacing: 1px;
+			font-weight: 700;
+			text-transform: uppercase;
+
+			button.dropdown-toggle {
+				margin: -0.75rem -1rem -0.75rem 0.25rem;
+				padding: 0.75rem 1rem 0.75rem 0;
+
+				&:hover {
+					.icon {
+						filter: brightness(1.7) !important;
+						transition: 0.1s linear;
+					}
+				}
+			}
+
+			.icon {
+				margin-left: 0.5rem;
+			}
+
+			.title {
+				background: inherit;
+				color: var(--sid-font-color);
+
+				&:hover {
+					text-decoration: none;
+				}
+			}
+		}
+
+		&.active {
+			.tree-folder-title {
+				background: var(--sid-bg);
+				font-weight: bold;
+			}
+		}
+
+		.tree-folder-items {
+			background: var(--sid-bg-alt);
+
+			.item {
+				font-size: 1rem;
+				font-weight: 400;
+
+				transition: all 0.15s ease-in-out;
+
+				&.active {
+					background: var(--sid-active);
+
+					.dropdown li a {
+						color: var(--main-font-color);
+
+						&:hover {
+							color: var(--sid-font-color);
+						}
+					}
+
+					a {
+						color: var(--sid-active-font);
+					}
+				}
+
+				&:hover {
+					background: var(--sid-bg-dark);
+				}
+
+				a {
+					text-decoration: none;
+					color: var(--sid-font-color);
+
+					&.dropdown-toggle {
+						.icon {
+							margin-left: 0.25rem;
+						}
+					}
+				}
+			}
+		}
+	}
+}
+
+/*=== Buttons */
+.stick,
+.group {
+	input, .btn {
+		border-radius: 0;
+	}
+
+	.btn:first-child {
+		border-radius: 0 5px 5px 0;
+	}
+
+	.btn:last-child, input:last-child, .dropdown:last-child > .btn {
+		border-radius: 5px 0 0 5px;
+	}
+
+	.btn + .btn,
+	.btn + input,
+	.btn + .dropdown > .btn,
+	input + .btn,
+	input + input,
+	input + .dropdown > .btn,
+	.dropdown + .btn,
+	.dropdown + input,
+	.dropdown + .dropdown > .btn {
+		border-right: 1px solid var(--grey-medium-light);
+	}
+
+}
+
+.aside {
+	background: var(--sid-bg);
+
+
+	&.aside_feed {
+		padding: 10px 0;
+		text-align: center;
+		background: var(--sid-bg);
+		border-left: 1px solid var(--sid-sep);
+
+		.tree-folder-title:hover button.dropdown-toggle .icon {
+			filter: none;
+		}
+	}
+
+	&.aside_feed .tree {
+		margin: 10px 0 50px;
+	}
+
+	a:hover {
+		.icon {
+			filter: brightness(1.7);
+			transition: 0.1s linear;
+		}
+	}
+
+}
+
+
+/* Sidebar des pages de configuration */
+
+
+
+/*=== Navigation */
+.nav-list {
+	font-size: 1rem;
+
+	.item.nav-header,
+	.item {
+		min-height: 2.5em;
+		line-height: 2.5em;
+	}
+
+	.item {
+		background: var(--sid-bg);
+		min-height: 2.5em;
+		line-height: 2.5em;
+
+		&.nav-header {
+			min-height: 2.5em;
+			line-height: 2.5em;
+		}
+
+		a,
+		.as-link {
+			padding: 0 1rem;
+			color: var(--sid-font-color);
+
+			transition: all 0.15s ease-in-out;
+		}
+
+		a:hover,
+		.as-link:hover {
+			background: var(--sid-bg-dark);
+			text-decoration: none;
+		}
+
+		&.active {
+			background: var(--main-first);
+			color: var(--white);
+
+			a,
+			.as-link {
+				background: var(--main-first);
+				color: var(--white);
+				text-decoration: none;
+			}
+		}
+	}
+
+	.nav-header {
+		padding: 0 1rem;
+		font-weight: bold;
+		color: var(--grey-dark);
+		text-transform: uppercase;
+		letter-spacing: 1px;
+	}
+
+	.nav-form {
+		padding: 3px;
+		text-align: center;
+	}
+}
+
+/*=== Aside main page (categories) */
+.aside_feed .tree-folder-title > .title:not([data-unread="0"]) {
+	width: calc(100% - 35px - 35px);
+}
+
+.aside.aside_feed .category .title:not([data-unread="0"])::after {
+	margin: 0.75rem 0 0 0;
+	background-color: var(--sid-pills);
+}
+
+.aside.aside_feed .feed .item-title:not([data-unread="0"])::after {
+	margin: 0.5em 0 0 0;
+	background-color: var(--sid-pills);
+}
+
+.feed.item.empty.active {
+	background: var(--grey-dark);
+}
+
+.feed.item.error.active {
+	background: var(--grey-dark);
+}
+
+.feed.item.empty,
+.feed.item.empty > a {
+	color: var(--grey-dark);
+}
+
+.feed.item.error,
+.feed.item.error > a {
+	color: var(--grey-dark);
+}
+
+.feed.item.empty.active,
+.feed.item.error.active,
+.feed.item.empty.active > a,
+.feed.item.error.active > a {
+	color: var(--white);
+}
+
+.aside_feed .tree-folder-items .dropdown-menu::after {
+	right: 2px;
+}
+
+.aside_feed .tree-folder-items .item .dropdown-target:target ~ .dropdown-toggle > .icon,
+.aside_feed .tree-folder-items .item:hover .dropdown-toggle > .icon,
+.aside_feed .tree-folder-items .item.active .dropdown-toggle > .icon {
+	border-radius: 3px;
+}
+
+.aside_feed .stick #btn-add {
+	border-right-color: var(--sid-bg);
+}
diff --git a/p/themes/Mapco/_stats.scss b/p/themes/Ansum/_stats.css
index 26dc390d7..791bdb32d 100644
--- a/p/themes/Mapco/_stats.scss
+++ b/p/themes/Ansum/_stats.css
@@ -1,5 +1,3 @@
-@use "variables";
-
 /*=== STATISTICS */
 /*===============*/
 .stat {
@@ -14,5 +12,5 @@
 
 .stat > table td,
 .stat > table th {
-	border-bottom: 1px solid variables.$grey-medium-light;
+	border-bottom: 1px solid var(--grey-medium-light);
 }
diff --git a/p/themes/Ansum/_stats.scss b/p/themes/Ansum/_stats.rtl.css
index 26dc390d7..791bdb32d 100644
--- a/p/themes/Ansum/_stats.scss
+++ b/p/themes/Ansum/_stats.rtl.css
@@ -1,5 +1,3 @@
-@use "variables";
-
 /*=== STATISTICS */
 /*===============*/
 .stat {
@@ -14,5 +12,5 @@
 
 .stat > table td,
 .stat > table th {
-	border-bottom: 1px solid variables.$grey-medium-light;
+	border-bottom: 1px solid var(--grey-medium-light);
 }
diff --git a/p/themes/Mapco/_tables.scss b/p/themes/Ansum/_tables.css
index ca568b1fe..efb395640 100644
--- a/p/themes/Mapco/_tables.scss
+++ b/p/themes/Ansum/_tables.css
@@ -1,16 +1,14 @@
-@use "variables";
-
 /*=== Tables */
 table {
 	border-collapse: collapse;
 }
 
 th, td {
-	border: 1px solid variables.$grey-medium-light;
+	border: 1px solid var(--grey-medium-light);
 }
 
 th {
-	background: variables.$grey-lighter;
+	background: var(--grey-lighter);
 }
 
 .config-articleicons td,
diff --git a/p/themes/Ansum/_tables.scss b/p/themes/Ansum/_tables.rtl.css
index ca568b1fe..efb395640 100644
--- a/p/themes/Ansum/_tables.scss
+++ b/p/themes/Ansum/_tables.rtl.css
@@ -1,16 +1,14 @@
-@use "variables";
-
 /*=== Tables */
 table {
 	border-collapse: collapse;
 }
 
 th, td {
-	border: 1px solid variables.$grey-medium-light;
+	border: 1px solid var(--grey-medium-light);
 }
 
 th {
-	background: variables.$grey-lighter;
+	background: var(--grey-lighter);
 }
 
 .config-articleicons td,
diff --git a/p/themes/Ansum/_variables.css b/p/themes/Ansum/_variables.css
new file mode 100644
index 000000000..46c5c5782
--- /dev/null
+++ b/p/themes/Ansum/_variables.css
@@ -0,0 +1,56 @@
+:root {
+	/* The main color of the theme*/
+	--main-first: #ca7227; /* main color*/
+	--main-first-alt: #b7641d; /* var for hovers*/
+	--main-first-light: #fdf6ef; /* var light 1*/
+	--main-first-lighter: #fefaf7; /* var light 2*/
+	--main-first-dark: #3c3835; /* var for hovers*/
+	--main-first-darker: #221f1d; /* var for hovers*/
+
+	/* linked font colors*/
+	--main-font-color: #363330;
+	--light-font-color: #6d655f;
+	--white: #fff; /* white (sometimes we would like to tint it a little)*/
+
+	/* the whole palette of grays, very useful*/
+	/* we will try to tint these grays according to the main color*/
+	--grey-darker: #524236;
+	--grey-dark: #766556;
+	--grey-medium-dark: #ba9;
+	--grey-medium: #d9ccbf;
+	--grey-medium-light: #e4d8cc;
+	--grey-light: #f5f0ec;
+	--grey-lighter: #fcfaf8;
+
+	--unread-font-color: #161a38;
+	--unread-bg: #f2f6f8;
+	--unread-bg-light: #fdfdfe;
+
+	/* alert colors (red, yellow, green)*/
+	--alert-bg: #f5633e; /* the base*/
+	--alert-light: #fde0d8; /* +light*/
+	--alert-text: #73341f; /* +dark*/
+
+	--warning-bg: #f4f762;
+	--warning-light: #fdfde0;
+	--warning-text: #73762f;
+
+	--success-bg: #10f5b2;
+	--success-light: #cffdef;
+	--success-text: #0c7556;
+
+	/* favorites*/
+	--fav-bg: #ffc300;
+	--fav-light: #fff6da;
+
+	/* the sidebar color, useful if you want a theme that would have a dark sidebar, e.g.*/
+	--sid-font-color: #363330; /* the background color of the left bar and the header*/
+	--sid-bg: #fbf9f6; /* the general background of the left bar, and of the header*/
+	--sid-bg-alt: #f7f2ea; /* background inside groups*/
+	--sid-bg-dark: #efe3d3; /* the hover*/
+	--sid-sep: #f0e7da; /* the separators*/
+	--sid-active: var(--main-first); /* the active color*/
+	/* stylelint-disable-next-line color-hex-length*/
+	--sid-active-font: #ffffff; /* the active color*/
+	--sid-pills: rgba(35,35,0, 0.15); /* capsules*/
+}
diff --git a/p/themes/Ansum/_variables.rtl.css b/p/themes/Ansum/_variables.rtl.css
new file mode 100644
index 000000000..46c5c5782
--- /dev/null
+++ b/p/themes/Ansum/_variables.rtl.css
@@ -0,0 +1,56 @@
+:root {
+	/* The main color of the theme*/
+	--main-first: #ca7227; /* main color*/
+	--main-first-alt: #b7641d; /* var for hovers*/
+	--main-first-light: #fdf6ef; /* var light 1*/
+	--main-first-lighter: #fefaf7; /* var light 2*/
+	--main-first-dark: #3c3835; /* var for hovers*/
+	--main-first-darker: #221f1d; /* var for hovers*/
+
+	/* linked font colors*/
+	--main-font-color: #363330;
+	--light-font-color: #6d655f;
+	--white: #fff; /* white (sometimes we would like to tint it a little)*/
+
+	/* the whole palette of grays, very useful*/
+	/* we will try to tint these grays according to the main color*/
+	--grey-darker: #524236;
+	--grey-dark: #766556;
+	--grey-medium-dark: #ba9;
+	--grey-medium: #d9ccbf;
+	--grey-medium-light: #e4d8cc;
+	--grey-light: #f5f0ec;
+	--grey-lighter: #fcfaf8;
+
+	--unread-font-color: #161a38;
+	--unread-bg: #f2f6f8;
+	--unread-bg-light: #fdfdfe;
+
+	/* alert colors (red, yellow, green)*/
+	--alert-bg: #f5633e; /* the base*/
+	--alert-light: #fde0d8; /* +light*/
+	--alert-text: #73341f; /* +dark*/
+
+	--warning-bg: #f4f762;
+	--warning-light: #fdfde0;
+	--warning-text: #73762f;
+
+	--success-bg: #10f5b2;
+	--success-light: #cffdef;
+	--success-text: #0c7556;
+
+	/* favorites*/
+	--fav-bg: #ffc300;
+	--fav-light: #fff6da;
+
+	/* the sidebar color, useful if you want a theme that would have a dark sidebar, e.g.*/
+	--sid-font-color: #363330; /* the background color of the left bar and the header*/
+	--sid-bg: #fbf9f6; /* the general background of the left bar, and of the header*/
+	--sid-bg-alt: #f7f2ea; /* background inside groups*/
+	--sid-bg-dark: #efe3d3; /* the hover*/
+	--sid-sep: #f0e7da; /* the separators*/
+	--sid-active: var(--main-first); /* the active color*/
+	/* stylelint-disable-next-line color-hex-length*/
+	--sid-active-font: #ffffff; /* the active color*/
+	--sid-pills: rgba(35,35,0, 0.15); /* capsules*/
+}
diff --git a/p/themes/Ansum/_variables.scss b/p/themes/Ansum/_variables.scss
deleted file mode 100644
index 6ed5e295e..000000000
--- a/p/themes/Ansum/_variables.scss
+++ /dev/null
@@ -1,54 +0,0 @@
-// The main color of the theme
-$main-first: #ca7227; // main color
-$main-first-alt: #b7641d; // var for hovers
-$main-first-light: #fdf6ef; // var light 1
-$main-first-lighter: #fefaf7; // var light 2
-$main-first-dark: #3c3835; // var for hovers
-$main-first-darker: #221f1d; // var for hovers
-
-// linked font colors
-$main-font-color: #363330;
-$light-font-color: #6d655f;
-$white: #fff; // white (sometimes we would like to tint it a little)
-
-// the whole palette of grays, very useful
-// we will try to tint these grays according to the main color
-$grey-darker: #524236;
-$grey-dark: #766556;
-$grey-medium-dark: #ba9;
-$grey-medium: #d9ccbf;
-$grey-medium-light: #e4d8cc;
-$grey-light: #f5f0ec;
-$grey-lighter: #fcfaf8;
-
-$unread-font-color: #161a38;
-$unread-bg: #f2f6f8;
-$unread-bg-light: #fdfdfe;
-
-// alert colors (red, yellow, green)
-$alert-bg: #f5633e; // the base
-$alert-light: #fde0d8; // +light
-$alert-text: #73341f; // +dark
-
-$warning-bg: #f4f762;
-$warning-light: #fdfde0;
-$warning-text: #73762f;
-
-$success-bg: #10f5b2;
-$success-light: #cffdef;
-$success-text: #0c7556;
-
-// favorites
-$fav-bg: #ffc300;
-$fav-light: #fff6da;
-
-// the sidebar color, useful if you want a theme that would have a dark sidebar, e.g.
-$sid-font-color: #363330; // the background color of the left bar and the header
-$sid-bg: #fbf9f6; // the general background of the left bar, and of the header
-$sid-bg-alt: #f7f2ea; // background inside groups
-$sid-bg-dark: #efe3d3; // the hover
-$sid-sep: #f0e7da; // the separators
-$sid-active: $main-first; // the active color
-// stylelint-disable-next-line color-hex-length
-$sid-active-font: #ffffff; // the active color
-$sid-pills: rgba(35,35,0, 0.15); // capsules
diff --git a/p/themes/Ansum/ansum.css b/p/themes/Ansum/ansum.css
index 2d5da338c..576d3d6e6 100644
--- a/p/themes/Ansum/ansum.css
+++ b/p/themes/Ansum/ansum.css
@@ -1,1341 +1,51 @@
-@font-face {
-	font-family: "lato";
-	font-style: normal;
-	font-stretch: normal;
-	font-weight: 400;
-	src: local("Lato"), url("../fonts/LatoLatin-Regular.woff") format("woff");
-}
-@font-face {
-	font-family: "lato";
-	font-style: italic;
-	font-stretch: normal;
-	font-weight: 400;
-	src: local("Lato"), url("../fonts/LatoLatin-Italic.woff") format("woff");
-}
-@font-face {
-	font-family: "lato";
-	font-style: normal;
-	font-stretch: normal;
-	font-weight: 700;
-	src: local("Lato"), url("../fonts/LatoLatin-Bold.woff") format("woff");
-}
-@font-face {
-	font-family: "lato";
-	font-style: italic;
-	font-stretch: normal;
-	font-weight: 700;
-	src: local("Lato"), url("../fonts/LatoLatin-BoldItalic.woff") format("woff");
-}
-@font-face {
-	font-family: "spectral";
-	font-style: normal;
-	font-stretch: normal;
-	font-weight: 400;
-	src: local("Spectral"), url("../fonts/Spectral-Regular.woff") format("woff");
-}
-@font-face {
-	font-family: "spectral";
-	font-style: italic;
-	font-stretch: normal;
-	font-weight: 400;
-	src: local("Spectral"), url("../fonts/Spectral-Italic.woff") format("woff");
-}
-@font-face {
-	font-family: "spectral";
-	font-style: normal;
-	font-stretch: normal;
-	font-weight: 700;
-	src: local("Spectral"), url("../fonts/Spectral-Bold.woff") format("woff");
-}
-@font-face {
-	font-family: "spectral";
-	font-style: italic;
-	font-stretch: normal;
-	font-weight: 700;
-	src: local("Spectral"), url("../fonts/Spectral-BoldItalic.woff") format("woff");
-}
-/* stylelint-disable property-no-vendor-prefix */
-/* FUNCTIONS */
-/* btns */
-.btn {
-	margin: 0;
-	padding: 0.5rem 1.5rem;
-	background: #fcfaf8;
-	color: #766556;
-	font-size: 1rem;
-	border: none;
-	border-radius: 5px;
-	min-height: 25px;
-	min-width: 15px;
-	line-height: 25px;
-	vertical-align: middle;
-	transition: all 0.15s ease-in-out;
-}
-.btn.btn-important {
-	background: #ca7227;
-	color: #fff;
-}
-.btn.btn-important:hover, .btn.btn-important:active {
-	background: #b7641d;
-}
-.btn.btn-important img {
-	filter: brightness(3);
-}
-.btn.btn-attention {
-	background: #f5633e;
-	color: #fff;
-}
-.btn.btn-attention:hover, .btn.btn-attention:active {
-	background: #73341f;
-}
-.btn:hover {
-	text-decoration: none;
-}
-
-/*=== Forms */
-legend {
-	margin: 2rem 0 1rem 0;
-	padding: 0;
-	display: inline-block;
-	width: auto;
-	font-size: 1rem;
-	clear: both;
-	text-transform: uppercase;
-	letter-spacing: 1px;
-	font-weight: 700;
-}
-
-label {
-	min-height: 25px;
-	padding: 5px 0;
-	cursor: pointer;
-	color: #766556;
-}
-
-textarea {
-	max-width: 100%;
-}
-
-input, select, textarea, button {
-	padding: 5px 10px;
-	background: #fff;
-	color: #766556;
-	font-family: "lato", "Helvetica", "Arial", sans-serif;
-	font-size: 1rem;
-	border: 1px solid #f5f0ec;
-	border-radius: 2px;
-	min-height: 25px;
-	line-height: 25px;
-	vertical-align: middle;
-}
-
-select {
-	padding-top: 9px;
-	padding-bottom: 9px;
-}
-
-option {
-	padding: 0 0.5em;
-}
-
-input:focus, select:focus, textarea:focus {
-	color: #363330;
-	border-color: #ca7227;
-}
-
-input:invalid, select:invalid {
-	color: #f5633e;
-	border-color: #f5633e;
-	box-shadow: none;
-}
-
-input:disabled, select:disabled {
-	color: #ba9;
-	border-color: #ba9;
-}
-
-.form-group {
-	padding: 5px;
-	border-radius: 3px;
-}
-.form-group::after {
-	display: block;
-	clear: both;
-}
-.form-group .group-name {
-	padding: 10px 0;
-}
-.form-group .group-controls {
-	min-height: 25px;
-	padding: 5px 0;
-}
-.form-group .group-controls .control {
-	line-height: 2em;
-}
-.form-group.form-actions {
-	margin: 15px 0 25px;
-	padding: 5px 0;
-}
-.form-group.form-actions .btn {
-	margin: 0 0.5rem 0 0;
-}
-
-/*=== Tables */
-table {
-	border-collapse: collapse;
-}
-
-th, td {
-	border: 1px solid #e4d8cc;
-}
-
-th {
-	background: #fcfaf8;
-}
-
-.config-articleicons td,
-.config-articleicons th {
-	font-weight: normal;
-	text-align: center;
-}
-
-/*=== COMPONENTS */
-/*===============*/
-/*=== Forms */
-/*=== Horizontal-list */
-.horizontal-list {
-	padding: 0.1rem 0;
-}
-.horizontal-list > .item:first-child {
-	padding-left: 0.5rem;
-}
-
-/*=== Dropdown */
-.dropdown .dropdown-target:target + .btn {
-	background-color: #e4d8cc;
-}
-
-.dropdown-menu {
-	margin: 9px 0 0 0;
-	padding: 0.5rem 0 1rem 0;
-	background: #fcfaf8;
-	font-size: 1rem;
-	border: none;
-	border-radius: 3px;
-	box-shadow: 0px 6px 8px 0px rgba(0, 0, 0, 0.35);
-	text-align: left;
-}
-.dropdown-menu::after {
-	border: none;
-	right: 17px;
-}
-.dropdown-menu .dropdown-header,
-.dropdown-menu .dropdown-section .dropdown-section-title {
-	padding: 1rem 1.5rem;
-	font-weight: bold;
-	text-align: left;
-	color: #766556;
-	text-transform: uppercase;
-	letter-spacing: 1px;
-}
-.dropdown-menu .item {
-	transition: all 0.075s ease-in-out;
-}
-.dropdown-menu .item > a,
-.dropdown-menu .item > span,
-.dropdown-menu .item > .as-link {
-	padding: 0 2rem;
-	color: #363330;
-	font-size: inherit;
-	line-height: 2.5em;
-}
-.dropdown-menu .item > a span.icon,
-.dropdown-menu .item > span span.icon,
-.dropdown-menu .item > .as-link span.icon {
-	padding: 0 0.25rem !important;
-}
-.dropdown-menu .item > a:not(.addItem):hover,
-.dropdown-menu .item > .as-link:not(.addItem):hover {
-	background: #ca7227;
-	color: #fff;
-}
-.dropdown-menu .item > a:not(.addItem):hover .icon,
-.dropdown-menu .item > .as-link:not(.addItem):hover .icon {
-	filter: grayscale(100%) brightness(2.5);
-}
-.dropdown-menu .item.dropdown-section {
-	margin-top: 0.75rem;
-}
-.dropdown-menu .item.dropdown-section ~ .dropdown-section {
-	border-top-color: #f5f0ec;
-}
-.dropdown-menu .item.dropdown-section .item a, .dropdown-menu .item.dropdown-section .item .as-link {
-	padding-left: 2rem;
-}
-.dropdown-menu .item:not(.addItem) > a:hover,
-.dropdown-menu .item:not(.addItem) button:hover {
-	background: #ca7227;
-	color: #fff;
-}
-.dropdown-menu .item:not(.addItem) > a:hover .icon,
-.dropdown-menu .item:not(.addItem) button:hover .icon {
-	filter: brightness(3);
-}
-.dropdown-menu .item[aria-checked=true] a::before {
-	margin: 0 0 0 -14px;
-	font-weight: bold;
-}
-.dropdown-menu .item ~ .dropdown-header {
-	margin-top: 0.75rem;
-	padding-top: 1.75rem;
-	border-top-color: #f5f0ec;
-}
-.dropdown-menu .item.separator {
-	margin-top: 0.75rem;
-	border-top-color: #f5f0ec;
-}
-.dropdown-menu .input select, .dropdown-menu .input input {
-	margin: 0 auto 5px;
-	padding: 2px 5px;
-	border-radius: 3px;
-}
-
-.tree .tree-folder .tree-folder-items .dropdown-menu .item {
-	padding: 0;
-}
-.tree .tree-folder .tree-folder-items .dropdown-menu .item a,
-.tree .tree-folder .tree-folder-items .dropdown-menu .item button {
-	color: #363330;
-}
-.tree .tree-folder .tree-folder-items .dropdown-menu .item a:hover,
-.tree .tree-folder .tree-folder-items .dropdown-menu .item button:hover {
-	color: #fff;
-}
-.tree .tree-folder .tree-folder-items .dropdown-menu .item:hover {
-	background: #ca7227;
-}
-
-/*=== Alerts */
-.alert {
-	background: #fcfaf8;
-	color: #766556;
-	font-size: 1rem;
-	border: 1px solid #d9ccbf;
-	border-radius: 3px;
-	text-shadow: 0 0 1px #f5f0ec;
-}
-
-.alert-head {
-	font-size: 1.15em;
-}
-
-.alert > a {
-	text-decoration: underline;
-	color: inherit;
-}
-
-.alert-warn {
-	background: #fdfde0;
-	color: #73762f;
-	border: 1px solid #73762f33;
-}
-
-.alert-success {
-	background: #cffdef;
-	color: #0c7556;
-	border: 1px solid #0c755633;
-}
-
-.alert-error {
-	background: #fde0d8;
-	color: #73341f;
-	border: 1px solid #73341f33;
-}
-
-/*=== Pagination */
-.pagination {
-	background: #f5f0ec;
-	color: #363330;
-}
-.pagination .item a {
-	color: #363330;
-}
-
-#load_more.loading,
-#load_more.loading:hover {
-	background: url("loader.gif") center center no-repeat #34495e;
-}
-
-/*=== Boxes */
-.box {
-	background: #fff;
-	border: none;
-	border-radius: 3px;
-	box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25);
-}
-.box .box-title {
-	background: #f5f0ec;
-	color: #363330;
-	border-radius: 2px 2px 0 0;
-}
-.box .box-content {
-	padding-left: 30px;
-}
-.box .box-content .item {
-	padding: 0.5rem 0;
-	color: #363330;
-	font-size: 1rem;
-	border-bottom: 1px solid #f5f0ec;
-	line-height: 1.7em;
-}
-.box .box-content .item:last-child {
-	border-bottom: none;
-}
-.box .configure {
-	margin-right: 0.5rem;
-	padding: 0.25rem;
-	border-radius: 3px;
-}
-.box .configure .icon {
-	vertical-align: middle;
-}
-.box .configure:hover {
-	border-radius: 2px;
-	background-color: #ca7227;
-}
-.box .configure:hover .icon {
-	filter: brightness(3);
-}
-
-/*=== "Load more" part */
-#bigMarkAsRead.big {
-	text-align: center;
-	text-decoration: none;
-	background: #fdf6ef;
-	color: #ca7227;
-	transition: all 0.15s ease-in-out;
-}
-#bigMarkAsRead.big:hover {
-	background: #ca7227;
-	color: #fff;
-}
-#bigMarkAsRead.big:hover .bigTick {
-	filter: brightness(7);
-}
-#bigMarkAsRead.big .bigTick {
-	margin: 0.5rem 0;
-	background: url(icons/tick-color.svg) center no-repeat;
-	display: inline-block;
-	width: 64px;
-	height: 64px;
-	text-indent: -9999px;
-	white-space: nowrap;
-}
-
-/*=== DIVERS */
-/*===========*/
-.aside.aside_feed .nav-form input,
-.aside.aside_feed .nav-form select {
-	width: 140px;
-}
-
-.aside.aside_feed .nav-form .dropdown .dropdown-menu {
-	right: -20px;
-}
-
-.aside.aside_feed .nav-form .dropdown .dropdown-menu::after {
-	right: 33px;
-}
-
-/*=== Tree */
-.tree {
-	margin: 10px 0;
-}
-.tree#sidebar {
-	scrollbar-color: rgba(255, 255, 0, 0.1) rgba(0, 0, 0, 0.05);
-	scrollbar-color: #36333033 #36333022;
-}
-.tree .tree-folder {
-	border-bottom: 1px solid #f0e7da;
-	box-shadow: inset -1px -11px 8px rgba(0, 0, 0, 0.2);
-}
-.tree .tree-folder .tree-folder-title {
-	padding: 0.75rem 1rem;
-	background: #fbf9f6;
-	position: relative;
-	font-size: 0.85rem;
-	letter-spacing: 1px;
-	font-weight: 700;
-	text-transform: uppercase;
-}
-.tree .tree-folder .tree-folder-title button.dropdown-toggle {
-	margin: -0.75rem 0.25rem -0.75rem -1rem;
-	padding: 0.75rem 0 0.75rem 1rem;
-}
-.tree .tree-folder .tree-folder-title button.dropdown-toggle:hover .icon {
-	filter: brightness(1.7) !important;
-	transition: 0.1s linear;
-}
-.tree .tree-folder .tree-folder-title .icon {
-	margin-right: 0.5rem;
-}
-.tree .tree-folder .tree-folder-title .title {
-	background: inherit;
-	color: #363330;
-}
-.tree .tree-folder .tree-folder-title .title:hover {
-	text-decoration: none;
-}
-.tree .tree-folder.active .tree-folder-title {
-	background: #fbf9f6;
-	font-weight: bold;
-}
-.tree .tree-folder .tree-folder-items {
-	background: #f7f2ea;
-}
-.tree .tree-folder .tree-folder-items .item {
-	font-size: 1rem;
-	font-weight: 400;
-	transition: all 0.15s ease-in-out;
-}
-.tree .tree-folder .tree-folder-items .item.active {
-	background: #ca7227;
-}
-.tree .tree-folder .tree-folder-items .item.active .dropdown li a {
-	color: #363330;
-}
-.tree .tree-folder .tree-folder-items .item.active .dropdown li a:hover {
-	color: #363330;
-}
-.tree .tree-folder .tree-folder-items .item.active a {
-	color: #ffffff;
-}
-.tree .tree-folder .tree-folder-items .item:hover {
-	background: #efe3d3;
-}
-.tree .tree-folder .tree-folder-items .item a {
-	text-decoration: none;
-	color: #363330;
-}
-.tree .tree-folder .tree-folder-items .item a.dropdown-toggle .icon {
-	margin-right: 0.25rem;
-}
-
-/*=== Buttons */
-.stick input, .stick .btn,
-.group input,
-.group .btn {
-	border-radius: 0;
-}
-.stick .btn:first-child,
-.group .btn:first-child {
-	border-radius: 5px 0 0 5px;
-}
-.stick .btn:last-child, .stick input:last-child, .stick .dropdown:last-child > .btn,
-.group .btn:last-child,
-.group input:last-child,
-.group .dropdown:last-child > .btn {
-	border-radius: 0 5px 5px 0;
-}
-.stick .btn + .btn,
-.stick .btn + input,
-.stick .btn + .dropdown > .btn,
-.stick input + .btn,
-.stick input + input,
-.stick input + .dropdown > .btn,
-.stick .dropdown + .btn,
-.stick .dropdown + input,
-.stick .dropdown + .dropdown > .btn,
-.group .btn + .btn,
-.group .btn + input,
-.group .btn + .dropdown > .btn,
-.group input + .btn,
-.group input + input,
-.group input + .dropdown > .btn,
-.group .dropdown + .btn,
-.group .dropdown + input,
-.group .dropdown + .dropdown > .btn {
-	border-left: 1px solid #e4d8cc;
-}
-
-.aside {
-	background: #fbf9f6;
-}
-.aside.aside_feed {
-	padding: 10px 0;
-	text-align: center;
-	background: #fbf9f6;
-	border-right: 1px solid #f0e7da;
-}
-.aside.aside_feed .tree-folder-title:hover button.dropdown-toggle .icon {
-	filter: none;
-}
-.aside.aside_feed .tree {
-	margin: 10px 0 50px;
-}
-.aside a:hover .icon {
-	filter: brightness(1.7);
-	transition: 0.1s linear;
-}
-
-/* Sidebar des pages de configuration */
-/*=== Navigation */
-.nav-list {
-	font-size: 1rem;
-}
-.nav-list .item.nav-header,
-.nav-list .item {
-	min-height: 2.5em;
-	line-height: 2.5em;
-}
-.nav-list .item {
-	background: #fbf9f6;
-	min-height: 2.5em;
-	line-height: 2.5em;
-}
-.nav-list .item.nav-header {
-	min-height: 2.5em;
-	line-height: 2.5em;
-}
-.nav-list .item a,
-.nav-list .item .as-link {
-	padding: 0 1rem;
-	color: #363330;
-	transition: all 0.15s ease-in-out;
-}
-.nav-list .item a:hover,
-.nav-list .item .as-link:hover {
-	background: #efe3d3;
-	text-decoration: none;
-}
-.nav-list .item.active {
-	background: #ca7227;
-	color: #fff;
-}
-.nav-list .item.active a,
-.nav-list .item.active .as-link {
-	background: #ca7227;
-	color: #fff;
-	text-decoration: none;
-}
-.nav-list .nav-header {
-	padding: 0 1rem;
-	font-weight: bold;
-	color: #766556;
-	text-transform: uppercase;
-	letter-spacing: 1px;
-}
-.nav-list .nav-form {
-	padding: 3px;
-	text-align: center;
-}
+@charset "UTF-8";
 
-/*=== Aside main page (categories) */
-.aside_feed .tree-folder-title > .title:not([data-unread="0"]) {
-	width: calc(100% - 35px - 35px);
-}
+@import "_fonts.css";
 
-.aside.aside_feed .category .title:not([data-unread="0"])::after {
-	margin: 0.75rem 0 0 0;
-	background-color: rgba(35, 35, 0, 0.15);
-}
+@import "_variables.css";
 
-.aside.aside_feed .feed .item-title:not([data-unread="0"])::after {
-	margin: 0.5em 0 0 0;
-	background-color: rgba(35, 35, 0, 0.15);
-}
+@import "_forms.css";
 
-.feed.item.empty.active {
-	background: #766556;
-}
+@import "_tables.css";
 
-.feed.item.error.active {
-	background: #766556;
-}
+@import "_components.css";
 
-.feed.item.empty,
-.feed.item.empty > a {
-	color: #766556;
-}
+@import "_divers.css";
 
-.feed.item.error,
-.feed.item.error > a {
-	color: #766556;
-}
+@import "_sidebar.css";
 
-.feed.item.empty.active,
-.feed.item.error.active,
-.feed.item.empty.active > a,
-.feed.item.error.active > a {
-	color: #fff;
-}
+@import "_layout.css";
 
-.aside_feed .tree-folder-items .dropdown-menu::after {
-	left: 2px;
-}
+@import "_list-view.css";
 
-.aside_feed .tree-folder-items .item .dropdown-target:target ~ .dropdown-toggle > .icon,
-.aside_feed .tree-folder-items .item:hover .dropdown-toggle > .icon,
-.aside_feed .tree-folder-items .item.active .dropdown-toggle > .icon {
-	border-radius: 3px;
-}
+@import "_global-view.css";
 
-.aside_feed .stick #btn-add {
-	border-left-color: #fbf9f6;
-}
+@import "_reader-view.css";
 
-/*=== STRUCTURE */
-/*===============*/
-/*=== Header */
-.header {
-	background: #fbf9f6;
-}
-.header .item {
-	vertical-align: middle;
-}
-.header .item.title a {
-	padding: 0.5rem 1rem;
-}
-.header .item.title a .logo {
-	filter: invert(80%);
-}
-.header .item.title a:hover .logo {
-	filter: invert(80%) opacity(80%);
-}
-.header .item.search input {
-	width: 350px;
-	color: #363330;
-	border: none;
-	border-radius: 2px 0 0 2px;
-	background-color: #f7f2ea;
-	transition: all 0.15s ease-in-out;
-}
-.header .item.search input:hover {
-	background-color: #efe3d3;
-}
-.header .item.search input:focus {
-	color: #766556;
-	background-color: #fff;
-}
-.header .item.search input:focus ~ .btn,
-.header .item.search input:hover ~ .btn {
-	background-color: #ca7227;
-}
-.header .item.search input:focus ~ .btn .icon,
-.header .item.search input:hover ~ .btn .icon {
-	filter: brightness(3);
-}
-.header .item.search .btn {
-	width: 3rem;
-	border-radius: 0 2px 2px 0;
-	background-color: #f7f2ea;
-	border-left-width: 0;
-	min-height: 35px;
-}
-.header .item.search .btn .icon {
-	filter: invert(49%) sepia(13%) saturate(2426%) hue-rotate(346deg) brightness(99%) contrast(95%);
-}
-.header .item.search .btn:hover {
-	background-color: #b7641d;
-}
-.header .item.search .btn:hover .icon {
-	filter: brightness(3);
-}
-.header .item.configure {
-	text-align: center;
-}
-.header .item.configure .btn {
-	padding: 0.25rem 1rem;
-	background-color: transparent;
-}
+@import "_configuration.css";
 
-/*=== Body */
-#global {
-	height: calc(100vh - (3rem + 2 * var(--frss-padding-top-bottom)));
-}
+@import "_logs.css";
 
-/*=== Prompt (centered) */
-main.prompt {
-	background: #f5f0ec;
-	border-radius: 5px;
-}
+@import "_stats.css";
 
-/*=== New article notification */
-#new-article {
-	background: #ca7227;
-	font-size: 1rem;
-	text-align: center;
-}
-
-#new-article > a {
-	padding: calc(0.75rem + var(--frss-padding-top-bottom)) 1rem;
-	font-weight: bold;
-	color: #fff;
-}
-
-#new-article > a:hover {
-	text-decoration: none;
-	background: #b7641d;
-}
-
-/*=== Transition indication, e.g. day */
-.transition {
-	padding: 1rem 0 0 1.25rem;
-	color: #6d655f;
-	font-size: 0.875rem;
-	font-weight: 700;
-	line-height: 3em;
-	letter-spacing: 1px;
-	text-transform: uppercase;
-}
-.transition .name {
-	padding: 0 1rem 0 1rem;
-	color: #363330;
-	font-size: 0.875rem;
-	position: relative;
-	left: 0;
-	text-transform: uppercase;
-}
+@import "_mobile.css";
 
-.btn {
-	border-left-width: 0;
-	padding: 0.5rem 1rem;
-	background-color: #f5f0ec;
-	background-position: center;
-	background-repeat: no-repeat;
-	transition: all 0.15s ease-in-out;
-}
-.btn:hover {
-	background-color: #e4d8cc;
-}
-.btn.active {
-	background-color: #ca7227;
-}
-
-/*=== Index menu */
-.nav_menu {
-	text-align: center;
-	padding: 5px 0;
-}
-.nav_menu .btn {
-	border-left-width: 0;
-	padding: 0.5rem 1rem;
-	background-color: #fcfaf8;
-	background-position: center;
-	background-repeat: no-repeat;
-}
-.nav_menu .btn:hover {
-	background-color: #e4d8cc;
-}
-.nav_menu .stick .btn,
-.nav_menu .group .btn {
-	border-left-width: 0;
-	padding: 0.5rem 1rem;
-	background-color: #fcfaf8;
-	background-position: center;
-	background-repeat: no-repeat;
-	transition: all 0.15s ease-in-out;
-}
-.nav_menu .stick .btn:hover,
-.nav_menu .group .btn:hover {
-	background-color: #e4d8cc;
-}
-.nav_menu .stick .btn.active,
-.nav_menu .group .btn.active {
-	background-color: #ca7227;
-}
-.nav_menu .stick .btn.active .icon,
-.nav_menu .group .btn.active .icon {
-	filter: brightness(5);
-}
-.nav_menu .stick .btn.read_all,
-.nav_menu .group .btn.read_all {
-	padding: 5px 16px;
-	color: #363330;
-	background-color: #fcfaf8;
-	transition: all 0.15s ease-in-out;
-}
-.nav_menu .stick .btn.read_all:hover,
-.nav_menu .group .btn.read_all:hover {
-	background-color: #e4d8cc;
-}
-.nav_menu .stick .dropdown:not(#dropdown-search-wrapper) a.dropdown-toggle,
-.nav_menu .group .dropdown:not(#dropdown-search-wrapper) a.dropdown-toggle {
-	border-left-width: 0;
-	background-image: url(icons/more.svg);
-}
-.nav_menu .stick .dropdown:not(#dropdown-search-wrapper) a.dropdown-toggle .icon,
-.nav_menu .group .dropdown:not(#dropdown-search-wrapper) a.dropdown-toggle .icon {
-	display: none;
-}
-.nav_menu .stick #dropdown-search-wrapper.dropdown a.dropdown-toggle,
-.nav_menu .group #dropdown-search-wrapper.dropdown a.dropdown-toggle {
-	border-left-width: 0;
-}
-
-#dropdown-query ~ .dropdown-menu .dropdown-header .icon {
-	vertical-align: middle;
-	border-radius: 3px;
-}
-
-/*=== Content of feed articles */
-.content, .content_thin {
-	padding: 20px 10px;
-	font-size: 1.125rem;
-	line-height: 1.8rem;
-}
-.content h1.title a, .content h1 a, .content_thin h1.title a, .content_thin h1 a {
-	color: #363330;
-	font-family: "spectral", serif;
-	font-size: 2rem;
-}
-.content h1.title a:hover, .content h1 a:hover, .content_thin h1.title a:hover, .content_thin h1 a:hover {
-	color: #ca7227;
-	text-decoration: none;
-}
-.content .author, .content_thin .author {
-	color: #6d655f;
-	font-size: 1.125rem;
-}
-.content p, .content ul, .content_thin p, .content_thin ul {
-	font-size: 1.125rem;
-	line-height: 1.8rem;
-}
-.content .content hr, .content_thin .content hr {
-	margin: 30px 10px;
-	background: #e4d8cc;
-	height: 1px;
-	border: 0;
-	box-shadow: 0 2px 5px #ccc;
-}
-.content pre, .content_thin pre {
-	background: #221f1d;
-	color: #fff;
-	border-radius: 3px;
-}
-.content pre code, .content_thin pre code {
-	background: transparent;
-	color: #fff;
-	border: none;
-}
-.content code, .content_thin code {
-	background: #fcfaf8;
-	border-color: #f5f0ec;
-	border-radius: 3px;
-}
-.content blockquote, .content_thin blockquote {
-	margin: 0;
-	padding: 5px 20px;
-	background: #fcfaf8;
-	display: block;
-	color: #363330;
-	border-top: 1px solid #e4d8cc;
-	border-bottom: 1px solid #e4d8cc;
-}
-.content blockquote p, .content_thin blockquote p {
-	margin: 0;
-}
-
-/*=== Notification and actualize notification */
-.notification {
-	padding: 1rem 0;
-	background: #e4d8cc;
-	width: 100%;
-	height: 3rem;
-	color: #766556;
-	font-size: 1em;
-	border: none;
-	position: fixed;
-	top: auto;
-	bottom: 0;
-	left: 0;
-	right: 0;
-	text-align: center;
-	vertical-align: middle;
-}
-.notification a {
-	color: #000;
-}
-.notification .msg {
-	display: inline-block;
-	font-size: 1rem;
-}
-.notification.good {
-	background: #10f5b2;
-	color: #fff;
-}
-.notification.bad {
-	background: #f5633e;
-	color: #fff;
-}
-.notification .close .icon {
-	filter: brightness(3);
-}
-.notification.good .close:hover {
-	background: #0c7556;
-}
-.notification.bad .close:hover {
-	background: #73341f;
-}
-.notification#actualizeProgress br {
-	display: none;
-}
-.notification#actualizeProgress .title {
-	margin: 0 2rem;
-}
-
-/*=== Navigation menu (for articles) */
-#nav_entries {
-	background: #fbf9f6;
-}
-
-/*=== Feed articles */
-.flux {
-	background: #fff;
-	transition: all 0.15s ease-in-out;
-}
-.flux .flux_header:hover {
-	background: #fcfaf8;
-}
-.flux .flux_header:hover:not(.current):hover .item .title {
-	background: #fcfaf8;
-}
-.flux.current {
-	background: #fff;
-	border-left-color: #ca7227;
-}
-.flux.current:not(.active) {
-	background: #fcfaf8;
-}
-.flux.not_read:not(.current) {
-	background: #f2f6f8;
-}
-.flux.not_read:not(.current):hover .item .title {
-	background: #f2f6f8;
-}
-.flux.not_read .item .title a {
-	color: #161a38;
-}
-.flux.not_read .item.website a {
-	color: #161a38;
-}
-.flux.not_read .item .date {
-	color: rgba(22, 26, 56, 0.5);
-}
-.flux.favorite {
-	border-left-color: #ffc300;
-	transition: all 0.15s ease-in-out;
-}
-.flux.favorite:not(.current) {
-	background: #fff6da;
-}
-.flux.favorite:not(.current):hover .item .title {
-	background: #fff6da;
-}
-.flux .website a {
-	color: #363330;
-	opacity: 0.75;
-}
-.flux .flux_header .date,
-.flux .flux_content .bottom .date {
-	color: rgba(54, 51, 48, 0.5);
-	font-size: 0.85rem;
-}
-.flux .bottom {
-	font-size: 1rem;
-	text-align: center;
-}
-
-.flux_header {
-	font-size: 1rem;
-	cursor: pointer;
-	border-top: 1px solid #f5f0ec;
-}
-.flux_header .title {
-	font-size: 1rem;
-}
-
-/*=== GLOBAL VIEW */
-/*================*/
-#stream .box.category:not([data-unread="0"]) .box-title .title {
-	font-weight: bold;
-}
-#stream .box.category .box-title {
-	padding: 1.5rem;
-	background: none;
-}
-#stream .box.category .box-title a.title {
-	color: #766556;
-	font-size: 1rem;
-	font-weight: normal;
-	text-decoration: none;
-	text-align: left;
-	text-transform: uppercase;
-	letter-spacing: 1px;
-}
-#stream .box.category .box-title a.title:not([data-unread="0"])::after {
-	margin: -0.5rem 1rem 0 0;
-	padding: 0 0.75rem;
-	background: #f5f0ec;
-	border-radius: 12px;
-	position: absolute;
-	top: 1.75rem;
-	right: 0;
-	line-height: 1.5rem;
-	text-align: center;
-}
-#stream .box.category .box-title a.title:hover {
-	color: #ca7227;
-}
-#stream .box.category .box-content .item.feed a {
-	color: #363330;
-	font-weight: 400;
-}
-#stream .box.category .box-content .item.feed a:hover {
-	color: #ca7227;
-	text-decoration: none;
-}
-
-#overlay {
-	background: rgba(0, 0, 0, 0.65);
-}
-
-#panel {
-	top: 3rem;
-	right: 3rem;
-	bottom: 3rem;
-	left: 3rem;
-	border-radius: 3px;
-}
-
-/*=== READER VIEW */
-/*================*/
-#stream.reader .flux {
-	background: #f5f0ec;
-	color: #363330;
-	border: none;
-}
-#stream.reader .flux .flux_content {
-	background-color: #fff;
-	border: none;
-}
-#stream.reader .flux .flux_content .author {
-	color: #ba9;
-}
-
-/*=== Configuration pages */
-.post {
-	font-size: 1rem;
-}
-.post h1, .post h2 {
-	color: #363330;
-	font-size: 2rem;
-	margin-top: 1.75rem;
-	font-weight: 300;
-	line-height: 1.2em;
-}
-.post h2 {
-	font-size: 1.5rem;
-}
-.post a[href="./"] {
-	margin: 0;
-	padding: 0.75rem 1.5rem;
-	background: #fcfaf8;
-	display: inline-block;
-	color: #766556;
-	font-size: 1rem;
-	border: 1px solid #e4d8cc;
-	border-radius: 5px;
-	min-width: 15px;
-	line-height: 25px;
-	vertical-align: middle;
-	cursor: pointer;
-	overflow: hidden;
-}
-.post a[href="./"]:hover {
-	background: #ca7227;
-	color: white;
-	border: 1px solid #ca7227;
-	text-decoration: none;
-}
-
-#slider {
-	border-left: none;
-	box-shadow: 0px 6px 8px 0px rgba(0, 0, 0, 0.35);
-}
-
-.theme-preview-list .preview-container .properties {
-	padding: 1rem;
-	background: rgba(0, 0, 0, 0.75);
-	color: white;
-	border: 0;
-}
-.theme-preview-list .preview-container .properties .page-number {
-	right: 1rem;
-	top: 1rem;
-}
-
-/*=== LOGS */
-/*=========*/
-.log-item.log-error {
-	background-color: rgba(202, 114, 39, 0.2);
-}
-
-/*=== STATISTICS */
-/*===============*/
-.stat {
-	margin: 10px 0 20px;
-}
-
-.stat th,
-.stat td,
-.stat tr {
-	border: none;
-}
-
-.stat > table td,
-.stat > table th {
-	border-bottom: 1px solid #e4d8cc;
-}
-
-/*=== MOBILE */
-/*===========*/
-@media (max-width: 840px) {
-	.aside {
-		transition: all 0.2s ease-in-out;
-	}
-	.aside.aside_feed {
-		padding: 0;
-	}
-	.aside .tree .tree-folder .tree-folder-items .item a {
-		padding: 0.5rem 1rem;
-	}
-	.aside .toggle_aside,
-	#overlay .close,
-	.dropdown-menu .toggle_aside,
-	#slider .toggle_aside {
-		background-color: #ca7227;
-	}
-	.aside .toggle_aside:hover,
-	#overlay .close:hover,
-	.dropdown-menu .toggle_aside:hover,
-	#slider .toggle_aside:hover {
-		background-color: #b7641d;
-	}
-	.aside .toggle_aside .icon,
-	#overlay .close .icon,
-	.dropdown-menu .toggle_aside .icon,
-	#slider .toggle_aside .icon {
-		filter: grayscale(100%) brightness(2.5);
-	}
-	.header .item.search {
-		display: none;
-	}
-	.header .item.configure {
-		position: absolute;
-		top: 0;
-		right: 0;
-	}
-	#global {
-		height: calc(100% - 8rem);
-	}
-	#panel {
-		top: 0;
-		right: 0;
-		bottom: 0;
-		left: 0;
-	}
-	.post {
-		padding-left: 1rem;
-		padding-right: 1rem;
-	}
-	.nav_menu .btn {
-		margin: 0;
-		padding: 0.85rem 1.25rem;
-	}
-	.nav_menu .stick,
-	.nav_menu .group {
-		margin: 0.5rem 0.5rem;
-	}
-	.nav_menu .stick .btn,
-	.nav_menu .group .btn {
-		margin: 0;
-		padding: 0.85rem 1.25rem;
-	}
-	.nav_menu .stick .btn.read_all,
-	.nav_menu .group .btn.read_all {
-		padding: 0.85rem 1.25rem;
-	}
-	.nav_menu .search .input {
-		max-width: 97%;
-		width: 90px;
-	}
-	.nav_menu .search .input:focus {
-		width: 400px;
-	}
-	#nav_menu_read_all #nav_menu_read .dropdown-toggle.btn {
-		background-image: none;
-	}
-	#stream .flux .flux_header {
-		padding: 0.5rem 0;
-	}
-	.dropdown-target:target ~ .dropdown-toggle::after {
-		background-color: #fcfaf8;
-		border-top: 1px solid #f5f0ec;
-		border-left: 1px solid #f5f0ec;
-		right: 21px;
-		bottom: -14px;
-	}
-	.dropdown-target:target ~ a.dropdown-toggle:not(.btn)::after {
-		bottom: -17px;
-	}
-	.transition {
-		text-align: center;
-		padding: 1rem 0;
-	}
-	.transition .name {
-		padding: 0;
-		display: block;
-		width: 100%;
-		line-height: 1.5rem;
-		margin-bottom: 1rem;
-	}
-	#nav_entries button {
-		height: 4.5rem;
-	}
-	.notification {
-		border-radius: 0;
-	}
-	.notification a.close {
-		background: transparent;
-		display: block;
-		left: 0;
-	}
-	.notification a.close:hover {
-		opacity: 0.5;
-	}
-	.notification a.close .icon {
-		display: none;
-	}
-}
 /*=== GENERAL */
 /*============*/
 html, body {
-	background: #f5f0ec;
-	color: #161a38;
+	background: var(--grey-light);
+	color: var(--unread-font-color);
 	font-family: "lato", "Helvetica", "Arial", sans-serif;
 	font-size: 0.875rem;
 }
 
 body.formLogin,
 body.register {
-	background: #fbf9f6;
+	background: var(--sid-bg);
 }
 
 /*=== Links */
 a, button.as-link {
 	outline: none;
-	color: #ca7227;
+	color: var(--main-first);
 }
-
-/*# sourceMappingURL=ansum.css.map */
diff --git a/p/themes/Ansum/ansum.css.map b/p/themes/Ansum/ansum.css.map
deleted file mode 100644
index 035af9092..000000000
--- a/p/themes/Ansum/ansum.css.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["_fonts.scss","_mixins.scss","_forms.scss","_variables.scss","_tables.scss","_components.scss","_divers.scss","_sidebar.scss","_layout.scss","_list-view.scss","_global-view.scss","_reader-view.scss","_configuration.scss","_logs.scss","_stats.scss","_mobile.scss","ansum.scss"],"names":[],"mappings":"AAAA;EACC;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;;AC5DD;AAEA;ACCA;AACA;EACC;EACA;EACA,YCac;EDZd,OCOW;EDNX;EACA;EACA;EACA;EACA;EACA;EACA;EDRA;;ACYA;EACC,YCpBW;EDqBX,OCXM;;ADaN;EAEC,YCxBc;;AD2Bf;EACC;;AAKF;EACC,YCRS;EDST;;AAEA;EAEC,YCXU;;ADeZ;EACC;;;AAIF;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA,OCnDW;;;ADsDZ;EACC;EACA;EACA;;;AAGD;EACC;EACA,YCnEO;EDoEP,OC/DW;EDgEX;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC,OC1FiB;ED2FjB,cCnGY;;;ADsGb;EACC,OC5EU;ED6EV,cC7EU;ED8EV;;;AAGD;EACC,OC7FkB;ED8FlB,cC9FkB;;;ADiGnB;EACC;EACA;;AAEA;EACC;EACA;;AAGD;EACC;;AAGD;EACC;EACA;;AAGD;EACC;;AAGD;EACC;EACA;;AAGD;EACC;;;AE5IF;AACA;EACC;;;AAGD;EACC;;;AAGD;EACC,YDSc;;;ACNf;AAAA;EAEC;EACA;;;ACZD;AACA;AACA;AAGA;AACA;EACC;;AAGC;EACC;;;AAMH;AAEC;EACC,kBFPkB;;;AEWpB;EACC;EACA;EACA,YFZc;EEad;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;AAGD;AAAA;EAEC;EACA;EACA;EACA,OFlCU;EEmCV;EACA;;AAGD;EJ/CA;;AImDC;AAAA;AAAA;EAGC;EACA,OFtDe;EEuDf;EACA;;AAEA;AAAA;AAAA;EACC;;AAMD;AAAA;EACC,YF1ES;EE2ET,OFjEI;;AEmEJ;AAAA;EACC;;AAKH;EACC;;AAEA;EACC,kBFpES;;AEwET;EACC;;AAMF;AAAA;EAEC,YFpGS;EEqGT,OF3FI;;AE6FJ;AAAA;EACC;;AAMF;EACC;EACA;;AAIF;EACC;EACA;EACA,kBFpGU;;AEuGX;EACC;EACA,kBFzGU;;AE8GX;EACC;EACA;EACA;;;AAQF;EACC;;AAEA;AAAA;EAEC,OFzIe;;AE2If;AAAA;EACC,OF1II;;AE8IN;EACC,YFzJU;;;AEiKb;AACA;EACC,YF/Ic;EEgJd,OFrJW;EEsJX;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;;;AAGD;EACC,YFrJe;EEsJf,OFrJc;EEsJd;;;AAGD;EACC,YFvJe;EEwJf,OFvJc;EEwJd;;;AAGD;EACC,YFrKa;EEsKb,OFrKY;EEsKZ;;;AAGD;AACA;EACC,YFrLY;EEsLZ,OFjMiB;;AEmMjB;EACC,OFpMgB;;;AEwMlB;AAAA;EAEC;;;AAGD;AACA;EACC,YF7MO;EE+MP;EACA;EACA;;AAEA;EACC,YF3MW;EE4MX,OFvNgB;EEwNhB;;AAGD;EACC;;AAEA;EACC;EACA,OFhOe;EEiOf;EACA;EACA;;AAGD;EACC;;AAIF;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;EACA,kBF9PU;;AEgQV;EACC;;;AAMJ;AACA;EACC;EACA;EACA,YFzQkB;EE0QlB,OF5QY;EFOZ;;AIyQA;EACC,YFjRW;EEkRX;;AAEA;EACC;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;;ACjSF;AACA;AACA;AAAA;EAEC;;;AAGD;EACC;;;AAGD;EACC;;;ACND;AACA;EACC;;AAEA;EACC;EACA;;AAGD;EACC;EACA;;AAEA;EACC;EACA,YJyBM;EIxBN;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;AAGC;EACC;EACA;;AAKH;EACC;;AAGD;EACC;EACA,OJDa;;AIGb;EACC;;AAMF;EACC,YJVK;EIWL;;AAIF;EACC,YJfU;;AIiBV;EACC;EACA;EN1DH;;AM8DG;EACC,YJtEQ;;AIwER;EACC,OJjEY;;AImEZ;EACC,OJhCU;;AIoCZ;EACC,OJ9BY;;AIkCd;EACC,YJvCS;;AI0CV;EACC;EACA,OJ/CY;;AIkDX;EACC;;;AASP;AAGC;AAAA;AAAA;EACC;;AAGD;AAAA;EACC;;AAGD;AAAA;AAAA;AAAA;EACC;;AAGD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EASC;;;AAKF;EACC,YJzFQ;;AI4FR;EACC;EACA;EACA,YJ/FO;EIgGP;;AAEA;EACC;;AAIF;EACC;;AAIA;EACC;EACA;;;AAOH;AAIA;AACA;EACC;;AAEA;AAAA;EAEC;EACA;;AAGD;EACC,YJpIO;EIqIP;EACA;;AAEA;EACC;EACA;;AAGD;AAAA;EAEC;EACA,OJjJc;EFrChB;;AM2LC;AAAA;EAEC,YJrJW;EIsJX;;AAGD;EACC,YJzMU;EI0MV,OJhMK;;AIkML;EACC,YJ7MS;EI8MT,OJpMI;EIqMJ;;AAKH;EACC;EACA;EACA,OJxMU;EIyMV;EACA;;AAGD;EACC;EACA;;;AAIF;AACA;EACC;;;AAGD;EACC;EACA,kBJrLW;;;AIwLZ;EACC;EACA,kBJ1LW;;;AI6LZ;EACC,YJnOW;;;AIsOZ;EACC,YJvOW;;;AI0OZ;AAAA;EAEC,OJ5OW;;;AI+OZ;AAAA;EAEC,OJjPW;;;AIoPZ;AAAA;AAAA;AAAA;EAIC,OJ7PO;;;AIgQR;EACC;;;AAGD;AAAA;AAAA;EAGC;;;AAGD;EACC,mBJxOQ;;;AK1CT;AACA;AACA;AACA;EACC,YLsCQ;;AKpCR;EACC;;AAGC;EACC;;AAEA;EACC;;AAIA;EACC;;AAOH;EACC;EACA,OLaa;EKZb;EACA;EACA,kBLYS;EFvCZ;;AO+BG;EACC,kBLQS;;AKLV;EACC,OL5BO;EK6BP,kBLlCG;;AKsCL;AAAA;EAEC,kBLlDS;;AKoDT;AAAA;EACC;;AAIF;EACC;EACA;EACA,kBLdS;EKeT;EACA;;AAEA;EACC;;AAGD;EACC,kBLpEY;;AKsEZ;EACC;;AAMJ;EACC;;AAEA;EACC;EACA;;;AAMJ;AACA;EACC;;;AAGD;AACA;EACC,YL7EY;EK8EZ;;;AAGD;AACA;EACC,YLtGY;EKuGZ;EACA;;;AAGD;EACC;EACA;EACA,OLpGO;;;AKuGR;EACC;EACA,YLlHgB;;;AKqHjB;AACA;EACC;EACA,OLhHkB;EKiHlB;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA,OL1HgB;EK2HhB;EACA;EACA;EACA;;;AAIF;EACC;EACA;EACA,kBL1HY;EK2HZ;EACA;EPxIA;;AO4IA;EACC,kBLlIkB;;AKqInB;EACC,kBLxJW;;;AK4Jb;AACA;EACC;EACA;;AAEA;EACC;EACA;EACA,kBLhJa;EKiJb;EACA;;AAEA;EACC,kBLvJiB;;AK6JlB;AAAA;EACC;EACA;EACA,kBL9JY;EK+JZ;EACA;EP7KF;;AOiLE;AAAA;EACC,kBLvKgB;;AK0KjB;AAAA;EACC,kBL7LS;;AK+LT;AAAA;EACC;;AAIF;AAAA;EACC;EACA,OL9Lc;EK+Ld,kBLnLW;EFbd;;AOoMG;AAAA;EACC,kBL1Le;;AKgMjB;AAAA;EACC;EACA;;AAEA;AAAA;EACC;;AAMF;AAAA;EACC;;;AAOJ;EACC;EACA;;;AAID;AACA;EACC;EAEA;EACA;;AAGC;EACC,OL5Oe;EK6Of;EACA;;AAEA;EACC,OLzPS;EK0PT;;AAKH;EACC,OLvPiB;EKwPjB;;AAGD;EACC;EACA;;AAGD;EACC;EACA,YLzPkB;EK0PlB;EACA;EACA;;AAGD;EACC,YL7QkB;EK8QlB,OLzQM;EK0QN;;AAEA;EACC;EACA,OL9QK;EK+QL;;AAIF;EACC,YL1Qa;EK2Qb,cL5QW;EK6QX;;AAGD;EACC;EACA;EACA,YLlRa;EKmRb;EACA,OLhSgB;EKiShB;EACA;;AAEA;EACC;;;AAMH;AACA;EACC;EACA,YLpSmB;EKqSnB;EACA;EACA,OL1SW;EK2SX;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;AAGD;EACC;EACA;;AAGD;EACC,YL3SW;EK4SX,OLrUM;;AKwUP;EACC,YLxTS;EKyTT,OL1UM;;AK8UN;EACC;;AAIF;EACC,YLzTa;;AK4Td;EACC,YLrUW;;AKyUX;EACC;;AAGD;EACC;;;AAKH;AACA;EACC,YLrUQ;;;AMxCT;AACA;EAEC,YNEO;EFHP;;AQMC;EACC,YNMY;;AMJZ;EACC,YNGW;;AMEd;EACC,YNbM;EMcN,mBNxBW;;AM0BX;EACC,YNPY;;AMWd;EACC,YNTU;;AMWV;EACC,YNZS;;AMkBT;EACC,ONpBgB;;AMyBjB;EACC,ON1BgB;;AM8BlB;EACC;;AAIF;EACC,mBNlBO;EFjCR;;AQwDA;EACC,YNvBU;;AMyBV;EACC,YN1BS;;AM+BV;EACC,ONjEe;EMkEf;;AAIF;AAAA;EAEC;EACA;;AAGD;EACC;EACA;;;AAIF;EACC;EACA;EACA;;AAEA;EACC;;;AC/FF;AACA;AAGE;EACC;;AAGD;EACC;EACA;;AAEA;EACC,OPCQ;EOAR;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA,YPNQ;EOOR;EACA;EACA;EACA;EACA;EACA;;AAGD;EACC,OPnCQ;;AO0CT;EACC,OPnCa;EOoCb;;AAEA;EACC,OP/CO;EOgDP;;;AAUN;EACC;;;AAGD;EACC;EACA;EACA;EACA;EACA;;;AClED;AACA;AAEC;EACC,YRcW;EQbX,OREgB;EQDhB;;AAEA;EACC;EACA;;AAEA;EACC,OREe;;;ASfnB;AACA;EACC;;AAEA;EACC,OTEgB;ESDhB;EACA;EACA;EACA;;AAGD;EACC;;AAGD;EAEC;EACA;EACA,YTDa;ESEb;EACA,OTRU;ESSV;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC,YTlCU;ESmCV;EACA;EACA;;;AAQH;EACC;EACA;;;AAKC;EACC;EACA;EACA;EACA;;AAEA;EACC;EACA;;;AC3DJ;AACA;AACA;EACC;;;ACHD;AACA;AACA;EACC;;;AAGD;AAAA;AAAA;EAGC;;;AAGD;AAAA;EAEC;;;ACZD;AACA;AAEA;EACC;IdAA;;EcIC;IACC;;EAGD;IACC;;EAIF;AAAA;AAAA;AAAA;IAIC,kBZxBW;;EY0BX;AAAA;AAAA;AAAA;IACC,kBZ1Bc;;EY6Bf;AAAA;AAAA;AAAA;IACC;;EAMA;IACC;;EAGD;IACC;IACA;IACA;;EAKH;IACC;;EAGD;IACC;IACA;IACA;IACA;;EAGD;IACC;IACA;;EAIA;IACC;IACA;;EAGD;AAAA;IAEC;;EAEA;AAAA;IACC;IACA;;EAEA;AAAA;IACC;;EAMF;IACC;IACA;;EAEA;IACC;;EAQF;IACC;;EAMF;IACC,kBZvFY;IYwFZ;IACA;IACA;IACA;;EAKC;IACC;;EAMJ;IACC;IACA;;EAEA;IACC;IACA;IACA;IACA;IACA;;EAKF;IACC;;EAGD;IACC;;EAEA;IACC;IACA;IACA;;EAGD;IACC;;EAGD;IACC;;;AC1HH;AACA;AACA;EACC,YbjBY;EakBZ,ObfmB;EagBnB;EACA;;;AAGD;AAAA;EAEC,YbCQ;;;AaET;AACA;EACC;EACA,OblDY","file":"ansum.css"}
\ No newline at end of file
diff --git a/p/themes/Ansum/ansum.rtl.css b/p/themes/Ansum/ansum.rtl.css
index 2cfaef5aa..2084f9496 100644
--- a/p/themes/Ansum/ansum.rtl.css
+++ b/p/themes/Ansum/ansum.rtl.css
@@ -1,1339 +1,51 @@
-@font-face {
-	font-family: "lato";
-	font-style: normal;
-	font-stretch: normal;
-	font-weight: 400;
-	src: local("Lato"), url("../fonts/LatoLatin-Regular.woff") format("woff");
-}
-@font-face {
-	font-family: "lato";
-	font-style: italic;
-	font-stretch: normal;
-	font-weight: 400;
-	src: local("Lato"), url("../fonts/LatoLatin-Italic.woff") format("woff");
-}
-@font-face {
-	font-family: "lato";
-	font-style: normal;
-	font-stretch: normal;
-	font-weight: 700;
-	src: local("Lato"), url("../fonts/LatoLatin-Bold.woff") format("woff");
-}
-@font-face {
-	font-family: "lato";
-	font-style: italic;
-	font-stretch: normal;
-	font-weight: 700;
-	src: local("Lato"), url("../fonts/LatoLatin-BoldItalic.woff") format("woff");
-}
-@font-face {
-	font-family: "spectral";
-	font-style: normal;
-	font-stretch: normal;
-	font-weight: 400;
-	src: local("Spectral"), url("../fonts/Spectral-Regular.woff") format("woff");
-}
-@font-face {
-	font-family: "spectral";
-	font-style: italic;
-	font-stretch: normal;
-	font-weight: 400;
-	src: local("Spectral"), url("../fonts/Spectral-Italic.woff") format("woff");
-}
-@font-face {
-	font-family: "spectral";
-	font-style: normal;
-	font-stretch: normal;
-	font-weight: 700;
-	src: local("Spectral"), url("../fonts/Spectral-Bold.woff") format("woff");
-}
-@font-face {
-	font-family: "spectral";
-	font-style: italic;
-	font-stretch: normal;
-	font-weight: 700;
-	src: local("Spectral"), url("../fonts/Spectral-BoldItalic.woff") format("woff");
-}
-/* stylelint-disable property-no-vendor-prefix */
-/* FUNCTIONS */
-/* btns */
-.btn {
-	margin: 0;
-	padding: 0.5rem 1.5rem;
-	background: #fcfaf8;
-	color: #766556;
-	font-size: 1rem;
-	border: none;
-	border-radius: 5px;
-	min-height: 25px;
-	min-width: 15px;
-	line-height: 25px;
-	vertical-align: middle;
-	transition: all 0.15s ease-in-out;
-}
-.btn.btn-important {
-	background: #ca7227;
-	color: #fff;
-}
-.btn.btn-important:hover, .btn.btn-important:active {
-	background: #b7641d;
-}
-.btn.btn-important img {
-	filter: brightness(3);
-}
-.btn.btn-attention {
-	background: #f5633e;
-	color: #fff;
-}
-.btn.btn-attention:hover, .btn.btn-attention:active {
-	background: #73341f;
-}
-.btn:hover {
-	text-decoration: none;
-}
+@charset "UTF-8";
 
-/*=== Forms */
-legend {
-	margin: 2rem 0 1rem 0;
-	padding: 0;
-	display: inline-block;
-	width: auto;
-	font-size: 1rem;
-	clear: both;
-	text-transform: uppercase;
-	letter-spacing: 1px;
-	font-weight: 700;
-}
+@import "_fonts.rtl.css";
 
-label {
-	min-height: 25px;
-	padding: 5px 0;
-	cursor: pointer;
-	color: #766556;
-}
+@import "_variables.rtl.css";
 
-textarea {
-	max-width: 100%;
-}
+@import "_forms.rtl.css";
 
-input, select, textarea, button {
-	padding: 5px 10px;
-	background: #fff;
-	color: #766556;
-	font-family: "lato", "Helvetica", "Arial", sans-serif;
-	font-size: 1rem;
-	border: 1px solid #f5f0ec;
-	border-radius: 2px;
-	min-height: 25px;
-	line-height: 25px;
-	vertical-align: middle;
-}
+@import "_tables.rtl.css";
 
-select {
-	padding-top: 9px;
-	padding-bottom: 9px;
-}
+@import "_components.rtl.css";
 
-option {
-	padding: 0 0.5em;
-}
+@import "_divers.rtl.css";
 
-input:focus, select:focus, textarea:focus {
-	color: #363330;
-	border-color: #ca7227;
-}
+@import "_sidebar.rtl.css";
 
-input:invalid, select:invalid {
-	color: #f5633e;
-	border-color: #f5633e;
-	box-shadow: none;
-}
+@import "_layout.rtl.css";
 
-input:disabled, select:disabled {
-	color: #ba9;
-	border-color: #ba9;
-}
+@import "_list-view.rtl.css";
 
-.form-group {
-	padding: 5px;
-	border-radius: 3px;
-}
-.form-group::after {
-	display: block;
-	clear: both;
-}
-.form-group .group-name {
-	padding: 10px 0;
-}
-.form-group .group-controls {
-	min-height: 25px;
-	padding: 5px 0;
-}
-.form-group .group-controls .control {
-	line-height: 2em;
-}
-.form-group.form-actions {
-	margin: 15px 0 25px;
-	padding: 5px 0;
-}
-.form-group.form-actions .btn {
-	margin: 0 0 0 0.5rem;
-}
+@import "_global-view.rtl.css";
 
-/*=== Tables */
-table {
-	border-collapse: collapse;
-}
+@import "_reader-view.rtl.css";
 
-th, td {
-	border: 1px solid #e4d8cc;
-}
+@import "_configuration.rtl.css";
 
-th {
-	background: #fcfaf8;
-}
+@import "_logs.rtl.css";
 
-.config-articleicons td,
-.config-articleicons th {
-	font-weight: normal;
-	text-align: center;
-}
+@import "_stats.rtl.css";
 
-/*=== COMPONENTS */
-/*===============*/
-/*=== Forms */
-/*=== Horizontal-list */
-.horizontal-list {
-	padding: 0.1rem 0;
-}
-.horizontal-list > .item:first-child {
-	padding-right: 0.5rem;
-}
-
-/*=== Dropdown */
-.dropdown .dropdown-target:target + .btn {
-	background-color: #e4d8cc;
-}
-
-.dropdown-menu {
-	margin: 9px 0 0 0;
-	padding: 0.5rem 0 1rem 0;
-	background: #fcfaf8;
-	font-size: 1rem;
-	border: none;
-	border-radius: 3px;
-	box-shadow: 0px 6px 8px 0px rgba(0, 0, 0, 0.35);
-	text-align: right;
-}
-.dropdown-menu::after {
-	border: none;
-	left: 17px;
-}
-.dropdown-menu .dropdown-header,
-.dropdown-menu .dropdown-section .dropdown-section-title {
-	padding: 1rem 1.5rem;
-	font-weight: bold;
-	text-align: right;
-	color: #766556;
-	text-transform: uppercase;
-	letter-spacing: 1px;
-}
-.dropdown-menu .item {
-	transition: all 0.075s ease-in-out;
-}
-.dropdown-menu .item > a,
-.dropdown-menu .item > span,
-.dropdown-menu .item > .as-link {
-	padding: 0 2rem;
-	color: #363330;
-	font-size: inherit;
-	line-height: 2.5em;
-}
-.dropdown-menu .item > a span.icon,
-.dropdown-menu .item > span span.icon,
-.dropdown-menu .item > .as-link span.icon {
-	padding: 0 0.25rem !important;
-}
-.dropdown-menu .item > a:not(.addItem):hover,
-.dropdown-menu .item > .as-link:not(.addItem):hover {
-	background: #ca7227;
-	color: #fff;
-}
-.dropdown-menu .item > a:not(.addItem):hover .icon,
-.dropdown-menu .item > .as-link:not(.addItem):hover .icon {
-	filter: grayscale(100%) brightness(2.5);
-}
-.dropdown-menu .item.dropdown-section {
-	margin-top: 0.75rem;
-}
-.dropdown-menu .item.dropdown-section ~ .dropdown-section {
-	border-top-color: #f5f0ec;
-}
-.dropdown-menu .item.dropdown-section .item a, .dropdown-menu .item.dropdown-section .item .as-link {
-	padding-right: 2rem;
-}
-.dropdown-menu .item:not(.addItem) > a:hover,
-.dropdown-menu .item:not(.addItem) button:hover {
-	background: #ca7227;
-	color: #fff;
-}
-.dropdown-menu .item:not(.addItem) > a:hover .icon,
-.dropdown-menu .item:not(.addItem) button:hover .icon {
-	filter: brightness(3);
-}
-.dropdown-menu .item[aria-checked=true] a::before {
-	margin: 0 -14px 0 0;
-	font-weight: bold;
-}
-.dropdown-menu .item ~ .dropdown-header {
-	margin-top: 0.75rem;
-	padding-top: 1.75rem;
-	border-top-color: #f5f0ec;
-}
-.dropdown-menu .item.separator {
-	margin-top: 0.75rem;
-	border-top-color: #f5f0ec;
-}
-.dropdown-menu .input select, .dropdown-menu .input input {
-	margin: 0 auto 5px;
-	padding: 2px 5px;
-	border-radius: 3px;
-}
-
-.tree .tree-folder .tree-folder-items .dropdown-menu .item {
-	padding: 0;
-}
-.tree .tree-folder .tree-folder-items .dropdown-menu .item a,
-.tree .tree-folder .tree-folder-items .dropdown-menu .item button {
-	color: #363330;
-}
-.tree .tree-folder .tree-folder-items .dropdown-menu .item a:hover,
-.tree .tree-folder .tree-folder-items .dropdown-menu .item button:hover {
-	color: #fff;
-}
-.tree .tree-folder .tree-folder-items .dropdown-menu .item:hover {
-	background: #ca7227;
-}
-
-/*=== Alerts */
-.alert {
-	background: #fcfaf8;
-	color: #766556;
-	font-size: 1rem;
-	border: 1px solid #d9ccbf;
-	border-radius: 3px;
-	text-shadow: 0 0 1px #f5f0ec;
-}
-
-.alert-head {
-	font-size: 1.15em;
-}
-
-.alert > a {
-	text-decoration: underline;
-	color: inherit;
-}
-
-.alert-warn {
-	background: #fdfde0;
-	color: #73762f;
-	border: 1px solid #73762f33;
-}
-
-.alert-success {
-	background: #cffdef;
-	color: #0c7556;
-	border: 1px solid #0c755633;
-}
-
-.alert-error {
-	background: #fde0d8;
-	color: #73341f;
-	border: 1px solid #73341f33;
-}
-
-/*=== Pagination */
-.pagination {
-	background: #f5f0ec;
-	color: #363330;
-}
-.pagination .item a {
-	color: #363330;
-}
-
-#load_more.loading,
-#load_more.loading:hover {
-	background: url("loader.gif") center center no-repeat #34495e;
-}
-
-/*=== Boxes */
-.box {
-	background: #fff;
-	border: none;
-	border-radius: 3px;
-	box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25);
-}
-.box .box-title {
-	background: #f5f0ec;
-	color: #363330;
-	border-radius: 2px 2px 0 0;
-}
-.box .box-content {
-	padding-right: 30px;
-}
-.box .box-content .item {
-	padding: 0.5rem 0;
-	color: #363330;
-	font-size: 1rem;
-	border-bottom: 1px solid #f5f0ec;
-	line-height: 1.7em;
-}
-.box .box-content .item:last-child {
-	border-bottom: none;
-}
-.box .configure {
-	margin-left: 0.5rem;
-	padding: 0.25rem;
-	border-radius: 3px;
-}
-.box .configure .icon {
-	vertical-align: middle;
-}
-.box .configure:hover {
-	border-radius: 2px;
-	background-color: #ca7227;
-}
-.box .configure:hover .icon {
-	filter: brightness(3);
-}
-
-/*=== "Load more" part */
-#bigMarkAsRead.big {
-	text-align: center;
-	text-decoration: none;
-	background: #fdf6ef;
-	color: #ca7227;
-	transition: all 0.15s ease-in-out;
-}
-#bigMarkAsRead.big:hover {
-	background: #ca7227;
-	color: #fff;
-}
-#bigMarkAsRead.big:hover .bigTick {
-	filter: brightness(7);
-}
-#bigMarkAsRead.big .bigTick {
-	margin: 0.5rem 0;
-	background: url(icons/tick-color.svg) center no-repeat;
-	display: inline-block;
-	width: 64px;
-	height: 64px;
-	text-indent: -9999px;
-	white-space: nowrap;
-}
-
-/*=== DIVERS */
-/*===========*/
-.aside.aside_feed .nav-form input,
-.aside.aside_feed .nav-form select {
-	width: 140px;
-}
-
-.aside.aside_feed .nav-form .dropdown .dropdown-menu {
-	left: -20px;
-}
-
-.aside.aside_feed .nav-form .dropdown .dropdown-menu::after {
-	left: 33px;
-}
-
-/*=== Tree */
-.tree {
-	margin: 10px 0;
-}
-.tree#sidebar {
-	scrollbar-color: rgba(255, 255, 0, 0.1) rgba(0, 0, 0, 0.05);
-	scrollbar-color: #36333033 #36333022;
-}
-.tree .tree-folder {
-	border-bottom: 1px solid #f0e7da;
-	box-shadow: inset 1px -11px 8px rgba(0, 0, 0, 0.2);
-}
-.tree .tree-folder .tree-folder-title {
-	padding: 0.75rem 1rem;
-	background: #fbf9f6;
-	position: relative;
-	font-size: 0.85rem;
-	letter-spacing: 1px;
-	font-weight: 700;
-	text-transform: uppercase;
-}
-.tree .tree-folder .tree-folder-title button.dropdown-toggle {
-	margin: -0.75rem -1rem -0.75rem 0.25rem;
-	padding: 0.75rem 1rem 0.75rem 0;
-}
-.tree .tree-folder .tree-folder-title button.dropdown-toggle:hover .icon {
-	filter: brightness(1.7) !important;
-	transition: 0.1s linear;
-}
-.tree .tree-folder .tree-folder-title .icon {
-	margin-left: 0.5rem;
-}
-.tree .tree-folder .tree-folder-title .title {
-	background: inherit;
-	color: #363330;
-}
-.tree .tree-folder .tree-folder-title .title:hover {
-	text-decoration: none;
-}
-.tree .tree-folder.active .tree-folder-title {
-	background: #fbf9f6;
-	font-weight: bold;
-}
-.tree .tree-folder .tree-folder-items {
-	background: #f7f2ea;
-}
-.tree .tree-folder .tree-folder-items .item {
-	font-size: 1rem;
-	font-weight: 400;
-	transition: all 0.15s ease-in-out;
-}
-.tree .tree-folder .tree-folder-items .item.active {
-	background: #ca7227;
-}
-.tree .tree-folder .tree-folder-items .item.active .dropdown li a {
-	color: #363330;
-}
-.tree .tree-folder .tree-folder-items .item.active .dropdown li a:hover {
-	color: #363330;
-}
-.tree .tree-folder .tree-folder-items .item.active a {
-	color: #ffffff;
-}
-.tree .tree-folder .tree-folder-items .item:hover {
-	background: #efe3d3;
-}
-.tree .tree-folder .tree-folder-items .item a {
-	text-decoration: none;
-	color: #363330;
-}
-.tree .tree-folder .tree-folder-items .item a.dropdown-toggle .icon {
-	margin-left: 0.25rem;
-}
-
-/*=== Buttons */
-.stick input, .stick .btn,
-.group input,
-.group .btn {
-	border-radius: 0;
-}
-.stick .btn:first-child,
-.group .btn:first-child {
-	border-radius: 0 5px 5px 0;
-}
-.stick .btn:last-child, .stick input:last-child, .stick .dropdown:last-child > .btn,
-.group .btn:last-child,
-.group input:last-child,
-.group .dropdown:last-child > .btn {
-	border-radius: 5px 0 0 5px;
-}
-.stick .btn + .btn,
-.stick .btn + input,
-.stick .btn + .dropdown > .btn,
-.stick input + .btn,
-.stick input + input,
-.stick input + .dropdown > .btn,
-.stick .dropdown + .btn,
-.stick .dropdown + input,
-.stick .dropdown + .dropdown > .btn,
-.group .btn + .btn,
-.group .btn + input,
-.group .btn + .dropdown > .btn,
-.group input + .btn,
-.group input + input,
-.group input + .dropdown > .btn,
-.group .dropdown + .btn,
-.group .dropdown + input,
-.group .dropdown + .dropdown > .btn {
-	border-right: 1px solid #e4d8cc;
-}
-
-.aside {
-	background: #fbf9f6;
-}
-.aside.aside_feed {
-	padding: 10px 0;
-	text-align: center;
-	background: #fbf9f6;
-	border-left: 1px solid #f0e7da;
-}
-.aside.aside_feed .tree-folder-title:hover button.dropdown-toggle .icon {
-	filter: none;
-}
-.aside.aside_feed .tree {
-	margin: 10px 0 50px;
-}
-.aside a:hover .icon {
-	filter: brightness(1.7);
-	transition: 0.1s linear;
-}
-
-/* Sidebar des pages de configuration */
-/*=== Navigation */
-.nav-list {
-	font-size: 1rem;
-}
-.nav-list .item.nav-header,
-.nav-list .item {
-	min-height: 2.5em;
-	line-height: 2.5em;
-}
-.nav-list .item {
-	background: #fbf9f6;
-	min-height: 2.5em;
-	line-height: 2.5em;
-}
-.nav-list .item.nav-header {
-	min-height: 2.5em;
-	line-height: 2.5em;
-}
-.nav-list .item a,
-.nav-list .item .as-link {
-	padding: 0 1rem;
-	color: #363330;
-	transition: all 0.15s ease-in-out;
-}
-.nav-list .item a:hover,
-.nav-list .item .as-link:hover {
-	background: #efe3d3;
-	text-decoration: none;
-}
-.nav-list .item.active {
-	background: #ca7227;
-	color: #fff;
-}
-.nav-list .item.active a,
-.nav-list .item.active .as-link {
-	background: #ca7227;
-	color: #fff;
-	text-decoration: none;
-}
-.nav-list .nav-header {
-	padding: 0 1rem;
-	font-weight: bold;
-	color: #766556;
-	text-transform: uppercase;
-	letter-spacing: 1px;
-}
-.nav-list .nav-form {
-	padding: 3px;
-	text-align: center;
-}
-
-/*=== Aside main page (categories) */
-.aside_feed .tree-folder-title > .title:not([data-unread="0"]) {
-	width: calc(100% - 35px - 35px);
-}
-
-.aside.aside_feed .category .title:not([data-unread="0"])::after {
-	margin: 0.75rem 0 0 0;
-	background-color: rgba(35, 35, 0, 0.15);
-}
-
-.aside.aside_feed .feed .item-title:not([data-unread="0"])::after {
-	margin: 0.5em 0 0 0;
-	background-color: rgba(35, 35, 0, 0.15);
-}
+@import "_mobile.rtl.css";
 
-.feed.item.empty.active {
-	background: #766556;
-}
-
-.feed.item.error.active {
-	background: #766556;
-}
-
-.feed.item.empty,
-.feed.item.empty > a {
-	color: #766556;
-}
-
-.feed.item.error,
-.feed.item.error > a {
-	color: #766556;
-}
-
-.feed.item.empty.active,
-.feed.item.error.active,
-.feed.item.empty.active > a,
-.feed.item.error.active > a {
-	color: #fff;
-}
-
-.aside_feed .tree-folder-items .dropdown-menu::after {
-	right: 2px;
-}
-
-.aside_feed .tree-folder-items .item .dropdown-target:target ~ .dropdown-toggle > .icon,
-.aside_feed .tree-folder-items .item:hover .dropdown-toggle > .icon,
-.aside_feed .tree-folder-items .item.active .dropdown-toggle > .icon {
-	border-radius: 3px;
-}
-
-.aside_feed .stick #btn-add {
-	border-right-color: #fbf9f6;
-}
-
-/*=== STRUCTURE */
-/*===============*/
-/*=== Header */
-.header {
-	background: #fbf9f6;
-}
-.header .item {
-	vertical-align: middle;
-}
-.header .item.title a {
-	padding: 0.5rem 1rem;
-}
-.header .item.title a .logo {
-	filter: invert(80%);
-}
-.header .item.title a:hover .logo {
-	filter: invert(80%) opacity(80%);
-}
-.header .item.search input {
-	width: 350px;
-	color: #363330;
-	border: none;
-	border-radius: 0 2px 2px 0;
-	background-color: #f7f2ea;
-	transition: all 0.15s ease-in-out;
-}
-.header .item.search input:hover {
-	background-color: #efe3d3;
-}
-.header .item.search input:focus {
-	color: #766556;
-	background-color: #fff;
-}
-.header .item.search input:focus ~ .btn,
-.header .item.search input:hover ~ .btn {
-	background-color: #ca7227;
-}
-.header .item.search input:focus ~ .btn .icon,
-.header .item.search input:hover ~ .btn .icon {
-	filter: brightness(3);
-}
-.header .item.search .btn {
-	width: 3rem;
-	border-radius: 2px 0 0 2px;
-	background-color: #f7f2ea;
-	border-right-width: 0;
-	min-height: 35px;
-}
-.header .item.search .btn .icon {
-	filter: invert(49%) sepia(13%) saturate(2426%) hue-rotate(346deg) brightness(99%) contrast(95%);
-}
-.header .item.search .btn:hover {
-	background-color: #b7641d;
-}
-.header .item.search .btn:hover .icon {
-	filter: brightness(3);
-}
-.header .item.configure {
-	text-align: center;
-}
-.header .item.configure .btn {
-	padding: 0.25rem 1rem;
-	background-color: transparent;
-}
-
-/*=== Body */
-#global {
-	height: calc(100vh - (3rem + 2 * var(--frss-padding-top-bottom)));
-}
-
-/*=== Prompt (centered) */
-main.prompt {
-	background: #f5f0ec;
-	border-radius: 5px;
-}
-
-/*=== New article notification */
-#new-article {
-	background: #ca7227;
-	font-size: 1rem;
-	text-align: center;
-}
-
-#new-article > a {
-	padding: calc(0.75rem + var(--frss-padding-top-bottom)) 1rem;
-	font-weight: bold;
-	color: #fff;
-}
-
-#new-article > a:hover {
-	text-decoration: none;
-	background: #b7641d;
-}
-
-/*=== Transition indication, e.g. day */
-.transition {
-	padding: 1rem 1.25rem 0 0;
-	color: #6d655f;
-	font-size: 0.875rem;
-	font-weight: 700;
-	line-height: 3em;
-	letter-spacing: 1px;
-	text-transform: uppercase;
-}
-.transition .name {
-	padding: 0 1rem 0 1rem;
-	color: #363330;
-	font-size: 0.875rem;
-	position: relative;
-	right: 0;
-	text-transform: uppercase;
-}
-
-.btn {
-	border-right-width: 0;
-	padding: 0.5rem 1rem;
-	background-color: #f5f0ec;
-	background-position: center;
-	background-repeat: no-repeat;
-	transition: all 0.15s ease-in-out;
-}
-.btn:hover {
-	background-color: #e4d8cc;
-}
-.btn.active {
-	background-color: #ca7227;
-}
-
-/*=== Index menu */
-.nav_menu {
-	text-align: center;
-	padding: 5px 0;
-}
-.nav_menu .btn {
-	border-right-width: 0;
-	padding: 0.5rem 1rem;
-	background-color: #fcfaf8;
-	background-position: center;
-	background-repeat: no-repeat;
-}
-.nav_menu .btn:hover {
-	background-color: #e4d8cc;
-}
-.nav_menu .stick .btn,
-.nav_menu .group .btn {
-	border-right-width: 0;
-	padding: 0.5rem 1rem;
-	background-color: #fcfaf8;
-	background-position: center;
-	background-repeat: no-repeat;
-	transition: all 0.15s ease-in-out;
-}
-.nav_menu .stick .btn:hover,
-.nav_menu .group .btn:hover {
-	background-color: #e4d8cc;
-}
-.nav_menu .stick .btn.active,
-.nav_menu .group .btn.active {
-	background-color: #ca7227;
-}
-.nav_menu .stick .btn.active .icon,
-.nav_menu .group .btn.active .icon {
-	filter: brightness(5);
-}
-.nav_menu .stick .btn.read_all,
-.nav_menu .group .btn.read_all {
-	padding: 5px 16px;
-	color: #363330;
-	background-color: #fcfaf8;
-	transition: all 0.15s ease-in-out;
-}
-.nav_menu .stick .btn.read_all:hover,
-.nav_menu .group .btn.read_all:hover {
-	background-color: #e4d8cc;
-}
-.nav_menu .stick .dropdown:not(#dropdown-search-wrapper) a.dropdown-toggle,
-.nav_menu .group .dropdown:not(#dropdown-search-wrapper) a.dropdown-toggle {
-	border-right-width: 0;
-	background-image: url(icons/more.svg);
-}
-.nav_menu .stick .dropdown:not(#dropdown-search-wrapper) a.dropdown-toggle .icon,
-.nav_menu .group .dropdown:not(#dropdown-search-wrapper) a.dropdown-toggle .icon {
-	display: none;
-}
-.nav_menu .stick #dropdown-search-wrapper.dropdown a.dropdown-toggle,
-.nav_menu .group #dropdown-search-wrapper.dropdown a.dropdown-toggle {
-	border-right-width: 0;
-}
-
-#dropdown-query ~ .dropdown-menu .dropdown-header .icon {
-	vertical-align: middle;
-	border-radius: 3px;
-}
-
-/*=== Content of feed articles */
-.content, .content_thin {
-	padding: 20px 10px;
-	font-size: 1.125rem;
-	line-height: 1.8rem;
-}
-.content h1.title a, .content h1 a, .content_thin h1.title a, .content_thin h1 a {
-	color: #363330;
-	font-family: "spectral", serif;
-	font-size: 2rem;
-}
-.content h1.title a:hover, .content h1 a:hover, .content_thin h1.title a:hover, .content_thin h1 a:hover {
-	color: #ca7227;
-	text-decoration: none;
-}
-.content .author, .content_thin .author {
-	color: #6d655f;
-	font-size: 1.125rem;
-}
-.content p, .content ul, .content_thin p, .content_thin ul {
-	font-size: 1.125rem;
-	line-height: 1.8rem;
-}
-.content .content hr, .content_thin .content hr {
-	margin: 30px 10px;
-	background: #e4d8cc;
-	height: 1px;
-	border: 0;
-	box-shadow: 0 2px 5px #ccc;
-}
-.content pre, .content_thin pre {
-	background: #221f1d;
-	color: #fff;
-	border-radius: 3px;
-}
-.content pre code, .content_thin pre code {
-	background: transparent;
-	color: #fff;
-	border: none;
-}
-.content code, .content_thin code {
-	background: #fcfaf8;
-	border-color: #f5f0ec;
-	border-radius: 3px;
-}
-.content blockquote, .content_thin blockquote {
-	margin: 0;
-	padding: 5px 20px;
-	background: #fcfaf8;
-	display: block;
-	color: #363330;
-	border-top: 1px solid #e4d8cc;
-	border-bottom: 1px solid #e4d8cc;
-}
-.content blockquote p, .content_thin blockquote p {
-	margin: 0;
-}
-
-/*=== Notification and actualize notification */
-.notification {
-	padding: 1rem 0;
-	background: #e4d8cc;
-	width: 100%;
-	height: 3rem;
-	color: #766556;
-	font-size: 1em;
-	border: none;
-	position: fixed;
-	top: auto;
-	bottom: 0;
-	right: 0;
-	left: 0;
-	text-align: center;
-	vertical-align: middle;
-}
-.notification a {
-	color: #000;
-}
-.notification .msg {
-	display: inline-block;
-	font-size: 1rem;
-}
-.notification.good {
-	background: #10f5b2;
-	color: #fff;
-}
-.notification.bad {
-	background: #f5633e;
-	color: #fff;
-}
-.notification .close .icon {
-	filter: brightness(3);
-}
-.notification.good .close:hover {
-	background: #0c7556;
-}
-.notification.bad .close:hover {
-	background: #73341f;
-}
-.notification#actualizeProgress br {
-	display: none;
-}
-.notification#actualizeProgress .title {
-	margin: 0 2rem;
-}
-
-/*=== Navigation menu (for articles) */
-#nav_entries {
-	background: #fbf9f6;
-}
-
-/*=== Feed articles */
-.flux {
-	background: #fff;
-	transition: all 0.15s ease-in-out;
-}
-.flux .flux_header:hover {
-	background: #fcfaf8;
-}
-.flux .flux_header:hover:not(.current):hover .item .title {
-	background: #fcfaf8;
-}
-.flux.current {
-	background: #fff;
-	border-right-color: #ca7227;
-}
-.flux.current:not(.active) {
-	background: #fcfaf8;
-}
-.flux.not_read:not(.current) {
-	background: #f2f6f8;
-}
-.flux.not_read:not(.current):hover .item .title {
-	background: #f2f6f8;
-}
-.flux.not_read .item .title a {
-	color: #161a38;
-}
-.flux.not_read .item.website a {
-	color: #161a38;
-}
-.flux.not_read .item .date {
-	color: rgba(22, 26, 56, 0.5);
-}
-.flux.favorite {
-	border-right-color: #ffc300;
-	transition: all 0.15s ease-in-out;
-}
-.flux.favorite:not(.current) {
-	background: #fff6da;
-}
-.flux.favorite:not(.current):hover .item .title {
-	background: #fff6da;
-}
-.flux .website a {
-	color: #363330;
-	opacity: 0.75;
-}
-.flux .flux_header .date,
-.flux .flux_content .bottom .date {
-	color: rgba(54, 51, 48, 0.5);
-	font-size: 0.85rem;
-}
-.flux .bottom {
-	font-size: 1rem;
-	text-align: center;
-}
-
-.flux_header {
-	font-size: 1rem;
-	cursor: pointer;
-	border-top: 1px solid #f5f0ec;
-}
-.flux_header .title {
-	font-size: 1rem;
-}
-
-/*=== GLOBAL VIEW */
-/*================*/
-#stream .box.category:not([data-unread="0"]) .box-title .title {
-	font-weight: bold;
-}
-#stream .box.category .box-title {
-	padding: 1.5rem;
-	background: none;
-}
-#stream .box.category .box-title a.title {
-	color: #766556;
-	font-size: 1rem;
-	font-weight: normal;
-	text-decoration: none;
-	text-align: right;
-	text-transform: uppercase;
-	letter-spacing: 1px;
-}
-#stream .box.category .box-title a.title:not([data-unread="0"])::after {
-	margin: -0.5rem 0 0 1rem;
-	padding: 0 0.75rem;
-	background: #f5f0ec;
-	border-radius: 12px;
-	position: absolute;
-	top: 1.75rem;
-	left: 0;
-	line-height: 1.5rem;
-	text-align: center;
-}
-#stream .box.category .box-title a.title:hover {
-	color: #ca7227;
-}
-#stream .box.category .box-content .item.feed a {
-	color: #363330;
-	font-weight: 400;
-}
-#stream .box.category .box-content .item.feed a:hover {
-	color: #ca7227;
-	text-decoration: none;
-}
-
-#overlay {
-	background: rgba(0, 0, 0, 0.65);
-}
-
-#panel {
-	top: 3rem;
-	left: 3rem;
-	bottom: 3rem;
-	right: 3rem;
-	border-radius: 3px;
-}
-
-/*=== READER VIEW */
-/*================*/
-#stream.reader .flux {
-	background: #f5f0ec;
-	color: #363330;
-	border: none;
-}
-#stream.reader .flux .flux_content {
-	background-color: #fff;
-	border: none;
-}
-#stream.reader .flux .flux_content .author {
-	color: #ba9;
-}
-
-/*=== Configuration pages */
-.post {
-	font-size: 1rem;
-}
-.post h1, .post h2 {
-	color: #363330;
-	font-size: 2rem;
-	margin-top: 1.75rem;
-	font-weight: 300;
-	line-height: 1.2em;
-}
-.post h2 {
-	font-size: 1.5rem;
-}
-.post a[href="./"] {
-	margin: 0;
-	padding: 0.75rem 1.5rem;
-	background: #fcfaf8;
-	display: inline-block;
-	color: #766556;
-	font-size: 1rem;
-	border: 1px solid #e4d8cc;
-	border-radius: 5px;
-	min-width: 15px;
-	line-height: 25px;
-	vertical-align: middle;
-	cursor: pointer;
-	overflow: hidden;
-}
-.post a[href="./"]:hover {
-	background: #ca7227;
-	color: white;
-	border: 1px solid #ca7227;
-	text-decoration: none;
-}
-
-#slider {
-	border-right: none;
-	box-shadow: 0px 6px 8px 0px rgba(0, 0, 0, 0.35);
-}
-
-.theme-preview-list .preview-container .properties {
-	padding: 1rem;
-	background: rgba(0, 0, 0, 0.75);
-	color: white;
-	border: 0;
-}
-.theme-preview-list .preview-container .properties .page-number {
-	left: 1rem;
-	top: 1rem;
-}
-
-/*=== LOGS */
-/*=========*/
-.log-item.log-error {
-	background-color: rgba(202, 114, 39, 0.2);
-}
-
-/*=== STATISTICS */
-/*===============*/
-.stat {
-	margin: 10px 0 20px;
-}
-
-.stat th,
-.stat td,
-.stat tr {
-	border: none;
-}
-
-.stat > table td,
-.stat > table th {
-	border-bottom: 1px solid #e4d8cc;
-}
-
-/*=== MOBILE */
-/*===========*/
-@media (max-width: 840px) {
-	.aside {
-		transition: all 0.2s ease-in-out;
-	}
-	.aside.aside_feed {
-		padding: 0;
-	}
-	.aside .tree .tree-folder .tree-folder-items .item a {
-		padding: 0.5rem 1rem;
-	}
-	.aside .toggle_aside,
-	#overlay .close,
-	.dropdown-menu .toggle_aside,
-	#slider .toggle_aside {
-		background-color: #ca7227;
-	}
-	.aside .toggle_aside:hover,
-	#overlay .close:hover,
-	.dropdown-menu .toggle_aside:hover,
-	#slider .toggle_aside:hover {
-		background-color: #b7641d;
-	}
-	.aside .toggle_aside .icon,
-	#overlay .close .icon,
-	.dropdown-menu .toggle_aside .icon,
-	#slider .toggle_aside .icon {
-		filter: grayscale(100%) brightness(2.5);
-	}
-	.header .item.search {
-		display: none;
-	}
-	.header .item.configure {
-		position: absolute;
-		top: 0;
-		left: 0;
-	}
-	#global {
-		height: calc(100% - 8rem);
-	}
-	#panel {
-		top: 0;
-		left: 0;
-		bottom: 0;
-		right: 0;
-	}
-	.post {
-		padding-right: 1rem;
-		padding-left: 1rem;
-	}
-	.nav_menu .btn {
-		margin: 0;
-		padding: 0.85rem 1.25rem;
-	}
-	.nav_menu .stick,
-	.nav_menu .group {
-		margin: 0.5rem 0.5rem;
-	}
-	.nav_menu .stick .btn,
-	.nav_menu .group .btn {
-		margin: 0;
-		padding: 0.85rem 1.25rem;
-	}
-	.nav_menu .stick .btn.read_all,
-	.nav_menu .group .btn.read_all {
-		padding: 0.85rem 1.25rem;
-	}
-	.nav_menu .search .input {
-		max-width: 97%;
-		width: 90px;
-	}
-	.nav_menu .search .input:focus {
-		width: 400px;
-	}
-	#nav_menu_read_all #nav_menu_read .dropdown-toggle.btn {
-		background-image: none;
-	}
-	#stream .flux .flux_header {
-		padding: 0.5rem 0;
-	}
-	.dropdown-target:target ~ .dropdown-toggle::after {
-		background-color: #fcfaf8;
-		border-top: 1px solid #f5f0ec;
-		border-right: 1px solid #f5f0ec;
-		left: 21px;
-		bottom: -14px;
-	}
-	.dropdown-target:target ~ a.dropdown-toggle:not(.btn)::after {
-		bottom: -17px;
-	}
-	.transition {
-		text-align: center;
-		padding: 1rem 0;
-	}
-	.transition .name {
-		padding: 0;
-		display: block;
-		width: 100%;
-		line-height: 1.5rem;
-		margin-bottom: 1rem;
-	}
-	#nav_entries button {
-		height: 4.5rem;
-	}
-	.notification {
-		border-radius: 0;
-	}
-	.notification a.close {
-		background: transparent;
-		display: block;
-		right: 0;
-	}
-	.notification a.close:hover {
-		opacity: 0.5;
-	}
-	.notification a.close .icon {
-		display: none;
-	}
-}
 /*=== GENERAL */
 /*============*/
 html, body {
-	background: #f5f0ec;
-	color: #161a38;
+	background: var(--grey-light);
+	color: var(--unread-font-color);
 	font-family: "lato", "Helvetica", "Arial", sans-serif;
 	font-size: 0.875rem;
 }
 
 body.formLogin,
 body.register {
-	background: #fbf9f6;
+	background: var(--sid-bg);
 }
 
 /*=== Links */
 a, button.as-link {
 	outline: none;
-	color: #ca7227;
+	color: var(--main-first);
 }
diff --git a/p/themes/Ansum/ansum.scss b/p/themes/Ansum/ansum.scss
deleted file mode 100644
index b850bf2b4..000000000
--- a/p/themes/Ansum/ansum.scss
+++ /dev/null
@@ -1,53 +0,0 @@
-@use "fonts";
-
-@use "mixins";
-
-@use "variables";
-
-@use "forms";
-
-@use "tables";
-
-@use "components";
-
-@use "divers";
-
-@use "sidebar";
-
-@use "layout";
-
-@use "list-view";
-
-@use "global-view";
-
-@use "reader-view";
-
-@use "configuration";
-
-@use "logs";
-
-@use "stats";
-
-@use "mobile";
-
-@charset "UTF-8";
-
-/*=== GENERAL */
-/*============*/
-html, body {
-	background: variables.$grey-light;
-	color: variables.$unread-font-color;
-	font-family: "lato", "Helvetica", "Arial", sans-serif;
-	font-size: 0.875rem;
-}
-
-body.formLogin,
-body.register {
-	background: variables.$sid-bg;
-}
-
-/*=== Links */
-a, button.as-link {
-	outline: none;
-	color: variables.$main-first;
-}
diff --git a/p/themes/Ansum/metadata.json b/p/themes/Ansum/metadata.json
index ab2359967..923bf7edb 100644
--- a/p/themes/Ansum/metadata.json
+++ b/p/themes/Ansum/metadata.json
@@ -1,8 +1,8 @@
 {
-  "name": "Ansum",
-  "author": "Thomas Guesnon",
-  "description": "Thème sablonneux",
-  "version": 0.1,
-  "files": ["_frss.css", "ansum.css"],
-  "theme-color": "#fbf9f6"
+	"name": "Ansum",
+	"author": "Thomas Guesnon",
+	"description": "Thème sablonneux",
+	"version": 0.2,
+	"files": ["_frss.css", "ansum.css"],
+	"theme-color": "#fbf9f6"
 }
diff --git a/p/themes/Ansum/sass.sh b/p/themes/Ansum/sass.sh
deleted file mode 100644
index 6c65128ea..000000000
--- a/p/themes/Ansum/sass.sh
+++ /dev/null
@@ -1,2 +0,0 @@
-#!/bin/sh
-sass --watch ansum.scss:ansum.css
diff --git a/p/themes/Dark-pink/metadata.json b/p/themes/Dark-pink/metadata.json
index b76c73da1..aebb647e7 100644
--- a/p/themes/Dark-pink/metadata.json
+++ b/p/themes/Dark-pink/metadata.json
@@ -1,8 +1,8 @@
 {
-  "name": "Dark pink",
-  "author": "Miicat_47",
-  "description": "Nice dawk pink theme. >_< UwU",
-  "version": 0.1,
-  "files": ["_frss.css", "../Alternative-Dark/adark.css", "pinkdark.css"],
+	"name": "Dark pink",
+	"author": "Miicat_47",
+	"description": "Nice dawk pink theme. >_< UwU",
+	"version": 0.1,
+	"files": ["_frss.css", "../Alternative-Dark/adark.css", "pinkdark.css"],
 	"theme-color": "#171717"
 }
diff --git a/p/themes/Flat/metadata.json b/p/themes/Flat/metadata.json
index 105d72167..fcdc5f137 100644
--- a/p/themes/Flat/metadata.json
+++ b/p/themes/Flat/metadata.json
@@ -1,8 +1,8 @@
 {
-  "name": "Flat design",
-  "author": "Marien Fressinaud",
-  "description": "Thème plat pour FreshRSS",
-  "version": 0.2,
-  "files": ["_frss.css", "flat.css"],
+	"name": "Flat design",
+	"author": "Marien Fressinaud",
+	"description": "Thème plat pour FreshRSS",
+	"version": 0.2,
+	"files": ["_frss.css", "flat.css"],
 	"theme-color": "#34495e"
 }
diff --git a/p/themes/Mapco/_components.scss b/p/themes/Mapco/_components.css
index ac5dd390d..711cfef91 100644
--- a/p/themes/Mapco/_components.scss
+++ b/p/themes/Mapco/_components.css
@@ -1,13 +1,7 @@
-@use "sass:string";
-
-@use "mixins";
-
-@use "variables";
-
 /*=== COMPONENTS */
 /*===============*/
 /*=== Forms */
-// see _forms.scss
+/* see _forms.css*/
 
 /*=== Horizontal-list */
 .horizontal-list {
@@ -24,14 +18,14 @@
 /*=== Dropdown */
 .dropdown {
 	.dropdown-target:target + .btn {
-		background-color: variables.$grey-medium-light;
+		background-color: var(--grey-medium-light);
 	}
 }
 
 .dropdown-menu {
 	margin: 9px 0 0 0;
 	padding: 0.5rem 0 1rem 0;
-	background: variables.$grey-lighter;
+	background: var(--grey-lighter);
 	font-size: 1rem;
 	border: none;
 	border-radius: 3px;
@@ -48,20 +42,20 @@
 		padding: 1rem 1.5rem;
 		font-weight: bold;
 		text-align: left;
-		color: variables.$grey-dark;
+		color: var(--grey-dark);
 		text-transform: uppercase;
 		letter-spacing: 1px;
 	}
 
 	.item {
 
-		@include mixins.transition(all, 0.075s, ease-in-out);
+		transition: all 0.075s ease-in-out;
 
 		> a,
 		> span,
 		> .as-link {
 			padding: 0 2rem;
-			color: variables.$main-font-color;
+			color: var(--main-font-color);
 			font-size: inherit;
 			line-height: 2.5em;
 
@@ -73,8 +67,8 @@
 		> a,
 		> .as-link {
 			&:not(.addItem):hover {
-				background: variables.$main-first;
-				color: variables.$white;
+				background: var(--main-first);
+				color: var(--white);
 
 				.icon {
 					filter: brightness(3);
@@ -85,8 +79,8 @@
 		&.dropdown-section {
 			margin-top: 0.75rem;
 
-			~ .dropdown-section {
-				border-top-color: variables.$grey-light;
+			& ~ .dropdown-section {
+				border-top-color: var(--grey-light);
 			}
 
 			.item {
@@ -103,15 +97,15 @@
 			}
 		}
 
-		~ .dropdown-header {
+		& ~ .dropdown-header {
 			margin-top: 0.75rem;
 			padding-top: 1.75rem;
-			border-top-color: variables.$grey-light;
+			border-top-color: var(--grey-light);
 		}
 
 		&.separator {
 			margin-top: 0.75rem;
-			border-top-color: variables.$grey-light;
+			border-top-color: var(--grey-light);
 		}
 	}
 
@@ -125,21 +119,21 @@
 }
 
 .tree .tree-folder .tree-folder-items .dropdown-menu {
-	// to reset the appearance of the dropdown in the case of a dark sidebar
+	/* to reset the appearance of the dropdown in the case of a dark sidebar*/
 	.item {
 		padding: 0;
 
 		a,
 		button {
-			color: variables.$main-font-color;
+			color: var(--main-font-color);
 
 			&:hover {
-				color: variables.$white;
+				color: var(--white);
 			}
 		}
 
 		&:hover {
-			background: variables.$main-first;
+			background: var(--main-first);
 		}
 	}
 }
@@ -149,12 +143,12 @@
 
 /*=== Alerts */
 .alert {
-	background: variables.$grey-lighter;
-	color: variables.$grey-dark;
+	background: var(--grey-lighter);
+	color: var(--grey-dark);
 	font-size: 1rem;
-	border: 1px solid variables.$grey-medium;
+	border: 1px solid var(--grey-medium);
 	border-radius: 3px;
-	text-shadow: 0 0 1px variables.$grey-light;
+	text-shadow: 0 0 1px var(--grey-light);
 }
 
 .alert-head {
@@ -167,30 +161,30 @@
 }
 
 .alert-warn {
-	background: variables.$warning-light;
-	color: variables.$warning-text;
-	border: 1px solid string.unquote(variables.$warning-text + '33'); // add opacity at the end
+	background: var(--warning-light);
+	color: var(--warning-text);
+	border: 1px solid color-mix(in srgb, var(--warning-text) 20%, transparent);
 }
 
 .alert-success {
-	background: variables.$success-light;
-	color: variables.$success-text;
-	border: 1px solid string.unquote(variables.$success-text + '33');
+	background: var(--success-light);
+	color: var(--success-text);
+	border: 1px solid color-mix(in srgb, var(--success-text) 20%, transparent);
 }
 
 .alert-error {
-	background: variables.$alert-light;
-	color: variables.$alert-text;
-	border: 1px solid string.unquote(variables.$alert-text + '33');
+	background: var(--alert-light);
+	color: var(--alert-text);
+	border: 1px solid color-mix(in srgb, var(--alert-text) 20%, transparent);
 }
 
 /*=== Pagination */
 .pagination {
-	background: variables.$grey-light;
-	color: variables.$main-font-color;
+	background: var(--grey-light);
+	color: var(--main-font-color);
 
 	.item a {
-		color: variables.$main-font-color;
+		color: var(--main-font-color);
 	}
 
 }
@@ -202,15 +196,15 @@
 
 /*=== Boxes */
 .box {
-	background: variables.$white;
+	background: var(--white);
 	border: none;
 	border-radius: 3px;
 
 	box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.25);
 
 	.box-title {
-		background: variables.$grey-light;
-		color: variables.$main-font-color;
+		background: var(--grey-light);
+		color: var(--main-font-color);
 		border-radius: 2px 2px 0 0;
 
 		.configure {
@@ -224,7 +218,7 @@
 				}
 
 				&:hover {
-					background-color: variables.$main-first;
+					background-color: var(--main-first);
 
 					.icon {
 						filter: brightness(3);
@@ -262,9 +256,9 @@
 
 		.item {
 			padding: 0.25rem 0;
-			color: variables.$main-font-color;
+			color: var(--main-font-color);
 			font-size: 1rem;
-			border-bottom: 1px solid variables.$grey-light;
+			border-bottom: 1px solid var(--grey-light);
 			line-height: 1.7em;
 
 			.configure {
@@ -275,7 +269,7 @@
 				}
 
 				&:hover {
-					background-color: variables.$main-first;
+					background-color: var(--main-first);
 
 					.icon {
 						filter: brightness(3);
@@ -294,13 +288,13 @@
 #bigMarkAsRead.big {
 	text-align: center;
 	text-decoration: none;
-	background: variables.$main-first-light;
-	color: variables.$main-first;
+	background: var(--main-first-light);
+	color: var(--main-first);
 
-	@include mixins.transition(all, 0.15s, ease-in-out);
+	transition: all 0.15s ease-in-out;
 
 	&:hover {
-		background: variables.$main-first;
+		background: var(--main-first);
 		color: #fff;
 
 		.bigTick {
diff --git a/p/themes/Mapco/_components.rtl.css b/p/themes/Mapco/_components.rtl.css
new file mode 100644
index 000000000..c5abe2877
--- /dev/null
+++ b/p/themes/Mapco/_components.rtl.css
@@ -0,0 +1,314 @@
+/*=== COMPONENTS */
+/*===============*/
+/*=== Forms */
+/* see _forms.css*/
+
+/*=== Horizontal-list */
+.horizontal-list {
+	padding: 0.1rem 0;
+
+	& > .item {
+		&:first-child {
+			padding-right: 0.5rem;
+		}
+
+	}
+}
+
+/*=== Dropdown */
+.dropdown {
+	.dropdown-target:target + .btn {
+		background-color: var(--grey-medium-light);
+	}
+}
+
+.dropdown-menu {
+	margin: 9px 0 0 0;
+	padding: 0.5rem 0 1rem 0;
+	background: var(--grey-lighter);
+	font-size: 1rem;
+	border: none;
+	border-radius: 3px;
+	box-shadow: 0px 6px 8px 0px rgba(0,0,0,0.35);
+	text-align: right;
+
+	&::after {
+		border: none;
+		left: 18px;
+	}
+
+	.dropdown-header,
+	.dropdown-section .dropdown-section-title {
+		padding: 1rem 1.5rem;
+		font-weight: bold;
+		text-align: right;
+		color: var(--grey-dark);
+		text-transform: uppercase;
+		letter-spacing: 1px;
+	}
+
+	.item {
+
+		transition: all 0.075s ease-in-out;
+
+		> a,
+		> span,
+		> .as-link {
+			padding: 0 2rem;
+			color: var(--main-font-color);
+			font-size: inherit;
+			line-height: 2.5em;
+
+			span.icon {
+				padding: 0 0.25rem !important;
+			}
+		}
+
+		> a,
+		> .as-link {
+			&:not(.addItem):hover {
+				background: var(--main-first);
+				color: var(--white);
+
+				.icon {
+					filter: brightness(3);
+				}
+			}
+		}
+
+		&.dropdown-section {
+			margin-top: 0.75rem;
+
+			& ~ .dropdown-section {
+				border-top-color: var(--grey-light);
+			}
+
+			.item {
+				a, .as-link {
+					padding-right: 2rem;
+				}
+			}
+		}
+
+		&[aria-checked="true"] {
+			a::before {
+				margin: 0 -14px 0 0;
+				font-weight: bold;
+			}
+		}
+
+		& ~ .dropdown-header {
+			margin-top: 0.75rem;
+			padding-top: 1.75rem;
+			border-top-color: var(--grey-light);
+		}
+
+		&.separator {
+			margin-top: 0.75rem;
+			border-top-color: var(--grey-light);
+		}
+	}
+
+	.input {
+		select, input {
+			margin: 0 auto 5px;
+			padding: 2px 5px;
+			border-radius: 3px;
+		}
+	}
+}
+
+.tree .tree-folder .tree-folder-items .dropdown-menu {
+	/* to reset the appearance of the dropdown in the case of a dark sidebar*/
+	.item {
+		padding: 0;
+
+		a,
+		button {
+			color: var(--main-font-color);
+
+			&:hover {
+				color: var(--white);
+			}
+		}
+
+		&:hover {
+			background: var(--main-first);
+		}
+	}
+}
+
+
+
+
+/*=== Alerts */
+.alert {
+	background: var(--grey-lighter);
+	color: var(--grey-dark);
+	font-size: 1rem;
+	border: 1px solid var(--grey-medium);
+	border-radius: 3px;
+	text-shadow: 0 0 1px var(--grey-light);
+}
+
+.alert-head {
+	font-size: 1.15em;
+}
+
+.alert > a {
+	text-decoration: underline;
+	color: inherit;
+}
+
+.alert-warn {
+	background: var(--warning-light);
+	color: var(--warning-text);
+	border: 1px solid color-mix(in srgb, var(--warning-text) 20%, transparent);
+}
+
+.alert-success {
+	background: var(--success-light);
+	color: var(--success-text);
+	border: 1px solid color-mix(in srgb, var(--success-text) 20%, transparent);
+}
+
+.alert-error {
+	background: var(--alert-light);
+	color: var(--alert-text);
+	border: 1px solid color-mix(in srgb, var(--alert-text) 20%, transparent);
+}
+
+/*=== Pagination */
+.pagination {
+	background: var(--grey-light);
+	color: var(--main-font-color);
+
+	.item a {
+		color: var(--main-font-color);
+	}
+
+}
+
+#load_more.loading,
+#load_more.loading:hover {
+	background: url("loader.gif") center center no-repeat #34495e;
+}
+
+/*=== Boxes */
+.box {
+	background: var(--white);
+	border: none;
+	border-radius: 3px;
+
+	box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.25);
+
+	.box-title {
+		background: var(--grey-light);
+		color: var(--main-font-color);
+		border-radius: 2px 2px 0 0;
+
+		.configure {
+			padding: 5px;
+		}
+
+		&:hover {
+			.configure {
+				.icon {
+					vertical-align: middle;
+				}
+
+				&:hover {
+					background-color: var(--main-first);
+
+					.icon {
+						filter: brightness(3);
+					}
+				}
+			}
+		}
+
+
+		form {
+			input {
+				width: 85%;
+			}
+
+			.dropdown {
+				float: left;
+
+				a.dropdown-toggle {
+					padding: 0;
+					border-radius: 0;
+					background-image: url(icons/more.svg);
+					background-repeat: no-repeat;
+					background-position: left 8px;
+
+					img {
+						display: none;
+					}
+				}
+			}
+		}
+	}
+
+	.box-content {
+		padding-right: 30px;
+
+		.item {
+			padding: 0.25rem 0;
+			color: var(--main-font-color);
+			font-size: 1rem;
+			border-bottom: 1px solid var(--grey-light);
+			line-height: 1.7em;
+
+			.configure {
+				padding: 5px;
+
+				.icon {
+					vertical-align: middle;
+				}
+
+				&:hover {
+					background-color: var(--main-first);
+
+					.icon {
+						filter: brightness(3);
+					}
+				}
+			}
+		}
+
+		.item:last-child {
+			border-bottom: none;
+		}
+	}
+}
+
+/*=== "Load more" part */
+#bigMarkAsRead.big {
+	text-align: center;
+	text-decoration: none;
+	background: var(--main-first-light);
+	color: var(--main-first);
+
+	transition: all 0.15s ease-in-out;
+
+	&:hover {
+		background: var(--main-first);
+		color: #fff;
+
+		.bigTick {
+			filter: brightness(5);
+		}
+	}
+
+	.bigTick {
+		margin: 0.5rem 0;
+		background: url(icons/tick-color.svg) center no-repeat;
+		display: inline-block;
+		width: 64px;
+		height: 64px;
+		text-indent: -9999px;
+		white-space: nowrap;
+	}
+}
diff --git a/p/themes/Mapco/_configuration.scss b/p/themes/Mapco/_configuration.css
index 995cd9bff..10af72441 100644
--- a/p/themes/Mapco/_configuration.scss
+++ b/p/themes/Mapco/_configuration.css
@@ -1,11 +1,9 @@
-@use "variables";
-
 /*=== Configuration pages */
 .post {
 	font-size: 1rem;
 
 	h1, h2 {
-		color: variables.$main-font-color;
+		color: var(--main-font-color);
 		font-size: 2rem;
 		margin-top: 1.75rem;
 		font-weight: 300;
@@ -16,14 +14,14 @@
 		font-size: 1.5rem;
 	}
 
-	a[href="./"] { // This is the "Back to your feeds" button.
+	a[href="./"] { /* This is the "Back to your feeds" button.*/
 		margin: 0;
 		padding: 0.75rem 1.5rem;
-		background: variables.$grey-lighter;
+		background: var(--grey-lighter);
 		display: inline-block;
-		color: variables.$grey-dark;
+		color: var(--grey-dark);
 		font-size: 1rem;
-		border: 1px solid variables.$grey-medium-light;
+		border: 1px solid var(--grey-medium-light);
 		border-radius: 5px;
 		min-width: 15px;
 		line-height: 25px;
@@ -32,9 +30,9 @@
 		overflow: hidden;
 
 		&:hover {
-			background: variables.$main-first;
+			background: var(--main-first);
 			color: white;
-			border: 1px solid variables.$main-first;
+			border: 1px solid var(--main-first);
 			text-decoration: none;
 		}
 	}
diff --git a/p/themes/Mapco/_configuration.rtl.css b/p/themes/Mapco/_configuration.rtl.css
new file mode 100644
index 000000000..9e28d33df
--- /dev/null
+++ b/p/themes/Mapco/_configuration.rtl.css
@@ -0,0 +1,63 @@
+/*=== Configuration pages */
+.post {
+	font-size: 1rem;
+
+	h1, h2 {
+		color: var(--main-font-color);
+		font-size: 2rem;
+		margin-top: 1.75rem;
+		font-weight: 300;
+		line-height: 1.2em;
+	}
+
+	h2 {
+		font-size: 1.5rem;
+	}
+
+	a[href="./"] { /* This is the "Back to your feeds" button.*/
+		margin: 0;
+		padding: 0.75rem 1.5rem;
+		background: var(--grey-lighter);
+		display: inline-block;
+		color: var(--grey-dark);
+		font-size: 1rem;
+		border: 1px solid var(--grey-medium-light);
+		border-radius: 5px;
+		min-width: 15px;
+		line-height: 25px;
+		vertical-align: middle;
+		cursor: pointer;
+		overflow: hidden;
+
+		&:hover {
+			background: var(--main-first);
+			color: white;
+			border: 1px solid var(--main-first);
+			text-decoration: none;
+		}
+	}
+
+}
+
+
+
+#slider {
+	border-right: none;
+	box-shadow: 0px 6px 8px 0px rgba(0,0,0,0.35);
+}
+
+.theme-preview-list {
+	.preview-container {
+		.properties {
+			padding: 1rem;
+			background: rgba(0, 0, 0, 0.75);
+			color: white;
+			border: 0;
+
+			.page-number {
+				left: 1rem;
+				top: 1rem;
+			}
+		}
+	}
+}
diff --git a/p/themes/Mapco/_divers.scss b/p/themes/Mapco/_divers.css
index c6fb1f283..c6fb1f283 100644
--- a/p/themes/Mapco/_divers.scss
+++ b/p/themes/Mapco/_divers.css
diff --git a/p/themes/Mapco/_divers.rtl.css b/p/themes/Mapco/_divers.rtl.css
new file mode 100644
index 000000000..bc8e4c469
--- /dev/null
+++ b/p/themes/Mapco/_divers.rtl.css
@@ -0,0 +1,14 @@
+/*=== DIVERS */
+/*===========*/
+.aside.aside_feed .nav-form input,
+.aside.aside_feed .nav-form select {
+	width: 140px;
+}
+
+.aside.aside_feed .nav-form .dropdown .dropdown-menu {
+	left: -20px;
+}
+
+.aside.aside_feed .nav-form .dropdown .dropdown-menu::after {
+	left: 33px;
+}
diff --git a/p/themes/Mapco/_fonts.scss b/p/themes/Mapco/_fonts.css
index 57c9c9bf2..57c9c9bf2 100644
--- a/p/themes/Mapco/_fonts.scss
+++ b/p/themes/Mapco/_fonts.css
diff --git a/p/themes/Mapco/_fonts.rtl.css b/p/themes/Mapco/_fonts.rtl.css
new file mode 100644
index 000000000..57c9c9bf2
--- /dev/null
+++ b/p/themes/Mapco/_fonts.rtl.css
@@ -0,0 +1,63 @@
+@font-face {
+	font-family: "lato";
+	font-style: normal;
+	font-stretch: normal;
+	font-weight: 400;
+	src: url("../fonts/LatoLatin-Regular.woff") format("woff");
+}
+
+@font-face {
+	font-family: "lato";
+	font-style: italic;
+	font-stretch: normal;
+	font-weight: 400;
+	src: url("../fonts/LatoLatin-Italic.woff") format("woff");
+}
+
+@font-face {
+	font-family: "lato";
+	font-style: normal;
+	font-stretch: normal;
+	font-weight: 700;
+	src: url("../fonts/LatoLatin-Bold.woff") format("woff");
+}
+
+@font-face {
+	font-family: "lato";
+	font-style: italic;
+	font-stretch: normal;
+	font-weight: 700;
+	src: url("../fonts/LatoLatin-BoldItalic.woff") format("woff");
+}
+
+@font-face {
+	font-family: "spectral";
+	font-style: normal;
+	font-stretch: normal;
+	font-weight: 400;
+	src: url("../fonts/Spectral-Regular.woff") format("woff");
+}
+
+@font-face {
+	font-family: "spectral";
+	font-style: italic;
+	font-stretch: normal;
+	font-weight: 400;
+	src: url("../fonts/Spectral-Italic.woff") format("woff");
+}
+
+@font-face {
+	font-family: "spectral";
+	font-style: normal;
+	font-stretch: normal;
+	font-weight: 700;
+	src: url("../fonts/Spectral-Bold.woff") format("woff");
+}
+
+@font-face {
+	font-family: "spectral";
+	font-style: italic;
+	font-stretch: normal;
+	font-weight: 700;
+	src: url("../fonts/Spectral-BoldItalic.woff") format("woff");
+}
diff --git a/p/themes/Ansum/_forms.scss b/p/themes/Mapco/_forms.css
index f7b9a1138..ab26bd990 100644
--- a/p/themes/Ansum/_forms.scss
+++ b/p/themes/Mapco/_forms.css
@@ -1,13 +1,9 @@
-@use "mixins";
-
-@use "variables";
-
 /* btns */
 .btn {
 	margin: 0;
 	padding: 0.5rem 1.5rem;
-	background: variables.$grey-lighter;
-	color: variables.$grey-dark;
+	background: var(--grey-lighter);
+	color: var(--grey-dark);
 	font-size: 1rem;
 	border: none;
 	border-radius: 5px;
@@ -16,15 +12,15 @@
 	line-height: 25px;
 	vertical-align: middle;
 
-	@include mixins.transition(all, 0.15s, ease-in-out);
+	transition: all 0.15s ease-in-out;
 
 	&.btn-important {
-		background: variables.$main-first;
-		color: variables.$white;
+		background: var(--main-first);
+		color: var(--white);
 
 		&:hover,
 		&:active {
-			background: variables.$main-first-alt;
+			background: var(--main-first-alt);
 		}
 
 		img {
@@ -34,12 +30,12 @@
 
 
 	&.btn-attention {
-		background: variables.$alert-bg;
+		background: var(--alert-bg);
 		color: #fff;
 
 		&:hover,
 		&:active {
-			background: variables.$alert-text;
+			background: var(--alert-text);
 		}
 	}
 
@@ -65,7 +61,7 @@ label {
 	min-height: 25px;
 	padding: 5px 0;
 	cursor: pointer;
-	color: variables.$grey-dark;
+	color: var(--grey-dark);
 }
 
 textarea {
@@ -74,11 +70,11 @@ textarea {
 
 input, select, textarea, button {
 	padding: 5px 10px;
-	background: variables.$white;
-	color: variables.$grey-dark;
+	background: var(--white);
+	color: var(--grey-dark);
 	font-family: "lato", "Helvetica", "Arial", sans-serif;
 	font-size: 1rem;
-	border: 1px solid variables.$grey-light;
+	border: 1px solid var(--grey-light);
 	border-radius: 2px;
 	min-height: 25px;
 	line-height: 25px;
@@ -94,19 +90,18 @@ option {
 }
 
 input:focus, select:focus, textarea:focus {
-	color: variables.$main-font-color;
-	border-color: variables.$main-first;
+	color: var(--main-font-color);
+	border-color: var(--main-first);
 }
 
 input:invalid, select:invalid {
-	color: variables.$alert-bg;
-	border-color: variables.$alert-bg;
+	color: var(--alert-bg);
+	border-color: var(--alert-bg);
 	box-shadow: none;
 }
 
 input:disabled, select:disabled {
-	color: variables.$grey-medium-dark;
-	border-color: variables.$grey-medium-dark;
+	background: var(--grey-light);
 }
 
 .form-group {
diff --git a/p/themes/Mapco/_forms.rtl.css b/p/themes/Mapco/_forms.rtl.css
new file mode 100644
index 000000000..da2805baa
--- /dev/null
+++ b/p/themes/Mapco/_forms.rtl.css
@@ -0,0 +1,140 @@
+/* btns */
+.btn {
+	margin: 0;
+	padding: 0.5rem 1.5rem;
+	background: var(--grey-lighter);
+	color: var(--grey-dark);
+	font-size: 1rem;
+	border: none;
+	border-radius: 5px;
+	min-height: 25px;
+	min-width: 15px;
+	line-height: 25px;
+	vertical-align: middle;
+
+	transition: all 0.15s ease-in-out;
+
+	&.btn-important {
+		background: var(--main-first);
+		color: var(--white);
+
+		&:hover,
+		&:active {
+			background: var(--main-first-alt);
+		}
+
+		img {
+			filter: brightness(3);
+		}
+	}
+
+
+	&.btn-attention {
+		background: var(--alert-bg);
+		color: #fff;
+
+		&:hover,
+		&:active {
+			background: var(--alert-text);
+		}
+	}
+
+	&:hover {
+		text-decoration: none;
+	}
+}
+
+/*=== Forms */
+legend {
+	margin: 2rem 0 1rem 0;
+	padding: 0;
+	display: inline-block;
+	width: auto;
+	font-size: 1rem;
+	clear: both;
+	text-transform: uppercase;
+	letter-spacing: 1px;
+	font-weight: 700;
+}
+
+label {
+	min-height: 25px;
+	padding: 5px 0;
+	cursor: pointer;
+	color: var(--grey-dark);
+}
+
+textarea {
+	max-width: 100%;
+}
+
+input, select, textarea, button {
+	padding: 5px 10px;
+	background: var(--white);
+	color: var(--grey-dark);
+	font-family: "lato", "Helvetica", "Arial", sans-serif;
+	font-size: 1rem;
+	border: 1px solid var(--grey-light);
+	border-radius: 2px;
+	min-height: 25px;
+	line-height: 25px;
+}
+
+select {
+	padding-top: 9px;
+	padding-bottom: 9px;
+}
+
+option {
+	padding: 0 .5em;
+}
+
+input:focus, select:focus, textarea:focus {
+	color: var(--main-font-color);
+	border-color: var(--main-first);
+}
+
+input:invalid, select:invalid {
+	color: var(--alert-bg);
+	border-color: var(--alert-bg);
+	box-shadow: none;
+}
+
+input:disabled, select:disabled {
+	background: var(--grey-light);
+}
+
+.form-group {
+	padding: 5px;
+	border-radius: 3px;
+
+	&::after {
+		display: block;
+		clear: both;
+	}
+
+	.group-name {
+		padding: 10px 0;
+	}
+
+	.group-controls {
+		min-height: 25px;
+		padding: 5px 0;
+	}
+
+	.group-controls .control {
+		line-height: 2.0em;
+	}
+
+	&.form-actions {
+		margin: 15px 0 25px;
+		padding: 5px 0;
+	}
+
+	&.form-actions .btn {
+		margin: 0 0 0 0.5rem;
+	}
+}
+
+
+
diff --git a/p/themes/Ansum/_global-view.scss b/p/themes/Mapco/_global-view.css
index e192e2cd8..8fdfda37f 100644
--- a/p/themes/Ansum/_global-view.scss
+++ b/p/themes/Mapco/_global-view.css
@@ -1,5 +1,3 @@
-@use "variables";
-
 /*=== GLOBAL VIEW */
 /*================*/
 #stream {
@@ -13,7 +11,7 @@
 			background: none;
 
 			a.title {
-				color: variables.$grey-dark;
+				color: var(--grey-dark);
 				font-size: 1rem;
 				font-weight: normal;
 				text-decoration: none;
@@ -24,7 +22,7 @@
 				&:not([data-unread="0"])::after {
 					margin: -0.5rem 1rem 0 0;
 					padding: 0 0.75rem;
-					background: variables.$grey-light;
+					background: var(--grey-light);
 					border-radius: 12px;
 					position: absolute;
 					top: 1.75rem;
@@ -34,7 +32,7 @@
 				}
 
 				&:hover {
-					color: variables.$main-first;
+					color: var(--main-first);
 				}
 			}
 		}
@@ -42,11 +40,11 @@
 		.box-content {
 			.item.feed {
 				a {
-					color: variables.$main-font-color;
+					color: var(--main-font-color);
 					font-weight: 400;
 
 					&:hover {
-						color: variables.$main-first;
+						color: var(--main-first);
 						text-decoration: none;
 					}
 				}
@@ -56,7 +54,7 @@
 }
 
 
-// the panel that appears in overlay to display the flows
+/* the panel that appears in overlay to display the flows*/
 #overlay {
 	background: rgba(0, 0, 0, 0.65);
 }
diff --git a/p/themes/Mapco/_global-view.rtl.css b/p/themes/Mapco/_global-view.rtl.css
new file mode 100644
index 000000000..3a0f38ae2
--- /dev/null
+++ b/p/themes/Mapco/_global-view.rtl.css
@@ -0,0 +1,68 @@
+/*=== GLOBAL VIEW */
+/*================*/
+#stream {
+	.box.category {
+		&:not([data-unread="0"]) .box-title .title {
+			font-weight: bold;
+		}
+
+		.box-title {
+			padding: 1.5rem;
+			background: none;
+
+			a.title {
+				color: var(--grey-dark);
+				font-size: 1rem;
+				font-weight: normal;
+				text-decoration: none;
+				text-align: right;
+				text-transform: uppercase;
+				letter-spacing: 1px;
+
+				&:not([data-unread="0"])::after {
+					margin: -0.5rem 0 0 1rem;
+					padding: 0 0.75rem;
+					background: var(--grey-light);
+					border-radius: 12px;
+					position: absolute;
+					top: 1.75rem;
+					left: 0;
+					line-height: 1.5rem;
+					text-align: center;
+				}
+
+				&:hover {
+					color: var(--main-first);
+				}
+			}
+		}
+
+		.box-content {
+			.item.feed {
+				a {
+					color: var(--main-font-color);
+					font-weight: 400;
+
+					&:hover {
+						color: var(--main-first);
+						text-decoration: none;
+					}
+				}
+			}
+		}
+	}
+}
+
+
+/* the panel that appears in overlay to display the flows*/
+#overlay {
+	background: rgba(0, 0, 0, 0.65);
+}
+
+#panel {
+	top: 3rem;
+	left: 3rem;
+	bottom: 3rem;
+	right: 3rem;
+	border-radius: 3px;
+}
diff --git a/p/themes/Mapco/_layout.scss b/p/themes/Mapco/_layout.css
index d011237af..5daa68ae1 100644
--- a/p/themes/Mapco/_layout.scss
+++ b/p/themes/Mapco/_layout.css
@@ -1,12 +1,8 @@
-@use "mixins";
-
-@use "variables";
-
 /*=== STRUCTURE */
 /*===============*/
 /*=== Header */
 .header {
-	background: variables.$sid-bg;
+	background: var(--sid-bg);
 
 	.item {
 		vertical-align: middle;
@@ -30,26 +26,26 @@
 		&.search {
 			input {
 				width: 350px;
-				color: variables.$sid-font-color;
+				color: var(--sid-font-color);
 				border: none;
 				border-radius: 2px 0 0 2px;
-				background-color: variables.$sid-bg-alt;
+				background-color: var(--sid-bg-alt);
 
-				@include mixins.transition(all, 0.15s, ease-in-out);
+				transition: all 0.15s ease-in-out;
 
 				&:hover {
-					background-color: variables.$sid-bg-dark;
+					background-color: var(--sid-bg-dark);
 				}
 
 				&:focus {
-					color: variables.$grey-dark;
-					background-color: variables.$white;
+					color: var(--grey-dark);
+					background-color: var(--white);
 				}
 			}
 
 			input:focus ~ .btn,
 			input:hover ~ .btn {
-				background-color: variables.$main-first;
+				background-color: var(--main-first);
 
 				.icon {
 					filter: brightness(3);
@@ -59,12 +55,12 @@
 			.btn {
 				width: 3rem;
 				border-radius: 0 2px 2px 0;
-				background-color: variables.$sid-bg-alt;
+				background-color: var(--sid-bg-alt);
 				border-left-width: 0;
 				min-height: 35px;
 
 				&:hover {
-					background-color: variables.$main-first-alt;
+					background-color: var(--main-first-alt);
 
 					.icon {
 						filter: brightness(3);
@@ -100,13 +96,13 @@
 
 /*=== Prompt (centered) */
 main.prompt {
-	background: variables.$grey-light;
+	background: var(--grey-light);
 	border-radius: 5px;
 }
 
 /*=== New article notification */
 #new-article {
-	background: variables.$main-first;
+	background: var(--main-first);
 	font-size: 1rem;
 	text-align: center;
 }
@@ -114,18 +110,18 @@ main.prompt {
 #new-article > a {
 	padding: calc(0.75rem + var(--frss-padding-top-bottom)) 1rem;
 	font-weight: bold;
-	color: variables.$white;
+	color: var(--white);
 }
 
 #new-article > a:hover {
 	text-decoration: none;
-	background: variables.$main-first-alt;
+	background: var(--main-first-alt);
 }
 
 /*=== Transition indication, e.g. day */
 .transition {
 	padding: 1rem 0 0 1.25rem;
-	color: variables.$light-font-color;
+	color: var(--light-font-color);
 	font-size: 0.875rem;
 	font-weight: 700;
 	line-height: 3em;
@@ -134,7 +130,7 @@ main.prompt {
 
 	.name {
 		padding: 0 1rem 0 1rem;
-		color: variables.$main-font-color;
+		color: var(--main-font-color);
 		font-size: 0.875rem;
 		position: relative;
 		left: 0;
@@ -145,18 +141,18 @@ main.prompt {
 .btn {
 	border-left-width: 0;
 	padding: 0.5rem 1rem;
-	background-color: variables.$grey-light;
+	background-color: var(--grey-light);
 	background-position: center;
 	background-repeat: no-repeat;
 
-	@include mixins.transition(all, 0.15s, ease-in-out);
+	transition: all 0.15s ease-in-out;
 
 	&:hover {
-		background-color: variables.$grey-medium-light;
+		background-color: var(--grey-medium-light);
 	}
 
 	&.active {
-		background-color: variables.$main-first;
+		background-color: var(--main-first);
 
 		.icon {
 			filter: brightness(3);
@@ -172,12 +168,12 @@ main.prompt {
 	.btn {
 		border-left-width: 0;
 		padding: 0.5rem 1rem;
-		background-color: variables.$grey-lighter;
+		background-color: var(--grey-lighter);
 		background-position: center;
 		background-repeat: no-repeat;
 
 		&:hover {
-			background-color: variables.$grey-medium-light;
+			background-color: var(--grey-medium-light);
 		}
 	}
 
@@ -186,21 +182,21 @@ main.prompt {
 		.btn {
 			border-left-width: 0;
 			padding: 0.5rem 1rem;
-			background-color: variables.$grey-lighter;
+			background-color: var(--grey-lighter);
 			background-position: center;
 			background-repeat: no-repeat;
 
-			@include mixins.transition(all, 0.15s, ease-in-out);
+			transition: all 0.15s ease-in-out;
 
 			&:hover {
-				background-color: variables.$grey-medium-light;
+				background-color: var(--grey-medium-light);
 			}
 
 			&.active {
-				background-color: variables.$main-first;
+				background-color: var(--main-first);
 			}
 
-			// actions
+			/* actions*/
 			&#toggle-read.active {
 				.icon {
 					filter: brightness(3.5);
@@ -213,16 +209,16 @@ main.prompt {
 				}
 			}
 
-			// read all
+			/* read all*/
 			&.read_all {
 				padding: 5px 16px;
-				color: variables.$main-font-color;
-				background-color: variables.$grey-lighter;
+				color: var(--main-font-color);
+				background-color: var(--grey-lighter);
 
-				@include mixins.transition(all, 0.15s, ease-in-out);
+				transition: all 0.15s ease-in-out;
 
 				&:hover {
-					background-color: variables.$grey-medium-light;
+					background-color: var(--grey-medium-light);
 				}
 			}
 		}
@@ -255,19 +251,19 @@ main.prompt {
 
 	h1.title, h1 {
 		a {
-			color: variables.$main-font-color;
+			color: var(--main-font-color);
 			font-family: "spectral", serif;
 			font-size: 2rem;
 
 			&:hover {
-				color: variables.$main-first;
+				color: var(--main-first);
 				text-decoration: none;
 			}
 		}
 	}
 
 	.author {
-		color: variables.$light-font-color;
+		color: var(--light-font-color);
 		font-size: 1.125rem;
 	}
 
@@ -278,27 +274,27 @@ main.prompt {
 
 	.content hr {
 		margin: 30px 10px;
-		background: variables.$grey-medium-light;
+		background: var(--grey-medium-light);
 		height: 1px;
 		border: 0;
 		box-shadow: 0 2px 5px #ccc;
 	}
 
 	pre {
-		background: variables.$main-first-darker;
-		color: variables.$white;
+		background: var(--main-first-darker);
+		color: var(--white);
 		border-radius: 3px;
 
 		code {
 			background: transparent;
-			color: variables.$white;
+			color: var(--white);
 			border: none;
 		}
 	}
 
 	code {
-		background: variables.$code-bg;
-		color: variables.$code-text;
+		background: var(--code-bg);
+		color: var(--code-text);
 		font-size: 1rem;
 		border-radius: 3px;
 	}
@@ -307,10 +303,10 @@ main.prompt {
 	blockquote {
 		margin: 0;
 		padding: 0.5rem 1.5rem;
-		background: variables.$grey-lighter;
+		background: var(--grey-lighter);
 		display: block;
-		color: variables.$light-font-color;
-		border-left: 4px solid variables.$grey-medium-light;
+		color: var(--light-font-color);
+		border-left: 4px solid var(--grey-medium-light);
 
 		p {
 			margin: 0;
@@ -324,10 +320,10 @@ main.prompt {
 .notification {
 
 	padding: 1rem 0;
-	background: variables.$grey-medium-light;
+	background: var(--grey-medium-light);
 	width: 100%;
 	height: 3rem;
-	color: variables.$grey-dark;
+	color: var(--grey-dark);
 	font-size: 1em;
 	border: none;
 	position: fixed;
@@ -345,13 +341,13 @@ main.prompt {
 	}
 
 	&.good {
-		background: variables.$success-bg;
-		color: variables.$white;
+		background: var(--success-bg);
+		color: var(--white);
 	}
 
 	&.bad {
-		background: variables.$alert-bg;
-		color: variables.$white;
+		background: var(--alert-bg);
+		color: var(--white);
 	}
 
 	.close {
@@ -361,11 +357,11 @@ main.prompt {
 	}
 
 	&.good .close:hover {
-		background: variables.$success-text;
+		background: var(--success-text);
 	}
 
 	&.bad .close:hover {
-		background: variables.$alert-text;
+		background: var(--alert-text);
 	}
 
 	&#actualizeProgress {
@@ -382,5 +378,5 @@ main.prompt {
 
 /*=== Navigation menu (for articles) */
 #nav_entries {
-	background: variables.$sid-bg;
+	background: var(--sid-bg);
 }
diff --git a/p/themes/Mapco/_layout.rtl.css b/p/themes/Mapco/_layout.rtl.css
new file mode 100644
index 000000000..0a7fa66a2
--- /dev/null
+++ b/p/themes/Mapco/_layout.rtl.css
@@ -0,0 +1,382 @@
+/*=== STRUCTURE */
+/*===============*/
+/*=== Header */
+.header {
+	background: var(--sid-bg);
+
+	.item {
+		vertical-align: middle;
+
+		&.title {
+			a {
+				padding: 0.5rem 1rem;
+
+				.logo {
+					filter: grayscale(100%) brightness(3);
+				}
+
+				&:hover {
+					.logo {
+						filter: grayscale(100%) brightness(2.2);
+					}
+				}
+			}
+		}
+
+		&.search {
+			input {
+				width: 350px;
+				color: var(--sid-font-color);
+				border: none;
+				border-radius: 0 2px 2px 0;
+				background-color: var(--sid-bg-alt);
+
+				transition: all 0.15s ease-in-out;
+
+				&:hover {
+					background-color: var(--sid-bg-dark);
+				}
+
+				&:focus {
+					color: var(--grey-dark);
+					background-color: var(--white);
+				}
+			}
+
+			input:focus ~ .btn,
+			input:hover ~ .btn {
+				background-color: var(--main-first);
+
+				.icon {
+					filter: brightness(3);
+				}
+			}
+
+			.btn {
+				width: 3rem;
+				border-radius: 2px 0 0 2px;
+				background-color: var(--sid-bg-alt);
+				border-right-width: 0;
+				min-height: 35px;
+
+				&:hover {
+					background-color: var(--main-first-alt);
+
+					.icon {
+						filter: brightness(3);
+					}
+				}
+			}
+		}
+
+		&.configure {
+			text-align: center;
+
+			.btn .icon,
+			> .icon {
+				filter: brightness(3)
+			}
+
+			.signin {
+				color: white;
+			}
+
+			.btn {
+				padding: 0.25rem 1rem;
+				background-color: transparent;
+			}
+		}
+	}
+}
+
+/*=== Body */
+#global {
+	height: calc(100vh - (calc(3rem + 2 * var(--frss-padding-top-bottom))));
+}
+
+/*=== Prompt (centered) */
+main.prompt {
+	background: var(--grey-light);
+	border-radius: 5px;
+}
+
+/*=== New article notification */
+#new-article {
+	background: var(--main-first);
+	font-size: 1rem;
+	text-align: center;
+}
+
+#new-article > a {
+	padding: calc(0.75rem + var(--frss-padding-top-bottom)) 1rem;
+	font-weight: bold;
+	color: var(--white);
+}
+
+#new-article > a:hover {
+	text-decoration: none;
+	background: var(--main-first-alt);
+}
+
+/*=== Transition indication, e.g. day */
+.transition {
+	padding: 1rem 1.25rem 0 0;
+	color: var(--light-font-color);
+	font-size: 0.875rem;
+	font-weight: 700;
+	line-height: 3em;
+	letter-spacing: 1px;
+	text-transform: uppercase;
+
+	.name {
+		padding: 0 1rem 0 1rem;
+		color: var(--main-font-color);
+		font-size: 0.875rem;
+		position: relative;
+		right: 0;
+		text-transform: uppercase;
+	}
+}
+
+.btn {
+	border-right-width: 0;
+	padding: 0.5rem 1rem;
+	background-color: var(--grey-light);
+	background-position: center;
+	background-repeat: no-repeat;
+
+	transition: all 0.15s ease-in-out;
+
+	&:hover {
+		background-color: var(--grey-medium-light);
+	}
+
+	&.active {
+		background-color: var(--main-first);
+
+		.icon {
+			filter: brightness(3);
+		}
+	}
+}
+
+/*=== Index menu */
+.nav_menu {
+	text-align: center;
+	padding: 5px 0;
+
+	.btn {
+		border-right-width: 0;
+		padding: 0.5rem 1rem;
+		background-color: var(--grey-lighter);
+		background-position: center;
+		background-repeat: no-repeat;
+
+		&:hover {
+			background-color: var(--grey-medium-light);
+		}
+	}
+
+	.stick,
+	.group {
+		.btn {
+			border-right-width: 0;
+			padding: 0.5rem 1rem;
+			background-color: var(--grey-lighter);
+			background-position: center;
+			background-repeat: no-repeat;
+
+			transition: all 0.15s ease-in-out;
+
+			&:hover {
+				background-color: var(--grey-medium-light);
+			}
+
+			&.active {
+				background-color: var(--main-first);
+			}
+
+			/* actions*/
+			&#toggle-read.active {
+				.icon {
+					filter: brightness(3.5);
+				}
+			}
+
+			&#toggle-unread.active {
+				.icon {
+					filter: brightness(3.5) grayscale(1);
+				}
+			}
+
+			/* read all*/
+			&.read_all {
+				padding: 5px 16px;
+				color: var(--main-font-color);
+				background-color: var(--grey-lighter);
+
+				transition: all 0.15s ease-in-out;
+
+				&:hover {
+					background-color: var(--grey-medium-light);
+				}
+			}
+		}
+
+		.dropdown:not(#dropdown-search-wrapper) {
+			a.dropdown-toggle {
+				border-right-width: 0;
+				background-image: url(icons/more.svg);
+
+				.icon {
+					display: none;
+				}
+			}
+		}
+
+		#dropdown-search-wrapper.dropdown {
+			a.dropdown-toggle {
+				border-right-width: 0;
+			}
+		}
+	}
+}
+
+/*=== Content of feed articles */
+.content, .content_thin {
+	padding: 20px 10px;
+
+	font-size: 1.125rem;
+	line-height: 1.8rem;
+
+	h1.title, h1 {
+		a {
+			color: var(--main-font-color);
+			font-family: "spectral", serif;
+			font-size: 2rem;
+
+			&:hover {
+				color: var(--main-first);
+				text-decoration: none;
+			}
+		}
+	}
+
+	.author {
+		color: var(--light-font-color);
+		font-size: 1.125rem;
+	}
+
+	p, ul {
+		font-size: 1.125rem;
+		line-height: 1.8rem;
+	}
+
+	.content hr {
+		margin: 30px 10px;
+		background: var(--grey-medium-light);
+		height: 1px;
+		border: 0;
+		box-shadow: 0 2px 5px #ccc;
+	}
+
+	pre {
+		background: var(--main-first-darker);
+		color: var(--white);
+		border-radius: 3px;
+
+		code {
+			background: transparent;
+			color: var(--white);
+			border: none;
+		}
+	}
+
+	code {
+		background: var(--code-bg);
+		color: var(--code-text);
+		font-size: 1rem;
+		border-radius: 3px;
+	}
+
+
+	blockquote {
+		margin: 0;
+		padding: 0.5rem 1.5rem;
+		background: var(--grey-lighter);
+		display: block;
+		color: var(--light-font-color);
+		border-right: 4px solid var(--grey-medium-light);
+
+		p {
+			margin: 0;
+		}
+	}
+
+}
+
+
+/*=== Notification and actualize notification */
+.notification {
+
+	padding: 1rem 0;
+	background: var(--grey-medium-light);
+	width: 100%;
+	height: 3rem;
+	color: var(--grey-dark);
+	font-size: 1em;
+	border: none;
+	position: fixed;
+	top: auto;
+	bottom: 0;
+	right: 0;
+	left: 0;
+	text-align: center;
+	line-height: 3em;
+	vertical-align: middle;
+
+	.msg {
+		display: inline-block;
+		font-size: 1rem;
+	}
+
+	&.good {
+		background: var(--success-bg);
+		color: var(--white);
+	}
+
+	&.bad {
+		background: var(--alert-bg);
+		color: var(--white);
+	}
+
+	.close {
+		.icon {
+			filter: brightness(3);
+		}
+	}
+
+	&.good .close:hover {
+		background: var(--success-text);
+	}
+
+	&.bad .close:hover {
+		background: var(--alert-text);
+	}
+
+	&#actualizeProgress {
+		br {
+			display: none;
+		}
+
+		.title {
+			margin: 0 2rem;
+		}
+	}
+}
+
+
+/*=== Navigation menu (for articles) */
+#nav_entries {
+	background: var(--sid-bg);
+}
diff --git a/p/themes/Mapco/_list-view.css b/p/themes/Mapco/_list-view.css
new file mode 100644
index 000000000..2d69e0e24
--- /dev/null
+++ b/p/themes/Mapco/_list-view.css
@@ -0,0 +1,91 @@
+/*=== Feed articles */
+.flux {
+	background: var(--white);
+
+	transition: all 0.15s ease-in-out;
+
+	.flux_header {
+		&:hover {
+			background: var(--grey-lighter);
+
+			&:not(.current):hover .item .title {
+				background: var(--grey-lighter);
+			}
+		}
+	}
+
+	&.current {
+		background: var(--grey-lighter);
+		border-left-color: var(--main-first);
+	}
+
+	&.not_read:not(.current) {
+		background: var(--unread-bg);
+
+		&:hover .item .title {
+			background: var(--unread-bg);
+		}
+	}
+
+	&.not_read {
+		.item .title {
+			a {
+				color: var(--unread-font-color);
+			}
+
+		}
+
+		.item.website {
+			a {
+				color: var(--unread-font-color);
+			}
+		}
+
+		.item .date {
+			color: color-mix(in srgb, var(--unread-font-color) 50%, transparent);
+		}
+	}
+
+	&.favorite {
+		border-left-color: var(--fav-bg);
+
+		transition: all 0.15s ease-in-out;
+	}
+
+	&.favorite:not(.current) {
+		background: var(--fav-light);
+
+		&:hover .item .title {
+			background: var(--fav-light);
+		}
+	}
+
+	.website {
+		a {
+			color: var(--main-font-color);
+			opacity: 0.75;
+		}
+	}
+
+	.flux_header .date,
+	.flux_content .bottom .date {
+		color: color-mix(in srgb, var(--main-font-color) 50%, transparent);
+		font-size: 0.85rem;
+	}
+
+	.bottom {
+		font-size: 1rem;
+		text-align: center;
+	}
+}
+
+.flux_header {
+	font-size: 1rem;
+	cursor: pointer;
+	border-top: 1px solid var(--grey-light);
+
+	.title {
+		font-size: 1rem;
+	}
+}
+
diff --git a/p/themes/Mapco/_list-view.rtl.css b/p/themes/Mapco/_list-view.rtl.css
new file mode 100644
index 000000000..27388479a
--- /dev/null
+++ b/p/themes/Mapco/_list-view.rtl.css
@@ -0,0 +1,91 @@
+/*=== Feed articles */
+.flux {
+	background: var(--white);
+
+	transition: all 0.15s ease-in-out;
+
+	.flux_header {
+		&:hover {
+			background: var(--grey-lighter);
+
+			&:not(.current):hover .item .title {
+				background: var(--grey-lighter);
+			}
+		}
+	}
+
+	&.current {
+		background: var(--grey-lighter);
+		border-right-color: var(--main-first);
+	}
+
+	&.not_read:not(.current) {
+		background: var(--unread-bg);
+
+		&:hover .item .title {
+			background: var(--unread-bg);
+		}
+	}
+
+	&.not_read {
+		.item .title {
+			a {
+				color: var(--unread-font-color);
+			}
+
+		}
+
+		.item.website {
+			a {
+				color: var(--unread-font-color);
+			}
+		}
+
+		.item .date {
+			color: color-mix(in srgb, var(--unread-font-color) 50%, transparent);
+		}
+	}
+
+	&.favorite {
+		border-right-color: var(--fav-bg);
+
+		transition: all 0.15s ease-in-out;
+	}
+
+	&.favorite:not(.current) {
+		background: var(--fav-light);
+
+		&:hover .item .title {
+			background: var(--fav-light);
+		}
+	}
+
+	.website {
+		a {
+			color: var(--main-font-color);
+			opacity: 0.75;
+		}
+	}
+
+	.flux_header .date,
+	.flux_content .bottom .date {
+		color: color-mix(in srgb, var(--main-font-color) 50%, transparent);
+		font-size: 0.85rem;
+	}
+
+	.bottom {
+		font-size: 1rem;
+		text-align: center;
+	}
+}
+
+.flux_header {
+	font-size: 1rem;
+	cursor: pointer;
+	border-top: 1px solid var(--grey-light);
+
+	.title {
+		font-size: 1rem;
+	}
+}
+
diff --git a/p/themes/Mapco/_list-view.scss b/p/themes/Mapco/_list-view.scss
deleted file mode 100644
index 963d1cc43..000000000
--- a/p/themes/Mapco/_list-view.scss
+++ /dev/null
@@ -1,97 +0,0 @@
-@use "sass:color";
-
-@use "mixins";
-
-@use "variables";
-
-/*=== Feed articles */
-.flux {
-	background: variables.$white;
-
-	@include mixins.transition(all, 0.15s, ease-in-out);
-
-	.flux_header {
-		&:hover {
-			background: variables.$grey-lighter;
-
-			&:not(.current):hover .item .title {
-				background: variables.$grey-lighter;
-			}
-		}
-	}
-
-	&.current {
-		background: variables.$grey-lighter;
-		border-left-color: variables.$main-first;
-	}
-
-	&.not_read:not(.current) {
-		background: variables.$unread-bg;
-
-		&:hover .item .title {
-			background: variables.$unread-bg;
-		}
-	}
-
-	&.not_read {
-		.item .title {
-			a {
-				color: variables.$unread-font-color;
-			}
-
-		}
-
-		.item.website {
-			a {
-				color: variables.$unread-font-color;
-			}
-		}
-
-		.item .date {
-			color: color.scale(variables.$unread-font-color, $alpha: -50%);
-		}
-	}
-
-	&.favorite {
-		border-left-color: variables.$fav-bg;
-
-		@include mixins.transition(all, 0.15s, ease-in-out);
-	}
-
-	&.favorite:not(.current) {
-		background: variables.$fav-light;
-
-		&:hover .item .title {
-			background: variables.$fav-light;
-		}
-	}
-
-	.website {
-		a {
-			color: variables.$main-font-color;
-			opacity: 0.75;
-		}
-	}
-
-	.flux_header .date,
-	.flux_content .bottom .date {
-		color: color.scale(variables.$main-font-color, $alpha: -50%);
-		font-size: 0.85rem;
-	}
-
-	.bottom {
-		font-size: 1rem;
-		text-align: center;
-	}
-}
-
-.flux_header {
-	font-size: 1rem;
-	cursor: pointer;
-	border-top: 1px solid variables.$grey-light;
-
-	.title {
-		font-size: 1rem;
-	}
-}
-
diff --git a/p/themes/Mapco/_logs.css b/p/themes/Mapco/_logs.css
new file mode 100644
index 000000000..60914ec2b
--- /dev/null
+++ b/p/themes/Mapco/_logs.css
@@ -0,0 +1,5 @@
+/*=== LOGS */
+/*=========*/
+.log-item.log-error {
+	background-color: rgba(var(--main-first), 0.2);
+}
diff --git a/p/themes/Mapco/_logs.rtl.css b/p/themes/Mapco/_logs.rtl.css
new file mode 100644
index 000000000..60914ec2b
--- /dev/null
+++ b/p/themes/Mapco/_logs.rtl.css
@@ -0,0 +1,5 @@
+/*=== LOGS */
+/*=========*/
+.log-item.log-error {
+	background-color: rgba(var(--main-first), 0.2);
+}
diff --git a/p/themes/Mapco/_logs.scss b/p/themes/Mapco/_logs.scss
deleted file mode 100644
index 69d0153d1..000000000
--- a/p/themes/Mapco/_logs.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-@use "variables";
-
-/*=== LOGS */
-/*=========*/
-.log-item.log-error {
-	background-color: rgba(variables.$main-first, 0.2);
-}
diff --git a/p/themes/Mapco/_mixins.scss b/p/themes/Mapco/_mixins.scss
deleted file mode 100644
index 9ba940a88..000000000
--- a/p/themes/Mapco/_mixins.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-/* stylelint-disable property-no-vendor-prefix */
-
-/* FUNCTIONS */
-
-@mixin transition($target, $duration, $ease) {
-	transition: $target $duration $ease;
-}
diff --git a/p/themes/Mapco/_mobile.scss b/p/themes/Mapco/_mobile.css
index b66590f70..a0fc3e80f 100644
--- a/p/themes/Mapco/_mobile.scss
+++ b/p/themes/Mapco/_mobile.css
@@ -1,14 +1,10 @@
-@use "mixins";
-
-@use "variables";
-
 /*=== MOBILE */
 /*===========*/
 
 @media (max-width: 840px) {
 	.aside {
 
-		@include mixins.transition(all, 0.2s, ease-in-out);
+		transition: all 0.2s ease-in-out;
 
 		&.aside_feed {
 			padding: 0;
@@ -23,10 +19,10 @@
 	#overlay .close,
 	.dropdown-menu .toggle_aside,
 	#slider .toggle_aside {
-		background-color: variables.$main-first;
+		background-color: var(--main-first);
 
 		&:hover {
-			background-color: variables.$main-first-alt;
+			background-color: var(--main-first-alt);
 		}
 
 		.icon {
@@ -116,15 +112,15 @@
 	}
 
 	.dropdown-target:target {
-		~ .dropdown-toggle::after {
-			background-color: variables.$grey-lighter;
-			border-top: 1px solid variables.$grey-light;
-			border-left: 1px solid variables.$grey-light;
+		& ~ .dropdown-toggle::after {
+			background-color: var(--grey-lighter);
+			border-top: 1px solid var(--grey-light);
+			border-left: 1px solid var(--grey-light);
 			right: 21px;
 			bottom: -14px;
 		}
 
-		~ a.dropdown-toggle {
+		& ~ a.dropdown-toggle {
 			&:not(.btn) {
 				&::after {
 					bottom: -17px;
diff --git a/p/themes/Mapco/_mobile.rtl.css b/p/themes/Mapco/_mobile.rtl.css
new file mode 100644
index 000000000..755c94c80
--- /dev/null
+++ b/p/themes/Mapco/_mobile.rtl.css
@@ -0,0 +1,168 @@
+/*=== MOBILE */
+/*===========*/
+
+@media (max-width: 840px) {
+	.aside {
+
+		transition: all 0.2s ease-in-out;
+
+		&.aside_feed {
+			padding: 0;
+		}
+
+		.tree .tree-folder .tree-folder-items .item a {
+			padding: 0.5rem 1rem;
+		}
+	}
+
+	.aside .toggle_aside,
+	#overlay .close,
+	.dropdown-menu .toggle_aside,
+	#slider .toggle_aside {
+		background-color: var(--main-first);
+
+		&:hover {
+			background-color: var(--main-first-alt);
+		}
+
+		.icon {
+			filter: grayscale(100%) brightness(2.5);
+		}
+	}
+
+	.header {
+		.item {
+			&.search {
+				display: none;
+			}
+
+			&.configure {
+				position: absolute;
+				top: 0;
+				left: 0;
+			}
+
+		}
+	}
+
+	#global {
+		height: calc(100% - 8rem);
+	}
+
+	#panel {
+		top: 0;
+		left: 0;
+		bottom: 0;
+		right: 0;
+	}
+
+	main.prompt {
+		max-width: 100%;
+		min-width: auto;
+		width: 75%;
+	}
+
+	.post {
+		padding-right: 1rem;
+		padding-left: 1rem;
+	}
+
+	.nav_menu {
+		.btn {
+			margin: 0;
+			padding: 0.85rem 1.25rem;
+		}
+
+		.stick,
+		.group {
+			margin: 0.5rem 0.5rem;
+
+			.btn {
+				margin: 0;
+				padding: 0.85rem 1.25rem;
+
+				&.read_all {
+					padding: 0.85rem 1.25rem;
+				}
+			}
+		}
+
+		.search {
+			.input {
+				max-width: 97%;
+				width: 90px;
+
+				&:focus {
+					width: 400px;
+				}
+			}
+		}
+	}
+
+	#nav_menu_read_all #nav_menu_read .dropdown-toggle.btn {
+		background-image: none;
+	}
+
+	#stream {
+		.flux {
+			.flux_header {
+				padding: 0.5rem 0;
+			}
+		}
+	}
+
+	.dropdown-target:target {
+		& ~ .dropdown-toggle::after {
+			background-color: var(--grey-lighter);
+			border-top: 1px solid var(--grey-light);
+			border-right: 1px solid var(--grey-light);
+			left: 21px;
+			bottom: -14px;
+		}
+
+		& ~ a.dropdown-toggle {
+			&:not(.btn) {
+				&::after {
+					bottom: -17px;
+				}
+			}
+		}
+	}
+
+	.transition {
+		text-align: center;
+		padding: 1rem 0;
+
+		.name {
+			padding: 0;
+			display: block;
+			width: 100%;
+			line-height: 1.5rem;
+			margin-bottom: 1rem;
+		}
+
+	}
+
+	#nav_entries button {
+		height: 4.5rem;
+	}
+
+	.notification {
+		border-radius: 0;
+
+		a.close {
+			background: transparent;
+			display: block;
+			right: 0;
+		}
+
+		a.close:hover {
+			opacity: 0.5;
+		}
+
+		a.close .icon {
+			display: none;
+
+		}
+	}
+}
diff --git a/p/themes/Mapco/_reader-view.css b/p/themes/Mapco/_reader-view.css
new file mode 100644
index 000000000..85846b631
--- /dev/null
+++ b/p/themes/Mapco/_reader-view.css
@@ -0,0 +1,18 @@
+/*=== READER VIEW */
+/*================*/
+#stream.reader {
+	.flux {
+		background: var(--grey-light);
+		color: var(--main-font-color);
+		border: none;
+
+		.flux_content {
+			background-color: var(--white);
+			border: none;
+
+			.author {
+				color: var(--grey-medium-dark);
+			}
+		}
+	}
+}
diff --git a/p/themes/Mapco/_reader-view.rtl.css b/p/themes/Mapco/_reader-view.rtl.css
new file mode 100644
index 000000000..85846b631
--- /dev/null
+++ b/p/themes/Mapco/_reader-view.rtl.css
@@ -0,0 +1,18 @@
+/*=== READER VIEW */
+/*================*/
+#stream.reader {
+	.flux {
+		background: var(--grey-light);
+		color: var(--main-font-color);
+		border: none;
+
+		.flux_content {
+			background-color: var(--white);
+			border: none;
+
+			.author {
+				color: var(--grey-medium-dark);
+			}
+		}
+	}
+}
diff --git a/p/themes/Mapco/_reader-view.scss b/p/themes/Mapco/_reader-view.scss
deleted file mode 100644
index d0b661887..000000000
--- a/p/themes/Mapco/_reader-view.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-@use "variables";
-
-/*=== READER VIEW */
-/*================*/
-#stream.reader {
-	.flux {
-		background: variables.$grey-light;
-		color: variables.$main-font-color;
-		border: none;
-
-		.flux_content {
-			background-color: variables.$white;
-			border: none;
-
-			.author {
-				color: variables.$grey-medium-dark;
-			}
-		}
-	}
-}
diff --git a/p/themes/Mapco/_sidebar.scss b/p/themes/Mapco/_sidebar.css
index c6588d235..308817653 100644
--- a/p/themes/Mapco/_sidebar.scss
+++ b/p/themes/Mapco/_sidebar.css
@@ -1,25 +1,19 @@
-@use "sass:string";
-
-@use "mixins";
-
-@use "variables";
-
 /*=== Tree */
 .tree {
 	margin: 10px 0;
 
 	&#sidebar {
 		scrollbar-color: rgba(255,255, 0, 0.1) rgba(0, 0, 0, 0.05);
-		scrollbar-color: string.unquote(variables.$sid-font-color + "33") string.unquote(variables.$sid-font-color + "22");
+		scrollbar-color: color-mix(in srgb, var(--sid-font-color) 20%, transparent) color-mix(in srgb, var(--sid-font-color) 13%, transparent);
 	}
 
 
 	.tree-folder {
-		border-bottom: 1px solid variables.$sid-sep;
+		border-bottom: 1px solid var(--sid-sep);
 
 		.tree-folder-title {
 			padding: 0.75rem 1rem;
-			background: variables.$sid-bg;
+			background: var(--sid-bg);
 			position: relative;
 			font-size: 0.85rem;
 			letter-spacing: 1px;
@@ -44,7 +38,7 @@
 
 			.title {
 				background: inherit;
-				color: variables.$sid-font-color;
+				color: var(--sid-font-color);
 
 				&:hover {
 					text-decoration: none;
@@ -54,43 +48,43 @@
 
 		&.active {
 			.tree-folder-title {
-				background: variables.$sid-bg;
+				background: var(--sid-bg);
 				font-weight: bold;
 			}
 		}
 
 		.tree-folder-items {
-			background: variables.$sid-bg-alt;
+			background: var(--sid-bg-alt);
 
 			.item {
 				font-size: 1rem;
 				font-weight: 400;
 
-				@include mixins.transition(all, 0.15s, ease-in-out);
+				transition: all 0.15s ease-in-out;
 
 				&.active {
-					background: variables.$sid-active;
+					background: var(--sid-active);
 
 					.dropdown li a {
-						color: variables.$main-font-color;
+						color: var(--main-font-color);
 
 						&:hover {
-							color: variables.$sid-font-color;
+							color: var(--sid-font-color);
 						}
 					}
 
 					a {
-						color: variables.$sid-active-font;
+						color: var(--sid-active-font);
 					}
 				}
 
 				&:hover {
-					background: variables.$sid-bg-dark;
+					background: var(--sid-bg-dark);
 				}
 
 				a {
 					text-decoration: none;
-					color: variables.$sid-font-color;
+					color: var(--sid-font-color);
 
 					&.dropdown-toggle {
 						.icon {
@@ -127,18 +121,18 @@
 	.dropdown + .btn,
 	.dropdown + input,
 	.dropdown + .dropdown > .btn {
-		border-left: 1px solid variables.$grey-medium-light;
+		border-left: 1px solid var(--grey-medium-light);
 	}
 
 }
 
 .aside {
-	background: variables.$sid-bg;
+	background: var(--sid-bg);
 
 	&.aside_feed {
 		padding: 10px 0;
 		text-align: center;
-		background: variables.$sid-bg;
+		background: var(--sid-bg);
 
 		.tree-folder-title:hover button.dropdown-toggle .icon {
 			filter: none;
@@ -174,8 +168,8 @@
 	}
 
 	.item {
-		background: variables.$sid-bg;
-		color: variables.$white;
+		background: var(--sid-bg);
+		color: var(--white);
 		min-height: 2.5em;
 		line-height: 2.5em;
 
@@ -186,23 +180,23 @@
 
 		a, .as-link {
 			padding: 0 1rem;
-			color: variables.$sid-font-color;
+			color: var(--sid-font-color);
 
-			@include mixins.transition(all, 0.15s, ease-in-out);
+			transition: all 0.15s ease-in-out;
 		}
 
 		a:hover, .as-link:hover {
-			background: variables.$sid-bg-dark;
+			background: var(--sid-bg-dark);
 			text-decoration: none;
 		}
 
 		&.active {
-			background: variables.$main-first;
-			color: variables.$white;
+			background: var(--main-first);
+			color: var(--white);
 
 			a, .as-link {
-				background: variables.$main-first;
-				color: variables.$white;
+				background: var(--main-first);
+				color: var(--white);
 				text-decoration: none;
 			}
 		}
@@ -211,7 +205,7 @@
 	.nav-header {
 		padding: 0 1rem;
 		font-weight: bold;
-		color: variables.$grey-dark;
+		color: var(--grey-dark);
 		text-transform: uppercase;
 		letter-spacing: 1px;
 	}
@@ -229,37 +223,37 @@
 
 .aside.aside_feed .category .title:not([data-unread="0"])::after {
 	margin: 0.75rem 0 0 0;
-	background-color: variables.$sid-pills;
+	background-color: var(--sid-pills);
 }
 
 .aside.aside_feed .feed .item-title:not([data-unread="0"])::after {
 	margin: 0.5em 0 0 0;
-	background-color: variables.$sid-pills;
+	background-color: var(--sid-pills);
 }
 
 .feed.item.empty.active {
-	background: variables.$grey-dark;
+	background: var(--grey-dark);
 }
 
 .feed.item.error.active {
-	background: variables.$grey-dark;
+	background: var(--grey-dark);
 }
 
 .feed.item.empty,
 .feed.item.empty > a {
-	color: variables.$grey-dark;
+	color: var(--grey-dark);
 }
 
 .feed.item.error,
 .feed.item.error > a {
-	color: variables.$grey-dark;
+	color: var(--grey-dark);
 }
 
 .feed.item.empty.active,
 .feed.item.error.active,
 .feed.item.empty.active > a,
 .feed.item.error.active > a {
-	color: variables.$white;
+	color: var(--white);
 }
 
 .aside_feed .tree-folder-items .dropdown-menu::after {
@@ -273,5 +267,5 @@
 }
 
 .aside_feed .stick #btn-add {
-	border-left-color: variables.$sid-bg;
+	border-left-color: var(--sid-bg);
 }
diff --git a/p/themes/Mapco/_sidebar.rtl.css b/p/themes/Mapco/_sidebar.rtl.css
new file mode 100644
index 000000000..a121c2b33
--- /dev/null
+++ b/p/themes/Mapco/_sidebar.rtl.css
@@ -0,0 +1,271 @@
+/*=== Tree */
+.tree {
+	margin: 10px 0;
+
+	&#sidebar {
+		scrollbar-color: rgba(255,255, 0, 0.1) rgba(0, 0, 0, 0.05);
+		scrollbar-color: color-mix(in srgb, var(--sid-font-color) 20%, transparent) color-mix(in srgb, var(--sid-font-color) 13%, transparent);
+	}
+
+
+	.tree-folder {
+		border-bottom: 1px solid var(--sid-sep);
+
+		.tree-folder-title {
+			padding: 0.75rem 1rem;
+			background: var(--sid-bg);
+			position: relative;
+			font-size: 0.85rem;
+			letter-spacing: 1px;
+			font-weight: 700;
+			text-transform: uppercase;
+
+			button.dropdown-toggle {
+				margin: -0.75rem -1rem -0.75rem 0.25rem;
+				padding: 0.75rem 1rem 0.75rem 0;
+
+				&:hover {
+					.icon {
+						filter: brightness(2) !important;
+						transition: 0.1s linear;
+					}
+				}
+			}
+
+			.icon {
+				margin-left: 0.5rem;
+			}
+
+			.title {
+				background: inherit;
+				color: var(--sid-font-color);
+
+				&:hover {
+					text-decoration: none;
+				}
+			}
+		}
+
+		&.active {
+			.tree-folder-title {
+				background: var(--sid-bg);
+				font-weight: bold;
+			}
+		}
+
+		.tree-folder-items {
+			background: var(--sid-bg-alt);
+
+			.item {
+				font-size: 1rem;
+				font-weight: 400;
+
+				transition: all 0.15s ease-in-out;
+
+				&.active {
+					background: var(--sid-active);
+
+					.dropdown li a {
+						color: var(--main-font-color);
+
+						&:hover {
+							color: var(--sid-font-color);
+						}
+					}
+
+					a {
+						color: var(--sid-active-font);
+					}
+				}
+
+				&:hover {
+					background: var(--sid-bg-dark);
+				}
+
+				a {
+					text-decoration: none;
+					color: var(--sid-font-color);
+
+					&.dropdown-toggle {
+						.icon {
+							margin-left: 0.25rem;
+						}
+					}
+				}
+			}
+		}
+	}
+}
+
+/*=== Buttons */
+.stick,
+.group {
+	input, .btn {
+		border-radius: 0;
+	}
+
+	.btn:first-child {
+		border-radius: 0 5px 5px 0;
+	}
+
+	.btn:last-child, input:last-child, .dropdown:last-child > .btn {
+		border-radius: 5px 0 0 5px;
+	}
+
+	.btn + .btn,
+	.btn + input,
+	.btn + .dropdown > .btn,
+	input + .btn,
+	input + input,
+	input + .dropdown > .btn,
+	.dropdown + .btn,
+	.dropdown + input,
+	.dropdown + .dropdown > .btn {
+		border-right: 1px solid var(--grey-medium-light);
+	}
+
+}
+
+.aside {
+	background: var(--sid-bg);
+
+	&.aside_feed {
+		padding: 10px 0;
+		text-align: center;
+		background: var(--sid-bg);
+
+		.tree-folder-title:hover button.dropdown-toggle .icon {
+			filter: none;
+		}
+	}
+
+	&.aside_feed .tree {
+		margin: 10px 0 50px;
+	}
+
+	a:hover {
+		.icon {
+			filter: brightness(2);
+			transition: 0.1s linear;
+		}
+	}
+
+}
+
+
+/* Sidebar des pages de configuration */
+
+
+
+/*=== Navigation */
+.nav-list {
+	font-size: 1rem;
+
+	.item.nav-header,
+	.item {
+		min-height: 2.5em;
+		line-height: 2.5em;
+	}
+
+	.item {
+		background: var(--sid-bg);
+		color: var(--white);
+		min-height: 2.5em;
+		line-height: 2.5em;
+
+		&.nav-header {
+			min-height: 2.5em;
+			line-height: 2.5em;
+		}
+
+		a, .as-link {
+			padding: 0 1rem;
+			color: var(--sid-font-color);
+
+			transition: all 0.15s ease-in-out;
+		}
+
+		a:hover, .as-link:hover {
+			background: var(--sid-bg-dark);
+			text-decoration: none;
+		}
+
+		&.active {
+			background: var(--main-first);
+			color: var(--white);
+
+			a, .as-link {
+				background: var(--main-first);
+				color: var(--white);
+				text-decoration: none;
+			}
+		}
+	}
+
+	.nav-header {
+		padding: 0 1rem;
+		font-weight: bold;
+		color: var(--grey-dark);
+		text-transform: uppercase;
+		letter-spacing: 1px;
+	}
+
+	.nav-form {
+		padding: 3px;
+		text-align: center;
+	}
+}
+
+/*=== Aside main page (categories) */
+.aside_feed .tree-folder-title > .title:not([data-unread="0"]) {
+	width: calc(100% - 35px - 35px);
+}
+
+.aside.aside_feed .category .title:not([data-unread="0"])::after {
+	margin: 0.75rem 0 0 0;
+	background-color: var(--sid-pills);
+}
+
+.aside.aside_feed .feed .item-title:not([data-unread="0"])::after {
+	margin: 0.5em 0 0 0;
+	background-color: var(--sid-pills);
+}
+
+.feed.item.empty.active {
+	background: var(--grey-dark);
+}
+
+.feed.item.error.active {
+	background: var(--grey-dark);
+}
+
+.feed.item.empty,
+.feed.item.empty > a {
+	color: var(--grey-dark);
+}
+
+.feed.item.error,
+.feed.item.error > a {
+	color: var(--grey-dark);
+}
+
+.feed.item.empty.active,
+.feed.item.error.active,
+.feed.item.empty.active > a,
+.feed.item.error.active > a {
+	color: var(--white);
+}
+
+.aside_feed .tree-folder-items .dropdown-menu::after {
+	right: 2px;
+}
+
+.aside_feed .tree-folder-items .item .dropdown-target:target ~ .dropdown-toggle > .icon,
+.aside_feed .tree-folder-items .item:hover .dropdown-toggle > .icon,
+.aside_feed .tree-folder-items .item.active .dropdown-toggle > .icon {
+	border-radius: 3px;
+}
+
+.aside_feed .stick #btn-add {
+	border-right-color: var(--sid-bg);
+}
diff --git a/p/themes/Mapco/_stats.css b/p/themes/Mapco/_stats.css
new file mode 100644
index 000000000..791bdb32d
--- /dev/null
+++ b/p/themes/Mapco/_stats.css
@@ -0,0 +1,16 @@
+/*=== STATISTICS */
+/*===============*/
+.stat {
+	margin: 10px 0 20px;
+}
+
+.stat th,
+.stat td,
+.stat tr {
+	border: none;
+}
+
+.stat > table td,
+.stat > table th {
+	border-bottom: 1px solid var(--grey-medium-light);
+}
diff --git a/p/themes/Mapco/_stats.rtl.css b/p/themes/Mapco/_stats.rtl.css
new file mode 100644
index 000000000..791bdb32d
--- /dev/null
+++ b/p/themes/Mapco/_stats.rtl.css
@@ -0,0 +1,16 @@
+/*=== STATISTICS */
+/*===============*/
+.stat {
+	margin: 10px 0 20px;
+}
+
+.stat th,
+.stat td,
+.stat tr {
+	border: none;
+}
+
+.stat > table td,
+.stat > table th {
+	border-bottom: 1px solid var(--grey-medium-light);
+}
diff --git a/p/themes/Mapco/_tables.css b/p/themes/Mapco/_tables.css
new file mode 100644
index 000000000..efb395640
--- /dev/null
+++ b/p/themes/Mapco/_tables.css
@@ -0,0 +1,18 @@
+/*=== Tables */
+table {
+	border-collapse: collapse;
+}
+
+th, td {
+	border: 1px solid var(--grey-medium-light);
+}
+
+th {
+	background: var(--grey-lighter);
+}
+
+.config-articleicons td,
+.config-articleicons th {
+	font-weight: normal;
+	text-align: center;
+}
diff --git a/p/themes/Mapco/_tables.rtl.css b/p/themes/Mapco/_tables.rtl.css
new file mode 100644
index 000000000..efb395640
--- /dev/null
+++ b/p/themes/Mapco/_tables.rtl.css
@@ -0,0 +1,18 @@
+/*=== Tables */
+table {
+	border-collapse: collapse;
+}
+
+th, td {
+	border: 1px solid var(--grey-medium-light);
+}
+
+th {
+	background: var(--grey-lighter);
+}
+
+.config-articleicons td,
+.config-articleicons th {
+	font-weight: normal;
+	text-align: center;
+}
diff --git a/p/themes/Mapco/_variables.css b/p/themes/Mapco/_variables.css
new file mode 100644
index 000000000..244a3a92e
--- /dev/null
+++ b/p/themes/Mapco/_variables.css
@@ -0,0 +1,60 @@
+:root {
+	/* The main color of the theme*/
+	--main-first: #36c; /* main color*/
+	--main-first-alt: #25c; /* var for hovers*/
+	--main-first-light: #effcfd; /* var light 1*/
+	--main-first-lighter: #f7fdfe; /* var light 2*/
+	--main-first-dark: #35363c; /* var for hovers*/
+	--main-first-darker: #1d1e22; /* var for hovers*/
+
+	/* linked font colors*/
+	--main-font-color: #303136;
+	--light-font-color: #5b6871;
+	--white: #fff; /* white (sometimes we would like to tint it a little)*/
+
+	/* the whole palette of grays, very useful*/
+	/* we will try to tint these grays according to the main color*/
+	--grey-darker: #3b3f4d;
+	--grey-dark: #5b6871;
+	--grey-medium-dark: #a6a7ae;
+	--grey-medium: #c5ced3;
+	--grey-medium-light: #d5d8db;
+	--grey-light: #eff0f2;
+	--grey-lighter: #f9fafb;
+
+	--unread-font-color: $main-first;
+	--unread-bg: #f2f6f8;
+	--unread-bg-light: #fdfdfe;
+
+	/* alert colors (red, yellow, green)*/
+	--alert-bg: #f5633e; /* the base*/
+	--alert-light: #fde0d8; /* +light*/
+	--alert-text: #73341f; /* +dark*/
+
+	--code-text: #e41212;
+	--code-bg: #fde3e3;
+
+	--warning-bg: #f4f762;
+	--warning-light: #fdfde0;
+	--warning-text: #73762f;
+
+	--success-bg: #10f587;
+	--success-light: #cffde7;
+	--success-text: #0c7540;
+
+	/* favourites*/
+	--fav-bg: #ffc300;
+	--fav-light: #fff6da;
+
+	/* the sidebar color, useful if you want a theme that would have a dark sidebar, e.g.*/
+	/* stylelint-disable-next-line color-hex-length*/
+	--sid-font-color: #ffffff; /* the background color of the left bar and the header*/
+	--sid-bg: #303136; /* the general background of the left bar, and of the header*/
+	--sid-bg-alt: #26272a; /* background inside groups*/
+	--sid-bg-dark: #17181a; /* the hover*/
+	--sid-sep: #3f3f3f; /* the separators*/
+	--sid-active: $main-first; /* the active color*/
+	/* stylelint-disable-next-line color-hex-length*/
+	--sid-active-font: #ffffff; /* the active color*/
+	--sid-pills: rgba(0,0,0, 0.25); /* capsules*/
+}
diff --git a/p/themes/Mapco/_variables.rtl.css b/p/themes/Mapco/_variables.rtl.css
new file mode 100644
index 000000000..244a3a92e
--- /dev/null
+++ b/p/themes/Mapco/_variables.rtl.css
@@ -0,0 +1,60 @@
+:root {
+	/* The main color of the theme*/
+	--main-first: #36c; /* main color*/
+	--main-first-alt: #25c; /* var for hovers*/
+	--main-first-light: #effcfd; /* var light 1*/
+	--main-first-lighter: #f7fdfe; /* var light 2*/
+	--main-first-dark: #35363c; /* var for hovers*/
+	--main-first-darker: #1d1e22; /* var for hovers*/
+
+	/* linked font colors*/
+	--main-font-color: #303136;
+	--light-font-color: #5b6871;
+	--white: #fff; /* white (sometimes we would like to tint it a little)*/
+
+	/* the whole palette of grays, very useful*/
+	/* we will try to tint these grays according to the main color*/
+	--grey-darker: #3b3f4d;
+	--grey-dark: #5b6871;
+	--grey-medium-dark: #a6a7ae;
+	--grey-medium: #c5ced3;
+	--grey-medium-light: #d5d8db;
+	--grey-light: #eff0f2;
+	--grey-lighter: #f9fafb;
+
+	--unread-font-color: $main-first;
+	--unread-bg: #f2f6f8;
+	--unread-bg-light: #fdfdfe;
+
+	/* alert colors (red, yellow, green)*/
+	--alert-bg: #f5633e; /* the base*/
+	--alert-light: #fde0d8; /* +light*/
+	--alert-text: #73341f; /* +dark*/
+
+	--code-text: #e41212;
+	--code-bg: #fde3e3;
+
+	--warning-bg: #f4f762;
+	--warning-light: #fdfde0;
+	--warning-text: #73762f;
+
+	--success-bg: #10f587;
+	--success-light: #cffde7;
+	--success-text: #0c7540;
+
+	/* favourites*/
+	--fav-bg: #ffc300;
+	--fav-light: #fff6da;
+
+	/* the sidebar color, useful if you want a theme that would have a dark sidebar, e.g.*/
+	/* stylelint-disable-next-line color-hex-length*/
+	--sid-font-color: #ffffff; /* the background color of the left bar and the header*/
+	--sid-bg: #303136; /* the general background of the left bar, and of the header*/
+	--sid-bg-alt: #26272a; /* background inside groups*/
+	--sid-bg-dark: #17181a; /* the hover*/
+	--sid-sep: #3f3f3f; /* the separators*/
+	--sid-active: $main-first; /* the active color*/
+	/* stylelint-disable-next-line color-hex-length*/
+	--sid-active-font: #ffffff; /* the active color*/
+	--sid-pills: rgba(0,0,0, 0.25); /* capsules*/
+}
diff --git a/p/themes/Mapco/_variables.scss b/p/themes/Mapco/_variables.scss
deleted file mode 100644
index 8482b0a42..000000000
--- a/p/themes/Mapco/_variables.scss
+++ /dev/null
@@ -1,58 +0,0 @@
-// The main color of the theme
-$main-first: #36c; // main color
-$main-first-alt: #25c; // var for hovers
-$main-first-light: #effcfd; // var light 1
-$main-first-lighter: #f7fdfe; // var light 2
-$main-first-dark: #35363c; // var for hovers
-$main-first-darker: #1d1e22; // var for hovers
-
-// linked font colors
-$main-font-color: #303136;
-$light-font-color: #5b6871;
-$white: #fff; // white (sometimes we would like to tint it a little)
-
-// the whole palette of grays, very useful
-// we will try to tint these grays according to the main color
-$grey-darker: #3b3f4d;
-$grey-dark: #5b6871;
-$grey-medium-dark: #a6a7ae;
-$grey-medium: #c5ced3;
-$grey-medium-light: #d5d8db;
-$grey-light: #eff0f2;
-$grey-lighter: #f9fafb;
-
-$unread-font-color: $main-first;
-$unread-bg: #f2f6f8;
-$unread-bg-light: #fdfdfe;
-
-// alert colors (red, yellow, green)
-$alert-bg: #f5633e; // the base
-$alert-light: #fde0d8; // +light
-$alert-text: #73341f; // +dark
-
-$code-text: #e41212;
-$code-bg: #fde3e3;
-
-$warning-bg: #f4f762;
-$warning-light: #fdfde0;
-$warning-text: #73762f;
-
-$success-bg: #10f587;
-$success-light: #cffde7;
-$success-text: #0c7540;
-
-// favourites
-$fav-bg: #ffc300;
-$fav-light: #fff6da;
-
-// the sidebar color, useful if you want a theme that would have a dark sidebar, e.g.
-// stylelint-disable-next-line color-hex-length
-$sid-font-color: #ffffff; // the background color of the left bar and the header
-$sid-bg: #303136; // the general background of the left bar, and of the header
-$sid-bg-alt: #26272a; // background inside groups
-$sid-bg-dark: #17181a; // the hover
-$sid-sep: #3f3f3f; // the separators
-$sid-active: $main-first; // the active color
-// stylelint-disable-next-line color-hex-length
-$sid-active-font: #ffffff; // the active color
-$sid-pills: rgba(0,0,0, 0.25); // capsules
diff --git a/p/themes/Mapco/mapco.css b/p/themes/Mapco/mapco.css
index 09b57156a..ed0f8f17c 100644
--- a/p/themes/Mapco/mapco.css
+++ b/p/themes/Mapco/mapco.css
@@ -1,1358 +1,52 @@
-@font-face {
-	font-family: "lato";
-	font-style: normal;
-	font-stretch: normal;
-	font-weight: 400;
-	src: url("../fonts/LatoLatin-Regular.woff") format("woff");
-}
-@font-face {
-	font-family: "lato";
-	font-style: italic;
-	font-stretch: normal;
-	font-weight: 400;
-	src: url("../fonts/LatoLatin-Italic.woff") format("woff");
-}
-@font-face {
-	font-family: "lato";
-	font-style: normal;
-	font-stretch: normal;
-	font-weight: 700;
-	src: url("../fonts/LatoLatin-Bold.woff") format("woff");
-}
-@font-face {
-	font-family: "lato";
-	font-style: italic;
-	font-stretch: normal;
-	font-weight: 700;
-	src: url("../fonts/LatoLatin-BoldItalic.woff") format("woff");
-}
-@font-face {
-	font-family: "spectral";
-	font-style: normal;
-	font-stretch: normal;
-	font-weight: 400;
-	src: url("../fonts/Spectral-Regular.woff") format("woff");
-}
-@font-face {
-	font-family: "spectral";
-	font-style: italic;
-	font-stretch: normal;
-	font-weight: 400;
-	src: url("../fonts/Spectral-Italic.woff") format("woff");
-}
-@font-face {
-	font-family: "spectral";
-	font-style: normal;
-	font-stretch: normal;
-	font-weight: 700;
-	src: url("../fonts/Spectral-Bold.woff") format("woff");
-}
-@font-face {
-	font-family: "spectral";
-	font-style: italic;
-	font-stretch: normal;
-	font-weight: 700;
-	src: url("../fonts/Spectral-BoldItalic.woff") format("woff");
-}
-/* stylelint-disable property-no-vendor-prefix */
-/* FUNCTIONS */
-/* btns */
-.btn {
-	margin: 0;
-	padding: 0.5rem 1.5rem;
-	background: #f9fafb;
-	color: #5b6871;
-	font-size: 1rem;
-	border: none;
-	border-radius: 5px;
-	min-height: 25px;
-	min-width: 15px;
-	line-height: 25px;
-	vertical-align: middle;
-	transition: all 0.15s ease-in-out;
-}
-.btn.btn-important {
-	background: #36c;
-	color: #fff;
-}
-.btn.btn-important:hover, .btn.btn-important:active {
-	background: #25c;
-}
-.btn.btn-important img {
-	filter: brightness(3);
-}
-.btn.btn-attention {
-	background: #f5633e;
-	color: #fff;
-}
-.btn.btn-attention:hover, .btn.btn-attention:active {
-	background: #73341f;
-}
-.btn:hover {
-	text-decoration: none;
-}
-
-/*=== Forms */
-legend {
-	margin: 2rem 0 1rem 0;
-	padding: 0;
-	display: inline-block;
-	width: auto;
-	font-size: 1rem;
-	clear: both;
-	text-transform: uppercase;
-	letter-spacing: 1px;
-	font-weight: 700;
-}
-
-label {
-	min-height: 25px;
-	padding: 5px 0;
-	cursor: pointer;
-	color: #5b6871;
-}
-
-textarea {
-	max-width: 100%;
-}
-
-input, select, textarea, button {
-	padding: 5px 10px;
-	background: #fff;
-	color: #5b6871;
-	font-family: "lato", "Helvetica", "Arial", sans-serif;
-	font-size: 1rem;
-	border: 1px solid #eff0f2;
-	border-radius: 2px;
-	min-height: 25px;
-	line-height: 25px;
-	vertical-align: middle;
-}
-
-select {
-	padding-top: 9px;
-	padding-bottom: 9px;
-}
-
-option {
-	padding: 0 0.5em;
-}
-
-input:focus, select:focus, textarea:focus {
-	color: #303136;
-	border-color: #36c;
-}
-
-input:invalid, select:invalid {
-	color: #f5633e;
-	border-color: #f5633e;
-	box-shadow: none;
-}
-
-input:disabled, select:disabled {
-	background: #eff0f2;
-}
-
-.form-group {
-	padding: 5px;
-	border-radius: 3px;
-}
-.form-group::after {
-	display: block;
-	clear: both;
-}
-.form-group .group-name {
-	padding: 10px 0;
-}
-.form-group .group-controls {
-	min-height: 25px;
-	padding: 5px 0;
-}
-.form-group .group-controls .control {
-	line-height: 2em;
-}
-.form-group.form-actions {
-	margin: 15px 0 25px;
-	padding: 5px 0;
-}
-.form-group.form-actions .btn {
-	margin: 0 0.5rem 0 0;
-}
-
-/*=== Tables */
-table {
-	border-collapse: collapse;
-}
-
-th, td {
-	border: 1px solid #d5d8db;
-}
-
-th {
-	background: #f9fafb;
-}
-
-.config-articleicons td,
-.config-articleicons th {
-	font-weight: normal;
-	text-align: center;
-}
-
-/*=== COMPONENTS */
-/*===============*/
-/*=== Forms */
-/*=== Horizontal-list */
-.horizontal-list {
-	padding: 0.1rem 0;
-}
-.horizontal-list > .item:first-child {
-	padding-left: 0.5rem;
-}
-
-/*=== Dropdown */
-.dropdown .dropdown-target:target + .btn {
-	background-color: #d5d8db;
-}
-
-.dropdown-menu {
-	margin: 9px 0 0 0;
-	padding: 0.5rem 0 1rem 0;
-	background: #f9fafb;
-	font-size: 1rem;
-	border: none;
-	border-radius: 3px;
-	box-shadow: 0px 6px 8px 0px rgba(0, 0, 0, 0.35);
-	text-align: left;
-}
-.dropdown-menu::after {
-	border: none;
-	right: 18px;
-}
-.dropdown-menu .dropdown-header,
-.dropdown-menu .dropdown-section .dropdown-section-title {
-	padding: 1rem 1.5rem;
-	font-weight: bold;
-	text-align: left;
-	color: #5b6871;
-	text-transform: uppercase;
-	letter-spacing: 1px;
-}
-.dropdown-menu .item {
-	transition: all 0.075s ease-in-out;
-}
-.dropdown-menu .item > a,
-.dropdown-menu .item > span,
-.dropdown-menu .item > .as-link {
-	padding: 0 2rem;
-	color: #303136;
-	font-size: inherit;
-	line-height: 2.5em;
-}
-.dropdown-menu .item > a span.icon,
-.dropdown-menu .item > span span.icon,
-.dropdown-menu .item > .as-link span.icon {
-	padding: 0 0.25rem !important;
-}
-.dropdown-menu .item > a:not(.addItem):hover,
-.dropdown-menu .item > .as-link:not(.addItem):hover {
-	background: #36c;
-	color: #fff;
-}
-.dropdown-menu .item > a:not(.addItem):hover .icon,
-.dropdown-menu .item > .as-link:not(.addItem):hover .icon {
-	filter: brightness(3);
-}
-.dropdown-menu .item.dropdown-section {
-	margin-top: 0.75rem;
-}
-.dropdown-menu .item.dropdown-section ~ .dropdown-section {
-	border-top-color: #eff0f2;
-}
-.dropdown-menu .item.dropdown-section .item a, .dropdown-menu .item.dropdown-section .item .as-link {
-	padding-left: 2rem;
-}
-.dropdown-menu .item[aria-checked=true] a::before {
-	margin: 0 0 0 -14px;
-	font-weight: bold;
-}
-.dropdown-menu .item ~ .dropdown-header {
-	margin-top: 0.75rem;
-	padding-top: 1.75rem;
-	border-top-color: #eff0f2;
-}
-.dropdown-menu .item.separator {
-	margin-top: 0.75rem;
-	border-top-color: #eff0f2;
-}
-.dropdown-menu .input select, .dropdown-menu .input input {
-	margin: 0 auto 5px;
-	padding: 2px 5px;
-	border-radius: 3px;
-}
-
-.tree .tree-folder .tree-folder-items .dropdown-menu .item {
-	padding: 0;
-}
-.tree .tree-folder .tree-folder-items .dropdown-menu .item a,
-.tree .tree-folder .tree-folder-items .dropdown-menu .item button {
-	color: #303136;
-}
-.tree .tree-folder .tree-folder-items .dropdown-menu .item a:hover,
-.tree .tree-folder .tree-folder-items .dropdown-menu .item button:hover {
-	color: #fff;
-}
-.tree .tree-folder .tree-folder-items .dropdown-menu .item:hover {
-	background: #36c;
-}
-
-/*=== Alerts */
-.alert {
-	background: #f9fafb;
-	color: #5b6871;
-	font-size: 1rem;
-	border: 1px solid #c5ced3;
-	border-radius: 3px;
-	text-shadow: 0 0 1px #eff0f2;
-}
-
-.alert-head {
-	font-size: 1.15em;
-}
-
-.alert > a {
-	text-decoration: underline;
-	color: inherit;
-}
-
-.alert-warn {
-	background: #fdfde0;
-	color: #73762f;
-	border: 1px solid #73762f33;
-}
-
-.alert-success {
-	background: #cffde7;
-	color: #0c7540;
-	border: 1px solid #0c754033;
-}
-
-.alert-error {
-	background: #fde0d8;
-	color: #73341f;
-	border: 1px solid #73341f33;
-}
-
-/*=== Pagination */
-.pagination {
-	background: #eff0f2;
-	color: #303136;
-}
-.pagination .item a {
-	color: #303136;
-}
-
-#load_more.loading,
-#load_more.loading:hover {
-	background: url("loader.gif") center center no-repeat #34495e;
-}
-
-/*=== Boxes */
-.box {
-	background: #fff;
-	border: none;
-	border-radius: 3px;
-	box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25);
-}
-.box .box-title {
-	background: #eff0f2;
-	color: #303136;
-	border-radius: 2px 2px 0 0;
-}
-.box .box-title .configure {
-	padding: 5px;
-}
-.box .box-title:hover .configure .icon {
-	vertical-align: middle;
-}
-.box .box-title:hover .configure:hover {
-	background-color: #36c;
-}
-.box .box-title:hover .configure:hover .icon {
-	filter: brightness(3);
-}
-.box .box-title form input {
-	width: 85%;
-}
-.box .box-title form .dropdown {
-	float: right;
-}
-.box .box-title form .dropdown a.dropdown-toggle {
-	padding: 0;
-	border-radius: 0;
-	background-image: url(icons/more.svg);
-	background-repeat: no-repeat;
-	background-position: right 8px;
-}
-.box .box-title form .dropdown a.dropdown-toggle img {
-	display: none;
-}
-.box .box-content {
-	padding-left: 30px;
-}
-.box .box-content .item {
-	padding: 0.25rem 0;
-	color: #303136;
-	font-size: 1rem;
-	border-bottom: 1px solid #eff0f2;
-	line-height: 1.7em;
-}
-.box .box-content .item .configure {
-	padding: 5px;
-}
-.box .box-content .item .configure .icon {
-	vertical-align: middle;
-}
-.box .box-content .item .configure:hover {
-	background-color: #36c;
-}
-.box .box-content .item .configure:hover .icon {
-	filter: brightness(3);
-}
-.box .box-content .item:last-child {
-	border-bottom: none;
-}
-
-/*=== "Load more" part */
-#bigMarkAsRead.big {
-	text-align: center;
-	text-decoration: none;
-	background: #effcfd;
-	color: #36c;
-	transition: all 0.15s ease-in-out;
-}
-#bigMarkAsRead.big:hover {
-	background: #36c;
-	color: #fff;
-}
-#bigMarkAsRead.big:hover .bigTick {
-	filter: brightness(5);
-}
-#bigMarkAsRead.big .bigTick {
-	margin: 0.5rem 0;
-	background: url(icons/tick-color.svg) center no-repeat;
-	display: inline-block;
-	width: 64px;
-	height: 64px;
-	text-indent: -9999px;
-	white-space: nowrap;
-}
-
-/*=== DIVERS */
-/*===========*/
-.aside.aside_feed .nav-form input,
-.aside.aside_feed .nav-form select {
-	width: 140px;
-}
-
-.aside.aside_feed .nav-form .dropdown .dropdown-menu {
-	right: -20px;
-}
-
-.aside.aside_feed .nav-form .dropdown .dropdown-menu::after {
-	right: 33px;
-}
-
-/*=== Tree */
-.tree {
-	margin: 10px 0;
-}
-.tree#sidebar {
-	scrollbar-color: rgba(255, 255, 0, 0.1) rgba(0, 0, 0, 0.05);
-	scrollbar-color: #ffffff33 #ffffff22;
-}
-.tree .tree-folder {
-	border-bottom: 1px solid #3f3f3f;
-}
-.tree .tree-folder .tree-folder-title {
-	padding: 0.75rem 1rem;
-	background: #303136;
-	position: relative;
-	font-size: 0.85rem;
-	letter-spacing: 1px;
-	font-weight: 700;
-	text-transform: uppercase;
-}
-.tree .tree-folder .tree-folder-title button.dropdown-toggle {
-	margin: -0.75rem 0.25rem -0.75rem -1rem;
-	padding: 0.75rem 0 0.75rem 1rem;
-}
-.tree .tree-folder .tree-folder-title button.dropdown-toggle:hover .icon {
-	filter: brightness(2) !important;
-	transition: 0.1s linear;
-}
-.tree .tree-folder .tree-folder-title .icon {
-	margin-right: 0.5rem;
-}
-.tree .tree-folder .tree-folder-title .title {
-	background: inherit;
-	color: #ffffff;
-}
-.tree .tree-folder .tree-folder-title .title:hover {
-	text-decoration: none;
-}
-.tree .tree-folder.active .tree-folder-title {
-	background: #303136;
-	font-weight: bold;
-}
-.tree .tree-folder .tree-folder-items {
-	background: #26272a;
-}
-.tree .tree-folder .tree-folder-items .item {
-	font-size: 1rem;
-	font-weight: 400;
-	transition: all 0.15s ease-in-out;
-}
-.tree .tree-folder .tree-folder-items .item.active {
-	background: #36c;
-}
-.tree .tree-folder .tree-folder-items .item.active .dropdown li a {
-	color: #303136;
-}
-.tree .tree-folder .tree-folder-items .item.active .dropdown li a:hover {
-	color: #ffffff;
-}
-.tree .tree-folder .tree-folder-items .item.active a {
-	color: #ffffff;
-}
-.tree .tree-folder .tree-folder-items .item:hover {
-	background: #17181a;
-}
-.tree .tree-folder .tree-folder-items .item a {
-	text-decoration: none;
-	color: #ffffff;
-}
-.tree .tree-folder .tree-folder-items .item a.dropdown-toggle .icon {
-	margin-right: 0.25rem;
-}
-
-/*=== Buttons */
-.stick input, .stick .btn,
-.group input,
-.group .btn {
-	border-radius: 0;
-}
-.stick .btn:first-child,
-.group .btn:first-child {
-	border-radius: 5px 0 0 5px;
-}
-.stick .btn:last-child, .stick input:last-child, .stick .dropdown:last-child > .btn,
-.group .btn:last-child,
-.group input:last-child,
-.group .dropdown:last-child > .btn {
-	border-radius: 0 5px 5px 0;
-}
-.stick .btn + .btn,
-.stick .btn + input,
-.stick .btn + .dropdown > .btn,
-.stick input + .btn,
-.stick input + input,
-.stick input + .dropdown > .btn,
-.stick .dropdown + .btn,
-.stick .dropdown + input,
-.stick .dropdown + .dropdown > .btn,
-.group .btn + .btn,
-.group .btn + input,
-.group .btn + .dropdown > .btn,
-.group input + .btn,
-.group input + input,
-.group input + .dropdown > .btn,
-.group .dropdown + .btn,
-.group .dropdown + input,
-.group .dropdown + .dropdown > .btn {
-	border-left: 1px solid #d5d8db;
-}
-
-.aside {
-	background: #303136;
-}
-.aside.aside_feed {
-	padding: 10px 0;
-	text-align: center;
-	background: #303136;
-}
-.aside.aside_feed .tree-folder-title:hover button.dropdown-toggle .icon {
-	filter: none;
-}
-.aside.aside_feed .tree {
-	margin: 10px 0 50px;
-}
-.aside a:hover .icon {
-	filter: brightness(2);
-	transition: 0.1s linear;
-}
-
-/* Sidebar des pages de configuration */
-/*=== Navigation */
-.nav-list {
-	font-size: 1rem;
-}
-.nav-list .item.nav-header,
-.nav-list .item {
-	min-height: 2.5em;
-	line-height: 2.5em;
-}
-.nav-list .item {
-	background: #303136;
-	color: #fff;
-	min-height: 2.5em;
-	line-height: 2.5em;
-}
-.nav-list .item.nav-header {
-	min-height: 2.5em;
-	line-height: 2.5em;
-}
-.nav-list .item a, .nav-list .item .as-link {
-	padding: 0 1rem;
-	color: #ffffff;
-	transition: all 0.15s ease-in-out;
-}
-.nav-list .item a:hover, .nav-list .item .as-link:hover {
-	background: #17181a;
-	text-decoration: none;
-}
-.nav-list .item.active {
-	background: #36c;
-	color: #fff;
-}
-.nav-list .item.active a, .nav-list .item.active .as-link {
-	background: #36c;
-	color: #fff;
-	text-decoration: none;
-}
-.nav-list .nav-header {
-	padding: 0 1rem;
-	font-weight: bold;
-	color: #5b6871;
-	text-transform: uppercase;
-	letter-spacing: 1px;
-}
-.nav-list .nav-form {
-	padding: 3px;
-	text-align: center;
-}
-
-/*=== Aside main page (categories) */
-.aside_feed .tree-folder-title > .title:not([data-unread="0"]) {
-	width: calc(100% - 35px - 35px);
-}
-
-.aside.aside_feed .category .title:not([data-unread="0"])::after {
-	margin: 0.75rem 0 0 0;
-	background-color: rgba(0, 0, 0, 0.25);
-}
-
-.aside.aside_feed .feed .item-title:not([data-unread="0"])::after {
-	margin: 0.5em 0 0 0;
-	background-color: rgba(0, 0, 0, 0.25);
-}
+@charset "UTF-8";
 
-.feed.item.empty.active {
-	background: #5b6871;
-}
-
-.feed.item.error.active {
-	background: #5b6871;
-}
-
-.feed.item.empty,
-.feed.item.empty > a {
-	color: #5b6871;
-}
+@import "_fonts.css";
 
-.feed.item.error,
-.feed.item.error > a {
-	color: #5b6871;
-}
+@import "_variables.css";
 
-.feed.item.empty.active,
-.feed.item.error.active,
-.feed.item.empty.active > a,
-.feed.item.error.active > a {
-	color: #fff;
-}
+@import "_forms.css";
 
-.aside_feed .tree-folder-items .dropdown-menu::after {
-	left: 2px;
-}
+@import "_tables.css";
 
-.aside_feed .tree-folder-items .item .dropdown-target:target ~ .dropdown-toggle > .icon,
-.aside_feed .tree-folder-items .item:hover .dropdown-toggle > .icon,
-.aside_feed .tree-folder-items .item.active .dropdown-toggle > .icon {
-	border-radius: 3px;
-}
+@import "_components.css";
 
-.aside_feed .stick #btn-add {
-	border-left-color: #303136;
-}
+@import "_divers.css";
 
-/*=== STRUCTURE */
-/*===============*/
-/*=== Header */
-.header {
-	background: #303136;
-}
-.header .item {
-	vertical-align: middle;
-}
-.header .item.title a {
-	padding: 0.5rem 1rem;
-}
-.header .item.title a .logo {
-	filter: grayscale(100%) brightness(3);
-}
-.header .item.title a:hover .logo {
-	filter: grayscale(100%) brightness(2.2);
-}
-.header .item.search input {
-	width: 350px;
-	color: #ffffff;
-	border: none;
-	border-radius: 2px 0 0 2px;
-	background-color: #26272a;
-	transition: all 0.15s ease-in-out;
-}
-.header .item.search input:hover {
-	background-color: #17181a;
-}
-.header .item.search input:focus {
-	color: #5b6871;
-	background-color: #fff;
-}
-.header .item.search input:focus ~ .btn,
-.header .item.search input:hover ~ .btn {
-	background-color: #36c;
-}
-.header .item.search input:focus ~ .btn .icon,
-.header .item.search input:hover ~ .btn .icon {
-	filter: brightness(3);
-}
-.header .item.search .btn {
-	width: 3rem;
-	border-radius: 0 2px 2px 0;
-	background-color: #26272a;
-	border-left-width: 0;
-	min-height: 35px;
-}
-.header .item.search .btn:hover {
-	background-color: #25c;
-}
-.header .item.search .btn:hover .icon {
-	filter: brightness(3);
-}
-.header .item.configure {
-	text-align: center;
-}
-.header .item.configure .btn .icon,
-.header .item.configure > .icon {
-	filter: brightness(3);
-}
-.header .item.configure .signin {
-	color: white;
-}
-.header .item.configure .btn {
-	padding: 0.25rem 1rem;
-	background-color: transparent;
-}
+@import "_sidebar.css";
 
-/*=== Body */
-#global {
-	height: calc(100vh - (3rem + 2 * var(--frss-padding-top-bottom)));
-}
+@import "_layout.css";
 
-/*=== Prompt (centered) */
-main.prompt {
-	background: #eff0f2;
-	border-radius: 5px;
-}
+@import "_list-view.css";
 
-/*=== New article notification */
-#new-article {
-	background: #36c;
-	font-size: 1rem;
-	text-align: center;
-}
+@import "_global-view.css";
 
-#new-article > a {
-	padding: calc(0.75rem + var(--frss-padding-top-bottom)) 1rem;
-	font-weight: bold;
-	color: #fff;
-}
+@import "_reader-view.css";
 
-#new-article > a:hover {
-	text-decoration: none;
-	background: #25c;
-}
+@import "_configuration.css";
 
-/*=== Transition indication, e.g. day */
-.transition {
-	padding: 1rem 0 0 1.25rem;
-	color: #5b6871;
-	font-size: 0.875rem;
-	font-weight: 700;
-	line-height: 3em;
-	letter-spacing: 1px;
-	text-transform: uppercase;
-}
-.transition .name {
-	padding: 0 1rem 0 1rem;
-	color: #303136;
-	font-size: 0.875rem;
-	position: relative;
-	left: 0;
-	text-transform: uppercase;
-}
+@import "_logs.css";
 
-.btn {
-	border-left-width: 0;
-	padding: 0.5rem 1rem;
-	background-color: #eff0f2;
-	background-position: center;
-	background-repeat: no-repeat;
-	transition: all 0.15s ease-in-out;
-}
-.btn:hover {
-	background-color: #d5d8db;
-}
-.btn.active {
-	background-color: #36c;
-}
-.btn.active .icon {
-	filter: brightness(3);
-}
+@import "_stats.css";
 
-/*=== Index menu */
-.nav_menu {
-	text-align: center;
-	padding: 5px 0;
-}
-.nav_menu .btn {
-	border-left-width: 0;
-	padding: 0.5rem 1rem;
-	background-color: #f9fafb;
-	background-position: center;
-	background-repeat: no-repeat;
-}
-.nav_menu .btn:hover {
-	background-color: #d5d8db;
-}
-.nav_menu .stick .btn,
-.nav_menu .group .btn {
-	border-left-width: 0;
-	padding: 0.5rem 1rem;
-	background-color: #f9fafb;
-	background-position: center;
-	background-repeat: no-repeat;
-	transition: all 0.15s ease-in-out;
-}
-.nav_menu .stick .btn:hover,
-.nav_menu .group .btn:hover {
-	background-color: #d5d8db;
-}
-.nav_menu .stick .btn.active,
-.nav_menu .group .btn.active {
-	background-color: #36c;
-}
-.nav_menu .stick .btn#toggle-read.active .icon,
-.nav_menu .group .btn#toggle-read.active .icon {
-	filter: brightness(3.5);
-}
-.nav_menu .stick .btn#toggle-unread.active .icon,
-.nav_menu .group .btn#toggle-unread.active .icon {
-	filter: brightness(3.5) grayscale(1);
-}
-.nav_menu .stick .btn.read_all,
-.nav_menu .group .btn.read_all {
-	padding: 5px 16px;
-	color: #303136;
-	background-color: #f9fafb;
-	transition: all 0.15s ease-in-out;
-}
-.nav_menu .stick .btn.read_all:hover,
-.nav_menu .group .btn.read_all:hover {
-	background-color: #d5d8db;
-}
-.nav_menu .stick .dropdown:not(#dropdown-search-wrapper) a.dropdown-toggle,
-.nav_menu .group .dropdown:not(#dropdown-search-wrapper) a.dropdown-toggle {
-	border-left-width: 0;
-	background-image: url(icons/more.svg);
-}
-.nav_menu .stick .dropdown:not(#dropdown-search-wrapper) a.dropdown-toggle .icon,
-.nav_menu .group .dropdown:not(#dropdown-search-wrapper) a.dropdown-toggle .icon {
-	display: none;
-}
-.nav_menu .stick #dropdown-search-wrapper.dropdown a.dropdown-toggle,
-.nav_menu .group #dropdown-search-wrapper.dropdown a.dropdown-toggle {
-	border-left-width: 0;
-}
+@import "_mobile.css";
 
-/*=== Content of feed articles */
-.content, .content_thin {
-	padding: 20px 10px;
-	font-size: 1.125rem;
-	line-height: 1.8rem;
-}
-.content h1.title a, .content h1 a, .content_thin h1.title a, .content_thin h1 a {
-	color: #303136;
-	font-family: "spectral", serif;
-	font-size: 2rem;
-}
-.content h1.title a:hover, .content h1 a:hover, .content_thin h1.title a:hover, .content_thin h1 a:hover {
-	color: #36c;
-	text-decoration: none;
-}
-.content .author, .content_thin .author {
-	color: #5b6871;
-	font-size: 1.125rem;
-}
-.content p, .content ul, .content_thin p, .content_thin ul {
-	font-size: 1.125rem;
-	line-height: 1.8rem;
-}
-.content .content hr, .content_thin .content hr {
-	margin: 30px 10px;
-	background: #d5d8db;
-	height: 1px;
-	border: 0;
-	box-shadow: 0 2px 5px #ccc;
-}
-.content pre, .content_thin pre {
-	background: #1d1e22;
-	color: #fff;
-	border-radius: 3px;
-}
-.content pre code, .content_thin pre code {
-	background: transparent;
-	color: #fff;
-	border: none;
-}
-.content code, .content_thin code {
-	background: #fde3e3;
-	color: #e41212;
-	font-size: 1rem;
-	border-radius: 3px;
-}
-.content blockquote, .content_thin blockquote {
-	margin: 0;
-	padding: 0.5rem 1.5rem;
-	background: #f9fafb;
-	display: block;
-	color: #5b6871;
-	border-left: 4px solid #d5d8db;
-}
-.content blockquote p, .content_thin blockquote p {
-	margin: 0;
-}
-
-/*=== Notification and actualize notification */
-.notification {
-	padding: 1rem 0;
-	background: #d5d8db;
-	width: 100%;
-	height: 3rem;
-	color: #5b6871;
-	font-size: 1em;
-	border: none;
-	position: fixed;
-	top: auto;
-	bottom: 0;
-	left: 0;
-	right: 0;
-	text-align: center;
-	line-height: 3em;
-	vertical-align: middle;
-}
-.notification .msg {
-	display: inline-block;
-	font-size: 1rem;
-}
-.notification.good {
-	background: #10f587;
-	color: #fff;
-}
-.notification.bad {
-	background: #f5633e;
-	color: #fff;
-}
-.notification .close .icon {
-	filter: brightness(3);
-}
-.notification.good .close:hover {
-	background: #0c7540;
-}
-.notification.bad .close:hover {
-	background: #73341f;
-}
-.notification#actualizeProgress br {
-	display: none;
-}
-.notification#actualizeProgress .title {
-	margin: 0 2rem;
-}
-
-/*=== Navigation menu (for articles) */
-#nav_entries {
-	background: #303136;
-}
-
-/*=== Feed articles */
-.flux {
-	background: #fff;
-	transition: all 0.15s ease-in-out;
-}
-.flux .flux_header:hover {
-	background: #f9fafb;
-}
-.flux .flux_header:hover:not(.current):hover .item .title {
-	background: #f9fafb;
-}
-.flux.current {
-	background: #f9fafb;
-	border-left-color: #36c;
-}
-.flux.not_read:not(.current) {
-	background: #f2f6f8;
-}
-.flux.not_read:not(.current):hover .item .title {
-	background: #f2f6f8;
-}
-.flux.not_read .item .title a {
-	color: #36c;
-}
-.flux.not_read .item.website a {
-	color: #36c;
-}
-.flux.not_read .item .date {
-	color: rgba(51, 102, 204, 0.5);
-}
-.flux.favorite {
-	border-left-color: #ffc300;
-	transition: all 0.15s ease-in-out;
-}
-.flux.favorite:not(.current) {
-	background: #fff6da;
-}
-.flux.favorite:not(.current):hover .item .title {
-	background: #fff6da;
-}
-.flux .website a {
-	color: #303136;
-	opacity: 0.75;
-}
-.flux .flux_header .date,
-.flux .flux_content .bottom .date {
-	color: rgba(48, 49, 54, 0.5);
-	font-size: 0.85rem;
-}
-.flux .bottom {
-	font-size: 1rem;
-	text-align: center;
-}
-
-.flux_header {
-	font-size: 1rem;
-	cursor: pointer;
-	border-top: 1px solid #eff0f2;
-}
-.flux_header .title {
-	font-size: 1rem;
-}
-
-/*=== GLOBAL VIEW */
-/*================*/
-#stream .box.category:not([data-unread="0"]) .box-title .title {
-	font-weight: bold;
-}
-#stream .box.category .box-title {
-	padding: 1.5rem;
-	background: none;
-}
-#stream .box.category .box-title a.title {
-	color: #5b6871;
-	font-size: 1rem;
-	font-weight: normal;
-	text-decoration: none;
-	text-align: left;
-	text-transform: uppercase;
-	letter-spacing: 1px;
-}
-#stream .box.category .box-title a.title:not([data-unread="0"])::after {
-	margin: -0.5rem 1rem 0 0;
-	padding: 0 0.75rem;
-	background: #eff0f2;
-	border-radius: 12px;
-	position: absolute;
-	top: 1.75rem;
-	right: 0;
-	line-height: 1.5rem;
-	text-align: center;
-}
-#stream .box.category .box-title a.title:hover {
-	color: #36c;
-}
-#stream .box.category .box-content .item.feed a {
-	color: #303136;
-	font-weight: 400;
-}
-#stream .box.category .box-content .item.feed a:hover {
-	color: #36c;
-	text-decoration: none;
-}
-
-#overlay {
-	background: rgba(0, 0, 0, 0.65);
-}
-
-#panel {
-	top: 3rem;
-	right: 3rem;
-	bottom: 3rem;
-	left: 3rem;
-	border-radius: 3px;
-}
-
-/*=== READER VIEW */
-/*================*/
-#stream.reader .flux {
-	background: #eff0f2;
-	color: #303136;
-	border: none;
-}
-#stream.reader .flux .flux_content {
-	background-color: #fff;
-	border: none;
-}
-#stream.reader .flux .flux_content .author {
-	color: #a6a7ae;
-}
-
-/*=== Configuration pages */
-.post {
-	font-size: 1rem;
-}
-.post h1, .post h2 {
-	color: #303136;
-	font-size: 2rem;
-	margin-top: 1.75rem;
-	font-weight: 300;
-	line-height: 1.2em;
-}
-.post h2 {
-	font-size: 1.5rem;
-}
-.post a[href="./"] {
-	margin: 0;
-	padding: 0.75rem 1.5rem;
-	background: #f9fafb;
-	display: inline-block;
-	color: #5b6871;
-	font-size: 1rem;
-	border: 1px solid #d5d8db;
-	border-radius: 5px;
-	min-width: 15px;
-	line-height: 25px;
-	vertical-align: middle;
-	cursor: pointer;
-	overflow: hidden;
-}
-.post a[href="./"]:hover {
-	background: #36c;
-	color: white;
-	border: 1px solid #36c;
-	text-decoration: none;
-}
-
-#slider {
-	border-left: none;
-	box-shadow: 0px 6px 8px 0px rgba(0, 0, 0, 0.35);
-}
-
-.theme-preview-list .preview-container .properties {
-	padding: 1rem;
-	background: rgba(0, 0, 0, 0.75);
-	color: white;
-	border: 0;
-}
-.theme-preview-list .preview-container .properties .page-number {
-	right: 1rem;
-	top: 1rem;
-}
-
-/*=== LOGS */
-/*=========*/
-.log-item.log-error {
-	background-color: rgba(51, 102, 204, 0.2);
-}
-
-/*=== STATISTICS */
-/*===============*/
-.stat {
-	margin: 10px 0 20px;
-}
-
-.stat th,
-.stat td,
-.stat tr {
-	border: none;
-}
-
-.stat > table td,
-.stat > table th {
-	border-bottom: 1px solid #d5d8db;
-}
-
-/*=== MOBILE */
-/*===========*/
-@media (max-width: 840px) {
-	.aside {
-		transition: all 0.2s ease-in-out;
-	}
-	.aside.aside_feed {
-		padding: 0;
-	}
-	.aside .tree .tree-folder .tree-folder-items .item a {
-		padding: 0.5rem 1rem;
-	}
-	.aside .toggle_aside,
-	#overlay .close,
-	.dropdown-menu .toggle_aside,
-	#slider .toggle_aside {
-		background-color: #36c;
-	}
-	.aside .toggle_aside:hover,
-	#overlay .close:hover,
-	.dropdown-menu .toggle_aside:hover,
-	#slider .toggle_aside:hover {
-		background-color: #25c;
-	}
-	.aside .toggle_aside .icon,
-	#overlay .close .icon,
-	.dropdown-menu .toggle_aside .icon,
-	#slider .toggle_aside .icon {
-		filter: grayscale(100%) brightness(2.5);
-	}
-	.header .item.search {
-		display: none;
-	}
-	.header .item.configure {
-		position: absolute;
-		top: 0;
-		right: 0;
-	}
-	#global {
-		height: calc(100% - 8rem);
-	}
-	#panel {
-		top: 0;
-		right: 0;
-		bottom: 0;
-		left: 0;
-	}
-	main.prompt {
-		max-width: 100%;
-		min-width: auto;
-		width: 75%;
-	}
-	.post {
-		padding-left: 1rem;
-		padding-right: 1rem;
-	}
-	.nav_menu .btn {
-		margin: 0;
-		padding: 0.85rem 1.25rem;
-	}
-	.nav_menu .stick,
-	.nav_menu .group {
-		margin: 0.5rem 0.5rem;
-	}
-	.nav_menu .stick .btn,
-	.nav_menu .group .btn {
-		margin: 0;
-		padding: 0.85rem 1.25rem;
-	}
-	.nav_menu .stick .btn.read_all,
-	.nav_menu .group .btn.read_all {
-		padding: 0.85rem 1.25rem;
-	}
-	.nav_menu .search .input {
-		max-width: 97%;
-		width: 90px;
-	}
-	.nav_menu .search .input:focus {
-		width: 400px;
-	}
-	#nav_menu_read_all #nav_menu_read .dropdown-toggle.btn {
-		background-image: none;
-	}
-	#stream .flux .flux_header {
-		padding: 0.5rem 0;
-	}
-	.dropdown-target:target ~ .dropdown-toggle::after {
-		background-color: #f9fafb;
-		border-top: 1px solid #eff0f2;
-		border-left: 1px solid #eff0f2;
-		right: 21px;
-		bottom: -14px;
-	}
-	.dropdown-target:target ~ a.dropdown-toggle:not(.btn)::after {
-		bottom: -17px;
-	}
-	.transition {
-		text-align: center;
-		padding: 1rem 0;
-	}
-	.transition .name {
-		padding: 0;
-		display: block;
-		width: 100%;
-		line-height: 1.5rem;
-		margin-bottom: 1rem;
-	}
-	#nav_entries button {
-		height: 4.5rem;
-	}
-	.notification {
-		border-radius: 0;
-	}
-	.notification a.close {
-		background: transparent;
-		display: block;
-		left: 0;
-	}
-	.notification a.close:hover {
-		opacity: 0.5;
-	}
-	.notification a.close .icon {
-		display: none;
-	}
-}
 /*=== GENERAL */
 /*============*/
 html, body {
-	background: #eff0f2;
-	color: #303136;
+	background: var(--grey-light);
+	color: var(--main-font-color);
 	font-family: "lato", "Helvetica", "Arial", sans-serif;
 	font-size: 0.875rem;
 }
 
 body.formLogin,
 body.register {
-	background: #303136;
+	background: var(--sid-bg);
 }
 
 /*=== Links */
 a, button.as-link {
 	outline: none;
-	color: #36c;
+	color: var(--main-first);
 }
 
-/*# sourceMappingURL=mapco.css.map */
diff --git a/p/themes/Mapco/mapco.css.map b/p/themes/Mapco/mapco.css.map
deleted file mode 100644
index 48afc852b..000000000
--- a/p/themes/Mapco/mapco.css.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["_fonts.scss","_mixins.scss","_forms.scss","_variables.scss","_tables.scss","_components.scss","_divers.scss","_sidebar.scss","_layout.scss","_list-view.scss","_global-view.scss","_reader-view.scss","_configuration.scss","_logs.scss","_stats.scss","_mobile.scss","mapco.scss"],"names":[],"mappings":"AAAA;EACC;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;;AC5DD;AAEA;ACCA;AACA;EACC;EACA;EACA,YCac;EDZd,OCOW;EDNX;EACA;EACA;EACA;EACA;EACA;EACA;EDRA;;ACYA;EACC,YCpBW;EDqBX,OCXM;;ADaN;EAEC,YCxBc;;AD2Bf;EACC;;AAKF;EACC,YCRS;EDST;;AAEA;EAEC,YCXU;;ADeZ;EACC;;;AAIF;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA,OCnDW;;;ADsDZ;EACC;EACA;EACA;;;AAGD;EACC;EACA,YCnEO;EDoEP,OC/DW;EDgEX;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC,OC1FiB;ED2FjB,cCnGY;;;ADsGb;EACC,OC5EU;ED6EV,cC7EU;ED8EV;;;AAGD;EACC,YC1FY;;;AD6Fb;EACC;EACA;;AAEA;EACC;EACA;;AAGD;EACC;;AAGD;EACC;EACA;;AAGD;EACC;;AAGD;EACC;EACA;;AAGD;EACC;;;AE3IF;AACA;EACC;;;AAGD;EACC;;;AAGD;EACC,YDSc;;;ACNf;AAAA;EAEC;EACA;;;ACZD;AACA;AACA;AAGA;AACA;EACC;;AAGC;EACC;;;AAMH;AAEC;EACC,kBFPkB;;;AEWpB;EACC;EACA;EACA,YFZc;EEad;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;AAGD;AAAA;EAEC;EACA;EACA;EACA,OFlCU;EEmCV;EACA;;AAGD;EJ/CA;;AImDC;AAAA;AAAA;EAGC;EACA,OFtDe;EEuDf;EACA;;AAEA;AAAA;AAAA;EACC;;AAMD;AAAA;EACC,YF1ES;EE2ET,OFjEI;;AEmEJ;AAAA;EACC;;AAKH;EACC;;AAEA;EACC,kBFpES;;AEwET;EACC;;AAMF;EACC;EACA;;AAIF;EACC;EACA;EACA,kBFxFU;;AE2FX;EACC;EACA,kBF7FU;;AEkGX;EACC;EACA;EACA;;;AAOF;EACC;;AAEA;AAAA;EAEC,OF5He;;AE8Hf;AAAA;EACC,OF7HI;;AEiIN;EACC,YF5IU;;;AEoJb;AACA;EACC,YFlIc;EEmId,OFxIW;EEyIX;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;;;AAGD;EACC,YFrIe;EEsIf,OFrIc;EEsId;;;AAGD;EACC,YFvIe;EEwIf,OFvIc;EEwId;;;AAGD;EACC,YFxJa;EEyJb,OFxJY;EEyJZ;;;AAGD;AACA;EACC,YFxKY;EEyKZ,OFpLiB;;AEsLjB;EACC,OFvLgB;;;AE4LlB;AAAA;EAEC;;;AAGD;AACA;EACC,YFjMO;EEkMP;EACA;EAEA;;AAEA;EACC,YF/LW;EEgMX,OF3MgB;EE4MhB;;AAEA;EACC;;AAKC;EACC;;AAGD;EACC,kBFjOQ;;AEmOR;EACC;;AAQH;EACC;;AAGD;EACC;;AAEA;EACC;EACA;EACA;EACA;EACA;;AAEA;EACC;;AAOL;EACC;;AAEA;EACC;EACA,OF/Pe;EEgQf;EACA;EACA;;AAEA;EACC;;AAEA;EACC;;AAGD;EACC,kBFpRQ;;AEsRR;EACC;;AAMJ;EACC;;;AAKH;AACA;EACC;EACA;EACA,YFrSkB;EEsSlB,OFxSY;EFOZ;;AIqSA;EACC,YF7SW;EE8SX;;AAEA;EACC;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;;AC7TF;AACA;AACA;AAAA;EAEC;;;AAGD;EACC;;;AAGD;EACC;;;ACND;AACA;EACC;;AAEA;EACC;EACA;;AAID;EACC;;AAEA;EACC;EACA,YJ6BM;EI5BN;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;AAGC;EACC;EACA;;AAKH;EACC;;AAGD;EACC;EACA,OJGa;;AIDb;EACC;;AAMF;EACC,YJNK;EIOL;;AAIF;EACC,YJXU;;AIaV;EACC;EACA;EN1DH;;AM8DG;EACC,YJtEQ;;AIwER;EACC,OJjEY;;AImEZ;EACC,OJ5BU;;AIgCZ;EACC,OJ1BY;;AI8Bd;EACC,YJnCS;;AIsCV;EACC;EACA,OJ3CY;;AI8CX;EACC;;;AASP;AAGC;AAAA;AAAA;EACC;;AAGD;AAAA;EACC;;AAGD;AAAA;AAAA;AAAA;EACC;;AAGD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EASC;;;AAKF;EACC,YJrFQ;;AIuFR;EACC;EACA;EACA,YJ1FO;;AI4FP;EACC;;AAIF;EACC;;AAIA;EACC;EACA;;;AAOH;AAIA;AACA;EACC;;AAEA;AAAA;EAEC;EACA;;AAGD;EACC,YJ9HO;EI+HP,OJtKM;EIuKN;EACA;;AAEA;EACC;EACA;;AAGD;EACC;EACA,OJ3Ic;EFzChB;;AMyLC;EACC,YJ9IW;EI+IX;;AAGD;EACC,YJtMU;EIuMV,OJ7LK;;AI+LL;EACC,YJ1MS;EI2MT,OJjMI;EIkMJ;;AAKH;EACC;EACA;EACA,OJrMU;EIsMV;EACA;;AAGD;EACC;EACA;;;AAIF;AACA;EACC;;;AAGD;EACC;EACA,kBJ9KW;;;AIiLZ;EACC;EACA,kBJnLW;;;AIsLZ;EACC,YJhOW;;;AImOZ;EACC,YJpOW;;;AIuOZ;AAAA;EAEC,OJzOW;;;AI4OZ;AAAA;EAEC,OJ9OW;;;AIiPZ;AAAA;AAAA;AAAA;EAIC,OJ1PO;;;AI6PR;EACC;;;AAGD;AAAA;AAAA;EAGC;;;AAGD;EACC,mBJjOQ;;;AK9CT;AACA;AACA;AACA;EACC,YL0CQ;;AKxCR;EACC;;AAGC;EACC;;AAEA;EACC;;AAIA;EACC;;AAOH;EACC;EACA,OLiBa;EKhBb;EACA;EACA,kBLgBS;EF3CZ;;AO+BG;EACC,kBLYS;;AKTV;EACC,OL5BO;EK6BP,kBLlCG;;AKsCL;AAAA;EAEC,kBLlDS;;AKoDT;AAAA;EACC;;AAIF;EACC;EACA;EACA,kBLVS;EKWT;EACA;;AAEA;EACC,kBLhEY;;AKkEZ;EACC;;AAMJ;EACC;;AAEA;AAAA;EAEC;;AAGD;EACC;;AAGD;EACC;EACA;;;AAMJ;AACA;EACC;;;AAGD;AACA;EACC,YLlFY;EKmFZ;;;AAGD;AACA;EACC,YL3GY;EK4GZ;EACA;;;AAGD;EACC;EACA;EACA,OLzGO;;;AK4GR;EACC;EACA,YLvHgB;;;AK0HjB;AACA;EACC;EACA,OLrHkB;EKsHlB;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA,OL/HgB;EKgIhB;EACA;EACA;EACA;;;AAIF;EACC;EACA;EACA,kBL/HY;EKgIZ;EACA;EP7IA;;AOiJA;EACC,kBLvIkB;;AK0InB;EACC,kBL7JW;;AK+JX;EACC;;;AAKH;AACA;EACC;EACA;;AAEA;EACC;EACA;EACA,kBLzJa;EK0Jb;EACA;;AAEA;EACC,kBLhKiB;;AKsKlB;AAAA;EACC;EACA;EACA,kBLvKY;EKwKZ;EACA;EPtLF;;AO0LE;AAAA;EACC,kBLhLgB;;AKmLjB;AAAA;EACC,kBLtMS;;AK2MT;AAAA;EACC;;AAKD;AAAA;EACC;;AAKF;AAAA;EACC;EACA,OLjNc;EKkNd,kBLtMW;EFbd;;AOuNG;AAAA;EACC,kBL7Me;;AKmNjB;AAAA;EACC;EACA;;AAEA;AAAA;EACC;;AAMF;AAAA;EACC;;;AAMJ;AACA;EACC;EAEA;EACA;;AAGC;EACC,OLxPe;EKyPf;EACA;;AAEA;EACC,OLrQS;EKsQT;;AAKH;EACC,OLnQiB;EKoQjB;;AAGD;EACC;EACA;;AAGD;EACC;EACA,YLrQkB;EKsQlB;EACA;EACA;;AAGD;EACC,YLzRkB;EK0RlB,OLrRM;EKsRN;;AAEA;EACC;EACA,OL1RK;EK2RL;;AAIF;EACC,YL1QQ;EK2QR,OL5QU;EK6QV;EACA;;AAID;EACC;EACA;EACA,YLhSa;EKiSb;EACA,OL7SiB;EK8SjB;;AAEA;EACC;;;AAOH;AACA;EAEC;EACA,YLnTmB;EKoTnB;EACA;EACA,OLzTW;EK0TX;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;AAGD;EACC,YLpTW;EKqTX,OLjVM;;AKoVP;EACC,YLpUS;EKqUT,OLtVM;;AK0VN;EACC;;AAIF;EACC,YLlUa;;AKqUd;EACC,YLjVW;;AKqVX;EACC;;AAGD;EACC;;;AAMH;AACA;EACC,YL9UQ;;;AM5CT;AACA;EACC,YNGO;EFHP;;AQKC;EACC,YNOY;;AMLZ;EACC,YNIW;;AMCd;EACC,YNFa;EMGb,mBNvBW;;AM0BZ;EACC,YNJU;;AMMV;EACC,YNPS;;AMaT;EACC,ONrCS;;AM2CV;EACC,ON5CS;;AMgDX;EACC;;AAIF;EACC,mBNXO;EFpCR;;AQoDA;EACC,YNhBU;;AMkBV;EACC,YNnBS;;AMwBV;EACC,ON7De;EM8Df;;AAIF;AAAA;EAEC;EACA;;AAGD;EACC;EACA;;;AAIF;EACC;EACA;EACA;;AAEA;EACC;;;AC3FF;AACA;AAGE;EACC;;AAGD;EACC;EACA;;AAEA;EACC,OPCQ;EOAR;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA,YPNQ;EOOR;EACA;EACA;EACA;EACA;EACA;;AAGD;EACC,OPnCQ;;AO0CT;EACC,OPnCa;EOoCb;;AAEA;EACC,OP/CO;EOgDP;;;AAUN;EACC;;;AAGD;EACC;EACA;EACA;EACA;EACA;;;AClED;AACA;AAEC;EACC,YRcW;EQbX,OREgB;EQDhB;;AAEA;EACC;EACA;;AAEA;EACC,OREe;;;ASfnB;AACA;EACC;;AAEA;EACC,OTEgB;ESDhB;EACA;EACA;EACA;;AAGD;EACC;;AAGD;EACC;EACA;EACA;EACA;EACA,OTPU;ESQV;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC,YTjCU;ESkCV;EACA;EACA;;;AAQH;EACC;EACA;;;AAKC;EACC;EACA;EACA;EACA;;AAEA;EACC;EACA;;;AC1DJ;AACA;AACA;EACC;;;ACHD;AACA;AACA;EACC;;;AAGD;AAAA;AAAA;EAGC;;;AAGD;AAAA;EAEC;;;ACZD;AACA;AAEA;EACC;IdAA;;EcIC;IACC;;EAGD;IACC;;EAIF;AAAA;AAAA;AAAA;IAIC,kBZxBW;;EY0BX;AAAA;AAAA;AAAA;IACC,kBZ1Bc;;EY6Bf;AAAA;AAAA;AAAA;IACC;;EAMA;IACC;;EAGD;IACC;IACA;IACA;;EAMH;IACC;;EAGD;IACC;IACA;IACA;IACA;;EAGD;IACC;IACA;IACA;;EAGD;IACC;IACA;;EAIA;IACC;IACA;;EAGD;AAAA;IAEC;;EAEA;AAAA;IACC;IACA;;EAEA;AAAA;IACC;;EAMF;IACC;IACA;;EAEA;IACC;;EAQF;IACC;;EAMF;IACC,kBZ9FY;IY+FZ;IACA;IACA;IACA;;EAKC;IACC;;EAMJ;IACC;IACA;;EAEA;IACC;IACA;IACA;IACA;IACA;;EAKF;IACC;;EAGD;IACC;;EAEA;IACC;IACA;IACA;;EAGD;IACC;;EAGD;IACC;;;ACjIH;AACA;AACA;EACC,YbjBY;EakBZ,Ob7BiB;Ea8BjB;EACA;;;AAGD;AAAA;EAEC,YbKQ;;;AaFT;AACA;EACC;EACA,OblDY","file":"mapco.css"}
\ No newline at end of file
diff --git a/p/themes/Mapco/mapco.rtl.css b/p/themes/Mapco/mapco.rtl.css
index 39813f4bd..232502332 100644
--- a/p/themes/Mapco/mapco.rtl.css
+++ b/p/themes/Mapco/mapco.rtl.css
@@ -1,1356 +1,52 @@
-@font-face {
-	font-family: "lato";
-	font-style: normal;
-	font-stretch: normal;
-	font-weight: 400;
-	src: url("../fonts/LatoLatin-Regular.woff") format("woff");
-}
-@font-face {
-	font-family: "lato";
-	font-style: italic;
-	font-stretch: normal;
-	font-weight: 400;
-	src: url("../fonts/LatoLatin-Italic.woff") format("woff");
-}
-@font-face {
-	font-family: "lato";
-	font-style: normal;
-	font-stretch: normal;
-	font-weight: 700;
-	src: url("../fonts/LatoLatin-Bold.woff") format("woff");
-}
-@font-face {
-	font-family: "lato";
-	font-style: italic;
-	font-stretch: normal;
-	font-weight: 700;
-	src: url("../fonts/LatoLatin-BoldItalic.woff") format("woff");
-}
-@font-face {
-	font-family: "spectral";
-	font-style: normal;
-	font-stretch: normal;
-	font-weight: 400;
-	src: url("../fonts/Spectral-Regular.woff") format("woff");
-}
-@font-face {
-	font-family: "spectral";
-	font-style: italic;
-	font-stretch: normal;
-	font-weight: 400;
-	src: url("../fonts/Spectral-Italic.woff") format("woff");
-}
-@font-face {
-	font-family: "spectral";
-	font-style: normal;
-	font-stretch: normal;
-	font-weight: 700;
-	src: url("../fonts/Spectral-Bold.woff") format("woff");
-}
-@font-face {
-	font-family: "spectral";
-	font-style: italic;
-	font-stretch: normal;
-	font-weight: 700;
-	src: url("../fonts/Spectral-BoldItalic.woff") format("woff");
-}
-/* stylelint-disable property-no-vendor-prefix */
-/* FUNCTIONS */
-/* btns */
-.btn {
-	margin: 0;
-	padding: 0.5rem 1.5rem;
-	background: #f9fafb;
-	color: #5b6871;
-	font-size: 1rem;
-	border: none;
-	border-radius: 5px;
-	min-height: 25px;
-	min-width: 15px;
-	line-height: 25px;
-	vertical-align: middle;
-	transition: all 0.15s ease-in-out;
-}
-.btn.btn-important {
-	background: #36c;
-	color: #fff;
-}
-.btn.btn-important:hover, .btn.btn-important:active {
-	background: #25c;
-}
-.btn.btn-important img {
-	filter: brightness(3);
-}
-.btn.btn-attention {
-	background: #f5633e;
-	color: #fff;
-}
-.btn.btn-attention:hover, .btn.btn-attention:active {
-	background: #73341f;
-}
-.btn:hover {
-	text-decoration: none;
-}
-
-/*=== Forms */
-legend {
-	margin: 2rem 0 1rem 0;
-	padding: 0;
-	display: inline-block;
-	width: auto;
-	font-size: 1rem;
-	clear: both;
-	text-transform: uppercase;
-	letter-spacing: 1px;
-	font-weight: 700;
-}
-
-label {
-	min-height: 25px;
-	padding: 5px 0;
-	cursor: pointer;
-	color: #5b6871;
-}
-
-textarea {
-	max-width: 100%;
-}
-
-input, select, textarea, button {
-	padding: 5px 10px;
-	background: #fff;
-	color: #5b6871;
-	font-family: "lato", "Helvetica", "Arial", sans-serif;
-	font-size: 1rem;
-	border: 1px solid #eff0f2;
-	border-radius: 2px;
-	min-height: 25px;
-	line-height: 25px;
-	vertical-align: middle;
-}
-
-select {
-	padding-top: 9px;
-	padding-bottom: 9px;
-}
-
-option {
-	padding: 0 0.5em;
-}
-
-input:focus, select:focus, textarea:focus {
-	color: #303136;
-	border-color: #36c;
-}
-
-input:invalid, select:invalid {
-	color: #f5633e;
-	border-color: #f5633e;
-	box-shadow: none;
-}
-
-input:disabled, select:disabled {
-	background: #eff0f2;
-}
-
-.form-group {
-	padding: 5px;
-	border-radius: 3px;
-}
-.form-group::after {
-	display: block;
-	clear: both;
-}
-.form-group .group-name {
-	padding: 10px 0;
-}
-.form-group .group-controls {
-	min-height: 25px;
-	padding: 5px 0;
-}
-.form-group .group-controls .control {
-	line-height: 2em;
-}
-.form-group.form-actions {
-	margin: 15px 0 25px;
-	padding: 5px 0;
-}
-.form-group.form-actions .btn {
-	margin: 0 0 0 0.5rem;
-}
-
-/*=== Tables */
-table {
-	border-collapse: collapse;
-}
-
-th, td {
-	border: 1px solid #d5d8db;
-}
-
-th {
-	background: #f9fafb;
-}
-
-.config-articleicons td,
-.config-articleicons th {
-	font-weight: normal;
-	text-align: center;
-}
-
-/*=== COMPONENTS */
-/*===============*/
-/*=== Forms */
-/*=== Horizontal-list */
-.horizontal-list {
-	padding: 0.1rem 0;
-}
-.horizontal-list > .item:first-child {
-	padding-right: 0.5rem;
-}
-
-/*=== Dropdown */
-.dropdown .dropdown-target:target + .btn {
-	background-color: #d5d8db;
-}
-
-.dropdown-menu {
-	margin: 9px 0 0 0;
-	padding: 0.5rem 0 1rem 0;
-	background: #f9fafb;
-	font-size: 1rem;
-	border: none;
-	border-radius: 3px;
-	box-shadow: 0px 6px 8px 0px rgba(0, 0, 0, 0.35);
-	text-align: right;
-}
-.dropdown-menu::after {
-	border: none;
-	left: 18px;
-}
-.dropdown-menu .dropdown-header,
-.dropdown-menu .dropdown-section .dropdown-section-title {
-	padding: 1rem 1.5rem;
-	font-weight: bold;
-	text-align: right;
-	color: #5b6871;
-	text-transform: uppercase;
-	letter-spacing: 1px;
-}
-.dropdown-menu .item {
-	transition: all 0.075s ease-in-out;
-}
-.dropdown-menu .item > a,
-.dropdown-menu .item > span,
-.dropdown-menu .item > .as-link {
-	padding: 0 2rem;
-	color: #303136;
-	font-size: inherit;
-	line-height: 2.5em;
-}
-.dropdown-menu .item > a span.icon,
-.dropdown-menu .item > span span.icon,
-.dropdown-menu .item > .as-link span.icon {
-	padding: 0 0.25rem !important;
-}
-.dropdown-menu .item > a:not(.addItem):hover,
-.dropdown-menu .item > .as-link:not(.addItem):hover {
-	background: #36c;
-	color: #fff;
-}
-.dropdown-menu .item > a:not(.addItem):hover .icon,
-.dropdown-menu .item > .as-link:not(.addItem):hover .icon {
-	filter: brightness(3);
-}
-.dropdown-menu .item.dropdown-section {
-	margin-top: 0.75rem;
-}
-.dropdown-menu .item.dropdown-section ~ .dropdown-section {
-	border-top-color: #eff0f2;
-}
-.dropdown-menu .item.dropdown-section .item a, .dropdown-menu .item.dropdown-section .item .as-link {
-	padding-right: 2rem;
-}
-.dropdown-menu .item[aria-checked=true] a::before {
-	margin: 0 -14px 0 0;
-	font-weight: bold;
-}
-.dropdown-menu .item ~ .dropdown-header {
-	margin-top: 0.75rem;
-	padding-top: 1.75rem;
-	border-top-color: #eff0f2;
-}
-.dropdown-menu .item.separator {
-	margin-top: 0.75rem;
-	border-top-color: #eff0f2;
-}
-.dropdown-menu .input select, .dropdown-menu .input input {
-	margin: 0 auto 5px;
-	padding: 2px 5px;
-	border-radius: 3px;
-}
-
-.tree .tree-folder .tree-folder-items .dropdown-menu .item {
-	padding: 0;
-}
-.tree .tree-folder .tree-folder-items .dropdown-menu .item a,
-.tree .tree-folder .tree-folder-items .dropdown-menu .item button {
-	color: #303136;
-}
-.tree .tree-folder .tree-folder-items .dropdown-menu .item a:hover,
-.tree .tree-folder .tree-folder-items .dropdown-menu .item button:hover {
-	color: #fff;
-}
-.tree .tree-folder .tree-folder-items .dropdown-menu .item:hover {
-	background: #36c;
-}
+@charset "UTF-8";
 
-/*=== Alerts */
-.alert {
-	background: #f9fafb;
-	color: #5b6871;
-	font-size: 1rem;
-	border: 1px solid #c5ced3;
-	border-radius: 3px;
-	text-shadow: 0 0 1px #eff0f2;
-}
-
-.alert-head {
-	font-size: 1.15em;
-}
-
-.alert > a {
-	text-decoration: underline;
-	color: inherit;
-}
+@import "_fonts.rtl.css";
 
-.alert-warn {
-	background: #fdfde0;
-	color: #73762f;
-	border: 1px solid #73762f33;
-}
+@import "_variables.rtl.css";
 
-.alert-success {
-	background: #cffde7;
-	color: #0c7540;
-	border: 1px solid #0c754033;
-}
+@import "_forms.rtl.css";
 
-.alert-error {
-	background: #fde0d8;
-	color: #73341f;
-	border: 1px solid #73341f33;
-}
+@import "_tables.rtl.css";
 
-/*=== Pagination */
-.pagination {
-	background: #eff0f2;
-	color: #303136;
-}
-.pagination .item a {
-	color: #303136;
-}
+@import "_components.rtl.css";
 
-#load_more.loading,
-#load_more.loading:hover {
-	background: url("loader.gif") center center no-repeat #34495e;
-}
-
-/*=== Boxes */
-.box {
-	background: #fff;
-	border: none;
-	border-radius: 3px;
-	box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25);
-}
-.box .box-title {
-	background: #eff0f2;
-	color: #303136;
-	border-radius: 2px 2px 0 0;
-}
-.box .box-title .configure {
-	padding: 5px;
-}
-.box .box-title:hover .configure .icon {
-	vertical-align: middle;
-}
-.box .box-title:hover .configure:hover {
-	background-color: #36c;
-}
-.box .box-title:hover .configure:hover .icon {
-	filter: brightness(3);
-}
-.box .box-title form input {
-	width: 85%;
-}
-.box .box-title form .dropdown {
-	float: left;
-}
-.box .box-title form .dropdown a.dropdown-toggle {
-	padding: 0;
-	border-radius: 0;
-	background-image: url(icons/more.svg);
-	background-repeat: no-repeat;
-	background-position: left 8px;
-}
-.box .box-title form .dropdown a.dropdown-toggle img {
-	display: none;
-}
-.box .box-content {
-	padding-right: 30px;
-}
-.box .box-content .item {
-	padding: 0.25rem 0;
-	color: #303136;
-	font-size: 1rem;
-	border-bottom: 1px solid #eff0f2;
-	line-height: 1.7em;
-}
-.box .box-content .item .configure {
-	padding: 5px;
-}
-.box .box-content .item .configure .icon {
-	vertical-align: middle;
-}
-.box .box-content .item .configure:hover {
-	background-color: #36c;
-}
-.box .box-content .item .configure:hover .icon {
-	filter: brightness(3);
-}
-.box .box-content .item:last-child {
-	border-bottom: none;
-}
+@import "_divers.rtl.css";
 
-/*=== "Load more" part */
-#bigMarkAsRead.big {
-	text-align: center;
-	text-decoration: none;
-	background: #effcfd;
-	color: #36c;
-	transition: all 0.15s ease-in-out;
-}
-#bigMarkAsRead.big:hover {
-	background: #36c;
-	color: #fff;
-}
-#bigMarkAsRead.big:hover .bigTick {
-	filter: brightness(5);
-}
-#bigMarkAsRead.big .bigTick {
-	margin: 0.5rem 0;
-	background: url(icons/tick-color.svg) center no-repeat;
-	display: inline-block;
-	width: 64px;
-	height: 64px;
-	text-indent: -9999px;
-	white-space: nowrap;
-}
+@import "_sidebar.rtl.css";
 
-/*=== DIVERS */
-/*===========*/
-.aside.aside_feed .nav-form input,
-.aside.aside_feed .nav-form select {
-	width: 140px;
-}
+@import "_layout.rtl.css";
 
-.aside.aside_feed .nav-form .dropdown .dropdown-menu {
-	left: -20px;
-}
+@import "_list-view.rtl.css";
 
-.aside.aside_feed .nav-form .dropdown .dropdown-menu::after {
-	left: 33px;
-}
+@import "_global-view.rtl.css";
 
-/*=== Tree */
-.tree {
-	margin: 10px 0;
-}
-.tree#sidebar {
-	scrollbar-color: rgba(255, 255, 0, 0.1) rgba(0, 0, 0, 0.05);
-	scrollbar-color: #ffffff33 #ffffff22;
-}
-.tree .tree-folder {
-	border-bottom: 1px solid #3f3f3f;
-}
-.tree .tree-folder .tree-folder-title {
-	padding: 0.75rem 1rem;
-	background: #303136;
-	position: relative;
-	font-size: 0.85rem;
-	letter-spacing: 1px;
-	font-weight: 700;
-	text-transform: uppercase;
-}
-.tree .tree-folder .tree-folder-title button.dropdown-toggle {
-	margin: -0.75rem -1rem -0.75rem 0.25rem;
-	padding: 0.75rem 1rem 0.75rem 0;
-}
-.tree .tree-folder .tree-folder-title button.dropdown-toggle:hover .icon {
-	filter: brightness(2) !important;
-	transition: 0.1s linear;
-}
-.tree .tree-folder .tree-folder-title .icon {
-	margin-left: 0.5rem;
-}
-.tree .tree-folder .tree-folder-title .title {
-	background: inherit;
-	color: #ffffff;
-}
-.tree .tree-folder .tree-folder-title .title:hover {
-	text-decoration: none;
-}
-.tree .tree-folder.active .tree-folder-title {
-	background: #303136;
-	font-weight: bold;
-}
-.tree .tree-folder .tree-folder-items {
-	background: #26272a;
-}
-.tree .tree-folder .tree-folder-items .item {
-	font-size: 1rem;
-	font-weight: 400;
-	transition: all 0.15s ease-in-out;
-}
-.tree .tree-folder .tree-folder-items .item.active {
-	background: #36c;
-}
-.tree .tree-folder .tree-folder-items .item.active .dropdown li a {
-	color: #303136;
-}
-.tree .tree-folder .tree-folder-items .item.active .dropdown li a:hover {
-	color: #ffffff;
-}
-.tree .tree-folder .tree-folder-items .item.active a {
-	color: #ffffff;
-}
-.tree .tree-folder .tree-folder-items .item:hover {
-	background: #17181a;
-}
-.tree .tree-folder .tree-folder-items .item a {
-	text-decoration: none;
-	color: #ffffff;
-}
-.tree .tree-folder .tree-folder-items .item a.dropdown-toggle .icon {
-	margin-left: 0.25rem;
-}
+@import "_reader-view.rtl.css";
 
-/*=== Buttons */
-.stick input, .stick .btn,
-.group input,
-.group .btn {
-	border-radius: 0;
-}
-.stick .btn:first-child,
-.group .btn:first-child {
-	border-radius: 0 5px 5px 0;
-}
-.stick .btn:last-child, .stick input:last-child, .stick .dropdown:last-child > .btn,
-.group .btn:last-child,
-.group input:last-child,
-.group .dropdown:last-child > .btn {
-	border-radius: 5px 0 0 5px;
-}
-.stick .btn + .btn,
-.stick .btn + input,
-.stick .btn + .dropdown > .btn,
-.stick input + .btn,
-.stick input + input,
-.stick input + .dropdown > .btn,
-.stick .dropdown + .btn,
-.stick .dropdown + input,
-.stick .dropdown + .dropdown > .btn,
-.group .btn + .btn,
-.group .btn + input,
-.group .btn + .dropdown > .btn,
-.group input + .btn,
-.group input + input,
-.group input + .dropdown > .btn,
-.group .dropdown + .btn,
-.group .dropdown + input,
-.group .dropdown + .dropdown > .btn {
-	border-right: 1px solid #d5d8db;
-}
+@import "_configuration.rtl.css";
 
-.aside {
-	background: #303136;
-}
-.aside.aside_feed {
-	padding: 10px 0;
-	text-align: center;
-	background: #303136;
-}
-.aside.aside_feed .tree-folder-title:hover button.dropdown-toggle .icon {
-	filter: none;
-}
-.aside.aside_feed .tree {
-	margin: 10px 0 50px;
-}
-.aside a:hover .icon {
-	filter: brightness(2);
-	transition: 0.1s linear;
-}
+@import "_logs.rtl.css";
 
-/* Sidebar des pages de configuration */
-/*=== Navigation */
-.nav-list {
-	font-size: 1rem;
-}
-.nav-list .item.nav-header,
-.nav-list .item {
-	min-height: 2.5em;
-	line-height: 2.5em;
-}
-.nav-list .item {
-	background: #303136;
-	color: #fff;
-	min-height: 2.5em;
-	line-height: 2.5em;
-}
-.nav-list .item.nav-header {
-	min-height: 2.5em;
-	line-height: 2.5em;
-}
-.nav-list .item a, .nav-list .item .as-link {
-	padding: 0 1rem;
-	color: #ffffff;
-	transition: all 0.15s ease-in-out;
-}
-.nav-list .item a:hover, .nav-list .item .as-link:hover {
-	background: #17181a;
-	text-decoration: none;
-}
-.nav-list .item.active {
-	background: #36c;
-	color: #fff;
-}
-.nav-list .item.active a, .nav-list .item.active .as-link {
-	background: #36c;
-	color: #fff;
-	text-decoration: none;
-}
-.nav-list .nav-header {
-	padding: 0 1rem;
-	font-weight: bold;
-	color: #5b6871;
-	text-transform: uppercase;
-	letter-spacing: 1px;
-}
-.nav-list .nav-form {
-	padding: 3px;
-	text-align: center;
-}
+@import "_stats.rtl.css";
 
-/*=== Aside main page (categories) */
-.aside_feed .tree-folder-title > .title:not([data-unread="0"]) {
-	width: calc(100% - 35px - 35px);
-}
+@import "_mobile.rtl.css";
 
-.aside.aside_feed .category .title:not([data-unread="0"])::after {
-	margin: 0.75rem 0 0 0;
-	background-color: rgba(0, 0, 0, 0.25);
-}
-
-.aside.aside_feed .feed .item-title:not([data-unread="0"])::after {
-	margin: 0.5em 0 0 0;
-	background-color: rgba(0, 0, 0, 0.25);
-}
-
-.feed.item.empty.active {
-	background: #5b6871;
-}
-
-.feed.item.error.active {
-	background: #5b6871;
-}
-
-.feed.item.empty,
-.feed.item.empty > a {
-	color: #5b6871;
-}
-
-.feed.item.error,
-.feed.item.error > a {
-	color: #5b6871;
-}
-
-.feed.item.empty.active,
-.feed.item.error.active,
-.feed.item.empty.active > a,
-.feed.item.error.active > a {
-	color: #fff;
-}
-
-.aside_feed .tree-folder-items .dropdown-menu::after {
-	right: 2px;
-}
-
-.aside_feed .tree-folder-items .item .dropdown-target:target ~ .dropdown-toggle > .icon,
-.aside_feed .tree-folder-items .item:hover .dropdown-toggle > .icon,
-.aside_feed .tree-folder-items .item.active .dropdown-toggle > .icon {
-	border-radius: 3px;
-}
-
-.aside_feed .stick #btn-add {
-	border-right-color: #303136;
-}
-
-/*=== STRUCTURE */
-/*===============*/
-/*=== Header */
-.header {
-	background: #303136;
-}
-.header .item {
-	vertical-align: middle;
-}
-.header .item.title a {
-	padding: 0.5rem 1rem;
-}
-.header .item.title a .logo {
-	filter: grayscale(100%) brightness(3);
-}
-.header .item.title a:hover .logo {
-	filter: grayscale(100%) brightness(2.2);
-}
-.header .item.search input {
-	width: 350px;
-	color: #ffffff;
-	border: none;
-	border-radius: 0 2px 2px 0;
-	background-color: #26272a;
-	transition: all 0.15s ease-in-out;
-}
-.header .item.search input:hover {
-	background-color: #17181a;
-}
-.header .item.search input:focus {
-	color: #5b6871;
-	background-color: #fff;
-}
-.header .item.search input:focus ~ .btn,
-.header .item.search input:hover ~ .btn {
-	background-color: #36c;
-}
-.header .item.search input:focus ~ .btn .icon,
-.header .item.search input:hover ~ .btn .icon {
-	filter: brightness(3);
-}
-.header .item.search .btn {
-	width: 3rem;
-	border-radius: 2px 0 0 2px;
-	background-color: #26272a;
-	border-right-width: 0;
-	min-height: 35px;
-}
-.header .item.search .btn:hover {
-	background-color: #25c;
-}
-.header .item.search .btn:hover .icon {
-	filter: brightness(3);
-}
-.header .item.configure {
-	text-align: center;
-}
-.header .item.configure .btn .icon,
-.header .item.configure > .icon {
-	filter: brightness(3);
-}
-.header .item.configure .signin {
-	color: white;
-}
-.header .item.configure .btn {
-	padding: 0.25rem 1rem;
-	background-color: transparent;
-}
-
-/*=== Body */
-#global {
-	height: calc(100vh - (3rem + 2 * var(--frss-padding-top-bottom)));
-}
-
-/*=== Prompt (centered) */
-main.prompt {
-	background: #eff0f2;
-	border-radius: 5px;
-}
-
-/*=== New article notification */
-#new-article {
-	background: #36c;
-	font-size: 1rem;
-	text-align: center;
-}
-
-#new-article > a {
-	padding: calc(0.75rem + var(--frss-padding-top-bottom)) 1rem;
-	font-weight: bold;
-	color: #fff;
-}
-
-#new-article > a:hover {
-	text-decoration: none;
-	background: #25c;
-}
-
-/*=== Transition indication, e.g. day */
-.transition {
-	padding: 1rem 1.25rem 0 0;
-	color: #5b6871;
-	font-size: 0.875rem;
-	font-weight: 700;
-	line-height: 3em;
-	letter-spacing: 1px;
-	text-transform: uppercase;
-}
-.transition .name {
-	padding: 0 1rem 0 1rem;
-	color: #303136;
-	font-size: 0.875rem;
-	position: relative;
-	right: 0;
-	text-transform: uppercase;
-}
-
-.btn {
-	border-right-width: 0;
-	padding: 0.5rem 1rem;
-	background-color: #eff0f2;
-	background-position: center;
-	background-repeat: no-repeat;
-	transition: all 0.15s ease-in-out;
-}
-.btn:hover {
-	background-color: #d5d8db;
-}
-.btn.active {
-	background-color: #36c;
-}
-.btn.active .icon {
-	filter: brightness(3);
-}
-
-/*=== Index menu */
-.nav_menu {
-	text-align: center;
-	padding: 5px 0;
-}
-.nav_menu .btn {
-	border-right-width: 0;
-	padding: 0.5rem 1rem;
-	background-color: #f9fafb;
-	background-position: center;
-	background-repeat: no-repeat;
-}
-.nav_menu .btn:hover {
-	background-color: #d5d8db;
-}
-.nav_menu .stick .btn,
-.nav_menu .group .btn {
-	border-right-width: 0;
-	padding: 0.5rem 1rem;
-	background-color: #f9fafb;
-	background-position: center;
-	background-repeat: no-repeat;
-	transition: all 0.15s ease-in-out;
-}
-.nav_menu .stick .btn:hover,
-.nav_menu .group .btn:hover {
-	background-color: #d5d8db;
-}
-.nav_menu .stick .btn.active,
-.nav_menu .group .btn.active {
-	background-color: #36c;
-}
-.nav_menu .stick .btn#toggle-read.active .icon,
-.nav_menu .group .btn#toggle-read.active .icon {
-	filter: brightness(3.5);
-}
-.nav_menu .stick .btn#toggle-unread.active .icon,
-.nav_menu .group .btn#toggle-unread.active .icon {
-	filter: brightness(3.5) grayscale(1);
-}
-.nav_menu .stick .btn.read_all,
-.nav_menu .group .btn.read_all {
-	padding: 5px 16px;
-	color: #303136;
-	background-color: #f9fafb;
-	transition: all 0.15s ease-in-out;
-}
-.nav_menu .stick .btn.read_all:hover,
-.nav_menu .group .btn.read_all:hover {
-	background-color: #d5d8db;
-}
-.nav_menu .stick .dropdown:not(#dropdown-search-wrapper) a.dropdown-toggle,
-.nav_menu .group .dropdown:not(#dropdown-search-wrapper) a.dropdown-toggle {
-	border-right-width: 0;
-	background-image: url(icons/more.svg);
-}
-.nav_menu .stick .dropdown:not(#dropdown-search-wrapper) a.dropdown-toggle .icon,
-.nav_menu .group .dropdown:not(#dropdown-search-wrapper) a.dropdown-toggle .icon {
-	display: none;
-}
-.nav_menu .stick #dropdown-search-wrapper.dropdown a.dropdown-toggle,
-.nav_menu .group #dropdown-search-wrapper.dropdown a.dropdown-toggle {
-	border-right-width: 0;
-}
-
-/*=== Content of feed articles */
-.content, .content_thin {
-	padding: 20px 10px;
-	font-size: 1.125rem;
-	line-height: 1.8rem;
-}
-.content h1.title a, .content h1 a, .content_thin h1.title a, .content_thin h1 a {
-	color: #303136;
-	font-family: "spectral", serif;
-	font-size: 2rem;
-}
-.content h1.title a:hover, .content h1 a:hover, .content_thin h1.title a:hover, .content_thin h1 a:hover {
-	color: #36c;
-	text-decoration: none;
-}
-.content .author, .content_thin .author {
-	color: #5b6871;
-	font-size: 1.125rem;
-}
-.content p, .content ul, .content_thin p, .content_thin ul {
-	font-size: 1.125rem;
-	line-height: 1.8rem;
-}
-.content .content hr, .content_thin .content hr {
-	margin: 30px 10px;
-	background: #d5d8db;
-	height: 1px;
-	border: 0;
-	box-shadow: 0 2px 5px #ccc;
-}
-.content pre, .content_thin pre {
-	background: #1d1e22;
-	color: #fff;
-	border-radius: 3px;
-}
-.content pre code, .content_thin pre code {
-	background: transparent;
-	color: #fff;
-	border: none;
-}
-.content code, .content_thin code {
-	background: #fde3e3;
-	color: #e41212;
-	font-size: 1rem;
-	border-radius: 3px;
-}
-.content blockquote, .content_thin blockquote {
-	margin: 0;
-	padding: 0.5rem 1.5rem;
-	background: #f9fafb;
-	display: block;
-	color: #5b6871;
-	border-right: 4px solid #d5d8db;
-}
-.content blockquote p, .content_thin blockquote p {
-	margin: 0;
-}
-
-/*=== Notification and actualize notification */
-.notification {
-	padding: 1rem 0;
-	background: #d5d8db;
-	width: 100%;
-	height: 3rem;
-	color: #5b6871;
-	font-size: 1em;
-	border: none;
-	position: fixed;
-	top: auto;
-	bottom: 0;
-	right: 0;
-	left: 0;
-	text-align: center;
-	line-height: 3em;
-	vertical-align: middle;
-}
-.notification .msg {
-	display: inline-block;
-	font-size: 1rem;
-}
-.notification.good {
-	background: #10f587;
-	color: #fff;
-}
-.notification.bad {
-	background: #f5633e;
-	color: #fff;
-}
-.notification .close .icon {
-	filter: brightness(3);
-}
-.notification.good .close:hover {
-	background: #0c7540;
-}
-.notification.bad .close:hover {
-	background: #73341f;
-}
-.notification#actualizeProgress br {
-	display: none;
-}
-.notification#actualizeProgress .title {
-	margin: 0 2rem;
-}
-
-/*=== Navigation menu (for articles) */
-#nav_entries {
-	background: #303136;
-}
-
-/*=== Feed articles */
-.flux {
-	background: #fff;
-	transition: all 0.15s ease-in-out;
-}
-.flux .flux_header:hover {
-	background: #f9fafb;
-}
-.flux .flux_header:hover:not(.current):hover .item .title {
-	background: #f9fafb;
-}
-.flux.current {
-	background: #f9fafb;
-	border-right-color: #36c;
-}
-.flux.not_read:not(.current) {
-	background: #f2f6f8;
-}
-.flux.not_read:not(.current):hover .item .title {
-	background: #f2f6f8;
-}
-.flux.not_read .item .title a {
-	color: #36c;
-}
-.flux.not_read .item.website a {
-	color: #36c;
-}
-.flux.not_read .item .date {
-	color: rgba(51, 102, 204, 0.5);
-}
-.flux.favorite {
-	border-right-color: #ffc300;
-	transition: all 0.15s ease-in-out;
-}
-.flux.favorite:not(.current) {
-	background: #fff6da;
-}
-.flux.favorite:not(.current):hover .item .title {
-	background: #fff6da;
-}
-.flux .website a {
-	color: #303136;
-	opacity: 0.75;
-}
-.flux .flux_header .date,
-.flux .flux_content .bottom .date {
-	color: rgba(48, 49, 54, 0.5);
-	font-size: 0.85rem;
-}
-.flux .bottom {
-	font-size: 1rem;
-	text-align: center;
-}
-
-.flux_header {
-	font-size: 1rem;
-	cursor: pointer;
-	border-top: 1px solid #eff0f2;
-}
-.flux_header .title {
-	font-size: 1rem;
-}
-
-/*=== GLOBAL VIEW */
-/*================*/
-#stream .box.category:not([data-unread="0"]) .box-title .title {
-	font-weight: bold;
-}
-#stream .box.category .box-title {
-	padding: 1.5rem;
-	background: none;
-}
-#stream .box.category .box-title a.title {
-	color: #5b6871;
-	font-size: 1rem;
-	font-weight: normal;
-	text-decoration: none;
-	text-align: right;
-	text-transform: uppercase;
-	letter-spacing: 1px;
-}
-#stream .box.category .box-title a.title:not([data-unread="0"])::after {
-	margin: -0.5rem 0 0 1rem;
-	padding: 0 0.75rem;
-	background: #eff0f2;
-	border-radius: 12px;
-	position: absolute;
-	top: 1.75rem;
-	left: 0;
-	line-height: 1.5rem;
-	text-align: center;
-}
-#stream .box.category .box-title a.title:hover {
-	color: #36c;
-}
-#stream .box.category .box-content .item.feed a {
-	color: #303136;
-	font-weight: 400;
-}
-#stream .box.category .box-content .item.feed a:hover {
-	color: #36c;
-	text-decoration: none;
-}
-
-#overlay {
-	background: rgba(0, 0, 0, 0.65);
-}
-
-#panel {
-	top: 3rem;
-	left: 3rem;
-	bottom: 3rem;
-	right: 3rem;
-	border-radius: 3px;
-}
-
-/*=== READER VIEW */
-/*================*/
-#stream.reader .flux {
-	background: #eff0f2;
-	color: #303136;
-	border: none;
-}
-#stream.reader .flux .flux_content {
-	background-color: #fff;
-	border: none;
-}
-#stream.reader .flux .flux_content .author {
-	color: #a6a7ae;
-}
-
-/*=== Configuration pages */
-.post {
-	font-size: 1rem;
-}
-.post h1, .post h2 {
-	color: #303136;
-	font-size: 2rem;
-	margin-top: 1.75rem;
-	font-weight: 300;
-	line-height: 1.2em;
-}
-.post h2 {
-	font-size: 1.5rem;
-}
-.post a[href="./"] {
-	margin: 0;
-	padding: 0.75rem 1.5rem;
-	background: #f9fafb;
-	display: inline-block;
-	color: #5b6871;
-	font-size: 1rem;
-	border: 1px solid #d5d8db;
-	border-radius: 5px;
-	min-width: 15px;
-	line-height: 25px;
-	vertical-align: middle;
-	cursor: pointer;
-	overflow: hidden;
-}
-.post a[href="./"]:hover {
-	background: #36c;
-	color: white;
-	border: 1px solid #36c;
-	text-decoration: none;
-}
-
-#slider {
-	border-right: none;
-	box-shadow: 0px 6px 8px 0px rgba(0, 0, 0, 0.35);
-}
-
-.theme-preview-list .preview-container .properties {
-	padding: 1rem;
-	background: rgba(0, 0, 0, 0.75);
-	color: white;
-	border: 0;
-}
-.theme-preview-list .preview-container .properties .page-number {
-	left: 1rem;
-	top: 1rem;
-}
-
-/*=== LOGS */
-/*=========*/
-.log-item.log-error {
-	background-color: rgba(51, 102, 204, 0.2);
-}
-
-/*=== STATISTICS */
-/*===============*/
-.stat {
-	margin: 10px 0 20px;
-}
-
-.stat th,
-.stat td,
-.stat tr {
-	border: none;
-}
-
-.stat > table td,
-.stat > table th {
-	border-bottom: 1px solid #d5d8db;
-}
-
-/*=== MOBILE */
-/*===========*/
-@media (max-width: 840px) {
-	.aside {
-		transition: all 0.2s ease-in-out;
-	}
-	.aside.aside_feed {
-		padding: 0;
-	}
-	.aside .tree .tree-folder .tree-folder-items .item a {
-		padding: 0.5rem 1rem;
-	}
-	.aside .toggle_aside,
-	#overlay .close,
-	.dropdown-menu .toggle_aside,
-	#slider .toggle_aside {
-		background-color: #36c;
-	}
-	.aside .toggle_aside:hover,
-	#overlay .close:hover,
-	.dropdown-menu .toggle_aside:hover,
-	#slider .toggle_aside:hover {
-		background-color: #25c;
-	}
-	.aside .toggle_aside .icon,
-	#overlay .close .icon,
-	.dropdown-menu .toggle_aside .icon,
-	#slider .toggle_aside .icon {
-		filter: grayscale(100%) brightness(2.5);
-	}
-	.header .item.search {
-		display: none;
-	}
-	.header .item.configure {
-		position: absolute;
-		top: 0;
-		left: 0;
-	}
-	#global {
-		height: calc(100% - 8rem);
-	}
-	#panel {
-		top: 0;
-		left: 0;
-		bottom: 0;
-		right: 0;
-	}
-	main.prompt {
-		max-width: 100%;
-		min-width: auto;
-		width: 75%;
-	}
-	.post {
-		padding-right: 1rem;
-		padding-left: 1rem;
-	}
-	.nav_menu .btn {
-		margin: 0;
-		padding: 0.85rem 1.25rem;
-	}
-	.nav_menu .stick,
-	.nav_menu .group {
-		margin: 0.5rem 0.5rem;
-	}
-	.nav_menu .stick .btn,
-	.nav_menu .group .btn {
-		margin: 0;
-		padding: 0.85rem 1.25rem;
-	}
-	.nav_menu .stick .btn.read_all,
-	.nav_menu .group .btn.read_all {
-		padding: 0.85rem 1.25rem;
-	}
-	.nav_menu .search .input {
-		max-width: 97%;
-		width: 90px;
-	}
-	.nav_menu .search .input:focus {
-		width: 400px;
-	}
-	#nav_menu_read_all #nav_menu_read .dropdown-toggle.btn {
-		background-image: none;
-	}
-	#stream .flux .flux_header {
-		padding: 0.5rem 0;
-	}
-	.dropdown-target:target ~ .dropdown-toggle::after {
-		background-color: #f9fafb;
-		border-top: 1px solid #eff0f2;
-		border-right: 1px solid #eff0f2;
-		left: 21px;
-		bottom: -14px;
-	}
-	.dropdown-target:target ~ a.dropdown-toggle:not(.btn)::after {
-		bottom: -17px;
-	}
-	.transition {
-		text-align: center;
-		padding: 1rem 0;
-	}
-	.transition .name {
-		padding: 0;
-		display: block;
-		width: 100%;
-		line-height: 1.5rem;
-		margin-bottom: 1rem;
-	}
-	#nav_entries button {
-		height: 4.5rem;
-	}
-	.notification {
-		border-radius: 0;
-	}
-	.notification a.close {
-		background: transparent;
-		display: block;
-		right: 0;
-	}
-	.notification a.close:hover {
-		opacity: 0.5;
-	}
-	.notification a.close .icon {
-		display: none;
-	}
-}
 /*=== GENERAL */
 /*============*/
 html, body {
-	background: #eff0f2;
-	color: #303136;
+	background: var(--grey-light);
+	color: var(--main-font-color);
 	font-family: "lato", "Helvetica", "Arial", sans-serif;
 	font-size: 0.875rem;
 }
 
 body.formLogin,
 body.register {
-	background: #303136;
+	background: var(--sid-bg);
 }
 
 /*=== Links */
 a, button.as-link {
 	outline: none;
-	color: #36c;
+	color: var(--main-first);
 }
+
diff --git a/p/themes/Mapco/mapco.scss b/p/themes/Mapco/mapco.scss
deleted file mode 100644
index 8ee573474..000000000
--- a/p/themes/Mapco/mapco.scss
+++ /dev/null
@@ -1,54 +0,0 @@
-@use "fonts";
-
-@use "mixins";
-
-@use "variables";
-
-@use "forms";
-
-@use "tables";
-
-@use "components";
-
-@use "divers";
-
-@use "sidebar";
-
-@use "layout";
-
-@use "list-view";
-
-@use "global-view";
-
-@use "reader-view";
-
-@use "configuration";
-
-@use "logs";
-
-@use "stats";
-
-@use "mobile";
-
-@charset "UTF-8";
-
-/*=== GENERAL */
-/*============*/
-html, body {
-	background: variables.$grey-light;
-	color: variables.$main-font-color;
-	font-family: "lato", "Helvetica", "Arial", sans-serif;
-	font-size: 0.875rem;
-}
-
-body.formLogin,
-body.register {
-	background: variables.$sid-bg;
-}
-
-/*=== Links */
-a, button.as-link {
-	outline: none;
-	color: variables.$main-first;
-}
-
diff --git a/p/themes/Mapco/metadata.json b/p/themes/Mapco/metadata.json
index e22a7875b..680fd3dea 100644
--- a/p/themes/Mapco/metadata.json
+++ b/p/themes/Mapco/metadata.json
@@ -1,8 +1,8 @@
 {
-  "name": "Mapco",
-  "author": "Thomas Guesnon",
-  "description": "Thème pour FreshRSS",
-  "version": 0.1,
-  "files": ["_frss.css", "mapco.css"],
-  "theme-color": "#303136"
+	"name": "Mapco",
+	"author": "Thomas Guesnon",
+	"description": "Thème pour FreshRSS",
+	"version": 0.2,
+	"files": ["_frss.css", "mapco.css"],
+	"theme-color": "#303136"
 }
diff --git a/p/themes/Mapco/sass.sh b/p/themes/Mapco/sass.sh
deleted file mode 100644
index c0b3d47df..000000000
--- a/p/themes/Mapco/sass.sh
+++ /dev/null
@@ -1,2 +0,0 @@
-#!/bin/sh
-sass --watch mapco.scss:mapco.css
diff --git a/p/themes/Nord/metadata.json b/p/themes/Nord/metadata.json
index 0a038ede1..0294741b0 100644
--- a/p/themes/Nord/metadata.json
+++ b/p/themes/Nord/metadata.json
@@ -1,8 +1,8 @@
 {
-  "name": "Nord theme",
-  "author": "joelchrono12",
-  "description": "A simple theme based on Nord’s color scheme",
-  "version": 0.1,
-  "files": ["_frss.css","nord.css"],
-  "theme-color": "#2e3440"
+	"name": "Nord theme",
+	"author": "joelchrono12",
+	"description": "A simple theme based on Nord’s color scheme",
+	"version": 0.1,
+	"files": ["_frss.css","nord.css"],
+	"theme-color": "#2e3440"
 }
diff --git a/p/themes/Origine-compact/metadata.json b/p/themes/Origine-compact/metadata.json
index acc5caa1d..1afe4550c 100644
--- a/p/themes/Origine-compact/metadata.json
+++ b/p/themes/Origine-compact/metadata.json
@@ -1,8 +1,8 @@
 {
-  "name": "Origine-compact",
-  "author": "Kevin Papst",
-  "description": "A theme that tries to use the screen size more efficiently, based on Origine",
-  "version": 0.1,
-  "files": ["_frss.css", "../Origine/origine.css", "origine-compact.css"],
-  "theme-color": {"dark": "#1f1f1f", "light": "#f0f0f0"}
+	"name": "Origine-compact",
+	"author": "Kevin Papst",
+	"description": "A theme that tries to use the screen size more efficiently, based on Origine",
+	"version": 0.1,
+	"files": ["_frss.css", "../Origine/origine.css", "origine-compact.css"],
+	"theme-color": {"dark": "#1f1f1f", "light": "#f0f0f0"}
 }
diff --git a/p/themes/Origine/metadata.json b/p/themes/Origine/metadata.json
index 7b0bbd7af..999279b1c 100644
--- a/p/themes/Origine/metadata.json
+++ b/p/themes/Origine/metadata.json
@@ -1,8 +1,8 @@
 {
-  "name": "Origine",
-  "author": "Marien Fressinaud",
-  "description": "Le thème par défaut pour FreshRSS",
-  "version": 0.2,
-  "files": ["_frss.css", "origine.css"],
-  "theme-color": {"dark": "#1f1f1f", "light": "#f0f0f0"}
+	"name": "Origine",
+	"author": "Marien Fressinaud",
+	"description": "Le thème par défaut pour FreshRSS",
+	"version": 0.2,
+	"files": ["_frss.css", "origine.css"],
+	"theme-color": {"dark": "#1f1f1f", "light": "#f0f0f0"}
 }
diff --git a/p/themes/Pafat/metadata.json b/p/themes/Pafat/metadata.json
index 355d5bfc0..941d61d1f 100644
--- a/p/themes/Pafat/metadata.json
+++ b/p/themes/Pafat/metadata.json
@@ -1,8 +1,8 @@
 {
-  "name": "Pafat",
-  "author": "Plopoyop",
-  "description": "Un thème pour FreshRSS",
-  "version": 0.2,
-  "files": ["_frss.css", "pafat.css"],
-  "theme-color": "#f4f4f4"
+	"name": "Pafat",
+	"author": "Plopoyop",
+	"description": "Un thème pour FreshRSS",
+	"version": 0.2,
+	"files": ["_frss.css", "pafat.css"],
+	"theme-color": "#f4f4f4"
 }
diff --git a/p/themes/Swage/metadata.json b/p/themes/Swage/metadata.json
index f9aded562..cb482155c 100644
--- a/p/themes/Swage/metadata.json
+++ b/p/themes/Swage/metadata.json
@@ -1,8 +1,8 @@
 {
-  "name": "Swage",
-  "author": "Patrick Crandol",
-  "description": "A Fresh take on the interface, inspired by the Flat Theme.",
-  "version": 1.0,
-  "files": ["_frss.css", "swage.css"],
-  "theme-color": "#22303d"
+	"name": "Swage",
+	"author": "Patrick Crandol",
+	"description": "A Fresh take on the interface, inspired by the Flat Theme.",
+	"version": 1.0,
+	"files": ["_frss.css", "swage.css"],
+	"theme-color": "#22303d"
 }
diff --git a/p/themes/Swage/swage.css b/p/themes/Swage/swage.css
index 3e02bf336..4d03c5955 100644
--- a/p/themes/Swage/swage.css
+++ b/p/themes/Swage/swage.css
@@ -66,6 +66,7 @@
 }
 
 /* Compatibility: CSS Color Module Level 4, Relative Color */
+
 @supports not (color: color(from white hsl h s calc(l - 10%))) {
 	:root {
 		--color-text-light-darker: #988484;
@@ -911,15 +912,15 @@ main.post .drop-section li.item.feed a:hover .icon {
 }
 
 #new-article {
-	background-color: var(--color-background-nav);
+	width: var(--width-aside);
 	font-size: 1em;
+	background-color: var(--color-background-nav);
 	text-align: center;
 	position: fixed;
 	bottom: 48px;
 	z-index: 900;
 	left: 0;
 	line-height: 1.5;
-	width: var(--width-aside);
 
 	> a {
 		padding: 1rem;
@@ -987,11 +988,11 @@ main.post .drop-section li.item.feed a:hover .icon {
 	background-color: var(--color-background-light);
 
 	&::after {
-		display: block;
-		clear: both;
 		margin: 0 auto;
+		display: block;
 		width: 90%;
 		border-top: 1px solid var(--color-border-light-darker);
+		clear: both;
 	}
 
 	.flux_header:hover,
@@ -1046,11 +1047,12 @@ main.post .drop-section li.item.feed a:hover .icon {
 
 .notification {
 	padding: 10px 0;
-	background-color: var(--color-background-light-darker);
+	width: var(--width-aside);
 	height: auto;
 	color: var(--color-text-light-darker);
 	font-size: 1em;
 	border: none;
+	background-color: var(--color-background-light-darker);
 	text-align: center;
 	font-weight: bold;
 	vertical-align: middle;
@@ -1058,7 +1060,6 @@ main.post .drop-section li.item.feed a:hover .icon {
 	bottom: 48px;
 	left: 0;
 	top: auto;
-	width: var(--width-aside);
 
 	&.good,
 	&.bad {
diff --git a/p/themes/Swage/swage.rtl.css b/p/themes/Swage/swage.rtl.css
index 0020335f5..f6b55232a 100644
--- a/p/themes/Swage/swage.rtl.css
+++ b/p/themes/Swage/swage.rtl.css
@@ -66,6 +66,7 @@
 }
 
 /* Compatibility: CSS Color Module Level 4, Relative Color */
+
 @supports not (color: color(from white hsl h s calc(l - 10%))) {
 	:root {
 		--color-text-light-darker: #988484;
@@ -911,15 +912,15 @@ main.post .drop-section li.item.feed a:hover .icon {
 }
 
 #new-article {
-	background-color: var(--color-background-nav);
+	width: var(--width-aside);
 	font-size: 1em;
+	background-color: var(--color-background-nav);
 	text-align: center;
 	position: fixed;
 	bottom: 48px;
 	z-index: 900;
 	right: 0;
 	line-height: 1.5;
-	width: var(--width-aside);
 
 	> a {
 		padding: 1rem;
@@ -987,11 +988,11 @@ main.post .drop-section li.item.feed a:hover .icon {
 	background-color: var(--color-background-light);
 
 	&::after {
-		display: block;
-		clear: both;
 		margin: 0 auto;
+		display: block;
 		width: 90%;
 		border-top: 1px solid var(--color-border-light-darker);
+		clear: both;
 	}
 
 	.flux_header:hover,
@@ -1046,11 +1047,12 @@ main.post .drop-section li.item.feed a:hover .icon {
 
 .notification {
 	padding: 10px 0;
-	background-color: var(--color-background-light-darker);
+	width: var(--width-aside);
 	height: auto;
 	color: var(--color-text-light-darker);
 	font-size: 1em;
 	border: none;
+	background-color: var(--color-background-light-darker);
 	text-align: center;
 	font-weight: bold;
 	vertical-align: middle;
@@ -1058,7 +1060,6 @@ main.post .drop-section li.item.feed a:hover .icon {
 	bottom: 48px;
 	right: 0;
 	top: auto;
-	width: var(--width-aside);
 
 	&.good,
 	&.bad {
diff --git a/p/themes/manifest.json b/p/themes/manifest.json
index 50ce057cc..f9ab144e7 100644
--- a/p/themes/manifest.json
+++ b/p/themes/manifest.json
@@ -1,30 +1,30 @@
 {
-  "name": "FreshRSS feed aggregator",
-  "short_name": "FreshRSS",
-  "start_url": "../i/",
-  "scope": "../",
-  "icons": [
-    {
-      "src": "icons/favicon.svg",
-      "type": "image/svg+xml",
-      "sizes": "150x150",
-      "purpose": "any"
-    },
-    {
-      "src": "icons/favicon-96-padding.png",
-      "type": "image/png",
-      "sizes": "96x96",
-      "purpose": "maskable"
-    },
-    {
-      "src": "icons/favicon-512-padding.png",
-      "type": "image/png",
-      "sizes": "512x512",
-      "purpose": "maskable"
-    }
-  ],
-  "categories": ["news"],
-  "display": "standalone",
-  "background_color": "#002342",
-  "description": "FreshRSS is a self-hosted RSS feed aggregator."
+	"name": "FreshRSS feed aggregator",
+	"short_name": "FreshRSS",
+	"start_url": "../i/",
+	"scope": "../",
+	"icons": [
+		{
+			"src": "icons/favicon.svg",
+			"type": "image/svg+xml",
+			"sizes": "150x150",
+			"purpose": "any"
+		},
+		{
+			"src": "icons/favicon-96-padding.png",
+			"type": "image/png",
+			"sizes": "96x96",
+			"purpose": "maskable"
+		},
+		{
+			"src": "icons/favicon-512-padding.png",
+			"type": "image/png",
+			"sizes": "512x512",
+			"purpose": "maskable"
+		}
+	],
+	"categories": ["news"],
+	"display": "standalone",
+	"background_color": "#002342",
+	"description": "FreshRSS is a self-hosted RSS feed aggregator."
 }