Autopager Separator Style by nukumori-org

/* ==UserStyle==
@name           Autopager Separator Style
@namespace      nukumori.org
@version        1.20240616
@description    mod autopager separator
@author         nukumori.org
@license        CC-BY-NC-SA-4.0
@preprocessor   stylus
@var color      SplitterColor  "Color"   #888888
@var select     SplitterStyle "Style" ["dots:Dots", "roundeddashes:Rounded Dashes", "zigzag:Zig-Zag", "zipper:Zipper"]
==/UserStyle== */

@-moz-document regexp(".*") {
  :root {
    --custom-separator-color: SplitterColor;
  }
  if SplitterStyle == "zigzag" {
    /* CSS Shape: Zig-Zag Line https://css-shape.com/zig-zag-line/ */
    .autopagerize_page_separator{
      --a: 90deg; /* control the angle */
      --s: 9px;   /* size of the zig-zag */
      --b: 3px;   /* control the thickness */

      background: #bf4d28;
        background: var(--custom-separator-color);
      height: calc(var(--b) + var(--s)/(2*tan(var(--a)/2)));
      width: 100%;
      --_g:var(--s) repeat-x conic-gradient(from calc(var(--a)/-2) at bottom, #0000,
       #000 1deg calc(var(--a) - 1deg),#0000 var(--a));
      mask: 50% calc(-1 * var(--b))\/var(--_g) exclude, 50%\/var(--_g);
    }
  } else if SplitterStyle == "roundeddashes" {
    /* CSS Shape: Rounded Dashes https://css-shape.com/rounded-dashes/ */
    .autopagerize_page_separator{
      --s: 6px;       /* control the size */
      --c: #774F38; /* the color */
      --c: var(--custom-separator-color);

      height: var(--s);
      width: 100%;
      --_g: var(--s) top 50%,var(--c) calc(100% - 1px),#0000;
      background: 0\/calc(4*var(--s)) space no-repeat;
      background-image: 
       radial-gradient(circle closest-side at left  var(--_g)),   
       radial-gradient(circle closest-side at right var(--_g)),   
       linear-gradient(90deg,#0000 25%,var(--c) 0 75%,#0000 0);
      border: 0px;
    }
  } else if SplitterStyle == "dots" {
    .autopagerize_page_separator{
      display: block !important;
      border: none !important;
      border-top: 6px dotted var(--custom-separator-color) !important;
      padding: 0 !important;
      background:none !important;
    }
  } else {
    /* AutoPagerize Zipper Style | 20100606 | nukumori.org */
    .autopagerize_page_separator{
      display: block !important;
      border: none !important;
      border-top: 2px dotted #888 !important;
      border-top: 2px dotted var(--custom-separator-color) !important;
      padding: 0 !important;
      margin-bottom: 10px !important;
      background:none !important;
    }
    .autopagerize_page_separator:after{
      content: "";
      display: block;
      width: 100%;
      border-top: 8px solid #888 !important;
      border-top: 8px solid var(--custom-separator-color) !important;
      border-bottom: 2px dotted #888 !important;
      border-bottom: 2px dotted var(--custom-separator-color) !important;
    }
  }
}