20241211［CSS］ LINUX DO 自用css样式

[0_V]

前情提要

LINUX DO 的导航栏，看着不爽很久了；

今天发现样式又有变化，好多地方忍不了，
于是拿 Stylebot插件，魔改了一些样式；

---

已适配:

• Stylebot 插件；
• LINUX DO增强插件 (油猴脚本)；

注意：目前导航栏没能适配Safari；

(Safari上，导航栏原本的文字，无法隐藏

AI转换的效果不好，想蹲个大佬适配Safari )

---

导航栏样式

---

css代码

右边有复制按钮，
请粘贴到可以自定义css的插件/脚本中；

每一块代码，都有 注释 碎碎念，也可以让AI帮你修改；

/* =============================
   1. 顶部栏
   ============================= */

/* header浪费显示空间，透明 */
header {
  background: transparent !important;
  box-shadow: none !important;
}

/* 我知道快捷键C，不要按钮，太丑了 */
button.btn.btn-icon-text.btn-default.header-create-topic {
  display: none;
}

/* =============================
   2. 侧边栏
   ============================= */

/* 侧边栏块标题的文字太小了，调大+加深 */
span.sidebar-section-header-text {
  color: #616161;
  font-size: 15px;
  font-weight: 451;
}

/* 侧边栏的留白太多了，删 */
div.sidebar-sections {
  padding: 0 !important;
}

/* 分割线不好看，删 */
div.sidebar-section.sidebar-section-wrapper.sidebar-section {
  border-style: none;
}

/* 不需要摸鱼模式，删 */
div.sidebar-theme-toggle__wrapper {
  display: none;
}

/* =============================
   3. 搜索框
   ============================= */

/* 搜索 */
/* sLogan已经牢记于心了，省略 */
div.alert.alert-info.alert-global-notice {
  display: none;
}

/* 搜索框上下的空白太多了，删 */
div.wrap.custom-search-banner-wrap {
  padding: 0;
}

/* =============================
   4. 导航栏
   ============================= */

/* 翻译的啥啊😅，中文完全看不懂啊 */

/* 最新 -> 最新 (Latest) +帖子 */
li.latest.ember-view.nav-item_latest {
  position: relative;
  text-indent: -9999px; /* 隐藏原有文字 */
}

li.latest.ember-view.nav-item_latest ::before{
  content: "最新 (Latest)";
  text-indent: 0; /* 确保新文字可见 */
}

li.latest.ember-view.nav-item_latest::after {
  color: blue;
  content: "帖子";
  text-indent: 0;
  font-size: 10px;
  position: absolute;
  left: 1.45em; 
  bottom: 2.9em;
  /* 调整这个两个值以适应你的具体情况 */
}

/* 新 -> 新 (Created) +话题 */
li.new.ember-view.nav-item_new {
  position: relative;
  text-indent: -9999px; /* 隐藏原有文字 */
}

li.new.ember-view.nav-item_new ::before{
  content: "新 (Created)";
  text-indent: 0; /* 确保新文字可见 */
}

li.new.ember-view.nav-item_new::after {
  color: red;
  content: "话题";
  text-indent: 0;
  font-size: 10px;
  position: absolute;
  left: 1.2em; 
  bottom: 2.9em;
  /* 调整这个两个值以适应你的具体情况 */
}

/* 未读 -> 未读 (Unread) +新帖子 */
li.has-icon.unread.ember-view.nav-item_unread {
  position: relative;
  text-indent: -9999px; /* 隐藏原有文字 */
}

li.has-icon.unread.ember-view.nav-item_unread ::before{
  content: "未读 (Unread)";
  text-indent: 0; /* 确保新文字可见 */
}

li.has-icon.unread.ember-view.nav-item_unread::after {
  color: blue;
  content: "帖子";
  text-indent: 0;
  font-size: 10px;
  position: absolute;
  left: 1.35em; 
  bottom: 2.9em;
  /* 调整这个两个值以适应你的具体情况 */
}

/* 未读 -> 未读 (Unseen) + 帖子 + 话题*/
li.unseen.ember-view.nav-item_unseen {
  position: relative;
  text-indent: -9999px; /* 隐藏原有文字 */
}

li.unseen.ember-view.nav-item_unseen ::before{
  content: "未读 (Unseen)";
  text-indent: 0; /* 确保新文字可见 */
}

li.unseen.ember-view.nav-item_unseen::after {
  content: "帖子 + 话题";
  text-indent: 0;
  font-size: 10px;
  position: absolute;
  left: 1.35em; 
  bottom: 2.9em;
  /* 调整这个两个值以适应你的具体情况 */
}


/* 热门 -> 活跃 (Top) */
li.top.ember-view.nav-item_top{
  position: relative;
  text-indent: -9999px; /* 隐藏原有文字 */
}

li.top.ember-view.nav-item_top ::before{
  content: "活跃 (Top)";
  text-indent: 0; /* 确保新文字可见 */
}

li.top.ember-view.nav-item_top::after {
  content: "话题";
  text-indent: 0;
  font-size: 10px;
  position: absolute;
  left: 1.3em; 
  bottom: 2.9em;
  /* 调整这个两个值以适应你的具体情况 */
}

/* 热门 -> 热门 (Hot) */
li.hot.ember-view.nav-item_hot {
  position: relative;
  text-indent: -9999px; /* 隐藏原有文字 */
}

li.hot.ember-view.nav-item_hot ::before{
  content: "热门 (Hot)";
  text-indent: 0; /* 确保新文字可见 */
}

li.hot.ember-view.nav-item_hot::after {
  content: "话题";
  text-indent: 0;
  font-size: 10px;
  position: absolute;
  left: 1.3em; 
  bottom: 2.9em;
  /* 调整这个两个值以适应你的具体情况 */
}

/* 类别 -> 类别 (Categories) +分组*/
li.categories.ember-view.nav-item_categories {
  position: relative;
  text-indent: -9999px; /* 隐藏原有文字 */
}

li.categories.ember-view.nav-item_categories ::before{
  content: "类别 (Categories)";
  text-indent: 0; /* 确保新文字可见 */
}

li.categories.ember-view.nav-item_categories::after {
  content: "分组";
  text-indent: 0;
  font-size: 10px;
  position: absolute;
  left: 1.3em; 
  bottom: 2.9em;
  /* 调整这个两个值以适应你的具体情况 */
}

/* 我的帖子，没啥用，删 */
li.posted.ember-view.nav-item_posted {
 display: none;
}

/* 书签 -> 我的书签 (Bookmarks) */
li.bookmarks.ember-view.nav-item_bookmarks {
  position: relative;
  text-indent: -9999px; /* 隐藏原有文字 */
}

li.bookmarks.ember-view.nav-item_bookmarks ::before{
  content: "我的书签 (Bookmarks)";
  text-indent: 0; /* 确保新文字可见 */
}

li.bookmarks.ember-view.nav-item_bookmarks::after {
  content: "话题";
  text-indent: 0;
  font-size: 10px;
  position: absolute;
  left: 1.3em; 
  bottom: 2.9em;
  /* 调整这个两个值以适应你的具体情况 */
}

---

欢迎佬友讨论！

---

20241211