You are here

varbase_media.common.css in Varbase Media 9.0.x

.embedded-entity.align-center img {
  display: block;
  margin-right: auto;
  margin-left: auto;
}

.embedded-entity.align-center figcaption {
  display: block;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.embedded-entity.align-right {
  margin: 0 0 1rem 1rem;
}

.embedded-entity.align-right figcaption {
  text-align: center;
}

.embedded-entity.align-left {
  margin: 0 8px 8px 0;
}

.embedded-entity.align-left figcaption {
  text-align: center;
}

picture.align-right {
  margin: 0 0 1rem 1rem;
}

picture.align-right figcaption {
  text-align: center;
}

picture.align-left {
  margin: 0 1rem 1rem 0;
}

picture.align-left figcaption {
  text-align: center;
}

figure.align-center img {
  display: block;
  margin-right: auto;
  margin-left: auto;
}

figure.align-center figcaption {
  display: block;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

figure.align-right {
  display: table;
  margin: 0 0 1rem 1rem;
}

figure.align-right figcaption {
  display: table-caption;
  caption-side: bottom;
}

figure.align-left {
  display: table;
  margin: 0 1rem 1rem 0;
}

figure.align-left figcaption {
  display: table-caption;
  caption-side: bottom;
}

img.align-center {
  display: block;
  margin-right: auto;
  margin-left: auto;
}

img.align-right {
  margin: 0 0 1rem 1rem;
}

figure.align-right,
figure.align-left {
  display: table;
}

figure.align-right figcaption,
figure.align-left figcaption {
  display: table-caption;
  caption-side: bottom;
  text-align: center;
}

figure.caption.caption-drupal-media.align-center {
  margin-right: auto;
  margin-left: auto;
}

.media.media--type-remote-video,
.media.media--type-video {
  width: 100%;
}

.media.media--type-remote-video.align-center figcaption,
.media.media--type-video.align-center figcaption {
  display: table-caption;
  caption-side: bottom;
  text-align: center;
}

.media.media--type-remote-video.align-right,
.media.media--type-video.align-right {
  display: table;
  margin: 0 0 1rem 1rem;
}

.media.media--type-remote-video.align-right figcaption,
.media.media--type-video.align-right figcaption {
  display: table-caption;
  caption-side: bottom;
  text-align: center;
}

.media.media--type-remote-video.align-left,
.media.media--type-video.align-left {
  display: table;
  margin: 0 1rem 1rem 0;
}

.media.media--type-remote-video.align-left figcaption,
.media.media--type-video.align-left figcaption {
  display: table-caption;
  caption-side: bottom;
  text-align: center;
}

.media.media--type-remote-video.media--view-mode-medium,
.media.media--type-video.media--view-mode-medium {
  width: 50%;
}

.media.media--type-remote-video.media--view-mode-small,
.media.media--type-video.media--view-mode-small {
  width: 25%;
}

.media.media--type-remote-video .media.media--bundle--image .blazy img {
  width: auto;
  height: auto;
}

File

css/varbase_media.common.css
View source
  1. .embedded-entity.align-center img {
  2. display: block;
  3. margin-right: auto;
  4. margin-left: auto;
  5. }
  6. .embedded-entity.align-center figcaption {
  7. display: block;
  8. margin-right: auto;
  9. margin-left: auto;
  10. text-align: center;
  11. }
  12. .embedded-entity.align-right {
  13. margin: 0 0 1rem 1rem;
  14. }
  15. .embedded-entity.align-right figcaption {
  16. text-align: center;
  17. }
  18. .embedded-entity.align-left {
  19. margin: 0 8px 8px 0;
  20. }
  21. .embedded-entity.align-left figcaption {
  22. text-align: center;
  23. }
  24. picture.align-right {
  25. margin: 0 0 1rem 1rem;
  26. }
  27. picture.align-right figcaption {
  28. text-align: center;
  29. }
  30. picture.align-left {
  31. margin: 0 1rem 1rem 0;
  32. }
  33. picture.align-left figcaption {
  34. text-align: center;
  35. }
  36. figure.align-center img {
  37. display: block;
  38. margin-right: auto;
  39. margin-left: auto;
  40. }
  41. figure.align-center figcaption {
  42. display: block;
  43. margin-right: auto;
  44. margin-left: auto;
  45. text-align: center;
  46. }
  47. figure.align-right {
  48. display: table;
  49. margin: 0 0 1rem 1rem;
  50. }
  51. figure.align-right figcaption {
  52. display: table-caption;
  53. caption-side: bottom;
  54. }
  55. figure.align-left {
  56. display: table;
  57. margin: 0 1rem 1rem 0;
  58. }
  59. figure.align-left figcaption {
  60. display: table-caption;
  61. caption-side: bottom;
  62. }
  63. img.align-center {
  64. display: block;
  65. margin-right: auto;
  66. margin-left: auto;
  67. }
  68. img.align-right {
  69. margin: 0 0 1rem 1rem;
  70. }
  71. figure.align-right,
  72. figure.align-left {
  73. display: table;
  74. }
  75. figure.align-right figcaption,
  76. figure.align-left figcaption {
  77. display: table-caption;
  78. caption-side: bottom;
  79. text-align: center;
  80. }
  81. figure.caption.caption-drupal-media.align-center {
  82. margin-right: auto;
  83. margin-left: auto;
  84. }
  85. .media.media--type-remote-video,
  86. .media.media--type-video {
  87. width: 100%;
  88. }
  89. .media.media--type-remote-video.align-center figcaption,
  90. .media.media--type-video.align-center figcaption {
  91. display: table-caption;
  92. caption-side: bottom;
  93. text-align: center;
  94. }
  95. .media.media--type-remote-video.align-right,
  96. .media.media--type-video.align-right {
  97. display: table;
  98. margin: 0 0 1rem 1rem;
  99. }
  100. .media.media--type-remote-video.align-right figcaption,
  101. .media.media--type-video.align-right figcaption {
  102. display: table-caption;
  103. caption-side: bottom;
  104. text-align: center;
  105. }
  106. .media.media--type-remote-video.align-left,
  107. .media.media--type-video.align-left {
  108. display: table;
  109. margin: 0 1rem 1rem 0;
  110. }
  111. .media.media--type-remote-video.align-left figcaption,
  112. .media.media--type-video.align-left figcaption {
  113. display: table-caption;
  114. caption-side: bottom;
  115. text-align: center;
  116. }
  117. .media.media--type-remote-video.media--view-mode-medium,
  118. .media.media--type-video.media--view-mode-medium {
  119. width: 50%;
  120. }
  121. .media.media--type-remote-video.media--view-mode-small,
  122. .media.media--type-video.media--view-mode-small {
  123. width: 25%;
  124. }
  125. .media.media--type-remote-video .media.media--bundle--image .blazy img {
  126. width: auto;
  127. height: auto;
  128. }