Moyo/old/moyo_old.css

/* This Version of Moyo used CSS to generate patterns and is now deprecated */

.pattern-checks {
  background-image: linear-gradient(45deg, white 25%, transparent 25%), linear-gradient(-45deg, white 25%, transparent 25%), linear-gradient(45deg, transparent 75%, white 75%), linear-gradient(-45deg, black 75%, white 75%);
  background-size: 10px 10px;
  background-position: 0 0, 0 5px, 5px -5px, -5px 0px;
}

.pattern-grid {
  background-image: linear-gradient(currentColor 1px, transparent 1px), linear-gradient(to right, currentColor 1px, transparent 1px);
  background-size: 4px 4px;
  background-position: -1px;
}

.pattern-grid--medium {
  background-image: linear-gradient(currentColor 1px, transparent 1px), linear-gradient(to right, currentColor 1px, transparent 1px);
  background-size: 12px 12px;
  background-position: -1px;
}

.pattern-dots {
  background-image: radial-gradient(currentColor .25px, transparent .25px);
  background-size: calc(5 * .3px) calc(5 * .3px)
}

.pattern-cross-dots {
  background-image: radial-gradient(currentColor 1px, transparent 1px), radial-gradient(currentColor 1px, transparent 1px);
  background-size: calc(4 * 1px) calc(4 * 1px);
  background-position: 0 0, calc(2 * 1px) calc(2 * 1px)
}

.pattern-vertical-lines {
  background-image: repeating-linear-gradient(to right, currentColor, currentColor 1px, transparent 1px, transparent);
  background-size: 4px 4px
}

.pattern-horizontal-lines {
  background-image: repeating-linear-gradient(0deg, currentColor, currentColor 1px, transparent 1px, transparent);
  background-size: 4px 4px
}

.pattern-diagonal-lines--left {
  background-image: repeating-linear-gradient(45deg, currentColor 0, currentColor 1px, transparent 0, transparent 50%);
  background-size: 6px 6px
}

.pattern-diagonal-lines--right {
  background-image: repeating-linear-gradient(-45deg, currentColor 0, currentColor 1px, transparent 0, transparent 50%);
  background-size: 6px 6px
}

.pattern-vertical-stripes {
  background-image: linear-gradient(90deg, transparent 50%, currentColor 50%);
  background-size: 6px 6px;
  background-position: -2px;
}

.pattern-horizontal-stripes {
  background-image: linear-gradient(0deg, transparent 50%, currentColor 50%);
  background-size: 8px 8px
}

.pattern-diagonal-stripes--left {
  background: repeating-linear-gradient(45deg, transparent, transparent 4px, currentColor 4px, currentColor calc(2 * 4px))
}

.pattern-diagonal-stripes--right {
  background: repeating-linear-gradient(-45deg, transparent, transparent 4px, currentColor 4px, currentColor calc(2 * 4px))
}

.pattern-zigzag {
  background: linear-gradient(135deg, currentColor 25%, transparent 25%) -5px 0, linear-gradient(225deg, currentColor 25%, transparent 25%) -5px 0, linear-gradient(315deg, currentColor 25%, transparent 25%), linear-gradient(45deg, currentColor 25%, transparent 25%);
  background-size: calc(2 * 5px) calc(2 * 5px)
}

.pattern-triangles {
  background-image: linear-gradient(45deg, currentColor 50%, transparent 50%);
  background-size: 8px 8px;
}


.pattern-double-diagonal-stripes {
  background-image: repeating-linear-gradient(-45deg, transparent, transparent 5px, white 5px, white 50%), repeating-linear-gradient(45deg, black, black 5px, gray 5px, gray 50%);
  background-size: 13px 13px;
}


.pattern-quarter-circles {
  background-image: radial-gradient(ellipse farthest-corner at 11px 11px, currentColor, currentColor 50%, transparent 50%);
  background-size: 12px 12px;
}


.pattern-seigaiha {
  background-color: black;
  background-image: radial-gradient(circle at 100% 150%, black 25%, white 25%, white 29%, black 29%, black 36%, white 36%, white 40%, transparent 40%, transparent), radial-gradient(circle at 0 150%, black 25%, white 25%, white 29%, black 29%, black 36%, white 36%, white 40%, transparent 40%, transparent), radial-gradient(circle at 50% 100%, white 10%, black 10%, black 23%, white 23%, white 30%, black 30%, black 43%, white 43%, white 50%, black 50%, black 63%, white 63%, white 70%, transparent 70%, transparent), radial-gradient(circle at 100% 50%, white 5%, black 5%, black 15%, white 15%, white 20%, black 20%, black 30%, white 30%, white 35%, black 35%, black 45%, white 45%, white 50%, transparent 50%, transparent), radial-gradient(circle at 0 50%, white 5%, black 5%, black 15%, white 15%, white 20%, black 20%, black 30%, white 30%, white 35%, black 35%, black 45%, white 45%, white 50%, transparent 50%, transparent);
  background-size: 30px 15px;
}

.pattern-checks-diagonal {
  background-color: transparent;
  background-image: linear-gradient(45deg, currentcolor 25%, transparent 25%, transparent 75%, currentcolor 75%, currentcolor), linear-gradient(-45deg, currentcolor 25%, transparent 25%, transparent 75%, currentcolor 75%, currentcolor);
  background-size: 11px 11px;
}

.pattern-grey-lines {
  background-color: white;
  background-image: linear-gradient(90deg, rgba(0, 0, 0, .5) 50%, transparent 50%),
    linear-gradient(rgba(0, 0, 0, .5) 50%, transparent 50%);
  background-size: 8px 8px;
}

.pattern-wave {
  background-image: radial-gradient(circle at center top, transparent, transparent 4px, currentcolor 4px, currentcolor 5px, transparent 5px, transparent), radial-gradient(circle at right bottom, transparent, transparent 4px, currentcolor 4px, currentcolor 5px, transparent 5px, transparent), radial-gradient(circle at left bottom, transparent, transparent 4px, currentcolor 4px, currentcolor 5px, transparent 5px, transparent);
  background-size: 20px 10px;
}

.pattern-yin-yang {
  background:
    radial-gradient(circle at 50% 59%, white 3%, black 4%, black 11%, rgba(54, 78, 39, 0) 12%, rgba(54, 78, 39, 0)) 50px 0,
    radial-gradient(circle at 50% 41%, black 3%, currentcolor 4%, currentcolor 11%, rgba(210, 202, 171, 0) 12%, rgba(210, 202, 171, 0)) 50px 0,
    radial-gradient(circle at 50% 59%, currentcolor 3%, black 4%, black 11%, rgba(54, 78, 39, 0) 12%, rgba(54, 78, 39, 0)) 0 50px,
    radial-gradient(circle at 50% 41%, black 3%, currentcolor 4%, currentcolor 11%, rgba(210, 202, 171, 0) 12%, rgba(210, 202, 171, 0)) 0 50px,
    radial-gradient(circle at 100% 50%, currentcolor 16%, rgba(210, 202, 171, 0) 17%),
    radial-gradient(circle at 0% 50%, black 16%, rgba(54, 78, 39, 0) 17%),
    radial-gradient(circle at 100% 50%, currentcolor 16%, rgba(210, 202, 171, 0) 17%) 50px 50px,
    radial-gradient(circle at 0% 50%, black 16%, rgba(54, 78, 39, 0) 17%) 50px 50px;
  background-color: grey;
  background-size: 20px 21px;
}

.pattern-circles {
  opacity: 1;
  background-image: radial-gradient(circle at center center, transparent, currentColor), repeating-radial-gradient(circle at center center, black, black, 4px, transparent 8px, transparent 4px);
  background-blend-mode: hue;
}

.pattern-isometric-cubes {
  background-color: white;
  opacity: 1;
  background-image: linear-gradient(30deg, black 12%, transparent 12.5%, transparent 87%, black 87.5%, black), linear-gradient(150deg, black 12%, transparent 12.5%, transparent 87%, black 87.5%, black), linear-gradient(30deg, black 12%, transparent 12.5%, transparent 87%, black 87.5%, black), linear-gradient(150deg, black 12%, transparent 12.5%, transparent 87%, black 87.5%, black), linear-gradient(60deg, grey 25%, transparent 25.5%, transparent 75%, grey 75%, grey), linear-gradient(60deg, grey 25%, transparent 25.5%, transparent 75%, grey 75%, grey);
  background-size: 14px 24px;
  background-position: 0 0, 0 0, 7px 12px, 7px 12px, 0 0, 7px 12px;
}

.pattern-crosses {
  background-color: white;
  opacity: 1;
  background: radial-gradient(circle, transparent 20%, currentColor 20%, currentColor 80%, transparent 80%, transparent), radial-gradient(circle, transparent 20%, currentColor 20%, currentColor 80%, transparent 80%, transparent) 15px 15px, linear-gradient(black 1.2px, transparent 1.2px) 0 -0.6px, linear-gradient(90deg, black 1.2px, currentColor 1.2px) -0.6px 0;
  background-size: 30px 30px, 30px 30px, 15px 15px, 15px 15px;
}

.pattern-paper {
  background-color: white;
  opacity: 1;
  background-image: linear-gradient(black 1.6px, transparent 1.6px), linear-gradient(90deg, black 1.6px, transparent 1.6px), linear-gradient(black 0.8px, transparent 0.8px), linear-gradient(90deg, black 0.8px, white 0.8px);
  background-size: 20px 20px, 20px 20px, 4px 4px, 4px 4px;
  background-position: -1.6px -1.6px, -1.6px -1.6px, -0.8px -0.8px, -0.8px -0.8px;
}

.pattern-zigzag--3d {
  background-color: white;
  opacity: 1;
  background: linear-gradient(135deg, grey 25%, transparent 25%) -8px 0/ 16px 16px, linear-gradient(225deg, black 25%, transparent 25%) -8px 0/ 16px 16px, linear-gradient(315deg, grey 25%, transparent 25%) 0px 0/ 16px 16px, linear-gradient(45deg, black 25%, white 25%) 0px 0/ 16px 16px;
}