Skip to content

Instantly share code, notes, and snippets.

@shaojunda

shaojunda/gist:b3bec678c6417e58c4103d54dd2c0a41

Created June 20, 2017 04:59
Show Gist options
  • Save shaojunda/b3bec678c6417e58c4103d54dd2c0a41 to your computer and use it in GitHub Desktop.
Save shaojunda/b3bec678c6417e58c4103d54dd2c0a41 to your computer and use it in GitHub Desktop.
Download ZIP
imageViewer
Raw
gistfile1.txt
#imageViewer {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.94);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
z-index: 5;
}
#imageViewer .close {
position: absolute;
bottom: 90px;
width: 40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
opacity: 1;
}
.picContainer {
width: 100%;
display: flex;
flex-direction: column;
}
.framePicContainerOne {
-moz-border-image: url("/images/frame_big_1.png") 20 20 round; /* Old Firefox */
-webkit-border-image: url("/images/frame_big_1.png") 20 20 round; /* Safari and Chrome */
-o-border-image: url("/images/frame_big_1.png") 20 20 round; /* Opera */
padding: 16px;
}
.framePicContainerTwo {
-moz-border-image: url("/images/frame_big_2.png") 20 20 round; /* Old Firefox */
-webkit-border-image: url("/images/frame_big_2.png") 20 20 round; /* Safari and Chrome */
-o-border-image: url("/images/frame_big_2.png") 20 20 round; /* Opera */
padding: 16px;
}
.framePicContainerThree {
-moz-border-image: url("/images/frame_big_3.png") 20 20 round; /* Old Firefox */
-webkit-border-image: url("/images/frame_big_3.png") 20 20 round; /* Safari and Chrome */
-o-border-image: url("/images/frame_big_3.png") 20 20 round; /* Opera */
padding: 16px;
}
.picsize {
margin-top: 9px;
margin-right: 10px;
align-self: flex-end;
}
#imageViewer p {
color: #09419E;
}
#imageViewer > div.title {
position: absolute;
top: 25px;
}
#imageViewer div.photographer {
position: absolute;
bottom: 25px;
}
#loaderContainer {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background: rgba(0, 0, 0, 0.94);
z-index: 9;
}
#loaderContainer .loader {
display: block;
border: 5px solid #f3f3f3; /* Light grey */
border-top: 5px solid #555; /* Blue */
border-radius: 50%;
width: 50px;
height: 50px;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.frame > img {
width: 113px;
height: 70px;
padding: 8px;
}
.frameContainer {
display: flex;
}
@synzhang
Copy link

synzhang commented Jun 20, 2017 •
edited
Loading 

#imageViewer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100%;
  padding-bottom: 130px;
  padding-top: 25px;
  background: rgba(0, 0, 0, 0.94);
  z-index: 5;
}

#imageViewer .close {
  position: absolute;
  bottom: 90px;
  width: 40px;
  height: 40px;
  left: 50%;
  margin-left: -20px;
  float: none;
  opacity: 1;
}

.picContainer {
  width: 100%;
}

.framePicContainerOne {
  -moz-border-image: url("/images/frame_big_1.png") 20 20 round;	/* Old Firefox */
  -webkit-border-image: url("/images/frame_big_1.png") 20 20 round;	/* Safari and Chrome */
  -o-border-image: url("/images/frame_big_1.png") 20 20 round;		/* Opera */
  padding: 16px;
}
.framePicContainerTwo {
  -moz-border-image: url("/images/frame_big_2.png") 20 20 round;	/* Old Firefox */
  -webkit-border-image: url("/images/frame_big_2.png") 20 20 round;	/* Safari and Chrome */
  -o-border-image: url("/images/frame_big_2.png") 20 20 round;		/* Opera */
  padding: 16px;
}
.framePicContainerThree {
  -moz-border-image: url("/images/frame_big_3.png") 20 20 round;	/* Old Firefox */
  -webkit-border-image: url("/images/frame_big_3.png") 20 20 round;	/* Safari and Chrome */
  -o-border-image: url("/images/frame_big_3.png") 20 20 round;		/* Opera */
  padding: 16px;
}

.picsize {
  margin-top: 10px;
  margin-right: 10px;
  text-align: right;
}

#imageViewer p {
  color: #09419E;
}

#imageViewer > .title {
  margin-bottom: 80px;
  text-align: center;
}

#imageViewer .photographer {
  position: absolute;
  bottom: 25px;
  width: 100%;
  text-align: center;
}

#imageViewer .photographer p {
  margin: 0;
}

#loaderContainer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.94);
  z-index: 9;
}

#loaderContainer .loader {
  display: block;
  border: 5px solid #f3f3f3; /* Light grey */
  border-top: 5px solid #555; /* Blue */
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.frame > img {
  width: 113px;
  height: 70px;
  padding: 8px;
}

.frameContainer {
  display: flex;
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment