|
-
- .main-grid-container{
- height: 100%;
- display: flex;
- flex-flow: row nowrap;
- justify-content: center;
- align-items: center;
- }
- .grid-container{
- display: inline-block;
- }
- .grid{
- display: flex;
- flex-flow: column nowrap;
- justify-content: center;
- align-items: center;
- background: #1e1f29;
- border: 2px solid var(--closed-path);
- overflow: hidden;
- }
- .row{
- display: flex;
- flex-flow: row nowrap;
- height: 31px;
- }
- .row.odd{
- margin-left: 37px;
- }
- .cell{
- margin: 0 1px 0 0;
- width: 36px;
- height: 40px;
- overflow: visible;
- position: relative;
- }
- .cell::after{
- content: "";
- display: block;
- position: absolute;
- background-color: transparent;
- width: 40px;
- height: 40px;
- transition: background-color 0.15s linear;
- clip-path: polygon(20px 0, 38px 10px, 38px 30px, 20px 40px, 2px 30px, 2px 10px);;
- top: 0;
- left: 0;
- }
-
- .cell::before{
- content: "";
- display: block;
- position: absolute;
- background-color: rgba(255, 255, 255, 0.03);
- width: 40px;
- height: 40px;
- clip-path: polygon(20px 0, 38px 10px, 38px 30px, 20px 40px, 2px 30px, 2px 10px);;
- top: 0px;
- left: 0px;
- }
-
- /* Cell States */
- .cell.start::after{
- background-color: var(--start);
- }
- .cell.end::after{
- background-color: var(--end);
- }
- .cell.null::after{
- background-color: transparent;
- }
- .cell.null::before{
- /*transform: scale(1.05);*/
- }
- .cell.open::after{
- background-color: var(--open-path);
- }
- .cell.closed::after{
- background-color: var(--closed-path);
- }
- .cell.path::after{
- background-color: var(--path);
- }
- .cell.wall::after{
- background: linear-gradient(var(--wall) 0px, var(--open-path) 1400px);
- background-attachment: fixed;
- }
- .cell.wall::before{
- background: linear-gradient(var(--wall) 0px, var(--open-path) 1400px);
- background-attachment: fixed;
- }
- .cell.animate{
- animation-name: cell-anim;
- animation-duration: 0.4s;
- }
-
- @keyframes cell-anim {
- 0%{
- transform: scale(1.0);
- z-index: 2;
- }
- 50%{
- transform: scale(1.25);
- }
- 100%{
- transform: scale(1.0);
- z-index: 1;
- }
- }
-
|