Merge remote-tracking branch 'origin/main'

- 在self.scss中添加#main-outlet-wrapper的z-index: 0样式
- 保持其他样式定义不变

README.md

@@ -1,3 +1,151 @@
-Horizon is a simple, beautiful theme that improves the out-of-the-box experience for Discourse sites.
+# discourse_theme_ran（Horizon 主题源码）
 
-https://meta.discourse.org/t/horizon-theme/360486
+> 该仓库是 Discourse `Horizon (beta)` 主题的源码副本。仓库内原 README 已标注该主题已并入 Discourse Core。
+
+## 1. 项目作用
+
+这是一个 Discourse 主题项目，核心目标是：
+- 改造论坛整体视觉（卡片化主题列表、圆角、配色系统、侧边栏样式）
+- 增强交互（侧边栏新建主题按钮、颜色方案切换、Composer Peek 模式）
+- 调整不同页面体验（分类页、主题页、聊天页、登录页、移动端）
+- 提供系统测试，验证主题关键行为
+
+---
+
+## 2. 目录结构与作用
+
+### `.github/`
+- `workflows/discourse-theme.yml`：CI 配置，复用 Discourse 官方主题工作流。
+
+### `assets/`
+- `.gitkeep`：占位目录，预留静态资源（当前无实际资源文件）。
+
+### `common/`
+- `common.scss`：公共样式入口，按模块聚合 `scss/` 下样式。
+- `color_definitions.scss`：主题色变量定义（基于 tertiary 推导背景、链接、侧边栏等）。
+- `head_tag.html`：注入浏览器兼容检测脚本，不支持 `hsl(from ...)` 时提示升级浏览器。
+
+### `desktop/`
+- `desktop.scss`：桌面端样式入口。
+- `desktop-full-width.scss`：全宽布局与头部网格布局规则。
+- `desktop-horizon-fixes.scss`：桌面端修复（如 bulk select 样式/布局修正）。
+
+### `javascripts/`
+- `.gitkeep`：占位。
+- `discourse/api-initializers/`：通过 Discourse API 注入主题行为。
+  - `horizon.gjs`：主题主初始化器；注册实验装饰层、配色选择器、站点设置覆盖、管理员弃用提示。
+  - `sidebar-new-topic-button-connector.js`：把自定义“新建主题”按钮渲染到侧边栏。
+  - `composer-peek-toggle-connector.js`：把 Peek 模式切换按钮挂到 composer 工具区。
+  - `full-width-logo-behavior.js`：侧边栏展开时控制 Logo 最小化行为。
+  - `reposition-bulk-select.js`：将批量选择入口放到导航控制区。
+  - `hamburger-click-outside-transformer.js`：扩展汉堡菜单“点击外部关闭”例外元素。
+- `discourse/components/`：Glimmer 组件。
+  - `experimental-screen.gjs`：主内容四角/底部装饰层组件（根据容器位置实时计算）。
+  - `sidebar-new-topic-button.gjs`：侧边栏新建主题按钮逻辑（权限、分类只读、草稿、关闭汉堡菜单）。
+  - `composer-peek-mode-toggle.gjs`：Composer Peek 模式开关，偏好写入 `keyValueStore`。
+  - `user-color-palette-selector.gjs`：用户配色切换主组件（支持匿名/登录、明暗配套、CSS 热替换）。
+  - `user-color-palette-menu-item.gjs`：配色菜单项。
+- `discourse/components/card/`：主题列表卡片列组件。
+  - `topic-status-column.gjs`：Pinned/Hot 状态徽章。
+  - `topic-category-column.gjs`：分类列。
+  - `topic-creator-column.gjs`：主题创建者头像列。
+  - `topic-replies-column.gjs`：回复数列。
+  - `topic-likes-column.gjs`：点赞数列（当前主题列表布局中未启用展示）。
+  - `topic-activity-column.gjs`：最近活动信息（回复/创建/更新与时间）。
+- `discourse/initializers/topic-list-columns.gjs`：重排主题列表列、注入卡片列、改写点击行为与移动布局策略。
+
+### `locales/`
+- `en.yml`：主题文案与元数据（如 `topic_hot`、`topic_pinned`、描述文本）。
+
+### `scss/`
+按功能拆分的样式模块（由 `common/common.scss` 与 `desktop/desktop.scss` 聚合）：
+- `variables.scss`：全局尺寸/圆角/间距变量。
+- `main.scss`：页面主体容器网格与背景结构。
+- `topic-cards.scss`：主题列表卡片化布局核心样式。
+- `topic.scss`：主题阅读页、时间线、帖子流样式。
+- `categories-view.scss`：分类页与分类+最新混合页样式。
+- `sidebar.scss`：侧边栏容器/section/链接样式。
+- `sidebar-new-topic-button.scss`：侧边栏新建主题按钮视觉与状态。
+- `header.scss`：顶部栏、通知菜单、图标交互样式。
+- `nav-pills.scss`：列表导航区（sticky、tab/下拉）样式。
+- `buttons.scss`：按钮体系（默认/主按钮 hover、focus、active）。
+- `composer.scss`：编辑器外观与工具条、翻译 composer 相关样式。
+- `composer-peek-mode.scss`：Peek 模式下 composer 与主布局联动。
+- `chat.scss`：聊天页/聊天抽屉适配。
+- `welcome-banner.scss`：欢迎横幅和搜索区域样式。
+- `mobile-stuff.scss`：移动端/小屏布局调整。
+- `login.scss`：登录类页面布局样式。
+- `misc.scss`：分散组件兼容/补丁样式。
+- `hiddenstuff.scss`：隐藏部分原生 UI 元素。
+- `color-choice.scss`：配色切换菜单样式。
+- `color-exploration.scss`：侧边栏等颜色变量实验定义。
+- `box-view.scss`：实验装饰层（四角遮罩）与聊天相关视觉细节。
+- `desktop-full-width.scss`、`desktop-horizon-fixes.scss`：虽然在 `scss/` 目录下存在同名文件，实际桌面入口使用 `desktop/` 目录版本。
+
+### `screenshots/`
+- `light.png`、`dark.png`：主题明/暗模式截图，供主题元信息展示。
+
+### `spec/`
+系统测试（RSpec + Capybara）：
+- `system/core_features_spec.rb`：主题与核心能力兼容性基础测试。
+- `system/horizon_high_level_spec.rb`：高层端到端流程（主题列表、导航、配色切换）。
+- `system/sidebar_topic_button_spec.rb`：侧边栏新建主题按钮行为测试。
+- `system/composer_peek_spec.rb`：Peek 模式可见性与持久化测试。
+- `system/user_color_palette_selector_spec.rb`：配色切换在匿名/登录/深色模式下的行为测试。
+- `system/page_objects/components/user_color_palette_selector.rb`：配色选择器的 PageObject 封装。
+- `.gitkeep`：占位。
+
+### `test/`
+- `acceptance/.gitkeep`：预留前端测试目录（当前无具体测试文件）。
+
+---
+
+## 3. 根目录文件作用
+
+- `about.json`：主题元数据（名称、作者、链接、版本、颜色方案、截图、modifiers）。
+- `settings.yml`：主题设置项（欢迎横幅开关、搜索体验模式）。
+- `README.md`：项目说明文档（本文件）。
+- `LICENSE`：MIT 许可证。
+- `package.json`：前端开发依赖与 Node/pnpm 版本约束。
+- `pnpm-lock.yaml`：前端依赖锁定文件。
+- `Gemfile` / `Gemfile.lock`：Ruby 工具链依赖（rubocop-discourse、syntax_tree 等）。
+- `.discourse-compatibility`：与 Discourse 版本兼容映射。
+- `eslint.config.mjs`：ESLint 配置（继承 `@discourse/lint-configs`）。
+- `stylelint.config.mjs`：Stylelint 配置。
+- `.template-lintrc.cjs`：Ember Template Lint 配置。
+- `.prettierrc.cjs`：Prettier 配置。
+- `.rubocop.yml`：Rubocop 配置（Discourse 规则）。
+- `.streerc`：Syntax Tree 格式化配置。
+- `.npmrc`：npm 行为约束（严格引擎、禁自动 peer 安装）。
+- `.gitignore`：Git 忽略规则。
+
+---
+
+## 4. 关键功能对应关系（便于快速定位）
+
+- 主题配色切换：
+  - 逻辑：`javascripts/discourse/components/user-color-palette-selector.gjs`
+  - 菜单样式：`scss/color-choice.scss`
+  - 颜色定义：`about.json` + `common/color_definitions.scss`
+
+- 侧边栏新建主题按钮：
+  - 逻辑：`javascripts/discourse/components/sidebar-new-topic-button.gjs`
+  - 挂载：`javascripts/discourse/api-initializers/sidebar-new-topic-button-connector.js`
+  - 样式：`scss/sidebar-new-topic-button.scss`
+
+- 主题列表卡片化：
+  - 列注册：`javascripts/discourse/initializers/topic-list-columns.gjs`
+  - 各列组件：`javascripts/discourse/components/card/*.gjs`
+  - 主样式：`scss/topic-cards.scss`
+
+- Composer Peek 模式：
+  - 逻辑：`javascripts/discourse/components/composer-peek-mode-toggle.gjs`
+  - 挂载：`javascripts/discourse/api-initializers/composer-peek-toggle-connector.js`
+  - 样式：`scss/composer-peek-mode.scss`
+
+---
+
+## 5. 说明
+
+- 此仓库 README 原文已声明：该主题已并入 Discourse Core，生产环境优先使用 Core 内置 Horizon 主题。
+- 当前仓库更适合作为学习/二次开发参考，用于理解 Discourse 主题的样式组织方式与前端扩展点。

about.json

@@ -1,9 +1,9 @@
 {
-  "name": "Horizon",
-  "authors": "Design Team",
-  "about_url": "https://meta.discourse.org/t/horizon-theme/360486",
-  "license_url": "https://github.com/discourse/horizon/blob/main/LICENSE",
-  "learn_more": "https://meta.discourse.org/t/installing-a-theme-or-theme-component/63682",
+  "name": "Horizon-shiran",
+  "authors": "shiran",
+  "about_url": "",
+  "license_url": "https://gitea.s1f.ren/shiran/discourse_theme_ran/horizon/blob/main/LICENSE",
+  "learn_more": "",
   "theme_version": "0.0.1",
   "modifiers": {
     "svg_icons": ["fire"],

common/common.scss

@@ -18,3 +18,4 @@
 @import "topic";
 @import "topic-cards";
 @import "variables";
+@import "self";

locales/en.yml

@@ -1,6 +1,6 @@
 en:
   theme_metadata:
-    description: "A simple, beautiful theme that improves the out of the box experience for Discourse sites."
+    description: "(DEPRECATED: Use the Horizon theme that is now preinstalled on your Discourse site). A simple, beautiful theme that improves the out of the box experience for Discourse sites."
   topic_pinned: "Pinned"
   topic_hot: "Hot"
   user_replied: "replied"

scss/categories-view.scss

@@ -4,7 +4,8 @@
   .category-list {
     border-collapse: separate;
 
-    th.topics {
+    th.topics,
+    .category-logo {
       display: none;
     }
 
@@ -224,7 +225,8 @@
     margin-inline: 1rem;
 
     .num.posts,
-    .category-topics-count {
+    .category-topics-count,
+    .category-logo {
       display: none;
     }
 
@@ -261,6 +263,10 @@
 }
 
 .category-boxes.with-subcategories {
+  .category-logo {
+    display: none;
+  }
+
   @include viewport.from(sm) {
     margin-top: 0;
   }

scss/desktop-horizon-fixes.scss

@@ -3,6 +3,7 @@
   .topic-list-header {
     position: relative;
     top: 0;
+    z-index: 2;
   }
 
   .topic-author-avatar-data {
@@ -28,18 +29,29 @@
 }
 
 .topic-list-header {
+  position: relative;
+  margin-bottom: 0.35rem;
+
   tr {
     border: none;
   }
 
   .topic-list-data {
-    padding: 0;
+    padding: 0.25rem 0;
+    color: var(--primary-600);
+    font-size: var(--font-down-2);
+    font-weight: 600;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    background: transparent;
 
     &:not(.default) {
       display: none;
     }
 
     &.default {
+      border-radius: var(--d-border-radius);
+
       .bulk-select,
       span:not(.bulk-select-topics, .d-button-label) {
         display: none;
@@ -50,16 +62,22 @@
   // bulk select
   .bulk-select-topics {
     position: absolute;
-    right: 0;
-    background: var(--secondary);
-    border-radius: 0 0 0 var(--d-border-radius);
+    right: 0.25rem;
+    top: 50%;
+    transform: translateY(-50%);
+    background: color-mix(in srgb, var(--d-content-background) 88%, white 12%);
+    border: 1px solid var(--primary-200);
+    border-radius: 999px;
+    box-shadow: 0 6px 18px -12px rgb(10 18 35 / 35%);
     display: flex;
     gap: 0.5rem;
-    margin: 0.5rem;
+    margin: 0;
+    padding: 0.25rem;
 
     button {
       white-space: nowrap;
       margin: 0;
+      border-radius: 999px;
     }
   }
 }

scss/main.scss

@@ -2,6 +2,8 @@
 
 :root {
   --main-grid-gap: 0.5em;
+  --dream-glow-a: rgb(var(--tertiary-rgb) / 0.24);
+  --dream-glow-b: rgb(var(--tertiary-rgb) / 0.18);
 }
 
 html:not(:has(.has-full-page-chat)) {
@@ -14,12 +16,72 @@ html:not(:has(.has-full-page-chat)) {
 
 body {
   -webkit-font-smoothing: antialiased;
+  position: relative;
 
   @include viewport.until(sm) {
     background-color: var(--d-content-background);
   }
 }
 
+body:not(.has-full-page-chat, .wizard)::before,
+body:not(.has-full-page-chat, .wizard)::after {
+  content: "";
+  position: fixed;
+  width: min(42vw, 32rem);
+  aspect-ratio: 1 / 1;
+  border-radius: 999px;
+  filter: blur(56px);
+  pointer-events: none;
+  z-index: 0;
+}
+
+body:not(.has-full-page-chat, .wizard)::before {
+  top: 5rem;
+  left: -8rem;
+  background: radial-gradient(circle at 30% 30%, var(--dream-glow-a), transparent 62%);
+  animation: dreamy-float-a 18s ease-in-out infinite alternate;
+}
+
+body:not(.has-full-page-chat, .wizard)::after {
+  right: -6rem;
+  bottom: 2rem;
+  background: radial-gradient(circle at 65% 35%, var(--dream-glow-b), transparent 58%);
+  animation: dreamy-float-b 22s ease-in-out infinite alternate;
+}
+
+.d-header-wrap,
+#main-outlet-wrapper,
+.sidebar-wrapper,
+.sidebar-hamburger-dropdown {
+  position: relative;
+  z-index: 1;
+}
+
+@keyframes dreamy-float-a {
+  from {
+    transform: translate3d(0, 0, 0) scale(1);
+  }
+  to {
+    transform: translate3d(3rem, -1.5rem, 0) scale(1.08);
+  }
+}
+
+@keyframes dreamy-float-b {
+  from {
+    transform: translate3d(0, 0, 0) scale(1);
+  }
+  to {
+    transform: translate3d(-2.5rem, 2rem, 0) scale(1.1);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  body:not(.has-full-page-chat, .wizard)::before,
+  body:not(.has-full-page-chat, .wizard)::after {
+    animation: none;
+  }
+}
+
 #main-outlet-wrapper {
   gap: var(--main-grid-gap);
 }
@@ -98,13 +160,6 @@ body:not(.has-full-page-chat, .wizard) {
   }
 }
 
-body.users-page {
-  // very specific to overcome the above rules
-  #main #main-outlet-wrapper #main-outlet > section {
-    max-width: unset;
-  }
-}
-
 @include viewport.until(sm) {
   .welcome-banner {
     display: none;

scss/self.scss

@@ -0,0 +1,70 @@
+@use "lib/viewport";
+
+#main-outlet {
+  @if $home_bg_image != "" {
+    background-image: url($home_bg_image);
+    background-size: cover;
+    background-position: center;
+    background-attachment: fixed;
+  }
+}
+
+.container.list-container{
+  position: relative;
+  isolation: isolate;
+}
+
+.container.list-container::before{
+  position: absolute;
+  content: "";
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  background:
+    linear-gradient(
+      180deg,
+      rgb(var(--secondary-rgb) / 0.46) 0%,
+      rgb(var(--secondary-rgb) / 0.34) 100%
+    );
+  border-radius: var(--d-border-radius);
+  backdrop-filter: blur(8px);
+  box-shadow: rgb(0 0 0 / 28%) 0 10px 26px -16px;
+  pointer-events: none;
+  z-index: 0;
+}
+
+.container.list-container > * {
+  position: relative;
+  z-index: 1;
+}
+
+.topic-list-header{
+  background-color: transparent;
+}
+.list-controls, .search-container{
+  border-radius: var(--d-border-radius);
+}
+
+.welcome-banner {
+  padding: 0 !important;
+  box-shadow: #00000094 0 0 11px 0;
+}
+
+#list-area{
+  background-color: transparent;
+}
+
+#main-outlet-wrapper{
+  z-index: 0;
+}
+
+.regular.ember-view{
+  background-color: rgb(var(--secondary-rgb) / 0.58);
+  border-radius: var(--d-border-radius);
+  backdrop-filter: blur(10px);
+  box-shadow: rgb(0 0 0 / 24%) 0 10px 24px -14px;
+  padding: 24px;
+}

scss/topic-cards.scss

@@ -4,16 +4,23 @@
   --d-border-radius-small: calc(var(--d-border-radius) * 0.5);
 }
 
+@keyframes dreamy-card-shimmer {
+  from {
+    transform: translateX(-18%);
+    opacity: 0.35;
+  }
+  to {
+    transform: translateX(18%);
+    opacity: 0.65;
+  }
+}
+
 .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);
-  }
+  border-bottom: none;
 }
 
 .topic-list,
@@ -72,11 +79,18 @@
 
 .topic-list-body .topic-list-item {
   position: relative;
-  background: var(--d-content-background);
-  box-shadow: 0 0 12px 1px var(--topic-card-shadow);
+  background:
+    linear-gradient(
+      135deg,
+      rgb(var(--secondary-rgb) / 0.96) 0%,
+      rgb(var(--tertiary-rgb) / 0.08) 100%
+    );
+  box-shadow:
+    0 10px 30px -18px rgb(10 18 35 / 38%),
+    0 6px 16px -10px var(--topic-card-shadow);
   text-overflow: ellipsis;
   padding: var(--space-3);
-  border: 1px solid var(--primary-300);
+  border: none;
   display: grid;
   grid-template-columns: min-content min-content min-content auto min-content;
   grid-template-areas:
@@ -85,6 +99,51 @@
   grid-gap: var(--space-3);
   border-radius: var(--d-border-radius);
   cursor: pointer;
+  overflow: hidden;
+  transition:
+    box-shadow 0.25s ease,
+    transform 0.25s ease,
+    background-color 0.25s ease;
+
+  &::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    padding: 1px;
+    background:
+      radial-gradient(
+        120% 100% at 0% 0%,
+        rgb(var(--tertiary-rgb) / 0.38),
+        transparent 56%
+      ),
+      radial-gradient(
+        120% 90% at 100% 100%,
+        rgb(var(--tertiary-rgb) / 0.22),
+        transparent 58%
+      );
+    -webkit-mask:
+      linear-gradient(#000 0 0) content-box,
+      linear-gradient(#000 0 0);
+    -webkit-mask-composite: xor;
+    mask-composite: exclude;
+    pointer-events: none;
+  }
+
+  &::after {
+    content: "";
+    position: absolute;
+    inset: -35% -20%;
+    background: linear-gradient(
+      112deg,
+      transparent 30%,
+      rgb(var(--tertiary-rgb) / 0.16) 48%,
+      transparent 66%
+    );
+    pointer-events: none;
+    mix-blend-mode: screen;
+    animation: dreamy-card-shimmer 9s ease-in-out infinite alternate;
+  }
 
   &.has-replies {
     grid-template-areas:
@@ -145,15 +204,24 @@
 
   &:hover {
     .discourse-no-touch & {
-      border-color: var(--accent-color);
-      background: var(--d-content-background);
+      background:
+        linear-gradient(
+          135deg,
+          rgb(var(--secondary-rgb) / 0.99) 0%,
+          rgb(var(--tertiary-rgb) / 0.14) 100%
+        );
+      box-shadow:
+        0 16px 34px -18px rgb(10 18 35 / 45%),
+        0 8px 20px -10px var(--topic-card-shadow);
+      transform: translateY(-2px);
     }
   }
 
   &.selected {
     box-shadow:
-      0 0 0 2px var(--accent-color),
-      0 0 12px 1px var(--topic-card-shadow);
+      0 14px 32px -14px rgb(10 18 35 / 48%),
+      0 0 0 2px rgb(var(--tertiary-rgb) / 0.28),
+      0 0 0 8px rgb(var(--tertiary-rgb) / 0.14);
   }
 
   &.excerpt-expanded {

settings.yml

@@ -9,3 +9,9 @@ search_experience:
     - search_field
     - search_icon
   description: "Overrides the core `search experience` site setting"
+
+home_bg_image:
+  type: upload
+  default: ""
+  description: "首页背景图"
+