idealista-enhancer/src/Styles.js

import ConfigurationHTML from "./ConfigurationHTML.js";
import ItemHTML from "./ItemHTML.js";
import MenuHTML from "./MenuHTML.js";

export default class Styles {

    static APP_STYLES = `

        .midefos-idealista-card {
            box-shadow: 0px 0px 8px -1px rgba(0,0,0,0.35);
            background-color: white;
            border-radius: 8px;
            
            padding: 1rem;
            margin-bottom: 1rem;
        }

        .${ItemHTML.CONTAINER_CLASS_NAME} {
            display: flex;
            flex-direction: column;

            width: 100%;
            margin-top: -10px;
            margin-bottom: 10px;

            background-color: white;
            box-shadow: 0 3px 6px rgba(225, 245, 110, 0.16), 0 3px 6px rgba(225, 245, 110, 0.23);
            border: 3px solid transparent;
        }

        .${ItemHTML.INFORMATION_CONTAINER_CLASS_NAME} {
            display: flex;
            align-items: center;
            justify-content: space-around;

            width: 100%;
            padding: 0.5rem 0;
            border-bottom: 1px solid gray;
        }

        .${ItemHTML.INFORMATION_CONTAINER_CLASS_NAME}:last-of-type {
            border-bottom: none;
          }

        .${ItemHTML.INFORMATION_CLASS_NAME} {
            display: flex;
            flex-direction: column;
        }

        span.${ItemHTML.SUCCESS_CLASS_NAME} {
            color: darkgreen;
        }

        .${ItemHTML.CONTAINER_CLASS_NAME}.${ItemHTML.SUCCESS_CLASS_NAME} {
            border-color: rgba(61, 217, 61, 0.3);
        }

        span.${ItemHTML.WARNING_CLASS_NAME} {
            color: darkorange;
        }

        span.${ItemHTML.ERROR_CLASS_NAME} {
            color: darkred;
        }

        .${ItemHTML.CONTAINER_CLASS_NAME}.${ItemHTML.ERROR_CLASS_NAME} {
            border-color: rgba(217, 61, 61, 0.3);
        }

        .${MenuHTML.CONTAINER_CLASS_NAME} {
            display: flex;
            align-items: center;
            justify-content: space-around;

            width: 100%;
            padding: 10px 0;

            background-color: white;
            box-shadow: 0 3px 6px rgba(225, 245, 110, 0.16), 0 3px 6px rgba(225, 245, 110, 0.23);
        }
        .${ConfigurationHTML.CONTAINER_CLASS_NAME} {
            display: none;
            position: fixed;
            z-index: 3;
        
            width: 95%;
            height: 95%;
            top: 2.5%;
            left: 2.5%;
            
            padding: 2rem;

            background-color: rgba(255, 255, 255, 0.90);  
            border: 5px solid rgb(225, 245, 110);
            border-radius: 8px;
        }

        .${ConfigurationHTML.CONTAINER_CLASS_NAME} label {
            display: block;
        }

        /* Ads */
        .adv {
            display: none;
        }
    `;

    static DARK_MODE = `
        div.listing-top,
        div.item-info-container,
        section.links-block-home,
        div.item-toolbar,
        .links-block-home div.content,
        div.wrapper,
        picture.main-image,
        .placeholder-multimedia,
        section.module-contact,
        .side-content .module-contact-gray,
        .detail-pagination,
        .rs-gallery-hud, .rs-gallery-header,
        .rs-gallery-container .image-gallery .image-gallery-content,
        .rs-gallery-footer,
        .ide-box-detail,
        section.ide-box-detail-first-picture,
        .${ItemHTML.CONTAINER_CLASS_NAME},
        .${MenuHTML.CONTAINER_CLASS_NAME} {
            background-color: #060703;
            color: white;
        }

        body,
        #wrapper,
        .new-listing-filter,
        footer {
            background-color: #181B0B;
            color: white;
        }

        .description,
        .new-listing-filter a,
        :root .input-radio > span > span,
        :root .input-checkbox > span > span,
        .home-boxes-container .draw-search, .home-boxes-container .put-property, .home-boxes-container .solidary-module {
            color: white;
        }
        
        .save-search-box {
            color: black;
        }

        .description::before {
            display: none;
        }
    `;

    static add(style, id = null) {
        if (id && document.querySelector(`#${id}`)) return;

        const styleNode = document.createElement('style');
        styleNode.textContent = style;
        if (id) styleNode.id = id;
        document.head.appendChild(styleNode);
    }

    static remove(id) {
        const style = document.querySelector(`#${id}`);
        if (style) style.remove();
    }

}