强迫症帮站长优化下右上角图标样式

tlplbi2026-08-13

1005

目前右上角搜索/消息/编辑/头像几个图标大小不一，排列不对称，看的太难受了。
实际问题是：
搜索、编辑图标为 18px
消息图标只有 14px
按钮高度分别为 55px 和 49px
消息按钮还包含“消息”文字，导致宽度和视觉中心不一致
头像约为 25px
我做了几个修改：
将四个按钮统一为 40 × 40px 点击区域
图标统一为 18px，占位盒统一为 20 × 20px
头像统一为 28 × 28px
统一垂直居中和水平间距
隐藏消息文字，但保留未读数字角标
添加轻微的悬停背景
修改效果为：

给个油猴的例子站长可以试一下：
// ==UserScript==
// @name         Linux.BI 顶栏图标对齐优化
// @namespace    https://www.linux.bi/
// @version      1.0.0
// @description  统一右上角搜索、消息、编辑和头像按钮的尺寸、间距与垂直对齐
// @author       Codex
// @match        https://www.linux.bi/*
// @grant        GM_addStyle
// @run-at       document-start
// ==/UserScript==
(() => {
  'use strict';
  GM_addStyle(`
    / 仅限定桌面端右侧工具栏，避免影响移动端导航 /
    .navbar-nav.hidden-md.hidden-sm {
      display: flex !important;
      align-items: center !important;
      gap: 4px !important;
      height: 55px !important;
    }
    .navbar-nav.hidden-md.hidden-sm > .nav-item:not(.hidden-lg) {
      position: relative !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      flex: 0 0 40px !important;
      width: 40px !important;
      height: 55px !important;
      margin: 0 !important;
      padding: 0 !important;
    }
    .navbar-nav.hidden-md.hidden-sm > .nav-item:not(.hidden-lg) > .nav-link {
      box-sizing: border-box !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      width: 40px !important;
      height: 40px !important;
      margin: 0 !important;
      padding: 0 !important;
      line-height: 1 !important;
      border-radius: 8px !important;
    }
    .navbar-nav.hidden-md.hidden-sm > .nav-item:not(.hidden-lg) > .nav-link:hover {
      background: rgba(127, 127, 127, 0.1) !important;
    }
    / 两套图标字体统一到相同的视觉尺寸 /
    .navbar-nav.hidden-md.hidden-sm .iconSearchOutline,
    .navbar-nav.hidden-md.hidden-sm .iconRedactOutline,
    .navbar-nav.hidden-md.hidden-sm #nav-usernotice .icon-bell {
      display: block !important;
      width: 20px !important;
      height: 20px !important;
      font-size: 18px !important;
      line-height: 20px !important;
      text-align: center !important;
    }
    / 隐藏“消息”文字，但保留未读数字角标 /
    .navbar-nav.hidden-md.hidden-sm #nav-usernotice > .nav-link {
      position: relative !important;
      font-size: 0 !important;
    }
    .navbar-nav.hidden-md.hidden-sm #nav-usernotice-unread-notices:not(.d-none) {
      position: absolute !important;
      top: 3px !important;
      right: 2px !important;
      min-width: 16px !important;
      height: 16px !important;
      padding: 0 4px !important;
      font-size: 10px !important;
      line-height: 16px !important;
      text-align: center !important;
    }
    .navbar-nav.hidden-md.hidden-sm > .username.mydropdownoc.nav-link {
      box-sizing: border-box !important;
      cursor: pointer !important;
    }
    .navbar-nav.hidden-md.hidden-sm > .username img.avatar-2 {
      display: block !important;
      width: 28px !important;
      height: 28px !important;
      margin: 0 !important;
      border-radius: 0 !important;
      object-fit: contain !important;
    }
  `);
})();

如果是直接改CSS的话差不多是这样：

.header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 55px;
}
.header-action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 55px;
}
.header-action__button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 8px;
}
.header-action__icon {
  width: 20px;
  height: 20px;
  font-size: 18px;
  line-height: 20px;
  text-align: center;
}

主楼

发表回复