body { background-image: url("electro/bg.jpg"); background-size: cover; } body[data-bs-theme="dark"] { --bs-body-bg: #2125296b; } .btn-dark { --bs-btn-bg: #2125296b; } .card { background-color: rgba(37, 41, 45, 40%); } .mino:not(.ghost):not(.locking):not(.disabled) { padding: 1px; position: relative; z-index: 0; border-radius: 4px; background-color: rgba(128, 128, 128, 25%); box-shadow: 0px 0px 8px rgba(128, 128, 128, 75%); } .mino:not(.ghost):not(.locking):before { content: ""; position: absolute; z-index: -1; inset: 0; margin: 1px 1px 0px 0px; padding: 2px; border-radius: 4px; --glint-x: calc(50% + 50% * (var(--piece-column) - var(--column))/10); --glint-y: calc(50% + 50% * (var(--piece-row) - var(--row))/25); background: radial-gradient( at var(--glint-x) var(--glint-y), rgba(204, 238, 247, 0.9) 0%, rgba(10, 159, 218, 0.9) 150%); mask: linear-gradient(#666 0 0) content-box, linear-gradient(#fff 0 0); mask-mode: luminance; mask-composite: intersect; } .ghost.mino { background: transparent; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 3px; box-shadow: 0px 0px 10px rgba(242, 255, 255, 75%); } .moving.mino { box-shadow: 0px 0px 5px rgba(128, 128, 128, 75%); } .moving.mino:not(.locking) { padding: 2px; background: rgba(186, 211, 255, 30%); border: none; border-radius: 4px; } .locking.mino { border-width: 3px; background: rgba(186, 211, 255, 70%); border-color: rgba(242, 255, 255, 0.7); border-radius: 4px; box-shadow: 0px 0px 10px rgba(242, 255, 255, 100%); } .disabled.mino { opacity: 60%; } .disabled.mino:before { opacity: 50%; box-shadow: none; } @keyframes locked-animation { from { opacity: 1; background: white; border-color: white; } } .locked.mino { animation: locked-animation; animation-duration: 0.2s; }