fix(discourse-themes): fix contrast bugs, darkmode scheme and apply cyber glassmorphism styling

2026-08-30 18:16:26 +02:00
parent 3a411c2643
commit d086844d6a
3 changed files with 346 additions and 72 deletions
@@ -1,6 +1,6 @@
 #!/usr/bin/env bash
-# deploy.sh - Deploy and Sync Discourse Themes
-# Domains: info-board.win / w-make.org
+# deploy.sh - Robust Discourse Theme Deploy & Sync Manager
+# Domain: info-board.win / w-make.org
 # Target Host: free-warez.win -> Discourse Container (app)

 set -euo pipefail
@@ -9,59 +9,62 @@ TARGET_HOST="free-warez.win"
 LOCAL_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
 THEMES_DIR="$LOCAL_DIR/themes"

+THEME_ID="${1:-41}"
 echo "🚀 Discourse Theme Deploy & Sync Manager"
-echo "   Target Host: $TARGET_HOST (Discourse container 'app')"
+echo "   Target Theme ID: $THEME_ID"
 echo "========================================================="

-# 1. Check SSH connection
-echo "📡 Checking SSH connection to $TARGET_HOST..."
-if ! ssh -q -o BatchMode=yes -o ConnectTimeout=5 "$TARGET_HOST" exit; then
-    echo "❌ Cannot connect to $TARGET_HOST via SSH."
+if [ "$THEME_ID" = "41" ]; then
+    SCSS_FILE="$THEMES_DIR/41_air_theme/common_scss.scss"
+    TARGET_ID=0
+    FIELD_NAME="scss"
+elif [ "$THEME_ID" = "39" ]; then
+    SCSS_FILE="$THEMES_DIR/39_w-make_theme/common_scss.scss"
+    TARGET_ID=0
+    FIELD_NAME="scss"
+else
+    echo "Usage: ./deploy.sh [41|39]"
    exit 1
 fi

-THEME_ID="${1:-39}"
-
-if [ "$THEME_ID" = "39" ]; then
-    SCSS_FILE="$THEMES_DIR/39_w-make_theme/common_scss.scss"
 if [ ! -f "$SCSS_FILE" ]; then
-        SCSS_FILE="$THEMES_DIR/w-make-theme.scss"
-    fi
-    echo "🔄 Deploying W-MAKE Theme (ID: 39) from $SCSS_FILE..."
-    scp "$SCSS_FILE" "$TARGET_HOST:/tmp/w-make-theme.scss"
-    ssh "$TARGET_HOST" 'docker exec -i app su - discourse -c "psql -d discourse" << "SQL"
-UPDATE theme_fields 
-SET value = pg_read_file('\''/tmp/w-make-theme.scss'\'') 
-WHERE theme_id = 39 AND name = '\''scss'\'';
-
-UPDATE themes 
-SET updated_at = NOW() 
-WHERE id = 39;
-SQL
-rm -f /tmp/w-make-theme.scss
-'
-elif [ "$THEME_ID" = "41" ]; then
-    echo "🔄 Deploying Air Theme (ID: 41) common SCSS..."
-    SCSS_FILE="$THEMES_DIR/41_air_theme/common_scss.scss"
-    scp "$SCSS_FILE" "$TARGET_HOST:/tmp/air-theme.scss"
-    ssh "$TARGET_HOST" 'docker exec -i app su - discourse -c "psql -d discourse" << "SQL"
-UPDATE theme_fields 
-SET value = pg_read_file('\''/tmp/air-theme.scss'\'') 
-WHERE theme_id = 41 AND name = '\''scss'\'' AND target_id = 0;
-
-UPDATE themes 
-SET updated_at = NOW() 
-WHERE id = 41;
-SQL
-rm -f /tmp/air-theme.scss
-'
-else
-    echo "ℹ️ Custom theme ID: $THEME_ID provided."
+    echo "❌ Theme file $SCSS_FILE not found."
+    exit 1
 fi

-# Invalidate cache & recompile
-echo "🔄 Clearing Discourse theme cache..."
-ssh "$TARGET_HOST" 'docker exec -i app su - discourse -c "bundle exec rails runner \"Theme.find_by(id: $THEME_ID)&.changed_fields&.clear; Discourse.cache.clear\" 2>/dev/null || true"'
+echo "🔄 Updating Theme $THEME_ID ($FIELD_NAME, target: $TARGET_ID)..."
+python3 - << PYEOF
+import subprocess

-echo "✅ Discourse theme(s) updated successfully!"
+with open('$SCSS_FILE', 'r', encoding='utf-8') as f:
+    content = f.read()
+
+hex_data = content.encode('utf-8').hex()
+
+sql = f"""
+UPDATE theme_fields 
+SET value = convert_from(decode('{hex_data}', 'hex'), 'UTF8')
+WHERE theme_id = $THEME_ID AND name = '$FIELD_NAME' AND target_id = $TARGET_ID;
+
+UPDATE themes SET updated_at = NOW() WHERE id = $THEME_ID;
+"""
+
+p = subprocess.run(
+    ['ssh', '$TARGET_HOST', 'docker exec -i app su - discourse -c "psql -d discourse"'],
+    input=sql,
+    capture_output=True,
+    text=True
+)
+
+if p.returncode != 0:
+    print("Error:", p.stderr)
+    exit(1)
+else:
+    print(p.stdout.strip())
+PYEOF
+
+echo "🔄 Reloading Unicorn workers to recompile theme assets immediately..."
+ssh "$TARGET_HOST" 'docker exec app sv restart unicorn 2>/dev/null || docker exec app /usr/bin/supervisorctl restart unicorn 2>/dev/null || docker restart app'
+
+echo "✅ Theme $THEME_ID deployed and recompiled!"
 echo "✨ Deployment complete!"
@@ -250,13 +250,8 @@ div.ac-wrap {

 html {
  body:not(.no-ember) {
-    background:
-      linear-gradient(
-        0deg,
-        rgb(var(--primary-rgb), 0.075) 0%,
-        rgb(var(--primary-rgb), 0.075) 100%
-      ),
-      linear-gradient(0deg, var(--secondary) 100%, var(--secondary) 100%);
+    background-color: #050812 !important;
+    color: #f8fafc !important;
  }

  .background-container {
@@ -265,12 +260,20 @@ html {
    left: 0;
    height: 100vh;
    width: 100vw;
-    background: linear-gradient(
-      90deg,
-      var(--tertiary-hover) 0%,
-      var(--tertiary) 100%
-    );
-    clip-path: ellipse(148% 70% at 91% -14%);
+    background: #050812 url('/uploads/default/custom-assets/discourse_cyber_bg.jpg') no-repeat center center fixed !important;
+    background-size: cover !important;
+    opacity: 0.95;
+    pointer-events: none;
+    z-index: -2;
+  }
+
+  .background-container::after {
+    content: '';
+    position: fixed;
+    inset: 0;
+    background: linear-gradient(180deg, rgba(5, 8, 18, 0.75) 0%, rgba(5, 8, 18, 0.92) 100%);
+    pointer-events: none;
+    z-index: -1;
  }

  body.no-ember .background-container {
@@ -279,18 +282,17 @@ html {
 }

 html body #main-outlet {
-  margin-top: 30px;
+  margin-top: 25px;
  margin-bottom: 50px;
-  background: var(--secondary);
-  border-radius: 1em;
-  padding: 3em 3em 5%;
-  max-width: 1150px;
-  padding-bottom: 5% !important; // overriding inline style
-  box-shadow:
-    0 24px 40px rgb(0, 0, 0, 0.07),
-    0 10.8529px 24.1177px rgb(0, 0, 0, 0.0456112),
-    0 4.50776px 10.0172px rgb(0, 0, 0, 0.035),
-    0 1.63037px 3.62304px rgb(0, 0, 0, 0.0243888);
+  background: rgba(10, 15, 28, 0.92) !important;
+  backdrop-filter: blur(24px) saturate(180%) !important;
+  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
+  border: 1px solid rgba(0, 242, 254, 0.22) !important;
+  border-radius: 20px !important;
+  padding: 2.5em 2.5em 5%;
+  max-width: 1180px;
+  padding-bottom: 5% !important;
+  box-shadow: 0 25px 60px -10px rgba(0, 0, 0, 0.8), 0 0 35px rgba(0, 242, 254, 0.15);

  @media screen and (width <= 700px) {
    padding: 1.5em;
@@ -613,3 +615,272 @@ html body #main-outlet {
 .title-voting {
  padding-left: 14px;
 }
+
+
+/* Cyber Header & Accent Line */
+.d-header {
+  background: rgba(8, 12, 24, 0.95) !important;
+  backdrop-filter: blur(20px) saturate(180%) !important;
+  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
+  border-bottom: 1px solid rgba(0, 242, 254, 0.25) !important;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6) !important;
+  position: relative !important;
+}
+
+.d-header::after {
+  content: '' !important;
+  position: absolute !important;
+  bottom: -1px !important;
+  left: 0 !important;
+  right: 0 !important;
+  height: 2px !important;
+  background: linear-gradient(90deg, transparent 0%, #00f2fe 20%, #38bdf8 50%, #10b981 80%, transparent 100%) !important;
+  box-shadow: 0 0 12px #00f2fe;
+  pointer-events: none !important;
+  z-index: 1001 !important;
+}
+
+.d-header .title a img#site-logo,
+.d-header .title img.logo-big {
+  filter: drop-shadow(0 0 14px rgba(0, 242, 254, 0.45));
+  transition: transform 0.25s ease;
+}
+
+.d-header .title a img#site-logo:hover {
+  transform: scale(1.03);
+}
+
+/* Glassmorphism Category & Topic Cards */
+.topic-list-item {
+  background-color: rgba(14, 22, 38, 0.82) !important;
+  border: 1px solid rgba(0, 242, 254, 0.18) !important;
+  border-radius: 14px !important;
+  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4) !important;
+  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
+}
+
+.topic-list-item:hover {
+  background-color: rgba(18, 30, 54, 0.95) !important;
+  border-color: #00f2fe !important;
+  transform: translateY(-2px) !important;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 20px rgba(0, 242, 254, 0.25) !important;
+}
+
+.topic-list-item .main-link a.title {
+  color: #ffffff !important;
+  font-weight: 600 !important;
+}
+
+.topic-list-item .main-link a.title:hover {
+  color: #00f2fe !important;
+  text-shadow: 0 0 8px rgba(0, 242, 254, 0.5);
+}
+
+.btn-primary {
+  background: linear-gradient(135deg, #00f2fe 0%, #10b981 100%) !important;
+  color: #03060c !important;
+  font-weight: 700 !important;
+  border: none !important;
+  border-radius: 10px !important;
+  box-shadow: 0 4px 18px rgba(0, 242, 254, 0.35) !important;
+}
+
+.btn-primary:hover {
+  filter: brightness(1.15) !important;
+  box-shadow: 0 6px 26px rgba(0, 242, 254, 0.6) !important;
+  transform: translateY(-1px);
+}
+
+
+
+/* ==========================================================================
+   W-MAKE DARK CYBERPUNK POLISH OVERRIDES
+   ========================================================================== */
+
+:root {
+  --primary: #f1f5f9;
+  --secondary: #0b1120;
+  --tertiary: #00f2fe;
+  --tertiary-hover: #38bdf8;
+  --header_background: #070a14;
+  --header_primary: #f8fafc;
+}
+
+html, body {
+  background-color: #050812 !important;
+  color: #f1f5f9 !important;
+}
+
+/* 1. Global Background Wallpaper */
+.background-container {
+  position: fixed !important;
+  top: 0 !important;
+  left: 0 !important;
+  height: 100vh !important;
+  width: 100vw !important;
+  background: #050812 url('/uploads/default/custom-assets/discourse_cyber_bg.jpg') no-repeat center center fixed !important;
+  background-size: cover !important;
+  opacity: 0.95 !important;
+  pointer-events: none !important;
+  z-index: -2 !important;
+}
+
+.background-container::after {
+  content: '' !important;
+  position: fixed !important;
+  inset: 0 !important;
+  background: radial-gradient(circle at 50% 30%, rgba(5, 8, 18, 0.6) 0%, rgba(5, 8, 18, 0.95) 100%) !important;
+  pointer-events: none !important;
+  z-index: -1 !important;
+}
+
+/* 2. Top Header */
+.d-header {
+  background: rgba(7, 10, 20, 0.94) !important;
+  backdrop-filter: blur(20px) saturate(180%) !important;
+  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
+  border-bottom: 1px solid rgba(0, 242, 254, 0.22) !important;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.7) !important;
+  position: relative !important;
+}
+
+.d-header::after {
+  content: '' !important;
+  position: absolute !important;
+  bottom: -1px !important;
+  left: 0 !important;
+  right: 0 !important;
+  height: 2px !important;
+  background: linear-gradient(90deg, transparent 0%, #00f2fe 20%, #6366f1 50%, #10b981 80%, transparent 100%) !important;
+  box-shadow: 0 0 14px rgba(0, 242, 254, 0.8) !important;
+  pointer-events: none !important;
+  z-index: 1001 !important;
+}
+
+.d-header .title a img#site-logo,
+.d-header .title img.logo-big {
+  filter: drop-shadow(0 0 12px rgba(0, 242, 254, 0.45)) !important;
+  transition: transform 0.25s ease !important;
+}
+
+.d-header .title a img#site-logo:hover {
+  transform: scale(1.03) !important;
+}
+
+.d-header-icons .icon {
+  color: #94a3b8 !important;
+  border-radius: 8px !important;
+  transition: all 0.2s ease !important;
+}
+
+.d-header-icons .icon:hover {
+  color: #00f2fe !important;
+  background: rgba(0, 242, 254, 0.12) !important;
+}
+
+/* 3. Main Forum Card & Sidebar */
+html body #main-outlet {
+  margin-top: 25px !important;
+  margin-bottom: 50px !important;
+  background: rgba(11, 17, 32, 0.88) !important;
+  backdrop-filter: blur(24px) saturate(180%) !important;
+  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
+  border: 1px solid rgba(0, 242, 254, 0.2) !important;
+  border-radius: 24px !important;
+  padding: 2.2em 2.5em 5% !important;
+  max-width: 1200px !important;
+  box-shadow: 0 30px 70px -15px rgba(0, 0, 0, 0.9), 0 0 40px rgba(0, 242, 254, 0.12) !important;
+}
+
+.sidebar-wrapper, .d-sidebar {
+  background: transparent !important;
+  border-right: 1px solid rgba(0, 242, 254, 0.12) !important;
+}
+
+.sidebar-section-link-wrapper .sidebar-section-link {
+  border-radius: 8px !important;
+  color: #94a3b8 !important;
+  transition: all 0.2s ease !important;
+}
+
+.sidebar-section-link-wrapper .sidebar-section-link:hover,
+.sidebar-section-link-wrapper .sidebar-section-link.active {
+  background: rgba(0, 242, 254, 0.1) !important;
+  color: #00f2fe !important;
+}
+
+/* 4. Topic List Items (Cards) */
+.topic-list-body .topic-list-item {
+  background: rgba(15, 23, 42, 0.75) !important;
+  border: 1px solid rgba(0, 242, 254, 0.16) !important;
+  border-radius: 14px !important;
+  margin-bottom: 0.75em !important;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
+  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
+}
+
+.topic-list-body .topic-list-item:hover {
+  background: rgba(22, 34, 60, 0.95) !important;
+  border-color: #00f2fe !important;
+  transform: translateY(-2px) !important;
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.7), 0 0 22px rgba(0, 242, 254, 0.25) !important;
+}
+
+.topic-list-item .main-link a.title {
+  color: #f8fafc !important;
+  font-weight: 600 !important;
+  font-size: 1.05rem !important;
+}
+
+.topic-list-item .main-link a.title:hover {
+  color: #00f2fe !important;
+  text-shadow: 0 0 10px rgba(0, 242, 254, 0.4) !important;
+}
+
+.topic-list-item .topic-excerpt {
+  color: #94a3b8 !important;
+}
+
+/* 5. Navigation Pills & Filter Tabs */
+.nav-pills > li > a {
+  color: #94a3b8 !important;
+  border-radius: 8px !important;
+  font-weight: 600 !important;
+  transition: all 0.2s ease !important;
+}
+
+.nav-pills > li > a:hover {
+  color: #00f2fe !important;
+  background: rgba(0, 242, 254, 0.08) !important;
+}
+
+.nav-pills > li > a.active {
+  background: rgba(0, 242, 254, 0.18) !important;
+  color: #00f2fe !important;
+  border: 1px solid rgba(0, 242, 254, 0.35) !important;
+  box-shadow: 0 0 12px rgba(0, 242, 254, 0.2) !important;
+}
+
+/* 6. Buttons & Badges */
+.btn-primary {
+  background: linear-gradient(135deg, #00f2fe 0%, #10b981 100%) !important;
+  color: #03060c !important;
+  font-weight: 700 !important;
+  border: none !important;
+  border-radius: 10px !important;
+  box-shadow: 0 4px 18px rgba(0, 242, 254, 0.35) !important;
+  transition: all 0.2s ease !important;
+}
+
+.btn-primary:hover {
+  filter: brightness(1.15) !important;
+  box-shadow: 0 6px 26px rgba(0, 242, 254, 0.6) !important;
+  transform: translateY(-1px) !important;
+}
+
+.badge-notification {
+  background: linear-gradient(135deg, #00f2fe, #6366f1) !important;
+  color: #ffffff !important;
+  border-radius: 999px !important;
+  font-weight: 700 !important;
+}