* { margin: 0; padding: 0; box-sizing: border-box; } .shape-wrapper { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, auto); gap: 30px 10px; padding-bottom: 40px; } #shape-rectangle { width: 80px; height: 48px; } #shape-ellipse { width: 80px; height: 48px; border-radius: 50%; } #shape-diamond { height: 48px; width: 48px; transform: rotate(45deg) translateX(15px); } #shape-text { width: 80px; height: 48px; border-style: dashed; color: #ffffff; font-size: 14px; display: flex; align-items: center; justify-content: center; user-select: none; } .shape { background: transparent; border: 1px solid white; cursor: pointer; } .toolbar { background: #3498db; color: white; padding: 20px; display: flex; flex-wrap: wrap; flex-direction: column; gap: 10px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); position: absolute; width: 300px; left: 0px; top: 0px; height: 100vh; z-index: 9; border-top-right-radius: 30px; border-bottom-right-radius: 30px; } .toolbar-wrapper { padding-bottom: 30px; padding: 20px; } .zoom-wrapper { display: flex; justify-content: center; gap: 15px; padding: 10px 20px !important; } .zoom-wrapper button { background: white; color: #3498db; border: none; border-radius: 50%; width: 50px; height: 50px; font-size: 24px; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); transition: all 0.3s ease; outline: none; } .zoom-wrapper button:hover { background: #2980b9; color: white; transform: scale(1.1); box-shadow: 0 6px 15px rgba(0, 0, 0, 0.25); } .zoom-wrapper button:active { transform: scale(0.95); } /* Fajny efekt przy najechaniu */ .zoom-wrapper button i { transition: transform 0.3s ease; } .zoom-wrapper button:hover i { transform: scale(1.2); }