feat: export complete Discourse themes ecosystem (16 themes, SCSS, JS components and color schemes)
This commit is contained in:
eldov
@@ -0,0 +1,31 @@
|
||||
# Discourse Forum Themes – W-MAKE & Discourse Ecosystem
|
||||
|
||||
Kompletter, lokaler Export und Theme-Manager aller Discourse Themes für [info-board.win](https://info-board.win) & [w-make.org](https://w-make.org).
|
||||
|
||||
---
|
||||
|
||||
## 📁 Struktur
|
||||
|
||||
- `themes/`:
|
||||
- `39_w-make_theme/`: **W-MAKE Theme (ID 39)** – Primäres Custom Theme mit Cyber Glassmorphism, Farbverlauf-Akzentlinie im Header und angepassten Darkmode-Komponenten.
|
||||
- `41_air_theme/`: **Air Theme (ID 41)** – Aktives Standardtheme mit Showcase-Kategorien, Chat-Stylings und Sidebar-Komponenten.
|
||||
- `42_modern_category___group_boxes/`: Moderne Kategoriematrix & Group-Boxen Component.
|
||||
- `43_clickable_topic/`: Clickable Topic Row Component.
|
||||
- `40_discourse_phosphor_icons/`: Phosphor Icons Sprite & Map.
|
||||
- `45_custom_background/`: Custom Background Extension.
|
||||
- `35_dracula_pro_ultra/`, `36_tokyo_night_storm/`, `37_onyx/`, `38_catppuccin_mocha_ultra/`: Zusätzliche Darkmode-Themes.
|
||||
- `-1_foundation/`, `-2_horizon/`, `23_material_design_theme/`, `24_mint_theme/`: Weitere Core- und Community-Themes.
|
||||
- `all_color_schemes.json`: Vollständiger Export aller 34 Farbschemata (HEX-Werte, Zuordnungen).
|
||||
- `deploy.sh`: Synchronisiert SCSS-/Codeänderungen direkt in die Discourse-Datenbank und leert den Cache.
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Deployment & Synchronisation
|
||||
|
||||
```bash
|
||||
# W-MAKE Theme (39) auf den VPS deployen:
|
||||
./deploy.sh
|
||||
|
||||
# Spezifisches Theme (z. B. Air Theme 41) deployen:
|
||||
./deploy.sh 41
|
||||
```
|
||||
@@ -0,0 +1,67 @@
|
||||
#!/usr/bin/env bash
|
||||
# deploy.sh - Deploy and Sync Discourse Themes
|
||||
# Domains: info-board.win / w-make.org
|
||||
# Target Host: free-warez.win -> Discourse Container (app)
|
||||
|
||||
set -euo pipefail
|
||||
|
||||
TARGET_HOST="free-warez.win"
|
||||
LOCAL_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
|
||||
THEMES_DIR="$LOCAL_DIR/themes"
|
||||
|
||||
echo "🚀 Discourse Theme Deploy & Sync Manager"
|
||||
echo " Target Host: $TARGET_HOST (Discourse container 'app')"
|
||||
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."
|
||||
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."
|
||||
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 "✅ Discourse theme(s) updated successfully!"
|
||||
echo "✨ Deployment complete!"
|
||||
@@ -0,0 +1,14 @@
|
||||
{
|
||||
"name": "Foundation",
|
||||
"authors": "Discourse",
|
||||
"theme_version": "1.0.0",
|
||||
"minimum_discourse_version": null,
|
||||
"maximum_discourse_version": null,
|
||||
"assets": {},
|
||||
"modifiers": {},
|
||||
"color_schemes": {},
|
||||
"screenshots": [
|
||||
"screenshots/light.png",
|
||||
"screenshots/dark.png"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,445 @@
|
||||
{
|
||||
"id": -1,
|
||||
"name": "Foundation",
|
||||
"user_selectable": false,
|
||||
"color_scheme": {
|
||||
"id": 3,
|
||||
"name": "WCAG Dark",
|
||||
"theme_id": null,
|
||||
"colors": {
|
||||
"primary-medium": "999999",
|
||||
"primary-low-mid": "888888",
|
||||
"secondary": "0c0c0c",
|
||||
"tertiary": "759AFF",
|
||||
"quaternary": "759AFF",
|
||||
"header_background": "000000",
|
||||
"header_primary": "ffffff",
|
||||
"highlight": "3369FF",
|
||||
"selected": "0d2569",
|
||||
"hover": "002382",
|
||||
"danger": "FF697A",
|
||||
"success": "70B880",
|
||||
"love": "9D256B",
|
||||
"primary": "b2c0cd"
|
||||
}
|
||||
},
|
||||
"fields_count": 52,
|
||||
"files": [
|
||||
{
|
||||
"field_id": 512,
|
||||
"target_id": 0,
|
||||
"target_name": "common",
|
||||
"name": "screenshot_dark",
|
||||
"filename": "common_screenshot_dark.txt",
|
||||
"bytes": 0
|
||||
},
|
||||
{
|
||||
"field_id": 511,
|
||||
"target_id": 0,
|
||||
"target_name": "common",
|
||||
"name": "screenshot_light",
|
||||
"filename": "common_screenshot_light.txt",
|
||||
"bytes": 0
|
||||
},
|
||||
{
|
||||
"field_id": 514,
|
||||
"target_id": 4,
|
||||
"target_name": "translations",
|
||||
"name": "ar",
|
||||
"filename": "translations_ar.txt",
|
||||
"bytes": 333
|
||||
},
|
||||
{
|
||||
"field_id": 515,
|
||||
"target_id": 4,
|
||||
"target_name": "translations",
|
||||
"name": "be",
|
||||
"filename": "translations_be.txt",
|
||||
"bytes": 197
|
||||
},
|
||||
{
|
||||
"field_id": 516,
|
||||
"target_id": 4,
|
||||
"target_name": "translations",
|
||||
"name": "bg",
|
||||
"filename": "translations_bg.txt",
|
||||
"bytes": 197
|
||||
},
|
||||
{
|
||||
"field_id": 517,
|
||||
"target_id": 4,
|
||||
"target_name": "translations",
|
||||
"name": "bs_BA",
|
||||
"filename": "translations_bs_BA.txt",
|
||||
"bytes": 200
|
||||
},
|
||||
{
|
||||
"field_id": 518,
|
||||
"target_id": 4,
|
||||
"target_name": "translations",
|
||||
"name": "ca",
|
||||
"filename": "translations_ca.txt",
|
||||
"bytes": 197
|
||||
},
|
||||
{
|
||||
"field_id": 519,
|
||||
"target_id": 4,
|
||||
"target_name": "translations",
|
||||
"name": "cs",
|
||||
"filename": "translations_cs.txt",
|
||||
"bytes": 331
|
||||
},
|
||||
{
|
||||
"field_id": 520,
|
||||
"target_id": 4,
|
||||
"target_name": "translations",
|
||||
"name": "da",
|
||||
"filename": "translations_da.txt",
|
||||
"bytes": 197
|
||||
},
|
||||
{
|
||||
"field_id": 521,
|
||||
"target_id": 4,
|
||||
"target_name": "translations",
|
||||
"name": "de",
|
||||
"filename": "translations_de.yml",
|
||||
"bytes": 354
|
||||
},
|
||||
{
|
||||
"field_id": 522,
|
||||
"target_id": 4,
|
||||
"target_name": "translations",
|
||||
"name": "el",
|
||||
"filename": "translations_el.txt",
|
||||
"bytes": 197
|
||||
},
|
||||
{
|
||||
"field_id": 523,
|
||||
"target_id": 4,
|
||||
"target_name": "translations",
|
||||
"name": "en",
|
||||
"filename": "translations_en.yml",
|
||||
"bytes": 143
|
||||
},
|
||||
{
|
||||
"field_id": 524,
|
||||
"target_id": 4,
|
||||
"target_name": "translations",
|
||||
"name": "en_GB",
|
||||
"filename": "translations_en_GB.txt",
|
||||
"bytes": 200
|
||||
},
|
||||
{
|
||||
"field_id": 525,
|
||||
"target_id": 4,
|
||||
"target_name": "translations",
|
||||
"name": "es",
|
||||
"filename": "translations_es.txt",
|
||||
"bytes": 342
|
||||
},
|
||||
{
|
||||
"field_id": 526,
|
||||
"target_id": 4,
|
||||
"target_name": "translations",
|
||||
"name": "et",
|
||||
"filename": "translations_et.txt",
|
||||
"bytes": 197
|
||||
},
|
||||
{
|
||||
"field_id": 527,
|
||||
"target_id": 4,
|
||||
"target_name": "translations",
|
||||
"name": "fa_IR",
|
||||
"filename": "translations_fa_IR.txt",
|
||||
"bytes": 200
|
||||
},
|
||||
{
|
||||
"field_id": 528,
|
||||
"target_id": 4,
|
||||
"target_name": "translations",
|
||||
"name": "fi",
|
||||
"filename": "translations_fi.txt",
|
||||
"bytes": 326
|
||||
},
|
||||
{
|
||||
"field_id": 529,
|
||||
"target_id": 4,
|
||||
"target_name": "translations",
|
||||
"name": "fr",
|
||||
"filename": "translations_fr.txt",
|
||||
"bytes": 366
|
||||
},
|
||||
{
|
||||
"field_id": 530,
|
||||
"target_id": 4,
|
||||
"target_name": "translations",
|
||||
"name": "gl",
|
||||
"filename": "translations_gl.txt",
|
||||
"bytes": 197
|
||||
},
|
||||
{
|
||||
"field_id": 531,
|
||||
"target_id": 4,
|
||||
"target_name": "translations",
|
||||
"name": "he",
|
||||
"filename": "translations_he.txt",
|
||||
"bytes": 306
|
||||
},
|
||||
{
|
||||
"field_id": 532,
|
||||
"target_id": 4,
|
||||
"target_name": "translations",
|
||||
"name": "hr",
|
||||
"filename": "translations_hr.txt",
|
||||
"bytes": 197
|
||||
},
|
||||
{
|
||||
"field_id": 533,
|
||||
"target_id": 4,
|
||||
"target_name": "translations",
|
||||
"name": "hu",
|
||||
"filename": "translations_hu.txt",
|
||||
"bytes": 337
|
||||
},
|
||||
{
|
||||
"field_id": 534,
|
||||
"target_id": 4,
|
||||
"target_name": "translations",
|
||||
"name": "hy",
|
||||
"filename": "translations_hy.txt",
|
||||
"bytes": 197
|
||||
},
|
||||
{
|
||||
"field_id": 535,
|
||||
"target_id": 4,
|
||||
"target_name": "translations",
|
||||
"name": "id",
|
||||
"filename": "translations_id.txt",
|
||||
"bytes": 197
|
||||
},
|
||||
{
|
||||
"field_id": 536,
|
||||
"target_id": 4,
|
||||
"target_name": "translations",
|
||||
"name": "it",
|
||||
"filename": "translations_it.txt",
|
||||
"bytes": 351
|
||||
},
|
||||
{
|
||||
"field_id": 537,
|
||||
"target_id": 4,
|
||||
"target_name": "translations",
|
||||
"name": "ja",
|
||||
"filename": "translations_ja.txt",
|
||||
"bytes": 287
|
||||
},
|
||||
{
|
||||
"field_id": 538,
|
||||
"target_id": 4,
|
||||
"target_name": "translations",
|
||||
"name": "ko",
|
||||
"filename": "translations_ko.txt",
|
||||
"bytes": 197
|
||||
},
|
||||
{
|
||||
"field_id": 539,
|
||||
"target_id": 4,
|
||||
"target_name": "translations",
|
||||
"name": "lt",
|
||||
"filename": "translations_lt.txt",
|
||||
"bytes": 197
|
||||
},
|
||||
{
|
||||
"field_id": 540,
|
||||
"target_id": 4,
|
||||
"target_name": "translations",
|
||||
"name": "lv",
|
||||
"filename": "translations_lv.txt",
|
||||
"bytes": 197
|
||||
},
|
||||
{
|
||||
"field_id": 541,
|
||||
"target_id": 4,
|
||||
"target_name": "translations",
|
||||
"name": "nb_NO",
|
||||
"filename": "translations_nb_NO.txt",
|
||||
"bytes": 200
|
||||
},
|
||||
{
|
||||
"field_id": 542,
|
||||
"target_id": 4,
|
||||
"target_name": "translations",
|
||||
"name": "nl",
|
||||
"filename": "translations_nl.txt",
|
||||
"bytes": 352
|
||||
},
|
||||
{
|
||||
"field_id": 543,
|
||||
"target_id": 4,
|
||||
"target_name": "translations",
|
||||
"name": "pl_PL",
|
||||
"filename": "translations_pl_PL.txt",
|
||||
"bytes": 351
|
||||
},
|
||||
{
|
||||
"field_id": 544,
|
||||
"target_id": 4,
|
||||
"target_name": "translations",
|
||||
"name": "pt",
|
||||
"filename": "translations_pt.txt",
|
||||
"bytes": 197
|
||||
},
|
||||
{
|
||||
"field_id": 545,
|
||||
"target_id": 4,
|
||||
"target_name": "translations",
|
||||
"name": "pt_BR",
|
||||
"filename": "translations_pt_BR.txt",
|
||||
"bytes": 360
|
||||
},
|
||||
{
|
||||
"field_id": 546,
|
||||
"target_id": 4,
|
||||
"target_name": "translations",
|
||||
"name": "ro",
|
||||
"filename": "translations_ro.txt",
|
||||
"bytes": 352
|
||||
},
|
||||
{
|
||||
"field_id": 547,
|
||||
"target_id": 4,
|
||||
"target_name": "translations",
|
||||
"name": "ru",
|
||||
"filename": "translations_ru.txt",
|
||||
"bytes": 319
|
||||
},
|
||||
{
|
||||
"field_id": 548,
|
||||
"target_id": 4,
|
||||
"target_name": "translations",
|
||||
"name": "sk",
|
||||
"filename": "translations_sk.txt",
|
||||
"bytes": 329
|
||||
},
|
||||
{
|
||||
"field_id": 549,
|
||||
"target_id": 4,
|
||||
"target_name": "translations",
|
||||
"name": "sl",
|
||||
"filename": "translations_sl.txt",
|
||||
"bytes": 197
|
||||
},
|
||||
{
|
||||
"field_id": 550,
|
||||
"target_id": 4,
|
||||
"target_name": "translations",
|
||||
"name": "sq",
|
||||
"filename": "translations_sq.txt",
|
||||
"bytes": 197
|
||||
},
|
||||
{
|
||||
"field_id": 551,
|
||||
"target_id": 4,
|
||||
"target_name": "translations",
|
||||
"name": "sr",
|
||||
"filename": "translations_sr.txt",
|
||||
"bytes": 197
|
||||
},
|
||||
{
|
||||
"field_id": 552,
|
||||
"target_id": 4,
|
||||
"target_name": "translations",
|
||||
"name": "sv",
|
||||
"filename": "translations_sv.txt",
|
||||
"bytes": 197
|
||||
},
|
||||
{
|
||||
"field_id": 553,
|
||||
"target_id": 4,
|
||||
"target_name": "translations",
|
||||
"name": "sw",
|
||||
"filename": "translations_sw.txt",
|
||||
"bytes": 197
|
||||
},
|
||||
{
|
||||
"field_id": 554,
|
||||
"target_id": 4,
|
||||
"target_name": "translations",
|
||||
"name": "te",
|
||||
"filename": "translations_te.txt",
|
||||
"bytes": 197
|
||||
},
|
||||
{
|
||||
"field_id": 555,
|
||||
"target_id": 4,
|
||||
"target_name": "translations",
|
||||
"name": "th",
|
||||
"filename": "translations_th.txt",
|
||||
"bytes": 197
|
||||
},
|
||||
{
|
||||
"field_id": 556,
|
||||
"target_id": 4,
|
||||
"target_name": "translations",
|
||||
"name": "tr_TR",
|
||||
"filename": "translations_tr_TR.txt",
|
||||
"bytes": 324
|
||||
},
|
||||
{
|
||||
"field_id": 557,
|
||||
"target_id": 4,
|
||||
"target_name": "translations",
|
||||
"name": "ug",
|
||||
"filename": "translations_ug.txt",
|
||||
"bytes": 337
|
||||
},
|
||||
{
|
||||
"field_id": 558,
|
||||
"target_id": 4,
|
||||
"target_name": "translations",
|
||||
"name": "uk",
|
||||
"filename": "translations_uk.txt",
|
||||
"bytes": 335
|
||||
},
|
||||
{
|
||||
"field_id": 559,
|
||||
"target_id": 4,
|
||||
"target_name": "translations",
|
||||
"name": "ur",
|
||||
"filename": "translations_ur.txt",
|
||||
"bytes": 313
|
||||
},
|
||||
{
|
||||
"field_id": 560,
|
||||
"target_id": 4,
|
||||
"target_name": "translations",
|
||||
"name": "vi",
|
||||
"filename": "translations_vi.txt",
|
||||
"bytes": 326
|
||||
},
|
||||
{
|
||||
"field_id": 561,
|
||||
"target_id": 4,
|
||||
"target_name": "translations",
|
||||
"name": "zh_CN",
|
||||
"filename": "translations_zh_CN.txt",
|
||||
"bytes": 273
|
||||
},
|
||||
{
|
||||
"field_id": 562,
|
||||
"target_id": 4,
|
||||
"target_name": "translations",
|
||||
"name": "zh_TW",
|
||||
"filename": "translations_zh_TW.txt",
|
||||
"bytes": 200
|
||||
},
|
||||
{
|
||||
"field_id": 513,
|
||||
"target_id": 9,
|
||||
"target_name": "about",
|
||||
"name": "about",
|
||||
"filename": "about_about.yml",
|
||||
"bytes": 293
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
# WARNING: Never edit this file.
|
||||
# It will be overwritten when translations are pulled from Crowdin.
|
||||
#
|
||||
# To work with us on translations, join this project:
|
||||
# https://translate.discourse.org/
|
||||
|
||||
ar:
|
||||
theme_metadata:
|
||||
description: "السمة التقليدية لمنصة Discourse، الملائمة بشكل جيد للتخصيص بما يتوافق مع متطلبات مجتمعك المحدَّدة."
|
||||
@@ -0,0 +1,7 @@
|
||||
# WARNING: Never edit this file.
|
||||
# It will be overwritten when translations are pulled from Crowdin.
|
||||
#
|
||||
# To work with us on translations, join this project:
|
||||
# https://translate.discourse.org/
|
||||
|
||||
be:
|
||||
@@ -0,0 +1,7 @@
|
||||
# WARNING: Never edit this file.
|
||||
# It will be overwritten when translations are pulled from Crowdin.
|
||||
#
|
||||
# To work with us on translations, join this project:
|
||||
# https://translate.discourse.org/
|
||||
|
||||
bg:
|
||||
@@ -0,0 +1,7 @@
|
||||
# WARNING: Never edit this file.
|
||||
# It will be overwritten when translations are pulled from Crowdin.
|
||||
#
|
||||
# To work with us on translations, join this project:
|
||||
# https://translate.discourse.org/
|
||||
|
||||
bs_BA:
|
||||
@@ -0,0 +1,7 @@
|
||||
# WARNING: Never edit this file.
|
||||
# It will be overwritten when translations are pulled from Crowdin.
|
||||
#
|
||||
# To work with us on translations, join this project:
|
||||
# https://translate.discourse.org/
|
||||
|
||||
ca:
|
||||
@@ -0,0 +1,9 @@
|
||||
# WARNING: Never edit this file.
|
||||
# It will be overwritten when translations are pulled from Crowdin.
|
||||
#
|
||||
# To work with us on translations, join this project:
|
||||
# https://translate.discourse.org/
|
||||
|
||||
cs:
|
||||
theme_metadata:
|
||||
description: "Klasický motiv Discourse, který se dobře hodí k přizpůsobení specifickým potřebám vaší komunity."
|
||||
@@ -0,0 +1,7 @@
|
||||
# WARNING: Never edit this file.
|
||||
# It will be overwritten when translations are pulled from Crowdin.
|
||||
#
|
||||
# To work with us on translations, join this project:
|
||||
# https://translate.discourse.org/
|
||||
|
||||
da:
|
||||
@@ -0,0 +1,9 @@
|
||||
# WARNING: Never edit this file.
|
||||
# It will be overwritten when translations are pulled from Crowdin.
|
||||
#
|
||||
# To work with us on translations, join this project:
|
||||
# https://translate.discourse.org/
|
||||
|
||||
de:
|
||||
theme_metadata:
|
||||
description: "Das klassische Discourse-Theme, das sich gut für die Anpassung an die spezifischen Bedürfnisse deiner Community eignet."
|
||||
@@ -0,0 +1,7 @@
|
||||
# WARNING: Never edit this file.
|
||||
# It will be overwritten when translations are pulled from Crowdin.
|
||||
#
|
||||
# To work with us on translations, join this project:
|
||||
# https://translate.discourse.org/
|
||||
|
||||
el:
|
||||
@@ -0,0 +1,3 @@
|
||||
en:
|
||||
theme_metadata:
|
||||
description: "The classic Discourse theme that is well-suited to customization for your community’s specific needs."
|
||||
@@ -0,0 +1,7 @@
|
||||
# WARNING: Never edit this file.
|
||||
# It will be overwritten when translations are pulled from Crowdin.
|
||||
#
|
||||
# To work with us on translations, join this project:
|
||||
# https://translate.discourse.org/
|
||||
|
||||
en_GB:
|
||||
@@ -0,0 +1,9 @@
|
||||
# WARNING: Never edit this file.
|
||||
# It will be overwritten when translations are pulled from Crowdin.
|
||||
#
|
||||
# To work with us on translations, join this project:
|
||||
# https://translate.discourse.org/
|
||||
|
||||
es:
|
||||
theme_metadata:
|
||||
description: "El tema clásico de Discourse que se adapta bien a la personalización según las necesidades de tu comunidad."
|
||||
@@ -0,0 +1,7 @@
|
||||
# WARNING: Never edit this file.
|
||||
# It will be overwritten when translations are pulled from Crowdin.
|
||||
#
|
||||
# To work with us on translations, join this project:
|
||||
# https://translate.discourse.org/
|
||||
|
||||
et:
|
||||
@@ -0,0 +1,7 @@
|
||||
# WARNING: Never edit this file.
|
||||
# It will be overwritten when translations are pulled from Crowdin.
|
||||
#
|
||||
# To work with us on translations, join this project:
|
||||
# https://translate.discourse.org/
|
||||
|
||||
fa_IR:
|
||||
@@ -0,0 +1,9 @@
|
||||
# WARNING: Never edit this file.
|
||||
# It will be overwritten when translations are pulled from Crowdin.
|
||||
#
|
||||
# To work with us on translations, join this project:
|
||||
# https://translate.discourse.org/
|
||||
|
||||
fi:
|
||||
theme_metadata:
|
||||
description: "Klassinen Discourse-teema, joka sopii hyvin mukauttamiseen yhteisösi erityisiin tarpeisiin."
|
||||
@@ -0,0 +1,9 @@
|
||||
# WARNING: Never edit this file.
|
||||
# It will be overwritten when translations are pulled from Crowdin.
|
||||
#
|
||||
# To work with us on translations, join this project:
|
||||
# https://translate.discourse.org/
|
||||
|
||||
fr:
|
||||
theme_metadata:
|
||||
description: "Le thème classique de Discourse, parfaitement adapté à la personnalisation en fonction des besoins spécifiques de votre communauté."
|
||||
@@ -0,0 +1,7 @@
|
||||
# WARNING: Never edit this file.
|
||||
# It will be overwritten when translations are pulled from Crowdin.
|
||||
#
|
||||
# To work with us on translations, join this project:
|
||||
# https://translate.discourse.org/
|
||||
|
||||
gl:
|
||||
@@ -0,0 +1,9 @@
|
||||
# WARNING: Never edit this file.
|
||||
# It will be overwritten when translations are pulled from Crowdin.
|
||||
#
|
||||
# To work with us on translations, join this project:
|
||||
# https://translate.discourse.org/
|
||||
|
||||
he:
|
||||
theme_metadata:
|
||||
description: "ערכת הנושא הקלאסית של Discourse שמותאמת לצרכים המסוימים של הקהילה שלכם."
|
||||
@@ -0,0 +1,7 @@
|
||||
# WARNING: Never edit this file.
|
||||
# It will be overwritten when translations are pulled from Crowdin.
|
||||
#
|
||||
# To work with us on translations, join this project:
|
||||
# https://translate.discourse.org/
|
||||
|
||||
hr:
|
||||
@@ -0,0 +1,9 @@
|
||||
# WARNING: Never edit this file.
|
||||
# It will be overwritten when translations are pulled from Crowdin.
|
||||
#
|
||||
# To work with us on translations, join this project:
|
||||
# https://translate.discourse.org/
|
||||
|
||||
hu:
|
||||
theme_metadata:
|
||||
description: "A klasszikus diskurzus téma, amely jól illeszkedik a közösség sajátos igényeihez való testreszabáshoz."
|
||||
@@ -0,0 +1,7 @@
|
||||
# WARNING: Never edit this file.
|
||||
# It will be overwritten when translations are pulled from Crowdin.
|
||||
#
|
||||
# To work with us on translations, join this project:
|
||||
# https://translate.discourse.org/
|
||||
|
||||
hy:
|
||||
@@ -0,0 +1,7 @@
|
||||
# WARNING: Never edit this file.
|
||||
# It will be overwritten when translations are pulled from Crowdin.
|
||||
#
|
||||
# To work with us on translations, join this project:
|
||||
# https://translate.discourse.org/
|
||||
|
||||
id:
|
||||
@@ -0,0 +1,9 @@
|
||||
# WARNING: Never edit this file.
|
||||
# It will be overwritten when translations are pulled from Crowdin.
|
||||
#
|
||||
# To work with us on translations, join this project:
|
||||
# https://translate.discourse.org/
|
||||
|
||||
it:
|
||||
theme_metadata:
|
||||
description: "Il tema classico di Discourse, ideale per la personalizzazione in base alle esigenze specifiche della tua community."
|
||||
@@ -0,0 +1,9 @@
|
||||
# WARNING: Never edit this file.
|
||||
# It will be overwritten when translations are pulled from Crowdin.
|
||||
#
|
||||
# To work with us on translations, join this project:
|
||||
# https://translate.discourse.org/
|
||||
|
||||
ja:
|
||||
theme_metadata:
|
||||
description: "コミュニティーの特定のニーズに合わせてカスタマイズするのに適した Discourse のクラシックテーマ"
|
||||
@@ -0,0 +1,7 @@
|
||||
# WARNING: Never edit this file.
|
||||
# It will be overwritten when translations are pulled from Crowdin.
|
||||
#
|
||||
# To work with us on translations, join this project:
|
||||
# https://translate.discourse.org/
|
||||
|
||||
ko:
|
||||
@@ -0,0 +1,7 @@
|
||||
# WARNING: Never edit this file.
|
||||
# It will be overwritten when translations are pulled from Crowdin.
|
||||
#
|
||||
# To work with us on translations, join this project:
|
||||
# https://translate.discourse.org/
|
||||
|
||||
lt:
|
||||
@@ -0,0 +1,7 @@
|
||||
# WARNING: Never edit this file.
|
||||
# It will be overwritten when translations are pulled from Crowdin.
|
||||
#
|
||||
# To work with us on translations, join this project:
|
||||
# https://translate.discourse.org/
|
||||
|
||||
lv:
|
||||
@@ -0,0 +1,7 @@
|
||||
# WARNING: Never edit this file.
|
||||
# It will be overwritten when translations are pulled from Crowdin.
|
||||
#
|
||||
# To work with us on translations, join this project:
|
||||
# https://translate.discourse.org/
|
||||
|
||||
nb_NO:
|
||||
@@ -0,0 +1,9 @@
|
||||
# WARNING: Never edit this file.
|
||||
# It will be overwritten when translations are pulled from Crowdin.
|
||||
#
|
||||
# To work with us on translations, join this project:
|
||||
# https://translate.discourse.org/
|
||||
|
||||
nl:
|
||||
theme_metadata:
|
||||
description: "Het klassieke Discourse-thema dat zich uitstekend leent voor aanpassing aan de specifieke behoeften van je community."
|
||||
@@ -0,0 +1,9 @@
|
||||
# WARNING: Never edit this file.
|
||||
# It will be overwritten when translations are pulled from Crowdin.
|
||||
#
|
||||
# To work with us on translations, join this project:
|
||||
# https://translate.discourse.org/
|
||||
|
||||
pl_PL:
|
||||
theme_metadata:
|
||||
description: "Klasyczny motyw Discourse, który doskonale nadaje się do dostosowania do konkretnych potrzeb Twojej społeczności."
|
||||
@@ -0,0 +1,7 @@
|
||||
# WARNING: Never edit this file.
|
||||
# It will be overwritten when translations are pulled from Crowdin.
|
||||
#
|
||||
# To work with us on translations, join this project:
|
||||
# https://translate.discourse.org/
|
||||
|
||||
pt:
|
||||
@@ -0,0 +1,9 @@
|
||||
# WARNING: Never edit this file.
|
||||
# It will be overwritten when translations are pulled from Crowdin.
|
||||
#
|
||||
# To work with us on translations, join this project:
|
||||
# https://translate.discourse.org/
|
||||
|
||||
pt_BR:
|
||||
theme_metadata:
|
||||
description: "O tema clássico do Discourse é adequado para a personalização de acordo com as necessidades específicas de sua comunidade."
|
||||
@@ -0,0 +1,9 @@
|
||||
# WARNING: Never edit this file.
|
||||
# It will be overwritten when translations are pulled from Crowdin.
|
||||
#
|
||||
# To work with us on translations, join this project:
|
||||
# https://translate.discourse.org/
|
||||
|
||||
ro:
|
||||
theme_metadata:
|
||||
description: "Tema clasică Discourse care este potrivită pentru personalizare în funcție de nevoile specifice ale comunității tale."
|
||||
@@ -0,0 +1,9 @@
|
||||
# WARNING: Never edit this file.
|
||||
# It will be overwritten when translations are pulled from Crowdin.
|
||||
#
|
||||
# To work with us on translations, join this project:
|
||||
# https://translate.discourse.org/
|
||||
|
||||
ru:
|
||||
theme_metadata:
|
||||
description: "Классическая тема Discourse, которую легко адаптировать под нужды вашего сообщества."
|
||||
@@ -0,0 +1,9 @@
|
||||
# WARNING: Never edit this file.
|
||||
# It will be overwritten when translations are pulled from Crowdin.
|
||||
#
|
||||
# To work with us on translations, join this project:
|
||||
# https://translate.discourse.org/
|
||||
|
||||
sk:
|
||||
theme_metadata:
|
||||
description: "Klasická téma Discourse, ktorá je vhodná na prispôsobenie špecifickým potrebám vašej komunity."
|
||||
@@ -0,0 +1,7 @@
|
||||
# WARNING: Never edit this file.
|
||||
# It will be overwritten when translations are pulled from Crowdin.
|
||||
#
|
||||
# To work with us on translations, join this project:
|
||||
# https://translate.discourse.org/
|
||||
|
||||
sl:
|
||||
@@ -0,0 +1,7 @@
|
||||
# WARNING: Never edit this file.
|
||||
# It will be overwritten when translations are pulled from Crowdin.
|
||||
#
|
||||
# To work with us on translations, join this project:
|
||||
# https://translate.discourse.org/
|
||||
|
||||
sq:
|
||||
@@ -0,0 +1,7 @@
|
||||
# WARNING: Never edit this file.
|
||||
# It will be overwritten when translations are pulled from Crowdin.
|
||||
#
|
||||
# To work with us on translations, join this project:
|
||||
# https://translate.discourse.org/
|
||||
|
||||
sr:
|
||||
@@ -0,0 +1,7 @@
|
||||
# WARNING: Never edit this file.
|
||||
# It will be overwritten when translations are pulled from Crowdin.
|
||||
#
|
||||
# To work with us on translations, join this project:
|
||||
# https://translate.discourse.org/
|
||||
|
||||
sv:
|
||||
@@ -0,0 +1,7 @@
|
||||
# WARNING: Never edit this file.
|
||||
# It will be overwritten when translations are pulled from Crowdin.
|
||||
#
|
||||
# To work with us on translations, join this project:
|
||||
# https://translate.discourse.org/
|
||||
|
||||
sw:
|
||||
@@ -0,0 +1,7 @@
|
||||
# WARNING: Never edit this file.
|
||||
# It will be overwritten when translations are pulled from Crowdin.
|
||||
#
|
||||
# To work with us on translations, join this project:
|
||||
# https://translate.discourse.org/
|
||||
|
||||
te:
|
||||
@@ -0,0 +1,7 @@
|
||||
# WARNING: Never edit this file.
|
||||
# It will be overwritten when translations are pulled from Crowdin.
|
||||
#
|
||||
# To work with us on translations, join this project:
|
||||
# https://translate.discourse.org/
|
||||
|
||||
th:
|
||||
@@ -0,0 +1,9 @@
|
||||
# WARNING: Never edit this file.
|
||||
# It will be overwritten when translations are pulled from Crowdin.
|
||||
#
|
||||
# To work with us on translations, join this project:
|
||||
# https://translate.discourse.org/
|
||||
|
||||
tr_TR:
|
||||
theme_metadata:
|
||||
description: "Topluluğunuzun özel ihtiyaçlarına göre özelleştirilmeye uygun klasik Discourse teması."
|
||||
@@ -0,0 +1,9 @@
|
||||
# WARNING: Never edit this file.
|
||||
# It will be overwritten when translations are pulled from Crowdin.
|
||||
#
|
||||
# To work with us on translations, join this project:
|
||||
# https://translate.discourse.org/
|
||||
|
||||
ug:
|
||||
theme_metadata:
|
||||
description: "ئەنئەنىۋى Discourse ئۆرنىكى جامائەتنىڭ مۇئەييەن ئېھتىياجىغا ئاساسەن خاسلاشتۇرۇشقا ئىنتايىن ماس كېلىدۇ."
|
||||
@@ -0,0 +1,9 @@
|
||||
# WARNING: Never edit this file.
|
||||
# It will be overwritten when translations are pulled from Crowdin.
|
||||
#
|
||||
# To work with us on translations, join this project:
|
||||
# https://translate.discourse.org/
|
||||
|
||||
uk:
|
||||
theme_metadata:
|
||||
description: "Класична тема Discourse, яка добре підходить для налаштування під конкретні потреби вашої спільноти."
|
||||
@@ -0,0 +1,9 @@
|
||||
# WARNING: Never edit this file.
|
||||
# It will be overwritten when translations are pulled from Crowdin.
|
||||
#
|
||||
# To work with us on translations, join this project:
|
||||
# https://translate.discourse.org/
|
||||
|
||||
ur:
|
||||
theme_metadata:
|
||||
description: "کلاسک ڈسکورس تھیم جو آپ کی کمیونٹی کی مخصوص ضروریات کے لیے حسب ضرورت موزوں ہے۔"
|
||||
@@ -0,0 +1,9 @@
|
||||
# WARNING: Never edit this file.
|
||||
# It will be overwritten when translations are pulled from Crowdin.
|
||||
#
|
||||
# To work with us on translations, join this project:
|
||||
# https://translate.discourse.org/
|
||||
|
||||
vi:
|
||||
theme_metadata:
|
||||
description: "Giao diện Discourse cổ điển, phù hợp để tùy chỉnh cho các nhu cầu cụ thể của cộng đồng bạn."
|
||||
@@ -0,0 +1,9 @@
|
||||
# WARNING: Never edit this file.
|
||||
# It will be overwritten when translations are pulled from Crowdin.
|
||||
#
|
||||
# To work with us on translations, join this project:
|
||||
# https://translate.discourse.org/
|
||||
|
||||
zh_CN:
|
||||
theme_metadata:
|
||||
description: "经典的 Discourse 主题，非常适合根据社区的特定需求进行定制。"
|
||||
@@ -0,0 +1,7 @@
|
||||
# WARNING: Never edit this file.
|
||||
# It will be overwritten when translations are pulled from Crowdin.
|
||||
#
|
||||
# To work with us on translations, join this project:
|
||||
# https://translate.discourse.org/
|
||||
|
||||
zh_TW:
|
||||
@@ -0,0 +1,151 @@
|
||||
{
|
||||
"name": "Horizon",
|
||||
"authors": "Design Team",
|
||||
"theme_version": "1.0.0",
|
||||
"modifiers": {
|
||||
"svg_icons": [
|
||||
"fire",
|
||||
"far-square-check",
|
||||
"far-square",
|
||||
"thumbtack",
|
||||
"reply",
|
||||
"heart",
|
||||
"user-plus"
|
||||
],
|
||||
"serialize_topic_is_hot": true,
|
||||
"serialize_topic_excerpts": {
|
||||
"type": "setting",
|
||||
"value": "topic_card_high_context"
|
||||
}
|
||||
},
|
||||
"color_schemes": {
|
||||
"Horizon": {
|
||||
"primary": "1A1A1A",
|
||||
"secondary": "ffffff",
|
||||
"tertiary": "595bca",
|
||||
"tertiary-med-or-tertiary": "595bca",
|
||||
"selected": "d7dfff",
|
||||
"header_background": "ffffff",
|
||||
"header_primary": "1A1A1A",
|
||||
"hover": "E1E8FF"
|
||||
},
|
||||
"Horizon Dark": {
|
||||
"primary": "ffffff",
|
||||
"secondary": "1A1A1A",
|
||||
"tertiary": "6568e6",
|
||||
"tertiary-med-or-tertiary": "6568e6",
|
||||
"selected": "3b3e56",
|
||||
"header_background": "1A1A1A",
|
||||
"header_primary": "ffffff",
|
||||
"hover": "333548"
|
||||
},
|
||||
"Royal": {
|
||||
"primary": "1A1A1A",
|
||||
"secondary": "ffffff",
|
||||
"tertiary": "1F7BC1",
|
||||
"tertiary-med-or-tertiary": "1F7BC1",
|
||||
"selected": "c7e3ff",
|
||||
"header_background": "ffffff",
|
||||
"header_primary": "1A1A1A",
|
||||
"hover": "D6EBFF"
|
||||
},
|
||||
"Royal Dark": {
|
||||
"primary": "ffffff",
|
||||
"secondary": "1A1A1A",
|
||||
"tertiary": "1F7BC1",
|
||||
"tertiary-med-or-tertiary": "1F7BC1",
|
||||
"selected": "3a455f",
|
||||
"header_background": "1A1A1A",
|
||||
"header_primary": "ffffff",
|
||||
"hover": "323B4E"
|
||||
},
|
||||
"Clover": {
|
||||
"primary": "1A1A1A",
|
||||
"secondary": "ffffff",
|
||||
"tertiary": "39845B",
|
||||
"tertiary-med-or-tertiary": "39845B",
|
||||
"selected": "c6f1d5",
|
||||
"header_background": "ffffff",
|
||||
"header_primary": "1A1A1A",
|
||||
"hover": "D5F5E0"
|
||||
},
|
||||
"Clover Dark": {
|
||||
"primary": "ffffff",
|
||||
"secondary": "1A1A1A",
|
||||
"tertiary": "39845B",
|
||||
"tertiary-med-or-tertiary": "39845B",
|
||||
"selected": "47594e",
|
||||
"header_background": "1A1A1A",
|
||||
"header_primary": "ffffff",
|
||||
"hover": "3C4A40"
|
||||
},
|
||||
"Lily": {
|
||||
"primary": "1A1A1A",
|
||||
"secondary": "ffffff",
|
||||
"tertiary": "cc338c",
|
||||
"tertiary-med-or-tertiary": "cc338c",
|
||||
"selected": "ffc8ee",
|
||||
"header_background": "ffffff",
|
||||
"header_primary": "1A1A1A",
|
||||
"hover": "FFD7F3"
|
||||
},
|
||||
"Lily Dark": {
|
||||
"primary": "ffffff",
|
||||
"secondary": "1A1A1A",
|
||||
"tertiary": "cc338c",
|
||||
"tertiary-med-or-tertiary": "cc338c",
|
||||
"selected": "5f3e4e",
|
||||
"header_background": "1A1A1A",
|
||||
"header_primary": "ffffff",
|
||||
"hover": "4E3640"
|
||||
},
|
||||
"Violet": {
|
||||
"primary": "1A1A1A",
|
||||
"secondary": "ffffff",
|
||||
"tertiary": "9b15de",
|
||||
"tertiary-med-or-tertiary": "9b15de",
|
||||
"selected": "feccff",
|
||||
"header_background": "ffffff",
|
||||
"header_primary": "1A1A1A",
|
||||
"hover": "FFD9FF"
|
||||
},
|
||||
"Violet Dark": {
|
||||
"primary": "ffffff",
|
||||
"secondary": "1A1A1A",
|
||||
"tertiary": "9b15de",
|
||||
"tertiary-med-or-tertiary": "9b15de",
|
||||
"selected": "4c385c",
|
||||
"header_background": "1A1A1A",
|
||||
"header_primary": "ffffff",
|
||||
"hover": "40314C"
|
||||
},
|
||||
"Marigold": {
|
||||
"primary": "1A1A1A",
|
||||
"secondary": "ffffff",
|
||||
"tertiary": "d3881f",
|
||||
"tertiary-med-or-tertiary": "d3881f",
|
||||
"selected": "ffdcb2",
|
||||
"header_background": "ffffff",
|
||||
"header_primary": "1A1A1A",
|
||||
"hover": "FFE6C6"
|
||||
},
|
||||
"Marigold Dark": {
|
||||
"primary": "ffffff",
|
||||
"secondary": "1A1A1A",
|
||||
"tertiary": "d3881f",
|
||||
"tertiary-med-or-tertiary": "d3881f",
|
||||
"selected": "6c5b49",
|
||||
"header_background": "1A1A1A",
|
||||
"header_primary": "ffffff",
|
||||
"hover": "584B3E"
|
||||
}
|
||||
},
|
||||
"screenshots": [
|
||||
"screenshots/light.png",
|
||||
"screenshots/dark.png"
|
||||
],
|
||||
"theme_site_settings": {
|
||||
"enable_welcome_banner": true,
|
||||
"search_experience": "search_field"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,108 @@
|
||||
html {
|
||||
--accent-color: #{$tertiary} !important;
|
||||
--accent-text-color: #fff;
|
||||
|
||||
// Background Colors
|
||||
--background-color: light-dark(
|
||||
oklch(from #{$tertiary} 96% calc(c * 0.125) h),
|
||||
oklch(from #{$tertiary} 10% 0.025 h)
|
||||
) !important;
|
||||
--d-content-background: light-dark(
|
||||
oklch(from #{$secondary} calc(2 * l) c h),
|
||||
oklch(from #{$secondary} l c h)
|
||||
) !important;
|
||||
|
||||
// HeaderColors
|
||||
--header_primary-low-mid: light-dark(
|
||||
oklch(from #{$tertiary} 73.5% calc(c * 0.5) h),
|
||||
oklch(from #{$tertiary} l calc(c * 0.25) h)
|
||||
) !important;
|
||||
--header_primary-medium: light-dark(
|
||||
oklch(from #{$tertiary} 54% calc(c * 0.5) h),
|
||||
oklch(from #{$tertiary} calc(l * 1.35) calc(c * 0.25) h)
|
||||
) !important;
|
||||
|
||||
// Sidebar Colors
|
||||
--d-sidebar-border-color: light-dark(
|
||||
oklch(from #{$tertiary} 88% calc(c * 0.25) h),
|
||||
oklch(from #{$tertiary} calc(l * 0.7) calc(c * 0.25) h)
|
||||
) !important;
|
||||
--d-sidebar-link-color: light-dark(
|
||||
oklch(from #{$tertiary} calc(l * 0.8) calc(c * 0.25) h),
|
||||
oklch(from #{$tertiary} calc(l * 1.5) calc(c * 0.25) h)
|
||||
) !important;
|
||||
--d-sidebar-active-color: #{$primary} !important;
|
||||
--d-sidebar-suffix-color: light-dark(
|
||||
oklch(from #{$tertiary} l calc(c * 0.9) h),
|
||||
oklch(from #{$tertiary} l calc(c * 0.9) h)
|
||||
) !important;
|
||||
|
||||
// Other Colors
|
||||
--d-selected: light-dark(
|
||||
oklch(from #{$tertiary} 92% calc(c * 0.5) h),
|
||||
oklch(from #{$tertiary} calc(l * 0.7) calc(c * 0.25) h)
|
||||
) !important;
|
||||
--d-nav-color--active: light-dark(
|
||||
oklch(from #{$tertiary} l c h),
|
||||
oklch(from #{$tertiary} calc(l * 1.2) c h)
|
||||
) !important;
|
||||
--d-nav-color--hover: light-dark(
|
||||
oklch(from #{$tertiary} l c h),
|
||||
oklch(from #{$tertiary} calc(l * 1.2) c h)
|
||||
) !important;
|
||||
--link-color: light-dark(
|
||||
oklch(from #{$tertiary} l c h),
|
||||
oklch(from #{$tertiary} calc(l * 0.95) c h)
|
||||
) !important;
|
||||
--link-color-hover: light-dark(
|
||||
oklch(from #{$tertiary} l c h),
|
||||
oklch(from #{$tertiary} calc(l * 1.5) calc(c * 2.25) h)
|
||||
) !important;
|
||||
--tertiary-hover: #{$tertiary} !important;
|
||||
|
||||
// Search Colors
|
||||
--search-color: light-dark(
|
||||
oklch(from #{$tertiary} l c h),
|
||||
oklch(from #{$tertiary} calc(l * 1.5) calc(c * 0.25) h)
|
||||
) !important;
|
||||
|
||||
// Button Colors
|
||||
--button-box-shadow: light-dark(
|
||||
oklch(from #{$tertiary} calc(l * 1.5) calc(c * 0.35) h),
|
||||
oklch(from #{$tertiary} calc(l * 0.75) calc(c * 0.5) h)
|
||||
) !important;
|
||||
--d-sidebar-highlight-hover-icon: var(--d-sidebar-link-color) !important;
|
||||
--d-sidebar-highlight-hover-background: var(--d-selected) !important;
|
||||
--d-sidebar-link-icon-color: var(--d-sidebar-link-color) !important;
|
||||
--d-sidebar-header-color: var(--d-sidebar-link-color) !important;
|
||||
--d-sidebar-header-icon-color: var(--d-sidebar-link-color) !important;
|
||||
--d-sidebar-active-suffix-color: var(--d-sidebar-suffix-color) !important;
|
||||
--d-sidebar-background: var(--background-color) !important;
|
||||
--d-sidebar-footer-fade: var(--background-color) !important;
|
||||
--d-sidebar-prefix-background: var(--d-selected) !important;
|
||||
--d-sidebar-active-prefix-background: light-dark(
|
||||
oklch(from var(--d-selected) calc(l * 0.85) c h),
|
||||
oklch(from var(--d-selected) calc(l * 0.7) c h)
|
||||
) !important;
|
||||
--d-sidebar-highlight-prefix-background: light-dark(
|
||||
oklch(from var(--d-selected) calc(l * 0.85) c h),
|
||||
oklch(from var(--d-selected) calc(l * 0.7) c h)
|
||||
) !important;
|
||||
--d-sidebar-highlight-suffix-color: var(
|
||||
--d-sidebar-active-suffix-color
|
||||
) !important;
|
||||
--d-sidebar-highlight-color: var(--primary) !important;
|
||||
--d-sidebar-highlight-background: var(--d-selected) !important;
|
||||
--d-sidebar-section-link-icon-size: 1em !important;
|
||||
--d-hover: oklch(from var(--d-selected) l c h / 0.75) !important;
|
||||
--d-input-bg-color: var(--d-content-background) !important;
|
||||
--discourse_id-text: var(--accent-text-color) !important;
|
||||
--discourse_id-text-hover: var(--accent-text-color) !important;
|
||||
--discourse_id-icon: var(--accent-text-color) !important;
|
||||
--discourse_id-icon-hover: var(--accent-text-color) !important;
|
||||
--discourse_id-border: var(--discourse_id-background) !important;
|
||||
}
|
||||
|
||||
:where(.uc-modernize-foundation-theme) {
|
||||
--d-sidebar-active-background: var(--d-selected) !important;
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
@import "buttons";
|
||||
@import "chat";
|
||||
@import "categories-view";
|
||||
@import "color-choice";
|
||||
@import "compatibility";
|
||||
@import "composer";
|
||||
@import "composer-peek-mode";
|
||||
@import "experimental-screen";
|
||||
@import "discourse-events";
|
||||
@import "header";
|
||||
@import "hiddenstuff";
|
||||
@import "login";
|
||||
@import "main";
|
||||
@import "misc";
|
||||
@import "mobile-stuff";
|
||||
@import "nav-pills";
|
||||
@import "welcome-banner";
|
||||
@import "sidebar";
|
||||
@import "sidebar-new-topic-button";
|
||||
@import "topic";
|
||||
@import "topic-cards";
|
||||
@import "topic-voting";
|
||||
@import "high-context-cards";
|
||||
@import "variables";
|
||||
|
||||
:root {
|
||||
--d-nav-pill-border-radius: 0;
|
||||
}
|
||||
@@ -0,0 +1,2 @@
|
||||
@import "desktop-horizon-fixes";
|
||||
@import "desktop-full-width";
|
||||
@@ -0,0 +1,122 @@
|
||||
@use "lib/viewport";
|
||||
|
||||
:root {
|
||||
--d-button-border-radius: 6.25rem;
|
||||
}
|
||||
|
||||
.discourse-no-touch .topic-body .actions .fade-out {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.sidebar-new-topic-button__wrapper {
|
||||
&:has(.fk-d-tooltip__trigger) {
|
||||
#create-topic.btn {
|
||||
border-radius: var(--d-button-border-radius) 0 0
|
||||
var(--d-button-border-radius);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.discourse-no-touch .btn-default.sidebar-new-topic-button,
|
||||
.discourse-no-touch .btn-default,
|
||||
.discourse-no-touch .select-kit .select-kit-header.btn-default {
|
||||
background: var(--primary-100);
|
||||
|
||||
.d-icon {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
&:focus-visible,
|
||||
&:hover {
|
||||
background: var(--primary-100);
|
||||
color: var(--primary);
|
||||
box-shadow: 0 0 0 4px var(--button-box-shadow);
|
||||
|
||||
.d-icon {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
}
|
||||
|
||||
&:active:not(:hover, :focus) {
|
||||
color: var(--primary);
|
||||
background: var(--tertiary-300);
|
||||
background-image: none;
|
||||
|
||||
.d-icon {
|
||||
color: var(--tertiary-high);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-primary,
|
||||
.discourse-no-touch .btn-default.ai-new-question-button {
|
||||
background-color: var(--accent-color);
|
||||
color: var(--accent-text-color);
|
||||
|
||||
.d-icon {
|
||||
color: var(--accent-text-color);
|
||||
}
|
||||
|
||||
&:not([disabled]):focus-visible,
|
||||
&:not([disabled]):hover {
|
||||
.discourse-no-touch & {
|
||||
background-color: var(--accent-color);
|
||||
box-shadow: 0 0 0 4px var(--button-box-shadow);
|
||||
color: var(--accent-text-color);
|
||||
|
||||
.d-icon {
|
||||
color: var(--accent-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: light-dark(
|
||||
oklch(from var(--accent-color) 40% c h),
|
||||
oklch(from var(--accent-color) 50% c h)
|
||||
);
|
||||
}
|
||||
|
||||
&:visited {
|
||||
color: var(--accent-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
.discourse-no-touch & {
|
||||
&:not([disabled]):focus-visible,
|
||||
&:not([disabled]):hover {
|
||||
background-color: var(--danger);
|
||||
box-shadow: 0 0 0 4px var(--d-button-danger-bg-color--hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// DiscoToc plugin
|
||||
.d-toc-main,
|
||||
.timeline-footer-controls {
|
||||
.btn.timeline-toggle {
|
||||
border-top-right-radius: 8px;
|
||||
border-top-left-radius: 8px;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
bottom: var(--main-grid-gap);
|
||||
}
|
||||
}
|
||||
|
||||
.d-combo-button:hover {
|
||||
border-radius: var(--d-button-border-radius);
|
||||
box-shadow: 0 0 0 4px var(--button-box-shadow);
|
||||
|
||||
button:hover {
|
||||
// remove duplicate shadow from child button
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Solved
|
||||
.btn-default.post-action-menu__solved-shared-issue:not(.has-shared-issue) {
|
||||
.d-icon {
|
||||
color: var(--icon-color);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,365 @@
|
||||
@use "lib/viewport";
|
||||
|
||||
.list-container.--categories {
|
||||
.avatar-flair {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.categories-and-latest {
|
||||
.category-list {
|
||||
border-collapse: separate;
|
||||
|
||||
th.topics,
|
||||
.category-logo {
|
||||
display: none;
|
||||
}
|
||||
|
||||
thead tr th {
|
||||
font-size: var(--font-up-1-rem);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
tbody {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1em;
|
||||
padding-top: 1em;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
tbody tr {
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
"title topics"
|
||||
"category category"
|
||||
"subcategory subcategory";
|
||||
row-gap: 1em;
|
||||
border: 1px solid var(--primary-300);
|
||||
border-radius: var(--d-border-radius-large);
|
||||
box-shadow: 0 0 12px 1px var(--topic-card-shadow);
|
||||
}
|
||||
|
||||
td.category {
|
||||
display: contents;
|
||||
border-top-left-radius: var(--d-border-radius-large);
|
||||
border-bottom-left-radius: var(--d-border-radius-large);
|
||||
border-width: 2px;
|
||||
padding: 1em 1.5rem;
|
||||
}
|
||||
|
||||
tbody h3 {
|
||||
grid-area: title;
|
||||
padding: 1em 0 0 1.5rem;
|
||||
font-size: var(--font-up-1-rem);
|
||||
|
||||
.category-name {
|
||||
display: flex;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.badge-category {
|
||||
gap: 0.25em;
|
||||
align-items: center;
|
||||
font-size: var(--font-up-1-rem);
|
||||
|
||||
.d-icon:first-of-type:not([class*="d-icon-lock"]),
|
||||
&.--style-square::before,
|
||||
&.--style-emoji .emoji {
|
||||
width: 1.25em;
|
||||
height: 1.25em;
|
||||
margin-right: 0.25em;
|
||||
}
|
||||
|
||||
&.--style-square::before {
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
[class*="d-icon-lock"] {
|
||||
order: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.topics {
|
||||
width: auto;
|
||||
padding: 1em 1.5rem 0 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: end;
|
||||
}
|
||||
|
||||
.category-description {
|
||||
grid-area: category;
|
||||
padding: 0 1.5rem;
|
||||
margin: 0;
|
||||
font-size: var(--font-down-1-rem);
|
||||
}
|
||||
|
||||
.subcategories {
|
||||
grid-area: subcategory;
|
||||
gap: 0.25em 0.5em;
|
||||
padding: 0 1.5rem 1em;
|
||||
margin: 0;
|
||||
|
||||
.badge-category__wrapper {
|
||||
background-color: var(--badge-category-bg);
|
||||
padding: 0.25em 0.5rem;
|
||||
border-radius: var(--d-border-radius);
|
||||
}
|
||||
|
||||
.badge-category__name {
|
||||
color: var(--badge-category-text);
|
||||
}
|
||||
|
||||
.badge-category.--style-square::before {
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.latest-topic-list {
|
||||
.table-heading {
|
||||
border: 0;
|
||||
font-size: var(--font-up-1-rem);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&-item {
|
||||
display: grid;
|
||||
grid-template-columns: min-content min-content auto min-content;
|
||||
grid-template-areas:
|
||||
"creator title title status"
|
||||
". category activity activity";
|
||||
column-gap: 0.75rem;
|
||||
row-gap: 0.5rem;
|
||||
background: var(--d-content-background);
|
||||
box-shadow: 0 0 12px 1px var(--topic-card-shadow);
|
||||
text-overflow: ellipsis;
|
||||
padding: 0.75em 1rem;
|
||||
border: 1px solid var(--primary-300);
|
||||
border-radius: var(--d-border-radius-large);
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.main-link,
|
||||
.topic-stats {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
.top-row {
|
||||
grid-area: title;
|
||||
}
|
||||
|
||||
.bottom-row {
|
||||
grid-area: category;
|
||||
|
||||
.discourse-tags {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.badge-category__wrapper {
|
||||
border-radius: var(--d-border-radius);
|
||||
padding: 0.25em 0.5rem;
|
||||
background-color: var(--badge-category-bg);
|
||||
|
||||
@include viewport.until(md) {
|
||||
padding: 0.25em 0.5rem;
|
||||
font-size: var(--font-down-2);
|
||||
}
|
||||
|
||||
.badge-category__name {
|
||||
color: var(--badge-category-text);
|
||||
}
|
||||
}
|
||||
|
||||
.topic-list-data {
|
||||
grid-area: likes-replies;
|
||||
}
|
||||
|
||||
.num.posts-map {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.topic-last-activity {
|
||||
grid-area: activity;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: left;
|
||||
font-size: var(--font-down-1-rem);
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 0.25em;
|
||||
height: 0.25em;
|
||||
background-color: var(--primary-500);
|
||||
border-radius: 100%;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.topic-poster {
|
||||
grid-area: creator;
|
||||
width: auto;
|
||||
align-self: flex-start;
|
||||
|
||||
.avatar {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
border-radius: var(--d-border-radius-small);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include viewport.until(sm) {
|
||||
.category-list.with-topics {
|
||||
margin-inline: 1rem;
|
||||
|
||||
.num.posts,
|
||||
.category-topics-count,
|
||||
.category-logo {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.category-list {
|
||||
&-item {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
border-top: 0 !important;
|
||||
border-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
tr:first-of-type {
|
||||
order: -2;
|
||||
}
|
||||
|
||||
tr.subcategories-list {
|
||||
order: -1;
|
||||
}
|
||||
|
||||
tr:nth-last-of-type(2) {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
th.main-link {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.category-boxes,
|
||||
.category-boxes-with-topics {
|
||||
.category-logo {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@include viewport.from(sm) {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
@include viewport.until(md) {
|
||||
padding-inline: 1rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.category {
|
||||
border: 0;
|
||||
|
||||
&-box-inner {
|
||||
border-radius: var(--d-border-radius-large);
|
||||
border: 1px solid var(--primary-300);
|
||||
background: var(--d-content-background);
|
||||
box-shadow: 0 0 12px 1px var(--topic-card-shadow);
|
||||
|
||||
&:hover {
|
||||
.discourse-no-touch & {
|
||||
border-color: var(--accent-color);
|
||||
background: var(--d-content-background);
|
||||
}
|
||||
}
|
||||
|
||||
&.selected {
|
||||
box-shadow:
|
||||
0 0 0 2px var(--accent-color),
|
||||
0 0 12px 1px var(--topic-card-shadow);
|
||||
}
|
||||
}
|
||||
|
||||
&-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&-box-heading {
|
||||
h3 {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.badge-category {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
gap: 1em;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
|
||||
&__wrapper {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&.--style-square::before {
|
||||
aspect-ratio: 1 / 1;
|
||||
height: auto;
|
||||
width: 13%;
|
||||
border-radius: var(--d-border-radius);
|
||||
}
|
||||
|
||||
&__name {
|
||||
flex-basis: 100%;
|
||||
font-size: var(--font-up-1-rem);
|
||||
}
|
||||
|
||||
.d-icon:not([class*="d-icon-lock"]),
|
||||
img.emoji {
|
||||
aspect-ratio: 1 / 1;
|
||||
height: auto;
|
||||
width: 13%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.description {
|
||||
text-align: left;
|
||||
margin: 0;
|
||||
font-size: var(--font-down-1-rem);
|
||||
}
|
||||
|
||||
.subcategories {
|
||||
margin-top: auto;
|
||||
|
||||
.subcategory {
|
||||
margin-bottom: 0;
|
||||
font-size: var(--font-down-1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// theme component: https://github.com/discourse/discourse-minimal-category-boxes
|
||||
.custom-category-boxes-container {
|
||||
@include viewport.until(sm) {
|
||||
padding-inline: var(--space-4);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,117 @@
|
||||
@use "lib/viewport";
|
||||
|
||||
.full-page-chat.full-page-chat-sidebar-enabled {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.c-navbar-container {
|
||||
background-color: var(--d-content-background);
|
||||
|
||||
.full-page-chat & {
|
||||
@include viewport.from(sm) {
|
||||
padding: 0 1.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.chat-drawer.is-collapsed & {
|
||||
background: var(--tertiary-low);
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
body.has-full-page-chat {
|
||||
background-color: var(--background-color);
|
||||
|
||||
#main-outlet-wrapper {
|
||||
@media screen and (width < 87rem) {
|
||||
// ideal width just slightly larger than our xl viewport variable
|
||||
padding-inline: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chat-drawer-container {
|
||||
.is-expanded & {
|
||||
box-shadow: 0 0 0 2px var(--tertiary-medium);
|
||||
}
|
||||
|
||||
.chat-drawer.is-expanded & {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.c-navbar__title {
|
||||
padding-left: 0.33em; // visual alignment for chat index, which does not have a back arrow
|
||||
}
|
||||
}
|
||||
|
||||
.chat-drawer-outlet-container {
|
||||
z-index: z("composer", "content");
|
||||
padding-bottom: 0;
|
||||
right: var(--main-grid-gap);
|
||||
|
||||
&:has(.is-expanded) {
|
||||
z-index: calc(z("composer", "dropdown") + 1);
|
||||
}
|
||||
|
||||
&.above-composer {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// the below are elements whose z-index needs to be adjusted due to the above change
|
||||
.chat-message-actions-container {
|
||||
.has-drawer-chat & {
|
||||
z-index: calc(z("composer", "dropdown") + 1);
|
||||
}
|
||||
}
|
||||
|
||||
.fk-d-menu[data-identifier="usercard"],
|
||||
.fk-d-menu[data-identifier="chat-message-reaction-users"] {
|
||||
.has-drawer-chat & {
|
||||
z-index: z("modal", "dialog");
|
||||
}
|
||||
}
|
||||
|
||||
.chat-drawer {
|
||||
.peek-mode-active & {
|
||||
max-width: 90vw;
|
||||
}
|
||||
}
|
||||
|
||||
.chat-drawer .channels-list-container .chat-channel-row {
|
||||
margin-bottom: var(--spacing-block-xs);
|
||||
font-size: var(--font-up-1);
|
||||
border-bottom: none;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--d-sidebar-active-background);
|
||||
}
|
||||
}
|
||||
|
||||
.channel-title {
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
font-size: var(--font-down-1);
|
||||
}
|
||||
|
||||
.chat-composer__wrapper {
|
||||
background: var(--d-content-background);
|
||||
}
|
||||
|
||||
.chat-message-actions .more-buttons .btn-icon-text {
|
||||
&:hover {
|
||||
background-color: var(--d-selected);
|
||||
box-shadow: none;
|
||||
color: var(--primary);
|
||||
}
|
||||
}
|
||||
|
||||
.chat-drawer-active.chat-drawer-expanded .chat-composer-dropdown__menu-content {
|
||||
z-index: z("modal", "dialog");
|
||||
}
|
||||
|
||||
.chat-replying-indicator-container {
|
||||
@include viewport.from(sm) {
|
||||
margin-left: calc(0.65em + 0.2rem);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
.user-color-palette-menu {
|
||||
&__item .btn-icon-text.btn-flat {
|
||||
background-color: var(--d-content-background);
|
||||
width: 100%;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
&__item .btn-icon-text.btn-flat:hover {
|
||||
background-color: var(--d-selected);
|
||||
box-shadow: none;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
&__item .btn-icon-text.btn-flat:hover svg {
|
||||
color: var(--icon-color);
|
||||
}
|
||||
|
||||
&__item .btn-icon-text.btn-flat svg {
|
||||
color: var(--icon-color);
|
||||
}
|
||||
|
||||
&__item-choice.active.btn-icon-text.btn-flat {
|
||||
background-color: var(--d-selected);
|
||||
}
|
||||
}
|
||||
|
||||
.user-color-palette-content .fk-d-menu__inner-content {
|
||||
border: none;
|
||||
}
|
||||
@@ -0,0 +1,73 @@
|
||||
@use "lib/viewport";
|
||||
|
||||
.custom-homepage-columns {
|
||||
.header-wrapper {
|
||||
@include viewport.from(lg) {
|
||||
margin-bottom: 1.25em;
|
||||
}
|
||||
}
|
||||
|
||||
.topic-list .topic-list-item {
|
||||
height: auto;
|
||||
|
||||
&:nth-child(odd) {
|
||||
background: var(--topic-list-item-background-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.b-header {
|
||||
.nav-pills > li > a:hover {
|
||||
.discourse-no-touch & {
|
||||
color: var(--secondary);
|
||||
}
|
||||
}
|
||||
|
||||
.nav-pills > li > a:hover::after {
|
||||
.discourse-no-touch & {
|
||||
background: var(--secondary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// theme component: https://github.com/discourse/discourse-minimal-category-boxes
|
||||
.custom-category-boxes-container {
|
||||
@include viewport.until(sm) {
|
||||
padding-inline: var(--space-4);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
@include viewport.from(md) {
|
||||
#main-outlet {
|
||||
div[class^="category-title-header"] {
|
||||
width: calc(100% - (2 * var(--space-4)));
|
||||
border-radius: var(--d-border-radius-large);
|
||||
max-width: calc(1000px - 3rem) !important;
|
||||
}
|
||||
|
||||
.list-container div[class^="category-title-header"] {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// livestream plugin: https://github.com/discourse/discourse-livestream
|
||||
.livestream-topic.chat-enabled.archetype-regular {
|
||||
#custom-chat-container {
|
||||
margin-left: 0;
|
||||
border-top-left-radius: var(--d-border-radius-large);
|
||||
border-top-right-radius: var(--d-border-radius-large);
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.container.posts {
|
||||
grid-template-columns: auto auto;
|
||||
}
|
||||
}
|
||||
|
||||
// TC: Blog Style
|
||||
body:not(.d-toc-installed).blog-post .container.posts,
|
||||
body.d-toc-installed.blog-post .container.posts {
|
||||
grid-template-columns: var(--blog-width) 0;
|
||||
}
|
||||
@@ -0,0 +1,72 @@
|
||||
@use "lib/viewport";
|
||||
|
||||
.peek-mode-toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@include viewport.from(xl) {
|
||||
html:not(.fullscreen-composer) {
|
||||
.peek-mode-toggle svg {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
|
||||
&.composer-open {
|
||||
.full-width-enabled .peek-mode-toggle {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.full-width-enabled.peek-mode-active {
|
||||
#reply-control.hide-preview {
|
||||
transition: none;
|
||||
box-shadow: none;
|
||||
border-radius: var(--d-border-radius-large);
|
||||
|
||||
.grippie {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.reply-area {
|
||||
padding-inline: 0.67em;
|
||||
}
|
||||
}
|
||||
|
||||
#reply-control:not(.fullscreen).hide-preview {
|
||||
width: 100%;
|
||||
right: var(--main-grid-gap);
|
||||
top: var(--header-offset);
|
||||
bottom: var(--main-grid-gap);
|
||||
left: unset;
|
||||
max-width: 36.5vw;
|
||||
}
|
||||
|
||||
&.has-sidebar-page {
|
||||
#main-outlet-wrapper {
|
||||
grid-template-columns:
|
||||
var(--d-sidebar-width) calc(100vw - 38vw - var(--d-sidebar-width))
|
||||
1fr;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.has-sidebar-page) {
|
||||
#main-outlet-wrapper {
|
||||
grid-template-columns: 0 calc(100vw - 52vw) 1fr;
|
||||
}
|
||||
|
||||
#reply-control:not(.fullscreen).hide-preview {
|
||||
max-width: 46vw;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-wrapper .sidebar-container {
|
||||
height: unset;
|
||||
}
|
||||
|
||||
&:not(.keyboard-visible) {
|
||||
#reply-control:not(.fullscreen).hide-preview {
|
||||
height: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,109 @@
|
||||
@use "lib/viewport";
|
||||
|
||||
#reply-control
|
||||
.select-kit.dropdown-select-box.composer-actions
|
||||
.select-kit-header {
|
||||
border: 1px solid var(--tertiary-700);
|
||||
background: var(--secondary);
|
||||
|
||||
&:hover {
|
||||
.d-icon {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#reply-control.hide-preview:not(.draft) {
|
||||
@include viewport.from(sm) {
|
||||
background: var(--d-content-background);
|
||||
|
||||
.user-selector,
|
||||
.title-and-category {
|
||||
padding: 0 var(--space-4);
|
||||
width: calc(100% - var(--space-4) * 2);
|
||||
}
|
||||
|
||||
.d-editor-button-bar {
|
||||
padding: 3px var(--space-4);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.d-editor-input {
|
||||
padding: var(--space-4);
|
||||
}
|
||||
|
||||
.reply-area {
|
||||
padding-inline: 0;
|
||||
}
|
||||
|
||||
.reply-to,
|
||||
.submit-panel {
|
||||
padding-inline: var(--space-2);
|
||||
}
|
||||
|
||||
.d-editor-textarea-wrapper {
|
||||
border: 0;
|
||||
border-bottom: 1px solid var(--content-border-color);
|
||||
border-radius: 0;
|
||||
|
||||
&.in-focus {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.d-editor-button-bar {
|
||||
.btn:hover,
|
||||
.toolbar-popup-menu-options.is-expanded {
|
||||
.discourse-no-touch & {
|
||||
background: var(--tertiary-very-low);
|
||||
color: var(--accent-color);
|
||||
|
||||
.d-icon {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
// to have parity with regular select-kit styling used elsewhere
|
||||
.select-kit-row {
|
||||
.d-icon {
|
||||
color: var(--primary-high);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.d-icon {
|
||||
color: var(--primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar-popup-menu-options.is-expanded {
|
||||
border-radius: var(--d-border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
.discourse-no-touch .translation-selector-dropdown {
|
||||
.select-kit-header.btn-default {
|
||||
background: var(--background-color);
|
||||
}
|
||||
}
|
||||
|
||||
#reply-control.composer-action-add_translation {
|
||||
.d-editor-translation-preview-wrapper {
|
||||
border-color: var(--d-sidebar-border-color);
|
||||
}
|
||||
|
||||
.d-editor-translation-preview-wrapper__header {
|
||||
top: 6.5rem;
|
||||
padding: 0.25rem 0.75rem;
|
||||
background: var(--background-color);
|
||||
color: var(--accent-color);
|
||||
border-radius: var(--d-border-radius-large);
|
||||
}
|
||||
|
||||
.topic-title-translator input {
|
||||
width: 47.25vw;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,254 @@
|
||||
@use "lib/viewport";
|
||||
|
||||
// Full width layout. Ported from the Discourse Full Width theme component here
|
||||
// https://meta.discourse.org/t/discourse-full-width-component/292496, which we
|
||||
// intend to move into core over time.
|
||||
//
|
||||
// We are copying this here so we can continue to iterate on Horizon with full
|
||||
// width without having to include the theme component as a dependency, we
|
||||
// need to remove this once full width is in core.
|
||||
|
||||
$sidebar-width: 17em;
|
||||
|
||||
.wrap {
|
||||
max-width: unset; // undoing core default
|
||||
}
|
||||
|
||||
.d-header #site-logo {
|
||||
// this prevents the logo from shifting header content
|
||||
// when the sidebar is opened
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
object-fit: contain; // contains logo without squishing/stretching
|
||||
|
||||
// allows some flexibility for wide logos
|
||||
body:not(.has-sidebar-page) & {
|
||||
max-width: unset;
|
||||
|
||||
@include viewport.until(sm) {
|
||||
max-width: 25vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.d-header #site-text-logo {
|
||||
font-size: clamp(var(--font-0), 2.5vw, var(--font-up-1));
|
||||
|
||||
.has-sidebar-page & {
|
||||
white-space: wrap;
|
||||
line-height: var(--line-height-medium);
|
||||
|
||||
@include line-clamp(2);
|
||||
}
|
||||
}
|
||||
|
||||
#main-outlet-wrapper {
|
||||
body.has-sidebar-page & {
|
||||
.sidebar-wrapper {
|
||||
width: var(--d-sidebar-width);
|
||||
}
|
||||
}
|
||||
|
||||
body.has-full-page-chat & {
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.sidebar-wrapper {
|
||||
width: 100%; // safari has issues without this
|
||||
}
|
||||
|
||||
#main-outlet {
|
||||
margin: 0 auto;
|
||||
max-width: var(--d-max-width);
|
||||
width: 100%;
|
||||
|
||||
body.has-full-page-chat & {
|
||||
max-width: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.has-full-page-chat:not(.discourse-sidebar) .full-page-chat {
|
||||
border: none;
|
||||
}
|
||||
|
||||
#main-outlet > .regular {
|
||||
max-width: var(--d-max-width);
|
||||
margin: 0 auto;
|
||||
|
||||
body.has-sidebar-page & {
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.d-header .title:not(.title--minimized) {
|
||||
// allowing overflow here isn't always ideal
|
||||
// but works well enough most of the time
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.d-header {
|
||||
> .wrap {
|
||||
.contents {
|
||||
display: grid;
|
||||
grid-template-areas: "logo lspace extra-info rspace panel";
|
||||
grid-template-columns:
|
||||
minmax(auto, 1fr)
|
||||
auto
|
||||
minmax(0, calc(var(--d-max-width)))
|
||||
auto
|
||||
minmax(auto, 1fr);
|
||||
|
||||
.d-header .title {
|
||||
min-width: auto;
|
||||
}
|
||||
|
||||
.has-sidebar-page & {
|
||||
// at wide widths, when 1fr > 0
|
||||
// we want the panel to be the same width as the sidebar
|
||||
// this way we can get more accurate centering
|
||||
grid-template-columns:
|
||||
calc(var(--d-sidebar-width) - 11px) // 11px is wrap padding
|
||||
1fr
|
||||
minmax(0, calc(var(--d-max-width)))
|
||||
1fr
|
||||
minmax(0, calc(var(--d-sidebar-width) - 11px));
|
||||
gap: 1em;
|
||||
|
||||
// at narrower widths, when 1fr = 0
|
||||
// we can center without matching the sidebar's width
|
||||
// which allows the title to take up the remaining width
|
||||
@media screen and (width <= 1400px) {
|
||||
grid-template-columns:
|
||||
calc(var(--d-sidebar-width) - 11px)
|
||||
1fr
|
||||
minmax(0, calc(var(--d-max-width)))
|
||||
1fr
|
||||
auto;
|
||||
}
|
||||
|
||||
@media screen and (width <= 1000px) {
|
||||
gap: 0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header-sidebar-toggle {
|
||||
grid-area: logo;
|
||||
}
|
||||
|
||||
.before-header-panel-outlet {
|
||||
grid-area: extra-info;
|
||||
}
|
||||
|
||||
.home-logo-wrapper-outlet {
|
||||
grid-area: logo;
|
||||
margin-left: 3.7em; // 2.7em hamburger width + 1em for margin
|
||||
margin-right: 0.725em;
|
||||
display: flex;
|
||||
overflow: visible;
|
||||
|
||||
.title {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.panel {
|
||||
grid-area: panel;
|
||||
}
|
||||
}
|
||||
|
||||
.extra-info-wrapper {
|
||||
grid-area: extra-info;
|
||||
max-width: var(--d-max-width);
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.header-search--enabled .floating-search-input-wrapper {
|
||||
grid-area: extra-info;
|
||||
|
||||
@include viewport.until(md) {
|
||||
grid-area: rspace;
|
||||
}
|
||||
|
||||
@include viewport.until(sm) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
body.has-sidebar-page {
|
||||
.wrap {
|
||||
max-width: unset; // undoing core default
|
||||
}
|
||||
|
||||
.extra-info-wrapper {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@media screen and (width >= calc($reply-area-max-width + ($sidebar-width * 2))) {
|
||||
#reply-control.show-preview {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.sidebar-container {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (width <= calc($reply-area-max-width + ($sidebar-width * 2))) and (width >= calc($reply-area-max-width + calc($sidebar-width / 2))) {
|
||||
#reply-control.show-preview:not(.fullscreen) {
|
||||
margin-left: $sidebar-width;
|
||||
width: auto;
|
||||
|
||||
// overruling new core composer changes
|
||||
max-width: $reply-area-max-width;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.sidebar-container {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// overruling new core composer changes
|
||||
@media screen and (min-width: $reply-area-max-width) {
|
||||
#reply-control.show-preview:not(.fullscreen) {
|
||||
max-width: $reply-area-max-width;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
body.sidebar-animate {
|
||||
#main-outlet-wrapper {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.d-header-wrap .wrap {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
.d-header-icons {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.rtl {
|
||||
.d-header .title {
|
||||
margin-right: 3.7em; // 2.7em hamburger width + 1em for margin
|
||||
margin-left: 0.725em;
|
||||
}
|
||||
}
|
||||
|
||||
// provides some extra space for login buttons
|
||||
@media screen and (width >= 1400px) {
|
||||
.anon {
|
||||
.d-header .panel {
|
||||
grid-column-start: -4;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,76 @@
|
||||
.topic-list .topic-list-header .topic-list-data:last-of-type {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// Fixing bulk select (only needed for desktop)
|
||||
.bulk-select-enabled {
|
||||
body:not(.user-messages-page) & {
|
||||
.topic-list-header {
|
||||
position: sticky;
|
||||
top: 8em;
|
||||
height: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.topic-author-avatar-data {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.bulk-select.topic-list-data {
|
||||
grid-area: bulk-select;
|
||||
margin-left: -0.5em;
|
||||
|
||||
@media screen and (width <= 576px) {
|
||||
margin-top: 0;
|
||||
|
||||
label {
|
||||
padding-block: 0.345em;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
transform: scale(1.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.topic-list-header {
|
||||
body:not(.user-messages-page) & {
|
||||
tr {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.topic-list-data {
|
||||
padding: 0;
|
||||
|
||||
&:not(.default) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.default {
|
||||
.bulk-select,
|
||||
span:not(.bulk-select-topics, .d-button-label) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.bulk-select-topics {
|
||||
position: absolute;
|
||||
right: var(--space-2);
|
||||
top: var(--space-2);
|
||||
background: transparent;
|
||||
border-radius: var(--d-border-radius);
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin: var(--space-4) 0;
|
||||
padding: var(--space-1);
|
||||
|
||||
button {
|
||||
white-space: nowrap;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
.discourse-calendar-livestream-zoom-full {
|
||||
.experimental-screen {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,187 @@
|
||||
@use "lib/viewport";
|
||||
|
||||
@media screen and (width >= 1300px) {
|
||||
#main-outlet {
|
||||
border-top-right-radius: var(--d-border-radius-large);
|
||||
border-top-left-radius: var(--d-border-radius-large);
|
||||
}
|
||||
}
|
||||
|
||||
.chat-drawer-active.chat-drawer-expanded {
|
||||
.experimental-screen {
|
||||
&__top-left,
|
||||
&__top-right,
|
||||
&__bottom-left,
|
||||
&__bottom-right,
|
||||
&__bottom-bar {
|
||||
z-index: 199;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.has-full-page-chat .chat-replying-indicator-container {
|
||||
margin-bottom: var(--main-grid-gap);
|
||||
|
||||
@include viewport.until(lg) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.has-full-page-chat .chat-selection-management {
|
||||
margin-bottom: var(--main-grid-gap);
|
||||
|
||||
@include viewport.until(lg) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.experimental-screen {
|
||||
max-width: unset !important;
|
||||
width: 100%;
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
|
||||
@include viewport.until(lg) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media screen and (width <= 488px) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@include viewport.until(md) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&__top-left,
|
||||
&__top-right,
|
||||
&__bottom-left,
|
||||
&__bottom-right {
|
||||
position: fixed;
|
||||
width: var(--d-border-radius-large);
|
||||
height: var(--d-border-radius-large);
|
||||
background-color: var(--background-color);
|
||||
z-index: calc(
|
||||
z("base") + 1
|
||||
); // has to top list-controls, which is sticky in Horizon
|
||||
mask: radial-gradient(
|
||||
circle at var(--d-border-radius-large) var(--d-border-radius-large),
|
||||
transparent var(--d-border-radius-large),
|
||||
transparent var(--d-border-radius-large),
|
||||
black var(--d-border-radius-large)
|
||||
);
|
||||
}
|
||||
|
||||
&__top-left {
|
||||
top: var(--main-outlet-offset);
|
||||
left: var(--left-distance);
|
||||
}
|
||||
|
||||
&__top-right {
|
||||
top: var(--main-outlet-offset);
|
||||
transform: rotate(90deg);
|
||||
left: calc(var(--right-distance) - var(--d-border-radius-large));
|
||||
}
|
||||
|
||||
&__bottom-left {
|
||||
transform: rotate(-90deg);
|
||||
bottom: var(--main-grid-gap);
|
||||
left: var(--left-distance);
|
||||
|
||||
@media screen and (width <= 768px) {
|
||||
bottom: calc(var(--d-border-radius-large) * 2);
|
||||
}
|
||||
}
|
||||
|
||||
&__bottom-right {
|
||||
transform: rotate(180deg);
|
||||
bottom: var(--main-grid-gap);
|
||||
left: calc(var(--right-distance) - var(--d-border-radius-large));
|
||||
|
||||
@media screen and (width <= 768px) {
|
||||
bottom: calc(var(--d-border-radius-large) * 2);
|
||||
}
|
||||
}
|
||||
|
||||
&__bottom-bar {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
z-index: calc(
|
||||
z("base") + 1
|
||||
); // has to top list-controls, which is sticky in Horizon
|
||||
background-color: var(--background-color);
|
||||
bottom: 0;
|
||||
left: var(--left-distance);
|
||||
height: var(--main-grid-gap);
|
||||
|
||||
@media screen and (width <= 768px) {
|
||||
height: calc(var(--d-border-radius-large) * 2);
|
||||
}
|
||||
|
||||
@container content-width (width > 1px) {
|
||||
width: 100cqw;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rtl .experimental-screen {
|
||||
&__top-left {
|
||||
right: var(--left-distance);
|
||||
left: unset;
|
||||
}
|
||||
|
||||
&__top-right {
|
||||
transform: rotate(-90deg) !important;
|
||||
right: calc(var(--right-distance) - var(--d-border-radius-large));
|
||||
left: unset;
|
||||
}
|
||||
|
||||
&__bottom-left {
|
||||
transform: rotate(90deg);
|
||||
right: var(--left-distance);
|
||||
left: unset;
|
||||
}
|
||||
|
||||
&__bottom-right {
|
||||
transform: rotate(180deg);
|
||||
left: unset;
|
||||
right: calc(var(--right-distance) - var(--d-border-radius-large));
|
||||
}
|
||||
|
||||
&__bottom-bar {
|
||||
right: var(--left-distance);
|
||||
left: unset;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (width >= 768px) {
|
||||
.with-topic-progress {
|
||||
bottom: calc(
|
||||
env(safe-area-inset-bottom) + var(--composer-height, 0px) +
|
||||
var(--d-border-radius-large)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (width <= 768px) {
|
||||
.with-topic-progress {
|
||||
bottom: calc(
|
||||
env(safe-area-inset-bottom) + var(--composer-height, 0px) +
|
||||
calc(var(--d-border-radius-large) * 2)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (width <= 400px) {
|
||||
.with-topic-progress {
|
||||
bottom: calc(env(safe-area-inset-bottom) + var(--composer-height, 0px));
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,87 @@
|
||||
@use "lib/viewport";
|
||||
|
||||
.d-header {
|
||||
box-shadow: none;
|
||||
background: var(--background-color);
|
||||
}
|
||||
|
||||
.search-menu .search-input,
|
||||
.search-menu-container .search-input {
|
||||
border-color: var(--header_primary-low-mid);
|
||||
}
|
||||
|
||||
.user-menu .quick-access-panel,
|
||||
.user-notifications-list {
|
||||
li {
|
||||
&.pending,
|
||||
&.unread {
|
||||
background: var(--d-hover);
|
||||
|
||||
.discourse-no-touch & {
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: var(--d-selected);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.discourse-no-touch .d-header-icons .icon:hover,
|
||||
.discourse-no-touch .d-header-icons .icon:focus,
|
||||
.header-sidebar-toggle button:focus:hover,
|
||||
.discourse-no-touch .header-sidebar-toggle button:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.discourse-no-touch .d-header-icons .icon:hover > .d-icon,
|
||||
.drop-down-mode .d-header-icons .active .icon > .d-icon,
|
||||
.drop-down-mode
|
||||
.d-header-icons
|
||||
.header-color-scheme-toggle
|
||||
.-expanded
|
||||
> .d-icon,
|
||||
.discourse-no-touch .header-sidebar-toggle button:hover .d-icon {
|
||||
color: var(--header_primary-medium);
|
||||
}
|
||||
|
||||
.discourse-no-touch .interface-color-selector-content {
|
||||
border: none;
|
||||
border-radius: var(--d-border-radius);
|
||||
|
||||
.btn {
|
||||
border: none;
|
||||
|
||||
&:hover {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.drop-down-mode .d-header-icons .active .icon,
|
||||
.drop-down-mode .d-header-icons .header-color-scheme-toggle .-expanded {
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.badge-notification {
|
||||
color: var(--accent-text-color);
|
||||
}
|
||||
|
||||
body.login-page,
|
||||
body.signup-page,
|
||||
body.invite-page,
|
||||
body.password-reset-page,
|
||||
body.activate-account-page {
|
||||
.d-header {
|
||||
background: var(--background-color);
|
||||
}
|
||||
}
|
||||
|
||||
.header-dropdown-toggle.chat-header-icon .icon .chat-channel-unread-indicator {
|
||||
border-color: var(--background-color);
|
||||
}
|
||||
|
||||
.d-header-icons .badge-notification {
|
||||
border-color: var(--background-color);
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
@use "lib/viewport";
|
||||
|
||||
.sidebar__panel-switch-button,
|
||||
.notifications-button-footer .reason .text,
|
||||
.pinned-button .reason .text,
|
||||
.more-topics__browse-more,
|
||||
.topic-list-layout-trigger {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@include viewport.from(md) {
|
||||
.horizon-new-topic-button-enabled {
|
||||
.list-controls .topic-create-button__combo {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,362 @@
|
||||
@use "lib/viewport";
|
||||
|
||||
$padding-pills-small: var(--space-half) var(--space-2);
|
||||
|
||||
.topic-list-body:has(.--high-context) {
|
||||
--title-color--read: var(--primary-700);
|
||||
--topic-title-font-weight--visited: 600;
|
||||
|
||||
@include viewport.from(sm) {
|
||||
gap: var(--space-4);
|
||||
}
|
||||
}
|
||||
|
||||
.topic-list-item.--high-context {
|
||||
display: block;
|
||||
background: var(--secondary);
|
||||
padding: 0;
|
||||
|
||||
&.closed {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
&.bulk-selecting {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&.bulk-selected {
|
||||
background: var(--tertiary-low);
|
||||
border-color: var(--tertiary);
|
||||
|
||||
&:hover {
|
||||
background: var(--tertiary-medium);
|
||||
}
|
||||
}
|
||||
|
||||
@include viewport.from(sm) {
|
||||
border: 1px solid var(--primary-low);
|
||||
border-radius: var(--d-border-radius-large);
|
||||
}
|
||||
|
||||
@include viewport.until(sm) {
|
||||
border-bottom: 1px solid var(--primary-low);
|
||||
}
|
||||
|
||||
&.selected {
|
||||
border-color: var(--accent-color);
|
||||
box-shadow: 0 0 12px 1px var(--topic-card-shadow);
|
||||
}
|
||||
|
||||
.bulk-select-enabled & {
|
||||
> .bulk-select {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hc-topic-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-3);
|
||||
padding: var(--space-4) var(--space-5);
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
@include viewport.until(sm) {
|
||||
padding: var(--space-4) 0;
|
||||
|
||||
> *:not(.hc-topic-card__footer) {
|
||||
padding-inline: var(--space-4);
|
||||
}
|
||||
}
|
||||
|
||||
@include viewport.from(sm) {
|
||||
padding: var(--space-4);
|
||||
}
|
||||
|
||||
&__header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
|
||||
@include viewport.until(sm) {
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
&__op {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
color: var(--primary-medium);
|
||||
font-size: var(--font-down-1-rem);
|
||||
}
|
||||
|
||||
&__op-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&__avatar {
|
||||
flex-shrink: 0;
|
||||
|
||||
.avatar {
|
||||
border-radius: var(--d-border-radius);
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
&__status {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-1);
|
||||
border-radius: var(--d-border-radius);
|
||||
white-space: nowrap;
|
||||
background: var(--secondary);
|
||||
border: 1px solid var(--primary-low-mid);
|
||||
font-weight: 700;
|
||||
|
||||
@include viewport.from(sm) {
|
||||
padding: $padding-pills-small;
|
||||
}
|
||||
|
||||
@include viewport.until(sm) {
|
||||
padding: var(--space-1);
|
||||
border-radius: calc(var(--d-border-radius) / 2);
|
||||
}
|
||||
|
||||
&.--solved {
|
||||
color: var(--success);
|
||||
font-weight: 700;
|
||||
border-color: var(--success);
|
||||
}
|
||||
|
||||
&.--pinned {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
&.--hot {
|
||||
border: 1px solid var(--danger);
|
||||
color: var(--danger);
|
||||
}
|
||||
}
|
||||
|
||||
&__category .badge-category__wrapper {
|
||||
padding: var(--space-half) var(--space-2) !important;
|
||||
font-size: var(--font-down-1-rem);
|
||||
border-radius: var(--d-border-radius-small) !important;
|
||||
}
|
||||
|
||||
&__status-tags {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
|
||||
@include viewport.from(sm) {
|
||||
font-size: var(--font-down-2-rem);
|
||||
}
|
||||
|
||||
@include viewport.until(sm) {
|
||||
font-size: var(--font-0);
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
&__bulk-select {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-inline: var(--space-3) 0;
|
||||
cursor: pointer;
|
||||
|
||||
input {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-weight: 700;
|
||||
font-size: var(--font-up-1-rem);
|
||||
color: var(--primary);
|
||||
text-decoration: none;
|
||||
line-height: 1.3;
|
||||
|
||||
a {
|
||||
color: var(--primary);
|
||||
word-break: break-word;
|
||||
|
||||
> * {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.topic-status.--pinned,
|
||||
.topic-status.--unpinned,
|
||||
.topic-status.--solved,
|
||||
.topic-status.--unsolved {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.topic-excerpt {
|
||||
overflow-wrap: anywhere;
|
||||
|
||||
.--high-context & {
|
||||
color: var(--primary-high);
|
||||
line-height: 1.25;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
font-size: var(--font-0);
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&__context {
|
||||
display: flex;
|
||||
gap: var(--space-3);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
&__assigned {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-1);
|
||||
padding: $padding-pills-small;
|
||||
border-radius: var(--d-border-radius-small);
|
||||
background: var(--primary-very-low);
|
||||
color: var(--primary-medium);
|
||||
font-size: var(--font-down-2-rem);
|
||||
}
|
||||
|
||||
&__tags {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
gap: var(--space-2);
|
||||
flex-wrap: wrap;
|
||||
|
||||
.discourse-tags__tag-separator {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.discourse-tag {
|
||||
padding: var(--space-half) var(--space-2);
|
||||
border-radius: var(--d-border-radius-small);
|
||||
border: 1px solid var(--primary-low);
|
||||
background: var(--secondary);
|
||||
color: var(--primary-high);
|
||||
white-space: nowrap;
|
||||
font-size: var(--font-down-2-rem);
|
||||
|
||||
&.assigned-to,
|
||||
&.list-vote-count {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__footer {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
|
||||
@include viewport.from(sm) {
|
||||
border-top: 1px solid var(--primary-low);
|
||||
padding-top: var(--space-3);
|
||||
}
|
||||
|
||||
@include viewport.until(sm) {
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
var(--secondary) 0,
|
||||
transparent 1rem,
|
||||
transparent calc(100% - 1rem),
|
||||
var(--secondary) 100%
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__category-tags {
|
||||
display: flex;
|
||||
gap: var(--space-2);
|
||||
overflow: auto;
|
||||
|
||||
@include viewport.until(sm) {
|
||||
padding-inline: var(--space-4);
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none; // Chrome/Safari
|
||||
}
|
||||
}
|
||||
|
||||
&__category {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&__stats {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-4);
|
||||
margin-left: auto;
|
||||
flex-shrink: 0;
|
||||
|
||||
@include viewport.until(sm) {
|
||||
padding-inline: var(--space-4);
|
||||
}
|
||||
}
|
||||
|
||||
&__replies,
|
||||
&__likes,
|
||||
&__votes {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-1);
|
||||
color: var(--primary-medium);
|
||||
font-size: var(--font-down-1-rem);
|
||||
}
|
||||
|
||||
&__last-reply {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-1);
|
||||
padding: $padding-pills-small;
|
||||
border-radius: var(--d-border-radius-small);
|
||||
background: var(--primary-very-low);
|
||||
font-size: var(--font-down-2-rem);
|
||||
color: var(--primary-medium);
|
||||
|
||||
.avatar {
|
||||
border-radius: 50%;
|
||||
height: 1rem;
|
||||
width: 1rem;
|
||||
}
|
||||
|
||||
@include viewport.until(sm) {
|
||||
.avatar {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__time {
|
||||
color: var(--primary-medium);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
body.static-login {
|
||||
#main-outlet-wrapper {
|
||||
grid-template-areas:
|
||||
"sidebar blank"
|
||||
"sidebar content"
|
||||
"sidebar below-content";
|
||||
grid-template-rows: auto 1fr auto;
|
||||
}
|
||||
|
||||
.login-welcome {
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,152 @@
|
||||
@use "lib/viewport";
|
||||
|
||||
:root {
|
||||
--main-grid-gap: 0.5em;
|
||||
}
|
||||
|
||||
html:not(:has(.has-full-page-chat)) {
|
||||
background-color: var(--background-color);
|
||||
|
||||
@include viewport.until(lg) {
|
||||
background-color: var(--d-content-background);
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
|
||||
@include viewport.until(sm) {
|
||||
background-color: var(--d-content-background);
|
||||
}
|
||||
|
||||
@include viewport.from(lg) {
|
||||
&.account-created-page,
|
||||
&.activate-account-page {
|
||||
background: var(--background-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#main-outlet-wrapper {
|
||||
@include viewport.from(lg) {
|
||||
gap: var(--main-grid-gap);
|
||||
}
|
||||
}
|
||||
|
||||
body.has-sidebar-page.has-full-page-chat #main-outlet-wrapper {
|
||||
column-gap: var(--main-grid-gap);
|
||||
background-color: var(--background-color);
|
||||
|
||||
@include viewport.until(lg) {
|
||||
background-color: var(--secondary);
|
||||
}
|
||||
}
|
||||
|
||||
body.has-full-page-chat:not(.has-sidebar-page) {
|
||||
.d-header {
|
||||
background-color: var(--background-color);
|
||||
}
|
||||
|
||||
#main-outlet-wrapper {
|
||||
gap: var(--main-grid-gap);
|
||||
|
||||
@include viewport.until(lg) {
|
||||
gap: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
body.has-sidebar-page #main-outlet-wrapper {
|
||||
#main-outlet {
|
||||
max-width: unset;
|
||||
}
|
||||
|
||||
@include viewport.from(lg) {
|
||||
gap: var(--main-grid-gap);
|
||||
padding-right: var(--main-grid-gap);
|
||||
}
|
||||
}
|
||||
|
||||
body:not(.has-sidebar-page) #main-outlet-wrapper {
|
||||
@include viewport.from(lg) {
|
||||
grid-template-columns: 0 minmax(0, 1fr) 0;
|
||||
}
|
||||
}
|
||||
|
||||
body:not(.has-full-page-chat, .wizard) {
|
||||
@include viewport.from(xl) {
|
||||
background-color: var(--background-color);
|
||||
}
|
||||
|
||||
#main-outlet-wrapper {
|
||||
#main-outlet {
|
||||
width: 100%;
|
||||
max-width: unset;
|
||||
padding-bottom: var(--space-6);
|
||||
border-radius: var(--d-border-radius-large);
|
||||
background-color: var(--d-content-background);
|
||||
|
||||
@include viewport.until(lg) {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
html.composer-open & {
|
||||
padding-bottom: var(--composer-height);
|
||||
}
|
||||
|
||||
@include viewport.from(sm) {
|
||||
> *:not(
|
||||
.experimental-screen,
|
||||
.activate-account,
|
||||
.discourse-kanban-board-viewer
|
||||
) {
|
||||
box-sizing: border-box;
|
||||
max-width: 1000px;
|
||||
margin-inline: auto;
|
||||
padding-inline: var(--space-6);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
body.has-admin-changes-banner #main-outlet-wrapper #main-outlet {
|
||||
// makes space so save banner doesn't overlap content
|
||||
padding-bottom: 6em;
|
||||
}
|
||||
|
||||
@include viewport.until(sm) {
|
||||
.welcome-banner {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
#list-area {
|
||||
.topic-list-body {
|
||||
padding-top: var(--space-4);
|
||||
}
|
||||
}
|
||||
|
||||
aside.onebox {
|
||||
background-color: var(--d-content-background);
|
||||
}
|
||||
|
||||
.d-editor-preview-wrapper {
|
||||
border-radius: var(--d-border-radius);
|
||||
padding: 1em;
|
||||
background-color: var(--d-content-background);
|
||||
}
|
||||
|
||||
.no-ember {
|
||||
#main-outlet {
|
||||
border-radius: var(--d-border-radius-large);
|
||||
max-height: calc(100vh - 50px - 1em - var(--main-grid-gap));
|
||||
}
|
||||
}
|
||||
|
||||
.activate-account {
|
||||
.activate-account-button,
|
||||
.continue-button {
|
||||
margin-inline: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,139 @@
|
||||
@use "lib/viewport";
|
||||
|
||||
.user-main .about.collapsed-info .details {
|
||||
background: var(--d-content-background);
|
||||
}
|
||||
|
||||
.user-menu .quick-access-panel .read,
|
||||
.user-notifications-list .read {
|
||||
background: var(--d-content-background);
|
||||
}
|
||||
|
||||
.powered-by-discourse {
|
||||
z-index: calc(
|
||||
z("base") + 2
|
||||
); // has to top experimental framing inset elements of Horizon
|
||||
}
|
||||
|
||||
.boxed.white {
|
||||
background-color: var(--d-content-background);
|
||||
}
|
||||
|
||||
.admin-area .sidebar-wrapper .admin-panel {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.admin-report .chart__body .report-alert.no-data,
|
||||
.admin-report .chart__body .report-alert.rate-limited {
|
||||
background-color: var(--d-content-background);
|
||||
}
|
||||
|
||||
.admin-detail {
|
||||
background-color: var(--d-content-background);
|
||||
}
|
||||
|
||||
.select-kit.combo-box .select-kit-header,
|
||||
.select-kit.multi-select .multi-select-header,
|
||||
.d-editor-textarea-wrapper,
|
||||
.fk-d-menu__inner-content,
|
||||
.menu-panel {
|
||||
background-color: var(--d-content-background);
|
||||
}
|
||||
|
||||
.d-editor-textarea-wrapper.in-focus,
|
||||
input[type="text"]:focus,
|
||||
input[type="password"]:focus,
|
||||
input[type="datetime"]:focus,
|
||||
input[type="datetime-local"]:focus,
|
||||
input[type="date"]:focus,
|
||||
input[type="month"]:focus,
|
||||
input[type="time"]:focus,
|
||||
input[type="week"]:focus,
|
||||
input[type="number"]:focus,
|
||||
input[type="email"]:focus,
|
||||
input[type="url"]:focus,
|
||||
input[type="search"]:focus,
|
||||
input[type="tel"]:focus,
|
||||
input[type="color"]:focus,
|
||||
.select-kit.multi-select.is-expanded .multi-select-header,
|
||||
.select-kit.multi-select .multi-select-header:focus {
|
||||
border-color: var(--accent-color);
|
||||
outline: 2px solid var(--accent-color);
|
||||
}
|
||||
|
||||
#reply-control {
|
||||
background-color: var(--background-color);
|
||||
}
|
||||
|
||||
@include viewport.until(sm) {
|
||||
// pinned topic excerpts are hidden on small screens too
|
||||
.fk-d-menu__trigger.topic-list-layout-trigger {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.search-container .search-header,
|
||||
.search-container .search-bar,
|
||||
.search-container .search-filters,
|
||||
.search-container .search-filters .search-advanced-filters {
|
||||
background-color: var(--d-content-background);
|
||||
}
|
||||
|
||||
.user-main .about .details {
|
||||
padding: 1em 1em 0;
|
||||
border-bottom: 0;
|
||||
border-radius: var(--d-border-radius);
|
||||
background-color: var(--primary-50);
|
||||
}
|
||||
|
||||
.alert.alert-info {
|
||||
background: var(--tertiary-very-low);
|
||||
}
|
||||
|
||||
.discourse-reactions-list .reactions {
|
||||
gap: 0.15em;
|
||||
}
|
||||
|
||||
.group-details-container {
|
||||
border-radius: var(--d-border-radius);
|
||||
}
|
||||
|
||||
.period-chooser-header {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.upcoming-change__badge-info {
|
||||
padding-right: var(--space-2);
|
||||
}
|
||||
|
||||
// compatibility with the top contributors sidebar theme component
|
||||
// https://meta.discourse.org/t/top-contributors-sidebar/215110
|
||||
.list-container
|
||||
#list-area
|
||||
> .contents
|
||||
> .topic-list:has(.discourse-top-contributors) {
|
||||
grid-template-areas: "head head" "body sidebar";
|
||||
grid-template-rows: auto 1fr;
|
||||
|
||||
@include viewport.until(lg) {
|
||||
grid-template-areas: "head head" "body body";
|
||||
}
|
||||
|
||||
tbody {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.discourse-top-contributors {
|
||||
width: auto;
|
||||
box-sizing: border-box;
|
||||
|
||||
@include viewport.until(lg) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.top-contributors-heading {
|
||||
font-size: var(--font-up-2);
|
||||
padding-bottom: 0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,224 @@
|
||||
@use "lib/viewport";
|
||||
|
||||
// temp separate file to avoid merge hell… to be distributed later
|
||||
@include viewport.until(lg) {
|
||||
html,
|
||||
.d-header {
|
||||
background-color: var(--d-content-background);
|
||||
}
|
||||
}
|
||||
|
||||
#main-outlet-wrapper {
|
||||
*[class*="navigation-"] & {
|
||||
@include viewport.until(sm) {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#main-outlet {
|
||||
@include viewport.until(sm) {
|
||||
padding-top: var(--space-2);
|
||||
}
|
||||
|
||||
.list-controls {
|
||||
@include viewport.until(sm) {
|
||||
padding-inline: var(
|
||||
--space-4
|
||||
) !important; // override will be fixed when the whole chat page shenanigans is resolved
|
||||
padding-block: var(--space-2);
|
||||
border-bottom: 1px solid var(--primary-200);
|
||||
}
|
||||
|
||||
.navigation-container {
|
||||
@include viewport.until(sm) {
|
||||
gap: var(--space-2);
|
||||
|
||||
.category-breadcrumb.hidden,
|
||||
.category-breadcrumb {
|
||||
display: flex !important;
|
||||
column-gap: var(--space-4);
|
||||
row-gap: var(--space-1);
|
||||
flex-basis: 100%;
|
||||
|
||||
li {
|
||||
margin-right: 0;
|
||||
margin-left: calc(
|
||||
(var(--space-2) - 2px) * -1
|
||||
); // 2px is width of the outline
|
||||
}
|
||||
|
||||
.select-kit-header-wrapper {
|
||||
gap: 0.25em;
|
||||
}
|
||||
|
||||
.select-kit-header {
|
||||
background: var(--d-content-background);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-default {
|
||||
border: 0;
|
||||
margin-right: 0;
|
||||
|
||||
.d-icon {
|
||||
font-size: var(--font-up-1);
|
||||
}
|
||||
}
|
||||
|
||||
.fk-d-button-tooltip {
|
||||
margin-right: 0;
|
||||
margin-left: var(
|
||||
--space-1
|
||||
); // pure visual correction for horizontal alignment
|
||||
|
||||
&:has(#create-topic) {
|
||||
order: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#navigation-bar,
|
||||
.navigation-controls,
|
||||
.category-breadcrumb {
|
||||
@include viewport.until(sm) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-container {
|
||||
@include viewport.until(sm) {
|
||||
padding-inline: 0 !important;
|
||||
}
|
||||
|
||||
.topic-list-body {
|
||||
@include viewport.until(sm) {
|
||||
border-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#topic-title {
|
||||
@include viewport.until(sm) {
|
||||
.title-wrapper {
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.topic-category {
|
||||
order: -1;
|
||||
}
|
||||
|
||||
.badge-category__wrapper {
|
||||
font-size: var(--font-down-2-rem);
|
||||
border-radius: var(--d-border-radius);
|
||||
padding: var(--space-1) var(--space-2);
|
||||
background-color: var(--badge-category-bg);
|
||||
border: 1px solid var(--badge-category-bg);
|
||||
}
|
||||
|
||||
.badge-category__name {
|
||||
color: var(--badge-category-text);
|
||||
}
|
||||
|
||||
.discourse-tags {
|
||||
gap: var(--space-1);
|
||||
|
||||
&__tag-separator {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.discourse-tag {
|
||||
font-size: var(--font-down-2-rem);
|
||||
padding: var(--space-1) var(--space-2);
|
||||
gap: var(--space-1);
|
||||
border-radius: var(--d-border-radius-large);
|
||||
border: 1px solid var(--primary-low-mid);
|
||||
background: var(--secondary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
body:not(.archetype-private_message) {
|
||||
.container.posts {
|
||||
@include viewport.until(sm) {
|
||||
.main-avatar .avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.topic-body {
|
||||
.topic-meta-data {
|
||||
.username {
|
||||
font-size: var(--font-0-rem);
|
||||
}
|
||||
}
|
||||
|
||||
.contents {
|
||||
padding-top: var(--space-4);
|
||||
}
|
||||
}
|
||||
|
||||
.small-action {
|
||||
&-desc {
|
||||
padding: var(--space-1) 0;
|
||||
}
|
||||
|
||||
// for core eventually, better way imo
|
||||
.topic-avatar {
|
||||
padding-top: 0;
|
||||
align-items: center;
|
||||
|
||||
.d-icon {
|
||||
font-size: var(--font-up-1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#topic-footer-buttons {
|
||||
@include viewport.until(sm) {
|
||||
padding-inline: var(--space-1) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// should be changed in core, should not be a primary btn
|
||||
// changing this into straight buttons to match the progress one, which doesn't work well with rounded corners
|
||||
#topic-progress-wrapper {
|
||||
.progress-back-container {
|
||||
margin-right: 0;
|
||||
margin-bottom: var(--space-1);
|
||||
|
||||
.btn-primary.progress-back {
|
||||
border-radius: 0;
|
||||
background: var(--secondary);
|
||||
border: 1px solid var(--tertiary-low);
|
||||
color: var(--accent-color);
|
||||
padding: var(--space-2) var(--space-4);
|
||||
|
||||
.d-icon {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.topic-admin-menu-trigger {
|
||||
border-radius: 0;
|
||||
background: var(--secondary);
|
||||
border: 1px solid var(--tertiary-low);
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-device #reply-control.show-preview .submit-panel {
|
||||
background-color: var(--background-color);
|
||||
}
|
||||
|
||||
.d-editor-preview-wrapper {
|
||||
outline: 2px solid var(--background-color);
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
.list-controls {
|
||||
position: sticky;
|
||||
top: var(--header-offset);
|
||||
background: var(--d-content-background);
|
||||
z-index: z("base") + 1;
|
||||
padding: 1rem 0 0 0;
|
||||
max-width: unset;
|
||||
border-top-left-radius: var(--d-border-radius-large);
|
||||
border-top-right-radius: var(--d-border-radius-large);
|
||||
|
||||
.navigation-container {
|
||||
gap: 1rem;
|
||||
|
||||
.category-breadcrumb {
|
||||
order: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.combo-box .combo-box-header {
|
||||
// needs more specificity than just in the button file
|
||||
background-color: var(--secondary);
|
||||
border-radius: var(--d-border-radius);
|
||||
border: 1px solid var(--primary-300);
|
||||
|
||||
&:hover {
|
||||
border: 1px solid var(--accent-color);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
.discourse-no-touch & {
|
||||
background: var(--secondary);
|
||||
color: var(--accent-color);
|
||||
box-shadow: 0 0 0 3px var(--button-box-shadow);
|
||||
|
||||
.d-icon {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select-kit.is-expanded .select-kit-body {
|
||||
border-radius: var(--d-border-radius);
|
||||
background-color: var(--d-content-background);
|
||||
}
|
||||
|
||||
.nav-pills > li > a:hover,
|
||||
.nav-pills > li button:hover {
|
||||
.discourse-no-touch & {
|
||||
background: transparent;
|
||||
color: var(--d-nav-color--hover);
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
height: var(--d-nav-underline-height);
|
||||
background: var(--d-nav-color--hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,117 @@
|
||||
@use "lib/viewport";
|
||||
|
||||
.has-ai-conversations-sidebar {
|
||||
.sidebar-new-topic-button__wrapper {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-new-topic-button {
|
||||
flex: 1 1 auto;
|
||||
|
||||
&__wrapper {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
margin: var(--space-2) var(--space-6) 0 var(--space-2);
|
||||
position: relative;
|
||||
|
||||
@include viewport.from(lg) {
|
||||
&:not(:hover, :focus-visible) {
|
||||
&::after {
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: var(--space-4);
|
||||
position: absolute;
|
||||
bottom: calc(var(--space-4) * -1);
|
||||
background: linear-gradient(
|
||||
to top,
|
||||
transparent 0,
|
||||
var(--background-color) 100%
|
||||
);
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:focus-visible,
|
||||
&:hover {
|
||||
.discourse-no-touch & {
|
||||
background-color: var(--button-box-shadow);
|
||||
box-shadow: 0 0 0 4px var(--button-box-shadow);
|
||||
color: var(--accent-text-color);
|
||||
|
||||
.d-icon {
|
||||
color: var(--accent-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-view & {
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
|
||||
&:has(.topic-drafts-menu-trigger) {
|
||||
.sidebar-new-topic-button {
|
||||
&:focus-visible,
|
||||
&:hover {
|
||||
.discourse-no-touch & {
|
||||
box-shadow: none;
|
||||
background: light-dark(
|
||||
oklch(from var(--accent-color) 40% c h),
|
||||
oklch(from var(--accent-color) 50% c h)
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fk-d-button-tooltip {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.topic-drafts-menu-trigger {
|
||||
flex: 0 1 auto;
|
||||
margin: 0;
|
||||
border-radius: 0 var(--d-button-border-radius)
|
||||
var(--d-button-border-radius) 0;
|
||||
|
||||
&:focus-visible,
|
||||
&:hover {
|
||||
.discourse-no-touch & {
|
||||
box-shadow: none;
|
||||
background: light-dark(
|
||||
oklch(from var(--accent-color) 40% c h),
|
||||
oklch(from var(--accent-color) 50% c h)
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fk-d-button-tooltip:has(button[disabled]) {
|
||||
+ .topic-drafts-menu-trigger {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.fk-d-tooltip__trigger {
|
||||
background: var(--accent-color);
|
||||
border-radius: 0 var(--d-button-border-radius)
|
||||
var(--d-button-border-radius) 0;
|
||||
padding-right: 0.65em;
|
||||
|
||||
.d-icon {
|
||||
color: var(--secondary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
li.sidebar-section-link-wrapper[data-list-item-name="New Topic"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.has-full-page-chat {
|
||||
.sidebar-new-topic-button__wrapper {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,111 @@
|
||||
@use "lib/viewport";
|
||||
|
||||
:root {
|
||||
--d-sidebar-active-background: var(--d-selected);
|
||||
}
|
||||
|
||||
body.has-full-page-chat .sidebar-wrapper,
|
||||
.sidebar-wrapper,
|
||||
.sidebar-hamburger-dropdown {
|
||||
@include viewport.until(lg) {
|
||||
background: var(--secondary);
|
||||
|
||||
.sidebar-footer-wrapper {
|
||||
background: var(--secondary);
|
||||
|
||||
.sidebar-footer-container::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.has-full-page-chat &,
|
||||
.has-full-page-chat & .sidebar-footer-wrapper {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.sidebar-container {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.sidebar-section-link {
|
||||
transition: none;
|
||||
border-radius: var(--d-border-radius);
|
||||
}
|
||||
|
||||
.dropdown-menu__item .sidebar-section-link {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-hamburger-dropdown {
|
||||
.sidebar-new-topic-button__wrapper {
|
||||
width: 100%;
|
||||
margin: 0 0 var(--space-2);
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-section-wrapper {
|
||||
--d-sidebar-section-border-color: var(--d-sidebar-border-color);
|
||||
|
||||
@include viewport.from(xl) {
|
||||
padding-block: 0.45em;
|
||||
}
|
||||
|
||||
@include viewport.until(sm) {
|
||||
.hamburger-panel .revamped & {
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-section-header {
|
||||
font-size: var(--font-down-2);
|
||||
}
|
||||
|
||||
.sidebar-section-content {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@include viewport.from(xl) {
|
||||
gap: var(--space-1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-wrapper .sidebar-sections {
|
||||
--scrollbarThumbBg: var(--d-selected);
|
||||
}
|
||||
|
||||
.sidebar-section-link-wrapper .sidebar-section-link:focus,
|
||||
.sidebar-section-link-wrapper .sidebar-section-link:hover {
|
||||
.d-icon {
|
||||
color: var(--primary);
|
||||
}
|
||||
}
|
||||
|
||||
// put the draft menu above the slide-out hamburger on small desktop screens
|
||||
@include viewport.until(md) {
|
||||
html:not(.mobile-view) {
|
||||
.topic-drafts-menu-content {
|
||||
z-index: z("modal", "overlay");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.admin-area .sidebar-wrapper .admin-panel {
|
||||
--d-sidebar-highlight-background: var(--d-selected);
|
||||
--d-sidebar-link-icon-color: var(--d-sidebar-link-color);
|
||||
}
|
||||
|
||||
.sidebar-theme-toggle__wrapper {
|
||||
order: -1;
|
||||
|
||||
.d-icon-paintbrush {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-theme-toggle-dropdown.select-kit.combo-box .select-kit-header {
|
||||
padding-left: 1em;
|
||||
}
|
||||
@@ -0,0 +1,654 @@
|
||||
@use "lib/viewport";
|
||||
|
||||
:root {
|
||||
--d-border-radius-small: calc(var(--d-border-radius) * 0.5);
|
||||
--topic-list-item-background-color: var(--d-content-background);
|
||||
--topic-list-item-background-color--visited: var(--d-content-background);
|
||||
--topic-card-shadow: rgb(var(--tertiary-rgb), 0.1);
|
||||
}
|
||||
|
||||
.badge-category__wrapper {
|
||||
--badge-category-bg: light-dark(
|
||||
oklch(from var(--category-badge-color) 97% calc(c * 0.3) h),
|
||||
oklch(from var(--category-badge-color) 45% calc(c * 0.5) h)
|
||||
);
|
||||
--badge-category-text: light-dark(
|
||||
oklch(from var(--category-badge-color) 20% calc(c * 1) h),
|
||||
oklch(from var(--category-badge-color) 100% calc(c * 0.9) h)
|
||||
);
|
||||
}
|
||||
|
||||
.topic-list.--d-topic-cards .topic-list-header .topic-list-data {
|
||||
max-width: unset;
|
||||
}
|
||||
|
||||
.topic-list .topic-list-item-separator {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.topic-list > .topic-list-body > .topic-list-item.last-visit {
|
||||
border-bottom: 1px solid var(--primary-300);
|
||||
|
||||
&:hover {
|
||||
border-color: var(--accent-color);
|
||||
}
|
||||
}
|
||||
|
||||
.topic-list,
|
||||
.category-boxes .subcategories {
|
||||
.badge-category__wrapper {
|
||||
border-radius: var(--d-border-radius);
|
||||
padding: 3px 6px;
|
||||
background-color: var(--badge-category-bg);
|
||||
|
||||
@include viewport.until(md) {
|
||||
padding: 2px 6px;
|
||||
font-size: var(--font-down-2);
|
||||
}
|
||||
|
||||
.badge-category__name {
|
||||
color: var(--badge-category-text);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// undo all the above for the few instances that arent styled like traditional badges
|
||||
.category-text-title {
|
||||
.badge-category__wrapper {
|
||||
border-radius: 0;
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
|
||||
.badge-category__name {
|
||||
color: var(--primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.topic-list.--d-topic-cards .topic-list-body {
|
||||
border: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-4);
|
||||
|
||||
@include viewport.until(lg) {
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
@include viewport.until(sm) {
|
||||
gap: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.topic-list.--d-topic-cards .topic-list-body .topic-list-item {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.topic-list.--d-topic-cards
|
||||
.topic-list-body
|
||||
.topic-list-item:not(.--high-context) {
|
||||
position: relative;
|
||||
text-overflow: ellipsis;
|
||||
padding: var(--space-3);
|
||||
border: 1px solid var(--primary-300);
|
||||
display: grid;
|
||||
grid-template-columns: min-content min-content min-content auto min-content;
|
||||
grid-template-areas:
|
||||
"creator title title title status"
|
||||
". category activity activity .";
|
||||
gap: var(--space-3);
|
||||
border-radius: var(--d-border-radius);
|
||||
|
||||
&.--has-replies {
|
||||
grid-template-areas:
|
||||
"creator title title title status"
|
||||
". category likes-replies activity .";
|
||||
}
|
||||
|
||||
&:not(.--has-replies) {
|
||||
.topic-likes-replies-data {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include viewport.until(sm) {
|
||||
max-width: 100vw;
|
||||
box-sizing: border-box;
|
||||
grid-template-areas:
|
||||
"creator title title title status"
|
||||
". category activity activity . ";
|
||||
border: none;
|
||||
border-bottom: 1px solid var(--primary-200);
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
padding: var(--space-4) var(--space-3);
|
||||
|
||||
&.--has-replies {
|
||||
grid-template-areas:
|
||||
"creator title title title status"
|
||||
". category likes-replies activity . ";
|
||||
}
|
||||
}
|
||||
|
||||
&.bulk-selecting {
|
||||
grid-template-columns: min-content min-content min-content min-content auto min-content;
|
||||
grid-template-areas:
|
||||
"bulk-select creator title title title status"
|
||||
"bulk-select category category activity activity .";
|
||||
|
||||
&.--has-replies {
|
||||
grid-template-areas:
|
||||
"bulk-select creator title title title status"
|
||||
"bulk-select category category activity likes-replies .";
|
||||
|
||||
@include viewport.until(sm) {
|
||||
grid-template-areas:
|
||||
"bulk-select creator title title title status"
|
||||
"bulk-select . category likes-replies activity . ";
|
||||
}
|
||||
}
|
||||
|
||||
@include viewport.until(sm) {
|
||||
grid-template-columns: min-content min-content min-content min-content auto min-content;
|
||||
grid-template-areas:
|
||||
"bulk-select creator title title title status"
|
||||
"bulk-select . category activity activity . ";
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.discourse-no-touch & {
|
||||
box-shadow: 1px 1px 12px 2px var(--topic-card-shadow);
|
||||
background: var(--d-content-background);
|
||||
}
|
||||
}
|
||||
|
||||
&.selected {
|
||||
border: 1px solid var(--accent-color);
|
||||
box-shadow: 0 0 12px 1px var(--topic-card-shadow);
|
||||
}
|
||||
|
||||
&.excerpt-expanded {
|
||||
@include viewport.until(sm) {
|
||||
.topic-excerpt,
|
||||
.link-bottom-line {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include viewport.from(sm) {
|
||||
grid-template-areas:
|
||||
"creator title title title status"
|
||||
". category activity activity . "
|
||||
". excerpt excerpt excerpt excerpt";
|
||||
|
||||
&.has-replies {
|
||||
grid-template-areas:
|
||||
"creator title title title status"
|
||||
". category likes-replies activity ."
|
||||
". excerpt excerpt excerpt excerpt";
|
||||
}
|
||||
|
||||
.bulk-select-enabled & {
|
||||
grid-template-areas:
|
||||
"bulk-select creator title title title status"
|
||||
"bulk-select category category activity likes-replies likes-replies "
|
||||
" bulk-select excerpt excerpt excerpt excerpt excerpt";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.link-top-line {
|
||||
grid-area: title;
|
||||
font-weight: 500;
|
||||
line-height: calc(var(--space-3) * 2); // avatar sizing
|
||||
|
||||
@include viewport.until(sm) {
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.title {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// display contents
|
||||
td.main-link,
|
||||
td.posters,
|
||||
td.posts,
|
||||
td.views,
|
||||
td.activity,
|
||||
td.topic-category-status-data {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
td.num.posts a {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// display:nones
|
||||
td.main-link a.topic-status,
|
||||
.link-bottom-line,
|
||||
.badge-notification.new-topic::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.topic-category-data {
|
||||
grid-area: category;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.badge-category__wrapper {
|
||||
border-radius: var(--d-border-radius);
|
||||
|
||||
@include viewport.until(sm) {
|
||||
border-radius: var(--d-border-radius-small);
|
||||
max-width: 125px;
|
||||
}
|
||||
padding: 0.25em 0.5rem;
|
||||
background-color: var(--badge-category-bg);
|
||||
|
||||
@include viewport.until(md) {
|
||||
padding: 0.25em 0.5rem;
|
||||
}
|
||||
|
||||
.badge-category {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.badge-category__name {
|
||||
font-size: var(--font-down-1);
|
||||
color: var(--badge-category-text);
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.d-icon {
|
||||
width: var(--font-down-1);
|
||||
height: var(--font-down-1);
|
||||
}
|
||||
}
|
||||
|
||||
// OP avatar
|
||||
.topic-creator-data {
|
||||
grid-area: creator;
|
||||
|
||||
.avatar {
|
||||
height: calc(var(--space-3) * 2);
|
||||
width: calc(var(--space-3) * 2);
|
||||
border-radius: var(--d-border-radius);
|
||||
|
||||
@include viewport.until(sm) {
|
||||
border-radius: var(--d-border-radius-small);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dot-separator {
|
||||
width: 0.25em;
|
||||
height: 0.25em;
|
||||
background-color: var(--primary-500);
|
||||
border-radius: 100%;
|
||||
margin-inline: 0.25em;
|
||||
}
|
||||
|
||||
// topic activity, icon, text
|
||||
.topic-activity-data {
|
||||
@include ellipsis;
|
||||
grid-area: activity;
|
||||
}
|
||||
|
||||
.topic-activity {
|
||||
display: flex;
|
||||
font-size: var(--font-down-1);
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
gap: 0.25em;
|
||||
}
|
||||
|
||||
.topic-activity__type {
|
||||
border-radius: 0.25rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.topic-activity__username {
|
||||
@include ellipsis;
|
||||
margin-left: 0.25em;
|
||||
}
|
||||
|
||||
// timestamp
|
||||
td.activity .post-activity {
|
||||
grid-area: activity;
|
||||
font-size: var(--font-down-1);
|
||||
color: var(--primary-500);
|
||||
margin-left: auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// status
|
||||
.topic-status-data {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.--has-status-card .topic-status-data {
|
||||
display: block;
|
||||
grid-area: status;
|
||||
}
|
||||
|
||||
.topic-status-card {
|
||||
height: min-content;
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 0.25em;
|
||||
align-items: center;
|
||||
padding: 0.2em 0.5rem;
|
||||
font-size: var(--font-down-2);
|
||||
|
||||
@include viewport.from(lg) {
|
||||
font-size: var(--font-down-3);
|
||||
}
|
||||
font-weight: 600;
|
||||
border-radius: var(--d-border-radius);
|
||||
border: 1px solid var(--status-color);
|
||||
color: var(--status-color);
|
||||
|
||||
@include viewport.until(sm) {
|
||||
border-radius: var(--d-border-radius-small);
|
||||
padding: 0.35em;
|
||||
}
|
||||
|
||||
&.--pinned {
|
||||
--status-color: var(--primary-500);
|
||||
}
|
||||
|
||||
&.--hot {
|
||||
--status-color: var(--danger);
|
||||
}
|
||||
|
||||
@include viewport.from(lg) {
|
||||
position: absolute;
|
||||
right: 1rem;
|
||||
top: 0;
|
||||
transform: translateY(-45%);
|
||||
background-color: var(--d-content-background);
|
||||
}
|
||||
|
||||
svg {
|
||||
color: var(--status-color);
|
||||
|
||||
@include viewport.from(lg) {
|
||||
font-size: var(--font-down-1);
|
||||
}
|
||||
}
|
||||
|
||||
&__name {
|
||||
margin: 0;
|
||||
|
||||
@include viewport.until(sm) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.topic-list-data {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// metadata - excerpt
|
||||
.topic-excerpt {
|
||||
grid-area: excerpt;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: var(--font-down-2);
|
||||
width: 100%;
|
||||
|
||||
.excerpt__contents {
|
||||
color: var(--primary-high);
|
||||
}
|
||||
|
||||
.emoji {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
|
||||
// default category position hidden
|
||||
.badge-category__wrapper {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
td.main-link .discourse-tags {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// metadata - likes and replies
|
||||
td.posts .badge-posts {
|
||||
grid-area: replies;
|
||||
align-self: center;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
td.topic-likes-replies-data {
|
||||
grid-area: likes-replies;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: var(--space-3);
|
||||
height: min-content;
|
||||
align-self: center;
|
||||
|
||||
.topic-likes {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.topic-likes-replies-data .topic-replies {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 0.5em;
|
||||
align-items: center;
|
||||
color: var(--primary-500);
|
||||
font-size: var(--font-down-1-rem);
|
||||
|
||||
svg {
|
||||
color: var(--primary-600);
|
||||
}
|
||||
|
||||
.number {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.bulk-select {
|
||||
grid-area: bulk-select;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
align-self: center;
|
||||
justify-self: center;
|
||||
|
||||
@include viewport.until(sm) {
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
label {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&th {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Assigned List
|
||||
&.assigned-list-item {
|
||||
.topic-status-data {
|
||||
display: none;
|
||||
}
|
||||
grid-template-areas:
|
||||
"creator title title title dropdown"
|
||||
". category activity activity .";
|
||||
|
||||
&.--has-replies {
|
||||
grid-template-areas:
|
||||
"creator title title title dropdown"
|
||||
"category category likes-replies activity .";
|
||||
}
|
||||
|
||||
.assign-topic-buttons {
|
||||
display: contents;
|
||||
|
||||
.assign-actions-dropdown {
|
||||
grid-area: dropdown;
|
||||
justify-content: flex-end;
|
||||
height: 1em;
|
||||
|
||||
.select-kit-header {
|
||||
padding-top: 0;
|
||||
margin-left: auto;
|
||||
align-items: center;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.select-kit-header-wrapper {
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Bookmarks
|
||||
&.bookmark-list-item {
|
||||
grid-template-areas:
|
||||
"creator title title title dropdown"
|
||||
"category category activity . . ";
|
||||
|
||||
@include viewport.until(sm) {
|
||||
grid-template-areas:
|
||||
"title title title title dropdown"
|
||||
"category category activity activity . ";
|
||||
|
||||
.avatar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.has-metadata {
|
||||
grid-template-areas:
|
||||
"creator title title title dropdown"
|
||||
"category category activity metadata . ";
|
||||
|
||||
@include viewport.until(sm) {
|
||||
grid-template-areas:
|
||||
"metadata metadata metadata metadata dropdown"
|
||||
"title title title title ."
|
||||
"category category activity activity . ";
|
||||
}
|
||||
}
|
||||
|
||||
td.author-avatar {
|
||||
grid-area: creator;
|
||||
}
|
||||
|
||||
td.main-link .link-bottom-line {
|
||||
display: contents;
|
||||
|
||||
.badge-category__wrapper {
|
||||
grid-area: category;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: min-content;
|
||||
justify-self: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
td.main-link .link-top-line {
|
||||
display: contents;
|
||||
|
||||
.bookmark-metadata {
|
||||
grid-area: metadata;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-2);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.bookmark-metadata-item {
|
||||
margin: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.bookmark-status-with-link {
|
||||
grid-area: title;
|
||||
}
|
||||
}
|
||||
|
||||
.post-excerpt {
|
||||
grid-area: excerpt;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.topic-list-data:last-of-type {
|
||||
display: contents;
|
||||
|
||||
.bookmark-actions-dropdown {
|
||||
grid-area: dropdown;
|
||||
align-self: flex-start;
|
||||
height: 1em;
|
||||
|
||||
.select-kit-header {
|
||||
padding-top: 0;
|
||||
margin-left: auto;
|
||||
align-items: center;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.select-kit-header-wrapper {
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.post-metadata.topic-list-data.updated-at {
|
||||
grid-area: activity;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: var(--font-down-1-rem);
|
||||
}
|
||||
|
||||
td.activity .post-activity {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// for both types of context cards
|
||||
.topic-list.--d-topic-cards {
|
||||
.event-date {
|
||||
margin-left: var(--space-2);
|
||||
font-size: var(--font-down-3);
|
||||
white-space: nowrap;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.event-date-container {
|
||||
display: inline-flex;
|
||||
position: relative;
|
||||
top: -0.15rem;
|
||||
line-height: normal;
|
||||
}
|
||||
}
|
||||
|
||||
// bulk-select overrule for j/k nav
|
||||
.topic-list tr.selected td:first-of-type,
|
||||
.topic-list-item.selected td:first-of-type {
|
||||
box-shadow: none;
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
@use "lib/viewport";
|
||||
|
||||
.voting .voting-wrapper {
|
||||
--d-button-border-radius: var(--d-border-radius-small);
|
||||
--primary-100: var(--d-selected);
|
||||
--primary-low: var(--d-selected);
|
||||
|
||||
&__button {
|
||||
background: var(--secondary);
|
||||
}
|
||||
|
||||
.discourse-no-touch & {
|
||||
button {
|
||||
&:focus-visible,
|
||||
&:hover {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&:not(.btn-success) {
|
||||
.d-icon {
|
||||
color: var(--primary-high);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.voting.header-title-voting .voting-wrapper {
|
||||
--primary-high: var(--header_primary-high);
|
||||
|
||||
@include viewport.from(lg) {
|
||||
--secondary: var(--background-color);
|
||||
--content-border-color: var(--d-sidebar-border-color);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,135 @@
|
||||
@use "lib/viewport";
|
||||
|
||||
:root {
|
||||
--d-post-control-background--hover: var(--d-hover);
|
||||
}
|
||||
|
||||
.post-stream {
|
||||
.contents {
|
||||
font-size: var(--font-up-1);
|
||||
line-height: 1.25;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-container .topic-timeline {
|
||||
.timeline-scrollarea {
|
||||
border-left: 1px solid var(--accent-color);
|
||||
|
||||
.timeline-scroller {
|
||||
@include viewport.from(lg) {
|
||||
margin-left: -4.5px;
|
||||
height: 40px !important; // height is coming from element style have no other choice
|
||||
}
|
||||
|
||||
.timeline-replies,
|
||||
.timeline-ago {
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-handle {
|
||||
background-color: var(--accent-color);
|
||||
outline: 3px solid var(--d-content-background);
|
||||
|
||||
@include viewport.from(lg) {
|
||||
width: 8px;
|
||||
border-radius: 10px;
|
||||
height: calc(100% - 6px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// should probably get rid of this extra specificity class in core?
|
||||
.timeline-container.timeline-fullscreen {
|
||||
@include viewport.until(lg) {
|
||||
.topic-timeline
|
||||
.timeline-scrollarea
|
||||
.timeline-scroller
|
||||
.timeline-scroller-content {
|
||||
padding-right: 0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
body:not(.d-toc-installed) {
|
||||
.container.posts {
|
||||
grid-template-columns: auto 8em;
|
||||
|
||||
@media screen and (width <= 924px) {
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.topic-navigation-popup {
|
||||
min-width: 250px;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.container.posts {
|
||||
.post-notice {
|
||||
padding: var(--space-2);
|
||||
border-radius: var(--d-border-radius);
|
||||
font-size: var(--font-down-1-rem);
|
||||
|
||||
.d-icon {
|
||||
font-size: var(--font-up-1);
|
||||
width: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.topic-post-badges {
|
||||
.badge-notification {
|
||||
font-size: var(--font-down-1);
|
||||
padding: 0.15em 0.35em;
|
||||
border-radius: 1em;
|
||||
min-width: 1.3em;
|
||||
box-sizing: border-box;
|
||||
color: var(--secondary);
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-container .topic-timeline .timeline-scroller-content {
|
||||
overflow: unset;
|
||||
}
|
||||
|
||||
.more-topics__container
|
||||
.more-topics__list
|
||||
.topic-list-body
|
||||
.topic-list-item:last-of-type {
|
||||
border-bottom: 1px solid var(--primary-300);
|
||||
}
|
||||
|
||||
.discourse-post-event .discourse-post-event-widget {
|
||||
background: var(--d-content-background);
|
||||
}
|
||||
|
||||
.more-topics__container .nav {
|
||||
position: unset;
|
||||
margin-block: unset;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
nav.post-controls .actions button {
|
||||
font-size: var(--font-0);
|
||||
}
|
||||
|
||||
.archetype-private_message {
|
||||
--pm-border-radius: var(--d-border-radius);
|
||||
}
|
||||
|
||||
.header-title {
|
||||
.event-date {
|
||||
font-size: var(--font-down-3);
|
||||
border: 1px solid var(--tertiary-low);
|
||||
background: var(--tertiary-low);
|
||||
|
||||
&.past {
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
:root {
|
||||
--d-max-width: 1000px;
|
||||
--d-border-radius-large: 20px;
|
||||
--d-border-radius: 8px;
|
||||
--d-input-border-radius: 6px;
|
||||
}
|
||||
@@ -0,0 +1,132 @@
|
||||
@use "lib/viewport";
|
||||
|
||||
.welcome-banner {
|
||||
&.--location-below-site-header {
|
||||
border-radius: 0;
|
||||
|
||||
@include viewport.until(lg) {
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
}
|
||||
|
||||
&__wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-8);
|
||||
border-bottom: 1px solid var(--primary-300);
|
||||
margin-block: 0;
|
||||
padding-block: var(--space-4) var(--space-8);
|
||||
|
||||
.--with-bg-img & {
|
||||
padding-block: clamp(var(--space-4), 10vh, var(--space-11));
|
||||
}
|
||||
|
||||
@include viewport.from(xl) {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@include viewport.until(md) {
|
||||
flex-direction: column;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
@include viewport.until(sm) {
|
||||
display: block;
|
||||
padding: 0.5em;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.--location-below-site-header & {
|
||||
border-bottom: 0;
|
||||
padding: var(--space-8);
|
||||
margin: 0 var(--main-grid-gap) var(--space-2);
|
||||
|
||||
@include viewport.until(lg) {
|
||||
padding: var(--space-8) var(--space-4) var(--space-8);
|
||||
}
|
||||
}
|
||||
|
||||
.--location-above-topic-content & {
|
||||
@container (width <= 800px) {
|
||||
flex-direction: column;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
@include viewport.until(lg) {
|
||||
padding-inline: var(--space-4);
|
||||
}
|
||||
}
|
||||
|
||||
.search-menu {
|
||||
width: 100%;
|
||||
align-self: center;
|
||||
|
||||
.--location-above-topic-content & {
|
||||
@container (width >= 800px) {
|
||||
width: 50cqw;
|
||||
}
|
||||
}
|
||||
|
||||
@include viewport.from(xl) {
|
||||
margin-inline: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-menu .search-input,
|
||||
.search-menu-container .search-input {
|
||||
border: 1px solid var(--input-border-color);
|
||||
border-radius: var(--d-border-radius);
|
||||
}
|
||||
|
||||
.search-menu .search-input:focus-within,
|
||||
.search-menu-container .search-input:focus-within {
|
||||
border: 1px solid var(--search-color);
|
||||
outline: 2px solid var(--search-color);
|
||||
}
|
||||
|
||||
.panel-body {
|
||||
z-index: z("dropdown");
|
||||
}
|
||||
|
||||
.results {
|
||||
background: var(--d-content-background);
|
||||
}
|
||||
|
||||
&__title {
|
||||
text-align: left;
|
||||
margin: 0;
|
||||
color: var(--search-color);
|
||||
|
||||
.--location-above-topic-content & {
|
||||
@container (width >= 800px) {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
@container (width <= 800px) {
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
@include viewport.from(xl) {
|
||||
margin-inline: unset;
|
||||
}
|
||||
|
||||
@include viewport.from(md) {
|
||||
font-size: clamp(var(--font-up-4), 4vw, var(--font-up-6));
|
||||
}
|
||||
|
||||
@include viewport.until(md) {
|
||||
font-size: var(--font-up-4);
|
||||
}
|
||||
|
||||
@include viewport.until(sm) {
|
||||
font-size: var(--font-up-2);
|
||||
}
|
||||
}
|
||||
|
||||
&__subheader {
|
||||
white-space: wrap;
|
||||
}
|
||||
}
|
||||
+6
@@ -0,0 +1,6 @@
|
||||
import { apiInitializer } from "discourse/lib/api";
|
||||
import ComposerPeekModeToggle from "../components/composer-peek-mode-toggle";
|
||||
|
||||
export default apiInitializer((api) => {
|
||||
api.renderInOutlet("before-composer-toggles", ComposerPeekModeToggle);
|
||||
});
|
||||
@@ -0,0 +1,16 @@
|
||||
import { apiInitializer } from "discourse/lib/api";
|
||||
|
||||
export default apiInitializer((api) => {
|
||||
document.body.classList.add("full-width-enabled");
|
||||
|
||||
// When the sidebar is visible, force the HomeLogo to be in an 'un-minimized' state.
|
||||
api.registerValueTransformer?.(
|
||||
"home-logo-minimized",
|
||||
({ value, context }) => {
|
||||
if (value && context.showSidebar) {
|
||||
return false;
|
||||
}
|
||||
return value;
|
||||
}
|
||||
);
|
||||
});
|
||||
+10
@@ -0,0 +1,10 @@
|
||||
import { apiInitializer } from "discourse/lib/api";
|
||||
|
||||
export default apiInitializer((api) => {
|
||||
api.registerValueTransformer(
|
||||
"hamburger-dropdown-click-outside-exceptions",
|
||||
({ value }) => {
|
||||
return [...value, ".topic-drafts-menu-content"];
|
||||
}
|
||||
);
|
||||
});
|
||||
@@ -0,0 +1,8 @@
|
||||
import { apiInitializer } from "discourse/lib/api";
|
||||
import ExperimentalScreen from "../components/experimental-screen";
|
||||
import UserColorPaletteSelector from "../components/user-color-palette-selector";
|
||||
|
||||
export default apiInitializer((api) => {
|
||||
api.renderInOutlet("above-main-container", ExperimentalScreen);
|
||||
api.renderInOutlet("sidebar-footer-actions", UserColorPaletteSelector);
|
||||
});
|
||||
@@ -0,0 +1,7 @@
|
||||
import { apiInitializer } from "discourse/lib/api";
|
||||
|
||||
export default apiInitializer((api) => {
|
||||
api.registerValueTransformer("bulk-select-in-nav-controls", () => {
|
||||
return true;
|
||||
});
|
||||
});
|
||||
+6
@@ -0,0 +1,6 @@
|
||||
import { apiInitializer } from "discourse/lib/api";
|
||||
import SidebarNewTopicButton from "../components/sidebar-new-topic-button";
|
||||
|
||||
export default apiInitializer((api) => {
|
||||
api.renderInOutlet("before-sidebar-sections", SidebarNewTopicButton);
|
||||
});
|
||||
@@ -0,0 +1,330 @@
|
||||
import Component from "@glimmer/component";
|
||||
import { on } from "@ember/modifier";
|
||||
import { action } from "@ember/object";
|
||||
import { service } from "@ember/service";
|
||||
import { themePrefix } from "virtual:theme";
|
||||
import PluginOutlet from "discourse/components/plugin-outlet";
|
||||
import BulkSelectCheckbox from "discourse/components/topic-list/bulk-select-checkbox";
|
||||
import TopicExcerpt from "discourse/components/topic-list/topic-excerpt";
|
||||
import TopicLink from "discourse/components/topic-list/topic-link";
|
||||
import UnreadIndicator from "discourse/components/topic-list/unread-indicator";
|
||||
import TopicPostBadges from "discourse/components/topic-post-badges";
|
||||
import TopicStatus from "discourse/components/topic-status";
|
||||
import lazyHash from "discourse/helpers/lazy-hash";
|
||||
import topicFeaturedLink from "discourse/helpers/topic-featured-link";
|
||||
import { shortDateNoYear } from "discourse/lib/formatter";
|
||||
import dAvatar from "discourse/ui-kit/helpers/d-avatar";
|
||||
import { categoryLinkHTML } from "discourse/ui-kit/helpers/d-category-link";
|
||||
import dConcatClass from "discourse/ui-kit/helpers/d-concat-class";
|
||||
import dDiscourseTags from "discourse/ui-kit/helpers/d-discourse-tags";
|
||||
import dFormatDate from "discourse/ui-kit/helpers/d-format-date";
|
||||
import dIcon from "discourse/ui-kit/helpers/d-icon";
|
||||
import dNumber from "discourse/ui-kit/helpers/d-number";
|
||||
import { i18n } from "discourse-i18n";
|
||||
import { topicWasUpdatedAfterLastPost } from "../../lib/topic-activity";
|
||||
import { getTopicStatusBadge } from "../../lib/topic-status-badge";
|
||||
|
||||
export default class HighContextTopicCard extends Component {
|
||||
@service capabilities;
|
||||
|
||||
get hasSolved() {
|
||||
return (
|
||||
this.args.topic.has_accepted_answer || this.args.topic.accepted_answer
|
||||
);
|
||||
}
|
||||
|
||||
get hasVotes() {
|
||||
return this.args.topic.can_vote && this.args.topic.vote_count > 0;
|
||||
}
|
||||
|
||||
get voteCountLabel() {
|
||||
return i18n(themePrefix("vote_count"), {
|
||||
count: this.args.topic.vote_count,
|
||||
});
|
||||
}
|
||||
|
||||
get hasAssigned() {
|
||||
return this.args.topic.assigned_to_user || this.hasIndirectAssignments;
|
||||
}
|
||||
|
||||
get assignedUser() {
|
||||
return this.args.topic.assigned_to_user;
|
||||
}
|
||||
|
||||
get hasIndirectAssignments() {
|
||||
const indirect = this.args.topic.indirectly_assigned_to;
|
||||
return indirect && Object.keys(indirect).length > 0;
|
||||
}
|
||||
|
||||
get indirectAssignees() {
|
||||
const indirect = this.args.topic.indirectly_assigned_to;
|
||||
if (!indirect) {
|
||||
return [];
|
||||
}
|
||||
return Object.values(indirect).map((assignment) => ({
|
||||
user: assignment.assigned_to,
|
||||
postNumber: assignment.post_number,
|
||||
}));
|
||||
}
|
||||
|
||||
get hasTags() {
|
||||
return this.args.topic.tags?.length > 0;
|
||||
}
|
||||
|
||||
get hasReplies() {
|
||||
return this.args.topic.replyCount > 0;
|
||||
}
|
||||
|
||||
get hasLikes() {
|
||||
return this.args.topic.like_count > 0;
|
||||
}
|
||||
|
||||
get replyCountLabel() {
|
||||
return i18n(themePrefix("reply_count"), {
|
||||
count: this.args.topic.replyCount,
|
||||
});
|
||||
}
|
||||
|
||||
get likeCountLabel() {
|
||||
return i18n(themePrefix("like_count"), {
|
||||
count: this.args.topic.like_count,
|
||||
});
|
||||
}
|
||||
|
||||
get hasExcerpt() {
|
||||
return this.args.topic.excerpt || this.args.topic.hasExcerpt;
|
||||
}
|
||||
|
||||
get statusBadge() {
|
||||
return getTopicStatusBadge(this.args.topic);
|
||||
}
|
||||
|
||||
get topicCreator() {
|
||||
return this.args.topic.creator;
|
||||
}
|
||||
|
||||
get hasLastReplyContext() {
|
||||
return this.hasReplies && !topicWasUpdatedAfterLastPost(this.args.topic);
|
||||
}
|
||||
|
||||
get hasContext() {
|
||||
return this.hasLastReplyContext || this.hasAssigned;
|
||||
}
|
||||
|
||||
get lastPoster() {
|
||||
return {
|
||||
user: this.args.topic.lastPosterUser,
|
||||
username: this.args.topic.last_poster_username,
|
||||
};
|
||||
}
|
||||
|
||||
get topicTimestamp() {
|
||||
return shortDateNoYear(new Date(this.args.topic.created_at));
|
||||
}
|
||||
|
||||
@action
|
||||
onTitleFocus(event) {
|
||||
event.target.closest(".topic-list-item").classList.add("selected");
|
||||
}
|
||||
|
||||
@action
|
||||
onTitleBlur(event) {
|
||||
event.target.closest(".topic-list-item").classList.remove("selected");
|
||||
}
|
||||
|
||||
<template>
|
||||
{{#if @bulkSelectEnabled}}
|
||||
<BulkSelectCheckbox
|
||||
@topic={{@topic}}
|
||||
@isSelected={{@isSelected}}
|
||||
@onToggle={{@onBulkSelectToggle}}
|
||||
class="hc-topic-card__bulk-select"
|
||||
/>
|
||||
{{/if}}
|
||||
|
||||
<td class="hc-topic-card">
|
||||
<div class="hc-topic-card__header">
|
||||
<div class="hc-topic-card__op">
|
||||
<div class="hc-topic-card__avatar">
|
||||
{{dAvatar this.topicCreator imageSize="medium"}}
|
||||
</div>
|
||||
<div class="hc-topic-card__op-info">
|
||||
<span class="hc-topic-card__op-timestamp">
|
||||
{{i18n (themePrefix "posted")}}
|
||||
{{this.topicTimestamp}}
|
||||
</span>
|
||||
<span class="hc-topic-card__op-name">
|
||||
{{i18n
|
||||
(themePrefix "by_username")
|
||||
username=this.topicCreator.username
|
||||
}}</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="hc-topic-card__status-tags">
|
||||
{{#if this.hasSolved}}
|
||||
<span
|
||||
class="hc-topic-card__status --solved"
|
||||
aria-label={{i18n (themePrefix "solved")}}
|
||||
>
|
||||
{{#if this.capabilities.viewport.sm}}
|
||||
{{i18n (themePrefix "solved")}}
|
||||
{{/if}}
|
||||
{{dIcon "square-check"}}
|
||||
</span>
|
||||
{{/if}}
|
||||
|
||||
{{#if this.statusBadge}}
|
||||
<span
|
||||
class={{dConcatClass
|
||||
"hc-topic-card__status"
|
||||
this.statusBadge.className
|
||||
}}
|
||||
aria-label={{i18n this.statusBadge.text}}
|
||||
>
|
||||
{{dIcon this.statusBadge.icon}}
|
||||
|
||||
{{#if this.capabilities.viewport.sm}}
|
||||
<span class="hc-topic-card__status-text">{{i18n
|
||||
this.statusBadge.text
|
||||
}}</span>
|
||||
{{/if}}
|
||||
</span>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hc-topic-card__content">
|
||||
<div class="hc-topic-card__title" role="heading" aria-level="2">
|
||||
<TopicStatus @topic={{@topic}} @context="topic-list" />
|
||||
<TopicLink
|
||||
{{on "focus" this.onTitleFocus}}
|
||||
{{on "blur" this.onTitleBlur}}
|
||||
@topic={{@topic}}
|
||||
class="hc-topic-card__title raw-link raw-topic-link"
|
||||
/>
|
||||
{{~#if @topic.featured_link~}}
|
||||
{{topicFeaturedLink @topic}}
|
||||
{{~/if~}}
|
||||
<PluginOutlet
|
||||
@name="topic-list-after-title"
|
||||
@outletArgs={{lazyHash topic=@topic}}
|
||||
/>
|
||||
<UnreadIndicator @topic={{@topic}} />
|
||||
<TopicPostBadges
|
||||
@unreadPosts={{@topic.unread_posts}}
|
||||
@unseen={{@topic.unseen}}
|
||||
@url={{@topic.lastUnreadUrl}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{{#if this.hasExcerpt}}
|
||||
<TopicExcerpt @topic={{@topic}} class="hc-topic-card__excerpt" />
|
||||
{{/if}}
|
||||
</div>
|
||||
|
||||
{{#if this.hasContext}}
|
||||
<div class="hc-topic-card__context">
|
||||
{{#if this.hasLastReplyContext}}
|
||||
<div class="hc-topic-card__last-reply">
|
||||
{{dAvatar this.lastPoster.user imageSize="tiny"}}
|
||||
<span
|
||||
class="hc-topic-card__last-reply-name"
|
||||
>{{this.lastPoster.username}}</span>
|
||||
<span>{{i18n (themePrefix "replied")}}</span>
|
||||
<span class="hc-topic-card__time">
|
||||
{{dFormatDate @topic.last_posted_at leaveAgo="true"}}
|
||||
</span>
|
||||
</div>
|
||||
{{/if}}
|
||||
{{#if this.hasAssigned}}
|
||||
{{#if this.assignedUser}}
|
||||
<div class="hc-topic-card__assigned">
|
||||
{{dIcon "user-plus"}}
|
||||
<span class="sr-only">{{i18n
|
||||
"discourse_assign.assigned_to"
|
||||
}}</span>
|
||||
<span
|
||||
class="hc-topic-card__assigned-name"
|
||||
>{{this.assignedUser.username}}</span>
|
||||
</div>
|
||||
{{/if}}
|
||||
{{#each this.indirectAssignees as |assignment|}}
|
||||
<div class="hc-topic-card__assigned">
|
||||
{{dIcon "user-plus"}}
|
||||
<span class="sr-only">{{i18n
|
||||
"discourse_assign.assigned_to"
|
||||
}}</span>
|
||||
<span
|
||||
class="hc-topic-card__assigned-name"
|
||||
>{{assignment.user.username}}</span>
|
||||
<span
|
||||
class="hc-topic-card__assigned-post"
|
||||
>#{{assignment.postNumber}}</span>
|
||||
</div>
|
||||
{{/each}}
|
||||
{{/if}}
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
<div class="hc-topic-card__footer">
|
||||
<div class="hc-topic-card__category-tags">
|
||||
{{#unless @hideCategory}}
|
||||
<div class="hc-topic-card__category">
|
||||
{{categoryLinkHTML @topic.category}}
|
||||
</div>
|
||||
{{/unless}}
|
||||
|
||||
{{#if this.hasTags}}
|
||||
{{dDiscourseTags
|
||||
@topic
|
||||
mode="list"
|
||||
className="hc-topic-card__tags"
|
||||
}}
|
||||
{{/if}}
|
||||
</div>
|
||||
|
||||
<div class="hc-topic-card__stats">
|
||||
{{#if this.hasVotes}}
|
||||
<span
|
||||
class="hc-topic-card__votes"
|
||||
aria-label={{this.voteCountLabel}}
|
||||
title={{this.voteCountLabel}}
|
||||
>
|
||||
{{dIcon "check-to-slot" skipTitle=true}}
|
||||
<span class="hc-topic-card__votes-count">{{dNumber
|
||||
@topic.vote_count
|
||||
}}</span>
|
||||
</span>
|
||||
{{/if}}
|
||||
|
||||
{{#if this.hasReplies}}
|
||||
<span
|
||||
class="hc-topic-card__replies"
|
||||
aria-label={{this.replyCountLabel}}
|
||||
title={{this.replyCountLabel}}
|
||||
>
|
||||
{{dIcon "reply" skipTitle=true}}
|
||||
<span class="hc-topic-card__count">{{dNumber
|
||||
@topic.replyCount
|
||||
}}</span>
|
||||
</span>
|
||||
{{/if}}
|
||||
|
||||
{{#if this.hasLikes}}
|
||||
<span
|
||||
class="hc-topic-card__likes"
|
||||
aria-label={{this.likeCountLabel}}
|
||||
title={{this.likeCountLabel}}
|
||||
>
|
||||
{{dIcon "heart" skipTitle=true}}
|
||||
<span class="hc-topic-card__count">{{dNumber
|
||||
@topic.like_count
|
||||
}}</span>
|
||||
</span>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</template>
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
import Component from "@glimmer/component";
|
||||
import dConcatClass from "discourse/ui-kit/helpers/d-concat-class";
|
||||
import dFormatDate from "discourse/ui-kit/helpers/d-format-date";
|
||||
import { topicWasUpdatedAfterLastPost } from "../../lib/topic-activity";
|
||||
|
||||
export default class TopicActivityColumn extends Component {
|
||||
get topicUser() {
|
||||
if (topicWasUpdatedAfterLastPost(this.args.topic)) {
|
||||
return {
|
||||
username: undefined,
|
||||
class: "--updated",
|
||||
};
|
||||
}
|
||||
|
||||
if (this.args.topic.posts_count > 1) {
|
||||
return {
|
||||
username: this.args.topic.last_poster_username,
|
||||
class: "--replied",
|
||||
};
|
||||
} else if (this.args.topic.posts_count === 1) {
|
||||
return {
|
||||
username: this.args.topic.last_poster_username,
|
||||
class: "--created",
|
||||
};
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
<template>
|
||||
<span class={{dConcatClass "topic-activity" this.topicUser.class}}>
|
||||
{{#if this.topicUser.username}}
|
||||
<span
|
||||
class="topic-activity__username"
|
||||
>{{this.topicUser.username}}</span>
|
||||
<span class="dot-separator"></span>
|
||||
{{/if}}
|
||||
<div class="topic-activity__time">
|
||||
{{dFormatDate @topic.bumpedAt leaveAgo="true" format="tiny"}}
|
||||
</div>
|
||||
</span>
|
||||
</template>
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
import { categoryLinkHTML } from "discourse/ui-kit/helpers/d-category-link";
|
||||
|
||||
const TopicCategoryColumn = <template>
|
||||
{{categoryLinkHTML @topic.category}}
|
||||
</template>;
|
||||
|
||||
export default TopicCategoryColumn;
|
||||
@@ -0,0 +1,17 @@
|
||||
import Component from "@glimmer/component";
|
||||
import dAvatar from "discourse/ui-kit/helpers/d-avatar";
|
||||
|
||||
export default class TopicCreatorColumn extends Component {
|
||||
get topicCreator() {
|
||||
return {
|
||||
user: this.args.topic.creator,
|
||||
class: "--topic-creator",
|
||||
};
|
||||
}
|
||||
|
||||
<template>
|
||||
<div class={{this.topicCreator.class}}>
|
||||
{{dAvatar this.topicCreator.user imageSize="small"}}
|
||||
</div>
|
||||
</template>
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
import { themePrefix } from "virtual:theme";
|
||||
import dIcon from "discourse/ui-kit/helpers/d-icon";
|
||||
import { i18n } from "discourse-i18n";
|
||||
|
||||
const TopicLikesColumn = <template>
|
||||
{{#if @topic.like_count}}
|
||||
<span
|
||||
class="topic-likes"
|
||||
aria-label={{i18n (themePrefix "like_count") count=@topic.like_count}}
|
||||
>{{dIcon "heart"}}{{@topic.like_count}}</span>
|
||||
{{/if}}
|
||||
</template>;
|
||||
|
||||
export default TopicLikesColumn;
|
||||
@@ -0,0 +1,15 @@
|
||||
import { themePrefix } from "virtual:theme";
|
||||
import dIcon from "discourse/ui-kit/helpers/d-icon";
|
||||
import dNumber from "discourse/ui-kit/helpers/d-number";
|
||||
import { i18n } from "discourse-i18n";
|
||||
|
||||
const TopicRepliesColumn = <template>
|
||||
{{#if @topic.replyCount}}
|
||||
<span
|
||||
class="topic-replies"
|
||||
aria-label={{i18n (themePrefix "reply_count") count=@topic.replyCount}}
|
||||
>{{dIcon "reply"}}{{dNumber @topic.replyCount}}</span>
|
||||
{{/if}}
|
||||
</template>;
|
||||
|
||||
export default TopicRepliesColumn;
|
||||
@@ -0,0 +1,18 @@
|
||||
import Component from "@glimmer/component";
|
||||
import dIcon from "discourse/ui-kit/helpers/d-icon";
|
||||
import { i18n } from "discourse-i18n";
|
||||
import { getTopicStatusBadge } from "../../lib/topic-status-badge";
|
||||
|
||||
export default class TopicStatusColumn extends Component {
|
||||
get badge() {
|
||||
return getTopicStatusBadge(this.args.topic);
|
||||
}
|
||||
|
||||
<template>
|
||||
{{#if this.badge}}
|
||||
<span class="topic-status-card {{this.badge.className}}">{{dIcon
|
||||
this.badge.icon
|
||||
}}<p class="topic-status-card__name">{{i18n this.badge.text}}</p></span>
|
||||
{{/if}}
|
||||
</template>
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user