☰

《暗黑破壞神 II：獄火重生》物品顏色套用

UserCSS example

/* ==UserStyle==
@name         《暗黑破壞神 II：獄火重生》物品顏色套用
@description  UserCSS example
@namespace    example.com
@author       abc0922001
@version      0.3.0
@preprocessor stylus
@license MIT 
==/UserStyle== */
/* 自定義網頁顏色主題 (Custom Web Colors Theme) */
/* 使用者提供的顏色:
 * #cdbb83 (淺棕黃色) - 用於次要標題和強調區塊
 * #ffb100 (橙黃色) - 用於重要按鈕和突出元素
 * #ffff71 (亮黃色) - 用於高亮內容和提示
 * #7b7bff (淺藍色) - 用於鏈接和互動元素
 * #ffffff (白色) - 用於對比元素
 * #767676 (中灰色) - 用於次要文本
 * #00ff00 (亮綠色) - 用於成功信息和特別提示
 */

/* 全局樣式 - 非侵入式修改 */
:root {
  --custom-primary: #7b7bff;
  --custom-primary-hover: #6a6ae6;
  --custom-secondary: #cdbb83;
  --custom-accent: #ffb100;
  --custom-highlight: #ffff71;
  --custom-text-light: #767676;
  --custom-success: #00ff00;
  --custom-success-dark: #00cc00; /* 暗化版本，提高可讀性 */
  --custom-white: #ffffff;
}

/* 鏈接樣式 - 使用淺藍色 */
a:not([class*="btn"]):not([class*="button"]):not(.no-custom) {
  color: var(--custom-primary) !important;
  transition: color 0.2s ease !important;
}

a:hover:not([class*="btn"]):not([class*="button"]):not(.no-custom) {
  color: var(--custom-primary-hover) !important;
  text-decoration: underline !important;
}

/* 按鈕樣式 - 使用橙黃色 */
button:not(.no-custom),
.button:not(.no-custom),
[class*="btn"]:not(.no-custom),
input[type="submit"]:not(.no-custom),
input[type="button"]:not(.no-custom) {
  border-color: var(--custom-accent) !important;
}

button:hover:not(.no-custom),
.button:hover:not(.no-custom),
[class*="btn"]:hover:not(.no-custom),
input[type="submit"]:hover:not(.no-custom),
input[type="button"]:hover:not(.no-custom) {
  background-color: var(--custom-accent) !important;
  color: var(--custom-white) !important;
}

/* 次要標題 - 使用淺棕黃色 */
h3:not(.no-custom),
h4:not(.no-custom),
h5:not(.no-custom),
h6:not(.no-custom) {
  color: var(--custom-secondary) !important;
}

/* 突出顯示的文本 - 使用亮黃色背景 */
mark:not(.no-custom),
.highlight:not(.no-custom) {
  background-color: var(--custom-highlight) !important;
  color: #333 !important; /* 確保文本在亮背景上可讀 */
}

/* 提示和通知 - 輕微加入亮綠色 */
.alert-success:not(.no-custom),
.success:not(.no-custom),
.notice-success:not(.no-custom) {
  border-left: 4px solid var(--custom-success-dark) !important;
}

/* 次要文本 - 使用中灰色 */
.text-muted:not(.no-custom),
.secondary-text:not(.no-custom),
.meta:not(.no-custom),
small:not(.no-custom) {
  color: var(--custom-text-light) !important;
}

/* 表格頭部 - 淺棕黃色 */
thead th:not(.no-custom) {
  background-color: var(--custom-secondary) !important;
  color: #333 !important;
}

/* 複選框和單選按鈕 - 使用淺藍色 */
input[type="checkbox"]:checked:not(.no-custom),
input[type="radio"]:checked:not(.no-custom) {
  border-color: var(--custom-primary) !important;
  background-color: var(--custom-primary) !important;
}

/* 文本選擇 - 使用亮黃色背景和深色文本 */
::selection {
  background-color: var(--custom-highlight) !important;
  color: #333 !important;
}

/* 分隔線 - 淺棕黃色 */
hr:not(.no-custom) {
  border-color: var(--custom-secondary) !important;
  opacity: 0.5;
}

/* 引用塊 - 使用淺棕黃色邊框 */
blockquote:not(.no-custom) {
  border-left: 4px solid var(--custom-secondary) !important;
  color: inherit !important;
}

/* 導航元素 - 活動項目使用橙黃色 */
nav a.active:not(.no-custom),
.nav-item.active:not(.no-custom),
.current-menu-item:not(.no-custom) {
  color: var(--custom-accent) !important;
  border-color: var(--custom-accent) !important;
}

/* 表單輸入框焦點 - 使用淺藍色 */
input:focus:not(.no-custom),
textarea:focus:not(.no-custom),
select:focus:not(.no-custom) {
  border-color: var(--custom-primary) !important;
  box-shadow: 0 0 0 2px rgba(123, 123, 255, 0.25) !important;
}

/* 進度條 - 使用橙黃色 */
progress:not(.no-custom),
.progress:not(.no-custom) {
  background-color: var(--custom-accent) !important;
}

/* 標籤 - 使用淺棕黃色背景 */
.tag:not(.no-custom),
.badge:not(.no-custom),
.label:not(.no-custom) {
  background-color: var(--custom-secondary) !important;
  color: #333 !important;
}

/* 媒體查詢 - 深色模式適配 */
@media (prefers-color-scheme: dark) {
  /* 深色模式下調整顏色以確保可讀性 */
  :root {
    --custom-primary: #9b9bff; /* 稍微變亮 */
    --custom-primary-hover: #8a8af0;
    --custom-secondary: #d5c797; /* 稍微變亮 */
    --custom-highlight: #ffffaa; /* 稍微變亮 */
    --custom-text-light: #aaaaaa; /* 提高對比度 */
  }
  
  /* 深色模式下的標題顏色 */
  h3:not(.no-custom),
  h4:not(.no-custom),
  h5:not(.no-custom),
  h6:not(.no-custom) {
    color: var(--custom-secondary) !important;
  }
  
  /* 深色模式下的提示和通知 */
  .alert-success:not(.no-custom),
  .success:not(.no-custom),
  .notice-success:not(.no-custom) {
    border-left: 4px solid var(--custom-success-dark) !important;
    background-color: rgba(0, 255, 0, 0.1) !important;
  }
  
  /* 深色模式下的表格頭部 */
  thead th:not(.no-custom) {
    background-color: var(--custom-secondary) !important;
    color: #222 !important;
  }
}

/* 針對特定網站的額外調整可以在這裡添加 */