Advertisement
vallec

Untitled

Jun 6th, 2024
23
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 4.51 KB | None | 0 0
  1. .cookie-options-modal {
  2. -webkit-backdrop-filter: blur(6px);
  3. backdrop-filter: blur(6px);
  4. background: rgba(0, 0, 0, .2);
  5. position: fixed;
  6. top: 0;
  7. right: 0;
  8. bottom: 0;
  9. left: 0;
  10. z-index: 8;
  11. height: 100%;
  12. width: 100%;
  13. align-items: center;
  14. justify-content: center;
  15. overflow: auto;
  16. }
  17.  
  18. .cookie-options-modal .modal-window {
  19. width: 900px;
  20. display: flex;
  21. flex-direction: column;
  22. border-radius: 4px;
  23. border-width: 1px;
  24. border-style: solid;
  25. border-color: #e0e0e0;
  26. position: absolute;
  27. left: 50%;
  28. top: 50%;
  29. height: auto;
  30. max-height: 100%;
  31. transform: translate(-50%, -50%);
  32. overflow: auto;
  33. --tw-bg-opacity: 1;
  34. background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  35. }
  36.  
  37. .cookie-options-modal .modal-window .closeBtn {
  38. position: absolute;
  39. z-index: 1;
  40. right: 18px;
  41. top: 0;
  42. margin-top: 4px;
  43. margin-bottom: 4px;
  44. height: 48px;
  45. width: 48px;
  46. cursor: pointer;
  47. background: transparent;
  48. border: none;
  49. }
  50.  
  51. .cookie-options-modal .modal-window .modalHeader {
  52. padding-left: 32px;
  53. padding-right: 32px;
  54. height: auto;
  55. flex-direction: column;
  56. align-items: flex-start;
  57. border-bottom: 1px solid grey;
  58. padding-top: 8px;
  59. padding-bottom: 8px;
  60. }
  61.  
  62. .cookie-options-modal .modal-window .modalBody {
  63. overflow-y: auto;
  64. padding-left: 32px;
  65. padding-right: 32px;
  66. display: flex;
  67. flex-direction: column;
  68. padding-top: 16px;
  69. padding-bottom: 0;
  70. }
  71.  
  72. .cookie-options-modal .modal-window .modalBody .heading {
  73. font-size: 2rem;
  74. line-height: 2.8rem;
  75. font-weight: 400;
  76. color: #222;
  77. }
  78.  
  79. .cookie-options-modal .modal-window .modalBody .cookie-item {
  80. border-top: 1px solid #e0e0e0;
  81. padding-top: 8px;
  82. padding-bottom: 4px;
  83. }
  84.  
  85. .cookie-options-modal .modal-window .modalBody .cookie-item .paragraph {
  86. text-align: left;
  87. font-size: 1.4rem;
  88. font-weight: 400;
  89. line-height: 2.0rem;
  90. color: #2f2f2f;
  91. }
  92.  
  93. .cookie-options-modal .modal-window .modalBody .cookie-item .cookie-description {
  94. font-size: 1.4rem;
  95. line-height: 2.0rem;
  96. color: #757575;
  97. }
  98.  
  99. .cookie-options-modal .modal-window .modalBody .cookie-item .toggle-container {
  100. display: flex;
  101. align-items: center;
  102. justify-content: space-between;
  103. }
  104.  
  105. .cookie-options-modal .modal-window .modalBody .cookie-item .toggle-container .cookie-description-btn {
  106. line-height: 2.0rem;
  107. display: block;
  108. font-size: 1.4rem;
  109. color: #005c38;
  110. -webkit-appearance: button;
  111. background-color: transparent;
  112. background-image: none;
  113. cursor: pointer;
  114. border: none;
  115. }
  116.  
  117. .cookie-options-modal .modal-window .modalBody .cookie-item .toggle-container .cookie-description-btn:hover {
  118. text-decoration: underline;
  119. }
  120.  
  121. .cookie-options-modal .modal-window .modalFooter {
  122. display: flex;
  123. justify-content: flex-end;
  124. padding: 32px;
  125. }
  126.  
  127. .cookie-options-modal .modal-window .modalFooter .accept-cookies-btn {
  128. background: #2f2f2f;
  129. width: auto;
  130. color: #ffffff;
  131. position: relative;
  132. display: inline-flex;
  133. min-height: 4rem;
  134. align-items: center;
  135. justify-content: center;
  136. padding-left: 24px;
  137. padding-right: 24px;
  138. font-weight: 700;
  139. transition: background-color .2s, color .2s, box-shadow .2s;
  140. cursor: pointer;
  141. }
  142.  
  143. .toggle {
  144. --width: 40px;
  145. --height: calc(var(--width) / 2);
  146. --border-radius: calc(var(--height) / 2);
  147.  
  148. display: inline-block;
  149. cursor: pointer;
  150. display: flex;
  151. align-items: center;
  152. gap: 24px;
  153. }
  154.  
  155. .toggle__input {
  156. display: none;
  157. }
  158.  
  159. .toggle__fill {
  160. position: relative;
  161. width: 51px;
  162. height: 31px;
  163. border-radius: 100px;
  164. background: #B3B3B3;
  165. transition: background 0.2s;
  166. margin-top: 16px;
  167. margin-bottom: 16px;
  168. }
  169.  
  170. .toggle__fill::after {
  171. content: "";
  172. position: absolute;
  173. top: 2px;
  174. left: 2px;
  175. height: 27px;
  176. width: 27px;
  177. background: #ffffff;
  178. box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.04), 0px 3px 8px 0px rgba(0, 0, 0, 0.15), 0px 3px 1px 0px rgba(0, 0, 0, 0.06);
  179. border-radius: 100px;
  180. transition: transform 0.2s;
  181. }
  182.  
  183. .toggle__input:checked ~ .toggle__fill {
  184. background: #009775;
  185. }
  186.  
  187. .optionToggle input[type='checkbox'] {
  188. display: none;
  189. }
  190.  
  191. .toggle__input:checked ~ .toggle__fill::after {
  192. transform: translateX(var(--height));
  193. }
  194.  
  195. .optionToggle .toggleLabel {
  196. font-size: 1.4rem;
  197. line-height: 2.8rem;
  198. color: #222;
  199. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement