/* myPhotosGalleryV1.0 File : myPhotosGallery.css Author : License : Site : https://... */ /* FICHIER myPhotosGallery.css A INCLURE DANS LE D'UN DOCUMENT HTML AINSI : */ /* LES STYLES DE LA GALLERIE DE PHOTOS */ .myPhotosGallery { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; } .thumb { width: 170px; margin: 10px; } .thumb a { display: block; padding: 10px; background-color: gray; border-radius: 10px; } .thumb a img { width: 100%; height: 100%; } .thumbTitle { font-size: 0.8em; line-height: 1.2em; text-align: center; margin: 0px; height: 51px; min-height: 51px; max-height: 51px; margin-top: 5px; overflow: hidden; } /* LES STYLES DU SLIDER FULLSCREEN DE LA GALLERIE DE PHOTOS (=> S'AFFICHE SI CLIC SUR VIGNETTE) */ #myPhotosGallerySlider { position: fixed; z-index: 2; top: 0; left: 0; width: 100%; height: 100%; background-color: black; display: none; padding: 1%; } .sliderControlsTitle { width: 100%; height: 30%; /*border: 1px solid red;*/ } /* .sliderControls { } */ .sliderFx { text-align: center; color: white; padding: 0 0 5px 0; } .sliderButtonsBar { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; background-color: #b2b2b2; width: 295px; height: 35px; padding: 5px; margin: 0 auto; border-radius: 10px; } .sliderButtonsNav { display: flex; flex-direction: row; flex: 1; text-align: left; } #previous, #next, #playOrPause, #close { cursor: pointer; width: 25px; height: 25px; margin: 0 3px 0 0; } .close { flex: 1; } #close { float: right; } #currentSlideNb { font-weight: bold; color: white; text-align: center; } .sliderTitle { margin-top: 15px; } #currentSlideTitle { font-weight: bold; color: white; overflow: hidden; /*padding: 5px;*/ text-align: center; } #sliderView { position: relative; width: 100%; height: 70%; cursor: pointer; /*border: 1px solid red;*/ /*background-color: black;*/ } .slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; cursor: pointer; } .slide img { max-width: 100%; max-height: 100%; margin: 0 auto; border: 1px solid white; } /* .galeriePhotos { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; } figure { width: 135px; margin: 0 10px 10px 10px; } figure a { display: block; padding: 10px; background-color: gray; border-radius: 10px; } figure a img { width: 100%; height: 100%; } figcaption { font-size: 0.9em; text-align: center; margin: 0px; height: 40px; min-height: 40px; max-height: 40px; overflow: hidden; } */