diff --git a/css.css b/css.css new file mode 100644 index 0000000..91f08fe --- /dev/null +++ b/css.css @@ -0,0 +1,127 @@ +* { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + padding:0; + -webkit-padding:0; + -moz-padding:0; + -ms-padding:0; + margin:0; + -webkit-margin:0; + -moz-margin:0; + -ms-margin:0; +} + +body { + display:flex; + align-items:center; + justify-content:space-around; + background:#000; + height:100%; +} + +#GalleryBox { + display:flex; + width:80%; + border:solid 5px rgba(50,50,50,0.5); + border-radius:5px; +} + +#GalleryList { + display:flex; + flex:1; + justify-content:space-around; + flex-wrap:wrap; + padding:5px; +} + +.Gallery, .thumbnail { + text-align:center; + list-style:none; + height: 200px; + width: 200px; + background:#444; + color:#111; + text-shadow:0 1px 0 #777, 1px 0 0 #777, -1px 0 0 #777, 0 -1px 0 #777; + border:solid 3px #333; + border-radius:10px; + cursor:pointer; + margin:5px; +} + +.Gallery:hover, .thumbnail:hover { + background:#553; + color:#993; + text-shadow:0 1px 0 #111, 1px 0 0 #111, -1px 0 0 #111, 0 -1px 0 #111; + border:double 3px #442; +} + +#ImageGallery_back, #ImageView_back { + position: absolute; + top:0; + left:0; + width: 100%; + height: 100%; + background: rgba(0,0,0,0.3); + display:flex; + justify-content:center; + align-items:center; +} + +#ImageGallery, #ImageView { + display:flex; + width:90%; + background:#000; + border:solid 5px rgba(50,50,50,0.3); + flex-direction:column; +} + +.controls, .Icontrols { + display:flex; + flex-direction:row; + justify-content:space-around; + background:#222; + color:#999; +} + +.button { + background:none; + border-radius:10px; + padding:5px; +} + +.previous:hover, .next:hover { + background:#440; +} + +.close:hover { + background:#400; +} + +#imageList, #ImageContainer { + display:flex; + flex-direction:row; + justify-content:space-around; + align-items:center; + flex-wrap:wrap; + padding:5px; +} + +#ImageView { + height:90%; +} + +#ImageContainer { + padding: 0; + overflow:hidden; + height:100%; + width:100%; +} + +#ImageContainer img { + max-width:100%; + max-height:100%; + height: auto; + width: auto; +} \ No newline at end of file