CSS   42

jquery cookieBar css

Guest on 1st August 2022 02:04:52 PM

  1. @charset "UTF-8";
  2. /*!
  3.  * Cookie Bar component (https://github.com/kovarp/jquery.cookieBar)
  4.  * Version 1.2.6
  5.  *
  6.  * Copyright 2020 Pavel Kovář - Frontend developer [www.pavelkovar.cz]
  7.  * Licensed under MIT (https://github.com/kovarp/jquery.cookieBar/blob/master/LICENSE)
  8.  */*/* Settings */*/* Cookie Bar styles */*/
  9. .cookie-bar__inner {
  10.   background-color: #2d3c48;
  11.   color: #fff;
  12.   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  13.   font-size: .875rem;
  14.   padding: 1rem .5rem;
  15.   text-align: center;
  16. }
  17.  
  18. @media (min-width: 62rem) {
  19.   .cookie-bar__inner {
  20.     display: -webkit-box;
  21.     display: -ms-flexbox;
  22.     display: flex;
  23.     -webkit-box-pack: center;
  24.         -ms-flex-pack: center;
  25.             justify-content: center;
  26.     -webkit-box-align: center;
  27.         -ms-flex-align: center;
  28.             align-items: center;
  29.   }
  30. }
  31.  
  32. .cookie-bar__buttons {
  33.   display: block;
  34.   margin-top: .375rem;
  35. }
  36.  
  37. @media (min-width: 62rem) {
  38.   .cookie-bar__buttons {
  39.     display: inline;
  40.     margin-top: 0;
  41.   }
  42. }
  43.  
  44. .cookie-bar__btn {
  45.   background-color: #f07e23;
  46.   color: #fff;
  47.   border: none;
  48.   margin: 0 .875rem;
  49.   padding: .125rem .875rem;
  50.   -webkit-transition: background-color .3s;
  51.   -o-transition: background-color .3s;
  52.   transition: background-color .3s;
  53.   cursor: pointer;
  54. }
  55.  
  56. .cookie-bar__btn:hover {
  57.   background-color: #f07e23;
  58. }
  59.  
  60. .cookie-bar__btn:active {
  61.   background-color: #f07e23;
  62. }
  63.  
  64. .cookie-bar__link {
  65.   margin: 0 .5rem;
  66. }
  67.  
  68. .cookie-bar a {
  69.   color: #fff;
  70.   text-decoration: underline;
  71. }
  72.  
  73. .cookie-bar a:hover {
  74.   text-decoration: none;
  75.   color: #aaa;
  76. }/* Privacy popup */*/
  77. .cookie-bar-privacy-popup {
  78.   position: fixed;
  79.   top: 0;
  80.   right: 0;
  81.   bottom: 0;
  82.   left: 0;
  83.   background-color: rgba(0, 0, 0, 0.5);
  84.   display: -webkit-box;
  85.   display: -ms-flexbox;
  86.   display: flex;
  87.   -webkit-box-pack: center;
  88.       -ms-flex-pack: center;
  89.           justify-content: center;
  90.   -webkit-box-align: center;
  91.       -ms-flex-align: center;
  92.           align-items: center;
  93. }
  94.  
  95. .cookie-bar-privacy-popup.cookie-bar-privacy-popup--hidden {
  96.   display: none;
  97. }
  98.  
  99. .cookie-bar-privacy-popup__dialog {
  100.   background-color: white;
  101.   width: 100%;
  102.   max-width: 50rem;
  103.   max-height: 90vh;
  104.   overflow: auto;
  105.   padding: 2rem 1.5rem 1.5rem;
  106.   position: relative;
  107. }
  108.  
  109. .cookie-bar-privacy-popup__dialog__close {
  110.   position: absolute;
  111.   top: 0;
  112.   right: 0;
  113.   background-color: black;
  114.   color: white;
  115.   display: block;
  116.   width: 2rem;
  117.   height: 2rem;
  118.   border: none;
  119.   cursor: pointer;
  120. }
  121.  
  122. .cookie-bar-privacy-popup__dialog__close:before, .cookie-bar-privacy-popup__dialog__close:after {
  123.   content: '';
  124.   display: block;
  125.   width: 1rem;
  126.   height: .25rem;
  127.   background-color: white;
  128.   position: absolute;
  129.   top: 50%;
  130.   left: 25%;
  131.   -webkit-transform-origin: center center;
  132.       -ms-transform-origin: center center;
  133.           transform-origin: center center;
  134.   margin-top: -.125rem;
  135. }
  136.  
  137. .cookie-bar-privacy-popup__dialog__close:before {
  138.   -webkit-transform: rotate(45deg);
  139.       -ms-transform: rotate(45deg);
  140.           transform: rotate(45deg);
  141. }
  142.  
  143. .cookie-bar-privacy-popup__dialog__close:after {
  144.   -webkit-transform: rotate(-45deg);
  145.       -ms-transform: rotate(-45deg);
  146.           transform: rotate(-45deg);
  147. }
  148.  
  149. .cookie-bar-privacy-popup__dialog p:last-child {
  150.   margin-bottom: 0;
  151. }/* Cookie Bar layouts */*/
  152. .cookie-bar--bottom-left,
  153. .cookie-bar--bottom-right,
  154. .cookie-bar--bottom {
  155.   z-index: 100;
  156.   position: fixed;
  157. }
  158.  
  159. .cookie-bar--bottom {
  160.   right: 0;
  161.   bottom: 0;
  162.   left: 0;
  163. }
  164.  
  165. .cookie-bar--bottom-left {
  166.   left: 0.9375rem;
  167. }
  168.  
  169. .cookie-bar--bottom-right {
  170.   right: 0.9375rem;
  171. }
  172.  
  173. .cookie-bar--bottom-right,
  174. .cookie-bar--bottom-left {
  175.   bottom: 0.9375rem;
  176. }
  177.  
  178. @media (min-width: 48rem) {
  179.   .cookie-bar--bottom-right,
  180.   .cookie-bar--bottom-left {
  181.     width: 22.5rem;
  182.   }
  183. }
  184.  
  185. @media (min-width: 48rem) {
  186.   .cookie-bar--bottom-right .cookie-bar__inner,
  187.   .cookie-bar--bottom-left .cookie-bar__inner,
  188.   .cookie-bar--bottom-right .cookie-bar__buttons,
  189.   .cookie-bar--bottom-left .cookie-bar__buttons {
  190.     display: block;
  191.   }
  192. }
  193.  
  194. @media (min-width: 48rem) {
  195.   .cookie-bar--bottom-right .cookie-bar__buttons,
  196.   .cookie-bar--bottom-left .cookie-bar__buttons {
  197.     margin-top: .375rem;
  198.   }
  199. }
  200.  
  201. .cookie-bar--bottom-right .cookie-bar__inner,
  202. .cookie-bar--bottom-left .cookie-bar__inner {
  203.   line-height: 1.3;

Raw Paste

Login or Register to edit or fork this paste. It's free.