A lot of things.

style_properties.less

@@ -14,10 +14,12 @@
 @xf-borderRadiusMedium: 0px;
 @xf-borderRadiusSmall: 0px;
 @xf-buttonBg: @xf-paletteColor3;
+@xf-buttonCtaBg: @xf-paletteAccent2;
 @xf-buttonPrimaryBg: @xf-paletteAccent3;
 @xf-buttonTextColor: @xf-paletteNeutral1;
 @xf-chromeBg: @xf-paletteColor1;
 @xf-chromeTextColor: @xf-paletteNeutral1;
+@xf-contentAccentBg: @xf-paletteAccent1;
 @xf-contentAltBg: @xf-paletteColor3;
 @xf-contentBg: @xf-paletteColor2;
 @xf-contentHighlightBg: @xf-paletteColor3;
@@ -25,11 +27,13 @@
 @xf-errorColor: @xf-paletteNeutral1;
 @xf-fontFamilyBody: 'Segoe UI', 'San Francisco', 'Helvetica Neue', sans-serif;
 @xf-fontFamilyUi: 'Segoe UI', 'San Francisco', 'Helvetica Neue', sans-serif;
+@xf-inlineModHighlightColor: @xf-paletteAccent1;
 @xf-linkColor: @xf-paletteAccent3;
 @xf-linkHoverColor: @xf-paletteAccent2;
 @xf-linkUgcColor: @xf-paletteAccent3;
 @xf-linkUgcHoverColor: @xf-paletteAccent2;
 @xf-pageBg: @xf-paletteColor1;
+@xf-paletteAccent1: hsl(35, 90%, 95%);
 @xf-paletteAccent2: #e56700;
 @xf-paletteAccent3: #ff7300;
 @xf-paletteColor1: #1e1e1e;
@@ -40,14 +44,19 @@
 @xf-paletteNeutral1: #f1f1f1;
 @xf-paletteNeutral2: #a1a1aa;
 @xf-paletteNeutral3: #111111;
+@xf-selectedItemBgColor: @xf-paletteAccent1;
+@xf-selectedItemColor: @xf-paletteAccent3;
 @xf-styleType: dark;
 @xf-subNavBg: @xf-paletteColor2;
 @xf-successBg: #81c784;
 @xf-successColor: @xf-paletteNeutral1;
 @xf-successFeatureColor: #388e3c;
 @xf-textColor: @xf-paletteNeutral1;
+@xf-textColorAccentContent: @xf-paletteAccent3;
+@xf-textColorDimmed: mix(@xf-textColor, @xf-textColorMuted);
 @xf-textColorEmphasized: @xf-paletteAccent3;
 @xf-textColorFeature: @xf-paletteNeutral1;
+@xf-textColorMuted: @xf-paletteNeutral2;
 
 .xf-blockTabHeaderSelected()
 {

style_properties/_metadata.json

@@ -1,33 +1,33 @@
 {
     "blockTabHeaderBg.json": {
-        "hash": "5207750cec31f74935a0c209f2bb7d5d"
+        "hash": "f548168a30a1d58f885379c826512664"
     },
     "blockTabHeaderSelected.json": {
         "hash": "47eac3b302ad0fe474a0d0960d01e059"
     },
     "blockTabHeaderTextColor.json": {
-        "hash": "d2d647878d3725763debf391d47486db"
+        "hash": "60987b64d0d5440a964a29356f62c9a6"
     },
     "borderColor.json": {
-        "hash": "d336471427f3a4028996bddb971f2afa"
+        "hash": "188643a00ec1edff6b6c9a56ac2ee460"
     },
     "borderColorAccentContent.json": {
-        "hash": "f2aff3c91a3241c9203b07e0c574828c"
+        "hash": "d66b2a8f03254ebf5526514258d40246"
     },
     "borderColorFaint.json": {
-        "hash": "be6f17463760417b337cebbd89773430"
+        "hash": "7be6c7b8d9b69a388381311c812ac54f"
     },
     "borderColorFeature.json": {
-        "hash": "2d8206ba58e695a661d20712db761817"
+        "hash": "166710f3e43991e1d4693c735f13d16c"
     },
     "borderColorHeavy.json": {
-        "hash": "ad04822f5a3a42927dd967c341e45d63"
+        "hash": "1f06279972da1695c6b46f21b0e92ab5"
     },
     "borderColorHighlight.json": {
-        "hash": "2ab3fdc69004f2f6a50af84ad45cc7c2"
+        "hash": "7e4e4b3b3d1483dd69b4cd2cec00ec2a"
     },
     "borderColorLight.json": {
-        "hash": "aff3cdcedc1516d511dd6aca180a8236"
+        "hash": "e505c1138e48608af68155d642da1c5f"
     },
     "borderRadiusLarge.json": {
         "hash": "6c8e75e1fcedd0b096d7bf911230a1c4"
@@ -39,31 +39,37 @@
         "hash": "03a46b0de545083de0e402a483ca6f1e"
     },
     "buttonBg.json": {
-        "hash": "a8535a0dff9ac6ed83955c83d73253a0"
+        "hash": "c1634e1f6ff0cac089c1326d49980800"
+    },
+    "buttonCtaBg.json": {
+        "hash": "810922cf9b02cafca3cb1476eeb19dbc"
     },
     "buttonPrimaryBg.json": {
-        "hash": "9d6e7069664536ec94ec4a9cb00ae102"
+        "hash": "20d797f8ed23f15e4d4f5489eff32d27"
     },
     "buttonTextColor.json": {
-        "hash": "474dfe468f35e3a7f7f7744620b9aafa"
+        "hash": "ab55be34da1e9618d8a1c11ba00c9cae"
     },
     "chromeBg.json": {
-        "hash": "7fbcf3a7cfd4a1a7cf052382201f61c5"
+        "hash": "57cea2ca2670bbc1efd611347e7ef7fa"
     },
     "chromeTextColor.json": {
-        "hash": "7d59fddb50e545f6dc4ee746d57300f9"
+        "hash": "95ef3871aec2885a46045ed9117f32ca"
+    },
+    "contentAccentBg.json": {
+        "hash": "6c073c7846e2fcbfb6e42e31ee12e149"
     },
     "contentAltBg.json": {
-        "hash": "475dbbcaf0266619fc0013038f6e1e9e"
+        "hash": "0468aaff60170b86470fae92621d5451"
     },
     "contentBg.json": {
-        "hash": "d5e9973a4e83961dc45fdaaf6e81c83b"
+        "hash": "a602585bd026fe54b911c34051a92f64"
     },
     "contentHighlightBg.json": {
-        "hash": "7ee9346c8d25ea473dacd9a9e21206e7"
+        "hash": "3f25b8f5a6851ecae0eaf5e3791c9cd9"
     },
     "errorBg.json": {
-        "hash": "5b0fa167f49f5c9955d7946d5e102f4c"
+        "hash": "0640f2a117475e7615a8004007937f3a"
     },
     "errorColor.json": {
         "hash": "e4469cb3a0e2c9cdc3840008700d8742"
@@ -74,73 +80,94 @@
     "fontFamilyUi.json": {
         "hash": "45a85d0b24fa4ea774734402210aaf2e"
     },
+    "inlineModHighlightColor.json": {
+        "hash": "cb98086bf3814d6b4322d49d2bd5b22b"
+    },
     "linkColor.json": {
-        "hash": "7ca02736780e9e4b47bf7d6d960bcffe"
+        "hash": "9831d4fa8c2918fc50b50c90388192e2"
     },
     "linkHoverColor.json": {
-        "hash": "24233df430149979043c3864a9e94d4d"
+        "hash": "e66a8617ad8ea84d1c9e688acc427e07"
     },
     "linkUgcColor.json": {
-        "hash": "a092f48a4f951cf3e92ed461659ae894"
+        "hash": "1a38ff8d88512e77e68c0931ee7f72d5"
     },
     "linkUgcHoverColor.json": {
-        "hash": "2e1385c3bfe51e1874c0ec8805217d8d"
+        "hash": "fd483e9f6ebed528993ea0c5b3db6880"
     },
     "pageBg.json": {
-        "hash": "3975020da986bf3e13a65be134449908"
+        "hash": "25b20f46219dd7b5cbccc5a1bc93d63d"
+    },
+    "paletteAccent1.json": {
+        "hash": "87cf0a292eb7205172307c668732865b"
     },
     "paletteAccent2.json": {
-        "hash": "00cb79f56e2ae668475327758cdd4ce2"
+        "hash": "4349b4660d958eb33ab63cef998e4f17"
     },
     "paletteAccent3.json": {
-        "hash": "e9322fb2aa0043a573713fc3f96ca79a"
+        "hash": "56ba082c5e25fc8d3033242058d2de50"
     },
     "paletteColor1.json": {
-        "hash": "976763c8be910c28f4c0008c9a277448"
+        "hash": "5d31b63804de05124fff929c11b5267f"
     },
     "paletteColor2.json": {
-        "hash": "eecdd3bf62255ec43dfc912fb56ab08c"
+        "hash": "33c7c95dcc4c860a1adb200e7f852709"
     },
     "paletteColor3.json": {
-        "hash": "e1603121b3eee6f5c4518966d685ef69"
+        "hash": "1eb9e549beb1af1ccbb432382f2a32f0"
     },
     "paletteColor4.json": {
-        "hash": "c645a133d49ed59c98e33fe3cc17b5c4"
+        "hash": "e9faae6096c6bdfbab02281e1db92805"
     },
     "paletteColor5.json": {
-        "hash": "23dedee0b4f9b9b88f3e99a5135dbfca"
+        "hash": "567468795753c5a7111a5f866ee32a09"
     },
     "paletteNeutral1.json": {
-        "hash": "2a6c79989236ec6cbc8bf81344b52496"
+        "hash": "c3cdb06fe904db889e392ccf4446102b"
     },
     "paletteNeutral2.json": {
-        "hash": "e6d5fa3553c3542a42c954eed332dc47"
+        "hash": "06b15abfcfd3ec5eb01c917d0e6f12d9"
     },
     "paletteNeutral3.json": {
-        "hash": "e08775923d2c98300549be6ed17147d8"
+        "hash": "1ec2ef5d3d83ad10b6b7232aaa08c440"
+    },
+    "selectedItemBgColor.json": {
+        "hash": "1b6dcccfb12810ca097e9609b6190590"
+    },
+    "selectedItemColor.json": {
+        "hash": "b31443445198bba66ac1fe266b242e27"
     },
     "styleType.json": {
         "hash": "a06efd294967581901bd111dfe7511c2"
     },
     "subNavBg.json": {
-        "hash": "b61b38b236ab81ab58134cac3fa4963b"
+        "hash": "cf02b59b25e4764d10333085d206326e"
     },
     "successBg.json": {
-        "hash": "1c9a192fe62a1bdbaf49d0d776919de8"
+        "hash": "e9a29a0bf4949a28c64b0379c43d362c"
     },
     "successColor.json": {
-        "hash": "c17c8090edddc7a86df397787808c105"
+        "hash": "1448166e4c2a23f70a2f41568ec6f52c"
     },
     "successFeatureColor.json": {
-        "hash": "25ab19e3c11c371f8b53ad56af94a5a0"
+        "hash": "915e092c9c59a762d40a7b6a0c80ceca"
     },
     "textColor.json": {
-        "hash": "df26881141502f16be13b75b9903f48f"
+        "hash": "3707f47d0f8dc6307af0bbaa21f2a5d9"
+    },
+    "textColorAccentContent.json": {
+        "hash": "a77a12cc25c97dbec7938c01a50357ac"
+    },
+    "textColorDimmed.json": {
+        "hash": "f8a9b3ad55cabe63e15bbb285598e615"
     },
     "textColorEmphasized.json": {
-        "hash": "7069705f62fdf89df20fcc7eab85959e"
+        "hash": "9bc63d4911cbfaf41224390ac3595d0b"
     },
     "textColorFeature.json": {
-        "hash": "f149f8945b9e6497264151339755a294"
+        "hash": "982f1f7d5af442215b1feb98243f51a7"
+    },
+    "textColorMuted.json": {
+        "hash": "b13405edd626276a29712e73a70dbe34"
     }
 }

style_properties/blockTabHeaderBg.json

@@ -10,8 +10,7 @@
     "depends_on": "",
     "value_group": "blockTabHeader",
     "property_value": {
-        "default": "@xf-paletteColor2",
+        "default": "@xf-paletteColor2"
-        "alternate": "@xf-paletteColor4"
     },
     "display_order": 6500
 }

style_properties/blockTabHeaderTextColor.json

@@ -10,8 +10,7 @@
     "depends_on": "",
     "value_group": "blockTabHeader",
     "property_value": {
-        "default": "@xf-paletteNeutral1",
+        "default": "@xf-paletteNeutral1"
-        "alternate": "@xf-paletteColor2"
     },
     "display_order": 6600
 }

style_properties/borderColor.json

@@ -10,8 +10,7 @@
     "depends_on": "",
     "value_group": "borderBasic",
     "property_value": {
-        "default": "@xf-paletteColor5",
+        "default": "@xf-paletteColor5"
-        "alternate": "xf-intensify(@xf-contentBg,  10%)"
     },
     "display_order": 4000
 }

style_properties/borderColorAccentContent.json

@@ -10,8 +10,7 @@
     "depends_on": "",
     "value_group": "borderOther",
     "property_value": {
-        "default": "@xf-paletteAccent2",
+        "default": "@xf-paletteAccent2"
-        "alternate": "mix(@xf-paletteAccent3, @xf-paletteAccent2)"
     },
     "display_order": 5200
 }

style_properties/borderColorFaint.json

@@ -10,8 +10,7 @@
     "depends_on": "",
     "value_group": "borderBasic",
     "property_value": {
-        "default": "@xf-paletteColor5",
+        "default": "@xf-paletteColor5"
-        "alternate": "xf-diminish(@xf-borderColor, 6%)"
     },
     "display_order": 4100
 }

style_properties/borderColorFeature.json

@@ -10,8 +10,7 @@
     "depends_on": "",
     "value_group": "borderOther",
     "property_value": {
-        "default": "@xf-paletteAccent3",
+        "default": "@xf-paletteAccent3"
-        "alternate": "@xf-paletteColor3"
     },
     "display_order": 5100
 }

style_properties/borderColorHeavy.json

@@ -10,8 +10,7 @@
     "depends_on": "",
     "value_group": "borderBasic",
     "property_value": {
-        "default": "@xf-paletteColor5",
+        "default": "@xf-paletteColor5"
-        "alternate": "xf-intensify(@xf-borderColor, 4%)"
     },
     "display_order": 4300
 }

style_properties/borderColorHighlight.json

@@ -10,8 +10,7 @@
     "depends_on": "",
     "value_group": "borderOther",
     "property_value": {
-        "default": "@xf-paletteAccent3",
+        "default": "@xf-paletteAccent3"
-        "alternate": "@xf-paletteColor4"
     },
     "display_order": 5000
 }

style_properties/borderColorLight.json

@@ -10,8 +10,7 @@
     "depends_on": "",
     "value_group": "borderBasic",
     "property_value": {
-        "default": "@xf-paletteColor5",
+        "default": "@xf-paletteColor5"
-        "alternate": "xf-diminish(@xf-borderColor, 4%)"
     },
     "display_order": 4200
 }

style_properties/buttonBg.json

@@ -10,8 +10,7 @@
     "depends_on": "",
     "value_group": "buttons",
     "property_value": {
-        "default": "@xf-paletteColor3",
+        "default": "@xf-paletteColor3"
-        "alternate": "@xf-paletteColor4"
     },
     "display_order": 8200
 }

style_properties/buttonCtaBg.json

@@ -0,0 +1,16 @@
+{
+    "group_name": "color",
+    "title": "Call-to-action button background",
+    "description": "",
+    "property_type": "value",
+    "css_components": [],
+    "value_type": "color",
+    "value_parameters": "",
+    "has_variations": true,
+    "depends_on": "",
+    "value_group": "buttons",
+    "property_value": {
+        "default": "@xf-paletteAccent2"
+    },
+    "display_order": 8400
+}

style_properties/buttonPrimaryBg.json

@@ -10,8 +10,7 @@
     "depends_on": "",
     "value_group": "buttons",
     "property_value": {
-        "default": "@xf-paletteAccent3",
+        "default": "@xf-paletteAccent3"
-        "alternate": "@xf-paletteColor3"
     },
     "display_order": 8300
 }

style_properties/buttonTextColor.json

@@ -10,8 +10,7 @@
     "depends_on": "",
     "value_group": "buttons",
     "property_value": {
-        "default": "@xf-paletteNeutral1",
+        "default": "@xf-paletteNeutral1"
-        "alternate": "@xf-paletteColor1"
     },
     "display_order": 8100
 }

style_properties/chromeBg.json

@@ -10,8 +10,7 @@
     "depends_on": "",
     "value_group": "chrome",
     "property_value": {
-        "default": "@xf-paletteColor1",
+        "default": "@xf-paletteColor1"
-        "alternate": "@xf-paletteColor5"
     },
     "display_order": 6000
 }

style_properties/chromeTextColor.json

@@ -10,8 +10,7 @@
     "depends_on": "",
     "value_group": "chrome",
     "property_value": {
-        "default": "@xf-paletteNeutral1",
+        "default": "@xf-paletteNeutral1"
-        "alternate": "@xf-paletteColor2"
     },
     "display_order": 6050
 }

style_properties/contentAccentBg.json

@@ -0,0 +1,16 @@
+{
+    "group_name": "color",
+    "title": "Accented content background color",
+    "description": "This background color is used for further differentiation from regular content",
+    "property_type": "value",
+    "css_components": [],
+    "value_type": "color",
+    "value_parameters": "",
+    "has_variations": true,
+    "depends_on": "",
+    "value_group": "contentBackground",
+    "property_value": {
+        "default": "@xf-paletteAccent1"
+    },
+    "display_order": 2400
+}

style_properties/contentAltBg.json

@@ -10,8 +10,7 @@
     "depends_on": "",
     "value_group": "contentBackground",
     "property_value": {
-        "default": "@xf-paletteColor3",
+        "default": "@xf-paletteColor3"
-        "alternate": "darken(@xf-contentBg, 4%)"
     },
     "display_order": 2200
 }

style_properties/contentBg.json

@@ -10,8 +10,7 @@
     "depends_on": "",
     "value_group": "contentBackground",
     "property_value": {
-        "default": "@xf-paletteColor2",
+        "default": "@xf-paletteColor2"
-        "alternate": "@xf-paletteNeutral3"
     },
     "display_order": 2000
 }

style_properties/contentHighlightBg.json

@@ -10,8 +10,7 @@
     "depends_on": "",
     "value_group": "contentBackground",
     "property_value": {
-        "default": "@xf-paletteColor3",
+        "default": "@xf-paletteColor3"
-        "alternate": "@xf-paletteColor5"
     },
     "display_order": 2300
 }

style_properties/errorBg.json

@@ -10,8 +10,7 @@
     "depends_on": "",
     "value_group": "errorMessage",
     "property_value": {
-        "default": "#e57373",
+        "default": "#e57373"
-        "alternate": "hsl(358, 70%, 20%)"
     },
     "display_order": 10410
 }

style_properties/inlineModHighlightColor.json

@@ -0,0 +1,16 @@
+{
+    "group_name": "color",
+    "title": "Inline moderation highlight color",
+    "description": "When content is selected for inline moderation, its background color will be replaced with this",
+    "property_type": "value",
+    "css_components": [],
+    "value_type": "color",
+    "value_parameters": "",
+    "has_variations": true,
+    "depends_on": "",
+    "value_group": "contentBackground",
+    "property_value": {
+        "default": "@xf-paletteAccent1"
+    },
+    "display_order": 2500
+}

style_properties/linkColor.json

@@ -10,8 +10,7 @@
     "depends_on": "",
     "value_group": "links",
     "property_value": {
-        "default": "@xf-paletteAccent3",
+        "default": "@xf-paletteAccent3"
-        "alternate": "@xf-paletteColor2"
     },
     "display_order": 1000
 }

style_properties/linkHoverColor.json

@@ -10,8 +10,7 @@
     "depends_on": "",
     "value_group": "links",
     "property_value": {
-        "default": "@xf-paletteAccent2",
+        "default": "@xf-paletteAccent2"
-        "alternate": "@xf-paletteColor1"
     },
     "display_order": 1100
 }

style_properties/linkUgcColor.json

@@ -10,8 +10,7 @@
     "depends_on": "",
     "value_group": "links",
     "property_value": {
-        "default": "@xf-paletteAccent3",
+        "default": "@xf-paletteAccent3"
-        "alternate": "@xf-paletteColor2"
     },
     "display_order": 1200
 }

style_properties/linkUgcHoverColor.json

@@ -10,8 +10,7 @@
     "depends_on": "",
     "value_group": "links",
     "property_value": {
-        "default": "@xf-paletteAccent2",
+        "default": "@xf-paletteAccent2"
-        "alternate": "@xf-paletteColor1"
     },
     "display_order": 1300
 }

style_properties/pageBg.json

@@ -10,8 +10,7 @@
     "depends_on": "",
     "value_group": "contentBackground",
     "property_value": {
-        "default": "@xf-paletteColor1",
+        "default": "@xf-paletteColor1"
-        "alternate": "darken(@xf-contentBg, 8%)"
     },
     "display_order": 2100
 }

style_properties/paletteAccent1.json

@@ -0,0 +1,16 @@
+{
+    "group_name": "palette",
+    "title": "Accent 1",
+    "description": "",
+    "property_type": "value",
+    "css_components": [],
+    "value_type": "color",
+    "value_parameters": "hidePalette=true",
+    "has_variations": true,
+    "depends_on": "",
+    "value_group": "accent",
+    "property_value": {
+        "default": "hsl(35, 90%, 95%)"
+    },
+    "display_order": 2000
+}

style_properties/paletteAccent2.json

@@ -10,8 +10,7 @@
     "depends_on": "",
     "value_group": "accent",
     "property_value": {
-        "default": "#e56700",
+        "default": "#e56700"
-        "alternate": "hsl(35, 85%, 45%)"
     },
     "display_order": 2100
 }

style_properties/paletteAccent3.json

@@ -11,7 +11,7 @@
     "value_group": "accent",
     "property_value": {
         "default": "#ff7300",
-        "alternate": "hsl(35, 85%, 15%)"
+        "alternate": "#e56700"
     },
     "display_order": 2200
 }

style_properties/paletteColor1.json

@@ -11,7 +11,7 @@
     "value_group": "primary",
     "property_value": {
         "default": "#1e1e1e",
-        "alternate": "hsl(206, 60%, 75%)"
+        "alternate": "#f0f0f0"
     },
     "display_order": 1000
 }

style_properties/paletteColor2.json

@@ -11,7 +11,7 @@
     "value_group": "primary",
     "property_value": {
         "default": "#252526",
-        "alternate": "hsl(204, 60%, 60%)"
+        "alternate": "#ffffff"
     },
     "display_order": 1100
 }

style_properties/paletteColor3.json

@@ -11,7 +11,7 @@
     "value_group": "primary",
     "property_value": {
         "default": "#2d2d30",
-        "alternate": "hsl(205, 60%, 40%)"
+        "alternate": "#e8e8e8"
     },
     "display_order": 1200
 }

style_properties/paletteColor4.json

@@ -11,7 +11,7 @@
     "value_group": "primary",
     "property_value": {
         "default": "#3e3e42",
-        "alternate": "hsl(205, 60%, 20%)"
+        "alternate": "#dcdcdc"
     },
     "display_order": 1300
 }

style_properties/paletteColor5.json

@@ -11,7 +11,7 @@
     "value_group": "primary",
     "property_value": {
         "default": "#3f3f46",
-        "alternate": "hsl(205, 60%, 10%)"
+        "alternate": "#d0d0d0"
     },
     "display_order": 1400
 }

style_properties/paletteNeutral1.json

@@ -11,7 +11,7 @@
     "value_group": "neutral",
     "property_value": {
         "default": "#f1f1f1",
-        "alternate": "hsl(0, 0%, 100%)"
+        "alternate": "#454545"
     },
     "display_order": 3000
 }

style_properties/paletteNeutral2.json

@@ -11,7 +11,7 @@
     "value_group": "neutral",
     "property_value": {
         "default": "#a1a1aa",
-        "alternate": "hsl(0, 0%, 54%)"
+        "alternate": "#737373"
     },
     "display_order": 3100
 }

style_properties/paletteNeutral3.json

@@ -10,8 +10,7 @@
     "depends_on": "",
     "value_group": "neutral",
     "property_value": {
-        "default": "#111111",
+        "default": "#111111"
-        "alternate": "hsl(0, 0%, 8%)"
     },
     "display_order": 3200
 }

style_properties/selectedItemBgColor.json

@@ -0,0 +1,16 @@
+{
+    "group_name": "color",
+    "title": "Selected item background color",
+    "description": "",
+    "property_type": "value",
+    "css_components": [],
+    "value_type": "color",
+    "value_parameters": "",
+    "has_variations": true,
+    "depends_on": "",
+    "value_group": "selectedItems",
+    "property_value": {
+        "default": "@xf-paletteAccent1"
+    },
+    "display_order": 9200
+}

style_properties/selectedItemColor.json

@@ -0,0 +1,16 @@
+{
+    "group_name": "color",
+    "title": "Selected item color",
+    "description": "",
+    "property_type": "value",
+    "css_components": [],
+    "value_type": "color",
+    "value_parameters": "",
+    "has_variations": true,
+    "depends_on": "",
+    "value_group": "selectedItems",
+    "property_value": {
+        "default": "@xf-paletteAccent3"
+    },
+    "display_order": 9100
+}

style_properties/subNavBg.json

@@ -10,8 +10,7 @@
     "depends_on": "",
     "value_group": "chrome",
     "property_value": {
-        "default": "@xf-paletteColor2",
+        "default": "@xf-paletteColor2"
-        "alternate": "@xf-contentAltBg"
     },
     "display_order": 6080
 }

style_properties/successBg.json

@@ -10,8 +10,7 @@
     "depends_on": "",
     "value_group": "successMessage",
     "property_value": {
-        "default": "#81c784",
+        "default": "#81c784"
-        "alternate": "hsl(122, 70%, 20%)"
     },
     "display_order": 10210
 }

style_properties/successColor.json

@@ -10,8 +10,7 @@
     "depends_on": "",
     "value_group": "successMessage",
     "property_value": {
-        "default": "@xf-paletteNeutral1",
+        "default": "@xf-paletteNeutral1"
-        "alternate": "hsl(116, 70%, 85%)"
     },
     "display_order": 10220
 }

style_properties/successFeatureColor.json

@@ -10,8 +10,7 @@
     "depends_on": "",
     "value_group": "successMessage",
     "property_value": {
-        "default": "#388e3c",
+        "default": "#388e3c"
-        "alternate": "hsl(122, 70%, 50%)"
     },
     "display_order": 10230
 }

style_properties/textColor.json

@@ -10,8 +10,7 @@
     "depends_on": "",
     "value_group": "textBasic",
     "property_value": {
-        "default": "@xf-paletteNeutral1",
+        "default": "@xf-paletteNeutral1"
-        "alternate": "darken(@xf-paletteNeutral1, 12%)"
     },
     "display_order": 100
 }

style_properties/textColorAccentContent.json

@@ -0,0 +1,16 @@
+{
+    "group_name": "color",
+    "title": "Accented content text color",
+    "description": "",
+    "property_type": "value",
+    "css_components": [],
+    "value_type": "color",
+    "value_parameters": "",
+    "has_variations": true,
+    "depends_on": "",
+    "value_group": "textOther",
+    "property_value": {
+        "default": "@xf-paletteAccent3"
+    },
+    "display_order": 3200
+}

style_properties/textColorDimmed.json

@@ -0,0 +1,16 @@
+{
+    "group_name": "color",
+    "title": "Dimmed text color",
+    "description": "Used when less-important text is placed next to normal text",
+    "property_type": "value",
+    "css_components": [],
+    "value_type": "color",
+    "value_parameters": "",
+    "has_variations": true,
+    "depends_on": "",
+    "value_group": "textBasic",
+    "property_value": {
+        "default": "mix(@xf-textColor, @xf-textColorMuted)"
+    },
+    "display_order": 200
+}

style_properties/textColorEmphasized.json

@@ -10,8 +10,7 @@
     "depends_on": "",
     "value_group": "textOther",
     "property_value": {
-        "default": "@xf-paletteAccent3",
+        "default": "@xf-paletteAccent3"
-        "alternate": "@xf-paletteColor1"
     },
     "display_order": 3100
 }

style_properties/textColorFeature.json

@@ -10,8 +10,7 @@
     "depends_on": "",
     "value_group": "textOther",
     "property_value": {
-        "default": "@xf-paletteNeutral1",
+        "default": "@xf-paletteNeutral1"
-        "alternate": "@xf-paletteColor2"
     },
     "display_order": 3000
 }

style_properties/textColorMuted.json

@@ -0,0 +1,16 @@
+{
+    "group_name": "color",
+    "title": "Muted text color",
+    "description": "Text is further de-emphasised using this style",
+    "property_type": "value",
+    "css_components": [],
+    "value_type": "color",
+    "value_parameters": "",
+    "has_variations": true,
+    "depends_on": "",
+    "value_group": "textBasic",
+    "property_value": {
+        "default": "@xf-paletteNeutral2"
+    },
+    "display_order": 300
+}

templates/_metadata.json

@@ -3,7 +3,7 @@
         "addon_id": "XF",
         "version_id": 2031070,
         "version_string": "2.3.10",
-        "hash": "92f8334dbbaac2af86e9e9de3b22fc45"
+        "hash": "122ec8228c6c2b8046c4d75aa413e316"
     },
     "public/account_alerts_popup.html": {
         "addon_id": "XF",
@@ -27,7 +27,7 @@
         "addon_id": "XF",
         "version_id": 2031070,
         "version_string": "2.3.10",
-        "hash": "e0de841c22fac6099c25062c8030fb57"
+        "hash": "e5bc61bbe761757ea341047fe034fc40"
     },
     "public/member_tooltip.html": {
         "addon_id": "XF",
@@ -45,7 +45,7 @@
         "addon_id": "",
         "version_id": 0,
         "version_string": "",
-        "hash": "96718ec22da14ac5d4615109068a2dc2"
+        "hash": "9f45a4c55e49ec4481f9e58b20038717"
     },
     "public/romhackplaza_js.html": {
         "addon_id": "",
@@ -57,6 +57,6 @@
         "addon_id": "RomhackPlaza/Master",
         "version_id": 1000000,
         "version_string": "1.0.0",
-        "hash": "25beddff5231f873351af8fa9ce2e980"
+        "hash": "883175f080ec2926eca33fb50f0def1e"
     }
 }

templates/public/PAGE_CONTAINER.html

@@ -10,7 +10,7 @@
 	data-logged-in="{{ $xf.visitor.user_id ? 'true' : 'false' }}"
 	data-cookie-prefix="{$xf.cookie.prefix}"
 	data-csrf="{{ csrf_token()|escape('js') }}"
-	class="has-no-js {{ $template ? 'template-' . $template : '' }}"
+	class="has-no-js {{ $template ? 'template-' . $template : '' }} {{ $xf.visitor.style_variation === 'alternate' ? '$light-mode' : '' }}"
 	{{ $xf.runJobs ? ' data-run-jobs=""' : '' }}>
 <head>
 	<xf:set var="$siteName" value="{$xf.options.boardTitle}" />
@@ -82,7 +82,7 @@
 </head>
 <body data-template="{$template}">
 
-<div id="app">
+<main id="app">
 	<nav id="menu">
 		<div class="$menu-header">
 			<div class="$menu-logo">
@@ -199,10 +199,12 @@
 				<i data-lucide="menu"></i>
 			</button>
 			
-			<div class="$search-bar">
+			<form class="$search-bar" action="{$xf.options.homePageUrl}/database">
+				<input type="text" name="s" placeholder="Search..." />
+				<button type="submit" class="$search-button">
 					<i data-lucide="search" size="18" color="var(--text2)"></i>
-				<input type="text" placeholder="Search...">
+				</button>
-			</div>
+			</form>
 
 			<xf:include template="topbar_actions" />
 		</header>
@@ -310,7 +312,15 @@
 				arg-variant="bottom" />
 			<xf:ad position="container_breadcrumb_bottom_below" />
 		</div>
+		<div class="u-bottomFixer js-bottomFixTarget">
+			<xf:if is="$notices.floating">
+				<xf:macro id="notice_macros::notice_list" arg-type="floating" arg-notices="{$notices.floating}" />
+			</xf:if>
+			<xf:if is="$notices.bottom_fixer">
+				<xf:macro id="notice_macros::notice_list" arg-type="bottom_fixer" arg-notices="{$notices.bottom_fixer}" />
+			</xf:if>
 		</div>
+	</main>
 
 	<xf:comment>
 		<footer class="p-footer" id="footer">
@@ -417,16 +427,7 @@
 			</div>
 		</footer>
 	</xf:comment>
-</div> <!-- closing p-pageWrapper -->
+</main> <!-- closing p-pageWrapper -->
-
-<div class="u-bottomFixer js-bottomFixTarget">
-	<xf:if is="$notices.floating">
-		<xf:macro id="notice_macros::notice_list" arg-type="floating" arg-notices="{$notices.floating}" />
-	</xf:if>
-	<xf:if is="$notices.bottom_fixer">
-		<xf:macro id="notice_macros::notice_list" arg-type="bottom_fixer" arg-notices="{$notices.bottom_fixer}" />
-	</xf:if>
-</div>
 
 <div class="u-navButtons js-navButtons">
 	<xf:button href="javascript:" class="button--scroll"><xf:fa icon="{{ $xf.isRtl ? 'fa-arrow-right' : 'fa-arrow-left' }}" /><span class="u-srOnly">{{ phrase('back') }}</span></xf:button>

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 {
@@ -71,6 +73,32 @@ ul {
     --menu-user-avatar-bg: #555;
 }
 
+.\$light-mode {
+
+    /* RHPZ color */
+    --rhpz-orange: #ff7300;
+    --rhpz-orange-hover: #e56700;
+
+    /* Background colors */
+    --bg: #f0f0f0;
+    --bg2: #ffffff;
+    --bg3: #e8e8e8;
+    --bg4: #dcdcdc;
+
+    /* Text */
+    --text: #454545;
+    --text2: #737373;
+    --text3: #111111;
+
+    /* Elements */
+    --border: #d0d0d0;
+    --error: #e57373;
+    --info: #1976d2;
+    --success: #81c784;
+    --success2: #388e3c;
+
+}
+
 
 /* File: resources/css/components/cards.css */
 /* STAT CARDS */
@@ -241,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);
@@ -355,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 {
@@ -1333,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 */
@@ -1695,6 +1805,355 @@ 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;
+    top: calc(100% + 8px);
+    right: 0;
+    width: 240px;
+    background-color: var(--bg2);
+    border: 1px solid var(--border);
+    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
+    z-index: 2000;
+}
+
+.\$settings-header {
+    padding: 12px 16px;
+    border-bottom: 1px solid var(--border);
+    background-color: var(--bg3);
+    font-weight: 600;
+    font-size: 0.9rem;
+    color: var(--text);
+}
+
+.\$settings-section {
+    padding: 12px 16px;
+}
+
+.\$settings-section-title {
+    display: flex;
+    align-items: center;
+    gap: 7px;
+    font-size: 0.78rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.7px;
+    color: var(--text2);
+    margin-bottom: 10px;
+}
+
+.\$settings-separator {
+    border-top: 1px solid var(--border);
+}
+
+.\$settings-themes {
+    display: flex;
+    gap: 8px;
+    flex-wrap: wrap;
+}
+
+.\$settings-theme-btn {
+    width: 28px;
+    height: 28px;
+    border-radius: 50%;
+    border: 2px solid transparent;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color:  var(--text);
+    transition: transform 0.15s, border-color 0.15s;
+    padding: 0;
+
+    &:hover {
+        transform: scale(1.15);
+    }
+
+    .\$active {
+        border-color: var(--text);
+        transform: scale(1.1);
+    }
+}
+
+.\$settings-theme-toggle {
+    width: 100%;
+    background-color: var(--bg3);
+    border: 1px solid var(--border);
+    color: var(--text);
+    padding: 8px 12px;
+    cursor: pointer;
+    font-family: var(--typography);
+    font-size: 0.88rem;
+    transition: background-color 0.1s;
+    text-align: left;
+
+    &:hover {
+        background-color: var(--bg4);
+    }
+}
+
+.\$settings-theme-toggle-inner {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.\$settings-theme-toggle-badge {
+    margin-left: auto;
+    background-color: var(--rhpz-orange);
+    color: #111;
+    font-size: 0.65rem;
+    font-weight: 700;
+    padding: 2px 6px;
+}
+
+.\$settings-perpage {
+    display: flex;
+    gap: 6px;
+}
+
+.\$settings-perpage-btn {
+    flex: 1;
+    padding: 6px 4px;
+    background-color: var(--bg3);
+    border: 1px solid var(--border);
+    color: var(--text2);
+    font-size: 0.85rem;
+    cursor: pointer;
+    font-family: var(--typography);
+    transition: all 0.1s;
+
+    &:hover {
+        background-color: var(--bg4);
+        color: var(--text);
+    }
+
+    .\$active {
+        background-color: var(--rhpz-orange);
+        border-color: var(--rhpz-orange);
+        color: var(--text3);
+        font-weight: 600;
+    }
+}
+
+.\$settings-link {
+    display: flex;
+    align-items: center;
+    gap: 9px;
+    padding: 8px 10px;
+    color: var(--text);
+    text-decoration: none;
+    font-size: 0.88rem;
+    transition: background-color 0.1s;
+    border: 1px solid transparent;
+
+    &:hover {
+        background-color: var(--bg3);
+        border-color: var(--border);
+        text-decoration: none;
+    }
+}
+
+.\$settings-link--danger {
+    color: var(--error);
+
+    &:hover {
+        background-color: rgba(229, 115, 115, 0.08);
+        border-color: rgba(229, 115, 115, 0.3);
+    }
+}
+
+
 /* File: resources/css/layout/content.css */
 #main-wrapper {
     flex-grow: 1;
@@ -1761,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;
@@ -1869,6 +2328,7 @@ ul {
         display: grid;
         grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
         gap: 15px;
+        margin-bottom: 30px;
     }
 
     .\$entry-gallery-item {
@@ -1879,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;
         }
     }
 }
@@ -1892,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 {

templates/public/romhackplaza_css.html

@@ -1,3 +1,3 @@
 <style>
-	svg { fill: none !important; }
+	.lucide { fill: none !important; }
 </style>

templates/public/topbar_actions.html

@@ -16,13 +16,13 @@
     </xf:if>
     <xf:if is="$xf.visitor.is_moderator">
         <xf:set var="$topbarModSeparator" value="true" />
-        <a href="#" class="$btn">
+        <a href="{{ $xf.options.homePageUrl }}/modcp" class="$btn">
             <i data-lucide="siren" size="18"></i>
         </a>
         <a href="{{ link('approval-queue') }}" class="$btn">
             <i data-lucide="message-circle-check" size="18"></i>
         </a>
-        <a href="{{ link('reports') }}" class="$btn">
+        <a href="{{ link('reports') }}" class="$btn badgeContainer badgeContainer--visible {{ ($xf.session.reportCounts.total && ($xf.session.reportCounts.lastBuilt > $xf.session.reportLastRead) OR $xf.session.reportCounts.assigned) ? ' badgeContainer--highlighted' : '' }}" data-badge="{{ $xf.session.reportCounts.assigned ? $xf.session.reportCounts.assigned|number . ' / ' . $xf.session.reportCounts.total|number : $xf.session.reportCounts.total|number }}">
             <i data-lucide="triangle-alert" size="18"></i>
         </a>
     </xf:if>