GH - Dark Purlple by bastien-baloup

/* ==UserStyle==
@name         GFL07's dark purple
@version      20230922.22.34
@namespace    ?
==/UserStyle== */
@-moz-document domain("gest-hordes2.eragaming.fr") {
  /* variable overwrite */
  * {
    --bs-list-group-bg: var(--primary-color) !important;
    --bs-list-group-disabled-bg: var(--primary-color) !important;
    --bs-pagination-bg: var(--primary-color) !important;
    --bs-pagination-disabled-bg: var(--primary-color) !important;
    --bs-pagination-active-bg: var(--tertiary-color) !important;
    --bs-pagination-focus-bg: var(--secondary-color) !important;
    --bs-pagination-focus-color: var(--primary-color) !important;
    --bs-card-bg: var(--tertiary-color) !important;
    --bs-nav-link-color: var(--secondary-color) !important;
    --tertiary-color: #27242c !important;
    --secondary-color: #f9e2ff !important;
    --primary-color: #0f0e12 !important;
    --bs-modal-bg: var(--tertiary-color) !important;
    --bs-modal-border-color: var(--secondary-color) !important;
    --bs-border-color: var(--secondary-color) !important;
    --bs-body-bg: #000;
    --background-color: #000;
    --primary-font-color: var(--secondary-color) !important;
    --primary-border-color: var(--secondary-color) !important;
    --secondary-font-color: var(--secondary-color) !important;
    --tertiary-font-color: var(--secondary-color) !important;
  }
  
  /* main background */
  body, #contenuTextRepa {
    background: #000;
    color: var(--secondary-color) !important;
  }

  /* Buttons */
  /* the classes uses orverwrites to change the button colors witch forces me to do the same for each button colors */
  .btn-danger {
    --bs-btn-bg: hsl(343deg, 81%, 75%) !important;
    --bs-btn-active-bg: hsl(343deg, 81%, 85%)!important;
    --bs-btn-hover-bg: hsl(343deg, 81%, 85%) !important;
    --bs-btn-border-color: hsl(343deg, 81%, 75%) !important;
    --bs-btn-active-border-color: hsl(343deg, 81%, 85%) !important;
    --bs-btn-hover-border-color: hsl(343deg, 81%, 85%) !important;
    --bs-btn-color: var(--primary-color) !important;
    --bs-btn-active-color: var(--primary-color) !important;
    --bs-btn-hover-color: var(--primary-color) !important;
    --bs-btn-disabled-bg: hsl(343deg, 81%, 75%) !important;
    --bs-btn-disabled-border-color: hsl(343deg, 81%, 75%) !important;
    --bs-btn-disabled-color: var(--primary-color) !important;
  }

  .btn-success {
    --bs-btn-bg: hsl(115deg, 54%, 76%) !important;
    --bs-btn-border-color: hsl(115deg, 54%, 76%) !important;
    --bs-btn-color: var(--primary-color) !important;
    --bs-btn-active-bg: hsl(115deg, 54%, 85%) !important;
    --bs-btn-hover-bg: hsl(115deg, 54%, 85%) !important;
    --bs-btn-active-border-color: hsl(115deg, 54%, 85%) !important;
    --bs-btn-hover-border-color: hsl(115deg, 54%, 85%) !important;
    --bs-btn-active-color: var(--primary-color) !important;
    --bs-btn-hover-color: var(--primary-color) !important;
    --bs-btn-disabled-bg: hsl(115deg, 54%, 76%) !important;
    --bs-btn-disabled-border-color: hsl(115deg, 54%, 76%) !important;
    --bs-btn-disabled-color: var(--primary-color) !important;
  }

  .btn-warning {
    --bs-btn-bg: hsl(41deg, 86%, 83%) !important;
    --bs-btn-border-color: hsl(41deg, 86%, 83%) !important;
    --bs-btn-color: var(--primary-color) !important;
    --bs-btn-active-bg: hsl(41deg, 86%, 91%) !important;
    --bs-btn-hover-bg: hsl(41deg, 86%, 91%) !important;
    --bs-btn-active-border-color: hsl(41deg, 86%, 91%) !important;
    --bs-btn-hover-border-color: hsl(41deg, 86%, 91%) !important;
    --bs-btn-active-color: var(--primary-color) !important;
    --bs-btn-hover-color: var(--primary-color) !important;
    --bs-btn-disabled-bg: hsl(41deg, 86%, 83%) !important;
    --bs-btn-disabled-border-color: hsl(41deg, 86%, 83%) !important;
    --bs-btn-disabled-color: var(--primary-color) !important;
  }

  .btn-primary {
    --bs-btn-bg: hsl(217deg, 92%, 76%) !important;
    --bs-btn-border-color: hsl(217deg, 92%, 76%) !important;
    --bs-btn-color: var(--primary-color) !important;
    --bs-btn-active-bg: hsl(217deg, 92%, 85%) !important;
    --bs-btn-hover-bg: hsl(217deg, 92%, 85%) !important;
    --bs-btn-active-border-color: hsl(217deg, 92%, 85%) !important;
    --bs-btn-hover-border-color: hsl(217deg, 92%, 85%) !important;
    --bs-btn-active-color: var(--primary-color) !important;
    --bs-btn-hover-color: var(--primary-color) !important;
    --bs-btn-disabled-bg: hsl(217deg, 92%, 76%) !important;
    --bs-btn-disabled-border-color: hsl(217deg, 92%, 76%) !important;
    --bs-btn-disabled-color: var(--primary-color) !important;
  }

  .btn-secondary {
    --bs-btn-bg: hsl(267deg, 84%, 81%) !important;
    --bs-btn-border-color: hsl(267deg, 84%, 81%) !important;
    --bs-btn-color: var(--primary-color) !important;
    --bs-btn-active-bg: hsl(267deg, 84%, 88%) !important;
    --bs-btn-hover-bg: hsl(267deg, 84%, 88%) !important;
    --bs-btn-active-border-color: hsl(267deg, 84%, 88%) !important;
    --bs-btn-hover-border-color: hsl(267deg, 84%, 88%) !important;
    --bs-btn-active-color: var(--primary-color) !important;
    --bs-btn-hover-color: var(--primary-color) !important;
    --bs-btn-disabled-bg: hsl(267deg, 84%, 81%) !important;
    --bs-btn-disabled-border-color: hsl(267deg, 84%, 81%) !important;
    --bs-btn-disabled-color: var(--primary-color) !important;
  }

  .btn-info {
    --bs-btn-bg: hsl(232deg, 97%, 83%) !important;
    --bs-btn-border-color: hsl(232deg, 97%, 83%) !important;
    --bs-btn-color: var(--primary-color) !important;
    --bs-btn-active-bg: hsl(232deg, 97%, 88%) !important;
    --bs-btn-hover-bg: hsl(232deg, 97%, 88%) !important;
    --bs-btn-active-border-color: hsl(232deg, 97%, 88%) !important;
    --bs-btn-hover-border-color: hsl(232deg, 97%, 88%) !important;
    --bs-btn-active-color: var(--primary-color) !important;
    --bs-btn-hover-color: var(--primary-color) !important;
    --bs-btn-disabled-bg: hsl(232deg, 97%, 83%) !important;
    --bs-btn-disabled-border-color: hsl(232deg, 97%, 83%) !important;
    --bs-btn-disabled-color: var(--primary-color) !important;
  }
  
  /* background color classes */
  .bg-primary {
    background-color: rgb(137, 180, 250) !important;
    color: var(--primary-color) !important;
  }
  
  /* custom checkbox */
  input[type = "checkbox"] {
    appearance: none;
    margin: 0;
    font: inherit;
    color: currentColor;
    width: 1.15em;
    height: 1.15em;
    border: 0.15em solid currentColor;
    border-radius: 0.15em;
    transform: translateY(-0.075em);
    display: grid;
    place-content: center;
    background-color: var(--primary-color)!important;
  }

  input[type = "checkbox"]::before {
    content: "";
    width: 0.33em;
    height: 0.66em;
    transform: scale(0);
    transition: 120ms transform ease-in-out;
    border-bottom: 0.2em solid hsl(115deg, 54%, 76%);
    border-right: 0.2em solid hsl(115deg, 54%, 76%);
  }

  input[type = "checkbox"]:not(.form-check-input):checked::before {
    transform: scale(1) translateY(-20%) rotate(45deg);
  }
  
  /* corrections for the checkboxes that are styled like a toogle switch*/
  .form-check-input {
    --bs-form-switch-bg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='rgb(249, 226, 255)'/%3E%3C/svg%3E") !important;
    background-color: var(--secondary-color) !important;
  }

  /* main color overwrites*/
  /* most of it has been written before the variable overwrite so some part of the selectors might be redondant now*/
  header, #zoneInfoVilleAutre > div > div, .boutonMenuCarte, #menuSite a:hover, .ligneTotalDecharge, table tbody tr:nth-child(2n + 1), #formRepa table thead, div#adminMenu a:hover, #zoneCarte, footer, .divZoneInfoVille:nth-child(2n), .objetBanque, .blocRuine, .fondWhite02, #journalVilleTab tbody tr:nth-child(2n), #zonePlansChantierConteneur > ul > li:hover, .active > .page-link, .page-link.active, .fondWhite01, #formRepa table, .boutonMenuCreation, #form_search_bat, .card, .infoBulle span, #listChantier, #listChantierPlansRuine, #listEvoChantier, #listEvoChantier table tbody tr:nth-child(2n), #zone_expHeros, #zone_kz, #zone_pc, #zone_pda, #zone_pp, .point_d_ame .pda_jour_point, .enteteTab_ency, .point_clean .pc_jour_point, .point_pande .pp_jour_point, .kill_despoir .kd_zz_kill, table tbody tr > td.caseCarte, .list-group-item, #zone-inscription_expedition > fieldset, .tab-content > div > div, #zone_contact_body, #compteurCitoyen > div, #zone_tabs_game, #zone_play_game, .container-tabs, .groupJump, #container_infoAme_general,  #container_infoAme > .panel_ame, #zoneListingTitres, #zone_recap_expe, .background-secondary {
    background: var(--tertiary-color) !important;
  }

  .PanneauElements, .popUpGeneral, .listCitoyensVVivantReduit thead, #popUpMajCoffre, #ruineFlex, table tbody tr:nth-child(2n), #tabs_outils_chantiers #tabs_gestion_outils_chantiers ul li, #tabs_outils_chantiers #tabs_recap_outils_chantiers ul li, #zoneInfoCarte.movable, #infoBulleCarte, .detailCase, #popUpMajCarte, #infoCamping, div#adminMenu a, #corpsAme #zone_groupe_avatar_listing #zoneListingPictos .tablePictoAme, #corpsAme .zoneHistoPictos .tablePictoAme, #menuSite a, .divZoneInfoVille:nth-child(2n + 1), .catBanqueTitre, #descMappingRuine p, .fondBlack02, #journalVilleTab tbody, .titreRuine, #dechargeCorps table thead th, .fondBlack01, #journalVilleTab tbody tr:nth-child(2n + 1), .jumpCorps table th, .colonneDispoInsciptiondiv:not(.dispoCandidature), thead, .nav-item, .titreCategorieChantier, thead tr, #listEvoChantier table tbody tr:nth-child(2n + 1), .point_d_ame .pda_jour_point .pda_jour, .point_clean .pc_jour_point .pc_jour, .point_pande .pp_jour_point .pp_jour, .kill_despoir .kd_zz_kill .kd_zombie, #corpsAme #zone_groupe_avatar_listing #zoneListingPictos, .listHistoVille, .tablePicto .entete_classement_picto, .colonneDispoOptionPerso div, .inscription_expedition, .page-link, #ency_bat div.container-tabs, #compteurCitoyen, .borderBott...