/* ************************************************************************** */ /* */ /* ::: :::::::: */ /* style.css :+: :+: :+: */ /* +:+ +:+ +:+ */ /* By: marvin +#+ +:+ +#+ */ /* +#+#+#+#+#+ +#+ */ /* Created: 2024/08/17 22:12:26 by marvin #+# #+# */ /* Updated: 2024/08/17 22:12:26 by marvin ### ########.fr */ /* */ /* ************************************************************************** */ @keyframes anim1 { 0% { transform: translate(0, -150%); } 100% { transform: translateY(0, 0); } } @keyframes anim2 { 0% { backdrop-filter: blur(0px); background-color: rgba(0, 0, 0, 0); } 100% { backdrop-filter: blur(5px); background-color: rgba(0, 0, 0, 0.8); } } * { margin: 0; padding: 0; font-family: "Poppins", sans-serif; font-weight: 500; font-style: normal; } body { border: 0; padding: 0; width: 100%; height: 100%; background-color: #020202; user-select: none; } .main{ padding-top: 80px; padding-inline: 150px; display: flex; flex-direction: row; gap: 2.6rem; } .skin-select{ /* padding-block: 25px; */ width: 40%; } .popup { display: none; /* La popup est masquée par défaut */ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); backdrop-filter: blur(5px); justify-content: center; align-items: center; z-index: 1000; } .popup-content { background-color: white; padding: 20px; text-align: center; width: 40%; position: relative; box-shadow: 0 0 15px rgba(0, 0, 0, 0.3); } .popup-content form { display: flex; flex-direction: column; } .choose{ display: flex; justify-content: center; gap: 20px; } .select-card{ margin: 30px; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 20px; background-color: #d3d3d3; color: #000; height: 90px; font-size: 1.2em; transition: transform 0.3s ease; } .select-card:hover { transform: scale(1.05); } .switch { position: relative; } .switch p{ color: white; font-size: 1.2em; } .switch label { width: 59px; height: 28px; background-color: #999; position: absolute; top: 0; left: 0; border-radius: 50px; } .switch input[type="checkbox"] { visibility: hidden; } .switch label:after { content: ''; margin-top: 2px; margin-left: 2px; width: 22px; height: 22px; border-radius: 50px; position: absolute; top: 1px; left: 1px; transition: 200ms; background-color: white; } .switch .look:checked + label:after { left: 32px; } .switch .look:checked + label { background-color: rgb(18, 223, 96); } #bar{ margin: 15px; width: 250px; height: 250px; border: 5px solid white; } #goal{ margin: 15px; width: 250px; height: 250px; border: 5px solid white; } #topBar { margin-block: 25px; padding: 0; padding-inline: 50px; display: flex; background-color: #020202; gap: 2rem; align-items: center; justify-content: center; inset-inline: 0; top: 0; } .game-mode { display: flex; justify-content: flex-start; } .mode-card { background-color: #d3d3d3; color: #000; padding: 20px; width: 300px; height: 550px; display: flex; justify-content: center; font-size: 1.2em; transition: transform 0.3s ease; } .mode-card:hover { transform: scale(1.05); } .search-container { display: flex; align-items: center; width: 40%; } .search-input { width: 100%; padding: 10px; border: 2px solid #ccc; font-size: 16px; outline: none; } .search-input:focus { border-color: white; } .search-button { padding: 10px 20px; border: 2px solid white; background-color: #272727; color: white; cursor: pointer; font-size: 16px; } .search-button:hover { background-color: #202020; border-color: #c4c4c4; }