oveleon / contao-cookiebar

Cookie bar for the Contao Open Source CMS
GNU Affero General Public License v3.0
58 stars 24 forks source link

Implement custom properties / Refactor cookiebar styles #205

Closed zoglo closed 4 months ago

zoglo commented 4 months ago

Bugfix

Description

The old cookiebar styles have been applied for Internet-Explorer 8 support back then and are not needed anymore.

203 has introcuded using display: flex so modernizing the CSS is something that we could do as well.

This PR:

Description

Adds following custom properties as well but has all the defaults - use devtools to customize and find out:

.cc-btn {
  var(--ccb-btn-bdr, #cfcfcf);
  var(--ccb-btn-clr, #444);
  var(--ccb-btn-bg, #f5f5f5);
  var(--ccb-btn-bg-hvr, #ececec);
}

.contao-cookiebar {
  --ccb-backdrop: rgba(0, 0, 0, .75);
  --ccb-anim-duration: .5s;

  --ccb-checked-clr: #399d32;
  --ccb-checked-bg: #dcf3db;
  --ccb-unchecked-clr: #9c9b99;
  --ccb-unchecked-bg: #fff;
  --ccb-disabled-clr: #c8c7c5;
  --ccb-disabled-bg: #f4f4f4;

  --ccb-align;
  --ccb-justify;

  var(--ccb-clr, #444);
  var(--ccb-text, #868686);
}

.cc-inner
  var(--ccb-bg, #fff);
  var(--ccb-box-shadow, rgba(99, 99, 99, 0.2));
}

.cc-group {
  var(--ccb-bdr, #d0d0d0);
}

.cc-cookie-info {
  var(--ccb-info-bg, #fff);
  var(--ccb-info-bdr, #efefef);
}

.cc-cookies {
  var(--ccb-cookies-bg, #fbfbfb);
  var(--ccb-cookies-bdr, #fbfbfb);
}

.cc-info {
  var(--ccb-detail-clr, #a2a2a2);
  var(--ccb-detail-clr-hvr, #717171);
}

@media (min-width: 768px) {
  .cc-inner {
    var(--ccb-max-width, 750px);
  }
}