You are here

Home » API reference » Facebook Album 7.3

facebook_album.css in Facebook Album 7.3

Same filename and directory in other branches
  1. 8 css/facebook_album.css
  2. 7 css/facebook_album.css
  3. 7.2 css/facebook_album.css
.fba-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: 10px;
  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. .fba-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. 

  31. .album-wrapper,

  32. .photo-wrapper {

  33.   display: inline-block;

  34.   margin: 10px;

  35.   vertical-align: top;

  36. }

  37. 

  38. .album-text .fb-link {

  39.   font-size: 1.885em;

  40.   font-weight: 300;

  41.   line-height: 1em;

  42.   margin: 0;

  43.   padding: 0 0 4px;

  44.   cursor: pointer;

  45.   text-decoration: none;

  46. }

  47. .fb-album-footer {

  48.   color: #808080;

  49.   font-weight: bold;

  50.   font-size: 10px;

  51. }

  52. 

  53. .fb-album-header {

  54.   font-size: 14px;

  55. }

  56. 

  57. .fb-album-header p {

  58.   color: #333;

  59.   font-size: 14px;

  60. }

  61. .fb-link {

  62.   cursor: pointer;

  63. }

  64. 

  65. .fb-loading-icon {

  66.   margin-top: 16px;

  67.   text-align: center;

  68. }

  69. 

  70. 

  71. /*

  72.  * Credit to tobiasahlin.com/spinkit

  73.  */

  74. 

  75. .spinner {

  76.   width: 50px;

  77.   height: 50px;

  78.   text-align: center;

  79.   font-size: 10px;

  80.   margin: 0 auto;

  81. }

  82. 

  83. .spinner > div {

  84.   background-color: #ccc;

  85.   height: 100%;

  86.   width: 7px;

  87.   margin: 0 3px 0 0;

  88.   display: inline-block;

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

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

  91. }

  92. 

  93. .spinner .rect2 {

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

  95.   animation-delay: -1.1s;

  96. }

  97. 

  98. .spinner .rect3 {

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

  100.   animation-delay: -1.0s;

  101. }

  102. 

  103. .spinner .rect4 {

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

  105.   animation-delay: -0.9s;

  106. }

  107. 

  108. .spinner .rect5 {

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

  110.   animation-delay: -0.8s;

  111. }

  112. 

  113. @-webkit-keyframes stretchdelay {

  114.   0%, 40%, 100% { -webkit-transform: scaleY(0.4) }

  115.   20% { -webkit-transform: scaleY(1.0) }

  116. }

  117. 

  118. @keyframes stretchdelay {

  119.   0%, 40%, 100% {

  120.     transform: scaleY(0.4);

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

  122.   }  20% {

  123.        transform: scaleY(1.0);

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

  125.      }

  126. }