/* #### ###### ###### ###### ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## #### ## ## ###### ###### --- JavaScript Document ## ## ## ## ## ## ## #### ###### ## ## ## JB Simon MARTINEZ © 2023 - aggrego tech */ :root { /* --- pseudo-classe, cible le document comme mais sa spécificité sera plus forte */ /* -------------------------------------- * VARIABLES * -------------------------------------- */ /*-- Couleurs --*/ --cookie-color-background: #efefef; --cookie-color-before: #1084c5; --cookie-color-border: #fff; --cookie-color-text: #1084c5; --cookie-color-to-action: #e3a84f; } #cookies { position: fixed; z-index: 5000; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.75); } #cookies a { color: var(--cookie-color-text); } #cookies a:hover { color: var(--cookie-color-to-action); } #cookies .block-cookies { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100vh; } #cookies .form-cookies { display: flex; flex-direction: column; justify-content: center; position: relative; width: 300px; height: 300px; border-left: 5px solid var(--cookie-color-to-action); border-right: 5px solid var(--cookie-color-to-action); background-color: var(--cookie-color-background); transform: translateX(-0.5rem); padding: 1rem 0; border-radius: 10px; } #cookies .title-cookie { font-size: 18px; text-align: center; color: var(--cookie-color-text); } #cookies .text-cookie { font-size: 14px; text-align: justify; padding: 1rem; color: var(--cookie-color-text); } #cookies .group-button-cookie { text-align: center; } #cookies .group-button-cookie button { background-color: var(--cookie-color-before); background-image: linear-gradient( to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.25) ); border-top: none; border-bottom: none; border-left: 2px solid var(--cookie-color-border); border-right: 2px solid var(--cookie-color-border); color: var(--cookie-color-border); font-weight: bold; padding: 0.25rem 0.5rem; } #cookies .group-button-cookie button:hover { background-color: var(--cookie-color-before); background-image: linear-gradient( to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.25) ); border-top: none; border-bottom: none; border-left: 2px solid var(--cookie-color-to-action); border-right: 2px solid var(--cookie-color-to-action); color: var(--cookie-color-to-action); } #cookies .group-button-cookie button:active { background-color: var(--cookie-color-before); background-image: linear-gradient( to bottom, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0) ); border-top: none; border-bottom: none; border-left: 2px solid var(--cookie-color-to-action); border-right: 2px solid var(--cookie-color-to-action); color: var(--cookie-color-to-action); } #cookies .group-button-cookie button:nth-child(1) { margin-right: 1rem; } /* WIDE SCREEN : Tablette et Ordinateur (desktop) à partir de 992px */ @media (min-width: 992px) { #cookies .form-cookies { width: 50%; height: 20%; max-width: 400px; max-height: 250px; *transform: translateX(0); } }