You are here

Home » API reference » Facebook Album 8

facebook_album.css in Facebook Album 8

Same filename and directory in other branches
  1. 7.3 css/facebook_album.css
  2. 7 css/facebook_album.css
  3. 7.2 css/facebook_album.css
.facebook-album-container {
  margin: 0 auto;
  text-align: center;
}
.album-thumb,
.photo-thumb {
  background: none repeat scroll 0 0 #ffffff;
  border: 1px solid #cccccc;
  display: inline-block;
  outline: medium none;
  padding: 4px;
  position: relative;
  vertical-align: bottom;
}
.album-thumb {
  margin-bottom: 10px;
}
.album-thumb i,
.photo-thumb i {
  background: #eee center no-repeat;
  display: block;
  background-size: cover;
}

.fb-album-photo-container,
.fb-album-cover-container {
  width: 100%;
  margin-bottom: 1em;
}
.album-wrapper,
.photo-wrapper {
  display: inline-block;
  margin: 2%;
  vertical-align: top;
}
.album-text .fb-link {
  font-size: 1.885em;
  font-weight: 300;
  line-height: 1em;
  margin: 0;
  padding: 0 0 4px;
  cursor: pointer;
  text-decoration: none;
}
.fb-album-footer {
  color: #808080;
  font-weight: bold;
  font-size: 10px;
}
.fb-album-header {
  font-size: 14px;
}
.fb-album-header p {
  color: #333;
  font-size: 14px;
}
.fb-link {
  cursor: pointer;
}
.fb-loading-icon {
  margin-top: 16px;
  text-align: center;
}

/*
 * Credit to tobiasahlin.com/spinkit
 */
.spinner {
  width: 50px;
  height: 50px;
  text-align: center;
  font-size: 10px;
  margin: 0 auto;
}
.spinner > div {
  background-color: #ccc;
  height: 100%;
  width: 7px;
  margin: 0 3px 0 0;
  display: inline-block;
  -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
  animation: stretchdelay 1.2s infinite ease-in-out;
}
.spinner .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}
.spinner .rect3 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}
.spinner .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}
.spinner .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

@-webkit-keyframes stretchdelay {
  0%, 40%, 100% {
    -webkit-transform: scaleY(0.4)
  }
  20% {
    -webkit-transform: scaleY(1.0)
  }
}

@keyframes stretchdelay {
  0%, 40%, 100% {
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }
  20% {
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}

File

css/facebook_album.css
View source 
  1. .facebook-album-container {

  2.   margin: 0 auto;

  3.   text-align: center;

  4. }

  5. .album-thumb,

  6. .photo-thumb {

  7.   background: none repeat scroll 0 0 #ffffff;

  8.   border: 1px solid #cccccc;

  9.   display: inline-block;

  10.   outline: medium none;

  11.   padding: 4px;

  12.   position: relative;

  13.   vertical-align: bottom;

  14. }

  15. .album-thumb {

  16.   margin-bottom: 10px;

  17. }

  18. .album-thumb i,

  19. .photo-thumb i {

  20.   background: #eee center no-repeat;

  21.   display: block;

  22.   background-size: cover;

  23. }

  24. 

  25. .fb-album-photo-container,

  26. .fb-album-cover-container {

  27.   width: 100%;

  28.   margin-bottom: 1em;

  29. }

  30. .album-wrapper,

  31. .photo-wrapper {

  32.   display: inline-block;

  33.   margin: 2%;

  34.   vertical-align: top;

  35. }

  36. .album-text .fb-link {

  37.   font-size: 1.885em;

  38.   font-weight: 300;

  39.   line-height: 1em;

  40.   margin: 0;

  41.   padding: 0 0 4px;

  42.   cursor: pointer;

  43.   text-decoration: none;

  44. }

  45. .fb-album-footer {

  46.   color: #808080;

  47.   font-weight: bold;

  48.   font-size: 10px;

  49. }

  50. .fb-album-header {

  51.   font-size: 14px;

  52. }

  53. .fb-album-header p {

  54.   color: #333;

  55.   font-size: 14px;

  56. }

  57. .fb-link {

  58.   cursor: pointer;

  59. }

  60. .fb-loading-icon {

  61.   margin-top: 16px;

  62.   text-align: center;

  63. }

  64. 

  65. /*

  66.  * Credit to tobiasahlin.com/spinkit

  67.  */

  68. .spinner {

  69.   width: 50px;

  70.   height: 50px;

  71.   text-align: center;

  72.   font-size: 10px;

  73.   margin: 0 auto;

  74. }

  75. .spinner > div {

  76.   background-color: #ccc;

  77.   height: 100%;

  78.   width: 7px;

  79.   margin: 0 3px 0 0;

  80.   display: inline-block;

  81.   -webkit-animation: stretchdelay 1.2s infinite ease-in-out;

  82.   animation: stretchdelay 1.2s infinite ease-in-out;

  83. }

  84. .spinner .rect2 {

  85.   -webkit-animation-delay: -1.1s;

  86.   animation-delay: -1.1s;

  87. }

  88. .spinner .rect3 {

  89.   -webkit-animation-delay: -1.0s;

  90.   animation-delay: -1.0s;

  91. }

  92. .spinner .rect4 {

  93.   -webkit-animation-delay: -0.9s;

  94.   animation-delay: -0.9s;

  95. }

  96. .spinner .rect5 {

  97.   -webkit-animation-delay: -0.8s;

  98.   animation-delay: -0.8s;

  99. }

  100. 

  101. @-webkit-keyframes stretchdelay {

  102.   0%, 40%, 100% {

  103.     -webkit-transform: scaleY(0.4)

  104.   }

  105.   20% {

  106.     -webkit-transform: scaleY(1.0)

  107.   }

  108. }

  109. 

  110. @keyframes stretchdelay {

  111.   0%, 40%, 100% {

  112.     transform: scaleY(0.4);

  113.     -webkit-transform: scaleY(0.4);

  114.   }

  115.   20% {

  116.     transform: scaleY(1.0);

  117.     -webkit-transform: scaleY(1.0);

  118.   }

  119. }