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

1 files changed, 314 insertions, 0 deletions

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;
+	}
+}