You are here

cookie_banner.css in Cookie_Banner 8

Same filename and directory in other branches
  1. 7 css/cookie_banner.css
/**
 * Cookie Banner - Main CSS file
 */
#cookie-banner {
  -webkit-transform: translateZ(0);
  position:          fixed;
  z-index:           300;
  bottom:            0;
  color:             #fff;
  background:        #090703;
  background:        rgba(0, 0, 0, .8);
  padding:           20px 0 20px 20px;
  left:              7%;
  right:             7%;
}

/* On smaller devices stretch the banner fully */
@media (max-width: 768px) {
  #cookie-banner {
    left:  0;
    right: 0;
  }
}

/* Close button */
#cookie-banner .close {
  position:            absolute;
  z-index:             305;
  top:                 5px;
  right:               5px;
  border:              none;
  margin:              0;
  padding:             12px;
  background-color:    transparent;
  width:               26px;
  height:              26px;
  background-image:    url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAA1CAYAAABfsPstAAACO0lEQVRYhd2YbZHbMBCGH3dKIIVgCj4IpWAKCoQchCsEGcIFQg/CGcIZQgJh+8OWKyu7iuyk/tF3JpMPrfaRpVdaTeB/UwUgIrmYGmiBn0ADHKbfr0APfABnYDAhVTV+EBHtVYuIl3L5qc9NrllKoxORywpI0GXqWwRyGwCpFjAN9AxIUGuBatk2XZYuU04AvkXmOEWOitUBP6b3NW2HKefiiWpjVF6W6+cL22LVMehkBB3k1pFegTDFajrFoPfCJ4qTagPQ9B6DvoygHKwEIiLyFYPuKQe7e3qkrrsnzZHab7Zkx6n7vRKy2Qy72Xu3DZsL9NNotfZc2zyYFPRPD9UY9OwyMdckDbRb4du1lMdr9rTLyW7XrRLQw6qqatWh+pC+A3R9NqZo6lxjTx1Ma+Q/1amrGS8XrnDQHfBLA+amzgGfKyBzn67X+2ggB3jWFrVRB8BrsBQUII/Kdz2tBaqBtydAYthcIna7qQZQjb7wHXBktPIxSTi3ueamLciFpwqgVgkCeE2+h4QBkosNamNQYwRpa3Y0klrr25SALBde4y9dj8fecwtQbQTlYEE5yJx7t5tqAOUOxNh5qTQ3phpKQJq7IHmSjL1hPOFn0IcRpLnLozvMsvcCdDaC0oRh4TWDWPY+x6ABY2fz9yRP3TW3ZezdhfoUF76asQZtKQ+arsCLaxjSwjdgz/MWvcbVNt1HlsvW6uia5VJoGza3b+7pqkEsUIC9kN+Iah8NAvlbUNDD1635j8E99AfFl0/CdPxDCwAAAABJRU5ErkJggg==');
  background-position: 0 0;
}

#cookie-banner .close:hover,
#cookie-banner .close:focus {
  background-position: 0 27px;
}

#cookie-banner .close span {
  position: absolute;
  width:    1px;
  height:   1px;
  margin:   -1px;
  padding:  0;
  overflow: hidden;
  clip:     rect(0, 0, 0, 0);
  border:   0;
}

/* Cookie banner text */
#cookie-banner p {
  margin:      0 40px 0 0;
  padding:     0;
  line-height: 1.6em;
  font-size:   20px;
}

#cookie-banner p a {
  color:       #9cf;
  font-size:   13px;
  display:     block;
  font-weight: normal;
}

@media (max-width: 768px) {
  #cookie-banner p {
    font-size: 16px;
  }
}

#cookie-banner p a:hover {
  color:           #449AF0;
  text-decoration: underline;
}

/**
 * Cookie Banner - Right to Left support.
 */
[dir="rtl"] #cookie-banner {
  padding: 20px 20px 20px 0;
}

[dir="rtl"] #cookie-banner .close {
  right: auto;
  left:  5px;
}

[dir="rtl"] #cookie-banner p {
  margin: 0 0 0 40px;
}

File

css/cookie_banner.css
View source
  1. /**
  2. * Cookie Banner - Main CSS file
  3. */
  4. #cookie-banner {
  5. -webkit-transform: translateZ(0);
  6. position: fixed;
  7. z-index: 300;
  8. bottom: 0;
  9. color: #fff;
  10. background: #090703;
  11. background: rgba(0, 0, 0, .8);
  12. padding: 20px 0 20px 20px;
  13. left: 7%;
  14. right: 7%;
  15. }
  16. /* On smaller devices stretch the banner fully */
  17. @media (max-width: 768px) {
  18. #cookie-banner {
  19. left: 0;
  20. right: 0;
  21. }
  22. }
  23. /* Close button */
  24. #cookie-banner .close {
  25. position: absolute;
  26. z-index: 305;
  27. top: 5px;
  28. right: 5px;
  29. border: none;
  30. margin: 0;
  31. padding: 12px;
  32. background-color: transparent;
  33. width: 26px;
  34. height: 26px;
  35. background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAA1CAYAAABfsPstAAACO0lEQVRYhd2YbZHbMBCGH3dKIIVgCj4IpWAKCoQchCsEGcIFQg/CGcIZQgJh+8OWKyu7iuyk/tF3JpMPrfaRpVdaTeB/UwUgIrmYGmiBn0ADHKbfr0APfABnYDAhVTV+EBHtVYuIl3L5qc9NrllKoxORywpI0GXqWwRyGwCpFjAN9AxIUGuBatk2XZYuU04AvkXmOEWOitUBP6b3NW2HKefiiWpjVF6W6+cL22LVMehkBB3k1pFegTDFajrFoPfCJ4qTagPQ9B6DvoygHKwEIiLyFYPuKQe7e3qkrrsnzZHab7Zkx6n7vRKy2Qy72Xu3DZsL9NNotfZc2zyYFPRPD9UY9OwyMdckDbRb4du1lMdr9rTLyW7XrRLQw6qqatWh+pC+A3R9NqZo6lxjTx1Ma+Q/1amrGS8XrnDQHfBLA+amzgGfKyBzn67X+2ggB3jWFrVRB8BrsBQUII/Kdz2tBaqBtydAYthcIna7qQZQjb7wHXBktPIxSTi3ueamLciFpwqgVgkCeE2+h4QBkosNamNQYwRpa3Y0klrr25SALBde4y9dj8fecwtQbQTlYEE5yJx7t5tqAOUOxNh5qTQ3phpKQJq7IHmSjL1hPOFn0IcRpLnLozvMsvcCdDaC0oRh4TWDWPY+x6ABY2fz9yRP3TW3ZezdhfoUF76asQZtKQ+arsCLaxjSwjdgz/MWvcbVNt1HlsvW6uia5VJoGza3b+7pqkEsUIC9kN+Iah8NAvlbUNDD1635j8E99AfFl0/CdPxDCwAAAABJRU5ErkJggg==');
  36. background-position: 0 0;
  37. }
  38. #cookie-banner .close:hover,
  39. #cookie-banner .close:focus {
  40. background-position: 0 27px;
  41. }
  42. #cookie-banner .close span {
  43. position: absolute;
  44. width: 1px;
  45. height: 1px;
  46. margin: -1px;
  47. padding: 0;
  48. overflow: hidden;
  49. clip: rect(0, 0, 0, 0);
  50. border: 0;
  51. }
  52. /* Cookie banner text */
  53. #cookie-banner p {
  54. margin: 0 40px 0 0;
  55. padding: 0;
  56. line-height: 1.6em;
  57. font-size: 20px;
  58. }
  59. #cookie-banner p a {
  60. color: #9cf;
  61. font-size: 13px;
  62. display: block;
  63. font-weight: normal;
  64. }
  65. @media (max-width: 768px) {
  66. #cookie-banner p {
  67. font-size: 16px;
  68. }
  69. }
  70. #cookie-banner p a:hover {
  71. color: #449AF0;
  72. text-decoration: underline;
  73. }
  74. /**
  75. * Cookie Banner - Right to Left support.
  76. */
  77. [dir="rtl"] #cookie-banner {
  78. padding: 20px 20px 20px 0;
  79. }
  80. [dir="rtl"] #cookie-banner .close {
  81. right: auto;
  82. left: 5px;
  83. }
  84. [dir="rtl"] #cookie-banner p {
  85. margin: 0 0 0 40px;
  86. }