{{ phrase('back') }}
@@ -820,6 +310,7 @@
{$ldJsonHtml|raw}
+
diff --git a/templates/public/account_preferences_popup.html b/templates/public/account_preferences_popup.html
new file mode 100644
index 0000000..7c62b19
--- /dev/null
+++ b/templates/public/account_preferences_popup.html
@@ -0,0 +1,53 @@
+
+
+
+ Theme
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/templates/public/conversations_popup.html b/templates/public/conversations_popup.html
new file mode 100644
index 0000000..5d7a424
--- /dev/null
+++ b/templates/public/conversations_popup.html
@@ -0,0 +1,33 @@
+
+
+
+
+
+
+
+
+
+
+ No new conversations.
+
+
+
+
Edited for RHPZ
+
+
\ No newline at end of file
diff --git a/templates/public/delete_account.html b/templates/public/delete_account.html
new file mode 100644
index 0000000..ef8f56f
--- /dev/null
+++ b/templates/public/delete_account.html
@@ -0,0 +1,36 @@
+
{{ phrase('delete_account') }}
+
+
+
+
+
+
+ If you want to delete your Romhack Plaza account, please follow these steps:
+
+ - You must send an email via the contact form using the same email address associated with your account.
+ - The subject line of your request must be clear; for example: “Delete account”
+ - The body of your email must include the following code(s), depending on what you wish to do.
+
+ Without these details, your request cannot be processed.
+
+ Codes
+
+
+
+ Delete my account
+ Delete all my data
+
+
+ {$deleteAccountCode}
+ {$deleteAllDataCode}
+
+
+
+ - If you only want to delete your account, just send the first code. Your data will still be on the site, but it will be anonymized.
+ - If you also want to automatically delete all your data, send both codes.
+
+
+
+
\ No newline at end of file
diff --git a/templates/public/extra.less b/templates/public/extra.less
index cf5ceaf..cfdded9 100644
--- a/templates/public/extra.less
+++ b/templates/public/extra.less
@@ -37,6 +37,8 @@ ul {
list-style-type: square;
}
+[x-cloak] {display: none !important;}
+
/* File: resources/css/base/variables.css */
:root {
@@ -69,6 +71,35 @@ ul {
/* Menu settings */
--menu-size: 260px;
--menu-user-avatar-bg: #555;
+
+ /* Gap */
+ --gap: 15px;
+}
+
+.\$light-mode {
+
+ /* RHPZ color */
+ --rhpz-orange: #ff7300;
+ --rhpz-orange-hover: #e56700;
+
+ /* Background colors */
+ --bg: #f0f0f0;
+ --bg2: #ffffff;
+ --bg3: #e8e8e8;
+ --bg4: #dcdcdc;
+
+ /* Text */
+ --text: #454545;
+ --text2: #737373;
+ --text3: #111111;
+
+ /* Elements */
+ --border: #d0d0d0;
+ --error: #e57373;
+ --info: #1976d2;
+ --success: #81c784;
+ --success2: #388e3c;
+
}
@@ -104,6 +135,7 @@ ul {
background-color: var(--bg2);
border: 1px solid var(--border);
display: flex;
+ min-width: 0;
flex-direction: column;
transition: transform 0.2s, border-color 0.2s;
cursor: pointer;
@@ -116,6 +148,7 @@ ul {
.\$entry-cover-wrapper {
position: relative;
aspect-ratio: 4/3;
+ min-width: 0;
background-color: var(--bg);
border-bottom: 1px solid var(--border);
display: flex;
@@ -155,6 +188,7 @@ ul {
font-size: 1.1rem;
margin-bottom: 5px;
line-height: 1.3;
+ word-wrap: break-word;
}
.\$entry-card-author {
@@ -173,6 +207,86 @@ ul {
}
}
+@media (max-width: 1024px) {
+ .\$stats-grid {
+ grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+ gap: 15px;
+ margin-bottom: 25px;
+ }
+
+ .\$stat-card {
+ padding: 15px;
+ gap: 12px;
+ }
+}
+
+@media (max-width: 768px) {
+ .\$stats-grid {
+ grid-template-columns: repeat(2, 1fr);
+ gap: 12px;
+ margin-bottom: 20px;
+ }
+
+ .\$stat-card {
+ padding: 12px;
+ gap: 10px;
+ font-size: 0.9rem;
+ }
+
+ .\$stat-card i {
+ width: 28px;
+ height: 28px;
+ }
+
+ .\$entry-card-info {
+ padding: 12px;
+ }
+
+ .\$entry-card-title {
+ font-size: 0.95rem;
+ margin-bottom: 4px;
+ }
+
+ .\$entry-card-author {
+ font-size: 0.8rem;
+ margin-bottom: 8px;
+ }
+
+ .\$entry-card-meta {
+ font-size: 0.75rem;
+ }
+}
+
+@media (max-width: 600px) {
+ .\$stats-grid {
+ grid-template-columns: 1fr;
+ gap: 10px;
+ margin-bottom: 15px;
+ }
+
+ .\$stat-card {
+ padding: 10px;
+ flex-direction: row;
+ }
+
+ .\$entry-card {
+ &:hover {
+ transform: none;
+ }
+ }
+
+ .\$entry-card-title {
+ font-size: 0.9rem;
+ }
+
+ .\$entry-badge {
+ top: 5px;
+ right: 5px;
+ padding: 3px 6px;
+ font-size: 0.65rem;
+ }
+}
+
/* File: resources/css/components/common.css */
/* BUTTONS */
@@ -241,6 +355,13 @@ ul {
border-bottom: 1px solid var(--border);
padding-bottom: 10px;
}
+.\$block-success {
+ background-color: var(--success);
+ border: 1px solid var(--success);
+ color: var(--text);
+ padding: 20px;
+ margin-bottom: 20px;
+}
.\$block-error {
background-color: var(--error);
border: 1px solid var(--error);
@@ -274,6 +395,11 @@ ul {
color: var(--text);
border-color: var(--success2);
}
+.\$badge.yellow, .\$badge.utilities {
+ background-color: #fdeb0f;
+ color: #000;
+ border-color: #fdeb0f;
+}
.\$topbar-badge {
position: absolute;
@@ -312,6 +438,7 @@ ul {
.\$breadcrumb {
margin-bottom: 15px;
+ flex-shrink: 0;
}
/* PAGE */
@@ -321,6 +448,7 @@ ul {
font-weight: 300;
margin-bottom: 20px;
color: var(--text);
+ flex-shrink: 0;
}
/* TEXTS */
@@ -355,6 +483,97 @@ ul {
animation: spin 1s infinite linear;
}
+.\$search-button {
+ background: none;
+ border: none;
+ cursor: pointer;
+}
+
+@media (max-width: 768px) {
+ .\$btn {
+ padding: 7px 12px;
+ font-size: 0.85rem;
+ gap: 6px;
+ }
+
+ .\$block {
+ padding: 15px;
+ margin-bottom: 15px;
+ }
+
+ .\$block-header {
+ font-size: 1.05rem;
+ margin-bottom: 12px;
+ padding-bottom: 8px;
+ }
+
+ .\$page-title {
+ font-size: 1.5rem;
+ margin-bottom: 15px;
+ }
+
+ .\$content-title {
+ margin: 20px 0 12px 0;
+ padding-left: 8px;
+ }
+
+ .\$quote {
+ padding: 12px;
+ margin-top: 20px;
+ font-size: 0.95rem;
+ }
+
+ .\$whisper {
+ margin-bottom: 12px;
+ font-size: 0.9rem;
+ }
+
+ .\$breadcrumb {
+ font-size: 0.85rem;
+ }
+}
+
+@media (max-width: 600px) {
+ .\$btn {
+ padding: 6px 10px;
+ font-size: 0.8rem;
+ gap: 4px;
+ justify-content: center;
+ }
+
+ .\$btn.primary, .\$btn.danger, .\$btn.success {
+ width: 100%;
+ }
+
+ .\$block {
+ padding: 12px;
+ margin-bottom: 12px;
+ }
+
+ .\$block-header {
+ font-size: 0.95rem;
+ margin-bottom: 10px;
+ padding-bottom: 6px;
+ }
+
+ .\$page-title {
+ font-size: 1.2rem;
+ margin-bottom: 12px;
+ }
+
+ .\$badge {
+ padding: 2px 6px;
+ font-size: 0.7rem;
+ }
+
+ .\$topbar-badge {
+ min-width: 16px;
+ height: 16px;
+ padding: 0 3px;
+ font-size: 0.6rem;
+ }
+}
+
/* File: resources/css/components/database.css */
.\$filter-bar {
@@ -618,6 +837,10 @@ ul {
flex-direction: column;
}
+ .\$database-wrapper {
+ flex-direction: column;
+ }
+
.\$database-filters {
width: 100%;
display: grid;
@@ -634,19 +857,63 @@ ul {
}
}
+@media (max-width: 768px) {
+ .\$database-search {
+ gap: 8px;
+ margin-bottom: 15px;
+ flex-wrap: wrap;
+ }
+
+ .\$database-wrapper {
+ flex-direction: column;
+ gap: 15px;
+ }
+
+ .\$database-filters {
+ width: 100%;
+ grid-template-columns: 1fr;
+ order: -1;
+ margin-bottom: 10px;
+ }
+
+ .\$database-filter-group {
+ padding: 12px 0;
+ }
+
+ .\$grid-entries {
+ grid-template-columns: repeat(3, 1fr);
+ gap: 15px;
+ }
+}
+
@media (max-width: 600px) {
+ .\$database-search {
+ flex-direction: column;
+ }
+
.\$database-filters {
grid-template-columns: 1fr;
}
.\$grid-entries {
grid-template-columns: repeat(2, 1fr);
+ gap: 12px;
+ }
+
+ .\$database-filter-group {
+ padding: 10px 0;
}
}
@media (max-width: 420px) {
.\$grid-entries {
grid-template-columns: 1fr;
+ gap: 10px;
+ }
+
+ .\$database-search input {
+ font-size: 0.85rem;
+ padding: 6px 8px;
}
}
@@ -750,6 +1017,269 @@ ul {
+/* File: resources/css/components/drafts.css */
+.\$drafts-count {
+ font-size: 0.85rem;
+ color: var(--text2);
+ margin-bottom: 15px;
+ padding-bottom: 10px;
+ border-bottom: 1px solid var(--border);
+}
+
+.\$drafts-empty {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: 15px;
+ padding: 80px 20px;
+ background-color: var(--bg2);
+ border: 1px dashed var(--border);
+ text-align: center;
+ color: var(--text2);
+
+ h3 {
+ font-size: 1.1rem;
+ color: var(--text);
+ margin: 0;
+ }
+
+ p {
+ font-size: 0.9rem;
+ margin: 0;
+ }
+
+}
+
+.\$drafts-list {
+ display: flex;
+ flex-direction: column;
+ gap: 15px;
+}
+
+.\$drafts-item {
+ display: flex;
+ gap: 20px;
+ background-color: var(--bg2);
+ border: 1px solid var(--border);
+ border-left: 3px solid var(--rhpz-orange);
+ padding: 20px;
+ transition: border-color 0.15s;
+
+ &:hover {
+ border-color: var(--rhpz-orange);
+ }
+}
+
+.\$drafts-cover {
+ width: 80px;
+ height: 80px;
+ flex-shrink: 0;
+ background-color: var(--bg);
+ border: 1px solid var(--border);
+ overflow: hidden;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ img {
+ width: 100%;
+ height: 100%;
+ object-fit: contain;
+ }
+}
+
+.\$drafts-cover-placeholder {
+ color: var(--border);
+}
+
+.\$drafts-info {
+ flex: 1;
+ min-width: 0;
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+}
+
+.\$drafts-top {
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-start;
+ gap: 15px;
+}
+
+.\$drafts-title {
+ font-size: 1rem;
+ font-weight: 600;
+ color: var(--text);
+ margin-bottom: 6px;
+ white-space: normal;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.\$drafts-meta {
+ display: flex;
+ gap: 6px;
+ flex-wrap: wrap;
+}
+
+.\$drafts-dates {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ text-align: right;
+ font-size: 0.78rem;
+ color: var(--text2);
+ flex-shrink: 0;
+
+ span {
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+ gap: 5px;
+ }
+}
+
+.\$drafts-progress {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+}
+
+.\$drafts-progress-bar {
+ flex: 1;
+ height: 4px;
+ background-color: var(--bg4);
+ overflow: hidden;
+}
+
+.\$drafts-progress-fill {
+ height: 100%;
+ background-color: var(--rhpz-orange);
+ transition: width 0.3s ease;
+
+ .\$complete {
+ background-color: var(--success);
+ }
+}
+.\$drafts-progress-label {
+ font-size: 0.75rem;
+ color: var(--text2);
+ white-space: nowrap;
+}
+.\$drafts-actions {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ justify-content: center;
+ flex-shrink: 0;
+ .\$btn {
+ white-space: nowrap;
+ }
+}
+
+@media (max-width: 768px) {
+ .\$drafts-count {
+ font-size: 0.8rem;
+ margin-bottom: 12px;
+ padding-bottom: 8px;
+ }
+
+ .\$drafts-item {
+ gap: 15px;
+ padding: 15px;
+ }
+
+ .\$drafts-cover {
+ width: 70px;
+ height: 70px;
+ }
+
+ .\$drafts-top {
+ gap: 12px;
+ }
+
+ .\$drafts-title {
+ font-size: 0.95rem;
+ }
+
+ .\$drafts-meta {
+ font-size: 0.8rem;
+ }
+
+ .\$drafts-actions {
+ gap: 6px;
+ }
+
+ .\$drafts-actions .\$btn {
+ padding: 6px 10px;
+ font-size: 0.8rem;
+ }
+}
+
+@media (max-width: 600px) {
+ .\$drafts-empty {
+ padding: 60px 15px;
+ gap: 12px;
+ }
+
+ .\$drafts-empty h3 {
+ font-size: 1rem;
+ }
+
+ .\$drafts-empty p {
+ font-size: 0.85rem;
+ }
+
+ .\$drafts-item {
+ flex-direction: column;
+ gap: 12px;
+ padding: 12px;
+ }
+
+ .\$drafts-cover {
+ width: 100%;
+ height: 150px;
+ }
+
+ .\$drafts-top {
+ flex-direction: column;
+ gap: 10px;
+ }
+
+ .\$drafts-title {
+ font-size: 0.9rem;
+ }
+
+ .\$drafts-meta {
+ font-size: 0.75rem;
+ }
+
+ .\$drafts-progress {
+ flex-direction: column;
+ gap: 8px;
+ }
+
+ .\$drafts-progress-bar {
+ width: 100%;
+ }
+
+ .\$drafts-actions {
+ flex-direction: row;
+ gap: 6px;
+ flex-wrap: wrap;
+ }
+
+ .\$drafts-actions .\$btn {
+ flex: 1;
+ min-width: 80px;
+ padding: 5px 8px;
+ font-size: 0.75rem;
+ }
+}
+
+
/* File: resources/css/components/easymde.css */
.\$EasyMDEContainer {
display: flex;
@@ -1223,6 +1753,50 @@ ul {
flex-direction: column;
gap: 5px;
}
+.\$gallery-item {
+ position: relative;
+ cursor: grab;
+ transition: opacity 0.2s, transform 0.15s;
+ user-select: none;
+}
+
+.gallery-item:active { cursor: grabbing; }
+
+.\$gallery-item--dragging {
+ opacity: 0.4;
+ transform: scale(0.97);
+}
+
+.\$gallery-drag-handle {
+ position: absolute;
+ top: 4px;
+ left: 4px;
+ z-index: 10;
+ background-color: rgba(0,0,0,0.6);
+ color: #fff;
+ padding: 3px 4px;
+ display: flex;
+ align-items: center;
+ cursor: grab;
+ opacity: 0;
+ transition: opacity 0.15s;
+}
+
+.gallery-item:hover .gallery-drag-handle { opacity: 1; }
+
+.\$gallery-order-badge {
+ position: absolute;
+ bottom: 4px;
+ left: 4px;
+ z-index: 10;
+ background-color: rgba(0,0,0,0.7);
+ color: #fff;
+ font-size: 0.7rem;
+ font-weight: 700;
+ padding: 2px 6px;
+ min-width: 20px;
+ text-align: center;
+}
.\$authors-list {
display: grid;
grid-template-columns: repeat(4, 1fr);
@@ -1333,6 +1907,210 @@ ul {
color: var(--text2);
white-space: nowrap;
}
+.\$upload-item-actions {
+ display: flex;
+ flex-direction: row;
+ gap: 15px;
+}
+
+@media (max-width: 600px) {
+ .\$upload-item-actions {
+ flex-direction: column;
+ gap: 8px;
+ }
+
+ .\$upload-item-actions .\$btn {
+ width: 100%;
+ }
+}
+.file-state-icon { width: 18px; height: 18px; }
+.file-state-icon--public { color: var(--success); }
+.file-state-icon--private { color: var(--text2); }
+.file-state-icon--archived { color: var(--error); }
+
+.upload-item-state { display: flex; align-items: center; gap: 8px; }
+
+.author-search { position: relative; }
+
+.\$author-search-input {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ background-color: var(--bg);
+ border: 1px solid var(--border);
+ padding: 8px 12px;
+}
+
+.\$author-search-input .\$form-input {
+ border: none;
+ padding: 0;
+ background: none;
+ flex: 1;
+}
+
+.\$author-search-selected {
+ display: flex;
+ align-items: center;
+ gap: 5px;
+ color: var(--success);
+ font-size: 0.85rem;
+ white-space: nowrap;
+}
+
+.\$author-search-dropdown {
+ position: absolute;
+ top: 100%;
+ left: 0;
+ right: 0;
+ background-color: var(--bg2);
+ border: 1px solid var(--border);
+ border-top: none;
+ z-index: 100;
+ max-height: 200px;
+ overflow-y: auto;
+}
+
+.\$author-search-item {
+ display: flex;
+ align-items: center;
+ gap: 9px;
+ width: 100%;
+ padding: 9px 12px;
+ background: none;
+ border: none;
+ color: var(--text);
+ font-size: 0.88rem;
+ cursor: pointer;
+ text-align: left;
+ font-family: var(--typography);
+ transition: background-color 0.1s;
+}
+
+.author-search-item:hover { background-color: var(--bg3); }
+
+.\$game-selector-mode {
+ display: flex;
+ gap: 0;
+ margin-bottom: 15px;
+ border: 1px solid var(--border);
+}
+
+.\$game-selector-mode-btn {
+ display: flex;
+ align-items: center;
+ gap: 7px;
+ padding: 8px 14px;
+ background: none;
+ border: none;
+ border-right: 1px solid var(--border);
+ color: var(--text2);
+ font-size: 0.85rem;
+ cursor: pointer;
+ font-family: var(--font-family);
+ transition: background-color 0.1s, color 0.1s;
+}
+
+.\$game-selector-mode-btn:last-child {
+ border-right: none;
+}
+
+.\$game-selector-mode-btn:hover {
+ background-color: var(--bg3);
+ color: var(--text);
+}
+
+.\$game-selector-mode-btn.active {
+ background-color: var(--bg3);
+ color: var(--rhpz-orange);
+ border-bottom: 2px solid var(--rhpz-orange);
+}
+
+.\$game-selector-platform-only {
+ grid-column: span 1;
+}
+
+@media (max-width: 768px) {
+ .\$form-group.level {
+ padding: 20px;
+ margin-bottom: 25px;
+ }
+
+ .\$form-group-title {
+ font-size: 1rem;
+ margin-bottom: 15px;
+ padding-bottom: 8px;
+ }
+
+ .\$form-group label, .\$form-label {
+ margin-bottom: 6px;
+ font-size: 0.9rem;
+ }
+
+ .\$form-input, .\$form-select, .\$form-textarea, .\$form-field {
+ padding: 8px 10px;
+ font-size: 0.9rem;
+ }
+
+ .\$form-textarea {
+ min-height: 100px;
+ }
+
+ .\$game-selector-mode {
+ flex-direction: column;
+ gap: 0;
+ }
+
+ .\$game-selector-mode-btn {
+ padding: 10px 12px;
+ border-right: none;
+ border-bottom: 1px solid var(--border);
+ }
+
+ .\$game-selector-mode-btn:last-child {
+ border-bottom: none;
+ }
+
+ .\$submit, .\$submit-level, .\$main-image-grid {
+ flex-direction: column;
+ }
+
+ .\$grid-hashes {
+ grid-template-columns: 1fr;
+ }
+
+ .\$hash-first {
+ display: none;
+ }
+}
+
+@media (max-width: 600px) {
+ .\$form-group {
+ margin-bottom: 15px;
+ }
+
+ .\$form-group.level {
+ padding: 15px;
+ margin-bottom: 20px;
+ }
+
+ .\$form-group-title {
+ font-size: 0.95rem;
+ margin-bottom: 12px;
+ }
+
+ .\$form-group label, .\$form-label {
+ font-size: 0.85rem;
+ }
+
+ .\$form-input, .\$form-select, .\$form-textarea, .\$form-field {
+ padding: 6px 8px;
+ font-size: 0.85rem;
+ }
+
+ .\$form-error-text {
+ font-size: 0.8rem;
+ }
+}
/* File: resources/css/components/grid.css */
@@ -1377,11 +2155,12 @@ ul {
/* File: resources/css/components/hovercard.css */
.\$hovercard-overlay {
- position: absolute;
- z-index: 2000;
+ position: fixed;
+ z-index: 3500;
background-color: var(--bg2);
border: 1px solid var(--border);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
+ pointer-events: auto;
}
.\$hovercard-overlay-loading {
@@ -1496,6 +2275,38 @@ ul {
font-size: 0.82rem;
}
+@media (max-width: 768px) {
+ .\$hovercard {
+ width: 260px;
+ }
+
+ .\$hovercard-actions {
+ gap: 6px;
+ }
+
+ .\$hovercard-actions .\$btn {
+ font-size: 0.75rem;
+ padding: 6px 8px;
+ }
+}
+
+@media (max-width: 600px) {
+ .\$hovercard {
+ width: calc(100vw - 40px);
+ max-width: 280px;
+ }
+
+ .\$hovercard-actions {
+ flex-direction: column;
+ gap: 6px;
+ }
+
+ .\$hovercard-actions .\$btn {
+ width: 100%;
+ justify-content: center;
+ }
+}
+
/* File: resources/css/components/modal.css */
.\$modal-overlay {
@@ -1548,13 +2359,690 @@ ul {
}
-.\$modal-content {
+.\$modal-content, .\$modal-body {
padding: 20px;
}
+/* File: resources/css/components/modcp.css */
+.\$modcp-wrapper {
+ display: flex;
+ gap: 0;
+ align-items: flex-start;
+ min-height: calc(100vh - 60px);
+}
+
+.\$modcp-sidebar {
+ width: 220px;
+ flex-shrink: 0;
+ background-color: var(--bg2);
+ border: 1px solid var(--border);
+ position: sticky;
+ top: 0;
+ align-self: flex-start;
+ margin-right: 15px;
+}
+
+.\$modcp-sidebar-header {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ padding: 14px 16px;
+ font-weight: 600;
+ font-size: 0.88rem;
+ color: var(--text);
+ border-bottom: 1px solid var(--border);
+ background-color: var(--bg3);
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+}
+
+
+.modcp-nav { padding: 8px 0; }
+
+.modcp-nav-group { margin-bottom: 4px; }
+
+.\$modcp-nav-label {
+ display: block;
+ padding: 8px 16px 4px;
+ font-size: 0.7rem;
+ font-weight: 600;
+ text-transform: uppercase;
+ letter-spacing: 0.8px;
+ color: var(--text2);
+}
+
+.\$modcp-nav-item {
+ display: flex;
+ align-items: center;
+ gap: 9px;
+ padding: 8px 16px;
+ font-size: 0.88rem;
+ color: var(--text);
+ text-decoration: none;
+ border-left: 3px solid transparent;
+ transition: background-color 0.1s, border-color 0.1s;
+
+ &:hover {
+ background-color: var(--bg3);
+ text-decoration: none;
+ }
+ .\$active {
+ background-color: var(--bg3);
+ border-left-color: var(--rhpz-orange);
+ color: var(--text);
+ font-weight: 600;
+ }
+}
+
+.\$modcp-nav-badge {
+ margin-left: auto;
+ background-color: var(--rhpz-orange);
+ color: #111;
+ font-size: 0.65rem;
+ font-weight: 700;
+ min-width: 18px;
+ height: 18px;
+ border-radius: 9px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 0 5px;
+}
+
+.\$modcp-content {
+ flex: 1;
+ min-width: 0;
+ background-color: var(--bg2);
+ border: 1px solid var(--border);
+ padding: 25px;
+}
+
+.\$modcp-page-title {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ font-size: 1.3rem;
+ font-weight: 600;
+ color: var(--text);
+ margin-bottom: 25px;
+ padding-bottom: 15px;
+ border-bottom: 1px solid var(--border);
+}
+
+.\$modcp-count {
+ margin-left: auto;
+ font-size: 0.85rem;
+ font-weight: normal;
+ color: var(--text2);
+}
+
+.\$modcp-section-title {
+ font-size: 0.78rem;
+ font-weight: 600;
+ text-transform: uppercase;
+ letter-spacing: 0.7px;
+ color: var(--text2);
+ margin-bottom: 12px;
+}
+
+.\$modcp-stats {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+ gap: 12px;
+ margin-bottom: 25px;
+}
+
+.\$modcp-stat-card {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ padding: 16px;
+ background-color: var(--bg3);
+ border: 1px solid var(--border);
+ border-left: 3px solid var(--border);
+ text-decoration: none;
+ transition: border-color 0.15s, background-color 0.15s;
+ color: var(--text);
+
+ &:hover {
+ background-color: var(--bg4);
+ text-decoration: none;
+ }
+}
+
+.modcp-stat-card--orange { border-left-color: var(--rhpz-orange); }
+.modcp-stat-card--danger { border-left-color: var(--error); }
+.modcp-stat-card--muted { cursor: default; }
+
+.modcp-stat-icon { color: var(--text2); }
+.modcp-stat-card--orange .modcp-stat-icon { color: var(--rhpz-orange); }
+.modcp-stat-card--danger .modcp-stat-icon { color: var(--error); }
+
+.modcp-stat-info { display: flex; flex-direction: column; }
+.modcp-stat-value { font-size: 1.4rem; font-weight: 700; color: var(--text); line-height: 1; }
+.modcp-stat-label { font-size: 0.75rem; color: var(--text2); margin-top: 3px; }
+
+.\$modcp-quick-actions {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 8px;
+ margin-bottom: 25px;
+}
+
+.\$modcp-quick-btn {
+ display: inline-flex;
+ align-items: center;
+ gap: 7px;
+ padding: 8px 14px;
+ background-color: var(--bg3);
+ border: 1px solid var(--border);
+ color: var(--text);
+ font-size: 0.85rem;
+ text-decoration: none;
+ transition: background-color 0.1s, border-color 0.1s;
+
+ &:hover {
+ background-color: var(--bg4);
+ border-color: var(--rhpz-orange);
+ text-decoration: none;
+ }
+}
+
+.modcp-list { display: flex; flex-direction: column; }
+
+.\$modcp-list-item {
+ display: flex;
+ align-items: center;
+ gap: 15px;
+ padding: 12px 15px;
+ border-bottom: 1px solid var(--border);
+ transition: background-color 0.1s;
+}
+
+.modcp-list-item:last-child { border-bottom: none; }
+.modcp-list-item:hover { background-color: var(--bg3); }
+.modcp-list-item--deleted { opacity: 0.8; }
+
+.\$modcp-list-item-cover {
+ width: 44px;
+ height: 44px;
+ flex-shrink: 0;
+ background-color: var(--bg);
+ border: 1px solid var(--border);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ overflow: hidden;
+ color: var(--border);
+}
+
+.\$modcp-list-item-cover img {
+ width: 100%;
+ height: 100%;
+ object-fit: contain;
+}
+
+.\$modcp-list-item-info {
+ flex: 1;
+ min-width: 0;
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+}
+
+.\$modcp-list-item-title {
+ font-size: 0.92rem;
+ font-weight: 600;
+ color: var(--text);
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.\$modcp-list-item-meta {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ font-size: 0.78rem;
+ color: var(--text2);
+}
+
+.\$modcp-list-item-actions {
+ display: flex;
+ gap: 6px;
+ flex-shrink: 0;
+}
+
+.\$modcp-list-item-edit {
+ display: flex;
+ gap: 6px;
+ flex: 1;
+ align-items: center;
+}
+
+.\$modcp-list-item-edit .\$form-input {
+ flex: 1;
+ padding: 5px 10px;
+ font-size: 0.88rem;
+}
+
+.\$modcp-list-see-all {
+ display: block;
+ text-align: center;
+ padding: 10px;
+ font-size: 0.85rem;
+ color: var(--rhpz-orange);
+ border-top: 1px solid var(--border);
+ text-decoration: none;
+}
+
+.\$modcp-add-form {
+ background-color: var(--bg3);
+ border: 1px solid var(--border);
+ padding: 15px;
+ margin-bottom: 20px;
+}
+
+.\$modcp-add-form-inner {
+ display: flex;
+ gap: 8px;
+ align-items: center;
+}
+
+.modcp-add-form-inner .form-input { flex: 1; }
+
+.\$modcp-empty {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 12px;
+ padding: 50px 20px;
+ color: var(--text2);
+ text-align: center;
+}
+
+.\$mod-alert {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ padding: 10px 15px;
+ margin-bottom: 20px;
+ font-size: 0.88rem;
+ border: 1px solid;
+}
+
+.\$mod-alert--success {
+ background-color: rgba(129, 199, 132, 0.08);
+ border-color: rgba(129, 199, 132, 0.3);
+ color: var(--success);
+}
+
+.\$modcp-list-item-edit--game {
+ flex-wrap: wrap;
+ gap: 6px;
+}
+
+.modcp-list-item-edit--game .form-input { min-width: 180px; flex: 2; }
+.modcp-list-item-edit--game .form-select { flex: 1; min-width: 120px; }
+
+.\$log-filters {
+ margin-bottom: 16px;
+ background-color: var(--bg3);
+ border: 1px solid var(--border);
+}
+
+.\$log-filters-main {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ padding: 12px 14px;
+ flex-wrap: wrap;
+}
+
+.\$log-search-wrap {
+ flex: 1;
+ min-width: 200px;
+ position: relative;
+ display: flex;
+ align-items: center;
+}
+
+.\$log-search-wrap i {
+ position: absolute;
+ left: 10px;
+ color: var(--text2);
+ pointer-events: none;
+}
+
+.log-search-wrap .form-input { padding-left: 30px; }
+
+.log-select { min-width: 130px; }
+
+.\$log-filter-dot {
+ width: 6px;
+ height: 6px;
+ border-radius: 50%;
+ background-color: var(--rhpz-orange);
+ flex-shrink: 0;
+}
+
+.\$log-filters-extra {
+ border-top: 1px solid var(--border);
+ padding: 12px 14px;
+}
+
+.\$log-filters-extra-inner {
+ display: flex;
+ align-items: flex-end;
+ gap: 12px;
+ flex-wrap: wrap;
+}
+
+.\$log-filter-field {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+}
+
+.\$log-filter-label {
+ font-size: 0.7rem;
+ font-weight: 600;
+ text-transform: uppercase;
+ letter-spacing: 0.6px;
+ color: var(--text2);
+}
+
+.log-transition-enter { transition: all .15s ease; }
+.log-transition-leave { transition: all .1s ease; }
+
+.\$log-results-bar {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ font-size: 0.78rem;
+ color: var(--text2);
+ margin-bottom: 10px;
+ padding: 0 2px;
+}
+
+.log-loading { opacity: 0.5; }
+
+.log-item { align-items: flex-start; padding: 11px 14px; }
+.log-item--open { background-color: var(--bg3); }
+
+.\$log-event-dot {
+ width: 26px;
+ height: 26px;
+ flex-shrink: 0;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-top: 2px;
+ border: 1px solid var(--border);
+ background-color: var(--bg3);
+ color: var(--text2);
+}
+
+.\$log-event-dot--created {
+ background-color: rgba(129,199,132,.1);
+ border-color: rgba(129,199,132,.35);
+ color: var(--success);
+}
+
+.\$log-event-dot--updated {
+ background-color: rgba(255,115,0,.1);
+ border-color: rgba(255,115,0,.35);
+ color: var(--rhpz-orange);
+}
+
+.\$log-event-dot--deleted {
+ background-color: rgba(229,115,115,.1);
+ border-color: rgba(229,115,115,.35);
+ color: var(--error);
+}
+
+.\$log-channel-badge {
+ display: inline-flex;
+ align-items: center;
+ font-size: 0.68rem;
+ font-weight: 700;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+ padding: 1px 6px;
+ background-color: rgba(255,255,255,.05);
+ border: 1px solid var(--border);
+ color: var(--text2);
+}
+
+.log-id { color: var(--text2); font-size: 0.78rem; }
+.log-sep { color: var(--border); }
+
+.\$log-item-right {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ flex-shrink: 0;
+ margin-left: auto;
+}
+
+.\$log-timestamp {
+ font-size: 0.75rem;
+ color: var(--text2);
+ white-space: nowrap;
+}
+
+.log-expand-btn { padding: 4px 7px; }
+
+.\$log-properties {
+ background-color: var(--bg);
+ border-bottom: 1px solid var(--border);
+ padding: 14px 14px 14px 54px;
+}
+
+.\$log-diff-label {
+ font-size: 0.68rem;
+ font-weight: 700;
+ text-transform: uppercase;
+ letter-spacing: 0.7px;
+ color: var(--text2);
+ margin-bottom: 8px;
+}
+
+.\$log-diff {
+ width: 100%;
+ border-collapse: collapse;
+ font-size: 0.8rem;
+}
+
+.\$log-diff th {
+ text-align: left;
+ padding: 5px 10px;
+ font-size: 0.68rem;
+ font-weight: 700;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+ color: var(--text2);
+ border-bottom: 1px solid var(--border);
+}
+
+.\$log-diff td {
+ padding: 5px 10px;
+ border-bottom: 1px solid var(--border);
+ vertical-align: top;
+ max-width: 300px;
+ overflow-wrap: break-word;
+}
+
+.log-diff tr:last-child td { border-bottom: none; }
+
+.\$log-diff-key {
+ font-size: 0.78rem;
+ font-weight: 600;
+ color: var(--text);
+ width: 160px;
+ white-space: nowrap;
+}
+
+.log-diff-old-head { color: var(--error) !important; }
+.log-diff-new-head { color: var(--success) !important; }
+
+.\$log-diff-old {
+ color: var(--error);
+ background-color: rgba(229,115,115,.05);
+}
+
+.\$log-diff-new {
+ color: var(--success);
+ background-color: rgba(129,199,132,.05);
+}
+
+.\$log-raw {
+ font-family: monospace;
+ font-size: 0.78rem;
+ color: var(--text2);
+ background-color: var(--bg2);
+ border: 1px solid var(--border);
+ padding: 10px 12px;
+ overflow-x: auto;
+ white-space: pre-wrap;
+ word-break: break-all;
+}
+
+.\$log-pagination {
+ padding: 14px 0 4px;
+ border-top: 1px solid var(--border);
+}
+
+@media (max-width: 1024px) {
+ .\$modcp-wrapper {
+ min-height: auto;
+ }
+
+ .\$modcp-sidebar {
+ width: 200px;
+ margin-right: 10px;
+ }
+
+ .\$modcp-content {
+ padding: 20px;
+ }
+
+ .\$modcp-page-title {
+ font-size: 1.15rem;
+ }
+}
+
+@media (max-width: 768px) {
+ .\$modcp-wrapper {
+ flex-direction: column;
+ gap: 0;
+ }
+
+ .\$modcp-sidebar {
+ width: 100%;
+ flex-shrink: 1;
+ position: relative;
+ top: auto;
+ align-self: auto;
+ margin-right: 0;
+ margin-bottom: 15px;
+ border: 1px solid var(--border);
+ max-height: 300px;
+ overflow-y: auto;
+ }
+
+ .\$modcp-sidebar-header {
+ padding: 12px 14px;
+ font-size: 0.8rem;
+ }
+
+ .\$modcp-nav-label {
+ padding: 6px 14px 3px;
+ font-size: 0.65rem;
+ }
+
+ .\$modcp-nav-item {
+ padding: 6px 14px;
+ font-size: 0.8rem;
+ gap: 8px;
+ }
+
+ .\$modcp-content {
+ padding: 15px;
+ }
+
+ .\$modcp-page-title {
+ font-size: 1rem;
+ margin-bottom: 12px;
+ }
+
+ .\$modcp-page-actions {
+ flex-direction: row;
+ gap: 8px;
+ }
+
+ .\$modcp-table {
+ font-size: 0.85rem;
+ }
+
+ .\$modcp-table th, .\$modcp-table td {
+ padding: 8px;
+ }
+
+ .\$modcp-table tbody tr {
+ height: auto;
+ }
+}
+
+@media (max-width: 600px) {
+ .\$modcp-sidebar {
+ max-height: 200px;
+ }
+
+ .\$modcp-sidebar-header {
+ padding: 10px 12px;
+ font-size: 0.75rem;
+ }
+
+ .\$modcp-nav-item {
+ padding: 5px 12px;
+ font-size: 0.75rem;
+ }
+
+ .\$modcp-content {
+ padding: 12px;
+ }
+
+ .\$modcp-page-title {
+ font-size: 0.95rem;
+ }
+
+ .\$modcp-table {
+ font-size: 0.8rem;
+ overflow-x: auto;
+ display: block;
+ }
+
+ .\$modcp-table th, .\$modcp-table td {
+ padding: 6px;
+ }
+
+ .\$log-diff-key {
+ width: auto;
+ white-space: normal;
+ }
+
+ .\$log-raw {
+ font-size: 0.7rem;
+ padding: 8px 10px;
+ }
+}
+
+
/* File: resources/css/components/notifications.css */
-.\$notifications {
+.\$notifications, .\$conversations {
position: absolute;
top: calc(100% + 8px);
right: 0;
@@ -1577,6 +3065,28 @@ ul {
}
}
+@media (max-width: 768px) {
+ .\$notifications, .\$conversations {
+ position: fixed;
+ width: calc(100% - 30px);
+ max-width: 340px;
+ right: 15px;
+ top: auto;
+ bottom: 15px;
+ max-height: calc(100vh - 130px);
+ z-index: 3000 !important;
+ }
+}
+
+@media (max-width: 600px) {
+ .\$notifications, .\$conversations {
+ width: calc(100% - 20px);
+ right: 10px;
+ bottom: 10px;
+ max-width: 100%;
+ }
+}
+
@keyframes dropdown-enter {
from { opacity: 0; transform: translateY(-6px); }
from { opacity: 0; transform: translateY(-6px); }
@@ -1695,6 +3205,1157 @@ ul {
}
+/* File: resources/css/components/queue.css */
+.\$queue-empty {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: 15px;
+ padding: 80px 20px;
+ color: var(--text2);
+ font-size: 0.95rem;
+}
+
+.\$queue-item {
+ background-color: var(--bg2);
+ border: 1px solid var(--border);
+ border-left-width: 4px;
+ margin-bottom: 20px;
+ padding: 20px;
+}
+
+.\$queue-item--pending {
+ border-left-color: var(--rhpz-orange);
+}
+.\$queue-item--rejected {
+ position: relative;
+ overflow: hidden;
+ border-left-color: var(--error);
+
+ &::after {
+ content: '';
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ height: 2px;
+ background-color: var(--error);
+ width: var(--reject-progress, 100%);
+ opacity: 0.5;
+ transition: width 0.3s;
+ }
+}
+
+.\$queue-item-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-start;
+ gap: 15px;
+ margin-bottom: 20px;
+}
+
+.\$queue-item-title {
+ font-size: 1.15rem;
+ font-weight: 600;
+ color: var(--text);
+ margin-bottom: 6px;
+}
+
+.\$queue-item-meta {
+ font-size: 0.85rem;
+ color: var(--text2);
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ flex-wrap: wrap;
+}
+
+.\$queue-item-actions-header {
+ display: flex;
+ gap: 8px;
+ flex-shrink: 0;
+}
+
+.\$timeline-container {
+ padding: 15px 20px;
+ background-color: var(--bg);
+ border: 1px solid var(--border);
+ margin-bottom: 20px;
+}
+
+.\$timeline {
+ display: flex;
+ justify-content: space-between;
+ position: relative;
+
+ &::before {
+ content: '';
+ position: absolute;
+ top: 15px;
+ left: 30px;
+ right: 30px;
+ height: 2px;
+ background-color: var(--border);
+ z-index: 0;
+ }
+
+}
+
+.\$timeline-step {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ position: relative;
+ z-index: 1;
+ width: 100px;
+}
+
+.\$timeline-dot {
+ width: 32px;
+ height: 32px;
+ border-radius: 50%;
+ background-color: var(--bg);
+ border: 2px solid var(--border);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: var(--text2);
+ margin-bottom: 10px;
+ transition: all 0.2s;
+}
+
+.\$timeline-step--active .\$timeline-dot {
+ border-color: var(--rhpz-orange);
+ background-color: var(--rhpz-orange);
+ color: #111;
+}
+
+.\$timeline-step--validated .\$timeline-dot {
+ border-color: var(--success);
+ background-color: var(--success);
+ color: #111;
+}
+
+.\$timeline-step--rejected .\$timeline-dot {
+ border-color: var(--error);
+ background-color: var(--error);
+ color: #fff;
+}
+
+.\$timeline-label {
+ font-size: 0.78rem;
+ text-align: center;
+ color: var(--text2);
+ font-weight: 500;
+}
+
+.timeline-step--active .timeline-label { color: var(--rhpz-orange); font-weight: 600; }
+.timeline-step--validated .timeline-label { color: var(--success); }
+.timeline-step--rejected .timeline-label { color: var(--error); }
+
+.\$queue-reject-reason {
+ display: flex;
+ gap: 10px;
+ align-items: flex-start;
+ padding: 12px 15px;
+ background-color: rgba(229, 115, 115, 0.08);
+ border-left: 2px solid var(--error);
+ color: var(--text);
+ font-size: 0.88rem;
+ margin-bottom: 15px;
+ line-height: 1.5;
+}
+
+.\$queue-mod-zone {
+ border-top: 1px solid var(--border);
+ padding-top: 15px;
+ margin-top: 5px;
+ display: flex;
+ flex-direction: column;
+ gap: 15px;
+}
+
+.\$queue-mod-separator {
+ border-top: 1px solid var(--border);
+}
+
+.\$queue-mod-actions {
+ display: flex;
+ gap: 8px;
+ justify-content: flex-end;
+ margin-top: 10px;
+}
+
+.\$queue-reject-form {
+ margin-top: 12px;
+ padding: 15px;
+ background-color: var(--bg3);
+ border: 1px solid var(--border);
+}
+
+@media (max-width: 768px) {
+ .\$queue-item {
+ padding: 15px;
+ margin-bottom: 15px;
+ }
+
+ .\$queue-item-header {
+ flex-direction: column;
+ gap: 12px;
+ }
+
+ .\$queue-item-title {
+ font-size: 1rem;
+ }
+
+ .\$queue-item-meta {
+ font-size: 0.8rem;
+ }
+
+ .\$queue-item-actions-header {
+ gap: 6px;
+ flex-wrap: wrap;
+ width: 100%;
+ }
+
+ .\$timeline {
+ font-size: 0.85rem;
+ }
+
+ .\$timeline-container {
+ padding: 12px 15px;
+ }
+
+ .\$queue-mod-actions {
+ flex-direction: column;
+ gap: 6px;
+ }
+}
+
+@media (max-width: 600px) {
+ .\$queue-empty {
+ padding: 60px 15px;
+ font-size: 0.9rem;
+ }
+
+ .\$queue-item {
+ padding: 12px;
+ border-left-width: 3px;
+ }
+
+ .\$queue-item-title {
+ font-size: 0.95rem;
+ }
+
+ .\$queue-item-meta {
+ font-size: 0.75rem;
+ }
+
+ .\$queue-item-actions-header {
+ width: 100%;
+ }
+
+ .\$timeline {
+ font-size: 0.8rem;
+ }
+
+ .\$timeline-container {
+ padding: 10px 12px;
+ }
+
+ .\$queue-mod-actions {
+ flex-direction: column;
+ }
+
+ .\$queue-mod-actions .\$btn {
+ width: 100%;
+ }
+}
+
+
+
+/* File: resources/css/components/settings.css */
+.\$settings-dropdown {
+ position: absolute;
+ top: calc(100% + 8px);
+ right: 0;
+ width: 240px;
+ background-color: var(--bg2);
+ border: 1px solid var(--border);
+ box-shadow: 0 8px 24px rgba(0,0,0,0.5);
+ z-index: 2000;
+}
+
+@media (max-width: 768px) {
+ .\$settings-dropdown {
+ position: fixed;
+ width: calc(100% - 30px);
+ max-width: 240px;
+ right: 15px;
+ top: auto;
+ bottom: 15px;
+ max-height: calc(100vh - 130px);
+ overflow-y: auto;
+ z-index: 3000 !important;
+ }
+}
+
+@media (max-width: 600px) {
+ .\$settings-dropdown {
+ width: calc(100% - 20px);
+ right: 10px;
+ bottom: 10px;
+ max-width: 100%;
+ }
+}
+
+.\$settings-header {
+ padding: 12px 16px;
+ border-bottom: 1px solid var(--border);
+ background-color: var(--bg3);
+ font-weight: 600;
+ font-size: 0.9rem;
+ color: var(--text);
+}
+
+.\$settings-section {
+ padding: 12px 16px;
+}
+
+.\$settings-section-title {
+ display: flex;
+ align-items: center;
+ gap: 7px;
+ font-size: 0.78rem;
+ font-weight: 600;
+ text-transform: uppercase;
+ letter-spacing: 0.7px;
+ color: var(--text2);
+ margin-bottom: 10px;
+}
+
+.\$settings-separator {
+ border-top: 1px solid var(--border);
+}
+
+.\$settings-themes {
+ display: flex;
+ gap: 8px;
+ flex-wrap: wrap;
+}
+
+.\$settings-theme-btn {
+ width: 28px;
+ height: 28px;
+ border-radius: 50%;
+ border: 2px solid transparent;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: var(--text);
+ transition: transform 0.15s, border-color 0.15s;
+ padding: 0;
+
+ &:hover {
+ transform: scale(1.15);
+ }
+
+ .\$active {
+ border-color: var(--text);
+ transform: scale(1.1);
+ }
+}
+
+.\$settings-theme-toggle {
+ width: 100%;
+ background-color: var(--bg3);
+ border: 1px solid var(--border);
+ color: var(--text);
+ padding: 8px 12px;
+ cursor: pointer;
+ font-family: var(--typography);
+ font-size: 0.88rem;
+ transition: background-color 0.1s;
+ text-align: left;
+
+ &:hover {
+ background-color: var(--bg4);
+ }
+}
+
+.\$settings-theme-toggle-inner {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
+
+.\$settings-theme-toggle-badge {
+ margin-left: auto;
+ background-color: var(--rhpz-orange);
+ color: #111;
+ font-size: 0.65rem;
+ font-weight: 700;
+ padding: 2px 6px;
+}
+
+.\$settings-perpage {
+ display: flex;
+ gap: 6px;
+}
+
+.\$settings-perpage-btn {
+ flex: 1;
+ padding: 6px 4px;
+ background-color: var(--bg3);
+ border: 1px solid var(--border);
+ color: var(--text2);
+ font-size: 0.85rem;
+ cursor: pointer;
+ font-family: var(--typography);
+ transition: all 0.1s;
+
+ &:hover {
+ background-color: var(--bg4);
+ color: var(--text);
+ }
+
+ .\$active {
+ background-color: var(--rhpz-orange);
+ border-color: var(--rhpz-orange);
+ color: var(--text3);
+ font-weight: 600;
+ }
+}
+
+.\$settings-link {
+ display: flex;
+ align-items: center;
+ gap: 9px;
+ padding: 8px 10px;
+ color: var(--text);
+ text-decoration: none;
+ font-size: 0.88rem;
+ transition: background-color 0.1s;
+ border: 1px solid transparent;
+
+ &:hover {
+ background-color: var(--bg3);
+ border-color: var(--border);
+ text-decoration: none;
+ }
+}
+
+.\$settings-link--danger {
+ color: var(--error);
+
+ &:hover {
+ background-color: rgba(229, 115, 115, 0.08);
+ border-color: rgba(229, 115, 115, 0.3);
+ }
+}
+
+
+/* File: resources/css/components/tools.css */
+.\$patcher-container {
+ background-color: var(--bg2);
+ border: 1px solid var(--border);
+ padding: 25px;
+ margin-bottom: 20px;
+}
+
+.\$patcher-grid {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 20px;
+}
+
+@media (max-width: 768px) {
+ .\$patcher-grid {
+ grid-template-columns: 1fr;
+ }
+
+ .\$patcher-container {
+ padding: 20px;
+ }
+
+ .\$patcher-dropzone {
+ padding: 40px 15px;
+ gap: 12px;
+ }
+
+ .\$embed-patch-box {
+ padding: 20px;
+ height: auto;
+ }
+
+ .\$embed-patch-box-icon {
+ gap: 12px;
+ }
+
+ .\$embed-patch-box-icon-block {
+ width: 40px;
+ height: 40px;
+ }
+}
+
+@media (max-width: 600px) {
+ .\$patcher-container {
+ padding: 15px;
+ margin-bottom: 15px;
+ }
+
+ .\$patcher-grid {
+ gap: 15px;
+ }
+
+ .\$patcher-dropzone {
+ padding: 30px 12px;
+ gap: 10px;
+ font-size: 0.9rem;
+ }
+
+ .\$patcher-status-box {
+ margin-top: 15px;
+ padding: 12px;
+ font-size: 0.9rem;
+ }
+
+ .\$embed-patch-box {
+ padding: 15px;
+ gap: 12px;
+ }
+
+ .\$btn:disabled {
+ padding: 6px 8px;
+ font-size: 0.8rem;
+ }
+}
+
+.\$patcher-dropzone {
+ border: 2px dashed var(--border);
+ background-color: var(--bg3);
+ padding: 55px 20px;
+ text-align: center;
+ cursor: pointer;
+ transition: all 0.2s ease;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 15px;
+}
+
+.\$patcher-dropzone:hover, .\$patcher-dropzone.dragover {
+ border-color: var(--rhpz-orange);
+ background-color: var(--bg4);
+}
+
+.\$patcher-dropzone.has-file {
+ border-color: var(--success);
+ background-color: rgba(129, 199, 132, 0.02);
+}
+
+.\$patcher-status-box {
+ margin-top: 20px;
+ padding: 15px;
+ border: 1px solid var(--border);
+ background-color: var(--bg3);
+ font-size: 0.95rem;
+ line-height: 1.4;
+}
+
+.\$btn:disabled {
+ opacity: 0.4;
+ cursor: not-allowed;
+ background-color: var(--bg3);
+ border-color: var(--border);
+ color: var(--text2);
+}
+
+.\$embed-patch-box {
+ border: 1px solid var(--border);
+ background-color: var(--bg3);
+ padding: 25px;
+ height: 85%;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ gap: 15px;
+}
+.\$embed-patch-box-icon {
+ display: flex;
+ align-items: center;
+ gap: 15px;
+}
+.\$embed-patch-box-icon-block {
+ width: 48px;
+ height: 48px;
+ background-color: var(--bg2);
+ border: 1px solid var(--border);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+
+/* File: resources/css/layout/activity.css */
+
+.\$activity-hero-excerpt {
+ font-size: 0.9rem;
+ color: rgba(255,255,255,0.75);
+ margin-bottom: 12px;
+ line-height: 1.5;
+ max-width: 600px;
+}
+
+.\$activity-tl-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 20px;
+ padding-bottom: 15px;
+ border-bottom: 1px solid var(--border);
+ gap: 15px;
+ flex-wrap: wrap;
+}
+
+.\$activity-tl-title {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ font-size: 1.15rem;
+ font-weight: 600;
+ color: var(--text);
+ margin: 0;
+}
+
+.\$activity-tl-filters {
+ display: flex;
+ gap: 5px;
+ flex-wrap: wrap;
+}
+
+.\$activity-tl-filter {
+ display: inline-flex;
+ align-items: center;
+ gap: 5px;
+ padding: 5px 12px;
+ background: none;
+ border: 1px solid var(--border);
+ color: var(--text2);
+ font-size: 0.8rem;
+ cursor: pointer;
+ font-family: var(--typography);
+ transition: all 0.1s;
+}
+
+.activity-tl-filter:hover { background-color: var(--bg3); color: var(--text); }
+.\$activity-tl-filter.active {
+ background-color: var(--bg3);
+ border-color: var(--rhpz-orange);
+ color: var(--rhpz-orange);
+}
+
+.\$activity-day-sep {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ padding-left: 54px;
+ margin: 20px 0 12px;
+}
+
+.\$activity-day-label {
+ font-size: 0.72rem;
+ font-weight: 600;
+ color: var(--text2);
+ text-transform: uppercase;
+ letter-spacing: 0.8px;
+ white-space: nowrap;
+}
+
+.\$activity-day-line {
+ flex: 1;
+ height: 1px;
+ background-color: var(--border);
+}
+
+.\$activity-tl-item {
+ display: flex;
+ gap: 0;
+ margin-bottom: 2px;
+}
+
+.\$activity-tl-left {
+ width: 54px;
+ flex-shrink: 0;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding-top: 12px;
+}
+
+.\$activity-tl-dot {
+ width: 32px;
+ height: 32px;
+ border-radius: 50%;
+ border: 1px solid var(--border);
+ background-color: var(--bg2);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-shrink: 0;
+ z-index: 1;
+}
+
+.\$activity-tl-dot--entry {
+ background-color: rgba(255,115,0,0.1);
+ border-color: rgba(255,115,0,0.4);
+ color: var(--rhpz-orange);
+}
+
+.\$activity-tl-dot--news, .\$activity-tl-dot--review {
+ background-color: rgba(129,199,132,0.1);
+ border-color: rgba(129,199,132,0.4);
+ color: var(--success);
+}
+
+.\$activity-tl-dot--message, .\$activity-tl-dot--thread, .\$activity-tl-dot--club {
+ background-color: rgba(25,118,210,0.1);
+ border-color: rgba(25,118,210,0.4);
+ color: var(--info);
+}
+
+.\$activity-tl-line {
+ width: 1px;
+ flex: 1;
+ background-color: var(--border);
+ margin-top: 4px;
+ min-height: 16px;
+}
+
+.activity-tl-item:last-of-type .activity-tl-line { display: none; }
+
+.\$activity-tl-card {
+ flex: 1;
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ background-color: var(--bg2);
+ border: 1px solid var(--border);
+ padding: 10px 14px;
+ margin-bottom: 8px;
+ text-decoration: none;
+ transition: border-color 0.15s, background-color 0.1s;
+ min-width: 0;
+}
+
+.\$activity-tl-card:hover {
+ border-color: var(--rhpz-orange);
+ background-color: var(--bg3);
+ text-decoration: none;
+}
+
+.\$activity-tl-thumb {
+ width: 52px;
+ height: 52px;
+ flex-shrink: 0;
+ overflow: hidden;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background-color: var(--bg3);
+ border: 1px solid var(--border);
+}
+
+.\$activity-tl-thumb img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+}
+
+.\$activity-tl-body {
+ flex: 1;
+ min-width: 0;
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+}
+
+.\$activity-tl-badge {
+ display: inline-flex;
+ align-items: center;
+ gap: 4px;
+ font-size: 0.68rem;
+ font-weight: 700;
+ text-transform: uppercase;
+ letter-spacing: 0.6px;
+ padding: 2px 7px;
+ width: fit-content;
+}
+
+.\$activity-tl-badge--entry {
+ background-color: rgba(255,115,0,0.1);
+ color: var(--rhpz-orange);
+ border: 1px solid rgba(255,115,0,0.25);
+}
+
+.\$activity-tl-badge--news, .\$activity-tl-badge--review {
+ background-color: rgba(129,199,132,0.1);
+ color: var(--success);
+ border: 1px solid rgba(129,199,132,0.25);
+}
+
+.\$activity-tl-badge--message, .\$activity-tl-badge--thread, .\$activity-tl-dot--club {
+ background-color: rgba(25,118,210,0.1);
+ color: var(--info);
+ border: 1px solid rgba(25,118,210,0.25);
+}
+
+.\$activity-tl-card-title {
+ font-size: 0.92rem;
+ font-weight: 600;
+ color: var(--text);
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ line-height: 1.3;
+}
+
+.\$activity-tl-card-description {
+ font-size: 0.8rem;
+ color: var(--text2);
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ line-height: 1.3;
+}
+
+.\$activity-tl-meta {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ font-size: 0.75rem;
+ color: var(--text2);
+ flex-wrap: wrap;
+}
+
+.\$activity-tl-meta span {
+ display: flex;
+ align-items: center;
+ gap: 3px;
+}
+
+.\$activity-tl-time {
+ font-size: 0.72rem;
+ color: var(--text2);
+ white-space: nowrap;
+ flex-shrink: 0;
+ align-self: center;
+}
+
+.\$activity-tl-empty {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 12px;
+ padding: 60px;
+ color: var(--text2);
+ text-align: center;
+ padding-left: 54px;
+}
+
+@media (max-width: 600px) {
+ .activity-tl-header { flex-direction: column; align-items: flex-start; }
+ .activity-tl-thumb { display: none; }
+ .activity-day-sep { padding-left: 44px; }
+ .activity-tl-left { width: 44px; }
+
+ .\$activity-tl-date {
+ font-size: 0.75rem;
+ }
+
+ .\$activity-tl-content-title {
+ font-size: 0.9rem;
+ }
+}
+
+@media (max-width: 768px) {
+ .\$activity-timeline {
+ padding-left: 50px;
+ }
+
+ .\$activity-tl-left {
+ width: 40px;
+ }
+
+ .\$activity-tl-header {
+ gap: 10px;
+ }
+
+ .\$activity-tl-date {
+ font-size: 0.8rem;
+ }
+}
+
+.\$home-section {
+ margin-bottom: 30px;
+}
+
+.\$home-section-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding-bottom: 12px;
+ border-bottom: 1px solid var(--border);
+ margin-bottom: 14px;
+}
+
+.\$home-section-title {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ font-size: 1.05rem;
+ font-weight: 600;
+ color: var(--text);
+ margin: 0;
+}
+
+.\$home-section-more {
+ display: inline-flex;
+ align-items: center;
+ gap: 4px;
+ font-size: 0.75rem;
+ color: var(--text2);
+ border: 1px solid var(--border);
+ padding: 4px 10px;
+ text-decoration: none;
+ transition: color 0.1s, border-color 0.1s;
+}
+
+.\$home-section-more:hover {
+ color: var(--rhpz-orange);
+ border-color: var(--rhpz-orange);
+}
+
+.\$news-strip {
+ display: grid;
+ grid-template-columns: repeat(5, 1fr);
+ gap: 10px;
+}
+
+.\$news-strip-card {
+ display: flex;
+ flex-direction: column;
+ background-color: var(--bg2);
+ border: 1px solid var(--border);
+ text-decoration: none;
+ overflow: hidden;
+ transition: border-color 0.15s;
+}
+
+.news-strip-card:hover { border-color: var(--rhpz-orange); text-decoration: none; }
+
+.\$news-strip-cover {
+ height: 110px;
+ background-color: var(--bg3);
+ background-size: cover;
+ background-position: center;
+ position: relative;
+ flex-shrink: 0;
+}
+
+.\$news-strip-date {
+ position: absolute;
+ bottom: 6px;
+ left: 8px;
+ font-size: 0.68rem;
+ font-weight: 700;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+ color: rgba(255,255,255,0.8);
+ background: rgba(0,0,0,0.55);
+ padding: 2px 6px;
+ border: 1px solid rgba(255,255,255,0.07);
+}
+
+.\$news-strip-body {
+ padding: 10px 12px;
+ display: flex;
+ flex-direction: column;
+ gap: 5px;
+ flex: 1;
+}
+
+.\$news-strip-badge {
+ font-size: 0.65rem;
+ font-weight: 700;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+ color: var(--success);
+ background: rgba(129,199,132,0.1);
+ border: 1px solid rgba(129,199,132,0.25);
+ padding: 1px 6px;
+ width: fit-content;
+}
+
+.\$news-strip-title {
+ font-size: 0.85rem;
+ font-weight: 600;
+ color: var(--text);
+ line-height: 1.35;
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+ margin: 0;
+}
+
+.\$news-strip-meta {
+ font-size: 0.72rem;
+ color: var(--text2);
+ margin-top: auto;
+}
+
+.\$featured-entries-grid {
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+ gap: 10px;
+}
+
+.\$featured-entry-card {
+ display: flex;
+ flex-direction: column;
+ background-color: var(--bg2);
+ border: 1px solid var(--border);
+ text-decoration: none;
+ overflow: hidden;
+ transition: border-color 0.15s;
+}
+
+.featured-entry-card:hover { border-color: var(--rhpz-orange); text-decoration: none; }
+
+.\$featured-entry-cover {
+ height: 80px;
+ background-color: var(--bg3);
+ position: relative;
+ flex-shrink: 0;
+ overflow: hidden;
+}
+
+.\$featured-entry-cover img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ opacity: 0.85;
+}
+
+.\$featured-entry-star {
+ position: absolute;
+ top: 6px;
+ right: 6px;
+ font-size: 0.65rem;
+ font-weight: 700;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+ background: rgba(255,115,0,0.9);
+ color: #111;
+ padding: 2px 6px;
+ border: 1px solid rgba(255,115,0,0.5);
+ display: flex;
+ align-items: center;
+ gap: 3px;
+}
+
+.\$featured-entry-body {
+ padding: 10px 12px;
+ display: flex;
+ flex-direction: column;
+ gap: 5px;
+ flex: 1;
+}
+
+.\$featured-entry-platform {
+ font-size: 0.65rem;
+ font-weight: 700;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+ color: var(--rhpz-orange);
+ background: rgba(255,115,0,0.1);
+ border: 1px solid rgba(255,115,0,0.25);
+ padding: 1px 6px;
+ width: fit-content;
+}
+
+.\$featured-entry-title {
+ font-size: 0.88rem;
+ font-weight: 600;
+ color: var(--text);
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.\$featured-entry-meta {
+ font-size: 0.72rem;
+ color: var(--text2);
+ margin-top: auto;
+}
+
+@media (max-width: 900px) {
+ .news-strip { grid-template-columns: repeat(3, 1fr); }
+ .featured-entries-grid { grid-template-columns: repeat(2, 1fr); }
+}
+
+@media (max-width: 768px) {
+ .\$news-strip {
+ grid-template-columns: repeat(2, 1fr);
+ gap: 15px;
+ }
+
+ .\$featured-entries-grid {
+ grid-template-columns: 1fr;
+ gap: 15px;
+ }
+
+ .\$home-section {
+ margin-bottom: 20px;
+ }
+
+ .\$news-strip-cover {
+ height: 100px;
+ }
+
+ .\$featured-entry-title {
+ font-size: 0.95rem;
+ }
+}
+
+@media (max-width: 600px) {
+ .news-strip { grid-template-columns: 1fr; }
+ .featured-entries-grid { grid-template-columns: 1fr; }
+ .news-strip-cover { height: 80px; }
+
+ .\$news-strip-item {
+ padding: 10px;
+ }
+
+ .\$news-strip-title {
+ font-size: 0.85rem;
+ }
+
+ .\$featured-entry-title {
+ font-size: 0.9rem;
+ }
+
+ .\$featured-entry-meta {
+ font-size: 0.7rem;
+ }
+
+ .\$home-section-title {
+ font-size: 0.95rem;
+ }
+}
+
+
/* File: resources/css/layout/content.css */
#main-wrapper {
flex-grow: 1;
@@ -1721,24 +4382,6 @@ ul {
cursor: pointer;
}
- .\$search-bar {
- display: flex;
- align-items: center;
- background-color: var(--bg);
- border: 1px solid var(--border);
- border-radius: 2px;
- padding: 5px 10px;
- width: 300px;
- input {
- background: none;
- border: none;
- color: var(--text);
- outline: none;
- margin-left: 8px;
- width: 100%;
- }
- }
-
.\$topbar-actions {
display: flex;
gap: 8px;
@@ -1751,6 +4394,173 @@ ul {
}
+.\$search-bar {
+ display: flex;
+ align-items: center;
+ background-color: var(--bg);
+ border: 1px solid var(--border);
+ border-radius: 2px;
+ padding: 5px 10px;
+ width: 300px;
+ input {
+ background: none;
+ border: none;
+ color: var(--text);
+ outline: none;
+ margin-left: 8px;
+ width: 100%;
+ }
+}
+
+.\$topbar-more-container {
+ display: none;
+}
+
+.\$topbar-more-menu {
+ position: fixed;
+ top: 60px;
+ right: 0;
+ background-color: var(--bg2);
+ border: 1px solid var(--border);
+ border-top: none;
+ border-right: none;
+ z-index: 2000;
+ min-width: 180px;
+ max-height: calc(100vh - 60px);
+ overflow-y: auto;
+}
+
+.\$topbar-more-item {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ padding: 10px 12px;
+ color: var(--text2);
+ text-decoration: none;
+ font-size: 0.9rem;
+ border-bottom: 1px solid var(--border);
+ transition: all 0.15s;
+
+ &:last-child {
+ border-bottom: none;
+ }
+
+ &:hover {
+ background-color: var(--bg3);
+ color: var(--text);
+ }
+
+ i {
+ width: 16px;
+ height: 16px;
+ flex-shrink: 0;
+ }
+
+ span {
+ flex-grow: 1;
+ text-align: left;
+ }
+}
+
+@media (min-width: 769px) {
+ .\$topbar-more-container {
+ display: none !important;
+ }
+
+ .topbar-admin-btn,
+ .\$topbar-mod-btn {
+ display: flex !important;
+ }
+}
+@media (max-width: 768px) {
+ .\$topbar-more-container {
+ display: block;
+ }
+
+ .topbar-admin-btn,
+ .\$topbar-mod-btn {
+ display: none !important;
+ }
+
+ #topbar {
+ padding: 0 10px;
+ }
+
+ .\$search-bar {
+ display: none !important;
+ }
+
+ .\$topbar-actions {
+ gap: 8px !important;
+ }
+
+ .\$topbar-actions .\$btn {
+ padding: 8px 6px;
+ font-size: 0.85rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .\$topbar-actions i {
+ width: 16px !important;
+ height: 16px !important;
+ }
+
+ .\$topbar-badge {
+ font-size: 0.65rem;
+ width: 18px;
+ height: 18px;
+ }
+}
+
+@media (max-width: 600px) {
+ #topbar {
+ padding: 0 8px;
+ }
+
+ .\$topbar-actions {
+ gap: 8px !important;
+ }
+
+ .\$topbar-actions .\$btn {
+ padding: 6px 4px;
+ font-size: 0.75rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .\$topbar-actions i {
+ width: 14px !important;
+ height: 14px !important;
+ }
+
+ .\$topbar-badge {
+ font-size: 0.6rem;
+ width: 16px;
+ height: 16px;
+ }
+}
+
+.\$search-scope-select {
+ background-color: var(--bg2);
+ border: none;
+ border-right: 1px solid var(--border);
+ color: var(--text2);
+ font-size: 0.8rem;
+ padding: 8px 10px;
+ cursor: pointer;
+ outline: none;
+ appearance: none;
+ transition: color 0.15s;
+}
+
+.search-scope-select:hover,
+.\$search-scope-select:focus {
+ color: var(--text);
+}
+
#content {
flex-grow: 1;
padding: 30px;
@@ -1761,7 +4571,7 @@ ul {
/* File: resources/css/layout/entry.css */
-#entry-container {
+#entry-container, #comments-section, #reviews-section {
background-color: var(--bg2);
border: 1px solid var(--border);
display: flex;
@@ -1777,8 +4587,8 @@ ul {
gap: 30px;
.\$entry-cover {
- width: 200px;
- height: 280px;
+ width: 220px;
+ height: 220px;
background-color: var(--bg);
border: 1px solid var(--border);
display: flex;
@@ -1792,7 +4602,8 @@ ul {
img {
width: 100%;
height: 100%;
- object-fit: cover;
+ object-fit: contain;
+ padding: 8px;
}
}
@@ -1869,6 +4680,7 @@ ul {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 15px;
+ margin-bottom: 30px;
}
.\$entry-gallery-item {
@@ -1879,10 +4691,81 @@ ul {
align-items: center;
justify-content: center;
cursor: pointer;
+ overflow: hidden;
transition: border-color 0.2s;
&:hover {
border-color: var(--rhpz-orange);
+
+ img {
+ transform: scale(1.05);
+ }
+ }
+
+ img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ transition: transform 0.3s ease;
+ }
+ }
+}
+
+.\$gallery-modal {
+ position: fixed;
+ z-index: 3000;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0, 0, 0, 0.85);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ .\$gallery-modal-content {
+ max-width: 90%;
+ max-height: 90%;
+ position: relative;
+
+ img {
+ max-width: 100%;
+ max-height: 90vh;
+ object-fit: contain;
+ border: 2px solid var(--border);
+ background-color: var(--bg);
+ box-shadow: 0 10px 25px rgba(0,0,0,0.5);
+ }
+ }
+
+ .\$gallery-modal-close {
+ position: absolute;
+ top: 20px;
+ right: 30px;
+ color: #fff;
+ font-size: 40px;
+ font-weight: bold;
+ cursor: pointer;
+ user-select: none;
+
+ &:hover {
+ color: var(--rhpz-orange);
+ }
+ }
+
+ .\$gallery-modal-video {
+ width: 90%;
+ max-width: 960px;
+ aspect-ratio: 16/9;
+ box-shadow: 0 10px 30px rgba(0,0,0,0.6);
+ border: 1px solid var(--border);
+ background-color: #000;
+
+ iframe {
+ width: 100%;
+ height: 100%;
+ border: none;
+ display: block;
}
}
}
@@ -1892,6 +4775,395 @@ ul {
color: var( --text2 );
}
+.\$comment-block {
+ display: flex;
+ gap: 16px;
+ padding: 20px 0;
+ border-bottom: 1px solid var(--border);
+
+ &:last-child {
+ border-bottom: none;
+ }
+
+ .\$comment-avatar {
+ flex-shrink: 0;
+ width: 48px;
+ height: 48px;
+ border-radius: 50%;
+ overflow: hidden;
+ background-color: var(--bg4);
+ border: 1px solid var(--border);
+
+ img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ display: block;
+ }
+ }
+
+ .\$comment-content {
+ flex: 1;
+ min-width: 0;
+
+ .\$comment-meta {
+ font-size: 0.88rem;
+ color: var(--text2);
+ margin-bottom: 6px;
+ display: flex;
+ align-items: center;
+ flex-wrap: wrap;
+ gap: 8px;
+
+ .\$comment-author {
+ font-weight: 600;
+ color: var(--text);
+ text-decoration: none;
+ transition: color 0.2s;
+
+ &:hover {
+ color: var(--rhpz-orange);
+ }
+ }
+
+ .\$comment-date {
+ color: var(--text2);
+ }
+
+ .\$comment-separator {
+ color: var(--border);
+ user-select: none;
+ }
+ }
+
+ .\$comment-body {
+ font-size: 0.95rem;
+ color: var(--text);
+ line-height: 1.5;
+ word-wrap: break-word;
+ }
+ }
+}
+
+.\$comments-empty {
+ text-align: center;
+ padding: 40px 20px;
+ color: var(--text2);
+ font-style: italic;
+ background-color: var(--bg);
+ border: 1px dashed var(--border);
+}
+
+.\$entry-video-section {
+ margin-bottom: 30px;
+}
+
+.\$video-thumbnail-wrapper {
+ position: relative;
+ width: 100%;
+ max-width: 500px;
+ aspect-ratio: 16/9;
+ background-color: #000;
+ border: 1px solid var(--border);
+ cursor: pointer;
+ overflow: hidden;
+ border-radius: 4px;
+
+ img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ opacity: 0.8;
+ transition: transform 0.3s ease, opacity 0.3s ease;
+ }
+
+ .\$play-trigger {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 65px;
+ height: 65px;
+ background-color: rgba(0, 0, 0, 0.7);
+ border: 2px solid #fff;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: #fff;
+ font-size: 1.5rem;
+ transition: background-color 0.2s, transform 0.2s ease-out;
+
+ i { margin-left: 4px; }
+ }
+
+ &:hover {
+ img {
+ transform: scale(1.03);
+ opacity: 1;
+ }
+ .\$play-trigger {
+ background-color: var(--rhpz-orange);
+ border-color: var(--rhpz-orange);
+ transform: translate(-50%, -50%) scale(1.1);
+ box-shadow: 0 0 15px rgba(255, 115, 0, 0.5);
+ }
+ }
+}
+
+.\$entry-submission-byline {
+ font-size: 0.85rem;
+ color: var(--text2);
+ margin-bottom: 20px;
+ display: flex;
+ align-items: center;
+ gap: 15px;
+
+ i {
+ vertical-align: middle;
+ margin-right: 4px;
+ }
+}
+
+.\$markdown-body {
+ p {
+ margin-bottom: 10px;
+ &:last-child { margin-bottom: 0; }
+ }
+
+ a {
+ color: var(--rhpz-orange);
+ &:hover {
+ color: var(--rhpz-orange-hover);
+ text-decoration: underline;
+ }
+ }
+
+ blockquote, .\$bbCodeBlock-blockquote {
+ background-color: var(--bg);
+ border-left: 3px solid var(--info);
+ padding: 12px 16px;
+ margin: 12px 0;
+ font-style: italic;
+ color: var(--text2);
+ }
+
+ code {
+ font-family: monospace;
+ background-color: var(--bg3);
+ border: 1px solid var(--border);
+ padding: 2px 5px;
+ font-size: 0.9rem;
+ }
+}
+
+.markdown-body h1, .markdown-body h2, .markdown-body h3,
+.\$markdown-body h4, .\$markdown-body h5, .\$markdown-body h6 {
+ color: var(--text);
+ font-weight: 600;
+ margin: 16px 0 8px;
+ line-height: 1.3;
+}
+
+.markdown-body h1 { font-size: 1.4rem; }
+.markdown-body h2 { font-size: 1.2rem; }
+.markdown-body h3 { font-size: 1.05rem; }
+
+.markdown-body strong { color: var(--text); font-weight: 700; }
+.markdown-body em { color: var(--text2); }
+
+.\$markdown-body ul, .\$markdown-body ol {
+ margin: 0 0 12px 20px;
+ color: var(--text);
+}
+
+.markdown-body li { margin-bottom: 4px; line-height: 1.5; }
+
+.\$markdown-body hr {
+ border: none;
+ border-top: 1px solid var(--border);
+ margin: 16px 0;
+}
+
+.\$markdown-body table {
+ width: 100%;
+ border-collapse: collapse;
+ margin: 12px 0;
+ font-size: 0.9rem;
+}
+
+.\$markdown-body th, .\$markdown-body td {
+ border: 1px solid var(--border);
+ padding: 6px 10px;
+ text-align: left;
+}
+
+.\$markdown-body th {
+ background-color: var(--bg3);
+ font-weight: 600;
+ color: var(--text);
+}
+
+.\$markdown-body del {
+ color: var(--text2);
+ text-decoration: line-through;
+}
+
+.\$markdown-body img {
+ max-width: 100%;
+ border: 1px solid var(--border);
+ margin: 8px 0;
+}
+
+.\$hack-actions {
+ display: flex;
+ gap: 10px;
+}
+
+@media (max-width: 768px) {
+ .\$entry-header {
+ flex-direction: column;
+ padding: 20px;
+ gap: 20px;
+
+ .\$entry-cover {
+ width: 100%;
+ height: 280px;
+ max-width: 300px;
+ margin: 0 auto;
+ }
+
+ .\$entry-info {
+ .\$entry-title {
+ font-size: 1.6rem;
+ }
+
+ .\$entry-authors {
+ font-size: 0.95rem;
+ }
+
+ .\$entry-meta-grid {
+ grid-template-columns: 1fr;
+ gap: 12px;
+ margin-bottom: 20px;
+ }
+
+ .\$entry-actions {
+ flex-direction: column;
+ gap: 10px;
+
+ .\$btn {
+ width: 100%;
+ }
+ }
+ }
+ }
+
+ .\$entry-content {
+ padding: 20px;
+
+ .\$entry-section-title {
+ font-size: 1.1rem;
+ }
+
+ .\$entry-gallery {
+ grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+ gap: 12px;
+ margin-bottom: 20px;
+ }
+ }
+
+ .\$comment-block {
+ gap: 12px;
+ padding: 15px 0;
+
+ .\$comment-avatar {
+ width: 40px;
+ height: 40px;
+ }
+
+ .\$comment-content {
+ .\$comment-body {
+ font-size: 0.9rem;
+ }
+ }
+ }
+
+ .\$video-thumbnail-wrapper {
+ max-width: 100%;
+ }
+
+ .\$gallery-modal-close {
+ top: 10px;
+ right: 15px;
+ font-size: 30px;
+ }
+
+ .\$hack-actions {
+ flex-direction: column;
+ }
+}
+
+@media (max-width: 600px) {
+ .\$entry-header {
+ padding: 15px;
+ gap: 15px;
+
+ .\$entry-cover {
+ height: 240px;
+ }
+
+ .\$entry-info {
+ .\$entry-title {
+ font-size: 1.3rem;
+ margin-bottom: 8px;
+ }
+
+ .\$entry-authors {
+ font-size: 0.85rem;
+ margin-bottom: 15px;
+ }
+
+ .\$entry-actions {
+ gap: 8px;
+
+ .\$btn {
+ padding: 8px 12px;
+ font-size: 0.85rem;
+ }
+ }
+ }
+ }
+
+ .\$entry-content {
+ padding: 15px;
+
+ .\$entry-gallery {
+ grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+ gap: 8px;
+ margin-bottom: 15px;
+ }
+ }
+
+ .\$comment-block {
+ padding: 10px 0;
+
+ .\$comment-avatar {
+ width: 36px;
+ height: 36px;
+ }
+ }
+
+ .markdown-body h1 { font-size: 1.15rem; }
+ .markdown-body h2 { font-size: 1rem; }
+ .markdown-body h3 { font-size: 0.95rem; }
+
+ .\$hack-actions {
+ flex-direction: column;
+ }
+}
+
+
/* File: resources/css/layout/menu.css */
#menu {
@@ -1905,12 +5177,18 @@ ul {
z-index: 100;
.\$menu-header {
- padding: 20px;
+ padding: 10px;
display: flex;
align-items: center;
gap: 12px;
border-bottom: 1px solid var(--border);
+ img {
+ width: 100%;
+ height: 100%;
+ object-fit: contain;
+ }
+
.\$menu-logo {
width: 32px;
height: 32px;
@@ -2005,6 +5283,14 @@ ul {
display: flex;
align-items: center;
justify-content: center;
+ overflow: hidden;
+
+ img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ border-radius: 50%;
+ }
}
.\$menu-user-info {
display: flex;
@@ -2074,6 +5360,1344 @@ ul {
}
}
+#news-container {
+ background-color: var(--bg2);
+ border: 1px solid var(--border);
+ display: flex;
+ flex-direction: column;
+}
+
+.\$news-header {
+ width: 100%;
+ height: 300px;
+ background-size: cover;
+ background-position: center;
+ display: flex;
+ align-items: flex-end;
+ padding: 40px 30px;
+ border-bottom: 1px solid var(--border);
+ position: relative;
+}
+
+.\$news-header-content {
+ position: relative;
+ z-index: 2;
+}
+
+.\$news-header .\$news-title {
+ font-size: 2.5rem;
+ font-weight: 600;
+ color: var(--text);
+ margin-bottom: 12px;
+ text-shadow: 0 2px 4px rgba(0,0,0,0.6);
+ word-wrap: break-word;
+ overflow-wrap: break-word;
+ word-break: break-word;
+}
+
+@media (max-width: 768px) {
+ .\$news-header .\$news-title {
+ font-size: 1.8rem;
+ }
+}
+
+@media (max-width: 600px) {
+ .\$news-header .\$news-title {
+ font-size: 1.4rem;
+ }
+}
+
+.\$news-header .\$news-meta {
+ color: var(--text2);
+ display: flex;
+ gap: 20px;
+ font-size: 0.9rem;
+ align-items: center;
+}
+
+.\$news-header .\$meta-item {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ background-color: rgba(0, 0, 0, 0.4);
+ padding: 4px 10px;
+ border-radius: 2px;
+ border: 1px solid rgba(255,255,255,0.05);
+}
+
+.\$news-layout {
+ display: flex;
+ flex-direction: row;
+ gap: 30px;
+ padding: 30px;
+}
+
+@media (max-width: 992px) {
+ .\$news-layout {
+ flex-direction: column;
+ }
+}
+
+.\$news-main-content {
+ flex-grow: 1;
+ flex-basis: 0;
+ min-width: 0;
+}
+
+.\$news-body-text {
+ line-height: 1.75;
+ color: var(--text);
+ font-size: 1.05rem;
+ margin-bottom: 15px;
+}
+
+.\$news-body-text p {
+ margin-bottom: 20px;
+}
+
+.\$news-sidebar {
+ width: 320px;
+ flex-shrink: 0;
+ display: flex;
+ flex-direction: column;
+ gap: 25px;
+}
+
+@media (max-width: 992px) {
+ .\$news-sidebar {
+ width: 100%;
+ }
+}
+
+.\$sidebar-block {
+ background-color: var(--bg);
+ border: 1px solid var(--border);
+ padding: 20px;
+ border-radius: 4px;
+}
+
+.\$sidebar-title {
+ font-size: 1rem;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+ color: var(--text);
+ margin-bottom: 15px;
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ border-bottom: 1px solid var(--border);
+ padding-bottom: 8px;
+}
+
+.\$btn-sidebar {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 8px;
+ width: 100%;
+ padding: 10px 15px;
+ font-size: 0.95rem;
+ font-weight: 500;
+ text-decoration: none;
+ cursor: pointer;
+ border-radius: 2px;
+ transition: background-color 0.2s ease, border-color 0.2s ease;
+ text-align: center;
+}
+
+.\$btn-orange {
+ background-color: var(--rhpz-orange);
+ color: #fff;
+ border: 1px solid transparent;
+}
+
+.\$btn-orange:hover {
+ background-color: var(--rhpz-orange-hover);
+}
+
+.\$related-card {
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+}
+
+.\$related-card-cover {
+ width: 100%;
+ height: 150px;
+ background-color: var(--bg2);
+ border: 1px solid var(--border);
+ overflow: hidden;
+ border-radius: 2px;
+}
+
+.\$related-card-cover img {
+ width: 100%;
+ height: 100%;
+ object-fit: contain;
+ padding: 5px;
+}
+
+.\$related-card-info h4 {
+ font-size: 1.1rem;
+ color: var(--text);
+ margin-bottom: 10px;
+ font-weight: 500;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.\$news-sidebar .\$video-thumbnail-wrapper {
+ position: relative;
+ width: 100%;
+ aspect-ratio: 16/9;
+ background-color: #000;
+ border: 1px solid var(--border);
+ cursor: pointer;
+ overflow: hidden;
+ border-radius: 2px;
+}
+
+.\$news-sidebar .\$video-thumbnail-wrapper img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ opacity: 0.7;
+ transition: transform 0.3s ease, opacity 0.3s ease;
+}
+
+.\$news-sidebar .\$video-thumbnail-wrapper:hover img {
+ transform: scale(1.03);
+ opacity: 0.9;
+}
+
+.\$news-sidebar .\$play-trigger {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 50px;
+ height: 50px;
+ background-color: rgba(0, 0, 0, 0.75);
+ border: 2px solid #fff;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: #fff;
+ transition: background-color 0.2s, transform 0.2s ease-out;
+}
+
+.\$news-sidebar .\$video-thumbnail-wrapper:hover .\$play-trigger {
+ background-color: var(--rhpz-orange);
+ transform: translate(-50%, -50%) scale(1.1);
+}
+
+.\$news-actions {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ margin-top: 15px;
+ flex-wrap: wrap;
+}
+
+.\$news-header .\$news-actions .\$btn {
+ background-color: rgba(0, 0, 0, 0.5);
+ border-color: rgba(255, 255, 255, 0.15);
+ backdrop-filter: blur(4px);
+ color: var(--text);
+ transition: background-color 0.15s, border-color 0.15s;
+}
+
+.\$news-header .\$news-actions .\$btn:hover {
+ background-color: rgba(0, 0, 0, 0.7);
+ border-color: rgba(255, 255, 255, 0.3);
+}
+
+.\$news-header .\$news-actions .\$btn.success {
+ background-color: rgba(56, 142, 60, 0.6);
+ border-color: rgba(129, 199, 132, 0.4);
+ color: #81c784;
+}
+
+.\$news-header .\$news-actions .\$btn.danger {
+ background-color: rgba(183, 28, 28, 0.5);
+ border-color: rgba(229, 115, 115, 0.4);
+ color: #e57373;
+}
+
+.\$news-hero {
+ display: block;
+ position: relative;
+ width: 100%;
+ height: 360px;
+ margin-bottom: 20px;
+ border: 1px solid var(--border);
+ overflow: hidden;
+ text-decoration: none;
+ transition: border-color 0.2s;
+}
+
+.\$news-hero:hover {
+ border-color: var(--rhpz-orange);
+ text-decoration: none;
+}
+
+.\$news-hero-bg {
+ position: absolute;
+ inset: 0;
+ background-size: cover;
+ background-position: center;
+ background-color: var(--bg3);
+ transition: transform 0.4s ease;
+}
+
+.\$news-hero:hover .\$news-hero-bg {
+ transform: scale(1.02);
+}
+
+.\$news-hero-content {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ padding: 30px;
+ z-index: 2;
+}
+
+.\$news-hero-badge {
+ display: inline-flex;
+ align-items: center;
+ gap: 5px;
+ background-color: var(--rhpz-orange);
+ color: #111;
+ font-size: 0.72rem;
+ font-weight: 700;
+ text-transform: uppercase;
+ letter-spacing: 0.8px;
+ padding: 4px 10px;
+ margin-bottom: 12px;
+}
+
+.\$news-hero-title {
+ font-size: 2rem;
+ font-weight: 600;
+ color: #fff;
+ margin-bottom: 12px;
+ text-shadow: 0 2px 8px rgba(0,0,0,0.5);
+ line-height: 1.2;
+}
+
+.\$news-hero-meta {
+ display: flex;
+ align-items: center;
+ gap: 15px;
+ font-size: 0.85rem;
+ color: rgba(255,255,255,0.75);
+}
+
+.\$news-hero-meta span {
+ display: flex;
+ align-items: center;
+ gap: 5px;
+ background-color: rgba(0,0,0,0.4);
+ padding: 3px 10px;
+ border: 1px solid rgba(255,255,255,0.08);
+}
+
+.\$news-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+ gap: 15px;
+ margin-bottom: 20px;
+}
+
+.\$news-card {
+ display: flex;
+ flex-direction: column;
+ background-color: var(--bg2);
+ border: 1px solid var(--border);
+ text-decoration: none;
+ overflow: hidden;
+ transition: border-color 0.15s, transform 0.15s;
+}
+
+.\$news-card:hover {
+ border-color: var(--rhpz-orange);
+ transform: translateY(-2px);
+ text-decoration: none;
+}
+
+.\$news-card-cover {
+ height: 160px;
+ background-size: cover;
+ background-position: center;
+ background-color: var(--bg3);
+ position: relative;
+ flex-shrink: 0;
+ transition: transform 0.3s ease;
+}
+
+.\$news-card:hover .\$news-card-cover {
+ transform: scale(1.03);
+}
+
+.\$news-card-state-badge {
+ position: absolute;
+ top: 10px;
+ right: 10px;
+ display: inline-flex;
+ align-items: center;
+ gap: 4px;
+ background-color: rgba(0,0,0,0.7);
+ color: var(--rhpz-orange);
+ font-size: 0.72rem;
+ font-weight: 600;
+ padding: 3px 8px;
+ border: 1px solid rgba(255,115,0,0.3);
+}
+
+.\$news-card-body {
+ padding: 16px;
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+ gap: 8px;
+}
+
+.\$news-card-title {
+ font-size: 1rem;
+ font-weight: 600;
+ color: var(--text);
+ line-height: 1.3;
+ margin: 0;
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+}
+
+.\$news-card-excerpt {
+ font-size: 0.82rem;
+ color: var(--text2);
+ line-height: 1.5;
+ margin: 0;
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+ flex: 1;
+}
+
+.\$news-card-meta {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ font-size: 0.75rem;
+ color: var(--text2);
+ margin-top: auto;
+ padding-top: 8px;
+ border-top: 1px solid var(--border);
+}
+
+.\$news-card-meta span {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+}
+
+@media (max-width: 600px) {
+ .news-hero { height: 240px; }
+ .news-hero-title { font-size: 1.4rem; }
+ .news-grid { grid-template-columns: 1fr; }
+}
+
+@media (max-width: 768px) {
+
+ .\$news-header .\$news-meta {
+ gap: 12px;
+ font-size: 0.85rem;
+ }
+
+ .\$news-layout {
+ flex-direction: column;
+ gap: 20px;
+ padding: 20px;
+ }
+
+ .\$news-sidebar {
+ width: 100%;
+ }
+
+ .\$news-content {
+ padding: 25px;
+ font-size: 1rem;
+ }
+
+ .\$news-body-text {
+ font-size: 1rem;
+ }
+
+ .\$sidebar-block {
+ padding: 15px;
+ }
+}
+
+@media (max-width: 600px) {
+ .\$news-header .\$news-meta {
+ gap: 8px;
+ font-size: 0.8rem;
+ flex-wrap: wrap;
+ }
+
+ .\$news-header .\$meta-item {
+ padding: 3px 8px;
+ font-size: 0.75rem;
+ }
+
+ .\$news-layout {
+ gap: 15px;
+ padding: 15px;
+ }
+
+ .\$news-main-content {
+ min-width: 0;
+ }
+
+ .\$news-content {
+ padding: 15px;
+ font-size: 0.95rem;
+ }
+
+ .\$news-body-text {
+ font-size: 0.95rem;
+ margin-bottom: 12px;
+ }
+
+ .\$news-body-text p {
+ margin-bottom: 15px;
+ }
+
+ .\$news-sidebar {
+ width: 100%;
+ gap: 15px;
+ }
+
+ .\$sidebar-block {
+ padding: 12px;
+ }
+
+ .\$sidebar-block h3 {
+ font-size: 0.95rem;
+ }
+
+ .\$sidebar-block p {
+ font-size: 0.9rem;
+ }
+
+ .\$news-card-title {
+ font-size: 0.9rem;
+ }
+}
+
+@media (max-width: 420px) {
+
+ .\$news-header .\$news-meta {
+ font-size: 0.75rem;
+ }
+
+ .\$news-layout {
+ padding: 12px;
+ }
+
+ .\$news-content {
+ padding: 12px;
+ }
+}
+
+
+/* File: resources/css/layout/responsive.css */
+
+@media (max-width: 768px) {
+ :root {
+ --menu-size: 280px;
+ }
+
+ #menu {
+ position: fixed;
+ left: 0;
+ top: 60px;
+ height: calc(100vh - 60px);
+ transform: translateX(-100%);
+ transition: transform 0.3s ease-in-out;
+ z-index: 999;
+ box-shadow: 2px 0 10px rgba(0, 0, 0, 0.5);
+ }
+
+ #menu.mobile-open {
+ transform: translateX(0);
+ }
+
+ #app.menu-open::before {
+ content: '';
+ position: fixed;
+ top: 60px;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0, 0, 0, 0.5);
+ z-index: 998;
+ }
+
+ .\$mobile-toggle {
+ display: flex !important;
+ align-items: center;
+ justify-content: center;
+ width: 40px;
+ height: 40px;
+ padding: 0;
+ }
+
+ #main-wrapper {
+ width: 100%;
+ }
+
+ #content {
+ padding: 20px;
+ }
+
+ #topbar {
+ padding: 0 10px;
+ gap: 10px;
+ }
+
+ .\$search-bar {
+ width: 100%;
+ max-width: 250px;
+ }
+
+ .\$search-scope-select {
+ font-size: 0.7rem;
+ padding: 6px 8px;
+ }
+
+ .\$topbar-actions {
+ gap: 4px;
+ overflow-x: auto;
+ flex-shrink: 1;
+ }
+
+ .\$topbar-actions .\$btn {
+ flex-shrink: 0;
+ padding: 6px 8px;
+ }
+
+ .\$vertical-separator {
+ height: 30px;
+ }
+}
+
+@media (max-width: 600px) {
+ :root {
+ --menu-size: 240px;
+ }
+
+ #content {
+ padding: 15px;
+ }
+
+ #topbar {
+ padding: 0 8px;
+ height: 55px;
+ }
+
+ #topbar {
+ flex-wrap: wrap;
+ gap: 8px;
+ }
+
+ .\$search-bar {
+ max-width: 100%;
+ order: 3;
+ width: 100%;
+ margin-top: 8px;
+ }
+
+ .\$topbar-actions {
+ gap: 2px;
+ max-width: 100%;
+ }
+
+ .\$topbar-actions .\$btn {
+ padding: 4px 6px;
+ font-size: 0.9rem;
+ }
+
+ .\$search-scope-select {
+ display: none;
+ }
+
+ .\$search-bar input {
+ padding: 4px;
+ font-size: 0.9rem;
+ }
+
+ #menu {
+ width: 240px;
+ }
+
+ .\$menu-title {
+ display: none;
+ }
+
+ .\$menu-logo {
+ width: 40px;
+ height: 40px;
+ }
+
+ .\$menu-header {
+ padding: 8px;
+ justify-content: center;
+ }
+
+ .\$menu-user-info .\$username {
+ font-size: 0.9rem;
+ }
+}
+
+@media (max-width: 420px) {
+ :root {
+ --menu-size: 200px;
+ }
+
+ #content {
+ padding: 12px;
+ }
+
+ #topbar {
+ padding: 0 6px;
+ height: 50px;
+ }
+
+ .\$mobile-toggle {
+ width: 35px;
+ height: 35px;
+ }
+
+ .\$topbar-actions .\$btn {
+ padding: 3px 4px;
+ font-size: 0.8rem;
+ }
+
+ .\$vertical-separator {
+ display: none;
+ }
+
+ .\$menu-item {
+ padding: 8px 12px;
+ font-size: 0.9rem;
+ }
+
+ .\$menu-group-title {
+ padding: 0 12px;
+ font-size: 0.65rem;
+ }
+
+ .\$menu-user-info {
+ display: none;
+ }
+}
+
+@media (max-height: 500px) and (max-width: 768px) {
+ #topbar {
+ height: 50px;
+ }
+
+ #content {
+ padding: 12px;
+ }
+
+ .\$menu-header {
+ padding: 8px;
+ }
+}
+
+@media (max-width: 1024px) and (min-width: 769px) {
+ :root {
+ --menu-size: 240px;
+ }
+
+ #content {
+ padding: 25px;
+ }
+
+ .\$search-bar {
+ width: 250px;
+ }
+}
+
+@media (min-width: 769px) {
+
+ #menu {
+ transform: translateX(0) !important;
+ position: relative !important;
+ top: auto !important;
+ height: auto !important;
+ box-shadow: none !important;
+ }
+
+
+ #app.menu-open::before {
+ display: none;
+ }
+
+
+ .\$mobile-toggle {
+ display: none !important;
+ }
+
+
+ #app {
+ display: flex;
+ }
+
+ #main-wrapper {
+ width: calc(100% - var(--menu-size));
+ flex-grow: 1;
+ }
+}
+
+
+@media (hover: none) and (pointer: coarse) {
+
+ .btn,
+ .menu-item,
+ button {
+ min-height: 44px;
+ min-width: 44px;
+ }
+
+
+ .\$btn {
+ padding: 8px 12px;
+ }
+
+
+ .\$menu-item:hover {
+ background-color: var(--bg2);
+ }
+}
+
+
+/* File: resources/css/layout/reviews.css */
+.\$review-section-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ flex-wrap: wrap;
+ gap: 10px;
+ margin-bottom: 10px;
+}
+
+.\$review-header-right {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+}
+
+.\$review-avg-badge {
+ display: inline-flex;
+ align-items: center;
+ gap: 5px;
+ font-size: 0.85rem;
+ font-weight: 600;
+ color: var(--rhpz-orange);
+ background-color: rgba(255,115,0,.1);
+ border: 1px solid rgba(255,115,0,.3);
+ padding: 4px 10px;
+}
+
+.\$review-avg-badge--lg {
+ font-size: 1rem;
+ padding: 8px 16px;
+}
+
+.\$review-avg-count {
+ color: var(--text2);
+ font-weight: 400;
+ font-size: 0.85rem;
+}
+
+.\$star-rating-display {
+ display: inline-flex;
+ align-items: center;
+ gap: 1px;
+}
+
+.star-rating-display .star-filled { color: var(--rhpz-orange); fill: var(--rhpz-orange); }
+.star-rating-display .star-empty { color: var(--border); }
+
+.\$review-title {
+ font-size: 0.98rem;
+ font-weight: 700;
+ color: var(--text);
+ margin-bottom: 4px;
+}
+
+.\$star-input {
+ display: flex;
+ gap: 4px;
+}
+
+.star-input-icon.star-filled svg { color: var(--rhpz-orange); fill: var(--rhpz-orange); }
+.star-input-icon.star-empty svg { color: var(--border); }
+
+.\$star-input-icon {
+ cursor: pointer;
+ transition: transform 0.1s;
+}
+
+.\$star-input-icon:hover {
+ transform: scale(1.15);
+}
+
+.\$reviews-page-header {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ margin-bottom: 25px;
+ padding-bottom: 20px;
+ border-bottom: 1px solid var(--border);
+}
+
+.\$reviews-back-link {
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+ font-size: 0.82rem;
+ color: var(--text2);
+ text-decoration: none;
+ width: fit-content;
+}
+
+.reviews-back-link:hover { color: var(--rhpz-orange); }
+
+.\$reviews-page-title {
+ font-size: 1.4rem;
+ font-weight: 600;
+ color: var(--text);
+}
+
+@media (max-width: 768px) {
+ .\$review-section-header {
+ gap: 8px;
+ margin-bottom: 8px;
+ }
+
+ .\$review-header-right {
+ gap: 8px;
+ flex-wrap: wrap;
+ }
+
+ .\$review-avg-badge {
+ font-size: 0.8rem;
+ padding: 3px 8px;
+ }
+
+ .\$review-avg-badge--lg {
+ font-size: 0.95rem;
+ padding: 6px 12px;
+ }
+
+ .\$reviews-page-header {
+ gap: 8px;
+ margin-bottom: 20px;
+ padding-bottom: 15px;
+ }
+
+ .\$reviews-page-title {
+ font-size: 1.15rem;
+ }
+
+ .\$review-title {
+ font-size: 0.9rem;
+ }
+}
+
+@media (max-width: 600px) {
+ .\$review-avg-badge {
+ font-size: 0.75rem;
+ padding: 2px 6px;
+ }
+
+ .\$reviews-page-title {
+ font-size: 1rem;
+ }
+
+ .\$review-title {
+ font-size: 0.85rem;
+ }
+
+ .\$star-rating-display {
+ gap: 0;
+ }
+
+ .\$star-input {
+ gap: 3px;
+ }
+}
+
+
+/* File: resources/css/layout/submit.css */
+.\$submit-hero {
+ display: flex;
+ align-items: flex-end;
+ justify-content: space-between;
+ gap: 24px;
+ background-color: var(--bg2);
+ border-bottom: 1px solid var(--border);
+ padding: 40px 36px 32px;
+}
+
+.\$submit-eyebrow {
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+ font-size: 0.68rem;
+ font-weight: 700;
+ text-transform: uppercase;
+ letter-spacing: 1px;
+ color: var(--rhpz-orange);
+ background: rgba(255,115,0,.1);
+ border: 1px solid rgba(255,115,0,.3);
+ padding: 3px 10px;
+ margin-bottom: 16px;
+}
+
+.\$submit-hero-title {
+ font-size: 1.9rem;
+ font-weight: 300;
+ color: var(--text);
+ margin-bottom: 10px;
+ line-height: 1.25;
+}
+
+.\$submit-hero-sub {
+ font-size: 0.9rem;
+ color: var(--text2);
+ max-width: 460px;
+ line-height: 1.65;
+}
+
+.\$submit-review-note {
+ font-size: 0.8rem;
+ color: var(--text2);
+ border: 1px solid var(--border);
+ background: var(--bg3);
+ padding: 14px 18px;
+ max-width: 210px;
+ line-height: 1.6;
+ flex-shrink: 0;
+}
+
+.submit-review-note strong { color: var(--rhpz-orange); }
+
+.submit-body { padding: 28px 36px 40px; }
+
+.\$submit-section-label {
+ font-size: 0.68rem;
+ font-weight: 700;
+ text-transform: uppercase;
+ letter-spacing: 1px;
+ color: var(--text2);
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ margin-bottom: 14px;
+}
+
+.\$submit-section-label::after {
+ content: '';
+ flex: 1;
+ height: 1px;
+ background: var(--border);
+}
+
+.\$submit-grid {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 10px;
+ margin-bottom: 30px;
+}
+
+.\$submit-card {
+ display: flex;
+ flex-direction: column;
+ background: var(--bg2);
+ border: 1px solid var(--border);
+ text-decoration: none;
+ transition: border-color .15s, background .1s;
+}
+
+.\$submit-card:hover {
+ border-color: var(--card-color);
+ background: var(--bg3);
+ text-decoration: none;
+}
+
+.\$submit-card-top {
+ display: flex;
+ align-items: flex-start;
+ gap: 14px;
+ padding: 20px 20px 16px;
+ border-bottom: 1px solid var(--border);
+}
+
+.\$submit-card-icon {
+ width: 38px;
+ height: 38px;
+ flex-shrink: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: var(--card-bg);
+ border: 1px solid var(--card-border);
+ color: var(--card-color);
+}
+
+.\$submit-card-title {
+ font-size: 0.95rem;
+ font-weight: 600;
+ color: var(--text);
+ margin-bottom: 4px;
+}
+
+.\$submit-card-desc {
+ font-size: 0.78rem;
+ color: var(--text2);
+ line-height: 1.55;
+}
+
+.\$submit-card-bottom {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 10px 20px;
+}
+
+.\$submit-card-tag {
+ font-size: 0.65rem;
+ font-weight: 700;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+ color: var(--card-color);
+ background: var(--card-bg);
+ border: 1px solid var(--card-border);
+ padding: 2px 7px;
+}
+
+.\$submit-card-cta {
+ font-size: 0.75rem;
+ color: var(--text2);
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ transition: color .15s;
+}
+
+.submit-card:hover .submit-card-cta { color: var(--card-color); }
+
+.\$submit-news-row {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 10px;
+ margin-bottom: 28px;
+}
+
+.\$submit-news-card {
+ display: flex;
+ align-items: center;
+ gap: 14px;
+ background: var(--bg2);
+ border: 1px solid var(--border);
+ padding: 18px 22px;
+ text-decoration: none;
+ transition: border-color .15s, background .1s;
+}
+
+.\$submit-news-card:hover {
+ border-color: var(--success);
+ background: var(--bg3);
+}
+
+.submit-news-card--disabled { opacity: .5; cursor: not-allowed; }
+.submit-news-card--disabled:hover { border-color: var(--border); background: var(--bg2); }
+
+.\$submit-news-icon {
+ width: 38px;
+ height: 38px;
+ flex-shrink: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: rgba(129,199,132,.1);
+ border: 1px solid rgba(129,199,132,.3);
+ color: var(--success);
+}
+
+.\$submit-news-title {
+ font-size: 0.95rem;
+ font-weight: 600;
+ color: var(--text);
+ margin-bottom: 3px;
+}
+
+.submit-news-desc { font-size: 0.78rem; color: var(--text2); line-height: 1.55; }
+
+.\$submit-news-cta {
+ flex-shrink: 0;
+ font-size: 0.75rem;
+ color: var(--text2);
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ transition: color .15s;
+}
+
+.submit-news-card:hover .submit-news-cta { color: var(--success); }
+
+.\$submit-news-staff-note {
+ background: var(--bg2);
+ border: 1px solid var(--border);
+ padding: 18px 22px;
+ font-size: 0.8rem;
+ color: var(--text2);
+ line-height: 1.65;
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+}
+
+.\$submit-news-staff-badge {
+ display: inline-flex;
+ align-items: center;
+ gap: 5px;
+ font-size: 0.65rem;
+ font-weight: 700;
+ text-transform: uppercase;
+ letter-spacing: .6px;
+ color: var(--rhpz-orange);
+ background: rgba(255,115,0,.1);
+ border: 1px solid rgba(255,115,0,.3);
+ padding: 2px 8px;
+ width: fit-content;
+}
+
+.submit-news-staff-note a { color: var(--text2); text-decoration: underline; }
+.submit-news-staff-note a:hover { color: var(--text); }
+
+.\$submit-rules {
+ display: flex;
+ gap: 0;
+ background: var(--bg2);
+ border: 1px solid var(--border);
+}
+
+.\$submit-rule {
+ flex: 1;
+ display: flex;
+ align-items: flex-start;
+ gap: 12px;
+ padding: 18px 22px;
+ border-right: 1px solid var(--border);
+ font-size: 0.8rem;
+ color: var(--text2);
+ line-height: 1.6;
+}
+
+.submit-rule:last-child { border-right: none; }
+.submit-rule strong { color: var(--text); }
+
+.\$submit-rule-num {
+ width: 22px;
+ height: 22px;
+ flex-shrink: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: rgba(255,115,0,.1);
+ border: 1px solid rgba(255,115,0,.3);
+ color: var(--rhpz-orange);
+ font-size: 0.72rem;
+ font-weight: 700;
+}
+
+@media (max-width: 900px) {
+ .submit-hero { flex-direction: column; align-items: flex-start; }
+ .submit-grid { grid-template-columns: repeat(2, 1fr); }
+ .submit-rules { flex-direction: column; }
+ .submit-rule { border-right: none; border-bottom: 1px solid var(--border); }
+ .submit-rule:last-child { border-bottom: none; }
+}
+
+@media (max-width: 768px) {
+ .\$submit-hero {
+ flex-direction: column;
+ gap: 20px;
+ padding: 25px 20px;
+ }
+
+ .\$submit-grid {
+ grid-template-columns: 1fr;
+ gap: 15px;
+ }
+
+ .\$submit-body {
+ padding: 25px 20px;
+ }
+
+ .\$submit-rules {
+ gap: 0;
+ }
+
+ .\$submit-rule {
+ padding: 15px;
+ }
+}
+
+@media (max-width: 600px) {
+ .\$submit-hero, .\$submit-body {
+ padding-left: 15px;
+ padding-right: 15px;
+ }
+
+ .submit-grid { grid-template-columns: 1fr; }
+ .submit-news-row { grid-template-columns: 1fr; }
+ .submit-review-note { max-width: 100%; }
+
+ .\$submit-hero {
+ gap: 15px;
+ padding: 15px;
+ }
+
+ .\$submit-body {
+ padding: 15px;
+ }
+
+ .\$submit-rule {
+ padding: 12px;
+ font-size: 0.9rem;
+ }
+
+ .\$submit-hero-title {
+ font-size: 1.3rem;
+ }
+
+ .\$submit-grid > * {
+ margin-bottom: 10px;
+ }
+}
+
/* File: resources/css/xenforo.css */
.\$xf-menu-user-avatar-fix {
diff --git a/templates/public/misc_preferences_popup.html b/templates/public/misc_preferences_popup.html
new file mode 100644
index 0000000..0efebe1
--- /dev/null
+++ b/templates/public/misc_preferences_popup.html
@@ -0,0 +1,55 @@
+
+
+
+ Theme
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/templates/public/romhackplaza_css.html b/templates/public/romhackplaza_css.html
index 3ccf800..a7866f5 100644
--- a/templates/public/romhackplaza_css.html
+++ b/templates/public/romhackplaza_css.html
@@ -1,3 +1,6 @@
\ No newline at end of file
diff --git a/templates/public/romhackplaza_js.html b/templates/public/romhackplaza_js.html
index fff3471..18eff1e 100644
--- a/templates/public/romhackplaza_js.html
+++ b/templates/public/romhackplaza_js.html
@@ -3,4 +3,81 @@
document.addEventListener('DOMContentLoaded', function() {
lucide.createIcons();
});
-
\ No newline at end of file
+
+ window.refreshIcons = (container = document) => {
+ const pending = container.querySelectorAll('[data-lucide]');
+ if (pending.length === 0) return;
+ lucide.createIcons();
+ };
+ (function () {
+ var APP_URL = "{{ $xf.options.homePageUrl }}";
+
+ var form = document.getElementById('rhpzSearchForm');
+ var select = document.getElementById('rhpzSearchScope');
+ var input = document.getElementById('rhpzSearchInput');
+
+ var scopes = {
+ forum: { action: "{{ link('search/2147483647/') }}", param: 'q', extra: { o: 'relevance' } },
+ entries: { action: APP_URL + '/database', param: 's' },
+ news: { action: APP_URL + '/news', param: 's' }
+ };
+
+ form.addEventListener('submit', function (e) {
+ e.preventDefault();
+
+ var term = input.value.trim();
+ if (!term) return;
+
+ var cfg = scopes[select.value];
+ var params = new URLSearchParams(Object.assign({}, { [cfg.param]: term }, cfg.extra || {}));
+
+ window.location = cfg.action + '?' + params.toString();
+ });
+ })();
+ (function () {
+ const menuToggle = document.querySelector('.\\$mobile-toggle');
+ const menu = document.getElementById('menu');
+ const app = document.getElementById('app');
+ const content = document.getElementById('content');
+
+ if (!menuToggle || !menu) return;
+
+ menuToggle.addEventListener('click', (e) => {
+ e.stopPropagation();
+ menu.classList.toggle('mobile-open');
+ app.classList.toggle('menu-open');
+ });
+
+ const menuItems = menu.querySelectorAll('.\\$menu-item');
+ menuItems.forEach(item => {
+ item.addEventListener('click', () => {
+ menu.classList.remove('mobile-open');
+ app.classList.remove('menu-open');
+ });
+ });
+
+ document.addEventListener('click', (e) => {
+ const isClickInsideMenu = menu.contains(e.target);
+ const isClickOnToggle = menuToggle.contains(e.target);
+
+ if (!isClickInsideMenu && !isClickOnToggle && menu.classList.contains('mobile-open')) {
+ menu.classList.remove('mobile-open');
+ app.classList.remove('menu-open');
+ }
+ });
+
+ document.addEventListener('keydown', (e) => {
+ if (e.key === 'Escape' && menu.classList.contains('mobile-open')) {
+ menu.classList.remove('mobile-open');
+ app.classList.remove('menu-open');
+ }
+ });
+
+ window.addEventListener('resize', () => {
+ if (window.innerWidth > 768) {
+ menu.classList.remove('mobile-open');
+ app.classList.remove('menu-open');
+ }
+ });
+ })()
+
\ No newline at end of file
diff --git a/templates/public/topbar_actions.html b/templates/public/topbar_actions.html
index ba2965d..ddd3842 100644
--- a/templates/public/topbar_actions.html
+++ b/templates/public/topbar_actions.html
@@ -4,10 +4,10 @@
-