CSS   22

dark-bottom.css

Guest on 19th August 2021 04:30:10 PM

  1. .cc_banner-wrapper {
  2.     z-index: 9001;
  3.     position: relative
  4. }
  5.  
  6. .cc_container .cc_btn {
  7.     cursor: pointer;
  8.     text-align: center;
  9.     font-size: 0.6em;
  10.     transition: font-size 200ms;
  11.     line-height: 1em;
  12.     float: left;
  13. }
  14.  
  15. .cc_container .cc_message {
  16.     font-size: 0.6em;
  17.     transition: font-size 200ms;
  18.     margin: 0;
  19.     padding: 0;
  20.     line-height: 1.5em;
  21.     padding-left: 300px;
  22. }
  23.  
  24. .cc_container .cc_logo {
  25.     display: none;
  26.     text-indent: -1000px;
  27.     overflow: hidden;
  28.     width: 100px;
  29.     height: 22px;
  30.     background-size: cover;
  31.     background-image: url(//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/1.0.9/logo.png);
  32.     opacity: 0.9;
  33.     transition: opacity 200ms
  34. }
  35.  
  36. .cc_container .cc_logo:hover,
  37. .cc_container .cc_logo:active {
  38.     opacity: 1
  39. }
  40.  
  41. @media screen and (min-width: 500px) {
  42.     .cc_container .cc_btn {
  43.         font-size: 0.8em
  44.     }
  45.     .cc_container .cc_message {
  46.         font-size: 0.8em;
  47.         padding-left: 300px;
  48.     }
  49. }
  50.  
  51. @media screen and (min-width: 768px) {
  52.     .cc_container .cc_btn {
  53.         font-size: 1em
  54.     }
  55.     .cc_container .cc_message {
  56.         font-size: 1em;
  57.         line-height: 1em
  58.     }
  59. }
  60.  
  61. @media screen and (min-width: 992px) {
  62.     .cc_container .cc_message {
  63.         font-size: 1em
  64.     }
  65. }
  66.  
  67. @media print {
  68.     .cc_banner-wrapper,
  69.     .cc_container {
  70.         display: none
  71.     }
  72. }
  73.  
  74. .cc_container {
  75.     position: fixed;
  76.     left: 0;
  77.     right: 0;
  78.     bottom: 0;
  79.     overflow: hidden;
  80.     padding: 10px
  81. }
  82.  
  83. .cc_container .cc_btn {
  84.     padding: 8px 10px;
  85.     background-color: #007aff;
  86.     cursor: pointer;
  87.     transition: font-size 200ms;
  88.     text-align: center;
  89.     font-size: 0.6em;
  90.     display: block;
  91.     width: 33%;
  92.     margin-left: 10px;
  93.     float: left;
  94.     max-width: 120px
  95. }
  96.  
  97. .cc_container .cc_message {
  98.     transition: font-size 200ms;
  99.     font-size: 0.6em;
  100.     display: block
  101. }
  102.  
  103. @media screen and (min-width: 500px) {
  104.     .cc_container .cc_btn {
  105.         font-size: 0.8em
  106.     }
  107.     .cc_container .cc_message {
  108.         margin-top: 0.5em;
  109.         font-size: 0.8em
  110.     }
  111. }
  112.  
  113. @media screen and (min-width: 768px) {
  114.     .cc_container {
  115.         padding: 15px 30px 15px
  116.     }
  117.     .cc_container .cc_btn {
  118.         font-size: 1em;
  119.         padding: 8px 15px
  120.     }
  121.     .cc_container .cc_message {
  122.         font-size: 1em
  123.     }
  124. }
  125.  
  126. @media screen and (min-width: 992px) {
  127.     .cc_container .cc_message {
  128.         font-size: 1em
  129.     }
  130. }
  131.  
  132. .cc_container {
  133.     background: #222;
  134.     color: #fff;
  135.     font-size: 17px;
  136.     font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial;
  137.     box-sizing: border-box
  138. }
  139.  
  140. .cc_container::-moz-selection {
  141.     background: #ff5e99;
  142.     color: #fff;
  143.     text-shadow: none
  144. }
  145.  
  146. .cc_container .cc_btn,
  147. .cc_container .cc_btn:visited {
  148.     color: #000;
  149.     background-color: #007aff;
  150.     transition: background 200ms ease-in-out, color 200ms ease-in-out, box-shadow 200ms ease-in-out;
  151.     -webkit-transition: background 200ms ease-in-out, color 200ms ease-in-out, box-shadow 200ms ease-in-out;
  152.     border-radius: 5px;
  153.     -webkit-border-radius: 5px
  154. }
  155.  
  156. .cc_container .cc_btn:hover,
  157. .cc_container .cc_btn:active {
  158.     background-color: #fff;
  159.     color: #000
  160. }
  161.  
  162. .cc_container a,
  163. .cc_container a:visited {
  164.     text-decoration: none;
  165.     color: #31a8f0;
  166.     transition: 200ms color
  167. }
  168.  
  169. .cc_container a:hover,
  170. .cc_container a:active {
  171.     color: #b2f7ff
  172. }
  173.  
  174. @-webkit-keyframes slideUp {
  175.     0% {
  176.         -webkit-transform: translateY(66px);
  177.         transform: translateY(66px)
  178.     }
  179.     100% {
  180.         -webkit-transform: translateY(0);
  181.         transform: translateY(0)
  182.     }
  183. }
  184.  
  185. @keyframes slideUp {
  186.     0% {
  187.         -webkit-transform: translateY(66px);
  188.         -ms-transform: translateY(66px);
  189.         transform: translateY(66px)
  190.     }
  191.     100% {
  192.         -webkit-transform: translateY(0);
  193.         -ms-transform: translateY(0);
  194.         transform: translateY(0)
  195.     }
  196. }
  197.  
  198. .cc_container,
  199. .cc_message,
  200. .cc_btn {
  201.     animation-duration: 0.8s;
  202.     -webkit-animation-duration: 0.8s;
  203.     -moz-animation-duration: 0.8s;
  204.     -o-animation-duration: 0.8s;
  205.     -webkit-animation-name: slideUp;
  206.     animation-name: slideUp
  207. }

Raw Paste


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