You are here

Home » API reference » Varbase Media 9.0.x

varbase-media-blazy-blurry.theme.css in Varbase Media 9.0.x

Same filename and directory in other branches
  1. 8.7 css/theme/varbase-media-blazy-blurry.theme.css
.blazy.field--type-image {
  max-width: 100%;
  height: auto;
}

.blazy.media-cover-image {
  width: 100%;
  height: auto;
}

.blazy.field--type-image .media--loading,
.blazy.media-cover-image .media--loading {
  -webkit-backface-visibility: inherit;
  backface-visibility: inherit;
  overflow: hidden;
  max-width: 100%;
  height: auto;
}

.blazy.field--type-image .media--loading::before,
.blazy.media-cover-image .media--loading::before {
  display: none;
}

.blazy.field--type-image .media--loading figure,
.blazy.field--type-image .media--loading img,
.blazy.media-cover-image .media--loading figure,
.blazy.media-cover-image .media--loading img {
  max-width: 100%;
  height: auto;
}

.blazy.field--type-image .b-lazy,
.blazy.media-cover-image .b-lazy {
  transition: filter 0.2s, transform 0.2s;
  transform: scale(1.001);
  opacity: 1;
  filter: blur(2px);
}

.blazy.field--type-image .b-loaded,
.blazy.media-cover-image .b-loaded {
  transform: scale(1);
  filter: blur(0);
}

.blazy img {
  width: 100%;
  height: 100%;
}

.media--loading {
  -webkit-backface-visibility: inherit;
  backface-visibility: inherit;
  overflow: hidden;
}

.media--loading::before {
  display: none;
}

.text-formatted .blazy.blazy--field-media-image.field[data-blazy] {
  display: inline-block;
  min-width: -webkit-fit-content;
  min-width: -moz-fit-content;
  min-width: fit-content;
}

.text-formatted .align-center > .blazy.blazy--field-media-image.blazy--field-media-image--original {
  width: auto;
  max-width: 100%;
  margin-right: auto;
  margin-left: auto;
}

.text-formatted .align-center > .blazy.blazy--field-media-image.blazy--field-media-image--large {
  width: 100%;
  margin-right: 0;
  margin-left: 0;
}

.text-formatted .align-center > .blazy.blazy--field-media-image.blazy--field-media-image--medium {
  width: 50%;
  margin-right: 25%;
  margin-left: 25%;
}

.text-formatted .align-center > .blazy.blazy--field-media-image.blazy--field-media-image--small {
  width: 25%;
  margin-right: 37.5%;
  margin-left: 37.5%;
}

.text-formatted .align-left > .blazy.blazy--field-media-image {
  margin: 0 1rem 0 0;
}

.text-formatted .align-right > .blazy.blazy--field-media-image {
  margin: 0 0 0 1rem;
}

File

css/theme/varbase-media-blazy-blurry.theme.css
View source 
  1. .blazy.field--type-image {

  2.   max-width: 100%;

  3.   height: auto;

  4. }

  5. 

  6. .blazy.media-cover-image {

  7.   width: 100%;

  8.   height: auto;

  9. }

  10. 

  11. .blazy.field--type-image .media--loading,

  12. .blazy.media-cover-image .media--loading {

  13.   -webkit-backface-visibility: inherit;

  14.   backface-visibility: inherit;

  15.   overflow: hidden;

  16.   max-width: 100%;

  17.   height: auto;

  18. }

  19. 

  20. .blazy.field--type-image .media--loading::before,

  21. .blazy.media-cover-image .media--loading::before {

  22.   display: none;

  23. }

  24. 

  25. .blazy.field--type-image .media--loading figure,

  26. .blazy.field--type-image .media--loading img,

  27. .blazy.media-cover-image .media--loading figure,

  28. .blazy.media-cover-image .media--loading img {

  29.   max-width: 100%;

  30.   height: auto;

  31. }

  32. 

  33. .blazy.field--type-image .b-lazy,

  34. .blazy.media-cover-image .b-lazy {

  35.   transition: filter 0.2s, transform 0.2s;

  36.   transform: scale(1.001);

  37.   opacity: 1;

  38.   filter: blur(2px);

  39. }

  40. 

  41. .blazy.field--type-image .b-loaded,

  42. .blazy.media-cover-image .b-loaded {

  43.   transform: scale(1);

  44.   filter: blur(0);

  45. }

  46. 

  47. .blazy img {

  48.   width: 100%;

  49.   height: 100%;

  50. }

  51. 

  52. .media--loading {

  53.   -webkit-backface-visibility: inherit;

  54.   backface-visibility: inherit;

  55.   overflow: hidden;

  56. }

  57. 

  58. .media--loading::before {

  59.   display: none;

  60. }

  61. 

  62. .text-formatted .blazy.blazy--field-media-image.field[data-blazy] {

  63.   display: inline-block;

  64.   min-width: -webkit-fit-content;

  65.   min-width: -moz-fit-content;

  66.   min-width: fit-content;

  67. }

  68. 

  69. .text-formatted .align-center > .blazy.blazy--field-media-image.blazy--field-media-image--original {

  70.   width: auto;

  71.   max-width: 100%;

  72.   margin-right: auto;

  73.   margin-left: auto;

  74. }

  75. 

  76. .text-formatted .align-center > .blazy.blazy--field-media-image.blazy--field-media-image--large {

  77.   width: 100%;

  78.   margin-right: 0;

  79.   margin-left: 0;

  80. }

  81. 

  82. .text-formatted .align-center > .blazy.blazy--field-media-image.blazy--field-media-image--medium {

  83.   width: 50%;

  84.   margin-right: 25%;

  85.   margin-left: 25%;

  86. }

  87. 

  88. .text-formatted .align-center > .blazy.blazy--field-media-image.blazy--field-media-image--small {

  89.   width: 25%;

  90.   margin-right: 37.5%;

  91.   margin-left: 37.5%;

  92. }

  93. 

  94. .text-formatted .align-left > .blazy.blazy--field-media-image {

  95.   margin: 0 1rem 0 0;

  96. }

  97. 

  98. .text-formatted .align-right > .blazy.blazy--field-media-image {

  99.   margin: 0 0 0 1rem;

  100. }