From 1affe88683d5934bc77ef2af9c670bd200cb5190 Mon Sep 17 00:00:00 2001 From: Benjamin Date: Mon, 25 May 2026 09:56:23 +0200 Subject: [PATCH 1/9] Added new conversations design --- templates/_metadata.json | 10 +- templates/public/PAGE_CONTAINER.html | 365 +--------------------- templates/public/conversations_popup.html | 33 ++ templates/public/extra.less | 2 +- templates/public/topbar_actions.html | 30 +- 5 files changed, 70 insertions(+), 370 deletions(-) create mode 100644 templates/public/conversations_popup.html diff --git a/templates/_metadata.json b/templates/_metadata.json index 07ba864..72a50b7 100644 --- a/templates/_metadata.json +++ b/templates/_metadata.json @@ -17,11 +17,17 @@ "version_string": "2.3.10", "hash": "0cb82ae0d5544911ac92db38a01cb211" }, + "public/conversations_popup.html": { + "addon_id": "XF", + "version_id": 2031070, + "version_string": "2.3.10", + "hash": "8e9cc51c532904221c9f876a8a2f5693" + }, "public/extra.less": { "addon_id": "XF", "version_id": 2031070, "version_string": "2.3.10", - "hash": "24d94c7353b843acb056656d00ea35d2" + "hash": "e0de841c22fac6099c25062c8030fb57" }, "public/member_tooltip.html": { "addon_id": "XF", @@ -51,6 +57,6 @@ "addon_id": "RomhackPlaza/Master", "version_id": 1000000, "version_string": "1.0.0", - "hash": "b4d757a96108efbca01fb7e6b68f11b5" + "hash": "25beddff5231f873351af8fa9ce2e980" } } \ No newline at end of file diff --git a/templates/public/PAGE_CONTAINER.html b/templates/public/PAGE_CONTAINER.html index d7299e6..d6e4e7e 100644 --- a/templates/public/PAGE_CONTAINER.html +++ b/templates/public/PAGE_CONTAINER.html @@ -131,369 +131,6 @@ - - -
-
-
- - - - {{ phrase('approval_queue') }} - - - - - - {{ phrase('reports') }} - - - - - - - - - - {{ phrase('admin') }} - - -
-
-
- - - - - - - - - - -
-
-
-
    - -
  • - -
    • -     -
-
-
-
- -
- - - - -
- {$navHtml|raw} -
- {$subNavHtml|raw} - -
- {$navHtml|raw} - {$subNavHtml|raw} -
- - {$navHtml|raw} - {$subNavHtml|raw} - - - - - - - - - - + + + -
- - -
+
+ + +
diff --git a/templates/public/extra.less b/templates/public/extra.less index ceef0c1..ea5932a 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 { @@ -267,6 +269,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); @@ -381,6 +390,12 @@ ul { animation: spin 1s infinite linear; } +.\$search-button { + background: none; + border: none; + cursor: pointer; +} + /* File: resources/css/components/database.css */ .\$filter-bar { @@ -1359,6 +1374,75 @@ ul { color: var(--text2); white-space: nowrap; } +.\$upload-item-actions { + display: flex; + flex-direction: row; + gap: 15px; +} +.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); } /* File: resources/css/components/grid.css */ @@ -1721,6 +1805,196 @@ 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); +} + + + /* File: resources/css/components/settings.css */ .\$settings-dropdown { position: absolute; @@ -1946,7 +2220,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; @@ -2054,6 +2328,7 @@ ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 15px; + margin-bottom: 30px; } .\$entry-gallery-item { @@ -2064,10 +2339,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; } } } @@ -2077,6 +2423,186 @@ 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; + + 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; + } + } + } +} + +.\$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; + } +} + /* File: resources/css/layout/menu.css */ #menu { diff --git a/templates/public/topbar_actions.html b/templates/public/topbar_actions.html index b5e8058..f7282a3 100644 --- a/templates/public/topbar_actions.html +++ b/templates/public/topbar_actions.html @@ -16,7 +16,7 @@ - + From 039f32872c0d1abd5cfb2a432f2396b15712cefd Mon Sep 17 00:00:00 2001 From: Benjamin Date: Tue, 16 Jun 2026 16:21:43 +0200 Subject: [PATCH 5/9] A lot of things --- style_properties.less | 1 + style_properties/_metadata.json | 3 + style_properties/publicLogoUrl.json | 17 + templates/_metadata.json | 22 +- templates/public/PAGE_CONTAINER.html | 29 +- templates/public/extra.less | 2170 +++++++++++++++++- templates/public/misc_preferences_popup.html | 55 + templates/public/romhackplaza_css.html | 3 + templates/public/romhackplaza_js.html | 6 + templates/public/topbar_actions.html | 25 +- 10 files changed, 2286 insertions(+), 45 deletions(-) create mode 100644 style_properties/publicLogoUrl.json create mode 100644 templates/public/misc_preferences_popup.html diff --git a/style_properties.less b/style_properties.less index 503f54b..5bcd5a9 100644 --- a/style_properties.less +++ b/style_properties.less @@ -44,6 +44,7 @@ @xf-paletteNeutral1: #f1f1f1; @xf-paletteNeutral2: #a1a1aa; @xf-paletteNeutral3: #111111; +@xf-publicLogoUrl: ~'data/assets/logo_default/plaza-logo-wide.webp'; @xf-selectedItemBgColor: @xf-paletteAccent1; @xf-selectedItemColor: @xf-paletteAccent3; @xf-styleType: dark; diff --git a/style_properties/_metadata.json b/style_properties/_metadata.json index d2c836b..ecb9028 100644 --- a/style_properties/_metadata.json +++ b/style_properties/_metadata.json @@ -131,6 +131,9 @@ "paletteNeutral3.json": { "hash": "1ec2ef5d3d83ad10b6b7232aaa08c440" }, + "publicLogoUrl.json": { + "hash": "aabe78e8cf804421f6dfa2a20b5028da" + }, "selectedItemBgColor.json": { "hash": "1b6dcccfb12810ca097e9609b6190590" }, diff --git a/style_properties/publicLogoUrl.json b/style_properties/publicLogoUrl.json new file mode 100644 index 0000000..a47fc2b --- /dev/null +++ b/style_properties/publicLogoUrl.json @@ -0,0 +1,17 @@ +{ + "group_name": "basic", + "title": "Logo URL", + "description": "The path from your XenForo root directory to your logo. If you specify alternate variations, they should be the same size. If you specify an SVG, you should set Emails > Email logo URL to a PNG, or similar, for better compatibility.", + "property_type": "value", + "css_components": [], + "value_type": "string", + "value_parameters": "asset=logo", + "has_variations": true, + "depends_on": "", + "value_group": "logo", + "property_value": { + "default": "data/assets/logo_default/plaza-logo-wide.webp", + "alternate": "data/assets/logo_alternate/plaza-logo-wide.webp" + }, + "display_order": 101 +} \ No newline at end of file diff --git a/templates/_metadata.json b/templates/_metadata.json index 30df93d..84af3b4 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": "122ec8228c6c2b8046c4d75aa413e316" + "hash": "a857862c1389c9a7592865e46a440848" }, "public/account_alerts_popup.html": { "addon_id": "XF", @@ -11,6 +11,12 @@ "version_string": "2.3.10", "hash": "625739bb3c29b990a3dfc58e44fd24e8" }, + "public/account_preferences_popup.html": { + "addon_id": "RomhackPlaza/Master", + "version_id": 1000000, + "version_string": "1.0.0", + "hash": "5de44b0169e7c63fb664aefc04832ba3" + }, "public/alert_macros.html": { "addon_id": "XF", "version_id": 2031070, @@ -27,7 +33,7 @@ "addon_id": "XF", "version_id": 2031070, "version_string": "2.3.10", - "hash": "e5bc61bbe761757ea341047fe034fc40" + "hash": "3944286126e45dbc6af560fd1618744e" }, "public/member_tooltip.html": { "addon_id": "XF", @@ -41,22 +47,28 @@ "version_string": "2.3.10", "hash": "5a95069e23fb2a8c740d3d380a0feb34" }, + "public/misc_preferences_popup.html": { + "addon_id": "RomhackPlaza/Master", + "version_id": 1000000, + "version_string": "1.0.0", + "hash": "35f51014f2dfed0104697930d0eff39e" + }, "public/romhackplaza_css.html": { "addon_id": "", "version_id": 0, "version_string": "", - "hash": "9f45a4c55e49ec4481f9e58b20038717" + "hash": "7ef3afe6786ee66da180c97f23f17fcd" }, "public/romhackplaza_js.html": { "addon_id": "", "version_id": 0, "version_string": "", - "hash": "30324ecf51ac365509fce5ef1db2ecd1" + "hash": "211bbfb5f0c06de1d7c6a662d8580604" }, "public/topbar_actions.html": { "addon_id": "RomhackPlaza/Master", "version_id": 1000000, "version_string": "1.0.0", - "hash": "883175f080ec2926eca33fb50f0def1e" + "hash": "c69a27c5c117caf5625183e0e627c89d" } } \ No newline at end of file diff --git a/templates/public/PAGE_CONTAINER.html b/templates/public/PAGE_CONTAINER.html index c5c9617..39299d3 100644 --- a/templates/public/PAGE_CONTAINER.html +++ b/templates/public/PAGE_CONTAINER.html @@ -85,26 +85,28 @@
- - - -
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 From 57d7b613cdbfbccb6b95272c84673b68056dc0b6 Mon Sep 17 00:00:00 2001 From: Benjamin Date: Tue, 23 Jun 2026 19:24:37 +0200 Subject: [PATCH 7/9] Migration complete --- templates/_metadata.json | 8 +- templates/public/PAGE_CONTAINER.html | 71 +- templates/public/extra.less | 1853 ++++++++++++++++++++++++- templates/public/romhackplaza_js.html | 73 +- templates/public/topbar_actions.html | 64 +- 5 files changed, 1956 insertions(+), 113 deletions(-) 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 @@ - + - + - +
+ +
+ + + + +
+ + From 055be8e462f4f1e3160a7cbb7323da3b0b4b7586 Mon Sep 17 00:00:00 2001 From: Benjamin Date: Wed, 24 Jun 2026 19:20:32 +0200 Subject: [PATCH 8/9] SEO Time --- .../public/account_preferences_popup.html | 53 +++++++++++++++++++ 1 file changed, 53 insertions(+) create mode 100644 templates/public/account_preferences_popup.html 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 +
+ + + + + + +
+ +
+ +
+
+ + Account +
+ + + XenForo settings + + +
+ \ No newline at end of file From 6838df4c44c8dfb4de7673d1fd0fff8ac9a645e6 Mon Sep 17 00:00:00 2001 From: Benjamin Date: Sun, 28 Jun 2026 14:07:20 +0200 Subject: [PATCH 9/9] Update menu entries and fixes some profile picture problems. Added help pages too. --- assets.json | 4 +++- templates/_metadata.json | 4 ++-- templates/public/PAGE_CONTAINER.html | 8 ++++++-- templates/public/extra.less | 14 ++++++++++++++ 4 files changed, 25 insertions(+), 5 deletions(-) diff --git a/assets.json b/assets.json index 0637a08..d1abce8 100644 --- a/assets.json +++ b/assets.json @@ -1 +1,3 @@ -[] \ No newline at end of file +{ + "romhackplaza": "data/assets/romhackplaza" +} \ No newline at end of file diff --git a/templates/_metadata.json b/templates/_metadata.json index 02b84de..a06ce4a 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": "bbe8ebb41f6606f1f41782ba1aaa5509" + "hash": "09489ca3208db67cf6add9779edd76be" }, "public/account_alerts_popup.html": { "addon_id": "XF", @@ -39,7 +39,7 @@ "addon_id": "XF", "version_id": 2031070, "version_string": "2.3.10", - "hash": "e96c4ea665df26ce03dd38cd21ebc565" + "hash": "278b91ff307ed1d1c634eee490ff8653" }, "public/member_tooltip.html": { "addon_id": "XF", diff --git a/templates/public/PAGE_CONTAINER.html b/templates/public/PAGE_CONTAINER.html index 5d70a44..b578298 100644 --- a/templates/public/PAGE_CONTAINER.html +++ b/templates/public/PAGE_CONTAINER.html @@ -100,8 +100,12 @@
{{ $navEntry.title }}
- - {{ $childNavEntry.title }} + + {{ $childNavEntry.title }}
diff --git a/templates/public/extra.less b/templates/public/extra.less index fd587f1..cfdded9 100644 --- a/templates/public/extra.less +++ b/templates/public/extra.less @@ -71,6 +71,9 @@ ul { /* Menu settings */ --menu-size: 260px; --menu-user-avatar-bg: #555; + + /* Gap */ + --gap: 15px; } .\$light-mode { @@ -132,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; @@ -144,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; @@ -183,6 +188,7 @@ ul { font-size: 1.1rem; margin-bottom: 5px; line-height: 1.3; + word-wrap: break-word; } .\$entry-card-author { @@ -5277,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;