예제 소스

OmokBoard.module.css

.frame {
  width: 100%;
  aspect-ratio: 1;
  padding: 2.8%;
  border-radius: 12px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.1), transparent 42%),
    linear-gradient(180deg, #c9b08a, #a8895e 55%, #94754a);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 8px 22px rgba(0, 0, 0, 0.4);
}

.grid {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
}

.lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.lines line {
  stroke: #4a3828;
  stroke-width: 0.045;
}

.cell {
  position: relative;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  cursor: pointer;
  z-index: 1;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.cell:disabled {
  cursor: default;
  pointer-events: none;
}

.star {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16%;
  height: 16%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #2f2418;
}

.stone {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 84%;
  height: 84%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}

.black {
  background: radial-gradient(circle at 35% 30%, #555, #111 55%, #000);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.white {
  background: radial-gradient(circle at 35% 30%, #fff, #e8e8e8 55%, #cfcfcf);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.ghost {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 70%;
  height: 70%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 2px solid var(--accent);
  background: rgba(201, 154, 107, 0.28);
}

.ban {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34%;
  height: 34%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1.5px solid rgba(160, 60, 50, 0.7);
  background: rgba(160, 60, 50, 0.18);
  pointer-events: none;
}

.mark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22%;
  height: 22%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #c0392b;
  z-index: 2;
  pointer-events: none;
}