You are here

Home » API reference » Colorbox 7.2

colorbox_style.css in Colorbox 7.2

Same filename in this branch
  1. 7.2 styles/plain/colorbox_style.css
  2. 7.2 styles/stockholmsyndrome/colorbox_style.css
  3. 7.2 styles/default/colorbox_style.css
Same filename and directory in other branches
  1. 8 styles/plain/colorbox_style.css
/**
 * Colorbox Core Style:
 * The following CSS is consistent between example themes and should not be altered.
 */
#colorbox,
#cboxOverlay,
#cboxWrapper {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  overflow: hidden;
}
#cboxOverlay {
  position: fixed;
  width: 100%;
  height: 100%;
}
#cboxMiddleLeft,
#cboxBottomLeft {
  clear: left;
}
#cboxContent {
  position: relative;
}
#cboxLoadedContent {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
#cboxTitle {
  margin: 0;
}
#cboxLoadingOverlay,
#cboxLoadingGraphic {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/**
 * These elements are buttons, and may need to have additional
 * styles reset to avoid unwanted base styles.
 */
#cboxPrevious,
#cboxNext,
#cboxClose,
#cboxSlideshow {
  border: 0;
  padding: 0;
  margin: 0;
  overflow: visible;
  width: auto;
  background: none;
  cursor: pointer;
}
/**
 * Avoid outlines on :active (mouseclick),
 * but preserve outlines on :focus (tabbed navigating)
 */
#cboxPrevious:active,
#cboxNext:active,
#cboxClose:active,
#cboxSlideshow:active {
  outline: 0;
}
.cboxPhoto {
  float: left;
  margin: auto;
  border: 0;
  display: block;
  max-width: none;
}
.cboxIframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}
/* Reset box sizing to content-box if theme is using border-box. */
#colorbox,
#cboxContent,
#cboxLoadedContent {
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}

/**
 * Colorbox module plain style:
 * The styles are ordered & tabbed in a way that represents
 * the nesting of the generated HTML.
 */
#cboxOverlay {
  background: #000;
}
#colorbox {
  outline: 0;
}
/* @codingStandardsIgnoreLine */
#cboxWrapper {
}
#cboxContent {
  overflow: hidden;
}
#cboxContent,
.cboxPhoto {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
#cboxError {
  padding: 50px;
  border: 1px solid #ccc;
}
#cboxTitle {
  position: absolute;
  background: rgba(255, 255, 255, 0.7);
  bottom: 0;
  left: 0;
  color: #535353;
  width: 100%;
  padding: 4px 6px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-border-bottom-right-radius: 5px;
  -webkit-border-bottom-left-radius: 5px;
  -moz-border-radius-bottomright: 5px;
  -moz-border-radius-bottomleft: 5px;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
}

#cboxLoadingOverlay {
  background: #fff;
}
#cboxLoadingGraphic {
  background: url(images/loading_animation.gif) no-repeat center center;
}
#cboxClose.cbox-close-plain {
  position: absolute;
  font-size: 20px;
  line-height: 18px;
  text-align: center;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(0, 0, 0, 0.5);
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}
.cbox-close-plain:hover {
  color: rgba(255, 255, 255, 0.9);
  background: rgba(0, 0, 0, 0.8);
}

File

styles/plain/colorbox_style.css
View source 
  1. /**

  2.  * Colorbox Core Style:

  3.  * The following CSS is consistent between example themes and should not be altered.

  4.  */

  5. #colorbox,

  6. #cboxOverlay,

  7. #cboxWrapper {

  8.   position: absolute;

  9.   top: 0;

  10.   left: 0;

  11.   z-index: 9999;

  12.   overflow: hidden;

  13. }

  14. #cboxOverlay {

  15.   position: fixed;

  16.   width: 100%;

  17.   height: 100%;

  18. }

  19. #cboxMiddleLeft,

  20. #cboxBottomLeft {

  21.   clear: left;

  22. }

  23. #cboxContent {

  24.   position: relative;

  25. }

  26. #cboxLoadedContent {

  27.   overflow: auto;

  28.   -webkit-overflow-scrolling: touch;

  29. }

  30. #cboxTitle {

  31.   margin: 0;

  32. }

  33. #cboxLoadingOverlay,

  34. #cboxLoadingGraphic {

  35.   position: absolute;

  36.   top: 0;

  37.   left: 0;

  38.   width: 100%;

  39.   height: 100%;

  40. }

  41. /**

  42.  * These elements are buttons, and may need to have additional

  43.  * styles reset to avoid unwanted base styles.

  44.  */

  45. #cboxPrevious,

  46. #cboxNext,

  47. #cboxClose,

  48. #cboxSlideshow {

  49.   border: 0;

  50.   padding: 0;

  51.   margin: 0;

  52.   overflow: visible;

  53.   width: auto;

  54.   background: none;

  55.   cursor: pointer;

  56. }

  57. /**

  58.  * Avoid outlines on :active (mouseclick),

  59.  * but preserve outlines on :focus (tabbed navigating)

  60.  */

  61. #cboxPrevious:active,

  62. #cboxNext:active,

  63. #cboxClose:active,

  64. #cboxSlideshow:active {

  65.   outline: 0;

  66. }

  67. .cboxPhoto {

  68.   float: left;

  69.   margin: auto;

  70.   border: 0;

  71.   display: block;

  72.   max-width: none;

  73. }

  74. .cboxIframe {

  75.   width: 100%;

  76.   height: 100%;

  77.   display: block;

  78.   border: 0;

  79. }

  80. /* Reset box sizing to content-box if theme is using border-box. */

  81. #colorbox,

  82. #cboxContent,

  83. #cboxLoadedContent {

  84.   -moz-box-sizing: content-box;

  85.   -webkit-box-sizing: content-box;

  86.   box-sizing: content-box;

  87. }

  88. 

  89. /**

  90.  * Colorbox module plain style:

  91.  * The styles are ordered & tabbed in a way that represents

  92.  * the nesting of the generated HTML.

  93.  */

  94. #cboxOverlay {

  95.   background: #000;

  96. }

  97. #colorbox {

  98.   outline: 0;

  99. }

  100. /* @codingStandardsIgnoreLine */

  101. #cboxWrapper {

  102. }

  103. #cboxContent {

  104.   overflow: hidden;

  105. }

  106. #cboxContent,

  107. .cboxPhoto {

  108.   -webkit-border-radius: 5px;

  109.   -moz-border-radius: 5px;

  110.   border-radius: 5px;

  111. }

  112. #cboxError {

  113.   padding: 50px;

  114.   border: 1px solid #ccc;

  115. }

  116. #cboxTitle {

  117.   position: absolute;

  118.   background: rgba(255, 255, 255, 0.7);

  119.   bottom: 0;

  120.   left: 0;

  121.   color: #535353;

  122.   width: 100%;

  123.   padding: 4px 6px;

  124.   -moz-box-sizing: border-box;

  125.   -webkit-box-sizing: border-box;

  126.   box-sizing: border-box;

  127.   -webkit-border-bottom-right-radius: 5px;

  128.   -webkit-border-bottom-left-radius: 5px;

  129.   -moz-border-radius-bottomright: 5px;

  130.   -moz-border-radius-bottomleft: 5px;

  131.   border-bottom-right-radius: 5px;

  132.   border-bottom-left-radius: 5px;

  133. }

  134. 

  135. #cboxLoadingOverlay {

  136.   background: #fff;

  137. }

  138. #cboxLoadingGraphic {

  139.   background: url(images/loading_animation.gif) no-repeat center center;

  140. }

  141. #cboxClose.cbox-close-plain {

  142.   position: absolute;

  143.   font-size: 20px;

  144.   line-height: 18px;

  145.   text-align: center;

  146.   color: rgba(255, 255, 255, 0.7);

  147.   background: rgba(0, 0, 0, 0.5);

  148.   top: 4px;

  149.   right: 4px;

  150.   width: 20px;

  151.   height: 20px;

  152.   -webkit-border-radius: 10px;

  153.   -moz-border-radius: 10px;

  154.   border-radius: 10px;

  155. }

  156. .cbox-close-plain:hover {

  157.   color: rgba(255, 255, 255, 0.9);

  158.   background: rgba(0, 0, 0, 0.8);

  159. }