Mark as read button: config for the size (#7314)

* settings

* i18n: mark_read_button

* big, small, none

* fix

* Fixes

* make fix-all

---------

Co-authored-by: Alexandre Alapetite <alexandre@alapetite.fr>

app/Controllers/configureController.php

@@ -131,6 +131,8 @@ class FreshRSS_configure_Controller extends FreshRSS_ActionController {
 			FreshRSS_Context::userConf()->lazyload = Minz_Request::paramBoolean('lazyload');
 			FreshRSS_Context::userConf()->sides_close_article = Minz_Request::paramBoolean('sides_close_article');
 			FreshRSS_Context::userConf()->sticky_post = Minz_Request::paramBoolean('sticky_post');
+			$markReadButton = Minz_Request::paramStringNull('mark_read_button', plaintext: true);
+			FreshRSS_Context::userConf()->mark_read_button = in_array($markReadButton, ['big', 'small', 'none'], true) ? $markReadButton : 'big';
 			FreshRSS_Context::userConf()->reading_confirm = Minz_Request::paramBoolean('reading_confirm');
 			FreshRSS_Context::userConf()->auto_remove_article = Minz_Request::paramBoolean('auto_remove_article');
 			FreshRSS_Context::userConf()->mark_updated_article_unread = Minz_Request::paramBoolean('mark_updated_article_unread');

app/Models/UserConfiguration.php

@@ -50,6 +50,7 @@ declare(strict_types=1);
  * @property bool $icons_as_emojis
  * @property int $simplify_over_n_feeds
  * @property bool $show_nav_buttons
+ * @property 'big'|'small'|'none' $mark_read_button
  * @property 'ASC'|'DESC' $sort_order
  * @property 'id'|'date'|'link'|'title'|'rand' $sort
  * @property array<int,array<string,string>> $sharing

app/i18n/cs/conf.php

@@ -99,6 +99,12 @@ return array(
 			'previous' => 'Předchozí',
 		),
 	),
+	'mark_read_button' => array(
+		'_' => '„označit vše jako přečtené“ button',	// DIRTY
+		'big' => 'Big',	// TODO
+		'none' => 'None',	// TODO
+		'small' => 'Small',	// TODO
+	),
 	'privacy' => array(
 		'_' => 'Privacy',	// TODO
 		'retrieve_extension_list' => 'Retrieve extension list',	// TODO

app/i18n/de/conf.php

@@ -99,6 +99,12 @@ return array(
 			'previous' => 'Vorherige',
 		),
 	),
+	'mark_read_button' => array(
+		'_' => '„Alle als gelesen markieren“ Button',
+		'big' => 'Big',	// TODO
+		'none' => 'None',	// TODO
+		'small' => 'Small',	// TODO
+	),
 	'privacy' => array(
 		'_' => 'Privatsphäre',
 		'retrieve_extension_list' => 'Erweiterungsliste abrufen',

app/i18n/el/conf.php

@@ -99,6 +99,12 @@ return array(
 			'previous' => 'Previous',	// TODO
 		),
 	),
+	'mark_read_button' => array(
+		'_' => '“Mark all as read” button',	// TODO
+		'big' => 'Big',	// TODO
+		'none' => 'None',	// TODO
+		'small' => 'Small',	// TODO
+	),
 	'privacy' => array(
 		'_' => 'Privacy',	// TODO
 		'retrieve_extension_list' => 'Retrieve extension list',	// TODO

app/i18n/en-us/conf.php

@@ -99,6 +99,12 @@ return array(
 			'previous' => 'Previous',	// IGNORE
 		),
 	),
+	'mark_read_button' => array(
+		'_' => '“Mark all as read” button',	// IGNORE
+		'big' => 'Big',	// IGNORE
+		'none' => 'None',	// IGNORE
+		'small' => 'Small',	// IGNORE
+	),
 	'privacy' => array(
 		'_' => 'Privacy',	// IGNORE
 		'retrieve_extension_list' => 'Retrieve extension list',	// IGNORE

app/i18n/en/conf.php

@@ -99,6 +99,12 @@ return array(
 			'previous' => 'Previous',
 		),
 	),
+	'mark_read_button' => array(
+		'_' => '“Mark all as read” button',
+		'big' => 'Big',
+		'none' => 'None',
+		'small' => 'Small',
+	),
 	'privacy' => array(
 		'_' => 'Privacy',
 		'retrieve_extension_list' => 'Retrieve extension list',

app/i18n/es/conf.php

@@ -99,6 +99,12 @@ return array(
 			'previous' => 'Anterior',
 		),
 	),
+	'mark_read_button' => array(
+		'_' => '“marcar todos como leídos” button',	// DIRTY
+		'big' => 'Big',	// TODO
+		'none' => 'None',	// TODO
+		'small' => 'Small',	// TODO
+	),
 	'privacy' => array(
 		'_' => 'Privacy',	// TODO
 		'retrieve_extension_list' => 'Retrieve extension list',	// TODO

app/i18n/fa/conf.php

@@ -99,6 +99,12 @@ return array(
 			'previous' => ' قبلی',
 		),
 	),
+	'mark_read_button' => array(
+		'_' => '"علامت گذاری همه به عنوان خوانده شده" button',	// DIRTY
+		'big' => 'Big',	// TODO
+		'none' => 'None',	// TODO
+		'small' => 'Small',	// TODO
+	),
 	'privacy' => array(
 		'_' => 'Privacy',	// TODO
 		'retrieve_extension_list' => 'Retrieve extension list',	// TODO

app/i18n/fi/conf.php

@@ -99,6 +99,12 @@ return array(
 			'previous' => 'Edellinen',
 		),
 	),
+	'mark_read_button' => array(
+		'_' => '“merkitse kaikki luetuiksi” button',	// DIRTY
+		'big' => 'Big',	// TODO
+		'none' => 'None',	// TODO
+		'small' => 'Small',	// TODO
+	),
 	'privacy' => array(
 		'_' => 'Tietosuoja',
 		'retrieve_extension_list' => 'Nouda laajennusluettelo',

app/i18n/fr/conf.php

@@ -99,6 +99,12 @@ return array(
 			'previous' => 'Précédent',
 		),
 	),
+	'mark_read_button' => array(
+		'_' => 'Bouton « Marquer tout comme lu »',
+		'big' => 'Gros',
+		'none' => 'Aucun',
+		'small' => 'Petit',
+	),
 	'privacy' => array(
 		'_' => 'Vie privée',
 		'retrieve_extension_list' => 'Récupération de la liste des extensions',

app/i18n/he/conf.php

@@ -99,6 +99,12 @@ return array(
 			'previous' => 'הקודם',
 		),
 	),
+	'mark_read_button' => array(
+		'_' => '“סימון הכל כנקרא” button',	// DIRTY
+		'big' => 'Big',	// TODO
+		'none' => 'None',	// TODO
+		'small' => 'Small',	// TODO
+	),
 	'privacy' => array(
 		'_' => 'Privacy',	// TODO
 		'retrieve_extension_list' => 'Retrieve extension list',	// TODO

app/i18n/hu/conf.php

@@ -99,6 +99,12 @@ return array(
 			'previous' => 'Előző',
 		),
 	),
+	'mark_read_button' => array(
+		'_' => '“Mark all as read” button',	// TODO
+		'big' => 'Big',	// TODO
+		'none' => 'None',	// TODO
+		'small' => 'Small',	// TODO
+	),
 	'privacy' => array(
 		'_' => 'Adatvédelem',
 		'retrieve_extension_list' => 'Kiterjesztés lista beszerzése',

app/i18n/id/conf.php

@@ -99,6 +99,12 @@ return array(
 			'previous' => 'Sebelumnya',
 		),
 	),
+	'mark_read_button' => array(
+		'_' => '“tandai semua sebagai telah dibaca” button',	// DIRTY
+		'big' => 'Big',	// TODO
+		'none' => 'None',	// TODO
+		'small' => 'Small',	// TODO
+	),
 	'privacy' => array(
 		'_' => 'Privacy',	// TODO
 		'retrieve_extension_list' => 'Retrieve extension list',	// TODO

app/i18n/it/conf.php

@@ -99,6 +99,12 @@ return array(
 			'previous' => 'Precedente',
 		),
 	),
+	'mark_read_button' => array(
+		'_' => '“segna tutto come letto” button',	// DIRTY
+		'big' => 'Big',	// TODO
+		'none' => 'None',	// TODO
+		'small' => 'Small',	// TODO
+	),
 	'privacy' => array(
 		'_' => 'Privacy',	// IGNORE
 		'retrieve_extension_list' => 'Recupero dell’elenco delle estensioni',

app/i18n/ja/conf.php

@@ -99,6 +99,12 @@ return array(
 			'previous' => '前へ',
 		),
 	),
+	'mark_read_button' => array(
+		'_' => '“すべてに既読を付ける” button',	// DIRTY
+		'big' => 'Big',	// TODO
+		'none' => 'None',	// TODO
+		'small' => 'Small',	// TODO
+	),
 	'privacy' => array(
 		'_' => 'プライバシー',
 		'retrieve_extension_list' => '拡張機能リストを取得する',

app/i18n/ko/conf.php

@@ -99,6 +99,12 @@ return array(
 			'previous' => '이전',
 		),
 	),
+	'mark_read_button' => array(
+		'_' => '“모두 읽음으로 표시” button',	// DIRTY
+		'big' => 'Big',	// TODO
+		'none' => 'None',	// TODO
+		'small' => 'Small',	// TODO
+	),
 	'privacy' => array(
 		'_' => 'Privacy',	// TODO
 		'retrieve_extension_list' => 'Retrieve extension list',	// TODO

app/i18n/lv/conf.php

@@ -99,6 +99,12 @@ return array(
 			'previous' => 'Iepriekšējais',
 		),
 	),
+	'mark_read_button' => array(
+		'_' => '"atzīmēt visus kā izlasītus" button',	// DIRTY
+		'big' => 'Big',	// TODO
+		'none' => 'None',	// TODO
+		'small' => 'Small',	// TODO
+	),
 	'privacy' => array(
 		'_' => 'Privacy',	// TODO
 		'retrieve_extension_list' => 'Retrieve extension list',	// TODO

app/i18n/nl/conf.php

@@ -99,6 +99,12 @@ return array(
 			'previous' => 'Vorige',
 		),
 	),
+	'mark_read_button' => array(
+		'_' => '„markeer alles als gelezen” button',	// DIRTY
+		'big' => 'Big',	// TODO
+		'none' => 'None',	// TODO
+		'small' => 'Small',	// TODO
+	),
 	'privacy' => array(
 		'_' => 'Privacy',	// TODO
 		'retrieve_extension_list' => 'Retrieve extension list',	// TODO

app/i18n/oc/conf.php

@@ -99,6 +99,12 @@ return array(
 			'previous' => 'Precedent',
 		),
 	),
+	'mark_read_button' => array(
+		'_' => '« o marcar tot coma legit » button',	// DIRTY
+		'big' => 'Big',	// TODO
+		'none' => 'None',	// TODO
+		'small' => 'Small',	// TODO
+	),
 	'privacy' => array(
 		'_' => 'Privacy',	// TODO
 		'retrieve_extension_list' => 'Retrieve extension list',	// TODO

app/i18n/pl/conf.php

@@ -99,6 +99,12 @@ return array(
 			'previous' => 'Poprzednie',
 		),
 	),
+	'mark_read_button' => array(
+		'_' => '“Mark all as read” button',	// TODO
+		'big' => 'Big',	// TODO
+		'none' => 'None',	// TODO
+		'small' => 'Small',	// TODO
+	),
 	'privacy' => array(
 		'_' => 'Privacy',	// TODO
 		'retrieve_extension_list' => 'Retrieve extension list',	// TODO

app/i18n/pt-br/conf.php

@@ -99,6 +99,12 @@ return array(
 			'previous' => 'Anterior',
 		),
 	),
+	'mark_read_button' => array(
+		'_' => '“marcar todos como lido” button',	// DIRTY
+		'big' => 'Big',	// TODO
+		'none' => 'None',	// TODO
+		'small' => 'Small',	// TODO
+	),
 	'privacy' => array(
 		'_' => 'Privacy',	// TODO
 		'retrieve_extension_list' => 'Retrieve extension list',	// TODO

app/i18n/pt-pt/conf.php

@@ -99,6 +99,12 @@ return array(
 			'previous' => 'Anterior',
 		),
 	),
+	'mark_read_button' => array(
+		'_' => '“Mark all as read” button',	// TODO
+		'big' => 'Big',	// TODO
+		'none' => 'None',	// TODO
+		'small' => 'Small',	// TODO
+	),
 	'privacy' => array(
 		'_' => 'Privacy',	// TODO
 		'retrieve_extension_list' => 'Retrieve extension list',	// TODO

app/i18n/ru/conf.php

@@ -99,6 +99,12 @@ return array(
 			'previous' => 'Предыдущая',
 		),
 	),
+	'mark_read_button' => array(
+		'_' => '«отметить всё прочитанным» button',	// DIRTY
+		'big' => 'Big',	// TODO
+		'none' => 'None',	// TODO
+		'small' => 'Small',	// TODO
+	),
 	'privacy' => array(
 		'_' => 'Privacy',	// TODO
 		'retrieve_extension_list' => 'Retrieve extension list',	// TODO

app/i18n/sk/conf.php

@@ -99,6 +99,12 @@ return array(
 			'previous' => 'Predošlý',
 		),
 	),
+	'mark_read_button' => array(
+		'_' => '“Označiť všetko ako prečítané” button',	// DIRTY
+		'big' => 'Big',	// TODO
+		'none' => 'None',	// TODO
+		'small' => 'Small',	// TODO
+	),
 	'privacy' => array(
 		'_' => 'Privacy',	// TODO
 		'retrieve_extension_list' => 'Retrieve extension list',	// TODO

app/i18n/tr/conf.php

@@ -99,6 +99,12 @@ return array(
 			'previous' => 'Önceki',
 		),
 	),
+	'mark_read_button' => array(
+		'_' => '“Hepsini okundu say” button',	// DIRTY
+		'big' => 'Big',	// TODO
+		'none' => 'None',	// TODO
+		'small' => 'Small',	// TODO
+	),
 	'privacy' => array(
 		'_' => 'Gizlilik',
 		'retrieve_extension_list' => 'Uzantı listesini al',

app/i18n/zh-cn/conf.php

@@ -99,6 +99,12 @@ return array(
 			'previous' => '上一页',
 		),
 	),
+	'mark_read_button' => array(
+		'_' => '“全部标记为已读” button',	// DIRTY
+		'big' => 'Big',	// TODO
+		'none' => 'None',	// TODO
+		'small' => 'Small',	// TODO
+	),
 	'privacy' => array(
 		'_' => 'Privacy',	// TODO
 		'retrieve_extension_list' => 'Retrieve extension list',	// TODO

app/i18n/zh-tw/conf.php

@@ -99,6 +99,12 @@ return array(
 			'previous' => '上一頁',
 		),
 	),
+	'mark_read_button' => array(
+		'_' => '“Mark all as read” button',	// TODO
+		'big' => 'Big',	// TODO
+		'none' => 'None',	// TODO
+		'small' => 'Small',	// TODO
+	),
 	'privacy' => array(
 		'_' => 'Privacy',	// TODO
 		'retrieve_extension_list' => 'Retrieve extension list',	// TODO

app/views/configure/reading.phtml

@@ -55,6 +55,17 @@
 				</div>
 			</div>
 
+			<div class="form-group">
+				<label class="group-name" for="mark_read_button"><?= _t('conf.mark_read_button') ?></label>
+				<div class="group-controls">
+					<select name="mark_read_button" id="mark_read_button" data-leave-validation="<?= FreshRSS_Context::userConf()->mark_read_button ?>">
+						<option value="big"<?= FreshRSS_Context::userConf()->mark_read_button === 'big' ? ' selected="selected"' : '' ?>><?= _t('conf.mark_read_button.big') ?></option>
+						<option value="small"<?= FreshRSS_Context::userConf()->mark_read_button === 'small' ? ' selected="selected"' : '' ?>><?= _t('conf.mark_read_button.small') ?></option>
+						<option value="none"<?= FreshRSS_Context::userConf()->mark_read_button === 'none' ? ' selected="selected"' : '' ?>><?= _t('conf.mark_read_button.none') ?></option>
+					</select>
+				</div>
+			</div>
+
 			<div class="form-group">
 				<label class="group-name" for="sort_order"><?= _t('conf.reading.sort') ?></label>
 				<div class="group-controls">

app/views/helpers/stream-footer.phtml

@@ -35,19 +35,32 @@
 	<?php if (FreshRSS_Context::$continuation_id !== '0') { ?>
 		<button id="load_more" type="submit" class="btn" formaction="<?= Minz_Url::display($url_next) ?>"><?= _t('gen.stream.load_more') ?></button>
 	<?php } elseif ($hasAccess) { ?>
-		<?= _t('gen.stream.nothing_to_load') ?><br />
-		<button id="bigMarkAsRead"
-			class="as-link <?= FreshRSS_Context::userConf()->reading_confirm ? 'confirm" disabled="disabled' : '' ?>"
-			form="stream-footer"
-			formaction="<?= Minz_Url::display($url_mark_read) ?>"
-			type="submit">
-			<span class="bigTick">✓</span><br />
-			<span class="markAllRead"><?= _t('gen.stream.mark_all_read') ?></span><br />
-			<?php if (FreshRSS_Context::userConf()->onread_jump_next) { ?>
-				<span class="jumpNext"><?= _t('conf.reading.jump_next') ?></span>
-			<?php } ?>
-		</button>
-	<?php } else { ?>
+		<?= _t('gen.stream.nothing_to_load') ?>
+		<?php if (FreshRSS_Context::userConf()->mark_read_button !== 'none') {
+			$css = '';
+			switch (FreshRSS_Context::userConf()->mark_read_button) {
+				case 'big':
+					$css = 'as-link big';
+					break;
+				case 'small':
+					$css = 'btn small';
+					break;
+			}
+			?>
+			<br />
+			<button id="bigMarkAsRead"
+				class="<?= $css ?> <?= FreshRSS_Context::userConf()->reading_confirm ? 'confirm" disabled="disabled' : '' ?>"
+				form="stream-footer"
+				formaction="<?= Minz_Url::display($url_mark_read) ?>"
+				type="submit">
+				<span class="bigTick">✓</span><br />
+				<span class="markAllRead"><?= _t('gen.stream.mark_all_read') ?></span><br />
+				<?php if (FreshRSS_Context::userConf()->onread_jump_next) { ?>
+					<span class="jumpNext"><?= _t('conf.reading.jump_next') ?></span>
+				<?php } ?>
+			</button>
+		<?php
+		} } else { ?>
 		<?= _t('gen.stream.nothing_to_load') ?><br />
 	<?php } ?>
 	</div>

config-user.default.php

@@ -54,6 +54,7 @@ return array (
 	'mark_updated_article_unread' => false, //TODO: -1 => ignore, 0 => update, 1 => update and mark as unread
 
 	'sort' => 'id',
+	'mark_read_button' => 'big',
 	'sort_order' => 'DESC',
 	'anon_access' => false,
 	'mark_when' => array (

p/themes/Alternative-Dark/adark.css

@@ -924,7 +924,7 @@ kbd {
 }
 
 /*=== "Load more" part */
-#bigMarkAsRead {
+#bigMarkAsRead.big {
 	background: var(--background-color-dark);
 	color: var(--font-color-contrast);
 	text-align: center;

p/themes/Alternative-Dark/adark.rtl.css

@@ -924,7 +924,7 @@ kbd {
 }
 
 /*=== "Load more" part */
-#bigMarkAsRead {
+#bigMarkAsRead.big {
 	background: var(--background-color-dark);
 	color: var(--font-color-contrast);
 	text-align: center;

p/themes/Ansum/_components.css

@@ -0,0 +1,234 @@
+/* stylelint-disable property-no-vendor-prefix */
+/* FUNCTIONS */
+/*=== 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;
+}

p/themes/Ansum/_components.rtl.css

@@ -0,0 +1,234 @@
+/* stylelint-disable property-no-vendor-prefix */
+/* FUNCTIONS */
+/*=== 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;
+}

p/themes/Ansum/_components.scss

@@ -263,7 +263,7 @@
 }
 
 /*=== "Load more" part */
-#bigMarkAsRead {
+#bigMarkAsRead.big {
 	text-align: center;
 	text-decoration: none;
 	background: variables.$main-first-light;

p/themes/Ansum/ansum.css

@@ -410,7 +410,7 @@ th {
 }
 
 /*=== "Load more" part */
-#bigMarkAsRead {
+#bigMarkAsRead.big {
 	text-align: center;
 	text-decoration: none;
 	background: #fdf6ef;

p/themes/Ansum/ansum.rtl.css

@@ -410,7 +410,7 @@ th {
 }
 
 /*=== "Load more" part */
-#bigMarkAsRead {
+#bigMarkAsRead.big {
 	text-align: center;
 	text-decoration: none;
 	background: #fdf6ef;

p/themes/Dark-pink/pinkdark.css

@@ -72,7 +72,7 @@
 	box-shadow: 0 2px 5px #ffb6c1;
 }
 
-#bigMarkAsRead {
+#bigMarkAsRead.big {
 	color: #787394;
 }
 

p/themes/Dark-pink/pinkdark.rtl.css

@@ -72,7 +72,7 @@
 	box-shadow: 0 2px 5px #ffb6c1;
 }
 
-#bigMarkAsRead {
+#bigMarkAsRead.big {
 	color: #787394;
 }
 

p/themes/Flat/flat.css

@@ -834,7 +834,7 @@ th {
 }
 
 /*=== "Load more" part */
-#bigMarkAsRead {
+#bigMarkAsRead.big {
 	text-align: center;
 	text-decoration: none;
 	background: #ecf0f1;

p/themes/Flat/flat.rtl.css

@@ -834,7 +834,7 @@ th {
 }
 
 /*=== "Load more" part */
-#bigMarkAsRead {
+#bigMarkAsRead.big {
 	text-align: center;
 	text-decoration: none;
 	background: #ecf0f1;

p/themes/Mapco/_components.css

@@ -0,0 +1,250 @@
+/* stylelint-disable property-no-vendor-prefix */
+/* FUNCTIONS */
+/*=== 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;
+}

p/themes/Mapco/_components.rtl.css

@@ -0,0 +1,250 @@
+/* stylelint-disable property-no-vendor-prefix */
+/* FUNCTIONS */
+/*=== 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;
+}
+
+/*=== 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: 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;
+}
+
+/*=== "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;
+}

p/themes/Mapco/_components.scss

@@ -291,7 +291,7 @@
 }
 
 /*=== "Load more" part */
-#bigMarkAsRead {
+#bigMarkAsRead.big {
 	text-align: center;
 	text-decoration: none;
 	background: variables.$main-first-light;

p/themes/Mapco/mapco.css

@@ -425,7 +425,7 @@ th {
 }
 
 /*=== "Load more" part */
-#bigMarkAsRead {
+#bigMarkAsRead.big {
 	text-align: center;
 	text-decoration: none;
 	background: #effcfd;

p/themes/Mapco/mapco.rtl.css

@@ -425,7 +425,7 @@ th {
 }
 
 /*=== "Load more" part */
-#bigMarkAsRead {
+#bigMarkAsRead.big {
 	text-align: center;
 	text-decoration: none;
 	background: #effcfd;

p/themes/Nord/nord.css

@@ -940,7 +940,7 @@ li.item.active {
 	background-color: var(--main-background);
 }
 
-#bigMarkAsRead {
+#bigMarkAsRead.big {
 	text-decoration: none;
 }
 

p/themes/Nord/nord.rtl.css

@@ -940,7 +940,7 @@ li.item.active {
 	background-color: var(--main-background);
 }
 
-#bigMarkAsRead {
+#bigMarkAsRead.big {
 	text-decoration: none;
 }
 

p/themes/Origine-compact/origine-compact.css

@@ -134,7 +134,7 @@
 	padding: 0.5rem 3rem 0.5rem 0.5rem;
 }
 /*=== "Load more" part */
-#bigMarkAsRead {
+#bigMarkAsRead.big {
 	font-size: 1.2em;
 }
 

p/themes/Origine-compact/origine-compact.rtl.css

@@ -134,7 +134,7 @@
 	padding: 0.5rem 0.5rem 0.5rem 3rem;
 }
 /*=== "Load more" part */
-#bigMarkAsRead {
+#bigMarkAsRead.big {
 	font-size: 1.2em;
 }
 

p/themes/Origine/origine.css

@@ -979,7 +979,7 @@ a:hover .icon {
 }
 
 /*=== "Load more" part */
-#bigMarkAsRead {
+#bigMarkAsRead.big {
 	color: var(--font-color-grey);
 	text-align: center;
 	text-decoration: none;

p/themes/Origine/origine.rtl.css

@@ -979,7 +979,7 @@ a:hover .icon {
 }
 
 /*=== "Load more" part */
-#bigMarkAsRead {
+#bigMarkAsRead.big {
 	color: var(--font-color-grey);
 	text-align: center;
 	text-decoration: none;

p/themes/Pafat/pafat.css

@@ -946,7 +946,7 @@ a.signin {
 }
 
 /*=== "Load more" part */
-#bigMarkAsRead {
+#bigMarkAsRead.big {
 	background-color: var(--background-color-grey-light);
 	color: var(--font-color-grey);
 	text-align: center;

p/themes/Pafat/pafat.rtl.css

@@ -946,7 +946,7 @@ a.signin {
 }
 
 /*=== "Load more" part */
-#bigMarkAsRead {
+#bigMarkAsRead.big {
 	background-color: var(--background-color-grey-light);
 	color: var(--font-color-grey);
 	text-align: center;

p/themes/Swage/swage.css

@@ -812,16 +812,16 @@ form th {
 .notification.bad a.close:hover {
 	background-color: var(--color-background-bad);
 }
-.notification .close {
+.notification a.close {
 	display: none;
 }
 
-#bigMarkAsRead {
+#bigMarkAsRead.big {
 	text-align: center;
 	text-decoration: none;
 	background: var(--color-background-light-darker);
 }
-#bigMarkAsRead:hover {
+#bigMarkAsRead.big:hover {
 	background-color: var(--color-background-aside);
 	color: var(--color-text-light);
 }
@@ -1027,15 +1027,15 @@ a.signin {
 	.notification {
 		width: 100%;
 	}
-	.notification .close {
+	.notification a.close {
 		background: transparent;
 		display: block;
 		left: 0;
 	}
-	.notification .close:hover {
+	.notification a.close:hover {
 		opacity: 0.5;
 	}
-	.notification .close .icon {
+	.notification a.close .icon {
 		display: none;
 	}
 	#nav_entries {

p/themes/Swage/swage.rtl.css

@@ -812,16 +812,16 @@ form th {
 .notification.bad a.close:hover {
 	background-color: var(--color-background-bad);
 }
-.notification .close {
+.notification a.close {
 	display: none;
 }
 
-#bigMarkAsRead {
+#bigMarkAsRead.big {
 	text-align: center;
 	text-decoration: none;
 	background: var(--color-background-light-darker);
 }
-#bigMarkAsRead:hover {
+#bigMarkAsRead.big:hover {
 	background-color: var(--color-background-aside);
 	color: var(--color-text-light);
 }
@@ -1027,15 +1027,15 @@ a.signin {
 	.notification {
 		width: 100%;
 	}
-	.notification .close {
+	.notification a.close {
 		background: transparent;
 		display: block;
 		right: 0;
 	}
-	.notification .close:hover {
+	.notification a.close:hover {
 		opacity: 0.5;
 	}
-	.notification .close .icon {
+	.notification a.close .icon {
 		display: none;
 	}
 	#nav_entries {

p/themes/Swage/swage.scss

@@ -1053,7 +1053,7 @@ form {
 	}
 }
 
-#bigMarkAsRead {
+#bigMarkAsRead.big {
 	text-align: center;
 	text-decoration: none;
 	background: var(--color-background-light-darker);

p/themes/base-theme/base.css

@@ -606,7 +606,7 @@ th {
 }
 
 /*=== "Load more" part */
-#bigMarkAsRead {
+#bigMarkAsRead.big {
 	text-align: center;
 	text-decoration: none;
 }

p/themes/base-theme/base.rtl.css

@@ -606,7 +606,7 @@ th {
 }
 
 /*=== "Load more" part */
-#bigMarkAsRead {
+#bigMarkAsRead.big {
 	text-align: center;
 	text-decoration: none;
 }

p/themes/base-theme/frss.css

@@ -1878,7 +1878,7 @@ a.website:hover .favicon {
 	font-size: 0;
 }
 
-#bigMarkAsRead {
+#bigMarkAsRead.big {
 	margin: 0 0 100% 0;
 	margin: 0 0 100vh 0;
 	padding: 1em 0 50px 0;
@@ -1888,10 +1888,14 @@ a.website:hover .favicon {
 	font-size: 1.25rem;
 }
 
-.bigTick {
+#bigMarkAsRead.big .bigTick {
 	font-size: 4rem;
 }
 
+#bigMarkAsRead.small .bigTick {
+	font-size: 2rem;
+}
+
 /*=== Statistiques */
 .box .box-title .btn {
 	position: absolute;

p/themes/base-theme/frss.rtl.css

@@ -1878,7 +1878,7 @@ a.website:hover .favicon {
 	font-size: 0;
 }
 
-#bigMarkAsRead {
+#bigMarkAsRead.big {
 	margin: 0 0 100% 0;
 	margin: 0 0 100vh 0;
 	padding: 1em 0 50px 0;
@@ -1888,10 +1888,14 @@ a.website:hover .favicon {
 	font-size: 1.25rem;
 }
 
-.bigTick {
+#bigMarkAsRead.big .bigTick {
 	font-size: 4rem;
 }
 
+#bigMarkAsRead.small .bigTick {
+	font-size: 2rem;
+}
+
 /*=== Statistiques */
 .box .box-title .btn {
 	position: absolute;