You are here

Home » API reference » Bootstrap - Photo Gallery 7.3

bootstrap-gallery.css in Bootstrap - Photo Gallery 7.3 

@charset "UTF-8";
/*
* Bootstrap Image Gallery CSS 3.0.0
* https://github.com/bootstrap/Bootstrap-Image-Gallery
*
* Copyright 2013, Sebastian Tschan
* https://bootstrap.net
*
* Licensed under the MIT license:
* http://www.opensource.org/licenses/MIT
*
*
* Modified for Drupal by Ahmad Kharbat
* http://kharbat.me
*
*/



.bootstrap-gallery .modal-body {
    position: relative;
    text-align: center;
    padding: 0 0 56.25% 0;
    overflow: hidden;
    cursor: pointer;
}
.bootstrap-gallery .modal-footer {
    margin: 0;
}
.bootstrap-gallery .modal-body img,
.bootstrap-gallery .modal-body .video-content video,
.bootstrap-gallery .modal-body .video-content iframe,
.bootstrap-gallery .modal-body .video-content a {
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.bootstrap-gallery .modal-body .video-content video {
    display: none;
}
.bootstrap-gallery .modal-body .video-playing video {
    display: block;
}
.bootstrap-gallery .modal-body .video-content iframe {
    width: 100%;
    height: 100%;
    border: none;
    left: 100%;
}
.bootstrap-gallery .modal-body .video-playing iframe {
    left: 0;
}
.bootstrap-gallery .modal-body .video-playing img,
.bootstrap-gallery .modal-body .video-playing a {
    display: none;
}
.bootstrap-gallery .modal-body .video-content a {
    cursor: pointer;
}
.bootstrap-gallery .modal-body .video-content a:after {
    font-family: "Glyphicons Halflings";
    -webkit-font-smoothing: antialiased;
    content: "\e029";
    font-size: 64px;
    line-height: 64px;
    width: 64px;
    height: 64px;
    position: absolute;
    top: 50%;
    margin: -32px 0 0 -32px;
}
.bootstrap-gallery .modal-body .video-loading a {
    background: url(../images/loading.gif) center no-repeat;
    background-size: 64px 64px;
}
.bootstrap-gallery .modal-body .video-loading a:after {
    content: none;
}

@media screen and (min-width: 768px) {
    .bootstrap-gallery .modal-dialog {
        right: auto;
        left: auto;
        width: auto;
        max-width: 900px;
        padding-left: 5%;
        padding-right: 5%;
    }
}

File

css/bootstrap-gallery.css
View source 
  1. @charset "UTF-8";

  2. /*

  3. * Bootstrap Image Gallery CSS 3.0.0

  4. * https://github.com/bootstrap/Bootstrap-Image-Gallery

  5. *

  6. * Copyright 2013, Sebastian Tschan

  7. * https://bootstrap.net

  8. *

  9. * Licensed under the MIT license:

  10. * http://www.opensource.org/licenses/MIT

  11. *

  12. *

  13. * Modified for Drupal by Ahmad Kharbat

  14. * http://kharbat.me

  15. *

  16. */

  17. 

  18. 

  19. 

  20. .bootstrap-gallery .modal-body {

  21.     position: relative;

  22.     text-align: center;

  23.     padding: 0 0 56.25% 0;

  24.     overflow: hidden;

  25.     cursor: pointer;

  26. }

  27. .bootstrap-gallery .modal-footer {

  28.     margin: 0;

  29. }

  30. .bootstrap-gallery .modal-body img,

  31. .bootstrap-gallery .modal-body .video-content video,

  32. .bootstrap-gallery .modal-body .video-content iframe,

  33. .bootstrap-gallery .modal-body .video-content a {

  34.     max-width: 100%;

  35.     max-height: 100%;

  36.     margin: auto;

  37.     position: absolute;

  38.     top: 0;

  39.     right: 0;

  40.     bottom: 0;

  41.     left: 0;

  42. }

  43. .bootstrap-gallery .modal-body .video-content video {

  44.     display: none;

  45. }

  46. .bootstrap-gallery .modal-body .video-playing video {

  47.     display: block;

  48. }

  49. .bootstrap-gallery .modal-body .video-content iframe {

  50.     width: 100%;

  51.     height: 100%;

  52.     border: none;

  53.     left: 100%;

  54. }

  55. .bootstrap-gallery .modal-body .video-playing iframe {

  56.     left: 0;

  57. }

  58. .bootstrap-gallery .modal-body .video-playing img,

  59. .bootstrap-gallery .modal-body .video-playing a {

  60.     display: none;

  61. }

  62. .bootstrap-gallery .modal-body .video-content a {

  63.     cursor: pointer;

  64. }

  65. .bootstrap-gallery .modal-body .video-content a:after {

  66.     font-family: "Glyphicons Halflings";

  67.     -webkit-font-smoothing: antialiased;

  68.     content: "\e029";

  69.     font-size: 64px;

  70.     line-height: 64px;

  71.     width: 64px;

  72.     height: 64px;

  73.     position: absolute;

  74.     top: 50%;

  75.     margin: -32px 0 0 -32px;

  76. }

  77. .bootstrap-gallery .modal-body .video-loading a {

  78.     background: url(../images/loading.gif) center no-repeat;

  79.     background-size: 64px 64px;

  80. }

  81. .bootstrap-gallery .modal-body .video-loading a:after {

  82.     content: none;

  83. }

  84. 

  85. @media screen and (min-width: 768px) {

  86.     .bootstrap-gallery .modal-dialog {

  87.         right: auto;

  88.         left: auto;

  89.         width: auto;

  90.         max-width: 900px;

  91.         padding-left: 5%;

  92.         padding-right: 5%;

  93.     }

  94. }