You are here

eu_cookie_compliance.css in EU Cookie Compliance (GDPR Compliance) 7

#sliding-popup {
  margin: 0;
  padding: 0;
  width: 100%;
  z-index: 99999;
  left: 0;
  text-align: center;
}

.sliding-popup-bottom,
.sliding-popup-top {
  background: url('../images/gradient.png') center center scroll repeat-y transparent;
}

.sliding-popup-bottom {
  position: fixed;
}

.sliding-popup-top {
  position: relative;
}

#sliding-popup .popup-content {
  margin: 0 auto;
  max-width: 80%;
  display: inline-block;
  text-align: left;
  width: 100%;
}

#sliding-popup .popup-content #popup-buttons {
  float: right;
  margin: 0 0 1em 0;
  max-width: 40%;
}

.eu-cookie-compliance-categories-buttons {
  margin: 0 0 1em 0;
  max-width: 60%;
  float: left;
}

#sliding-popup .eu-cookie-compliance-more-button {
  cursor: pointer;
  display: inline;
  height: auto;
  margin: 0;
  padding: 0;
  border: none;
  text-decoration: underline;
  background: none;
}

#sliding-popup .eu-cookie-compliance-secondary-button {
  cursor: pointer;
  border: none;
  background: none;
  margin-top: 1em;
  padding: 0 8px;
  vertical-align: middle;
}

#sliding-popup .eu-cookie-compliance-default-button,
#sliding-popup .eu-cookie-compliance-hide-button,
#sliding-popup .eu-cookie-compliance-more-button-thank-you,
#sliding-popup .eu-cookie-withdraw-button,
.eu-cookie-withdraw-button,
.eu-cookie-compliance-save-preferences-button {
  cursor: pointer;
  margin-right: 5px;
  margin-top: 1em;
  vertical-align: middle;
  overflow: visible;
  width: auto;
  -moz-box-shadow: inset 0 1px 0 0 #ffffff;
  -webkit-box-shadow: inset 0 1px 0 0 #ffffff;
  box-shadow: inset 0 1px 0 0 #ffffff;
  background-color: #ededed;
  background-image: -moz-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(5%, #ededed), color-stop(100%, #dfdfdf));
  background-image: -webkit-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
  background-image: -o-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
  background-image: -ms-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
  background-image: linear-gradient(to bottom, #ededed 5%, #dfdfdf 100%);
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  border: 1px solid #dcdcdc;
  color: #000;
  font-family: Arial, sans-serif;
  font-weight: bold;
  padding: 4px 8px;
  text-decoration: none;
  text-shadow: 1px 1px 0 #ffffff;
}

#sliding-popup .eu-cookie-compliance-default-button:hover,
#sliding-popup .eu-cookie-compliance-hide-button:hover,
#sliding-popup .eu-cookie-compliance-more-button-thank-you:hover,
#sliding-popup .eu-cookie-withdraw-button:hover {
  background-color: #dfdfdf;
  background-image: -moz-linear-gradient(top, #dfdfdf 5%, #ededed 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(5%, #dfdfdf), color-stop(100%, #ededed));
  background-image: -webkit-linear-gradient(top, #dfdfdf 5%, #ededed 100%);
  background-image: -o-linear-gradient(top, #dfdfdf 5%, #ededed 100%);
  background-image: -ms-linear-gradient(top, #dfdfdf 5%, #ededed 100%);
  background-image: linear-gradient(to bottom, #dfdfdf 5%, #ededed 100%);
}

#sliding-popup .eu-cookie-compliance-default-button:active,
#sliding-popup .eu-cookie-compliance-hide-button:active,
#sliding-popup .eu-cookie-compliance-more-button-thank-you:active,
#sliding-popup .eu-cookie-withdraw-button:active {
  position: relative;
  top: 1px;
}

#sliding-popup .popup-content #popup-text {
  color: #fff;
  float: left;
  font-weight: bold;
  margin: 5px 0 0;
  max-width: 60%;
}

.eu-cookie-compliance-banner--categories .eu-cookie-compliance-message {
  max-width: 100%;
}

.eu-cookie-compliance-categories {
  clear: both;
  padding-top: 1em;
}

.eu-cookie-compliance-categories label {
  display: inline;
}

#sliding-popup .popup-content #popup-text h1,
#sliding-popup .popup-content #popup-text h2,
#sliding-popup .popup-content #popup-text h3,
#sliding-popup .popup-content #popup-text p {
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.4;
  margin: 0 0 5px 0;
}

#sliding-popup .popup-content #popup-text h1 {
  font-size: 24px;
}

#sliding-popup .popup-content #popup-text h3 {
  font-size: 12px;
}

#sliding-popup .popup-content #popup-text p {
  font-size: 12px;
  display: inline;
}

.eu-cookie-withdraw-tab {
  padding: 4px 7px;
  cursor: pointer;
}

.sliding-popup-bottom .eu-cookie-withdraw-tab {
  border-width: 2px 2px 0;
  border-radius: 5px 5px 0 0;
}

.sliding-popup-top .eu-cookie-withdraw-tab {
  border-width: 0 2px 2px;
  border-radius: 0 0 5px 5px;
}

.eu-cookie-withdraw-wrapper.sliding-popup-top,
.eu-cookie-withdraw-wrapper.sliding-popup-top .eu-cookie-withdraw-banner {
  transform: scaleY(-1);
}


.eu-cookie-withdraw-tab {
  position: absolute;
  top: 0;
  transform: translate(-50%, -100%);
  left: 50%;
}

.eu-cookie-withdraw-wrapper.sliding-popup-top .eu-cookie-withdraw-tab {
  transform: translate(-50%, -100%) scaleY(-1);
}

.eu-cookie-compliance-hidden {
  display: none;
}

@media screen and (max-width: 600px) {
  #sliding-popup .popup-content {
    max-width: 95%;
  }

  .eu-cookie-compliance-categories,
  #sliding-popup .popup-content #popup-text {
    max-width: 100%;
  }

  #sliding-popup .popup-content #popup-buttons {
    clear: both;
    float: none;
    margin: 5px 0 1em;
    max-width: 100%;
  }

  .eu-cookie-compliance-buttons.eu-cookie-compliance-has-categories {
    float: right;
    margin-top: -56px;
  }

  .eu-cookie-compliance-banner--categories .eu-cookie-compliance-buttons {
    position: initial;
    bottom: unset;
    right: unset;
  }
}

File

css/eu_cookie_compliance.css
View source
  1. #sliding-popup {
  2. margin: 0;
  3. padding: 0;
  4. width: 100%;
  5. z-index: 99999;
  6. left: 0;
  7. text-align: center;
  8. }
  9. .sliding-popup-bottom,
  10. .sliding-popup-top {
  11. background: url('../images/gradient.png') center center scroll repeat-y transparent;
  12. }
  13. .sliding-popup-bottom {
  14. position: fixed;
  15. }
  16. .sliding-popup-top {
  17. position: relative;
  18. }
  19. #sliding-popup .popup-content {
  20. margin: 0 auto;
  21. max-width: 80%;
  22. display: inline-block;
  23. text-align: left;
  24. width: 100%;
  25. }
  26. #sliding-popup .popup-content #popup-buttons {
  27. float: right;
  28. margin: 0 0 1em 0;
  29. max-width: 40%;
  30. }
  31. .eu-cookie-compliance-categories-buttons {
  32. margin: 0 0 1em 0;
  33. max-width: 60%;
  34. float: left;
  35. }
  36. #sliding-popup .eu-cookie-compliance-more-button {
  37. cursor: pointer;
  38. display: inline;
  39. height: auto;
  40. margin: 0;
  41. padding: 0;
  42. border: none;
  43. text-decoration: underline;
  44. background: none;
  45. }
  46. #sliding-popup .eu-cookie-compliance-secondary-button {
  47. cursor: pointer;
  48. border: none;
  49. background: none;
  50. margin-top: 1em;
  51. padding: 0 8px;
  52. vertical-align: middle;
  53. }
  54. #sliding-popup .eu-cookie-compliance-default-button,
  55. #sliding-popup .eu-cookie-compliance-hide-button,
  56. #sliding-popup .eu-cookie-compliance-more-button-thank-you,
  57. #sliding-popup .eu-cookie-withdraw-button,
  58. .eu-cookie-withdraw-button,
  59. .eu-cookie-compliance-save-preferences-button {
  60. cursor: pointer;
  61. margin-right: 5px;
  62. margin-top: 1em;
  63. vertical-align: middle;
  64. overflow: visible;
  65. width: auto;
  66. -moz-box-shadow: inset 0 1px 0 0 #ffffff;
  67. -webkit-box-shadow: inset 0 1px 0 0 #ffffff;
  68. box-shadow: inset 0 1px 0 0 #ffffff;
  69. background-color: #ededed;
  70. background-image: -moz-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
  71. background-image: -webkit-gradient(linear, left top, left bottom, color-stop(5%, #ededed), color-stop(100%, #dfdfdf));
  72. background-image: -webkit-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
  73. background-image: -o-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
  74. background-image: -ms-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
  75. background-image: linear-gradient(to bottom, #ededed 5%, #dfdfdf 100%);
  76. -moz-border-radius: 6px;
  77. -webkit-border-radius: 6px;
  78. border-radius: 6px;
  79. border: 1px solid #dcdcdc;
  80. color: #000;
  81. font-family: Arial, sans-serif;
  82. font-weight: bold;
  83. padding: 4px 8px;
  84. text-decoration: none;
  85. text-shadow: 1px 1px 0 #ffffff;
  86. }
  87. #sliding-popup .eu-cookie-compliance-default-button:hover,
  88. #sliding-popup .eu-cookie-compliance-hide-button:hover,
  89. #sliding-popup .eu-cookie-compliance-more-button-thank-you:hover,
  90. #sliding-popup .eu-cookie-withdraw-button:hover {
  91. background-color: #dfdfdf;
  92. background-image: -moz-linear-gradient(top, #dfdfdf 5%, #ededed 100%);
  93. background-image: -webkit-gradient(linear, left top, left bottom, color-stop(5%, #dfdfdf), color-stop(100%, #ededed));
  94. background-image: -webkit-linear-gradient(top, #dfdfdf 5%, #ededed 100%);
  95. background-image: -o-linear-gradient(top, #dfdfdf 5%, #ededed 100%);
  96. background-image: -ms-linear-gradient(top, #dfdfdf 5%, #ededed 100%);
  97. background-image: linear-gradient(to bottom, #dfdfdf 5%, #ededed 100%);
  98. }
  99. #sliding-popup .eu-cookie-compliance-default-button:active,
  100. #sliding-popup .eu-cookie-compliance-hide-button:active,
  101. #sliding-popup .eu-cookie-compliance-more-button-thank-you:active,
  102. #sliding-popup .eu-cookie-withdraw-button:active {
  103. position: relative;
  104. top: 1px;
  105. }
  106. #sliding-popup .popup-content #popup-text {
  107. color: #fff;
  108. float: left;
  109. font-weight: bold;
  110. margin: 5px 0 0;
  111. max-width: 60%;
  112. }
  113. .eu-cookie-compliance-banner--categories .eu-cookie-compliance-message {
  114. max-width: 100%;
  115. }
  116. .eu-cookie-compliance-categories {
  117. clear: both;
  118. padding-top: 1em;
  119. }
  120. .eu-cookie-compliance-categories label {
  121. display: inline;
  122. }
  123. #sliding-popup .popup-content #popup-text h1,
  124. #sliding-popup .popup-content #popup-text h2,
  125. #sliding-popup .popup-content #popup-text h3,
  126. #sliding-popup .popup-content #popup-text p {
  127. color: #fff;
  128. font-size: 16px;
  129. font-weight: bold;
  130. line-height: 1.4;
  131. margin: 0 0 5px 0;
  132. }
  133. #sliding-popup .popup-content #popup-text h1 {
  134. font-size: 24px;
  135. }
  136. #sliding-popup .popup-content #popup-text h3 {
  137. font-size: 12px;
  138. }
  139. #sliding-popup .popup-content #popup-text p {
  140. font-size: 12px;
  141. display: inline;
  142. }
  143. .eu-cookie-withdraw-tab {
  144. padding: 4px 7px;
  145. cursor: pointer;
  146. }
  147. .sliding-popup-bottom .eu-cookie-withdraw-tab {
  148. border-width: 2px 2px 0;
  149. border-radius: 5px 5px 0 0;
  150. }
  151. .sliding-popup-top .eu-cookie-withdraw-tab {
  152. border-width: 0 2px 2px;
  153. border-radius: 0 0 5px 5px;
  154. }
  155. .eu-cookie-withdraw-wrapper.sliding-popup-top,
  156. .eu-cookie-withdraw-wrapper.sliding-popup-top .eu-cookie-withdraw-banner {
  157. transform: scaleY(-1);
  158. }
  159. .eu-cookie-withdraw-tab {
  160. position: absolute;
  161. top: 0;
  162. transform: translate(-50%, -100%);
  163. left: 50%;
  164. }
  165. .eu-cookie-withdraw-wrapper.sliding-popup-top .eu-cookie-withdraw-tab {
  166. transform: translate(-50%, -100%) scaleY(-1);
  167. }
  168. .eu-cookie-compliance-hidden {
  169. display: none;
  170. }
  171. @media screen and (max-width: 600px) {
  172. #sliding-popup .popup-content {
  173. max-width: 95%;
  174. }
  175. .eu-cookie-compliance-categories,
  176. #sliding-popup .popup-content #popup-text {
  177. max-width: 100%;
  178. }
  179. #sliding-popup .popup-content #popup-buttons {
  180. clear: both;
  181. float: none;
  182. margin: 5px 0 1em;
  183. max-width: 100%;
  184. }
  185. .eu-cookie-compliance-buttons.eu-cookie-compliance-has-categories {
  186. float: right;
  187. margin-top: -56px;
  188. }
  189. .eu-cookie-compliance-banner--categories .eu-cookie-compliance-buttons {
  190. position: initial;
  191. bottom: unset;
  192. right: unset;
  193. }
  194. }