PixivFE/assets/css/bootstrap-style.scss

$font-fallback-serif: "Yu Mincho",
  YuMincho,
  "Hiragino Mincho ProN",
  "Hiragino Mincho Pro",
  "Source Han Serif",
  "BIZ UDMincho Medium",
  "Source Serif Pro",
  "Source Serif",
  "Noto Serif",
  "Times New Roman",
  "Georgia Pro",
  Georgia,
  Simsun,
  PMingLiu,
  AppleMyungjo,
  "Source Han Serif K",
  "Source Han Serif KR",
  "Noto Serif KR",
  Batang,
  serif;

$font-fallback-sans: YuGothic,
  "Hiragino Kaku Gothic Pro",
  Meiryo,
  "Source Han Sans",
  "Source Han Sans JP",
  "Noto Sans CJK JP",
  "Avenir Next",
  Avenir,
  "Source Sans",
  "Noto Sans",
  Roboto,
  Verdana,
  "Pingfang TC",
  "Pingfang HK",
  "Hiragino Sans CNS",
  "Lantinghei TC",
  "Source Han Sans TW",
  "Source Han Sans HK",
  "Noto Sans CJK TC",
  "Microsoft JhengHei",
  "Pingfang SC",
  "Hiragino Sans GB",
  "Lantinghei SC",
  "Source Han Sans CN",
  "Noto Sans CJK SC",
  "Microsoft Yahei",
  DengXian,
  "Apple SD Gothic Neo",
  "Source Han Sans K",
  "Source Han Sans KR",
  "Noto Sans CJK KR",
  "Malgun Gothic",
  sans-serif;

$font-fallback-serif: "Yu Mincho",
  YuMincho,
  "Hiragino Mincho ProN",
  "Hiragino Mincho Pro",
  "Source Han Serif",
  "BIZ UDMincho Medium",
  "Source Serif Pro",
  "Source Serif",
  "Noto Serif",
  "Times New Roman",
  "Georgia Pro",
  Georgia,
  Simsun,
  PMingLiu,
  AppleMyungjo,
  "Source Han Serif K",
  "Source Han Serif KR",
  "Noto Serif KR",
  Batang,
  serif;

/// Bootstrap limits grid-row-columns to 6 by default
/// src: https://github.com/twbs/bootstrap/issues/36691
$grid-row-columns: 7;

/// custom aspect ratio for novels (currently using 3x4)
/// NOTE: "1x1" needs to be specified here even though it's not custom
$aspect-ratios: (
  "1x1": 100%,
  "1x2": calc(2 / 1 * 100%),
  "3x4": calc(4 / 3 * 100%),
  "9x16": calc(16 / 9 * 100%),
);

/// Base twbs imports
@import "./bootstrap/functions";
@import "./bootstrap/variables";
@import "./bootstrap/variables-dark";

/// Define custom colors

// Add a custom color to $theme-colors
$custom-colors: (
  "custom-color": #7aa2f7,
  "charcoal-surface1": #1f1f1f,
  "charcoal-surface2": #3a3a3a,
  "beige": #f5f5dc,
  "off-white": #fff8eb,
);
$theme-colors: map-merge($theme-colors, $custom-colors);

@import "./bootstrap/maps";
@import "./bootstrap/mixins";
@import "./bootstrap/utilities";

/// Enable responsive border classes
/// ref: https://getbootstrap.com/docs/5.3/utilities/api/#enable-responsive
$utilities: map-merge(
  $utilities, (
    "rounded-start": map-merge(
      map-get($utilities, "rounded-start"),
      ( responsive: true ),
    ),
    "rounded-top": map-merge(
      map-get($utilities, "rounded-top"),
      ( responsive: true ),
    ),
    "rounded-end": map-merge(
      map-get($utilities, "rounded-end"),
      ( responsive: true ),
    ),
  )
);

@import "./bootstrap/bootstrap";

/// Custom classes to reduce boilerplate
.custom-btn-secondary {
  @extend .btn;
  @extend .fw-bold;
  @extend .rounded-pill;
  @extend .border-0;
  @extend .py-2;
  @extend .px-3;
  @extend .bg-charcoal-surface2;

  &:hover,
  &:focus,
  &:active {
    background-color: darken(map-get($custom-colors, charcoal-surface2), 2.5%) !important;
    color: white;  // Ensure text remains white on hover
  }
}

.custom-btn-secondary-flex {
  @extend .custom-btn-secondary;
  @extend .flex-fill;
}

.custom-card {
  @extend .card;
  @extend .border-0;
  @extend .rounded-5;
}

.custom-card-body {
  @extend .card-body;
  @extend .border-0;
  @extend .rounded-5;
}

.custom-novel-card {
  @extend .card;
  @extend .h-100;
  @extend .border-0;
  @extend .rounded;
}

.custom-novel-nav {
  max-height: 40vh;
}

.thumbnail-hover-dark img {
  transition: opacity 0.2s;  // Smooth transition when hovering

  &:hover {
    opacity: 0.8;  // Apply darkening effect
  }
}

/// Custom heading sizes (e.g., h1 gets h3 size, h2 gets h4 size, etc.)
h1 {
  font-size: $h3-font-size;
  font-weight: $font-weight-bold;
}

h2 {
  font-size: $h4-font-size;
  font-weight: $font-weight-bold;
  margin-bottom: 1.5rem;
}

h3 {
  font-size: $h5-font-size;
  font-weight: $font-weight-bold;
  margin-bottom: 1rem;
}

h4 {
  font-size: $h6-font-size;
  font-weight: $font-weight-bold;
}

h5 {
  font-weight: $font-weight-bold;
}

h6 {
  font-weight: $font-weight-bold;
}

/// htmx
.bookmark-spinner {
  display: none;
}
.htmx-request .bookmark-spinner {
  display: inline;
}
.htmx-request.bookmark-spinner {
  display: inline;
}

.like-spinner {
  display: none;
}
.htmx-request .like-spinner {
  display: inline;
}
.htmx-request.like-spinner {
  display: inline;
}

/// Hide elements that require JS when scripting is disabled
/// NOTE: This only seems to work when JS is actually disabled browser-wide, not via an extension like uBO
///       See the callout on https://developer.mozilla.org/en-US/docs/Web/CSS/@media/scripting
///       and the CSS spec at https://drafts.csswg.org/mediaqueries-5/#scripting for more on this
///
@media (scripting: none) {
  .js-required {
    display: none !important;
  }
}

/// Novel preference setup
[data-font=mincho][data-font=jp] {
  font-family:
    "Source Han Serif JP",
    "Noto Serif JP",
    $font-fallback-serif;
}

[data-font=mincho][data-font=zh-cn],
[data-font=mincho][data-font=zh-hans] {
  font-family:
    "Songti SC",
    "Source Han Serif SC",
    "Noto Serif SC",
    "Source Han Serif CN",
    $font-fallback-serif;
}

// TODO: technically, zh-hk > zh-hant > zh
// Noto Sans have
// CJK HK
// CJK JP
// CJK KR
// CJK SC
// CJK TC

[data-font=mincho][data-font=zh-tw],
[data-font=mincho][data-font=zh-hk],
[data-font=mincho][data-font=zh-hant] {
  font-family:
    "Songti TC",
    "Source Han Serif TC",
    "Noto Serif TC",
    "Source Han Serif TW",
    "Source Han Serif HK",
    $font-fallback-serif;
}

[data-font=mincho] {
  font-family: $font-fallback-serif;
}

[data-font=gothic] {
  font-family: $font-fallback-sans;
}

[data-view="2"] {
  writing-mode: vertical-rl;
  text-orientation: upright;
  direction: rtl;
}

/// Loading indicator for hx-requests
/// ref: https://stackoverflow.com/questions/63787241/css-how-to-create-an-infinitely-moving-repeating-linear-gradient/63787567#63787567
#loading-indicator {
  height: 4px;

  /// background-size: 200px auto;
  animation: rolling-something 1s linear infinite;
  background-image: repeating-linear-gradient(-0.25turn, #118bee 0vw, transparent 40vw);
  background-size: 80vw auto;

  will-change: opacity;
  transition: opacity 0.3s;
  opacity: 0;

  &.htmx-request {
    opacity: 1;
    transition-duration: 1s;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  }
}

@keyframes rolling-something {
  0% {
    background-position-x: 0vw
  }

  100% {
    background-position-x: 40vw
  }
}