react-pattern-lock-ts/lib/style.css

PatternLock is a lightweight and customizable React component for implementing a secure and interactive pattern lock system. Perfect for authentication, games, or creative applications, it supports touch and mouse interactions with real-time state updates

.pattern-content-bYMyWeb {
   touch-action: none; /* prevent touch move default */
   position: relative;
   margin-left: auto;
   margin-right: auto;
   border-radius: 7px;
   overflow: hidden;
   width: 70vw;
   height: 70vw;
}

@media (min-width: 600px) {
   .pattern-content-bYMyWeb {
      width: 400px;
      height: 400px;
   }
}

.bullet-content-bYMyWeb {
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-template-rows: repeat(3, 1fr);
   justify-content: center;
   align-items: center;
   gap: 10px;
   z-index: 10;
}

.bullet-bYMyWeb {
   position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
   width: 45px;
   height: 45px;
   border-radius: 500px;
   margin: 0 auto;
   cursor: pointer;
}
.bullet-bYMyWeb::after {
   position: absolute;
   content: '';
   width: 15px;
   height: 15px;
   border-radius: 500px;
   top: 15px;
   left: 15px;
   background: #6b7575;
   animation: animateBorder 0.3s forwards;
}

.active-bullet-bYMyWeb {
   animation: animate 0.5s forwards;
   background: #00b7ff;
}

.active-bullet-bYMyWeb::after,
.active-bullet-bYMyWeb::before {
   position: absolute;
   content: '';
   width: 15px;
   height: 15px;
   border-radius: 500px;
   top: 15px;
   left: 15px;
   background: none;
}
.active-bullet-bYMyWeb::after {
   animation: animateBorderFix 0.6s forwards;
}
.active-bullet-bYMyWeb::before {
   animation: animateBorderFly 0.3s ease-in;
}

.bg-bYMyWeb {
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   background: #15121785;
   backdrop-filter: blur(10px);
}
.bg-z-index-bYMyWeb {
   z-index: 0;
}

@keyframes animate {
   from {
      background: #fff;
   }
   to {
      background: #fff;
      transform: scale(0.25);
   }
}

@keyframes animateBorderFix {
   from {
      border: 0 solid transparent;
   }
   to {
      transform: scale(6);
      border: 1px solid #fff;
   }
}

@keyframes animateBorderFly {
   from {
      border: 0.1px solid #fff;
   }
   to {
      transform: scale(15);
      border: 0 solid transparent;
   }
}