Merge pull request #6768 from marc1706/ticket/17459

[ticket/17459] Improve prosilver font sizes and backgrounds
2025-07-30 21:40:43 +02:00 · 2025-02-14 16:58:09 +01:00
parent e0bcea9000 353aa653b4
commit f6c9d15b0c
18 changed files with 326 additions and 185 deletions
--- a/phpBB/styles/prosilver/template/ajax.js
+++ b/phpBB/styles/prosilver/template/ajax.js
@@ -392,6 +392,28 @@ $('#member_search').click(function () {
 	return false;
 });

+/**
+ * Show to top button if available on page
+ */
+const $scrollTopButton = $('.to-top-button');
+
+if ($scrollTopButton.length) {
+	// Show or hide the button based on scroll position
+	$(window).scroll(function () {
+		if ($(this).scrollTop() > 300) {
+			$scrollTopButton.fadeIn(); // Fade in the button
+		} else {
+			$scrollTopButton.fadeOut(); // Fade out the button
+		}
+	});
+
+	// Scroll smoothly to the top when the button is clicked
+	$scrollTopButton.click(function (e) {
+		e.preventDefault(); // Prevent the default anchor link behavior
+		$('html, body').animate({scrollTop: 0}, 500); // Smooth scroll to top
+	});
+}
+
 /**
 * Automatically resize textarea
 */
--- a/phpBB/styles/prosilver/template/faq_body.html
+++ b/phpBB/styles/prosilver/template/faq_body.html
@@ -35,9 +35,6 @@
 					<dt id="f{faq_block.S_ROW_COUNT}r{faq_block.faq_row.S_ROW_COUNT}"><strong>{faq_block.faq_row.FAQ_QUESTION}</strong></dt>
 					<dd>{faq_block.faq_row.FAQ_ANSWER}</dd>
 				</dl>
-				<a href="#faqlinks" class="top">
-					{{ Icon('font', 'circle-chevron-up', lang('BACK_TO_TOP'), false) }}
-				</a>
 				<!-- IF not faq_block.faq_row.S_LAST_ROW --><hr class="dashed" /><!-- ENDIF -->
 			<!-- END faq_row -->
 		</div>
@@ -46,5 +43,11 @@
 	</div>
 <!-- END faq_block -->

+<div class="to-top-button">
+	<a href="#faqlinks">
+		{{ Icon('font', 'chevron-up', '', false) }}
+	</a>
+</div>
+
 <!-- INCLUDE jumpbox.html -->
 <!-- INCLUDE overall_footer.html -->
--- a/phpBB/styles/prosilver/template/index_body.html
+++ b/phpBB/styles/prosilver/template/index_body.html
@@ -1,15 +1,8 @@
 <!-- INCLUDE overall_header.html -->

-<p class="{S_CONTENT_FLOW_END} responsive-center time<!-- IF S_USER_LOGGED_IN --> rightside<!-- ENDIF -->"><!-- IF S_USER_LOGGED_IN -->{LAST_VISIT_DATE}<!-- ELSE -->{CURRENT_TIME}<!-- ENDIF --></p>
-<!-- IF S_USER_LOGGED_IN --><p class="responsive-center time">{CURRENT_TIME}</p><!-- ENDIF -->
-
 <!-- EVENT index_body_markforums_before -->
-<!-- IF U_MARK_FORUMS -->
-	<div class="action-bar compact">
-		<a href="{U_MARK_FORUMS}" class="mark-read rightside" accesskey="m" data-ajax="mark_forums_read">{L_MARK_FORUMS_READ}</a>
-	</div>
-<!-- ENDIF -->
 <!-- EVENT index_body_markforums_after -->
+<!-- EVENT index_body_forumlist_body_before -->

 <!-- INCLUDE forumlist_body.html -->

--- a/phpBB/styles/prosilver/template/navbar_header.html
+++ b/phpBB/styles/prosilver/template/navbar_header.html
@@ -44,6 +44,13 @@
 									{{ Icon('font', 'file-lines', lang('SEARCH_ACTIVE_TOPICS'), false, 'far icon icon-blue') }}
 								</a>
 							</li>
+							{% if U_MARK_FORUMS %}
+							<li>
+								<a href="{{ U_MARK_FORUMS }}" role="menuitem" accesskey="m" data-ajax="mark_forums_read">
+									{{ Icon('font', 'book-open-reader', lang('MARK_FORUMS_READ'), false) }}
+								</a>
+							</li>
+							{% endif %}
 							<li class="separator"></li>
 							<li>
 								<a href="{{ U_SEARCH }}" role="menuitem">
@@ -160,7 +167,7 @@
 				{% if S_DISPLAY_PM %}
 					<li class="rightside">
 						<a href="{{ U_PRIVATEMSGS }}" role="menuitem">
-							{{ Icon('font', 'inbox', lang('PRIVATE_MESSAGES'), false) }}<strong class="badge{% if not PRIVATE_MESSAGE_COUNT %} hidden{% endif %}"> {PRIVATE_MESSAGE_COUNT}</strong>
+							{{ Icon('font', 'inbox', lang('PRIVATE_MESSAGES'), true) }}<strong class="badge{% if not PRIVATE_MESSAGE_COUNT %} hidden{% endif %}"> {PRIVATE_MESSAGE_COUNT}</strong>
 						</a>
 					</li>
 				{% endif %}
@@ -168,7 +175,7 @@
 				{% if S_NOTIFICATIONS_DISPLAY %}
 					<li class="dropdown-container dropdown-{S_CONTENT_FLOW_END} rightside">
 						<a href="{{ U_VIEW_ALL_NOTIFICATIONS }}" id="notification-button" class="dropdown-trigger">
-							{{ Icon('font', 'bell', lang('NOTIFICATIONS'), false) }}<strong class="badge{% if not NOTIFICATIONS_COUNT %} hidden{% endif %}">{NOTIFICATIONS_COUNT}</strong>
+							{{ Icon('font', 'bell', lang('NOTIFICATIONS'), true) }}<strong class="badge{% if not NOTIFICATIONS_COUNT %} hidden{% endif %}">{NOTIFICATIONS_COUNT}</strong>
 						</a>

 						{% include 'notification_dropdown.html' %}
--- a/phpBB/styles/prosilver/theme/base.css
+++ b/phpBB/styles/prosilver/theme/base.css
@@ -21,9 +21,26 @@
 *    line-heights want to be a multiple of this number in order to maintain
 *    vertical rhythm.)
 */
+:root {
+	/* Base font size */
+	--ps-font-base: 16px;								/* [1] */
+	--ps-line-height: 1.5rem;							/* [2] */
+
+	/* Headings */
+	--ps-font-h1: 1.5rem;								/* 24px */
+	--ps-font-h2: 1.5rem;								/* 24px */
+	--ps-font-h3: 1.25rem;								/* 20px */
+	--ps-font-h4: 1.125rem;								/* 18px */
+
+	/* Text and Paragraphs */
+	--ps-font-normal: 1rem;								/* 16px */
+	--ps-font-small: 0.875rem;							/* 14px */
+	--ps-font-tiny: 0.75rem;							/* 12px */
+}
+
 html {
-	font-size: 16px; /* [1] */
-	line-height: 1.5; /* [2] */
+	font-size: var(--ps-font-base);
+	line-height: var(--ps-line-height);
 	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }

--- a/phpBB/styles/prosilver/theme/buttons.css
+++ b/phpBB/styles/prosilver/theme/buttons.css
@@ -4,7 +4,7 @@

 .button {
 	font-family: "Open Sans", "Droid Sans", Verdana, Arial, Helvetica;
-	font-size: 13px;
+	font-size: var(--ps-font-normal);
 	font-weight: 600;
 	line-height: 1.4;
 	text-align: center;
@@ -16,7 +16,7 @@
 	justify-content: center;
 	align-items: center;
 	box-sizing: border-box;
-	height: 24px;
+	height: calc(var(--ps-font-normal) * 1.875);
 	padding: 2px 8px;
 	cursor: pointer;
 	touch-action: manipulation;
@@ -185,11 +185,11 @@

 /* Responsive buttons in post body */
 .post-buttons .dropdown {
-	top: 18px;
+	top: calc(var(--ps-font-normal) * 1.875);
 }

 .post-buttons .dropdown a {
-	font-size: 13px;
+	font-size: var(--ps-font-normal);
 	text-align: right;
 	display: block;
 	justify-content: start;
--- a/phpBB/styles/prosilver/theme/colours.css
+++ b/phpBB/styles/prosilver/theme/colours.css
@@ -83,6 +83,15 @@ th a:hover {
 	color: #9e9e9e;
 }

+.to-top-button {
+	background-color: #0f4d8a;
+	opacity: 0.7;
+}
+
+.to-top-button a {
+	color: #e6f7ff;
+}
+
 /* arrow links  */
 .arrow-left:hover,
 .arrow-right:hover {
@@ -97,15 +106,11 @@ th a:hover {
 .headerbar,
 .forumbg {
 	background-color: #13a4ec;
-	background-image: -webkit-gradient(linear, left top, left bottom, from(#80d5ff), color-stop(0.1%, #0077b3), color-stop(30%, #13a4ec), to(#13a4ec));
-	background-image: linear-gradient(to bottom, #80d5ff 0%, #0077b3 0.1%, #13a4ec 30%, #13a4ec 100%);
 	background-repeat: repeat-x;
 }

 .forabg {
-	background-color: #0077b3;
-	background-image: -webkit-gradient(linear, left top, left bottom, from(#80d5ff), color-stop(0.1%, #13a4ec), color-stop(30%, #0077b3), to(#0077b3));
-	background-image: linear-gradient(to bottom, #80d5ff 0%, #13a4ec 0.1%, #0077b3 30%, #0077b3 100%);
+	background-color: #13a4ec;
 	background-repeat: repeat-x;
 }

@@ -413,9 +418,7 @@ p.post-notice {

 /*	colours and backgrounds for content.css */
 ul.forums {
-	background-color: #edf4f7;
-	background-image: -webkit-gradient(linear, left top, left bottom, from(#b8d3e0), to(#edf4f7));
-	background-image: linear-gradient(to bottom, #b8d3e0 0%, #edf4f7 100%);
+	background-color: #d2e4ec;
 }

 ul.topiclist > li {
@@ -441,7 +444,7 @@ li.row strong {
 }

 li.row:hover {
-	background-color: #fffbcc;
+	background-color: #cde9f5;
 }

 li.row:hover dd {
@@ -862,11 +865,7 @@ ul.cplist {
 .tabs .activetab > a,
 .tabs .activetab > a:hover {
 	background-color: #c9dee8;
-	background-image: -webkit-gradient(linear, left top, left bottom, from(#e6f7ff), to(#c9dee8));
-	background-image: linear-gradient(to bottom, #e6f7ff 0%, #c9dee8 100%);
 	border-color: #c9dee8;
-	-webkit-box-shadow: 0 1px 1px #e6f7ff inset;
-	box-shadow: 0 1px 1px #e6f7ff inset;
 	color: #212121;
 }

@@ -885,9 +884,7 @@ ul.cplist {

 /* link styles for the sub-section links */
 .navigation a {
-	background: #c0d3dd;
-	background-image: -webkit-gradient(linear, left top, right top, color-stop(50%, #aab9c0), to(#c0d3dd));
-	background-image: linear-gradient(to right, #aab9c0 50%, #c0d3dd 100%);
+	background: #b5c6cf;
 	color: #212121;
 }

--- a/phpBB/styles/prosilver/theme/common.css
+++ b/phpBB/styles/prosilver/theme/common.css
@@ -13,7 +13,7 @@ html {

 body {
 	font-family: Verdana, Helvetica, Arial, sans-serif;
-	font-size: 16px;
+	font-size: var(--ps-font-normal);
 	line-height: normal;
 	word-wrap: break-word;
 	margin: 0;
@@ -24,7 +24,7 @@ body {
 h1 {
 	/* Forum name */
 	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
-	font-size: 20px;
+	font-size: var(--ps-font-h1);
 	font-weight: bold;
 	margin-top: 15px;
 	margin-right: 200px;
@@ -33,7 +33,7 @@ h1 {
 h2 {
 	/* Forum header titles */
 	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
-	font-size: 20px;
+	font-size: var(--ps-font-h2);
 	font-weight: normal;
 	margin: 0.8em 0 0.2em;
 }
@@ -45,7 +45,7 @@ h2.solo {
 h3 {
 	/* Sub-headers (also used as post headers, but defined later) */
 	font-family: Arial, Helvetica, sans-serif;
-	font-size: 12px;
+	font-size: var(--ps-font-normal);
 	font-weight: bold;
 	text-transform: uppercase;
 	border-bottom: 1px solid transparent;
@@ -57,13 +57,13 @@ h3 {
 h4 {
 	/* Forum and topic list titles */
 	font-family: "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif;
-	font-size: 13px;
+	font-size: var(--ps-font-h4);
 }

 p {
-	font-size: 11px;
-	line-height: 14px;
-	margin-bottom: 16px;
+	font-size: var(--ps-font-small);
+	line-height: calc(var(--ps-line-height) * 0.75);
+	margin-bottom: calc(var(--ps-line-height) / 1.2);
 }

 img {
@@ -161,7 +161,7 @@ a:hover {

 .page-body {
 	clear: both;
-	margin: 4px 0;
+	margin: 0.4rem 0;
 }

 .page-footer {
@@ -203,7 +203,7 @@ a:hover {
 	border-radius: 7px;
 	display: flex;
 	flex-direction: column;
-	margin-bottom: 4px;
+	margin-bottom: 0.5rem;
 	padding: 5px;
 }

@@ -215,20 +215,20 @@ a:hover {
 .forabg {
 	border-radius: 7px;
 	clear: both;
-	margin-bottom: 4px;
+	margin-bottom: 0.5rem;
 	padding: 5px;
 }

 .forumbg {
 	border-radius: 7px;
 	clear: both;
-	margin-bottom: 4px;
+	margin-bottom: 0.5rem;
 	padding: 5px;
 }

 .panel {
 	border-radius: 7px;
-	margin-bottom: 4px;
+	margin-bottom: calc(var(--ps-font-base) * 0.5);
 	padding: 5px 10px;
 }

@@ -262,8 +262,8 @@ ul.linklist {
 }

 ul.linklist > li {
-	font-size: 11px;
-	line-height: 24px;
+	font-size: var(--ps-font-small);
+	line-height: calc(var(--ps-line-height) * 1.25);
 	float: left;
 	width: auto;
 	margin-right: 7px;
@@ -434,12 +434,12 @@ a.header-avatar img {
 }

 .dropdown-button-control .dropdown {
-	top: 24px;
+	top: calc(var(--ps-line-height) * 1.25);
 }

 .dropdown-button-control.dropdown-up .dropdown {
 	top: auto;
-	bottom: 24px;
+	bottom: calc(var(--ps-line-height) * 1.25);
 }

 .dropdown .pointer,
@@ -556,7 +556,7 @@ a.header-avatar img {
 }

 .dropdown li {
-	font-size: 11px !important;
+	font-size: var(--ps-font-small) !important;
 	line-height: normal !important;
 	text-align: left;
 	white-space: nowrap;
@@ -615,12 +615,12 @@ a.header-avatar img {
 .breadcrumbs .crumb {
 	font-weight: bold;
 	word-wrap: normal;
-	float: left;
+	display: inline-block;
 }

 .breadcrumbs .crumb:before {
 	font-weight: bold;
-	padding: 0 0.5em;
+	padding: 0 0.1em;
 	content: "\203A";
 }

@@ -678,9 +678,9 @@ table.table1 {
 }

 table.table1 thead th {
-	font-size: 10px;
+	font-size: var(--ps-font-tiny);
 	font-weight: normal;
-	line-height: 13px;
+	line-height: calc(var(--ps-line-height) / 1.5);
 	text-transform: uppercase;
 	padding: 0 0 4px 3px;
 }
@@ -694,7 +694,7 @@ table.table1 tbody tr {
 }

 table.table1 td {
-	font-size: 11px;
+	font-size: var(--ps-font-small);
 }

 table.table1 tbody td {
@@ -831,7 +831,7 @@ table.info tbody th {

 dl.details {
 	font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
-	font-size: 11px;
+	font-size: var(--ps-font-small);
 }

 dl.details dt {
@@ -882,7 +882,7 @@ fieldset.fields1 dl.pmlist dd.recipients {
 /* Action-bars (container for post/reply buttons, pagination, etc.)
 ---------------------------------------- */
 .action-bar {
-	font-size: 11px;
+	font-size: var(--ps-font-small);
 	margin: 4px 0;
 }

@@ -938,7 +938,7 @@ fieldset.fields1 dl.pmlist dd.recipients {

 .pagination li.active span {
 	font-family: "Open Sans", "Droid Sans", Verdana, Arial, Helvetica;
-	font-size: 13px;
+	font-size: var(--ps-font-normal);
 	font-weight: normal;
 	line-height: 1.4;
 	text-align: center;
@@ -962,7 +962,7 @@ fieldset.fields1 dl.pmlist dd.recipients {
 }

 .pagination li.page-jump a i {
-	font-size: 16px;
+	font-size: var(--ps-font-h3);
 }

 .pagination .arrow a {
@@ -982,10 +982,10 @@ fieldset.fields1 dl.pmlist dd.recipients {

 .row .pagination li a,
 .row .pagination li span {
-	font-size: 9px;
+	font-size: var(--ps-font-tiny);
 	border-radius: 2px;
-	width: 14px;
-	height: 17px;
+	width: calc(var(--ps-font-tiny) + 6px);
+	height: calc(var(--ps-font-normal) + 6px);
 	padding: 1px 3px;
 }

@@ -1026,7 +1026,7 @@ fieldset.fields1 dl.pmlist dd.recipients {
 .phpbb_alert div.alert_text > select,
 .phpbb_alert div.alert_text > textarea,
 .phpbb_alert div.alert_text > input {
-	font-size: 11px;
+	font-size: var(--ps-font-small);
 }

 .darkenwrapper {
@@ -1141,13 +1141,13 @@ fieldset.fields1 dl.pmlist dd.recipients {
 /* Miscellaneous styles
 ---------------------------------------- */
 .copyright {
-	font-size: 10px;
+	font-size: var(--ps-font-tiny);
 	text-align: center;
 	padding: 10px;
 }

 .footer-row {
-	font-size: 10px;
+	font-size: var(--ps-font-tiny);
 	line-height: 1.8;
 	margin: 0;
 }
@@ -1165,12 +1165,12 @@ fieldset.fields1 dl.pmlist dd.recipients {
 }

 .error {
-	font-size: 10px;
+	font-size: 12px;
 	font-weight: bold;
 }

 div.rules {
-	font-size: 11px;
+	font-size: var(--ps-font-h4);
 	border-radius: 7px;
 	margin: 10px 0;
 	padding: 5px 10px;
@@ -1243,7 +1243,7 @@ ul.linklist:after,
 }

 .member-search strong {
-	font-size: 11px;
+	font-size: var(--ps-font-small);
 }

 .dropdown-extended {
@@ -1319,7 +1319,7 @@ ul.linklist:after,
 }

 .dropdown-extended .footer {
-	font-size: 12px;
+	font-size: var(--ps-font-normal);
 	text-align: center;
 }

@@ -1372,7 +1372,7 @@ ul.linklist:after,
 }

 .notification-time {
-	font-size: 10px;
+	font-size: var(--ps-font-tiny);
 	text-align: right;
 	margin: 0;
 }
@@ -1388,7 +1388,7 @@ ul.linklist:after,

 .notifications-title {
 	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
-	font-size: 13px !important;
+	font-size: var(--ps-font-normal) !important;
 }

 .notifications-title strong {
@@ -1396,7 +1396,7 @@ ul.linklist:after,
 }

 .notifications-time {
-	font-size: 10px !important;
+	font-size: 12px !important;
 }

 .notification-text {
@@ -1404,16 +1404,16 @@ ul.linklist:after,
 }

 .badge {
-	font-size: 10px;
+	font-size: var(--ps-font-tiny);
 	line-height: 1;
 	text-align: center;
 	white-space: nowrap;
 	border-radius: 10px;
 	opacity: 0.8;
 	position: relative;
-	top: 3px;
+	top: 5px;
 	float: right;
-	margin-left: 3px;
+	margin-left: 5px;
 	padding: 4px 6px;
 }

--- a/phpBB/styles/prosilver/theme/content.css
+++ b/phpBB/styles/prosilver/theme/content.css
@@ -37,7 +37,7 @@ ul.topiclist dd {
 }

 ul.topiclist dt {
-	font-size: 11px;
+	font-size: var(--ps-font-small);
 	width: 100%;
 	margin-right: -440px;
 }
@@ -55,7 +55,7 @@ ul.topiclist.two-columns dt {
 }

 ul.topiclist dt .list-inner {
-	line-height: 16px;
+	line-height: calc(var(--ps-line-height) / 1.2);
 	margin-right: 440px;
 	padding-right: 5px;
 	padding-left: 5px;
@@ -140,8 +140,8 @@ li.row strong {
 li.header dt,
 li.header dd {
 	font-family: Arial, Helvetica, sans-serif;
-	font-size: 10px;
-	line-height: 16px;
+	font-size: var(--ps-font-tiny);
+	line-height: 1.6;
 	text-transform: uppercase;
 	border-left-width: 0;
 	margin: 2px 0 4px;
@@ -193,7 +193,7 @@ dl.row-item dt {
 }

 dl.row-item dt .list-inner {
-	padding-left: 52px;			/* Space for folder icon */
+	padding-left: 54px;			/* Space for folder icon */
 }

 dl.row-item dt,
@@ -207,8 +207,8 @@ dd.topics,
 dd.views,
 dd.extra,
 dd.mark {
-	font-size: 12px;
-	line-height: 26px;
+	font-size: var(--ps-font-normal);
+	line-height: 2;
 	text-align: center;
 	width: 80px;
 }
@@ -236,16 +236,16 @@ dd.redirect,
 dd.moderation,
 dd.time,
 dd.info {
-	font-size: 11px;
+	font-size: var(--ps-font-small);
 	width: 250px;
 }

 dd.redirect {
-	line-height: 26px;
+	line-height: calc(var(--ps-line-height) / 0.75);
 }

 dd.time {
-	line-height: 22px;
+	line-height: calc(var(--ps-line-height) * 1.1);
 }

 dd.lastpost > span,
@@ -258,17 +258,17 @@ dd.moderation > span {
 }

 dd.lastpost > span {
-	line-height: 16px;
+	line-height: calc(var(--ps-line-height) / 1.2);
 }

 dd.extra,
 dd.mark {
-	line-height: 24px;
+	line-height: var(--ps-line-height);
 }

 dd.option {
-	font-size: 11px;
-	line-height: 22px;
+	font-size: var(--ps-font-small);
+	line-height: 1.75;
 	text-align: center;
 	width: 125px;
 }
@@ -276,7 +276,7 @@ dd.option {
 /* Post body styles
 ---------------------------------------- */
 .postbody {
-	line-height: 16px;
+	line-height: var(--ps-line-height);
 	position: relative;
 	float: left;
 	width: 76%;
@@ -284,18 +284,18 @@ dd.option {
 }

 .postbody .ignore {
-	font-size: 11px;
+	font-size: var(--ps-font-small);
 }

 .postbody h3.first {
 	/* The first post on the page uses this */
-	font-size: 17px;
+	font-size: var(--ps-font-h3);
 }

 .postbody h3 {
 	font-family: "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif;
-	font-size: 15px;
-	line-height: 19px;
+	font-size: var(--ps-font-h4);
+	line-height: calc(var(--ps-font-h4) + 4px);
 	text-transform: none;
 	border: none;

@@ -317,7 +317,7 @@ dd.option {
 }

 .postbody .content {
-	font-size: 13px;
+	font-size: var(--ps-font-normal);
 	overflow-x: auto;
 }

@@ -374,17 +374,17 @@ dd.option {
 ---------------------------------------- */
 .content {
 	font-family: "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif;
-	font-size: 13px;
-	line-height: 18px;
+	font-size: var(--ps-font-normal);
+	line-height: var(--ps-line-height);
 	clear: both;
 	overflow: hidden;
-	min-height: 30px;
+	min-height: calc(var(--ps-line-height) * 1.5);
 	padding-bottom: 1px;
 }

 .content h2,
 .panel h2 {
-	font-size: 16px;
+	font-size: var(--ps-font-h3);
 	font-weight: normal;
 	border-bottom: 1px solid transparent;
 	margin-top: 8px;
@@ -397,9 +397,9 @@ dd.option {
 }

 .panel p {
-	font-size: 12px;
-	line-height: 16px;
-	margin-bottom: 12px;
+	font-size: var(--ps-font-normal);
+	line-height: 1.25;
+	margin-bottom: var(--ps-font-normal);
 }

 .content p {
@@ -407,22 +407,22 @@ dd.option {
 }

 .agreement {
-	font-size: 12px;
-	line-height: 17px;
-	margin-bottom: 10px;
+	font-size: var(--ps-font-normal);
+	line-height: 1.25;
+	margin-bottom: var(--ps-font-small);
 }

 .agreement-text {
-	line-height: 17px;
-	margin-bottom: 10px;
+	line-height: calc(var(--ps-font-normal) * 1.25);
+	margin-bottom: var(--ps-font-small);
 }

 dl.faq {
 	font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
-	font-size: 11px;
-	line-height: 15px;
-	margin-top: 11px;
-	margin-bottom: 22px;
+	font-size: var(--ps-font-small);
+	line-height: 1.4;
+	margin-top: var(--ps-font-small);
+	margin-bottom: calc(var(--ps-font-small) * 2);
 }

 dl.faq dt {
@@ -430,8 +430,8 @@ dl.faq dt {
 }

 .content dl.faq {
-	font-size: 12px;
-	margin-bottom: 6px;
+	font-size: var(--ps-font-normal);
+	margin-bottom: calc(var(--ps-font-normal) / 2);
 }

 .content li {
@@ -450,22 +450,22 @@ dl.faq dt {
 /* Post author */
 p.author {
 	font-family: Verdana, Helvetica, Arial, sans-serif;
-	font-size: 10px;
-	line-height: 12px;
+	font-size: var(--ps-font-tiny);
+	line-height: 1.2;
 	clear: both;
-	margin-bottom: 8px;
+	margin-bottom: calc(var(--ps-font-tiny) / 1.2);
 	padding: 0 0 5px;
 }

 /* Post signature */
 .signature {
-	font-size: 11px;
-	line-height: 16px;
+	font-size: var(--ps-font-small);
+	line-height: 1.4;
 	border-top: 1px solid transparent;
 	clear: left;
 	overflow: hidden;
 	width: 100%;
-	margin-top: 16px;
+	margin-top: calc(var(--ps-font-small) * 1.4);
 	padding-top: 2px;
 }

@@ -493,18 +493,18 @@ dd .signature {
 /* Post noticies */
 .notice {
 	font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
-	font-size: 10px;
-	line-height: 13px;
+	font-size: var(--ps-font-tiny);
+	line-height: 1.3;
 	border-top: 1px dashed transparent;
 	clear: left;
 	width: auto;
-	margin-top: 15px;
+	margin-top: calc(var(--ps-font-tiny) * 1.3 + 2px);
 	padding-top: 2px;
 }

 /* Jump to post link for now */
 ul.searchresults {
-	font-size: 12px;
+	font-size: var(--ps-font-normal);
 	text-align: right;
 	clear: both;
 	list-style: none;
@@ -551,20 +551,20 @@ blockquote cite > span {

 /* Code block */
 .codebox {
-	font-size: 13px;
+	font-size: var(--ps-font-normal);
 	word-wrap: normal;
 	border: 1px solid transparent;
-	margin: 13px 0 16px;
+	margin: var(--ps-font-normal) 0 calc(var(--ps-font-normal) + 2px);
 }

 .codebox p {
-	font-size: 10px !important;
+	font-size: var(--ps-font-tiny) !important;
 	font-weight: bold;
 	text-transform: uppercase;
 	border-bottom: 1px solid transparent;
 	display: block;
 	margin-bottom: 0;
-	padding: 3px;
+	padding: calc(var(--ps-font-tiny) / 3);
 }

 blockquote .codebox {
@@ -584,7 +584,7 @@ blockquote .codebox {
 /* Attachments
 ---------------------------------------- */
 .attachbox {
-	font-size: 13px;
+	font-size: var(--ps-font-normal);
 	border: 1px dashed transparent;
 	float: left;
 	clear: left;
@@ -715,7 +715,7 @@ fieldset.polls dl.voted {
 }

 fieldset.polls dt {
-	font-size: 11px;
+	font-size: var(--ps-font-small);
 	text-align: left;
 	border-right: none;
 	display: block;
@@ -726,7 +726,7 @@ fieldset.polls dt {
 }

 fieldset.polls dd {
-	font-size: 11px;
+	font-size: var(--ps-font-small);
 	border-left: none;
 	float: left;
 	width: 10%;
@@ -761,7 +761,7 @@ fieldset.polls dd div {
 }

 .vote-submitted {
-	font-size: 12px;
+	font-size: var(--ps-font-normal);
 	font-weight: bold;
 	text-align: center;
 }
@@ -769,7 +769,7 @@ fieldset.polls dd div {
 /* Poster profile block
 ---------------------------------------- */
 .postprofile {
-	line-height: 16px;
+	line-height: calc(var(--ps-font-small) * 1.5);
 	border: 1px solid transparent;
 	border-width: 0 0 0 1px;
 	float: right;
@@ -780,8 +780,8 @@ fieldset.polls dd div {

 .postprofile dd,
 .postprofile dt {
-	font-size: 10px;
-	line-height: 16px;
+	font-size: var(--ps-font-small);
+	line-height: 1.6;
 	margin-left: 8px;
 }

--- a/phpBB/styles/prosilver/theme/cp.css
+++ b/phpBB/styles/prosilver/theme/cp.css
@@ -24,12 +24,12 @@
 }

 .panel-container .panel p {
-	font-size: 11px;
+	font-size: var(--ps-font-small);
 }

 .panel-container .panel ol {
-	font-size: 11px;
-	margin-left: 22px;
+	font-size: var(--ps-font-small);
+	margin-left: calc(var(--ps-font-small) * 2);
 }

 .panel-container .panel li.row {
@@ -80,7 +80,7 @@ ul.cplist {
 }

 .panel-container .postbody p.author {
-	font-size: 11px;
+	font-size: var(--ps-font-small);
 }

 .cp-main .buttons {
@@ -118,9 +118,9 @@ ul.cplist {

 .tabs .tab,
 .minitabs .tab {
-	font-size: 10px;
+	font-size: var(--ps-font-tiny);
 	font-weight: bold;
-	line-height: 14px;
+	line-height: 1.4;
 	display: block;
 	float: left;
 }
@@ -144,7 +144,7 @@ ul.cplist {
 .tabs .tab > a {
 	border: 1px solid transparent;
 	border-radius: 4px 4px 0 0;
-	margin: 1px 1px 0 0;
+	margin: 1px 1px -1px 0;
 }

 .tabs .activetab > a {
@@ -180,12 +180,12 @@ ul.cplist {
 }

 .responsive-tab > a.responsive-tab-link {
-	font-size: 16px;
-	line-height: 14px;
+	font-size: var(--ps-font-h3);
+	line-height: 0.875;
 	text-decoration: none;
 	position: relative;
 	display: block;
-	width: 16px;
+	width: var(--ps-font-h3);
 }

 .responsive-tab .responsive-tab-link:before {
@@ -201,7 +201,7 @@ ul.cplist {

 .tabs .dropdown,
 .minitabs .dropdown {
-	font-size: 11px;
+	font-size: var(--ps-font-small);
 	font-weight: normal;
 	top: 20px;
 	margin-right: -2px;
@@ -248,8 +248,10 @@ ul.cplist {

 /* Link styles for the sub-section links */
 .navigation a {
-	font-size: 10px;
+	font-size: var(--ps-font-tiny);
 	text-decoration: none;
+	border: 1px solid transparent;
+	border-radius: 4px 0 0 4px;
 	display: block;
 	margin: 1px 0;
 	padding: 5px;
@@ -269,12 +271,12 @@ ul.cplist {

 /* Friends list */
 .cp-mini {
-	font-size: 10px;
+	font-size: var(--ps-font-tiny);
 	border-radius: 7px;
 	overflow-y: auto;
 	max-height: 200px;
-	margin: 10px 15px 10px 5px;
-	padding: 5px 10px;
+	margin: var(--ps-font-tiny) 15px var(--ps-font-tiny) 5px;
+	padding: 5px var(--ps-font-tiny);
 }

 dl.mini dt {
--- a/phpBB/styles/prosilver/theme/forms.css
+++ b/phpBB/styles/prosilver/theme/forms.css
@@ -9,13 +9,13 @@
 ---------------------------------------- */
 fieldset {
 	font-family: Verdana, Helvetica, Arial, sans-serif;
-	font-size: 11px;
+	font-size: var(--ps-font-small);
 	border-width: 0;
 }

 input {
 	font-family: Verdana, Helvetica, Arial, sans-serif;
-	font-size: 11px;
+	font-size: var(--ps-font-small);
 	font-weight: normal;
 	vertical-align: middle;
 	padding: 0 3px;
@@ -23,7 +23,7 @@ input {

 select {
 	font-family: Verdana, Helvetica, Arial, sans-serif;
-	font-size: 11px;
+	font-size: var(--ps-font-small);
 	font-weight: normal;
 	vertical-align: middle;
 	border: 1px solid transparent;
@@ -36,18 +36,18 @@ select:focus {
 }

 option {
-	padding-right: 11px;
+	padding-right: var(--ps-font-small);
 }

 select optgroup option {
 	font-family: Verdana, Helvetica, Arial, sans-serif;
-	padding-right: 11px;
+	padding-right: var(--ps-font-small);
 }

 textarea {
 	font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
-	font-size: 11px;
-	line-height: 18px;
+	font-size: var(--ps-font-small);
+	line-height: 1.5;
 	width: 60%;
 	padding: 2px;
 }
@@ -184,7 +184,7 @@ fieldset.display-options a {
 }

 .dropdown fieldset.display-options {
-	font-size: 11px;
+	font-size: var(--ps-font-small);
 	margin: 0;
 	padding: 0;
 }
@@ -203,10 +203,10 @@ fieldset.display-options a {

 /* Display actions for ucp and mcp pages */
 fieldset.display-actions {
-	line-height: 22px;
+	line-height: 2;
 	text-align: right;
 	white-space: nowrap;
-	padding-right: 11px;
+	padding-right: var(--ps-font-small);
 }

 fieldset.display-actions label {
@@ -216,7 +216,7 @@ fieldset.display-actions label {

 /* Not used anywhere */
 fieldset.sort-options {
-	line-height: 22px;
+	line-height: 2;
 }

 /* MCP forum selection */
@@ -262,7 +262,7 @@ fieldset.submit-buttons input {

 .message-box textarea {
 	font-family: "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif;
-	font-size: 13px;
+	font-size: var(--ps-font-normal);
 	outline: 3px dashed transparent;
 	outline-offset: -4px;
 	-webkit-box-sizing: border-box;
@@ -369,7 +369,7 @@ input.disabled {
 	float: left;
 	-webkit-box-sizing: border-box;
 	box-sizing: border-box;
-	height: 24px;
+	height: calc(var(--ps-line-height) * 1.25);
 	padding: 3px;
 }

--- a/phpBB/styles/prosilver/theme/icons.css
+++ b/phpBB/styles/prosilver/theme/icons.css
@@ -12,14 +12,14 @@ svg {

 .o-icon {
 	vertical-align: middle !important;
-	width: 14px;
-	height: 14px;
+	width: var(--ps-font-h4);
+	height: var(--ps-font-h4);
 }

 .o-icon-src-mdi,
 .o-icon-src-ic {
-	width: 18px;
-	height: 18px;
+	width: calc(var(--ps-font-h4) + 4px); /* icon + 2 * 2px padding */
+	height: calc(var(--ps-font-h4) + 4px); /* icon + 2 * 2px padding */
 }

 .o-icon-src-fa {
@@ -28,7 +28,7 @@ svg {

 .o-icon-font {
 	font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands";
-	font-size: 14px;
+	font-size: var(--ps-font-h4);
 	font-style: normal;
 	font-variant: normal;
 	-webkit-font-smoothing: antialiased;
@@ -57,7 +57,7 @@ span + .o-icon {

 blockquote cite:before,
 .uncited:before {
-	font-size: 36px;
+	font-size: calc(var(--ps-font-normal) * 2.5);
 	vertical-align: bottom;
 	display: inline-block;
 	margin-top: 8px;
@@ -72,9 +72,9 @@ blockquote cite:before,

 .c-forum-row-icon,
 .c-notification-check-icon {
-	font-size: 20px;
-	width: 20px;
-	height: 20px;
+	font-size: var(--ps-font-h1);
+	width: var(--ps-font-h1);
+	height: var(--ps-font-h1);
 	margin-top: 0;
 }

@@ -86,8 +86,8 @@ blockquote cite:before,
 	display: inline-flex;
 	justify-content: center;
 	align-items: center;
-	width: 32px;
-	height: 32px;
+	width: calc(var(--ps-font-normal) * 2.25);
+	height: calc(var(--ps-font-normal) * 2.25);
 	margin-top: -17px;
 	margin-left: 9px;
 }
--- a/phpBB/styles/prosilver/theme/links.css
+++ b/phpBB/styles/prosilver/theme/links.css
@@ -69,7 +69,7 @@ a.forumtitle,
 a.topictitle,
 span.topictitle {
 	font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
-	font-size: 13px;
+	font-size: var(--ps-font-normal);
 	text-decoration: none;
 }

@@ -151,9 +151,24 @@ a.lastsubject:hover {
 }

 .top {
-	font-size: 12px;
+	font-size: var(--ps-font-small);
 	text-decoration: none;
-	margin-top: 10px;
+	margin-top: calc(var(--ps-font-small) - 2px);
+}
+
+.to-top-button {
+	border-radius: 50%;
+	position: fixed;
+	right: var(--ps-line-height);
+	bottom: var(--ps-line-height);
+	display: none;
+	block-size: calc(var(--ps-line-height) * 2);
+	inline-size: calc(var(--ps-line-height) * 2);
+}
+
+.to-top-button .o-icon {
+	font-size: calc(var(--ps-font-normal) * 2);
+	padding: calc(var(--ps-font-normal) / 2);
 }

 /* Back to top of page */
--- a/phpBB/styles/prosilver/theme/responsive.css
+++ b/phpBB/styles/prosilver/theme/responsive.css
@@ -152,7 +152,7 @@
 	}
 }

-@media (max-width: 700px) {
+@media (max-width: 750px) {
 	.responsive-hide {
 		display: none !important;
 	}
@@ -182,8 +182,8 @@
 	.wrap {
 		border: none;
 		border-radius: 0;
-		min-width: 290px;
-		margin: 0;
+		min-width: 390px;
+		margin: 0 !important;
 		padding: 0 5px;
 	}