2. NodeSeek
  3. CF-Server-Monitor 自定义主题分享

CF-Server-Monitor 自定义主题分享

SonivelY 2026-07-07 11:03 1

CF-Server-Monitor


<link rel="preconnect" href="https://fonts.googleapis.com">

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<link href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">



<style>

/* ============================================================

   1. 配色令牌定义

   ============================================================ */



/* 1a. Night 夜 (ran-night) — 暗色默认

   背景色使用 rgba 半透明以实现毛玻璃效果

   底色 (bg-primary) 保持实色作为画布，其余层级递减不透明度 */

:root {

  /* ── 背景层级 (实色 → 半透明递进) ── */

  --bg-primary: #0c0d0f;                       /* 100% 实色 — 页面画布 */

  --bg-primary-gradient: #101318;              /* body 渐变终点 */

  --bg-secondary: rgba(20, 22, 26, 0.70);      /* 70% — 侧栏 / 次级面板 */

  --bg-card: rgba(26, 29, 34, 0.18);           /* 18% — 卡片 (极透毛玻璃) */

  --bg-hover: rgba(33, 37, 43, 0.85);          /* 85% — 悬浮态 */

  --bg-hover-strong: rgba(42, 47, 54, 0.90);   /* 90% — 强悬浮态 */

  --bg-inset: rgba(10, 11, 13, 0.80);          /* 80% — 凹陷读窗 */



  /* ── 前景文字：暖灰白系列 ── */

  --text-primary: #f2efe8;

  --text-secondary: #9a9384;

  --text-muted: #6e695c;

  --text-mark: #ffffff;



  /* ── 边缘线：CNC 倒角发丝线 (暖色调) ── */

  --border-bright: rgba(255, 248, 230, 0.09);

  --border-mid: rgba(255, 248, 230, 0.05);

  --border-deep: rgba(0, 0, 0, 0.55);

  --border-engrave: rgba(0, 0, 0, 0.40);

  --border-active: rgba(255, 248, 230, 0.18);



  /* ── 主题强调色 — 沉稳暖铜金 ── */

  --accent: #c28840;

  --accent-dim: #8a5f2c;

  --accent-bright: #e0a55a;

  --accent-rgb: 194, 136, 64;

  --accent-glow: rgba(194, 136, 64, 0.25);



  /* ── 信号色 ── */

  --accent-green: #6db485;

  --accent-blue: #6b8db5;

  --accent-purple: #a08cc0;

  --accent-pink: #bd7a92;

  --accent-yellow: #d9a154;

  --accent-red: #c85a4f;

  --accent-cyan: #6b8db5;



  /* ── 表单输入 ── */

  --input-bg: rgba(10, 11, 13, 0.80);

  --input-border: rgba(255, 248, 230, 0.09);



  /* ── 杂项 ── */

  --color-inherit: #0c0d0f;

  --color-active: #ffffff;

  --overlay-dark: rgba(0, 0, 0, 0.50);



  /* ── 阴影系统 (毛玻璃适配：相比实色版减弱投影、保留倒角) ── */

  --shadow-card:

    0 1px 0 var(--border-bright) inset,

    0 -1px 0 var(--border-deep) inset,

    0 2px 12px rgba(0, 0, 0, 0.30);

  --shadow-card-hover:

    0 8px 24px rgba(0, 0, 0, 0.40);

  --shadow-card-hover-light:

    0 6px 20px rgba(0, 0, 0, 0.35);

  --shadow-inset:

    inset 0 1px 0 var(--border-deep),

    inset 0 -1px 0 var(--border-bright),

    inset 0 2px 6px rgba(0, 0, 0, 0.40);

  --shadow-button:

    0 1px 0 var(--border-bright) inset,

    0 -1px 0 var(--border-deep) inset,

    0 1px 2px rgba(0, 0, 0, 0.35);



  /* ── 蚀刻文字 ── */

  --txt-engrave: 0 1px 1px rgba(0, 0, 0, 0.35);



  /* ── 毛玻璃参数 ── */

  --glass-blur: 18px;

  --glass-blur-light: 6px;

  --glass-saturate: 1.1;



  /* ── 滚动条 (保持实色以确保可用性) ── */

  --scrollbar-track: #0c0d0f;

  --scrollbar-thumb: rgba(33, 37, 43, 0.90);

  --scrollbar-thumb-hover: rgba(42, 47, 54, 0.95);



  /* ── 字体栈 ── */

  --terminal-font: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;

  --mono-font: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;

}



/* 1b. Ji 霁 (ran-ji) — 亮色覆盖

   毛玻璃在亮色主题下透明度稍高，营造轻盈通透感 */

body.light {

  /* ── 背景层级 ── */

  --bg-primary: #f4f6f8;

  --bg-primary-gradient: #eaecf0;

  --bg-secondary: rgba(249, 250, 251, 0.70);

  --bg-card: rgba(252, 253, 254, 0.15);        /* 15% — 卡片 (极透毛玻璃) */

  --bg-hover: rgba(255, 255, 255, 0.85);

  --bg-hover-strong: rgba(255, 255, 255, 0.92);

  --bg-inset: rgba(232, 235, 239, 0.78);



  /* ── 前景文字：近黑色系 ── */

  --text-primary: #10151c;

  --text-secondary: #4a5160;

  --text-muted: #7a818e;

  --text-mark: #000000;



  /* ── 边缘线：冷白调 ── */

  --border-bright: rgba(255, 255, 255, 0.90);

  --border-mid: rgba(255, 255, 255, 0.55);

  --border-deep: rgba(30, 40, 55, 0.14);

  --border-engrave: rgba(30, 40, 55, 0.08);

  --border-active: rgba(30, 40, 55, 0.20);



  /* ── 主题强调色 — 清冷蓝 ── */

  --accent: #2f6fd6;

  --accent-dim: #2358b0;

  --accent-bright: #4a86e8;

  --accent-rgb: 47, 111, 214;

  --accent-glow: rgba(47, 111, 214, 0.20);



  /* ── 信号色 ── */

  --accent-green: #3f9c6a;

  --accent-blue: #3f6fb0;

  --accent-purple: #7e8cc0;

  --accent-pink: #c47088;

  --accent-yellow: #c08420;

  --accent-red: #cf4a3e;

  --accent-cyan: #3f6fb0;



  /* ── 表单输入 ── */

  --input-bg: rgba(232, 235, 239, 0.80);

  --input-border: rgba(30, 40, 55, 0.10);



  /* ── 杂项 ── */

  --color-inherit: #f4f6f8;

  --color-active: #000000;

  --overlay-dark: rgba(30, 40, 55, 0.04);



  /* ── 阴影系统 (亮色版更轻盈) ── */

  --shadow-card:

    0 1px 0 var(--border-bright) inset,

    0 -1px 0 var(--border-deep) inset,

    0 1px 6px rgba(30, 40, 55, 0.05);

  --shadow-card-hover:

    0 8px 24px rgba(30, 40, 55, 0.10);

  --shadow-card-hover-light:

    0 6px 20px rgba(30, 40, 55, 0.08);

  --shadow-inset:

    inset 0 1px 0 var(--border-deep),

    inset 0 -1px 0 var(--border-bright),

    inset 0 1px 3px rgba(30, 40, 55, 0.08);

  --shadow-button:

    0 1px 0 var(--border-bright) inset,

    0 -1px 0 var(--border-deep) inset,

    0 1px 2px rgba(30, 40, 55, 0.06);



  /* ── 蚀刻文字 ── */

  --txt-engrave: 0 1px 1px rgba(255, 255, 255, 0.75);



  /* ── 滚动条 ── */

  --scrollbar-track: #f4f6f8;

  --scrollbar-thumb: rgba(180, 188, 198, 0.85);

  --scrollbar-thumb-hover: rgba(160, 168, 180, 0.90);

}



/* ============================================================

   2. 全局基底样式

   ============================================================ */



/* 移除扫描线 */

body::before,

body.light::before {

  display: none;

}



/* 页面底色：微渐变提供深度感，毛玻璃卡片将透过 blur 呈现此渐变 */

body {

  background: linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-primary-gradient) 50%, var(--bg-primary) 100%);

  background-attachment: fixed;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

}



/* 移除霓虹发光，大标题改用蚀刻阴影 */

.host-name,

.panel-title,

.stat-main-value,

.stat-value,

.chart-current-value,

.status-label {

  text-shadow: none !important;

}



.site-title,

.group-header {

  text-shadow: var(--txt-engrave) !important;

}



/* ============================================================

   3. 品牌强调色

   ============================================================ */



.site-title,

.group-header,

.footer a {

  color: var(--accent);

}



/* ============================================================

   4. 毛玻璃卡片 ★ 核心效果

   backdrop-filter: blur() 将背后渐变模糊，营造 Frosted Glass 质感

   ============================================================ */



.server-card,

.chart-card,

.host-card,

.settings-section,

.table-container,

.footer,

.modal-dialog,

body.light .modal-dialog {

  background: var(--bg-card);

  backdrop-filter: blur(var(--glass-blur));

  -webkit-backdrop-filter: blur(var(--glass-blur));

  box-shadow: var(--shadow-card);

  border-radius: 6px;

}



/* 终端头部：顶部圆角 + 略微不同的透明度 */

.terminal-header {

  background: var(--bg-secondary);

  backdrop-filter: blur(var(--glass-blur));

  -webkit-backdrop-filter: blur(var(--glass-blur));

  box-shadow: var(--shadow-card);

  border-radius: 6px 6px 0 0;

}



/* 卡片悬浮：加深投影 + 主题色边框光晕 */

.server-card:hover,

body.light .server-card:hover {

  border-color: var(--accent);

  box-shadow:

    var(--shadow-card),

    var(--shadow-card-hover),

    0 0 0 1px var(--accent-glow);

  transition: box-shadow 0.25s ease, border-color 0.25s ease;

}



.chart-card:hover,

body.light .chart-card:hover {

  box-shadow:

    var(--shadow-card),

    var(--shadow-card-hover-light);

  transition: box-shadow 0.25s ease;

}



/* ============================================================

   5. 统计网格 — 半透明条带 + 倒角边框

   ============================================================ */



.global-stats,

.stats-grid {

  background: var(--overlay-dark);

  backdrop-filter: blur(var(--glass-blur-light));

  -webkit-backdrop-filter: blur(var(--glass-blur-light));

  border-radius: 6px;

  box-shadow: var(--shadow-card);

}



/* ============================================================

   6. 凹陷显示区 — 进度条 / 段控件 / 视图切换

   ============================================================ */



.stat-bar-container {

  background: var(--bg-inset);

  backdrop-filter: blur(var(--glass-blur-light));

  -webkit-backdrop-filter: blur(var(--glass-blur-light));

  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);

  border-radius: 4px;

}



.view-toggle {

  background: var(--bg-inset);

  backdrop-filter: blur(var(--glass-blur-light));

  -webkit-backdrop-filter: blur(var(--glass-blur-light));

  box-shadow: var(--shadow-inset);

  border-radius: 6px;

}



.toggle-btn.active {

  background: var(--bg-hover);

  color: var(--accent-bright);

  box-shadow: var(--shadow-button);

}



/* ============================================================

   7. 按钮 / 过滤标签 — 机加工按键 + 毛玻璃

   ============================================================ */



.btn,

.filter-tag {

  background: var(--bg-hover);

  backdrop-filter: blur(var(--glass-blur-light));

  -webkit-backdrop-filter: blur(var(--glass-blur-light));

  box-shadow: var(--shadow-button);

}



.filter-tag.active {

  background: rgba(var(--accent-rgb), 0.12);

  border-color: var(--accent);

  color: var(--accent-bright);

}



/* ============================================================

   8. 数字读数 — 等宽字体

   ============================================================ */



.stat-main-value,

.stat-value,

.stat-sub-info,

.chart-current-value,

.terminal-table td,

.ping-item,

.badge {

  font-family: var(--mono-font);

  font-variant-numeric: tabular-nums;

}



/* ============================================================

   9. 输入聚焦 / 弹窗 / 选区 / 滚动条

   ============================================================ */



.form-input:focus,

.form-select:focus,

.form-textarea:focus,

.toolbar-input:focus {

  border-color: var(--accent) !important;

  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15) !important;

  transition: box-shadow 0.2s ease, border-color 0.2s ease;

}



/* 弹窗遮罩 */

.modal-overlay {

  background: rgba(0, 0, 0, 0.45);

  backdrop-filter: blur(4px);

  -webkit-backdrop-filter: blur(4px);

}



/* 弹窗内容 */

.modal-dialog,

body.light .modal-dialog {

  border: 1px solid var(--border-bright);

  border-radius: 8px;

}



/* 文字选区 */

::selection {

  background: var(--accent-dim);

  color: var(--text-mark);

}



/* 滚动条 */

::-webkit-scrollbar {

  width: 10px;

  height: 10px;

}



::-webkit-scrollbar-track {

  background: var(--scrollbar-track);

}



::-webkit-scrollbar-thumb {

  background: var(--scrollbar-thumb);

  border: 2px solid var(--scrollbar-track);

  border-radius: 5px;

}



::-webkit-scrollbar-thumb:hover {

  background: var(--scrollbar-thumb-hover);

}

</style>
最新回复 (6)
  • qiucangyue 07-07 11:28
    1楼

    好看

  • SonivelY 楼主 07-07 11:53
    2楼

    ^-^

  • ToLink 07-07 16:17
    3楼

    这个怎么用 我复制到哪里啊 ^-^

  • SonivelY 楼主 07-07 16:32
    4楼

    @ToLink #3 设置里面有个自定义HEAD，复制到这里保存就可以了，背景图片自己设置

  • ToLink 07-07 16:45
    5楼

    @SonivelY #4 谢谢🙏

  • q8329586 07-07 17:36
    6楼

    我在发一个window98样式的


    <link rel="preconnect" href="https://fonts.googleapis.com">
    
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    
<link href="https://fonts.googleapis.com/css2?family=VT323&family=Silkscreen:wght@400;700&display=swap" rel="stylesheet">
    

    
<style>
    
/* ============================================================
    
   1. Win98 Retro Theme
    
   ============================================================
    
   Windows 98 / Classic UI
    
   3D beveled borders | solid opaque colors | square corners
    
   pixel fonts | chunky scrollbars | no transparency/blur
    
   ============================================================ */
    

    
/* ============================================================
    
   1a. Night (ran-night) - Dark Win98 Mode
    
   Dark interpretation of Win98: deep navy/charcoal with
    
   classic 3D beveled borders and solid colors
    
   ============================================================ */
    
:root {
    
  /* -- Background: dark charcoal like Win98 "High Contrast" -- */
    
  --bg-primary: #1a1a2e;
    
  --bg-primary-gradient: #16213e;
    
  --bg-secondary: #212140;
    
  --bg-card: #2a2a4a;
    
  --bg-hover: #33335a;
    
  --bg-hover-strong: #3d3d6a;
    
  --bg-inset: #0f0f1e;
    

    
  /* -- Text: classic CRT phosphor tones -- */
    
  --text-primary: #c0c0c0;
    
  --text-secondary: #a0a0a0;
    
  --text-muted: #707070;
    
  --text-mark: #ffffff;
    

    
  /* -- Borders: 3D beveled (dark mode variant) -- */
    
  --border-bright: #4a4a7a;
    
  --border-mid: #3a3a5a;
    
  --border-deep: #0a0a18;
    
  --border-engrave: #000000;
    
  --border-active: #5a5aff;
    

    
  /* -- Accent: classic Win98 title-bar blue -- */
    
  --accent: #5b6abf;
    
  --accent-dim: #3a4a8f;
    
  --accent-bright: #7b8aef;
    
  --accent-rgb: 91, 106, 191;
    
  --accent-glow: rgba(91, 106, 191, 0.35);
    

    
  /* -- Signal colors (saturated, CRT-style) -- */
    
  --accent-green: #00c853;
    
  --accent-blue: #448aff;
    
  --accent-purple: #b388ff;
    
  --accent-pink: #ff80ab;
    
  --accent-yellow: #ffd740;
    
  --accent-red: #ff5252;
    
  --accent-cyan: #18ffff;
    

    
  /* -- Form input -- */
    
  --input-bg: #0f0f1e;
    
  --input-border: #4a4a7a;
    

    
  /* -- Misc -- */
    
  --color-inherit: #1a1a2e;
    
  --color-active: #ffffff;
    
  --overlay-dark: rgba(0, 0, 0, 0.65);
    

    
  /* -- Shadows: 3D bevel (raised) -- */
    
  --shadow-card:
    
    inset 1px 1px 0 #4a4a7a,
    
    inset -1px -1px 0 #000000,
    
    inset 2px 2px 0 #3a3a5a,
    
    inset -2px -2px 0 #0a0a18;
    
  --shadow-card-hover:
    
    inset 1px 1px 0 #5a5a8a,
    
    inset -1px -1px 0 #000000,
    
    inset 2px 2px 0 #4a4a7a,
    
    inset -2px -2px 0 #0a0a18;
    
  --shadow-card-hover-light:
    
    inset 1px 1px 0 #5a5a8a,
    
    inset -1px -1px 0 #000000;
    
  /* 3D bevel (sunken) */
    
  --shadow-inset:
    
    inset 1px 1px 0 #000000,
    
    inset -1px -1px 0 #4a4a7a,
    
    inset 2px 2px 0 #0a0a18,
    
    inset -2px -2px 0 #3a3a5a;
    
  /* 3D bevel (button raised) */
    
  --shadow-button:
    
    inset 1px 1px 0 #4a4a7a,
    
    inset -1px -1px 0 #000000,
    
    inset 2px 2px 0 #3a3a5a,
    
    inset -2px -2px 0 #0a0a18;
    

    
  /* -- No text engrave in Win98 style -- */
    
  --txt-engrave: none;
    

    
  /* -- No glass / blur -- */
    
  --glass-blur: 0px;
    
  --glass-blur-light: 0px;
    
  --glass-saturate: 1;
    

    
  /* -- Scrollbar -- */
    
  --scrollbar-track: #1a1a2e;
    
  --scrollbar-thumb: #3a3a5a;
    
  --scrollbar-thumb-hover: #4a4a7a;
    

    
  /* -- Win98 Font Stack -- */
    
  --terminal-font: Tahoma, 'MS Sans Serif', 'Microsoft Sans Serif', Arial, Helvetica, sans-serif;
    
  --mono-font: 'VT323', 'Courier New', 'Fixedsys', Courier, monospace;
    

    
  /* -- Win98 specific tokens -- */
    
  --win98-titlebar: linear-gradient(90deg, #000080 0%, #1084d0 100%);
    
  --win98-titlebar-inactive: linear-gradient(90deg, #808080 0%, #b0b0b0 100%);
    
  --win98-button-face: #2a2a4a;
    
}
    

    
/* ============================================================
    
   1b. Classic Win98 - Light Mode
    
   Authentic Windows 98 silver/gray palette
    
   ============================================================ */
    
body.light {
    
  /* -- Background: classic Win98 desktop teal + silver -- */
    
  --bg-primary: #008080;
    
  --bg-primary-gradient: #008080;
    
  --bg-secondary: #c0c0c0;
    
  --bg-card: #c0c0c0;
    
  --bg-hover: #d4d0c8;
    
  --bg-hover-strong: #e0dcd4;
    
  --bg-inset: #ffffff;
    

    
  /* -- Text: pure black on silver -- */
    
  --text-primary: #000000;
    
  --text-secondary: #404040;
    
  --text-muted: #808080;
    
  --text-mark: #ffffff;
    

    
  /* -- Borders: classic Win98 3D bevel colors -- */
    
  --border-bright: #ffffff;
    
  --border-mid: #dfdfdf;
    
  --border-deep: #808080;
    
  --border-engrave: #000000;
    
  --border-active: #000080;
    

    
  /* -- Accent: Win98 navy blue -- */
    
  --accent: #000080;
    
  --accent-dim: #000060;
    
  --accent-bright: #0000ff;
    
  --accent-rgb: 0, 0, 128;
    
  --accent-glow: rgba(0, 0, 128, 0.25);
    

    
  /* -- Signal colors (classic Win98 system colors) -- */
    
  --accent-green: #008000;
    
  --accent-blue: #000080;
    
  --accent-purple: #800080;
    
  --accent-pink: #ff00ff;
    
  --accent-yellow: #808000;
    
  --accent-red: #ff0000;
    
  --accent-cyan: #008080;
    

    
  /* -- Form input -- */
    
  --input-bg: #ffffff;
    
  --input-border: #808080;
    

    
  /* -- Misc -- */
    
  --color-inherit: #c0c0c0;
    
  --color-active: #000080;
    
  --overlay-dark: rgba(0, 0, 0, 0.50);
    

    
  /* -- Shadows: authentic Win98 3D bevel (raised) -- */
    
  --shadow-card:
    
    inset 1px 1px 0 #ffffff,
    
    inset -1px -1px 0 #000000,
    
    inset 2px 2px 0 #dfdfdf,
    
    inset -2px -2px 0 #808080;
    
  --shadow-card-hover:
    
    inset 1px 1px 0 #ffffff,
    
    inset -1px -1px 0 #000000,
    
    inset 2px 2px 0 #dfdfdf,
    
    inset -2px -2px 0 #808080;
    
  --shadow-card-hover-light:
    
    inset 1px 1px 0 #ffffff,
    
    inset -1px -1px 0 #000000;
    
  /* 3D bevel (sunken / inset) */
    
  --shadow-inset:
    
    inset 1px 1px 0 #808080,
    
    inset -1px -1px 0 #ffffff,
    
    inset 2px 2px 0 #000000,
    
    inset -2px -2px 0 #dfdfdf;
    
  /* 3D bevel (button) */
    
  --shadow-button:
    
    inset 1px 1px 0 #ffffff,
    
    inset -1px -1px 0 #000000,
    
    inset 2px 2px 0 #dfdfdf,
    
    inset -2px -2px 0 #808080;
    

    
  /* -- No text engrave -- */
    
  --txt-engrave: none;
    

    
  /* -- Scrollbar -- */
    
  --scrollbar-track: #c0c0c0;
    
  --scrollbar-thumb: #c0c0c0;
    
  --scrollbar-thumb-hover: #d4d0c8;
    

    
  /* -- Win98 specific tokens -- */
    
  --win98-titlebar: linear-gradient(90deg, #000080 0%, #1084d0 100%);
    
  --win98-titlebar-inactive: linear-gradient(90deg, #808080 0%, #b0b0b0 100%);
    
  --win98-button-face: #c0c0c0;
    
}
    

    
/* ============================================================
    
   2. Global Base Styles
    
   ============================================================ */
    

    
/* Remove scan lines */
    
body::before,
    
body.light::before {
    
  display: none;
    
}
    

    
/* Page background: solid flat color (no gradient for Win98) */
    
body {
    
  background: var(--bg-primary);
    
  background-attachment: fixed;
    
  -webkit-font-smoothing: auto;
    
  -moz-osx-font-smoothing: auto;
    
  font-family: var(--terminal-font);
    
  font-size: 11px;
    
}
    

    
/* Light mode: teal desktop */
    
body.light {
    
  background: var(--bg-primary);
    
}
    

    
/* Remove all neon glow / text-shadow effects */
    
.host-name,
    
.panel-title,
    
.stat-main-value,
    
.stat-value,
    
.chart-current-value,
    
.status-label,
    
.site-title,
    
.group-header {
    
  text-shadow: none !important;
    
}
    

    
/* ============================================================
    
   3. Brand Accent (Win98 Navy Blue)
    
   ============================================================ */
    

    
.site-title,
    
.group-header,
    
.footer a {
    
  color: var(--accent);
    
}
    

    
/* Site title: pixel font style for retro feel */
    
.site-title {
    
  font-family: 'Silkscreen', var(--terminal-font);
    
  letter-spacing: 1px;
    
}
    

    
/* ============================================================
    
   4. Cards - Win98 Window Style
    
   No blur, no rounded corners, solid 3D beveled borders
    
   ============================================================ */
    

    
.server-card,
    
.chart-card,
    
.host-card,
    
.settings-section,
    
.table-container,
    
.footer,
    
.modal-dialog,
    
body.light .modal-dialog {
    
  background: var(--bg-card);
    
  backdrop-filter: none;
    
  -webkit-backdrop-filter: none;
    
  box-shadow: var(--shadow-card);
    
  border-radius: 0px !important;
    
  border: none;
    
}
    

    
/* Terminal header: Win98 title bar style */
    
.terminal-header {
    
  background: var(--win98-titlebar);
    
  backdrop-filter: none;
    
  -webkit-backdrop-filter: none;
    
  box-shadow: none;
    
  border-radius: 0px !important;
    
  color: #ffffff;
    
  font-weight: bold;
    
  padding: 2px 4px;
    
}
    

    
/* Card hover: highlight border, no fancy glow */
    
.server-card:hover,
    
body.light .server-card:hover {
    
  border-color: var(--accent);
    
  box-shadow:
    
    var(--shadow-card-hover),
    
    0 0 0 2px var(--accent);
    
  transition: box-shadow 0.1s step-end, border-color 0.1s step-end;
    
}
    

    
.chart-card:hover,
    
body.light .chart-card:hover {
    
  box-shadow: var(--shadow-card-hover);
    
  transition: box-shadow 0.1s step-end;
    
}
    

    
/* ============================================================
    
   5. Stats Grid - Raised Win98 Panel
    
   ============================================================ */
    

    
.global-stats,
    
.stats-grid {
    
  background: var(--bg-card);
    
  backdrop-filter: none;
    
  -webkit-backdrop-filter: none;
    
  border-radius: 0px !important;
    
  box-shadow: var(--shadow-card);
    
}
    

    
/* ============================================================
    
   6. Sunken Areas - Win98 Inset / Well Style
    
   Classic sunken 3D border for input areas and displays
    
   ============================================================ */
    

    
.stat-bar-container {
    
  background: var(--bg-inset);
    
  backdrop-filter: none;
    
  -webkit-backdrop-filter: none;
    
  box-shadow: var(--shadow-inset);
    
  border-radius: 0px !important;
    
}
    

    
.view-toggle {
    
  background: var(--bg-card);
    
  backdrop-filter: none;
    
  -webkit-backdrop-filter: none;
    
  box-shadow: var(--shadow-inset);
    
  border-radius: 0px !important;
    
}
    

    
.toggle-btn.active {
    
  background: var(--bg-hover);
    
  color: var(--accent-bright);
    
  box-shadow: var(--shadow-button);
    
  border-radius: 0px !important;
    
}
    

    
/* ============================================================
    
   7. Buttons / Filter Tags - Win98 Raised Button Style
    
   Classic 3D beveled push-buttons
    
   ============================================================ */
    

    
.btn,
    
.filter-tag {
    
  background: var(--win98-button-face);
    
  backdrop-filter: none;
    
  -webkit-backdrop-filter: none;
    
  box-shadow: var(--shadow-button);
    
  border-radius: 0px !important;
    
  border: none;
    
  padding: 4px 12px;
    
  cursor: pointer;
    
  font-family: var(--terminal-font);
    
}
    

    
/* Active button: sunken (pressed) state */
    
.btn:active,
    
.filter-tag:active {
    
  box-shadow: var(--shadow-inset) !important;
    
  padding: 5px 11px 3px 13px;
    
}
    

    
.filter-tag.active {
    
  background: var(--accent);
    
  border-color: var(--accent);
    
  color: #ffffff;
    
  box-shadow: var(--shadow-inset);
    
}
    

    
/* ============================================================
    
   8. Numeric Readouts - Monospace / Pixel Font
    
   ============================================================ */
    

    
.stat-main-value,
    
.stat-value,
    
.stat-sub-info,
    
.chart-current-value,
    
.terminal-table td,
    
.ping-item,
    
.badge {
    
  font-family: var(--mono-font);
    
  font-variant-numeric: tabular-nums;
    
}
    

    
/* ============================================================
    
   9. Input Focus / Modal / Selection / Scrollbar
    
   ============================================================ */
    

    
/* Input focus: simple dotted outline (Win98 style) */
    
.form-input,
    
.form-select,
    
.form-textarea,
    
.toolbar-input {
    
  background: var(--input-bg);
    
  border: none;
    
  box-shadow: var(--shadow-inset);
    
  border-radius: 0px !important;
    
  font-family: var(--terminal-font);
    
}
    

    
.form-input:focus,
    
.form-select:focus,
    
.form-textarea:focus,
    
.toolbar-input:focus {
    
  border-color: var(--accent) !important;
    
  box-shadow: var(--shadow-inset) !important;
    
  outline: 1px dotted var(--accent);
    
  outline-offset: -1px;
    
  transition: none;
    
}
    

    
/* Modal overlay: solid dark, no blur */
    
.modal-overlay {
    
  background: rgba(0, 0, 0, 0.50);
    
  backdrop-filter: none;
    
  -webkit-backdrop-filter: none;
    
}
    

    
/* Modal dialog: Win98 dialog box */
    
.modal-dialog,
    
body.light .modal-dialog {
    
  border: none;
    
  border-radius: 0px !important;
    
  box-shadow: var(--shadow-card);
    
}
    

    
/* Text selection: classic Win98 highlight */
    
::selection {
    
  background: var(--accent);
    
  color: #ffffff;
    
}
    

    
/* Scrollbar: chunky Win98 style */
    
::-webkit-scrollbar {
    
  width: 16px;
    
  height: 16px;
    
}
    

    
::-webkit-scrollbar-track {
    
  background: var(--scrollbar-track);
    
  /* Win98 dithered scrollbar track pattern */
    
  background-image:
    
    linear-gradient(45deg,
    
      var(--bg-primary) 25%, transparent 25%,
    
      transparent 75%, var(--bg-primary) 75%),
    
    linear-gradient(45deg,
    
      var(--bg-primary) 25%, transparent 25%,
    
      transparent 75%, var(--bg-primary) 75%);
    
  background-size: 2px 2px;
    
  background-position: 0 0, 1px 1px;
    
}
    

    
::-webkit-scrollbar-thumb {
    
  background: var(--scrollbar-thumb);
    
  border: none;
    
  border-radius: 0px;
    
  box-shadow:
    
    inset 1px 1px 0 var(--border-bright),
    
    inset -1px -1px 0 var(--border-engrave),
    
    inset 2px 2px 0 var(--border-mid),
    
    inset -2px -2px 0 var(--border-deep);
    
}
    

    
::-webkit-scrollbar-thumb:hover {
    
  background: var(--scrollbar-thumb-hover);
    
}
    

    
::-webkit-scrollbar-button {
    
  display: block;
    
  width: 16px;
    
  height: 16px;
    
  background: var(--scrollbar-thumb);
    
  box-shadow:
    
    inset 1px 1px 0 var(--border-bright),
    
    inset -1px -1px 0 var(--border-engrave),
    
    inset 2px 2px 0 var(--border-mid),
    
    inset -2px -2px 0 var(--border-deep);
    
}
    

    
::-webkit-scrollbar-corner {
    
  background: var(--scrollbar-track);
    
}
    

    
/* ============================================================
    
   10. Win98 Special Effects
    
   Additional retro touches
    
   ============================================================ */
    

    
/* Remove all border-radius globally */
    
*,
    
*::before,
    
*::after {
    
  border-radius: 0px !important;
    
}
    

    
/* Remove all backdrop-filter globally */
    
* {
    
  backdrop-filter: none !important;
    
  -webkit-backdrop-filter: none !important;
    
}
    

    
/* Remove smooth transitions (Win98 was instant) */
    
* {
    
  transition-duration: 0s !important;
    
}
    

    
/* Progress bars: solid color blocks */
    
.stat-bar-fill,
    
.progress-bar {
    
  border-radius: 0px !important;
    
  background: var(--accent-blue);
    
  box-shadow: none;
    
}
    

    
/* Badge / status indicators: square, bold */
    
.badge,
    
.status-indicator {
    
  border-radius: 0px !important;
    
  font-family: var(--terminal-font);
    
  font-weight: bold;
    
}
    

    
/* Links: classic blue underlined */
    
a {
    
  text-decoration: underline;
    
}
    

    
a:hover {
    
  color: var(--accent-bright);
    
}
    

    
/* Table styling: classic grid borders */
    
.terminal-table {
    
  border-collapse: collapse;
    
}
    

    
.terminal-table th,
    
.terminal-table td {
    
  border: 1px solid var(--border-deep);
    
  padding: 2px 6px;
    
}
    

    
.terminal-table th {
    
  background: var(--bg-card);
    
  box-shadow: var(--shadow-button);
    
  font-weight: bold;
    
}
    

    
/* Tooltip: Win98 yellow tooltip */
    
[title]:hover::after,
    
.tooltip {
    
  background: #ffffe1 !important;
    
  color: #000000 !important;
    
  border: 1px solid #000000 !important;
    
  border-radius: 0px !important;
    
  font-family: var(--terminal-font);
    
  box-shadow: none !important;
    
}
    
</style>
* 帖子来源NodeSeek
附近帖子
返回
飞读
随机推荐