assets/css/main.scss
{{ $params := .Site.Params }}
{{ $local_basic_families := default "" (delimit (apply (default slice $params.local_font.article) "printf" "'%s'" ".") ",") }}
{{ $local_code_families := default "" (delimit (apply (default slice $params.local_font.code) "printf" "'%s'" ".") ",") }}
{{ $basic_families := default $local_basic_families (delimit (apply (default slice $params.font.article) "printf" "'%s'" ".") ",") }}
{{ $code_families := default $local_code_families (delimit (apply (default slice $params.font.code) "printf" "'%s'" "." ) ",") }}

$icon_font: {{ $params.icon_font }};
$reimu_cursor: {{ if reflect.IsMap $params.reimu_cursor }}{{ $params.reimu_cursor.enable }}{{ else }}{{ $params.reimu_cursor }}{{ end }};

$basic-families: {{ $basic_families }};
$code-families: {{ $code_families }};
$local-basic-families: {{ $local_basic_families }};
$local-code-families: {{ $local_code_families }};

{{- $custom_basic_font := .Site.Params.custom_font.article -}}
{{ $_custom_basic_families := slice }}
{{ range $custom_basic_font }}
  {{ $_custom_basic_families = $_custom_basic_families | append (default "" (printf "'%s'" .name)) }}
{{ end }}
{{ $custom_basic_families := delimit $_custom_basic_families "," }}

{{- $custom_code_font := .Site.Params.custom_font.code -}}
{{ $_custom_code_families := slice }}
{{ range $custom_code_font }}
  {{ $_custom_code_families = $_custom_code_families | append (default "" (printf "'%s'" .name)) }}
{{ end }}
{{ $custom_code_families := delimit $_custom_code_families "," }}

$custom-basic-families: {{ default $basic_families $custom_basic_families }};
$custom-code-families: {{ default $code_families $custom_code_families }};

$footer_icon_mask: {{  $params.footer.icon.mask }};
$top_icon_mask: {{  $params.top.icon.mask }};
$sponsor_icon_mask: {{  $params.sponsor.icon.mask }};
$live2d_position: {{ $params.live2d.position }};
$live2d_widgets_position: {{ $params.live2d_widgets.position }};
$top_position: {{ $params.top.position }};
$show_update_time: {{ $params.show_update_time }};

$cursor-default: {{ if reflect.IsMap $params.reimu_cursor }}"{{ $params.reimu_cursor.cursor.default }}"{{ else }}"../images/cursor/reimu-cursor-default.png"{{ end }};
$cursor-pointer: {{ if reflect.IsMap $params.reimu_cursor }}"{{ $params.reimu_cursor.cursor.pointer }}"{{ else }}"../images/cursor/reimu-cursor-pointer.png"{{ end }};
$cursor-text: {{ if reflect.IsMap $params.reimu_cursor }}"{{ $params.reimu_cursor.cursor.text }}"{{ else }}"../images/cursor/reimu-cursor-text.png"{{ end }};

{{ $social := $params.social }}
{{ $social_keys := slice }}
{{ range $key, $value := $social }}
  {{ $social_keys = $social_keys | append $key }}
{{ end }}
{{ $social_keys = $social_keys | append "__dummy__" }}
$social-keys: {{ delimit (apply $social_keys "printf" "'%s'" "." ) "," }};

{{ $share_keys := default slice $params.share }}
{{ $share_keys = $share_keys | append "__dummy__" }}
$share-keys: {{ delimit (apply $share_keys "printf" "'%s'" "." ) "," }};

:root {
  --footer-icon: url({{ $params.footer.icon.url }});
  --top-icon: url({{ $params.top.icon.url }});
  --sponsor-icon: url({{ $params.sponsor.icon.url }});

  @if $reimu_cursor {
    --cursor-default: url(#{$cursor-default}), auto;
    --cursor-pointer: url(#{$cursor-pointer}), pointer;
    --cursor-text: url(#{$cursor-text}), text;
  } @else {
    --cursor-default: auto;
    --cursor-pointer: pointer;
    --cursor-text: text;
  }
}

$light-red-0: {{ default "#ff0000" (index $params.internal_theme.light "--red-0") }};
$light-red-1: {{ default "#ff5252" (index $params.internal_theme.light "--red-1") }};
$light-red-2: {{ default "#ff7c7c" (index $params.internal_theme.light "--red-2") }};
$light-red-3: {{ default "#ffafaf" (index $params.internal_theme.light "--red-3") }};
$light-red-4: {{ default "#ffd0d0" (index $params.internal_theme.light "--red-4") }};
$light-red-5: {{ default "#ffecec" (index $params.internal_theme.light "--red-5") }};
$light-red-5-5: {{ default "#fff3f3" (index $params.internal_theme.light "--red-5-5") }};
$light-red-6: {{ default "#fff7f7" (index $params.internal_theme.light "--red-6") }};

$light-color-red-6-shadow: {{ default "rgba(255, 78, 78, 0.6)" (index $params.internal_theme.light "--color-red-6-shadow") }};
$light-color-red-3-shadow: {{ default "rgba(255, 78, 78, 0.3)" (index $params.internal_theme.light "--color-red-3-shadow") }};

$light-highlight-nav: {{ default "#e6e6e6" (index $params.internal_theme.light "--highlight-nav") }};
$light-highlight-scrollbar: {{ default "#d6d6d6" (index $params.internal_theme.light "--highlight-scrollbar") }};
$light-highlight-background: {{ default "#f7f7f7" (index $params.internal_theme.light "--highlight-background") }};
$light-highlight-current-line: {{ default "#dadada" (index $params.internal_theme.light "--highlight-current-line") }};
$light-highlight-selection: {{ default "#e9e9e9" (index $params.internal_theme.light "--highlight-selection") }};
$light-highlight-foreground: {{ default "#4d4d4d" (index $params.internal_theme.light "--highlight-foreground") }};
$light-highlight-comment: {{ default "#7d7d7d" (index $params.internal_theme.light "--highlight-comment") }};
$light-highlight-red: {{ default "#c8362b" (index $params.internal_theme.light "--highlight-red") }};
$light-highlight-orange: {{ default "#b66014" (index $params.internal_theme.light "--highlight-orange") }};
$light-highlight-yellow: {{ default "#cb911d" (index $params.internal_theme.light "--highlight-yellow") }};
$light-highlight-green: {{ default "#2ea52e" (index $params.internal_theme.light "--highlight-green") }};
$light-highlight-aqua: {{ default "#479d9d" (index $params.internal_theme.light "--highlight-aqua") }};
$light-highlight-blue: {{ default "#1973b8" (index $params.internal_theme.light "--highlight-blue") }};
$light-highlight-purple: {{ default "#7135ac" (index $params.internal_theme.light "--highlight-purple") }};

$dark-red-4: {{ default "rgba(255, 208, 208, 0.5)" (index $params.internal_theme.dark "--red-4") }};
$dark-red-5: {{ default "rgba(255,228,228,0.15)" (index $params.internal_theme.dark "--red-5") }};
$dark-red-5-5: {{ default "rgba(255,236,236,0.05)" (index $params.internal_theme.dark "--red-5-5") }};
$dark-red-6: {{ default "rgba(255, 243, 243, 0.2)" (index $params.internal_theme.dark "--red-6") }};

$dark-highlight-nav: {{ default "#2e353f" (index $params.internal_theme.dark "--highlight-nav") }};
$dark-highlight-scrollbar: {{ default "#454d59" (index $params.internal_theme.dark "--highlight-scrollbar") }};
$dark-highlight-background: {{ default "#22272e" (index $params.internal_theme.dark "--highlight-background") }};
$dark-highlight-current-line: {{ default "#393939" (index $params.internal_theme.dark "--highlight-current-line") }};
$dark-highlight-selection: {{ default "#515151" (index $params.internal_theme.dark "--highlight-selection") }};
$dark-highlight-foreground: {{ default "#cccccc" (index $params.internal_theme.dark "--highlight-foreground") }};
$dark-highlight-comment: {{ default "#999999" (index $params.internal_theme.dark "--highlight-comment") }};
$dark-highlight-red: {{ default "#f47067" (index $params.internal_theme.dark "--highlight-red") }};
$dark-highlight-orange: {{ default "#f69d50" (index $params.internal_theme.dark "--highlight-orange") }};
$dark-highlight-yellow: {{ default "#ffcc66" (index $params.internal_theme.dark "--highlight-yellow") }};
$dark-highlight-green: {{ default "#99cc99" (index $params.internal_theme.dark "--highlight-green") }};
$dark-highlight-aqua: {{ default "#66cccc" (index $params.internal_theme.dark "--highlight-aqua") }};
$dark-highlight-blue: {{ default "#54b6ff" (index $params.internal_theme.dark "--highlight-blue") }};
$dark-highlight-purple: {{ default "#dcbdfb" (index $params.internal_theme.dark "--highlight-purple") }};

$waline: {{ (cond (and $params.valine.enable $params.valine.appId $params.valine.appKey) true false) }};
$valine: {{ (cond (and $params.waline.enable $params.waline.serverURL) true false) }};
$gitalk: {{ (cond (and $params.gitalk.enable $params.gitalk.clientID $params.gitalk.clientSecret) true false) }};
$giscus: {{ (cond $params.giscus.enable true false) }};

@import "_reset";
@import "_variables";
@import "_animation";
@import "_extend";

{{ if $params.icon_font }}
  @import "iconfont";
{{ else }}
  @import "fontawesome";
{{ end }}

@include global-reset;

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
}

input, button {
  margin: 0;
  padding: 0;

  &::-moz-focus-inner {
    border: 0;
    padding: 0;
  }
}

html, body, #container {
  height: 100%;
  scroll-behavior: smooth;
  cursor: var(--cursor-default);
}

body {
  width: 100%;
  background: var(--color-background);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  text-size-adjust: 100%;
  font-family: $font-basic;
  transition: background 1s;
  color: var(--color-default);

  ::selection {
    background: var(--red-1);
    color: #fff;
  }
}

a, .main-nav-icon, .popup-btn-close, button {
  cursor: var(--cursor-pointer) !important;
}

.site-search {
  input {
    cursor: var(--cursor-text) !important;
  }
}

#main {
  span:not(button span), p:not(button p), code, kbd, input, textarea {
    cursor: var(--cursor-text) !important;
  }

  nav {
    span {
      cursor: var(--cursor-default) !important;
    }
  }
}

.code-copy, .code-lang, .code-expand {
  cursor: var(--cursor-pointer) !important;
}

.reimu-powered {
  cursor: var(--cursor-default) !important;
}

#container {
  position: relative;
}

.mobile-nav-on {
  overflow: hidden !important;
}

#wrap {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  transition: 1s;
  background: var(--color-background);
}

#main {
  flex: 1;
  padding: 0 20px;
  max-width: 100%;
  box-sizing: border-box;

  @media #{$mg-large} {
    min-width: 100%;
  }

  @media #{$mg-normal} {
    padding: 0 16px;
  }
}

#content {
  position: relative;
  display: flex;
  padding-top: 8px;
  align-items: stretch;
  max-width: 1350px;
  margin: 0 auto;
  overflow: visible;
}

.sidebar-left,
.sidebar-right {
  #main {
    @media #{$mq-large} {
      padding: 0;
      width: 73%;
      max-width: calc(100% - 268px - 64px);
      margin: 0 16px;
    }
  }
}

#content.sidebar-right {
  flex-direction: row-reverse;
}

#mask {
  z-index: 1000;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 1;
  transition: 0.3s;

  &.hide {
    opacity: 0;
    visibility: hidden;
  }
}

@import "partials/header";
@import "partials/footer";
@import "partials/archive";
@import "partials/post";
@import "partials/pagination";
@import "partials/article";
@import "partials/highlight";
@import "partials/sponsor";
@import "partials/comment";
@import "partials/mobile";
@import "partials/friend";
@import "partials/card";
@import "partials/sidebar";
@import "partials/container";

{{ if $params.top.enable }}
@import "partials/top";
{{ end }}

{{ if $params.algolia_search.enable }}
@import "partials/search";
{{ end }}

{{ if and (reflect.IsSlice $params.widgets) (len $params.widgets) }}
@import "partials/widget";
{{ end }}

{{ if $params.service_worker.enable }}
@import "partials/notification";
{{ end }}

{{ if $params.player.aplayer.enable }}
@import "partials/aplayer";
{{ end }}

{{ if $params.live2d.enable }}
@import "partials/live2d";
{{ end }}

{{ if $params.live2d_widgets.enable }}
@import "partials/live2d-widgets";
{{ end }}

{{ if $params.home_categories.enable }}
@import "partials/home-categories";
{{ end }}

{{ if reflect.IsSlice $params.share }}
@import "partials/share";
{{ end }}

[data-theme="dark"] {
  ::-webkit-scrollbar, ::-webkit-scrollbar-track {
    background-color: #616161;
    border-radius: 10px;
  }
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  background-color: #f5f5f5;
}

::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: #f5f5f5;
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: var(--red-3);
}

{{ if $params.pace.enable }}
.pace {
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.pace-inactive {
  display: none;
}

.pace .pace-progress {
  position: fixed;
  z-index: 2000;
  top: 0;
  right: 100%;
  width: 100%;
  height: 2px;
  background: var(--red-1);
}
{{ end }}