extend-cover-block.css 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180
  1. /**
  2. * Editor
  3. */
  4. #editor .wp-block-cover-image.is-style-hover-reveal.has-background-dim.has-background-dim .wp-block-cover__gradient-background,
  5. #editor .wp-block-cover-image.is-style-hover-reveal.has-background-dim.has-background-dim:not(.has-background-gradient):before,
  6. #editor .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim .wp-block-cover__gradient-background,
  7. #editor .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim:not(.has-background-gradient):before {
  8. opacity: 0;
  9. }
  10. #editor .wp-block-cover-image.is-style-hover-reveal.has-background-dim.has-background-dim-10 .wp-block-cover__gradient-background:hover,
  11. #editor .wp-block-cover-image.is-style-hover-reveal.has-background-dim.has-background-dim-10:not(.has-background-gradient):hover:before,
  12. #editor .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-10 .wp-block-cover__gradient-background:hover,
  13. #editor .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-10:not(.has-background-gradient):hover:before {
  14. opacity: .1;
  15. }
  16. #editor .wp-block-cover-image.is-style-hover-reveal.has-background-dim.has-background-dim-20 .wp-block-cover__gradient-background:hover,
  17. #editor .wp-block-cover-image.is-style-hover-reveal.has-background-dim.has-background-dim-20:not(.has-background-gradient):hover:before,
  18. #editor .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-20 .wp-block-cover__gradient-background:hover,
  19. #editor .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-20:not(.has-background-gradient):hover:before {
  20. opacity: .2;
  21. }
  22. #editor .wp-block-cover-image.is-style-hover-reveal.has-background-dim.has-background-dim-30 .wp-block-cover__gradient-background:hover,
  23. #editor .wp-block-cover-image.is-style-hover-reveal.has-background-dim.has-background-dim-30:not(.has-background-gradient):hover:before,
  24. #editor .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-30 .wp-block-cover__gradient-background:hover,
  25. #editor .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-30:not(.has-background-gradient):hover:before {
  26. opacity: .3;
  27. }
  28. #editor .wp-block-cover-image.is-style-hover-reveal.has-background-dim.has-background-dim-40 .wp-block-cover__gradient-background:hover,
  29. #editor .wp-block-cover-image.is-style-hover-reveal.has-background-dim.has-background-dim-40:not(.has-background-gradient):hover:before,
  30. #editor .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-40 .wp-block-cover__gradient-background:hover,
  31. #editor .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-40:not(.has-background-gradient):hover:before {
  32. opacity: .4;
  33. }
  34. #editor .wp-block-cover-image.is-style-hover-reveal.has-background-dim.has-background-dim .wp-block-cover__gradient-background:hover,
  35. #editor .wp-block-cover-image.is-style-hover-reveal.has-background-dim.has-background-dim:not(.has-background-gradient):hover:before,
  36. #editor .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim .wp-block-cover__gradient-background:hover,
  37. #editor .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim:not(.has-background-gradient):hover:before,
  38. #editor .wp-block-cover-image.is-style-hover-reveal.has-background-dim.has-background-dim-50 .wp-block-cover__gradient-background:hover,
  39. #editor .wp-block-cover-image.is-style-hover-reveal.has-background-dim.has-background-dim-50:not(.has-background-gradient):hover:before,
  40. #editor .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-50 .wp-block-cover__gradient-background:hover,
  41. #editor .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-50:not(.has-background-gradient):hover:before {
  42. opacity: .5;
  43. }
  44. #editor .wp-block-cover-image.is-style-hover-reveal.has-background-dim.has-background-dim-60 .wp-block-cover__gradient-background:hover,
  45. #editor .wp-block-cover-image.is-style-hover-reveal.has-background-dim.has-background-dim-60:not(.has-background-gradient):hover:before,
  46. #editor .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-60 .wp-block-cover__gradient-background:hover,
  47. #editor .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-60:not(.has-background-gradient):hover:before {
  48. opacity: .6;
  49. }
  50. #editor .wp-block-cover-image.is-style-hover-reveal.has-background-dim.has-background-dim-70 .wp-block-cover__gradient-background:hover,
  51. #editor .wp-block-cover-image.is-style-hover-reveal.has-background-dim.has-background-dim-70:not(.has-background-gradient):hover:before,
  52. #editor .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-70 .wp-block-cover__gradient-background:hover,
  53. #editor .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-70:not(.has-background-gradient):hover:before {
  54. opacity: .7;
  55. }
  56. #editor .wp-block-cover-image.is-style-hover-reveal.has-background-dim.has-background-dim-80 .wp-block-cover__gradient-background:hover,
  57. #editor .wp-block-cover-image.is-style-hover-reveal.has-background-dim.has-background-dim-80:not(.has-background-gradient):hover:before,
  58. #editor .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-80 .wp-block-cover__gradient-background:hover,
  59. #editor .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-80:not(.has-background-gradient):hover:before {
  60. opacity: .8;
  61. }
  62. #editor .wp-block-cover-image.is-style-hover-reveal.has-background-dim.has-background-dim-90 .wp-block-cover__gradient-background:hover,
  63. #editor .wp-block-cover-image.is-style-hover-reveal.has-background-dim.has-background-dim-90:not(.has-background-gradient):hover:before,
  64. #editor .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-90 .wp-block-cover__gradient-background:hover,
  65. #editor .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-90:not(.has-background-gradient):hover:before {
  66. opacity: .9;
  67. }
  68. #editor .wp-block-cover-image.is-style-hover-reveal.has-background-dim.has-background-dim-100 .wp-block-cover__gradient-background:hover,
  69. #editor .wp-block-cover-image.is-style-hover-reveal.has-background-dim.has-background-dim-100:not(.has-background-gradient):hover:before,
  70. #editor .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-100 .wp-block-cover__gradient-background:hover,
  71. #editor .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-100:not(.has-background-gradient):hover:before {
  72. opacity: 1;
  73. }
  74. /**
  75. * Front End
  76. */
  77. /* Inner Container */
  78. .wp-block-cover.is-style-hover-reveal:not(.has-parallax) {
  79. background-size: contain;
  80. background-repeat: no-repeat;
  81. }
  82. .wp-block-cover.is-style-hover-reveal a:hover,
  83. .wp-block-cover.is-style-hover-reveal a:active {
  84. color: currentColor;
  85. text-decoration: underline;
  86. }
  87. .wp-block-cover.is-style-hover-reveal .wp-block-cover__inner-container {
  88. opacity: 0;
  89. -webkit-transition: opacity 0.2s ease-in-out;
  90. -moz-transition: opacity 0.2s ease-in-out;
  91. transition: opacity 0.2s ease-in-out;
  92. }
  93. .wp-block-cover.is-style-hover-reveal:hover .wp-block-cover__inner-container {
  94. opacity: 1;
  95. }
  96. /* Dim */
  97. .wp-block-cover.is-style-hover-reveal.has-background-dim:before,
  98. .wp-block-cover.is-style-hover-reveal.has-background-dim:not(.has-background-gradient):before,
  99. .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-gradient .wp-block-cover__gradient-background {
  100. opacity: 0;
  101. -webkit-transition: opacity 0.2s ease-in-out;
  102. -moz-transition: opacity 0.2s ease-in-out;
  103. transition: opacity 0.2s ease-in-out;
  104. }
  105. .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-0:hover:before,
  106. .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-0.has-background-gradient:hover .wp-block-cover__gradient-background {
  107. opacity: 0;
  108. }
  109. .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-10:hover:before,
  110. .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-10.has-background-gradient:hover .wp-block-cover__gradient-background {
  111. opacity: .1;
  112. }
  113. .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-20:hover:before,
  114. .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-20.has-background-gradient:hover .wp-block-cover__gradient-background {
  115. opacity: .2;
  116. }
  117. .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-30:hover:before,
  118. .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-30.has-background-gradient:hover .wp-block-cover__gradient-background {
  119. opacity: .3;
  120. }
  121. .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-40:hover:before,
  122. .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-40.has-background-gradient:hover .wp-block-cover__gradient-background {
  123. opacity: .4;
  124. }
  125. .wp-block-cover.is-style-hover-reveal.has-background-dim:hover:before,
  126. .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-50:hover:before,
  127. .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-gradient:hover .wp-block-cover__gradient-background,
  128. .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-50.has-background-gradient:hover .wp-block-cover__gradient-background {
  129. opacity: .5;
  130. }
  131. .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-60:hover:before,
  132. .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-60.has-background-gradient:hover .wp-block-cover__gradient-background {
  133. opacity: .6;
  134. }
  135. .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-70:hover:before,
  136. .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-70.has-background-gradient:hover .wp-block-cover__gradient-background {
  137. opacity: .7;
  138. }
  139. .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-80:hover:before,
  140. .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-80.has-background-gradient:hover .wp-block-cover__gradient-background {
  141. opacity: .8;
  142. }
  143. .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-90:hover:before,
  144. .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-90.has-background-gradient:hover .wp-block-cover__gradient-background {
  145. opacity: .9;
  146. }
  147. .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-100:hover:before,
  148. .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-100.has-background-gradient:hover .wp-block-cover__gradient-background {
  149. opacity: 1;
  150. }