algorithm-visualization/src/assets/css/index.css

html,
body,
.main {
  height: 100%;
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  color: rgb(28, 85, 255);
}
a:hover {
  text-shadow: 0 0 2px #b9b9b9;
}

.main {
  display: grid;
  place-items: center;
}

/* 字体 */
/* refer: https://www.bilibili.com/video/BV1b54y1Z7pu */
@font-face {
  font-family: Emoji;
  src: local("Apple Color Emojiji"), local("Segoe UI Emoji"),
    local("Segoe UI Symbol"), local("Noto Color Emoji");
  unicode-range: U+1F000-1F644, U+203C-3299;
}
body {
  font-family: system-ui, —apple-system, Segoe UI, Rototo, Emoji, Helvetica,
    Arial, sans-serif;
}
/* 衬线字体 */
.font-serif {
  font-family: Georgia, Cambria, "Times New Roman", Times, serif;
}
/* 等宽字体 */
.font-mono {
  font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
    monospace;
}

/* 深色模式 */
:root {
  --color-mode: "light";
  --color-dark: #141414;
  --color-dark-alpha: rgba(0, 0, 0, 0.1);
  --color-dark-filter: brightness(0.5);
  --color-dark-console: #323232;

  /* --color-light: #efefef; */
  --color-light: #b4b4b4;
  --color-light-alpha: rgba(255, 255, 255, 0.9);
  --color-light-filter: none;
  --color-light-console: #cccccc;

  --background: #efefef;
  --text-color: #141414;
  --button-background: var(--color-dark);
  --button-color: var(--color-light);
  --border-color: var(--color-dark-alpha);
  --console-background: var(--color-light-console);
  --filter: var(--color-light-filter);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-mode: "dark";
  }

  :root:not([data-user-color-scheme]) {
    --background: var(--color-dark);
    --text-color: var(--color-light);
    --button-background: var(--color-light);
    --button-color: var(--color-dark);
    --border-color: var(--color-light-alpha);
    --console-background: var(--color-dark-console);
    --filter: var(--color-dark-filter);
  }
}

[data-user-color-scheme="dark"] {
  --background: var(--color-dark);
  --text-color: var(--color-light);
  --button-background: var(--color-light-alpha);
  --button-color: var(--color-dark);
  --border-color: var(--color-light-alpha);
  --console-background: var(--color-dark-console);
  --filter: var(--color-dark-filter);
}

body {
  background: var(--background);
  color: var(--text-color);
  transition: background 500ms ease-in-out, color 200ms ease;
}

/* 导航栏 */
#header {
  width: 100%;
  height: 60px;
  position: fixed;
  top: 0;
  left: 0;
  background-color: var(--background);
  box-shadow: 0 0 5px #888;
  overflow-y: hidden;
  -webkit-user-select: none;
  user-select: none;
}

#header-wapper {
  display: grid;
  height: 100%;
  margin: 0 6vw;
  grid-template-columns: 300px 1fr 300px;
}

.header-logo-image {
  height: 48px;
  margin: auto 0;
  -webkit-user-drag: none;
}

.header-logo-links a {
  margin-left: 12px;
}

/* 正文 */
#container {
  border: 1px solid #999;
  border-radius: 5px;
  box-shadow: 0 0 5px #999;
}

#sidebar {
  display: grid;
  place-items: center;
}

#console-logs {
  margin: 0 auto;
  margin-top: 8px;
  padding: 0 15px;
  height: 100px;
  width: 300px;
  background-color: var(--console-background);
  overflow-y: overlay;
  border-radius: 10px;
}

/* 滚动条样式 refer: https://www.changchenghao.cn/n/679637.html */
#console-logs::-webkit-scrollbar {
  -webkit-appearance: none;
}

#console-logs::-webkit-scrollbar:vertical {
  width: 11px;
}

#console-logs::-webkit-scrollbar-thumb {
  border-radius: 8px;
  border: 2px solid white;
  background-color: rgba(0, 0, 0, 0.5);
}

/* SVG */
/* 调整 SVG 中文本定位点到文本中央 */
svg text {
  text-anchor: middle;
  dominant-baseline: middle;
}

svg {
  -webkit-user-select: none;
  user-select: none;
  filter: var(--filter);
}

/* 元素鼠标悬浮样式 */
svg g:hover > rect {
  fill: #ffafb6;
}

/* 右下角水印样式 */
svg #watermark-r-b {
  opacity: 0.2;
  transition: 0.2s;
}
svg #watermark-r-b:hover {
  opacity: 0.8;
}