wordpress-theme-aksrt/assets/css/core/buttons.css

/**
 * AKSRT Buttons — 1:1 legacy Alignment
 *
 * 对齐 legacy .but 系统：
 * - 正常字重 (normal)
 * - 4px 圆角
 * - 灰色默认背景
 * - opacity hover
 */

.btn,
.btn-primary,
.btn-outline,
.btn-ghost,
.btn-danger {
  --btn-h: 34px;
  --btn-px: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: var(--btn-h);
  padding: 0 var(--btn-px);
  font-size: var(--text-sm);
  font-weight: normal; /* legacy .but: normal — was 500 */
  line-height: 1.44;
  border: 1px solid transparent;
  border-radius: var(--radius-btn);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  text-decoration: none;
  box-shadow: none;
  transition: opacity 0.15s ease,
              background 0.15s ease,
              border-color 0.15s ease,
              color 0.15s ease,
              box-shadow 0.15s ease;
}

/* 尺寸变体 */
.btn-sm { --btn-h: 28px; --btn-px: 8px; font-size: var(--text-xs); }
.btn-lg { --btn-h: 44px; --btn-px: 18px; font-size: var(--text-md); }

/* === Default (gray background, like legacy .but default) === */
.btn {
  background: rgba(136, 136, 136, 0.1);
  color: #888;
  border-color: transparent;
}

.btn:hover {
  opacity: 0.8;
  color: #888;
}

/* === Primary — solid theme, opacity hover (no translateY / heavy glow) === */
.btn-primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-color: var(--color-primary);
  box-shadow: none;
}

.btn-primary:hover {
  opacity: 0.8;
  color: var(--color-on-primary);
  background: var(--color-primary);
  border-color: var(--color-primary);
  transform: none;
  box-shadow: none;
}

.btn-primary:active {
  opacity: 1;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.08);
}

/* === Outline === */
.btn-outline {
  background: transparent;
  color: var(--color-ink-2);
  border-color: var(--color-ink-2);
}

.btn-outline:hover {
  opacity: 0.8;
  background: transparent;
  border-color: var(--color-ink-2);
  color: var(--color-ink-2);
}

/* === Ghost === */
.btn-ghost {
  background: transparent;
  color: var(--color-ink-2);
  border-color: transparent;
}

.btn-ghost:hover {
  background: rgba(136, 136, 136, 0.1);
  opacity: 0.8;
}

/* === Danger === */
.btn-danger {
  background: var(--color-error);
  color: #fff;
  border-color: var(--color-error);
}

.btn-danger:hover {
  opacity: 0.8;
  color: #fff;
}

/* === Disabled === */
.btn:disabled,
.btn-primary:disabled,
.btn-outline:disabled,
.btn-ghost:disabled,
.btn-danger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* === Icon button === */
.btn-icon {
  width: var(--btn-h);
  padding: 0;
  justify-content: center;
}

.btn-icon.btn-sm { width: 28px; }
.btn-icon.btn-lg { width: 44px; }

/* === Full width === */
.btn-block {
  display: block;
  width: 100%;
}

/* ============================================================
 * legacy .but / .badg compat layer — 1:1 legacy main.css (.but system)
 * ------------------------------------------------------------
 * Additive: does NOT alter the AKSRT .btn system above. Lets reused
 * legacy-style markup (.but / .badg / .b-* / .jb-* / .c-* / .but-group /
 * .but-average / .toggle-radius) render via the --this-* context-coloring vars.
 * The --this-* DEFAULTS are set on the base rule here (BEFORE the .b-* and .jb-*
 * modifiers) so the cascade resolves colored variants correctly; scoped to
 * .but/.badg (never :root) so .float-btn's own var(--this-*, fallback) stays intact.
 * Uses --focus-color-opacity* tokens with local fallbacks.
 * ============================================================ */

/* Base (legacy .but / .badg) */
.but,
.badg {
  display: inline-block;
  vertical-align: middle;
  padding: 0.3em 0.6em;
  text-align: center;
  font-weight: normal;
  line-height: 1.44;
  border-radius: 4px;
  border: 1px solid var(--this-border);
  box-shadow: var(--this-shadow);
  background: var(--this-bg);
  color: var(--this-color);
  --main-color: var(--this-color);
  --this-bg: rgba(136, 136, 136, 0.1);
  --this-border: transparent;
  --this-shadow: none;
  --this-color: #888;
  text-shadow: 0 0 0;
  transition: 0.15s;
  cursor: pointer;
}

.but a { color: inherit; }

.but .icon,
.but > .fa:not(.fa-angle-right),
.but > i[class*="fa-"]:not(.fa-angle-right) { margin-right: 0.25em; }

.but.block { display: block; }

/* hover / active */
.but:focus,
.but:hover { opacity: 0.8; color: var(--this-color); }
.but:active { --this-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.08); }

/* radius variants */
.but.radius,
.badg.radius,
.radius > .but { border-radius: 50px; padding: 0.3em 1em; }
.but.main-radius,
.badg.main-radius { border-radius: var(--main-radius); }
.but.mini-radius,
.badg.mini-radius { border-radius: var(--mini-radius); }

/* hollow (outline) */
.but.hollow,
.badg.hollow { background: transparent; --this-border: var(--this-color); }
.but.hollow:hover { background: var(--this-bg); }
.badg.hollow[class*='b-'],
.but.hollow[class*='b-'] { background: 0 0; --this-border: var(--this-bg); --this-color: var(--this-bg); }
.but.hollow[class*='b-']:hover { color: #fff; }
.but.hollow.c-white:hover { background: 0 0; --this-color: var(--focus-color); color: var(--focus-color); }

/* circular icon button */
.circular,
.badg.cir,
.but.cir {
  padding: 0;
  border-radius: 5em;
  --this-size: 1.8em;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: var(--this-size);
  min-width: var(--this-size);
}
.circular.radius4,
.badg.cir.radius4,
.but.cir.radius4 { border-radius: 4px; }
/* :not() variants outrank the .but > i[class*="fa-"]:not(.fa-angle-right) margin rule */
.but.cir svg.icon,
.but.cir > .fa,
.but.cir > .fa:not(.fa-angle-right),
.but.cir > i[class*="fa-"]:not(.fa-angle-right) { margin: 0; }

/* button group (joined) */
.but-group { display: inline-flex; }
.but-group > .but { border-radius: 0; margin: 0; }
.but-group > .but:first-of-type { border-radius: 4px 0 0 4px; }
.but-group > .but:last-of-type { border-radius: 0 4px 4px 0; }

/* segmented control (equal-width) */
.but-average { display: flex; border-radius: 4px; overflow: hidden; }
.but-average.inline { display: inline-flex; }
.but-average.radius { border-radius: 100px; }
.but-average.main-radius { border-radius: var(--main-radius); }
.but-average.mini-radius { border-radius: var(--mini-radius); }
.but-average > .but { margin: 0 !important; border-radius: 0; flex: auto; }
.but-average > .but.active { --this-bg: var(--focus-color-opacity1); --this-color: var(--focus-color); }

/* size variants */
.but.but-sm { font-size: 0.9em; padding: 0.1em 0.4em; vertical-align: 0.05em; }
.but.badg-sm,
.badg.badg-sm { font-size: 0.8em; padding: 0 0.2em; vertical-align: 0.1em; min-width: 1.6em; }
.badg.badg-sm.cir { --this-size: 1.6em; }
.padding-lg,
.badg.badg-lg,
.but.padding-lg { padding: 0.5em 2em; }

/* active badge state */
.active.badg,
.active > .badg:not(.vip-tag) { --this-bg: var(--focus-color); --this-color: #fff; }
.active.badg.hollow,
.active > .hollow:not(.vip-tag) { --this-color: var(--focus-color); }

/* toggle-radius (round 29px toggle) — legacy 1:1 */
.toggle-radius {
  background: var(--this-bg);
  width: 29px;
  height: 29px;
  display: inline-block;
  text-align: center;
  border-radius: 100%;
  position: relative;
  vertical-align: text-top;
  --this-bg: var(--main-border-color);
}
/* legacy groups these with abs-* : absolute + vertical center; then pin left/right 0 */
.toggle-radius .fa,
.toggle-radius .icon,
.toggle-radius > i {
  position: absolute;
  top: 50%;
  right: 0 !important;
  left: 0 !important;
  margin: auto;
  transform: translateY(-50%);
  line-height: 1;
  width: 1em;
  height: 1em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* solid color modifiers — set --this-bg; default --this-color white */
.b-gray, .b-theme, .b-red, .b-yellow, .b-blue, .b-blue-2, .b-black,
.b-cyan, .b-green, .b-purple,
.jb-red, .jb-pink, .jb-yellow, .jb-blue, .jb-green, .jb-purple,
.jb-vip1, .jb-vip2 {
  color: var(--this-color);
  background: var(--this-bg);
  --this-color: #fff;
}
.jb-red, .jb-pink, .jb-yellow, .jb-blue, .jb-green, .jb-purple,
.jb-vip1, .jb-vip2 { border: none; }

.b-theme  { --this-bg: var(--focus-color); }
.b-gray   { --this-bg: #818b95; }
.b-red    { --this-bg: #ff5473; }
.b-yellow { --this-bg: #ff6f06; }
.b-cyan   { --this-bg: #08c4c1; }
.b-blue   { --this-bg: #2997f7; }
.b-blue-2 { --this-bg: #5c7cff; }
.b-green  { --this-bg: #12b928; }
.b-purple { --this-bg: #d448f5; }
.b-black  { --this-bg: #121517; }

/* gradient modifiers (legacy .jb-*) */
.jb-red    { --this-bg: linear-gradient(135deg, #fd7a64 10%, #fb2d2d 100%); }
.jb-yellow { --this-bg: linear-gradient(135deg, #f59f54 10%, #ff6922 100%); }
.jb-blue   { --this-bg: linear-gradient(135deg, #59c3fb 10%, #268df7 100%); }
.jb-green  { --this-bg: linear-gradient(135deg, #60e464 10%, #5cb85b 100%); }
.jb-purple { --this-bg: linear-gradient(135deg, #f98dfb 10%, #ea00f9 100%); }
.jb-pink   { --this-bg: linear-gradient(135deg, #ff5e7f 30%, #ff967e 100%); }
.jb-vip1   { --this-bg: linear-gradient(25deg, #eabe7b 10%, #f5e3c7 70%, #edc788 100%); --this-color: #866127; }
.jb-vip2   { --this-bg: linear-gradient(317deg, #4d4c4c 30%, #7b7b7b 70%, #5f5c5c 100%); --this-color: #ddd; }

/* text-color modifiers (legacy .c-*) — set --this-color + light --this-bg */
.c-theme, .c-gray, .c-white, .c-red, .c-red-2, .c-yellow, .c-blue, .c-blue-2,
.c-green, .c-cyan, .c-purple { color: var(--this-color); }
.c-theme  { --this-color: var(--focus-color); --this-bg: var(--focus-color-opacity1); }
.c-gray   { --this-color: #888;     --this-bg: rgba(136, 136, 136, 0.1); }
.c-white  { --this-color: #fff;     --this-bg: rgba(255, 255, 255, 0.1); }
.c-red    { --this-color: #ff5473;  --this-bg: rgba(255, 84, 115, 0.1); }
.c-red-2  { --this-color: #d6064c;  --this-bg: rgba(194, 41, 46, 0.1); }
.c-yellow { --this-color: #ff6f06;  --this-bg: rgba(255, 111, 6, 0.1); }
.c-blue   { --this-color: #2997f7;  --this-bg: rgba(41, 151, 247, 0.1); }