Optimize CSS files, remove inline styling, and add phpBB logo for Modernite style

phpBB/styles/modernite/template/bbcode.html

@@ -63,7 +63,7 @@
 <!-- BEGIN b_open --><strong class="text-strong"><!-- END b_open -->
 <!-- BEGIN b_close --></strong><!-- END b_close -->
 
-<!-- BEGIN u_open --><span style="text-decoration: underline"><!-- END u_open -->
+<!-- BEGIN u_open --><span class="bbcode-underline"><!-- END u_open -->
 <!-- BEGIN u_close --></span><!-- END u_close -->
 
 <!-- BEGIN i_open --><em class="text-italics"><!-- END i_open -->

phpBB/styles/modernite/template/drafts.html

@@ -32,7 +32,7 @@ <h3 class="draft-title">{L_LOAD_DRAFT}</h3>
 					<!-- IF not S_PRIVMSGS --><!-- IF draftrow.S_LINK_TOPIC -->{L_TOPIC}{L_COLON} <a href="{draftrow.U_VIEW}">{draftrow.TITLE}</a>
 					<!-- ELSEIF draftrow.S_LINK_FORUM -->{L_FORUM}{L_COLON} <a href="{draftrow.U_VIEW}">{draftrow.TITLE}</a>
 					<!-- ELSE -->{L_NO_TOPIC_FORUM}<!-- ENDIF --><!-- ENDIF -->
-					<div class="responsive-show" style="display: none;">
+					<div class="responsive-show">
 						{L_SAVE_DATE}{L_COLON} <strong>{draftrow.DATE}</strong>
 					</div>
 				</div>

phpBB/styles/modernite/template/forum_fn.js

@@ -460,7 +460,7 @@ function parseDocument($container) {
 
 		// Create block that is visible only on mobile devices
 		if (!$block.length) {
-			$this.find('dt > .list-inner').append('<div class="responsive-show" style="display:none;" />');
+			$this.find('dt > .list-inner').append('<div class="responsive-show" />');
 			$block = $this.find('dt .responsive-show:last-child');
 		} else {
 			first = ($.trim($block.text()).length === 0);
@@ -512,7 +512,7 @@ function parseDocument($container) {
 
 			// Create block that is visible only on mobile devices
 			if (!$block.length) {
-				$this.find('dt > .list-inner').append('<div class="responsive-show" style="display:none;" />');
+				$this.find('dt > .list-inner').append('<div class="responsive-show" />');
 				$block = $this.find('dt .responsive-show:last-child');
 			} else {
 				first = ($.trim($block.text()).length === 0);
@@ -630,7 +630,7 @@ function parseDocument($container) {
 			$ul = $this.children(),
 			$tabs = $ul.children().not('[data-skip-responsive]'),
 			$links = $tabs.children('a'),
-			$item = $ul.append('<li class="tab responsive-tab" style="display:none;"><a href="javascript:void(0);" class="responsive-tab-link">&nbsp;</a><div class="dropdown tab-dropdown" style="display: none;"><div class="pointer"><div class="pointer-inner"></div></div><ul class="dropdown-contents" /></div></li>').find('li.responsive-tab'),
+			$item = $ul.append('<li class="tab responsive-tab display-none"><a href="javascript:void(0);" class="responsive-tab-link">&nbsp;</a><div class="dropdown tab-dropdown display-none"><div class="pointer"><div class="pointer-inner"></div></div><ul class="dropdown-contents" /></div></li>').find('li.responsive-tab'),
 			$menu = $item.find('.dropdown-contents'),
 			maxHeight = 0,
 			lastWidth = false,

phpBB/styles/modernite/template/forumlist_body.html

@@ -79,7 +79,7 @@
 						<!-- ENDIF -->
 
 						<!-- IF not S_IS_BOT -->
-						<div class="responsive-show" style="display: none;">
+						<div class="responsive-show">
 							<!-- IF forumrow.CLICKS -->
 								{L_REDIRECTS}{L_COLON} <strong>{forumrow.CLICKS}</strong>
 							<!-- ELSEIF not forumrow.S_IS_LINK and forumrow.TOPICS -->

phpBB/styles/modernite/template/mcp_ban.html

@@ -54,7 +54,7 @@ <h3>{L_TITLE}</h3>
 	<dl>
 		<dt><label for="banlength">{L_BAN_LENGTH}{L_COLON}</label></dt>
 		<dd><label for="banlength"><select name="banlength" id="banlength" onchange="if(this.value==-1){document.getElementById('banlengthother').style.display = 'block';}else{document.getElementById('banlengthother').style.display='none';}">{S_BAN_END_OPTIONS}</select></label></dd>
-		<dd id="banlengthother" style="display: none;"><label><input type="text" name="banlengthother" class="inputbox" /><br /><span>{L_YEAR_MONTH_DAY}</span></label></dd>
+		<dd id="banlengthother" class="display-none"><label><input type="text" name="banlengthother" class="inputbox" /><br /><span>{L_YEAR_MONTH_DAY}</span></label></dd>
 	</dl>
 	<dl>
 		<dt><label for="banreason">{L_BAN_REASON}{L_COLON}</label></dt>

phpBB/styles/modernite/template/mcp_forum.html

@@ -79,11 +79,11 @@ <h2><a href="{U_VIEW_FORUM}">{L_FORUM}{L_COLON} {FORUM_NAME}</a></h2>
 					<!-- IF topicrow.S_MOVED_TOPIC and S_CAN_DELETE -->&nbsp;<a href="{topicrow.U_DELETE_TOPIC}" class="topictitle">[ {L_DELETE_SHADOW_TOPIC} ]</a><!-- ENDIF -->
 					<br />
 					<!-- EVENT topiclist_row_topic_title_after -->
-					<div class="responsive-show" style="display: none;">
+					<div class="responsive-show">
 						{% if topicrow.ATTACH_ICON_IMG %}{{ Icon('font', 'paperclip', '', true) }} {% endif %}
 						{L_LAST_POST} {L_POST_BY_AUTHOR} {% EVENT mcp_forum_last_post_author_username_prepend %}{topicrow.LAST_POST_AUTHOR_FULL}{% EVENT mcp_forum_last_post_author_username_append %} &laquo; {topicrow.LAST_POST_TIME}<br />
 					</div>
-					<span class="responsive-show left-box" style="display: none;">{L_REPLIES}{L_COLON} <strong>{topicrow.REPLIES}</strong></span>
+					<span class="responsive-show left-box">{L_REPLIES}{L_COLON} <strong>{topicrow.REPLIES}</strong></span>
 
 					<!-- IF .topicrow.pagination -->
 					<div class="pagination">

phpBB/styles/modernite/template/mcp_header.html

@@ -19,7 +19,7 @@ <h2>{L_MCP}</h2>
 <div class="panel bg3">
 	<div class="inner">
 
-	<div style="width: 100%;">
+	<div class="width-100">
 
 	<div id="cp-menu" class="cp-menu">
 		<div id="navigation" class="navigation" role="navigation">

phpBB/styles/modernite/template/mcp_logs.html

@@ -39,7 +39,7 @@ <h2>{L_TITLE}</h2>
 			<td>{log.ACTION}<br />
 			{log.DATA}
 		</td>
-			<!-- IF S_CLEAR_ALLOWED --><td style="width: 5%" align="center"><input type="checkbox" name="mark[]" value="{log.ID}" /></td><!-- ENDIF -->
+			<!-- IF S_CLEAR_ALLOWED --><td class="width-5 text-center"><input type="checkbox" name="mark[]" value="{log.ID}" /></td><!-- ENDIF -->
 		</tr>
 		<!-- END log -->
 	<!-- ELSE -->

phpBB/styles/modernite/template/mcp_notes_user.html

@@ -80,7 +80,7 @@ <h3>{L_ADD_FEEDBACK}</h3>
 		<td class="center">{usernotes.REPORT_AT}</td>
 		<td>{usernotes.ACTION}</td>
 
-		<!-- IF S_CLEAR_ALLOWED --><td class="center" style="width: 5%;"><input type="checkbox" name="marknote[]" id="note-{usernotes.ID}" value="{usernotes.ID}" /></td><!-- ENDIF -->
+		<!-- IF S_CLEAR_ALLOWED --><td class="center width-5"><input type="checkbox" name="marknote[]" id="note-{usernotes.ID}" value="{usernotes.ID}" /></td><!-- ENDIF -->
 	</tr>
 	<!-- BEGINELSE -->
 	<tr>

phpBB/styles/modernite/template/mcp_post.html

@@ -165,7 +165,7 @@ <h3>{L_MOD_OPTIONS}</h3>
 			<dl>
 				<dt><label>{L_CHANGE_POSTER}{L_COLON}</label></dt>
 				<!-- IF S_USER_SELECT --><dd><select name="u">{S_USER_SELECT}</select> <input type="submit" class="button1 button button-form-bold" name="action[chgposter_ip]" value="{L_CONFIRM}" /></dd><!-- ENDIF -->
-				<dd style="margin-top:3px;">
+				<dd class="margin-top-3">
 					<input class="inputbox autowidth" type="text" name="username" value="" />
 					<input type="submit" class="button1 button button-form-bold" name="action[chgposter]" value="{L_CONFIRM}" />
 					<br />

phpBB/styles/modernite/template/memberlist_search.html

@@ -8,7 +8,7 @@ <h2 class="solo">{L_FIND_USERNAME}</h2>
 
 	<!-- EVENT memberlist_search_fields_before -->
 	<fieldset class="fields1 column1">
-	<dl style="overflow: visible;">
+	<dl class="overflow-visible">
 		<dt><label for="username">{L_USERNAME}{L_COLON}</label></dt>
 		<dd>
 			<!-- IF U_LIVE_SEARCH --><div class="dropdown-container dropdown-{S_CONTENT_FLOW_END}"><!-- ENDIF -->

phpBB/styles/modernite/template/overall_header.html

@@ -67,8 +67,10 @@
 
 			<div id="site-description" class="site-description">
 				<a id="logo" class="logo" href="<!-- IF U_SITE_HOME -->{U_SITE_HOME}<!-- ELSE -->{U_INDEX}<!-- ENDIF -->" title="<!-- IF U_SITE_HOME -->{L_SITE_HOME}<!-- ELSE -->{L_INDEX}<!-- ENDIF -->">
+					<!-- phpBB logo for modernite theme -->
+					<img src="{T_ASSETS_PATH}/imgs/phpbb_logo.svg" alt="phpBB" class="phpbb-logo" />
 					<!-- IF SITE_LOGO_IMG -->
-						<img src="{T_ASSETS_PATH}/images/{SITE_LOGO_IMG}" alt="{SITENAME}" />
+						<img src="{T_ASSETS_PATH}/images/{SITE_LOGO_IMG}" alt="{SITENAME}" class="site-logo" />
 					<!-- ELSE -->
 						<span class="site-name">{SITENAME}</span>
 					<!-- ENDIF -->

phpBB/styles/modernite/template/posting_editor.html

@@ -20,7 +20,7 @@
 	{% EVENT posting_editor_topic_icons_after %}
 
 	<!-- IF not S_PRIVMSGS and S_DISPLAY_USERNAME -->
-	<dl style="clear: left;">
+	<dl class="clear-left">
 		<dt><label for="username">{L_USERNAME}{L_COLON}</label></dt>
 		<dd><input type="text" tabindex="1" name="username" id="username" size="25" value="{USERNAME}" class="inputbox autowidth" /></dd>
 	</dl>
@@ -29,7 +29,7 @@
 	<!-- EVENT posting_editor_subject_before -->
 
 	<!-- IF S_POST_ACTION or S_PRIVMSGS or S_EDIT_DRAFT -->
-	<dl style="clear: left;">
+	<dl class="clear-left">
 		<dt><label for="subject">{L_SUBJECT}{L_COLON}</label></dt>
 		<dd>
 			<!-- EVENT posting_editor_subject_prepend -->

phpBB/styles/modernite/template/ucp_header.html

@@ -17,7 +17,7 @@ <h2 class="ucp-title">{L_UCP}</h2>
 <div class="panel bg3">
 	<div class="inner">
 
-	<div style="width: 100%;">
+	<div class="width-100">
 
 	<div id="cp-menu" class="cp-menu">
 		<div id="navigation" class="navigation" role="navigation">

phpBB/styles/modernite/template/ucp_pm_history.html

@@ -37,7 +37,7 @@ <h3><a href="{history_row.U_VIEW_MESSAGE}" <!-- IF history_row.S_CURRENT_MSG -->
 				{L_MESSAGE_BY_AUTHOR} <!-- EVENT ucp_pm_history_row_message_author_username_prepend -->{history_row.MESSAGE_AUTHOR_FULL}<!-- EVENT ucp_pm_history_row_message_author_username_append -->
 			</p>
 			<div class="content"><!-- IF history_row.MESSAGE -->{history_row.MESSAGE}<!-- ELSE --><span class="error">{L_MESSAGE_REMOVED_FROM_OUTBOX}</span><!-- ENDIF --></div>
-			<div id="message_{history_row.MSG_ID}" style="display: none;">{history_row.DECODED_MESSAGE}</div>
+			<div id="message_{history_row.MSG_ID}" class="display-none">{history_row.DECODED_MESSAGE}</div>
 		</div>
 
 		</div>

phpBB/styles/modernite/template/viewtopic_body.html

@@ -92,7 +92,7 @@ <h2 class="poll-title"><!-- EVENT viewtopic_body_poll_question_prepend -->{POLL_
 				<!-- EVENT viewtopic_body_poll_option_before -->
 				<dl class="<!-- IF poll_option.POLL_OPTION_VOTED -->voted<!-- ENDIF --><!-- IF poll_option.POLL_OPTION_MOST_VOTES --> most-votes<!-- ENDIF -->"<!-- IF poll_option.POLL_OPTION_VOTED --> title="{L_POLL_VOTED_OPTION}"<!-- ENDIF --> data-alt-text="{L_POLL_VOTED_OPTION}" data-poll-option-id="{poll_option.POLL_OPTION_ID}">
 					<dt><!-- IF S_CAN_VOTE --><label for="vote_{poll_option.POLL_OPTION_ID}">{poll_option.POLL_OPTION_CAPTION}</label><!-- ELSE -->{poll_option.POLL_OPTION_CAPTION}<!-- ENDIF --></dt>
-					<!-- IF S_CAN_VOTE --><dd style="width: auto;" class="poll_option_select"><!-- IF S_IS_MULTI_CHOICE --><input type="checkbox" name="vote_id[]" id="vote_{poll_option.POLL_OPTION_ID}" value="{poll_option.POLL_OPTION_ID}"<!-- IF poll_option.POLL_OPTION_VOTED --> checked="checked"<!-- ENDIF --> /><!-- ELSE --><input type="radio" name="vote_id[]" id="vote_{poll_option.POLL_OPTION_ID}" value="{poll_option.POLL_OPTION_ID}"<!-- IF poll_option.POLL_OPTION_VOTED --> checked="checked"<!-- ENDIF --> /><!-- ENDIF --></dd><!-- ENDIF -->
+					<!-- IF S_CAN_VOTE --><dd class="poll_option_select width-auto"><!-- IF S_IS_MULTI_CHOICE --><input type="checkbox" name="vote_id[]" id="vote_{poll_option.POLL_OPTION_ID}" value="{poll_option.POLL_OPTION_ID}"<!-- IF poll_option.POLL_OPTION_VOTED --> checked="checked"<!-- ENDIF --> /><!-- ELSE --><input type="radio" name="vote_id[]" id="vote_{poll_option.POLL_OPTION_ID}" value="{poll_option.POLL_OPTION_ID}"<!-- IF poll_option.POLL_OPTION_VOTED --> checked="checked"<!-- ENDIF --> /><!-- ENDIF --></dd><!-- ENDIF -->
 					<dd class="resultbar<!-- IF not S_DISPLAY_RESULTS --> hidden<!-- ENDIF -->"><div class="<!-- IF poll_option.POLL_OPTION_PCT < 20 -->pollbar1<!-- ELSEIF poll_option.POLL_OPTION_PCT < 40 -->pollbar2<!-- ELSEIF poll_option.POLL_OPTION_PCT < 60 -->pollbar3<!-- ELSEIF poll_option.POLL_OPTION_PCT < 80 -->pollbar4<!-- ELSE -->pollbar5<!-- ENDIF -->" style="width:{poll_option.POLL_OPTION_PERCENT_REL};">{poll_option.POLL_OPTION_RESULT}</div></dd>
 					<dd class="poll_option_percent<!-- IF not S_DISPLAY_RESULTS --> hidden<!-- ENDIF -->"><!-- IF poll_option.POLL_OPTION_RESULT == 0 -->{L_NO_VOTES}<!-- ELSE -->{poll_option.POLL_OPTION_PERCENT}<!-- ENDIF --></dd>
 				</dl>
@@ -105,14 +105,14 @@ <h2 class="poll-title"><!-- EVENT viewtopic_body_poll_question_prepend -->{POLL_
 				</dl>
 
 			<!-- IF S_CAN_VOTE -->
-				<dl style="border-top: none;" class="poll_vote">
+				<dl class="poll_vote border-top-none">
 					<dt>&nbsp;</dt>
 					<dd class="resultbar"><input type="submit" name="update" value="{L_SUBMIT_VOTE}" class="button1 button button-form" /></dd>
 				</dl>
 			<!-- ENDIF -->
 
 			<!-- IF not S_DISPLAY_RESULTS -->
-				<dl style="border-top: none;" class="poll_view_results">
+				<dl class="poll_view_results border-top-none">
 					<dt>&nbsp;</dt>
 					<dd class="resultbar"><a href="{U_VIEW_RESULTS}">{L_VIEW_RESULTS}</a></dd>
 				</dl>

phpBB/styles/modernite/theme/base-styles.css

@@ -29,13 +29,6 @@ h1, h2, h3, h4, h5, h6 {
     line-height: 1.2;
 }
 
-h1 { font-size: 2rem; }
-h2 { font-size: 1.75rem; }
-h3 { font-size: 1.5rem; }
-h4 { font-size: 1.25rem; }
-h5 { font-size: 1.125rem; }
-h6 { font-size: 1rem; }
-
 p {
     margin: 0 0 1rem 0;
 }
@@ -224,6 +217,48 @@ img {
     margin-right: 0.5rem;
 }
 
+/* Utility classes to replace inline styles */
+.width-auto { width: auto; }
+.width-5 { width: 5%; }
+.width-10 { width: 10%; }
+.width-15 { width: 15%; }
+.width-20 { width: 20%; }
+.width-25 { width: 25%; }
+.width-50 { width: 50%; }
+.width-75 { width: 75%; }
+.width-100 { width: 100%; }
+
+.display-none { display: none; }
+.display-block { display: block; }
+.display-inline { display: inline; }
+.display-inline-block { display: inline-block; }
+
+.overflow-visible { overflow: visible; }
+.overflow-hidden { overflow: hidden; }
+
+.margin-top-3 { margin-top: 3px; }
+.margin-top-5 { margin-top: 5px; }
+.margin-top-10 { margin-top: 10px; }
+
+.border-top-none { border-top: none; }
+.border-bottom-none { border-bottom: none; }
+
+.text-center { text-align: center; }
+.text-left { text-align: left; }
+.text-right { text-align: right; }
+
+.white-space-nowrap { white-space: nowrap; }
+
+.float-left { float: left; }
+.float-right { float: right; }
+
+.clear-left { clear: left; }
+.clear-right { clear: right; }
+.clear-both { clear: both; }
+
+/* BBCode utility classes */
+.bbcode-underline { text-decoration: underline; }
+
 /* Responsive utilities */
 @media (max-width: 768px) {
     .wrap {

phpBB/styles/modernite/theme/modern-colors.css

@@ -50,6 +50,37 @@
   --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
   --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
   --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+
+  /* Spacing scale */
+  --space-1: 0.25rem;
+  --space-2: 0.5rem;
+  --space-3: 0.75rem;
+  --space-4: 1rem;
+  --space-5: 1.25rem;
+  --space-6: 1.5rem;
+  --space-8: 2rem;
+  --space-10: 2.5rem;
+  --space-12: 3rem;
+  --space-16: 4rem;
+
+  /* Border radius scale */
+  --radius-none: 0;
+  --radius-sm: 4px;
+  --radius: 6px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-xl: 16px;
+  --radius-2xl: 24px;
+  --radius-3xl: 32px;
+  --radius-full: 9999px;
+  --radius-circle: 50%;
+
+  /* Transitions */
+  --transition-fast: 0.15s ease;
+  --transition-normal: 0.2s ease;
+  --transition-slow: 0.3s ease;
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
 }
 
 /* Body and background updates */