You are here

flickr.css in Flickr 7

Same filename and directory in other branches
  1. 5 flickr.css
  2. 6 flickr.css
/**
 * The CSS values that are wrapped in /*variable comments are intended for use
 * by https://www.drupal.org/project/style_settings. Enable that module to
 * have those CSS variables exposed in the settings UI.
 */

.flickr-photo-img {
  vertical-align: text-bottom;
}

.flickr-photo-box {
  float: left; /* LTR */
  width: 260px;
  height: 260px;
  padding: 10px;
  text-align: center;
}

.flickr-photoset-img {
  vertical-align: text-bottom;
}

.flickr-photoset-box {
  float: left; /* LTR */
  padding: 10px;
  text-align: center;
}

span.flickr-wrap,
span.flickr-photoset-single {
  position: relative;
  display: inline-block;
  margin: 0 5px 5px 0; /* LTR */
  vertical-align: top;
}

span.flickr-credit {
  display: block;
  overflow: hidden;
  padding: 0 0 4px 4px;
  font-size: /*variable:flickr_capsize*/80%/*variable*/;
  line-height: 100%;
}

.flickr-slideshow {
  position: relative;
  overflow: hidden;
  width: /*variable:flickr_sswidth*/100%/*variable*/;
  height: 0;
  /*The percentage is the height/width ratio. Defaults to 3:4.*/
  padding-bottom: /*variable:flickr_slideshow_ratio*/75%/*variable*/;
}

.flickr-slideshow object {
  position: absolute;
  top: 0;
  left: 0; /* LTR */
  max-width: 100%;
  max-height: 100%;
}

.flickr-block-photosets .flickr-block-photoset {
  margin-top: 0.5em;
  padding-top: 0.5em;
  border-top: 1px solid #dfdfdf;
}

span.floatleft {
  float: left; /* LTR */
  margin: 5px 5px 0 0; /* LTR */
}
span.floatright {
  float: right; /* LTR */
  margin: 5px 0 0 10px; /* LTR */
}

span.flickr-tags {
  font-style: italic;
}

.flickr-wrap,
.flickr-wrap img,
.flickr-wrap .flickr-credit {
  /*See http://stackoverflow.com/a/11390432/523688*/
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  max-width: 100%;
}

div.flickr-photoset {
  clear: both;
}

span.flickr-empty {
  display: inline-block;
  margin: 10px;
}

.page-flickr-sets h1#page-title {
  display: none;
}

.tips span.ctools-toggle {
  float: none !important;
}

span.grayed-out,
.form-disabled label,
input[disabled=disabled] label {
  color: darkgray;
}

span.grayed-out-help {
  color: #666;
}

.flickr-form-align {
  text-align: right; /* LTR */
}

.form-item.form-type-textfield.form-item-flickr-sswratio {
  float: left; /* LTR */
}

/*Puts a preview template next to the preview itself.*/
.flickr-preview {
  float: left; /* LTR */
  margin: 0 12px 15px 0; /* LTR */
  padding: 10px;
  border: 1px solid #ccc;
}

File

flickr.css
View source
  1. /**
  2. * The CSS values that are wrapped in /*variable comments are intended for use
  3. * by https://www.drupal.org/project/style_settings. Enable that module to
  4. * have those CSS variables exposed in the settings UI.
  5. */
  6. .flickr-photo-img {
  7. vertical-align: text-bottom;
  8. }
  9. .flickr-photo-box {
  10. float: left; /* LTR */
  11. width: 260px;
  12. height: 260px;
  13. padding: 10px;
  14. text-align: center;
  15. }
  16. .flickr-photoset-img {
  17. vertical-align: text-bottom;
  18. }
  19. .flickr-photoset-box {
  20. float: left; /* LTR */
  21. padding: 10px;
  22. text-align: center;
  23. }
  24. span.flickr-wrap,
  25. span.flickr-photoset-single {
  26. position: relative;
  27. display: inline-block;
  28. margin: 0 5px 5px 0; /* LTR */
  29. vertical-align: top;
  30. }
  31. span.flickr-credit {
  32. display: block;
  33. overflow: hidden;
  34. padding: 0 0 4px 4px;
  35. font-size: /*variable:flickr_capsize*/80%/*variable*/;
  36. line-height: 100%;
  37. }
  38. .flickr-slideshow {
  39. position: relative;
  40. overflow: hidden;
  41. width: /*variable:flickr_sswidth*/100%/*variable*/;
  42. height: 0;
  43. /*The percentage is the height/width ratio. Defaults to 3:4.*/
  44. padding-bottom: /*variable:flickr_slideshow_ratio*/75%/*variable*/;
  45. }
  46. .flickr-slideshow object {
  47. position: absolute;
  48. top: 0;
  49. left: 0; /* LTR */
  50. max-width: 100%;
  51. max-height: 100%;
  52. }
  53. .flickr-block-photosets .flickr-block-photoset {
  54. margin-top: 0.5em;
  55. padding-top: 0.5em;
  56. border-top: 1px solid #dfdfdf;
  57. }
  58. span.floatleft {
  59. float: left; /* LTR */
  60. margin: 5px 5px 0 0; /* LTR */
  61. }
  62. span.floatright {
  63. float: right; /* LTR */
  64. margin: 5px 0 0 10px; /* LTR */
  65. }
  66. span.flickr-tags {
  67. font-style: italic;
  68. }
  69. .flickr-wrap,
  70. .flickr-wrap img,
  71. .flickr-wrap .flickr-credit {
  72. /*See http://stackoverflow.com/a/11390432/523688*/
  73. -webkit-box-sizing: border-box;
  74. -moz-box-sizing: border-box;
  75. box-sizing: border-box;
  76. max-width: 100%;
  77. }
  78. div.flickr-photoset {
  79. clear: both;
  80. }
  81. span.flickr-empty {
  82. display: inline-block;
  83. margin: 10px;
  84. }
  85. .page-flickr-sets h1#page-title {
  86. display: none;
  87. }
  88. .tips span.ctools-toggle {
  89. float: none !important;
  90. }
  91. span.grayed-out,
  92. .form-disabled label,
  93. input[disabled=disabled] label {
  94. color: darkgray;
  95. }
  96. span.grayed-out-help {
  97. color: #666;
  98. }
  99. .flickr-form-align {
  100. text-align: right; /* LTR */
  101. }
  102. .form-item.form-type-textfield.form-item-flickr-sswratio {
  103. float: left; /* LTR */
  104. }
  105. /*Puts a preview template next to the preview itself.*/
  106. .flickr-preview {
  107. float: left; /* LTR */
  108. margin: 0 12px 15px 0; /* LTR */
  109. padding: 10px;
  110. border: 1px solid #ccc;
  111. }