--- a +++ b/openomics_web/assets/gallery-style.css @@ -0,0 +1,99 @@ +@import url('https://fonts.googleapis.com/css?family=Open+Sans'); +@import url('https://fonts.googleapis.com/css?family=Dosis'); + +#index-waitfor { + background-color: #DFE8F3; + position: absolute; + width: 100%; + left: 0px; + top: 0px; +} + +#gallery-title { + text-align: center; + font-size: 36pt; + font-family: 'Dosis'; +} + +#gallery-subtitle { + text-align: center; + font-size: 18pt; + font-family: 'Open Sans' +} + +#gallery-apps { + position: static; + margin: 0 auto; + padding: 20px; + text-align: center; + width: calc(100% - 40px);; + height: auto; + min-height: 100vh; +} + +.gallery-app { + position: relative; + display: inline-block; + height: 300px; + width: 25%; + min-width: 275px; + padding: 5px; + margin-right: 20px; + margin-bottom: 10px; + vertical-align: top; + text-align: left; + overflow: hidden; + border-radius: 15px; +} + +.gallery-app-img { + transition-duration: 500ms; + object-fit: cover; + width: 100%; + height: 100%; + transform: scale(1.1); + border-radius: 15px; +} + +.gallery-app-info { + height: calc(100% - 20px); + border-radius: 10px; + padding: 10px; + position: absolute; + top: 10px; + left: 10px; + opacity: 0; +} + +.gallery-app-name { + color: white; + font-family: 'Dosis'; + font-size: 24pt; + line-height: 28pt; + font-weight: 100 !important; +} + +.gallery-app-desc { + max-height: 160px; + width: calc(100% - 30px); + overflow-y: auto; + color: white; + font-family: 'Open Sans'; + font-size: 11pt; + margin: 15px; + margin-top: 25px; +} + +.gallery-app ::-webkit-scrollbar { + display: none; +} + +.gallery-app:hover .gallery-app-info, .gallery-app:hover .gallery-app-link { + opacity: 1; +} + +.gallery-app:hover .gallery-app-img { + -webkit-filter: blur(5px) grayscale(0.5) brightness(30%); +} + +}