slides.scss 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159
  1. .flickity-button {
  2. background: transparent;
  3. &:hover {
  4. background: transparent;
  5. }
  6. }
  7. .flickity-button-icon {
  8. fill: $col_black;
  9. }
  10. .flickity-button:disabled {
  11. display: none;
  12. }
  13. #block-colloque2024-views-block-slide-programme-block-1,
  14. #block-colloque2024-views-block-slide-programme-node-intervenant-block-1 {
  15. .__slide {
  16. article {
  17. width: calc(100% - 30px);
  18. height: 325px;
  19. display: flex;
  20. flex-direction: column;
  21. margin: 3rem $gutter 1.5rem $gutter;
  22. @media screen and (min-width: 768px) {
  23. width: calc(100% / 2 - #{$gutter} * 2);
  24. }
  25. @media screen and (min-width: 992px) {
  26. width: calc(100% / 3 - #{$gutter} * 2);
  27. }
  28. @media screen and (min-width: 1200px) {
  29. width: calc(100% / 4 - #{$gutter} * 1);
  30. }
  31. a {
  32. width: 100%;
  33. height: 100%;
  34. background: white;
  35. @include shadow;
  36. .__wrap {
  37. background: white;
  38. }
  39. }
  40. &.first {
  41. & > span {
  42. font-family: "Mariannelight";
  43. position: absolute;
  44. top: -2.5rem;
  45. width: max-content;
  46. font-size: 1.2rem;
  47. line-height: 1.2;
  48. text-transform: uppercase;
  49. }
  50. &:not(:first-child) {
  51. &::before {
  52. position: absolute;
  53. display: block;
  54. content: " ";
  55. width: 1px;
  56. height: calc(100% + 3rem);
  57. margin: -2.5rem 0 0 0;
  58. background: $color1;
  59. left: -0.5rem;
  60. top: 0;
  61. }
  62. }
  63. }
  64. }
  65. }
  66. }
  67. #block-colloque2024-views-block-gallerie-block-1,
  68. #block-colloque2024-views-block-slide-programme-block-1,
  69. #block-colloque2024-views-block-slide-programme-node-intervenant-block-1,
  70. #block-colloque2024-views-block-dernieres-publications-block-1,
  71. #block-colloque2024-views-block-slide-interviews-block-1 {
  72. section:not(.wrap_head) {
  73. margin: 1rem 0;
  74. }
  75. .views {
  76. section.wrap_head {
  77. // @include croix_or;
  78. .head {
  79. display: flex;
  80. flex-direction: row;
  81. align-items: center;
  82. position: relative;
  83. @media (max-width: 550px) {
  84. flex-wrap: wrap;
  85. }
  86. h3{
  87. display: flex;
  88. flex-direction: row;
  89. align-items: center;
  90. &:after{
  91. display: block;
  92. content: "";
  93. max-width: fit-content;
  94. width: 100%; /* Étendre la ligne sur toute la largeur */
  95. border-bottom: 1px solid #000; /* Couleur et style de la ligne */
  96. }
  97. }
  98. }
  99. }
  100. }
  101. @media screen and (min-width: 576px) {
  102. .views {
  103. section {
  104. .head {
  105. display: flex !important;
  106. width: 100%;
  107. justify-content: space-between;
  108. align-items: center;
  109. }
  110. }
  111. }
  112. }
  113. }
  114. .paragraph--type--role-de-l-intervenant {
  115. margin-bottom: 2rem;
  116. .__slide {
  117. &:after {
  118. content: "flickity";
  119. display: none;
  120. @media screen and (min-width: 768px) {
  121. content: "";
  122. }
  123. }
  124. .flickity-viewport {
  125. overflow: initial;
  126. }
  127. .flickity-slider > div {
  128. width: 70%;
  129. padding: 0 0.5rem;
  130. @media screen and (min-width: 768px) {
  131. width: 100%;
  132. }
  133. }
  134. }
  135. }
  136. .flickity-slider {
  137. position: absolute;
  138. width: 100%;
  139. height: 100%;
  140. margin-left: 10px;
  141. }
  142. html.sr.js body div.dialog-off-canvas-main-canvas div.layout-container main#mainHome.d-flex.container.home div.layout-content div#content-ontop div div div div#block-colloque2024-views-block-slide-programme-block-1.views-element-container{
  143. opacity: 1 !important;
  144. }
  145. html.sr.js body div.dialog-off-canvas-main-canvas div.layout-container main#mainHome.d-flex.container.home div.layout-content div#content-ontop div div div article#txt_present{
  146. opacity: 1 !important;
  147. }