embedded-media.css

Same filename in other branches
  1. 10 core/themes/olivero/css/components/embedded-media.css
  2. 11.x core/themes/olivero/css/components/embedded-media.css

Embedded Media.

File

core/themes/olivero/css/components/embedded-media.css

View source
  1. /*
  2. * DO NOT EDIT THIS FILE.
  3. * See the following change record for more information,
  4. * https://www.drupal.org/node/3084859
  5. * @preserve
  6. */
  7. /**
  8. * @file
  9. * Embedded Media.
  10. */
  11. figure {
  12. background: #f7f9fa;
  13. }
  14. [dir="ltr"] figcaption {
  15. padding-left: 0.5625rem;
  16. }
  17. [dir="rtl"] figcaption {
  18. padding-right: 0.5625rem;
  19. }
  20. [dir="ltr"] figcaption {
  21. padding-right: 0.5625rem;
  22. }
  23. [dir="rtl"] figcaption {
  24. padding-left: 0.5625rem;
  25. }
  26. figcaption {
  27. padding-top: 0.5625rem;
  28. padding-bottom: 0.5625rem;
  29. color: #313637;
  30. background: #f7f9fa;
  31. font-family: Lora, georgia, serif;
  32. font-size: 0.875rem;
  33. font-style: italic;
  34. line-height: 1.125rem;
  35. }
  36. @media (min-width: 31.25rem) {
  37. [dir="ltr"] figcaption {
  38. padding-left: 1.125rem;
  39. }
  40. [dir="rtl"] figcaption {
  41. padding-right: 1.125rem;
  42. }
  43. [dir="ltr"] figcaption {
  44. padding-right: 1.125rem;
  45. }
  46. [dir="rtl"] figcaption {
  47. padding-left: 1.125rem;
  48. }
  49. figcaption {
  50. padding-top: 1.125rem;
  51. padding-bottom: 1.125rem;
  52. }
  53. }
  54. [dir="ltr"] .align-right {
  55. margin-left: 0;
  56. }
  57. [dir="rtl"] .align-right {
  58. margin-right: 0;
  59. }
  60. [dir="ltr"] .align-right {
  61. margin-right: 0;
  62. }
  63. [dir="rtl"] .align-right {
  64. margin-left: 0;
  65. }
  66. .align-right {
  67. float: none; /* Override core's align.module.css. */
  68. max-width: 100%;
  69. margin-top: 3.375rem;
  70. margin-bottom: 3.375rem;
  71. }
  72. @media (min-width: 43.75rem) {
  73. [dir="ltr"] .align-right {
  74. float: right;
  75. }
  76. [dir="rtl"] .align-right {
  77. float: left;
  78. }
  79. [dir="ltr"] .align-right {
  80. margin-left: 1.125rem;
  81. }
  82. [dir="rtl"] .align-right {
  83. margin-right: 1.125rem;
  84. }
  85. [dir="ltr"] .align-right {
  86. margin-right: 0;
  87. }
  88. [dir="rtl"] .align-right {
  89. margin-left: 0;
  90. }
  91. .align-right {
  92. max-width: 50%;
  93. margin-top: 1.125rem;
  94. margin-bottom: 1.125rem;
  95. }
  96. }
  97. /* Pull out of grid if nested in content narrow layout. */
  98. @media (min-width: 43.75rem) {
  99. [dir="ltr"] .layout--content-narrow .align-right,
  100. [dir="ltr"] .layout--pass--content-narrow > * .align-right {
  101. margin-right: -7.14286vw;
  102. }
  103. [dir="rtl"] .layout--content-narrow .align-right,
  104. [dir="rtl"] .layout--pass--content-narrow > * .align-right {
  105. margin-left: -7.14286vw;
  106. }
  107. }
  108. @media (min-width: 62.5rem) {
  109. [dir="ltr"] .layout--content-narrow .align-right,
  110. [dir="ltr"] .layout--pass--content-narrow > * .align-right {
  111. margin-right: calc(-14.28571vw - -0.13393rem);
  112. }
  113. [dir="rtl"] .layout--content-narrow .align-right,
  114. [dir="rtl"] .layout--pass--content-narrow > * .align-right {
  115. margin-left: calc(-14.28571vw - -0.13393rem);
  116. }
  117. }
  118. @media (min-width: 75rem) {
  119. [dir="ltr"] .layout--content-narrow .align-right,
  120. [dir="ltr"] .layout--pass--content-narrow > * .align-right {
  121. margin-right: calc(-21.42857vw - -1.88839rem);
  122. }
  123. [dir="rtl"] .layout--content-narrow .align-right,
  124. [dir="rtl"] .layout--pass--content-narrow > * .align-right {
  125. margin-left: calc(-21.42857vw - -1.88839rem);
  126. }
  127. }
  128. @media (min-width: 90rem) {
  129. [dir="ltr"] .layout--content-narrow .align-right,
  130. [dir="ltr"] .layout--pass--content-narrow > * .align-right {
  131. margin-right: -17.59821rem;
  132. }
  133. [dir="rtl"] .layout--content-narrow .align-right,
  134. [dir="rtl"] .layout--pass--content-narrow > * .align-right {
  135. margin-left: -17.59821rem;
  136. }
  137. }
  138. [dir="ltr"] .align-left {
  139. margin-left: 0;
  140. }
  141. [dir="rtl"] .align-left {
  142. margin-right: 0;
  143. }
  144. [dir="ltr"] .align-left {
  145. margin-right: 0;
  146. }
  147. [dir="rtl"] .align-left {
  148. margin-left: 0;
  149. }
  150. .align-left {
  151. float: none; /* Override core's align.module.css. */
  152. max-width: 100%;
  153. margin-top: 3.375rem;
  154. margin-bottom: 3.375rem;
  155. }
  156. @media (min-width: 43.75rem) {
  157. [dir="ltr"] .align-left {
  158. float: left;
  159. }
  160. [dir="rtl"] .align-left {
  161. float: right;
  162. }
  163. [dir="ltr"] .align-left {
  164. margin-left: 0;
  165. }
  166. [dir="rtl"] .align-left {
  167. margin-right: 0;
  168. }
  169. [dir="ltr"] .align-left {
  170. margin-right: 2.25rem;
  171. }
  172. [dir="rtl"] .align-left {
  173. margin-left: 2.25rem;
  174. }
  175. .align-left {
  176. max-width: 50%;
  177. margin-top: 1.125rem;
  178. margin-bottom: 1.125rem; /* Extra right margins in case of aligning next to lists. */
  179. }
  180. }
  181. /* Pull out of grid if nested in content narrow layout. */
  182. @media (min-width: 43.75rem) {
  183. [dir="ltr"] .layout--content-narrow .align-left,
  184. [dir="ltr"] .layout--pass--content-narrow > * .align-left {
  185. margin-left: -7.14286vw;
  186. }
  187. [dir="rtl"] .layout--content-narrow .align-left,
  188. [dir="rtl"] .layout--pass--content-narrow > * .align-left {
  189. margin-right: -7.14286vw;
  190. }
  191. }
  192. @media (min-width: 62.5rem) {
  193. [dir="ltr"] .layout--content-narrow .align-left,
  194. [dir="ltr"] .layout--pass--content-narrow > * .align-left {
  195. margin-left: calc(-7.14286vw - -0.06696rem);
  196. }
  197. [dir="rtl"] .layout--content-narrow .align-left,
  198. [dir="rtl"] .layout--pass--content-narrow > * .align-left {
  199. margin-right: calc(-7.14286vw - -0.06696rem);
  200. }
  201. }
  202. @media (min-width: 75rem) {
  203. [dir="ltr"] .layout--content-narrow .align-left,
  204. [dir="ltr"] .layout--pass--content-narrow > * .align-left {
  205. margin-left: calc(-7.14286vw - -0.62946rem);
  206. }
  207. [dir="rtl"] .layout--content-narrow .align-left,
  208. [dir="rtl"] .layout--pass--content-narrow > * .align-left {
  209. margin-right: calc(-7.14286vw - -0.62946rem);
  210. }
  211. }
  212. @media (min-width: 90rem) {
  213. [dir="ltr"] .layout--content-narrow .align-left,
  214. [dir="ltr"] .layout--pass--content-narrow > * .align-left {
  215. margin-left: -5.86607rem;
  216. }
  217. [dir="rtl"] .layout--content-narrow .align-left,
  218. [dir="rtl"] .layout--pass--content-narrow > * .align-left {
  219. margin-right: -5.86607rem;
  220. }
  221. }
  222. .align-center img,
  223. .align-center video,
  224. .align-center audio {
  225. margin-right: auto;
  226. margin-left: auto;
  227. }
  228. .media-oembed-content {
  229. display: block;
  230. max-width: 100%;
  231. }

Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.