diff --git a/templates/_metadata.json b/templates/_metadata.json index 8c465b7..02b84de 100644 --- a/templates/_metadata.json +++ b/templates/_metadata.json @@ -3,7 +3,7 @@ "addon_id": "XF", "version_id": 2031070, "version_string": "2.3.10", - "hash": "6c1abed7c6649f4edfb78769cf293f73" + "hash": "bbe8ebb41f6606f1f41782ba1aaa5509" }, "public/account_alerts_popup.html": { "addon_id": "XF", @@ -39,7 +39,7 @@ "addon_id": "XF", "version_id": 2031070, "version_string": "2.3.10", - "hash": "3944286126e45dbc6af560fd1618744e" + "hash": "e96c4ea665df26ce03dd38cd21ebc565" }, "public/member_tooltip.html": { "addon_id": "XF", @@ -69,12 +69,12 @@ "addon_id": "", "version_id": 0, "version_string": "", - "hash": "211bbfb5f0c06de1d7c6a662d8580604" + "hash": "2de55abb39dab7c9db82172f3b33a2b3" }, "public/topbar_actions.html": { "addon_id": "RomhackPlaza/Master", "version_id": 1000000, "version_string": "1.0.0", - "hash": "c69a27c5c117caf5625183e0e627c89d" + "hash": "ee896c17cf565f9351ec2bfd2da1b7c1" } } \ No newline at end of file diff --git a/templates/public/PAGE_CONTAINER.html b/templates/public/PAGE_CONTAINER.html index 3deffe5..5d70a44 100644 --- a/templates/public/PAGE_CONTAINER.html +++ b/templates/public/PAGE_CONTAINER.html @@ -133,76 +133,19 @@ - -
-
- + + + diff --git a/templates/public/extra.less b/templates/public/extra.less index 2611c34..fd587f1 100644 --- a/templates/public/extra.less +++ b/templates/public/extra.less @@ -201,6 +201,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 */ @@ -352,6 +432,7 @@ ul { .\$breadcrumb { margin-bottom: 15px; + flex-shrink: 0; } /* PAGE */ @@ -361,6 +442,7 @@ ul { font-weight: 300; margin-bottom: 20px; color: var(--text); + flex-shrink: 0; } /* TEXTS */ @@ -401,6 +483,91 @@ ul { 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 { @@ -664,6 +831,10 @@ ul { flex-direction: column; } + .\$database-wrapper { + flex-direction: column; + } + .\$database-filters { width: 100%; display: grid; @@ -680,19 +851,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; } } @@ -892,7 +1107,7 @@ ul { font-weight: 600; color: var(--text); margin-bottom: 6px; - white-space: nowrap; + white-space: normal; overflow: hidden; text-overflow: ellipsis; } @@ -958,6 +1173,106 @@ ul { } } +@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 { @@ -1591,6 +1906,17 @@ ul { 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); } @@ -1697,6 +2023,89 @@ ul { 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 */ .\$grid-c2 { @@ -1740,11 +2149,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 { @@ -1859,6 +2269,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 { @@ -2467,6 +2909,131 @@ ul { 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, .\$conversations { @@ -2492,6 +3059,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); } @@ -2798,6 +3387,85 @@ ul { 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 */ @@ -2812,6 +3480,29 @@ ul { 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); @@ -2977,6 +3668,62 @@ ul { .\$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 { @@ -3160,7 +3907,7 @@ ul { color: var(--rhpz-orange); } -.\$activity-tl-dot--news { +.\$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); @@ -3246,7 +3993,7 @@ ul { border: 1px solid rgba(255,115,0,0.25); } -.\$activity-tl-badge--news { +.\$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); @@ -3315,6 +4062,32 @@ ul { .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 { @@ -3526,10 +4299,54 @@ ul { .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: repeat(2, 1fr); } - .featured-entries-grid { grid-template-columns: repeat(2, 1fr); } + .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; + } } @@ -3589,6 +4406,155 @@ ul { } } +.\$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; @@ -3869,36 +4835,6 @@ ul { color: var(--text); line-height: 1.5; word-wrap: break-word; - - 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; - } } } } @@ -3983,6 +4919,245 @@ ul { } } +.\$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 { @@ -4201,6 +5376,21 @@ ul { 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 { @@ -4422,7 +5612,6 @@ ul { color: #e57373; } -/* ── Hero ────────────────────────────────────────────────── */ .\$news-hero { display: block; position: relative; @@ -4609,6 +5798,541 @@ ul { .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 { @@ -4902,11 +6626,62 @@ ul { .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: 20px; padding-right: 20px; } + .\$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; + } } diff --git a/templates/public/romhackplaza_js.html b/templates/public/romhackplaza_js.html index b08f4d3..18eff1e 100644 --- a/templates/public/romhackplaza_js.html +++ b/templates/public/romhackplaza_js.html @@ -9,4 +9,75 @@ if (pending.length === 0) return; lucide.createIcons(); }; - \ No newline at end of file + (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 7cd4492..ddd3842 100644 --- a/templates/public/topbar_actions.html +++ b/templates/public/topbar_actions.html @@ -4,10 +4,10 @@
- + - + @@ -16,19 +16,73 @@ - + - + - +
+ +
+ + + + +
+ +