Add 'css.css'

2019-04-21 10:30:13 -06:00 · 2019-04-21 10:30:13 -06:00 · cf83171889
commit cf83171889
parent 8164c6f2ee
1 changed files with 127 additions and 0 deletions
--- a/css.css
+++ 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;
+}