#photoContainer { margin: 0 5%; } .photos-folder-container { width: 100%; border: 1px solid #5a5a5a; border-radius: 5px; } .photos-folder-container a:hover, .photos-path a:hover, #downloadAlbum:hover { box-shadow: 0 0 10px #000; background-color: #635247; } .photos-folder-container a { text-decoration: none; border-radius: 5px; width: 200px; height: 120px; padding: 10px; margin: 5px; position: relative; display: inline-flex; align-items: center; justify-content: center; background-color: #1a1a1a; box-shadow: 0 0 4px #000; transition: 0.3s; } #folderTitle { position: absolute; top: 10px; color: #73b795; font-size: 25px; text-shadow: 0 0 5px #1c1c1c; } #folderPhotos, #folderAlbums { color: #808080; font-size: 18px; text-shadow: 0 0 5px #1c1c1c; } #folderPhotos { position: absolute; bottom: 30px; } #folderAlbums { position: absolute; bottom: 0; } .photos img { display: inline-flex; width: 200px; opacity: 1; cursor: pointer; transition: 0.3s; padding: 0; margin: 10px 2px 0 2px; border-radius: 0.5rem; } .photos img:hover { box-shadow: 0 0 5px #000; -webkit-filter: blur(1px); /* Safari 6.0 - 9.0 */ filter: blur(1px); opacity: 0.5; border-radius: 1rem; } .photos img:active { box-shadow: 0 0 10px #000; } .photos-path { width: 100%; display: flex; list-style: none; padding: 0; line-height: 15px; } .photos-path a { font-size: 15px; text-decoration: none; border-radius: 2px; padding: 5px; margin: 5px; display: inline-flex; align-items: center; justify-content: center; background-color: #1a1a1a; box-shadow: 0 0 4px #000; text-shadow: 0 0 5px #1c1c1c; transition: 0.3s; color: #e0e0e0; } #imgBig { margin: 0; padding: 0; position: fixed; z-index: 6; left: 50%; top: 50%; max-width: none; max-height: none; transform: translate(-50%, -50%); box-shadow: 0 0 5px #000; } #photoButtonsContainer { position: fixed; display: block; z-index: 10; /* Block selection of buttons (useful for mobile devices) */ -webkit-user-select: none; /* Chrome all / Safari all */ -moz-user-select: none; /* Firefox all */ -ms-user-select: none; /* IE 10+ */ } #rightButton, #leftButton { transition: 0.2s; position: fixed; top: 0; width: 10%; background-color: rgba(255, 255, 255, 0.05); height: 100%; display: flex; font-size: 5rem; cursor: pointer; } #rightButton { right: 0; } #leftButton { left: 0; } #closeButton, #downloadButton { transition: 0.2s; position: fixed; color: white; display: flex; font-size: 3rem; top: 0; width: 80px; height: 80px; background-color: rgba(255, 255, 255, 0.05); cursor: pointer; } #closeButton { right: 10%; } #downloadButton { right: calc(10% + 80px); } #rightButton:hover, #leftButton:hover, #closeButton:hover, #downloadButton:hover { background-color: rgba(255, 255, 255, 0.2); } #rightButton i, #leftButton i, #closeButton i, #downloadButton i { margin: auto; } #rightButton:active, #leftButton:active, #closeButton:active, #downloadButton:active { background-color: rgba(255, 255, 255, 0.4); } #loadingIconContainer { color: white; width: 100%; height: 100%; z-index: 8; position: fixed; display: flex; font-size: 5rem; } #loadingIconContainer i { margin: auto; } #closeBack { position: fixed; width: 100%; height: 100%; background-color: #1c1c1c; } #photoOverlay { top: 0; left: 0; position: fixed; width: 100%; height: 100%; z-index: 5; } #downloadAlbum { height: 70px; width: 200px; display: inline-flex; position: relative; align-items: center; justify-content: center; background-color: #1a1a1a; box-shadow: 0 0 4px #000; text-shadow: 0 0 5px #1c1c1c; transition: 0.3s; color: #28ca2a; cursor: pointer; margin: 5px; } #downloadText { margin-top: 5px; position: absolute; top: 0; } #albumPhotoCount { color: #929ba8; margin-bottom: 5px; position: absolute; bottom: 0; } #downloadText svg { width: 24px; height: 24px; margin-right: 5px; } @media screen and (max-width: 768px) { #rightButton, #leftButton { width: 80px; font-size: 3rem; } #closeButton { right: 50%; transform: translateX(100%); } #downloadButton { right: 50%; } } @media screen and (max-width: 576px) { .photos-folder-container a { min-width: 100px; height: 70px; } #folderTitle { position: absolute; top: 5px; color: #73b795; font-size: 15px; text-shadow: 0 0 5px #1c1c1c; } #folderPhotos, #folderAlbums { color: #808080; font-size: 10px; } #folderPhotos { position: absolute; bottom: 20px; } #folderAlbums { position: absolute; bottom: 0; } .photos img { width: 140px; } }