@charset "utf-8"; /* ## ##### ## ## ## ## ## #### #### ## ##### ## ### ## --- CSS Document ## ## ## ## ## # ## ## ##### ## ## JB Simon MARTINEZ © 2022 - jb.martinez.free.fr --> conception Mobile First : du Mobile vert les grands écrans */ * { /* --- Désigner tous les éléments d'une page en même temps. */ font-family: 'Roboto', sans-serif; } html { scroll-behavior: smooth; /* scroll souple */ } :root { /* --- pseudo-classe, cible le document comme mais sa spécificité sera plus forte */ /* -------------------------------------- * VARIABLES * -------------------------------------- */ /*-- Couleurs --*/ --color-1 :# ; --color-2 :# ; --color-3 :# ; --color-4 :# ; --color-5 :# ; } body { margin: 0; } #capture { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; margin: 0 auto; width: 100%; height: calc(100vh - 5rem); } /*-- canvas --*/ #video, #photo, #menu { width: 225px; height: 300px; border: 5px solid rgba(0,0,0,0.1); } #video { position: relative; background-color: white; } #photo { position: absolute; display: none; background-color: white; } #menu { position: absolute; display: flex; flex-direction: column; justify-content: center; align-items: center; background-image: url('../img/scan.png'); background-repeat: no-repeat; background-position: center center; background-size: contain; opacity: 0.75; } #menu a { display: block; width: 27%; height: 36%; border-radius: 50%; } #image { display: none; } footer { position: absolute; bottom: 0; left: 0; width: 100%; } footer p { padding: 0 1rem; text-align: right; font-size: 12px; } /* VERY LARGE SCREEN : affichage pour les écrans Xlarges (desktop) à partir de 992px */ @media (min-width: 640px) { #capture { width: 600px; height: calc(100vh - 3.5rem); } /*-- canvas --*/ #video, #photo, #menu { width: 300px; height: 225px; } } /* VERY LARGE SCREEN : affichage pour les écrans Xlarges (desktop) à partir de 992px */ @media (min-width: 992px) { #capture { width: 600px; height: calc(100vh - 4.4rem); } /*-- canvas --*/ #video, #photo, #menu { width: 600px; height: 450px; } }