Dealabs Dark Theme Lite by Nojevah

/* ==UserStyle==
@name           Dealabs Dark Theme Lite
@namespace      dealabs.com
@version        0.6
@description    Dark theme en attendant celui de Dealabs
@author         Nojevah
==/UserStyle== */

@-moz-document domain("dealabs.com") {

/* le fond, ce qui est en dessous de tout le reste */
.bg--off {
    background-color: #000000
}

/* la couleur de fond principale pour la plupart des éléments */
.thread--type-list, .card, .subNav, .text--overlay, .bg--main, .bg--color-white { 
    background-color: #111111 
}

/* le titre des deals, sur la page d'accueil et sur la page du deal */
.thread-title {
    color: #FFFFFF
}

/* le texte de manière générale, susceptible de casser des éléments, beaucoup utilisé */
/* mettre blanc pur peut sembler un peu agressif pour l'oeil, donc par déafut plutôt gris clair */
.text--color-charcoal, .text--color-charcoalTint {
    color: #bbbbbb
}

/* effet d'overflow, pour les titres longs qui empièteraient sur les prix
compliqué IMO, mais conservé pour rester cohérent avec le site */
.overflow--fade::after {
    background: linear-gradient(90deg,hsla(0,0%,100%,0) 0,#111111 80%);
}
.text--overlay::before {  
    background-image: linear-gradient(90deg,hsla(0,0%,100%,0),#111111 90%);
}
.thread-title--list::after {
    background: linear-gradient(90deg,hsla(0,0%,100%,0),#111111 50%,#111111)
}

/* la température: l'effet de style "outline" a été supprimé, parce que ça fait moche,
/* et sur le site en blanc, il ne se voit pas !*/
.vote-box {
    background-color: #002222;
    box-shadow: none
}
/* le texte qui remplace/accompagne la température */
.vote-temp--inert {
  color: #bbbbbb;
}

/* le récapitulatif du deal sur la page du deal, quand on scrolle vers le bas */
.stickyBar-top { 
    background-color: #002222
}

/* le bandeau qui gère la navigation des pages, en bas */
.bg--color-greyPanel { 
    background-color: #1c1c1c
}

/* Le bandeau "Ecrire un commentaire", "Ajouter des infos", "Expiré" etc. sur la page des deals */
.bg--em { 
    background-color: #002222
}

/* Le texte sur le bandeau évoqué au-dessus, mais également la mention "j'aime" et "répondre" dans les commentaires */
.button--type-text.button--mode-secondary {
  --text-default: #558888;
}

/* les fenêtres de saisies/choix qui s'agrandissent pour tout ce qui est recherche notamment */
/* peut-être des ratés, mais vraiment trop blanc par défaut quand on clique dedans */
.dropdown-content, .subNavMenu--menu .subNavMenu-list  {   
    background-color: #002222;
}

/* l'effet lorsqu'on passe la souris ("hover") sur une entrée de la liste de recherches */
/* !!!! pas trouvé la bonne classe donc potentiellement pas top :/ !!!! */
.autoSuggest-suggestion.autoSuggest-suggestion--hoverHighlight:hover {   
    background-color: #001111 !important;
}



/* l'effet de style quand on clique sur une discussion et que le site nous dirige sur le dernier commentaire */
@keyframes pulseBgColor {
  0% {
    background-color:initial
  }
  15% {
    background-color:#12222b
  }
  85% {
    background-color:#12222b
  }
  to {
    background-color:initial
  }
}

/* texte utilisé à plusieurs endroits, peut potentiellement casser des trucs:
/* le prix barré, "il y a 2 minutes" des commentaires, les ellipses des pages, "en réponse à" */
/* potentiellement, on peut différencier les valeurs de chaque élément, mais la flemme, + choix de Dealabs */
.mute--text {
    color: #887788
}



.checkbox-text {
    color: #00aacc
}

/* espace commentaire: Nom du "posteur" */
.user {
    color: #995599
}

/* la partie "badge" des posteurs, genre "Auteur" */
/* la couleur du texte est dans la propriété juste en dessous */
.textBadge--greyBackground {
    background-color:#12226b  
}

/* couleur de texte globale pour certains éléments, mais peut potentiellement casser des trucs */
/* "VOIR TOUS LES DEALS" de certaines opérations, mais aussi "Auteur" dans les commentaires */
.text--color-black {
    color: #ffff00
}

/* Sous la flamme des deals, pour la rendre plus visible */
/* pas sûr que ce soit une bonne idée */
.threadTempBadge.text--color-white {
  color: #bb0;
}

/* Profil , quand on cliqur sur son avatar, le menu */
.popover--menu .popover-content {
    background-color: #002222
}

/* Profil, l'effet "hover"; pas trouvé la bonne classe hélas, donc potentiellement dangereux*/
.navDropDown-link:hover {   
    background-color: #001111
}

/* les notifications et les messages*/
.notifications-content {
    background-color: #002222
}

.notification-item {
    background-color: #000044
}

.notification-item:hover {
    background-color: #000022
}

.notification-item--read, .conversationList-msg--read:not(.conversationList-msg--active) {
    background-color: #002222
}
.notification-item--read:hover, .conversationList-msg--read:not(.conversationList-msg--active):hover {
    background-color: #001111 
}
.conversationList-msgPreview {
    color: #cccccc
}
.conversationList-msg {
    background-color:#000044
}

/* l'espace entre 2 commentaires: masqué, je ne vois pas l'intérêt avec le dark theme */
.commentList-item:not(:last-child) {
    border-bottom: none
}

/* tentative de retouche des zones de saisie de commentaire, ça fait peur, dès que c'est de la saisie */
.redactor {
    background-color: #002222;
}

/* Le texte saisi dans les zones de... saisie (écrire un commentaire) */
.redactor-editor{
    color: #ffffff
}

/* le panneau des emoji */
.popover--default .popover-content {
    background-color: #002222  
}

/* les emoji */
.button--emoji {
    --background-default: #002222 ;
}

/* les filtres de recherche sur la gauche */
.input {
    background-color: #002222; 
}

/* d'autres filtres de recherche sur la gauche */
.select-ctrl.input + .select-fake .select-txt {
    background-color: #002222; 
}

/* la recherche en haut */
/* jaune un peu trop visible peut-être, mais permet de bien voir ce qu'on a entré,
   notamment quand on fait pas mal de recherches en même temps */
.search {
    color: #ffff55
}

/* du texte, notamment sur les filtres de recherche à gauche, potentiellement dangereux, mais on peut 
   peut-être faire sans, suite au paramétrage dark de .input au-dessus *
.select *, .multiSelect *, .input  {
    color: #ffff00 
}


/* EFFETS PERSONNELS, tests, voir si ça apporte quelque chose */

/* le but était d'entourer le cadre "les + hot du jour " mais finalement appliqué à d'autres cadres
/* j'ai l'impression que ça rend pas trop mal tout en restant discret*/
article, .card--type-vertical {
    outline-style: solid;
    outline-color: #333300;
    outline-width:1px  
}

/* je déteste les "skeleton", ces sortes de "splash screen" animés en attendant que le contenu soit chargé 
   ça perturbe la vue pendant quelques dixièmes de seconde et n'apporte rien, à part pour ceux qui ont une
   longue connexion ou un ordinateur qui met du temps à charger */
/* masque l'animation de chargement des "deals les + hot du jour" */
.skeleton { 
    display:none
}


}