求这个是如何用代码实现的

开源 Discourse
1

image
image562×909 133 KB

$primary: #1c1c1c !default; $secondary: #f8f8f8 !default; $tertiary: #cc0000 !default; $quaternary: #bf405e !default; $header_background: #f2f0f2 !default; $header_primary: #122b43 !default; $highlight: #ffa9a9 !default; $danger: #d05454 !default; $success: #71bd9f !default; $love: #fd00c7 !default; $hover: #f1f1f1 !default; $selected: #e8e8e8 !default;  $public_image_path: "https://efour.b-cdn.net/images";  @import "common/foundation/variables"; @import "common/foundation/mixins"; $charmander: unquote("https://efour.b-cdn.net/uploads/default/original/3X/f/3/f317ca4d9b344cab3e1dbb4e5e43ee3dc0cb7805.jpeg");$squirtle: unquote("https://efour.b-cdn.net/uploads/default/original/3X/5/b/5b7762da58a7ecebe1c8dac5ae40fe784ff783d4.jpeg");$butterfree: unquote("https://efour.b-cdn.net/uploads/default/original/3X/0/3/0381cd0f067969d3e6eedf298b7c7f5889f6cbab.jpeg");$weedle: unquote("https://efour.b-cdn.net/uploads/default/original/3X/8/8/884aae228ac1374d373f1d3961b8595c6e81475a.jpeg");$raticate: unquote("https://efour.b-cdn.net/uploads/default/original/3X/e/6/e696707dae1f56cee0ed160ae833013c368072d8.jpeg");$fearow: unquote("https://efour.b-cdn.net/uploads/default/original/3X/a/c/acea5ad5b5e58c00a3a233b2f0436053c0b34c04.jpeg");$ekans: unquote("https://efour.b-cdn.net/uploads/default/original/3X/9/f/9fa6644f7a9b50ffd9b27b915658fc626ad9dc64.jpeg");$raichu: unquote("https://efour.b-cdn.net/uploads/default/original/3X/c/2/c2f9c20a62e217d324ed707dff546677aaed7d5d.jpeg");$nidoran-f: unquote("https://efour.b-cdn.net/uploads/default/original/3X/a/4/a4de7da46364ac5e5470041526aabeca5d756d90.jpeg");$nidoqueen: unquote("https://efour.b-cdn.net/uploads/default/original/3X/8/e/8effe9de4c39600af8a590379d2deba83b1534aa.jpeg");$nidoran-m: unquote("https://efour.b-cdn.net/uploads/default/original/3X/9/4/94a7b1331798ce695a2ca23cf18e4442783c1f4d.jpeg");$nidorino: unquote("https://efour.b-cdn.net/uploads/default/original/3X/2/7/270ef8d7087d6c0bd41acf34f1ca7c2557025551.jpeg");$clefable: unquote("https://efour.b-cdn.net/uploads/default/original/3X/2/7/27056b4a8d84fd84114b2b2d156a29165cf4c511.jpeg");$ninetales: unquote("https://efour.b-cdn.net/uploads/default/original/3X/0/0/00aef3cabf9a39801bae55bacc7d423174c227ba.jpeg");$jigglypuff: unquote("https://efour.b-cdn.net/uploads/default/original/3X/d/c/dc260eee51e738a25227d74c068b9f657472ab3d.jpeg");$wigglytuff: unquote("https://efour.b-cdn.net/uploads/default/original/3X/e/f/ef11c6f882d9e7fb8940e296e40b885610c21b1a.jpeg");$golbat: unquote("https://efour.b-cdn.net/uploads/default/original/3X/e/c/ec09ef58c4bd0caf1ad020db268fa5aba1a8a644.jpeg");$oddish: unquote("https://efour.b-cdn.net/uploads/default/original/3X/f/5/f5346eb37d67a005a333b06593dbb4faad7fac80.jpeg");$vileplume: unquote("https://efour.b-cdn.net/uploads/default/original/3X/2/5/25400a9bdcba47111a295d5766bea70ea272f8f2.jpeg");$paras: unquote("https://efour.b-cdn.net/uploads/default/original/3X/6/5/65a2c4b7e7ea802d7c2c215599979a3f709f6a4a.jpeg");$meowth: unquote("https://efour.b-cdn.net/uploads/default/original/3X/5/5/553d92492196903bf183ecf220afb2f9da739df5.jpeg");$lavender: unquote("https://efour.b-cdn.net/uploads/default/original/3X/1/5/15f72de0bcda21c00cd88db83e6db717326c9cec.png");$caterpie: unquote("https://efour.b-cdn.net/uploads/default/original/3X/c/8/c8f08ca169cbfeee232c491987c2a8f390a3ea34.jpeg");$metapod: unquote("https://efour.b-cdn.net/uploads/default/original/3X/3/7/37a30af46c08a625155a5e90df672eeae37dc278.jpeg");$kakuna: unquote("https://efour.b-cdn.net/uploads/default/original/3X/1/1/1178a36c8e0e68cc4d54d9ba834012dfc0e1dbf3.jpeg");$beedrill: unquote("https://efour.b-cdn.net/uploads/default/original/3X/8/0/80d7d0741b22e23cfa0c0653fc4e0ee3df808dee.jpeg");$pidgey: unquote("https://efour.b-cdn.net/uploads/default/original/3X/5/d/5dda3a9c4cf033317e9a054aed0cea27d285cb0e.jpeg");$pidgeotto: unquote("https://efour.b-cdn.net/uploads/default/original/3X/2/f/2f35dc42046d07bfffd6dd2a942ccad475a78179.jpeg");$rattata: unquote("https://efour.b-cdn.net/uploads/default/original/3X/c/e/cea9235c423e7e5054b11636b8e561ff3eb22f8e.jpeg");$spearow: unquote("https://efour.b-cdn.net/uploads/default/original/3X/a/9/a971fd74d54dc5aa083b68ea066cfb3e177be37c.jpeg");$arbok: unquote("https://efour.b-cdn.net/uploads/default/original/3X/6/e/6e6baa89c64bb8456fcd9fb3436a835fdcd4b993.jpeg");$pikachu: unquote("https://efour.b-cdn.net/uploads/default/original/3X/5/c/5c1fd28349ee1786bbe2f5091a400d7ff7a1c052.jpeg");$sandshrew: unquote("https://efour.b-cdn.net/uploads/default/original/3X/d/d/dd7b59c09abab37aee8b49208301f4c9b6ab2143.jpeg");$sandslash: unquote("https://efour.b-cdn.net/uploads/default/original/3X/f/0/f08298e299642c73795863f30f3e1dbbb98d3ff0.jpeg");$nidorina: unquote("https://efour.b-cdn.net/uploads/default/original/3X/b/0/b0e791a4735554fe629ac8eff5f41a7700158741.jpeg");$nidoking: unquote("https://efour.b-cdn.net/uploads/default/original/3X/0/9/0948e54dd62181ad44241afab981781f580302e4.jpeg");$zubat: unquote("https://efour.b-cdn.net/uploads/default/original/3X/3/f/3f3562aa2d9e2ace0470de0422f71c130168bcbb.jpeg");$parasect: unquote("https://efour.b-cdn.net/uploads/default/original/3X/c/f/cf55d539bbcca81920aad0e3af33459a436085b5.jpeg");$venonat: unquote("https://efour.b-cdn.net/uploads/default/original/3X/d/0/d0770c5d0693c2aeeb7343cc2d073bf1b6cab13c.jpeg");$venomoth: unquote("https://efour.b-cdn.net/uploads/default/original/3X/8/b/8bdc22440d8227da58b052f9a037d3be7c5780e6.jpeg");$diglett: unquote("https://efour.b-cdn.net/uploads/default/original/3X/a/2/a205e3d12f5195b630d426160624b5c2a73d1be1.jpeg");$dugtrio: unquote("https://efour.b-cdn.net/uploads/default/original/3X/1/d/1de6f1702ba6b9f9f16b714b4bf549bf8aad5dfa.jpeg");$pidgeot: unquote("https://efour.b-cdn.net/uploads/default/original/3X/7/3/73e7f04107195ce0a0f687991be4d3a829cfa235.jpeg");$clefairy: unquote("https://efour.b-cdn.net/uploads/default/original/3X/6/8/68aac60a1a5bd40089a5e569f73f17a847811c38.jpeg");$vulpix: unquote("https://efour.b-cdn.net/uploads/default/original/3X/f/b/fb211de59d9b59bd42c2d60fea3447ac579ab755.jpeg");$gloom: unquote("https://efour.b-cdn.net/uploads/default/original/3X/f/1/f1cfa60b7a12f957811ed46ace11edb54f075782.jpeg");$ivysaur: unquote("https://efour.b-cdn.net/uploads/default/original/3X/4/4/44deed6bb9fc7fc37ba901a51d6bc8064d5b12b2.jpeg");$venusaur: unquote("https://efour.b-cdn.net/uploads/default/original/3X/4/d/4d5366fea681905ad5340975dfcb6613cdaad3e6.jpeg");$charmeleon: unquote("https://efour.b-cdn.net/uploads/default/original/3X/f/1/f1e7c88753721ee720becc1e93187fc6c0af7fbb.jpeg");$wartortle: unquote("https://efour.b-cdn.net/uploads/default/original/3X/b/1/b1579ac0cb5f79fbae747f9f75f242b6739340af.jpeg");$blastoise: unquote("https://efour.b-cdn.net/uploads/default/original/3X/6/4/6436c3b23f102c63f003cf4deafdfab5ed7b4dba.jpeg");$bulbasaur: unquote("https://efour.b-cdn.net/uploads/default/original/3X/1/b/1bea225026fc310cdf0cf42e934e4157826dd190.jpeg");$charizard: unquote("https://efour.b-cdn.net/uploads/default/original/3X/f/1/f14d43740813bf8b72d08e5e3c93950fff8c097b.jpeg");// Theme: E4 Sidebar Image
// Target: desktop scss
// Last Edited: 2024-07-31 15:27:00 UTC
.sidebar-pokemon{ background: linear-gradient(to top, transparent 225px, transparent, var(--secondary) 320px), url($fearow); }

.sidebar-sections{
  background: linear-gradient(to top, transparent 225px, transparent, var(--secondary) 320px), url($fearow); 
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: bottom;
}

.sidebar-section-link-content-text{
  text-shadow: 1px 1px var(--secondary), -1px -1px var(--secondary), -1px 1px var(--secondary), 1px -1px var(--secondary), 0px -1px var(--secondary), 0px 1px var(--secondary), -1px 0px var(--secondary), 1px 0px var(--secondary), 0px 0px 5px var(--secondary);
  padding: 2px;
}

.sidebar-section-header-text{
  text-shadow: 1px 1px var(--secondary), -1px -1px var(--secondary), -1px 1px var(--secondary), 1px -1px var(--secondary), 0px -1px var(--secondary), 0px 1px var(--secondary), -1px 0px var(--secondary), 1px 0px var(--secondary), 0px 0px 5px var(--secondary);
  padding: 2px;
}

.sidebar-section-link-prefix{
  background: var(--secondary);
  border-radius: 15%
}

我找到了CSS和

<div class="sidebar-sections sidebar-sections-anonymous">

// 导入基础变量和混合宏
@import "common/foundation/variables";
@import "common/foundation/mixins";

// 口袋妖怪图片路径定义
$charmander: unquote("https://efour.b-cdn.net/uploads/default/original/3X/f/3/f317ca4d9b344cab3e1dbb4e5e43ee3dc0cb7805.jpeg"); // 小火龙
$squirtle: unquote("https://efour.b-cdn.net/uploads/default/original/3X/5/b/5b7762da58a7ecebe1c8dac5ae40fe784ff783d4.jpeg"); // 小龟
$butterfree: unquote("https://efour.b-cdn.net/uploads/default/original/3X/0/3/0381cd0f067969d3e6eedf298b7c7f5889f6cbab.jpeg"); // 巴大蝶
$weedle: unquote("https://efour.b-cdn.net/uploads/default/original/3X/8/8/884aae228ac1374d373f1d3961b8595c6e81475a.jpeg"); // 小针蜂
$raticate: unquote("https://efour.b-cdn.net/uploads/default/original/3X/e/6/e696707dae1f56cee0ed160ae833013c368072d8.jpeg"); // 大嘴猴
$fearow: unquote("https://efour.b-cdn.net/uploads/default/original/3X/a/c/acea5ad5b5e58c00a3a233b2f0436053c0b34c04.jpeg"); // 大嘴飞鸟
$ekans: unquote("https://efour.b-cdn.net/uploads/default/original/3X/9/f/9fa6644f7a9b50ffd9b27b915658fc626ad9dc64.jpeg"); // 阿柏蛇
$raichu: unquote("https://efour.b-cdn.net/uploads/default/original/3X/c/2/c2f9c20a62e217d324ed707dff546677aaed7d5d.jpeg"); // 雷丘
$nidoran-f: unquote("https://efour.b-cdn.net/uploads/default/original/3X/a/4/a4de7da46364ac5e5470041526aabeca5d756d90.jpeg"); // 尼多兰（雌）
$nidoqueen: unquote("https://efour.b-cdn.net/uploads/default/original/3X/8/e/8effe9de4c39600af8a590379d2deba83b1534aa.jpeg"); // 尼多后
$nidoran-m: unquote("https://efour.b-cdn.net/uploads/default/original/3X/9/4/94a7b1331798ce695a2ca23cf18e4442783c1f4d.jpeg"); // 尼多兰（雄）
$nidorino: unquote("https://efour.b-cdn.net/uploads/default/original/3X/2/7/270ef8d7087d6c0bd41acf34f1ca7c2557025551.jpeg"); // 尼多力诺
$clefable: unquote("https://efour.b-cdn.net/uploads/default/original/3X/2/7/27056b4a8d84fd84114b2b2d156a29165cf4c511.jpeg"); // 皮可西
$ninetales: unquote("https://efour.b-cdn.net/uploads/default/original/3X/0/0/00aef3cabf9a39801bae55bacc7d423174c227ba.jpeg"); // 九尾
$jigglypuff: unquote("https://efour.b-cdn.net/uploads/default/original/3X/d/c/dc260eee51e738a25227d74c068b9f657472ab3d.jpeg"); // 胶囊
$wigglytuff: unquote("https://efour.b-cdn.net/uploads/default/original/3X/e/f/ef11c6f882d9e7fb8940e296e40b885610c21b1a.jpeg"); // 胶囊猫
$golbat: unquote("https://efour.b-cdn.net/uploads/default/original/3X/e/c/ec09ef58c4bd0caf1ad020db268fa5aba1a8a644.jpeg"); // 哥达鸭
$oddish: unquote("https://efour.b-cdn.net/uploads/default/original/3X/f/5/f5346eb37d67a005a333b06593dbb4faad7fac80.jpeg"); // 小怪兽
$vileplume: unquote("https://efour.b-cdn.net/uploads/default/original/3X/2/5/25400a9bdcba47111a295d5766bea70ea272f8f2.jpeg"); // 大食花
$paras: unquote("https://efour.b-cdn.net/uploads/default/original/3X/6/5/65a2c4b7e7ea802d7c2c215599979a3f709f6a4a.jpeg"); // 派拉斯
$meowth: unquote("https://efour.b-cdn.net/uploads/default/original/3X/5/5/553d92492196903bf183ecf220afb2f9da739df5.jpeg"); // 喵喵
$lavender: unquote("https://efour.b-cdn.net/uploads/default/original/3X/1/5/15f72de0bcda21c00cd88db83e6db717326c9cec.png"); // 薰衣草
$caterpie: unquote("https://efour.b-cdn.net/uploads/default/original/3X/c/8/c8f08ca169cbfeee232c491987c2a8f390a3ea34.jpeg"); // 绿毛虫
$metapod: unquote("https://efour.b-cdn.net/uploads/default/original/3X/3/7/37a30af46c08a625155a5e90df672eeae37dc278.jpeg"); // 铁甲蛹
$kakuna: unquote("https://efour.b-cdn.net/uploads/default/original/3X/1/1/1178a36c8e0e68cc4d54d9ba834012dfc0e1dbf3.jpeg"); // 钻甲虫
$beedrill: unquote("https://efour.b-cdn.net/uploads/default/original/3X/8/0/80d7d0741b22e23cfa0c0653fc4e0ee3df808dee.jpeg"); // 大针蜂
$pidgey: unquote("https://efour.b-cdn.net/uploads/default/original/3X/5/d/5dda3a9c4cf033317e9a054aed0cea27d285cb0e.jpeg"); // 小箭雀
$pidgeotto: unquote("https://efour.b-cdn.net/uploads/default/original/3X/2/f/2f35dc42046d07bfffd6dd2a942ccad475a78179.jpeg"); // 急冻鸟
$rattata: unquote("https://efour.b-cdn.net/uploads/default/original/3X/c/e/cea9235c423e7e5054b11636b8e561ff3eb22f8e.jpeg"); // 小拉达
$spearow: unquote("https://efour.b-cdn.net/uploads/default/original/3X/a/9/a971fd74d54dc5aa083b68ea066cfb3e177be37c.jpeg"); // 小箭雀
$arbok: unquote("https://efour.b-cdn.net/uploads/default/original/3X/6/e/6e6baa89c64bb8456fcd9fb3436a835fdcd4b993.jpeg"); // 阿柏怪
$pikachu: unquote("https://efour.b-cdn.net/uploads/default/original/3X/5/c/5c1fd28349ee1786bbe2f5091a400d7ff7a1c052.jpeg"); // 比卡丘
$sandshrew: unquote("https://efour.b-cdn.net/uploads/default/original/3X/d/d/dd7b59c09abab37aee8b49208301f4c9b6ab2143.jpeg"); // 沙沙蜥
$sandslash: unquote("https://efour.b-cdn.net/uploads/default/original/3X/f/0/f08298e299642c73795863f30f3e1dbbb98d3ff0.jpeg"); // 沙暴龙
$nidorina: unquote("https://efour.b-cdn.net/uploads/default/original/3X/b/0/b0e791a4735554fe629ac8eff5f41a7700158741.jpeg"); // 尼多娜
$nidoking: unquote("https://efour.b-cdn.net/uploads/default/original/3X/0/9/0948e54dd62181ad44241afab981781f580302e4.jpeg"); // 尼多王
$zubat: unquote("https://efour.b-cdn.net/uploads/default/original/3X/3/f/3f3562aa2d9e2ace0470de0422f71c130168bcbb.jpeg"); // 蝙蝠
$parasect: unquote("https://efour.b-cdn.net/uploads/default/original/3X/c/f/cf55d539bbcca81920aad0e3af33459a436085b5.jpeg"); // 伞兵
$venonat: unquote("https://efour.b-cdn.net/uploads/default/original/3X/d/0/d0770c5d0693c2aeeb7343cc2d073bf1b6cab13c.jpeg"); // 小毒蜻蜓
$venomoth: unquote("https://efour.b-cdn.net/uploads/default/original/3X/8/b/8bdc22440d8227da58b052f9a037d3be7c5780e6.jpeg"); // 毒粉蝶
$diglett: unquote("https://efour.b-cdn.net/uploads/default/original/3X/a/2/a205e3d12f5195b630d426160624b5c2a73d1be1.jpeg"); // 地鼠
$dugtrio: unquote("https://efour.b-cdn.net/uploads/default/original/3X/1/d/1de6f1702ba6b9f9f16b714b4bf549bf8aad5dfa.jpeg"); // 三地鼠
$pidgeot: unquote("https://efour.b-cdn.net/uploads/default/original/3X/7/3/73e7f04107195ce0a0f687991be4d3a829cfa235.jpeg"); // 大比鸟
$clefairy: unquote("https://efour.b-cdn.net/uploads/default/original/3X/6/8/68aac60a1a5bd40089a5e569f73f17a847811c38.jpeg"); // 皮皮
$vulpix: unquote("https://efour.b-cdn.net/uploads/default/original/3X/f/b/fb211de59d9b59bd42c2d60fea3447ac579ab755.jpeg"); // 六尾
$gloom: unquote("https://efour.b-cdn.net/uploads/default/original/3X/f/1/f1cfa60b7a12f957811ed46ace11edb54f075782.jpeg"); // 溜溜糖
$ivysaur: unquote("https://efour.b-cdn.net/uploads/default/original/3X/4/4/44deed6bb9fc7fc37ba901a51d6bc8064d5b12b2.jpeg"); // 妙蛙花
$venusaur: unquote("https://efour.b-cdn.net/uploads/default/original/3X/4/d/4d5366fea681905ad5340975dfcb6613cdaad3e6.jpeg"); // 妙蛙草
$charmeleon: unquote("https://efour.b-cdn.net/uploads/default/original/3X/f/1/f1e7c88753721ee720becc1e93187fc6c0af7fbb.jpeg"); // 火恐龙
$wartortle: unquote("https://efour.b-cdn.net/uploads/default/original/3X/b/1/b1579ac0cb5f79fbae747f9f75f242b6739340af.jpeg"); // 卡咪龟
$blastoise: unquote("https://efour.b-cdn.net/uploads/default/original/3X/6/4/6436c3b23f102c63f003cf4deafdfab5ed7b4dba.jpeg"); // 水箭龟
$bulbasaur: unquote("https://efour.b-cdn.net/uploads/default/original/3X/1/b/1bea225026fc310cdf0cf42e934e4157826dd190.jpeg"); // 胖丁
$charizard: unquote("https://efour.b-cdn.net/uploads/default/original/3X/f/1/f14d43740813bf8b72d08e5e3c93950fff8c097b.jpeg"); // 喷火龙

// 侧边栏口袋妖怪图像样式
.sidebar-pokemon{ 
  background: linear-gradient(to top, transparent 225px, transparent, var(--secondary) 320px), url($fearow); 
}

// 侧边栏各部分样式
.sidebar-sections{
  background: linear-gradient(to top, transparent 225px, transparent, var(--secondary) 320px), url($fearow); 
  background-repeat: no-repeat; // 背景不重复
  background-size: 100% 40%; // 背景大小设置为100%宽度自动高度
  background-position: bottom; // 背景位置设置在底部
}

// 侧边栏链接内容文字样式
.sidebar-section-link-content-text{
  text-shadow: 1px 1px var(--secondary), -1px -1px var(--secondary), -1px 1px var(--secondary), 1px -1px var(--secondary), 0px -1px var(--secondary), 0px 1px var(--secondary), -1px 0px var(--secondary), 1px 0px var(--secondary), 0px 0px 5px var(--secondary);
  padding: 2px; // 内边距设置为2px
}

// 侧边栏部分标题文字样式
.sidebar-section-header-text{
  text-shadow: 1px 1px var(--secondary), -1px -1px var(--secondary), -1px 1px var(--secondary), 1px -1px var(--secondary), 0px -1px var(--secondary), 0px 1px var(--secondary), -1px 0px var(--secondary), 1px 0px var(--secondary), 0px 0px 5px var(--secondary);
  padding: 2px; // 内边距设置为2px
}

// 侧边栏链接前缀样式
.sidebar-section-link-prefix{
  background: var(--secondary); // 背景颜色为次要颜色
  border-radius: 15%; // 边框圆角设置为15%
}
/* 侧边栏的各个部分 */
.sidebar-sections {
    display: flex; /* 使用 flexbox 布局 */
    flex-direction: column; /* 垂直方向布局 */
    box-sizing: border-box; /* 包括边框和内边距在内的宽高计算 */
    flex: 1; /* 占据剩余的空间 */
    overflow-x: hidden; /* 水平方向溢出隐藏 */
    overflow-y: overlay; /* 垂直方向溢出显示滚动条（覆盖在内容上） */

    /* 自定义滚动条样式 */
    --scrollbarBg: transparent; /* 滚动条背景色设置为透明 */
    --scrollbarThumbBg: var(--primary-low); /* 滚动条滑块背景色，使用 CSS 变量 `--primary-low` */
    --scrollbarWidth: 0.5em; /* 滚动条宽度设置为 0.5em */

    scrollbar-color: transparent var(--scrollbarBg); /* 滚动条颜色设置，背景透明，滑块颜色使用 `--scrollbarBg` */
    transition: scrollbar-color 0.25s ease-in-out; /* 滚动条颜色过渡效果，持续 0.25s，使用 ease-in-out 缓动函数 */
    transition-delay: 0.5s; /* 过渡效果的延迟 0.5s */

    /* 针对 Webkit 内核的自定义滚动条样式 */
    &::-webkit-scrollbar {
        width: var(--scrollbarWidth); /* 滚动条宽度 */
    }

    &::-webkit-scrollbar-thumb {
        background-color: transparent; /* 滚动条滑块背景色设置为透明 */
        border-radius: calc(var(--scrollbarWidth) / 2); /* 滚动条滑块圆角，半径为滚动条宽度的一半 */
    }

    &::-webkit-scrollbar-track {
        background-color: transparent; /* 滚动条轨道背景色设置为透明 */
    }

    /* 鼠标悬停时的样式 */
    &:hover {
        scrollbar-color: var(--scrollbarThumbBg) var(--scrollbarBg); /* 滚动条颜色变为滑块颜色和背景颜色 */
        
        &::-webkit-scrollbar-thumb {
            background-color: var(--scrollbarThumbBg); /* 滚动条滑块背景色使用 `--scrollbarThumbBg` */
        }

        transition-delay: 0s; /* 悬停时去除过渡效果延迟 */
    }

    /* 返回论坛按钮的样式 */
    &__back-to-forum {
        color: var(--d-sidebar-link-color); /* 文本颜色使用 `--d-sidebar-link-color` */
        display: flex; /* 使用 flexbox 布局 */
        align-items: center; /* 垂直居中对齐内容 */
        
        svg {
            margin-right: var(--d-sidebar-section-link-prefix-margin-right); /* SVG 图标右侧的外边距 */
            height: 0.75em; /* SVG 图标高度 */
            width: 0.75em; /* SVG 图标宽度 */
            color: var(--d-sidebar-link-icon-color); /* SVG 图标颜色使用 `--d-sidebar-link-icon-color` */
        }
    }
}
/* 侧边栏包装器 */
.sidebar-wrapper {
  display: flex; /* 使用 flexbox 布局 */
  grid-area: sidebar; /* 在网格布局中指定区域 */
  position: sticky; /* 使元素在滚动时保持固定 */
  top: var(--header-offset); /* 距离顶部的位置，使用 CSS 变量 `--header-offset` */
  background: var(--d-sidebar-background); /* 背景色使用 CSS 变量 `--d-sidebar-background` */

  @include unselectable; /* 引入自定义的 unselectable mixin，防止选择文本 */

  /* 1dvh 自定义属性及其兼容性 */
  --1dvh: 1vh; /* 定义 1dvh 变量，1dvh 表示视口高度的 1% */
  @supports (height: 1dvh) {
    --1dvh: 1dvh; /* 如果浏览器支持 1dvh 单位，则使用该单位 */
  }

  /* 计算高度，兼容高度 1dvh 和 header-offset 的变化 */
  height: calc(
    var(--composer-vh, var(--1dvh)) * 100 - var(--header-offset, 0px)
  );

  align-self: start; /* 在 flex container 中与起始位置对齐 */
  overflow-y: auto; /* 垂直方向出现滚动条 */
  
  /* 内部容器 */
  .sidebar-container {
    display: flex; /* 使用 flexbox 布局 */
    flex-direction: column; /* 垂直方向布局 */
    box-sizing: border-box; /* 包括边框和内边距在内的宽高计算 */
    height: 100%; /* 高度为父元素的 100% */
    width: 100%; /* 宽度为父元素的 100% */
    padding: 0; /* 去掉内边距 */
    border-right: 1px solid var(--primary-low); /* 右边框，颜色使用 CSS 变量 `--primary-low` */
    overflow-x: hidden; /* 水平方向溢出隐藏 */
    height: calc(100% - var(--composer-height, 0px)); /* 高度计算，减去 composer 高度的差值 */
  }

  /* 侧边栏的各个部分 */
  .sidebar-sections {
    display: flex; /* 使用 flexbox 布局 */
    flex-direction: column; /* 垂直方向布局 */
    box-sizing: border-box; /* 包括边框和内边距在内的宽高计算 */
    flex: 1; /* 占据剩余的空间 */
    padding: 1.35em 0 1em; /* 上内边距 1.35em，左右内边距 0，下内边距 1em */
    overflow-x: hidden; /* 水平方向溢出隐藏 */
    overflow-y: overlay; /* 垂直方向溢出显示滚动条（覆盖在内容上） */

    /* 自定义滚动条样式 */
    --scrollbarBg: transparent; /* 滚动条背景色设置为透明 */
    --scrollbarThumbBg: var(--primary-low); /* 滚动条滑块背景色，使用 CSS 变量 `--primary-low` */
    --scrollbarWidth: 0.5em; /* 滚动条宽度设置为 0.5em */

    scrollbar-color: transparent var(--scrollbarBg); /* 滚动条颜色设置，背景透明，滑块颜色使用 `--scrollbarBg` */
    transition: scrollbar-color 0.25s ease-in-out; /* 滚动条颜色过渡效果，持续 0.25s，使用 ease-in-out 缓动函数 */
    transition-delay: 0.5s; /* 过渡效果的延迟 0.5s */

    /* 针对 Webkit 内核的自定义滚动条样式 */
    &::-webkit-scrollbar {
      width: var(--scrollbarWidth); /* 滚动条宽度 */
    }

    &::-webkit-scrollbar-thumb {
      background-color: transparent; /* 滚动条滑块背景色设置为透明 */
      border-radius: calc(var(--scrollbarWidth) / 2); /* 滚动条滑块圆角，半径为滚动条宽度的一半 */
    }

    &::-webkit-scrollbar-track {
      background-color: transparent; /* 滚动条轨道背景色设置为透明 */
    }

    /* 鼠标悬停时的样式 */
    &:hover {
      scrollbar-color: var(--scrollbarThumbBg) var(--scrollbarBg); /* 悬停时滚动条颜色变为滑块颜色和背景颜色 */

      &::-webkit-scrollbar-thumb {
        background-color: var(--scrollbarThumbBg); /* 滚动条滑块背景色使用 `--scrollbarThumbBg` */
      }

      transition-delay: 0s; /* 悬停时去除过渡效果延迟 */
    }

    /* 返回论坛按钮的样式 */
    &__back-to-forum {
      color: var(--d-sidebar-link-color); /* 文本颜色使用 `--d-sidebar-link-color` */
      display: flex; /* 使用 flexbox 布局 */
      align-items: center; /* 垂直居中对齐内容 */
      
      svg {
        margin-right: var(--d-sidebar-section-link-prefix-margin-right); /* SVG 图标右侧的外边距 */
        height: 0.75em; /* SVG 图标高度 */
        width: 0.75em; /* SVG 图标宽度 */
        color: var(--d-sidebar-link-icon-color); /* SVG 图标颜色使用 `--d-sidebar-link-icon-color` */
      }
    }
  }
}
2

image
image669×614 15.7 KB

他的字体也很好看，你知道是什么吗？

3

Consolas, Menlo, Monaco, “Lucida Console”, “Liberation Mono”, “DejaVu Sans Mono”, “Bitstream Vera Sans Mono”, “Courier New”, monospace

4

Arial, sans-serif;

5

我不管换什么字体，都显示默认的咋回事

image
image1740×571 58.5 KB

第一次遇见 ，也正常加载了

6

image
image188×277 4.23 KB

7

你清理缓存了吗

8

image
image1920×1080 212 KB

我反正是正常的

9

我没套CDN 也尝试过无痕

10

image
image373×164 3.92 KB

我又换回去了 这些字体都没中文楷不知道怎么上传字体上去

11

我也想换成鸿蒙的字体 这些不太好看 没有中文库

12 
@font-face {
    font-family: 'MyCustomFont';
    src: url('https://your-cdn-url.com/path-to-font.woff2') format('woff2'),
         url('https://your-cdn-url.com/path-to-font.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: 'MyCustomFont', sans-serif;
}


/* 将自定义字体应用于整个论坛 */
body {
    font-family: 'MyCustomFont', sans-serif;
}

/* 将自定义字体应用于特定元素，如帖子标题 */
.topic-title {
    font-family: 'MyCustomFont', serif;
}
13

我去试试，看看效果如何

14

image
image1263×698 28.2 KB

平时看着挺好看，换在社区上就一般般了，其实iPhone的字体挺好看的

社区统计的路径
15

他这字体显示的是 Rubik 对吧。

2024-08-26_07-29-52
2024-08-26_07-29-521102×687 71.3 KB

16

好的谢谢，我尝试一下

17

A post was split to a new topic: 社区统计的路径

19

/about

20

谢谢。

我们就用了现在最热的 roboto 字体。

这个字体是 Google 的，也是开源的没有版权问题。

1 Like
21

A post was split to a new topic: 边栏是固定的吗