e-cosplay/assets/admin.scss

@import "tailwindcss";
@import "editor/ckeditor5.css";
@import url('https://fonts.googleapis.com/css2?family=Intel+One+Mono:ital,wght@0,300..700;1,300..700&display=swap');

h1,h2,h3,h4,h5,h6,
label,span,input,{
    font-family: 'Intel One Mono', monospace;
}


.bg-RUNNING{
    color:var(--color-green-700);
}
.bg-STOPPED{
    color:var(--color-red-700);
}

select,
input {
    background: oklch(21% 0.034 264.665);
    color: white;
    &::placeholder {
        opacity: 0.5;
    }
}

.bg-opacity-70{
    opacity: .7;
}

.card-contact{
    border: 1px solid #1a202c;
    background: var(--color-gray-600);
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    .flex{
        padding: 0.5rem;
    }
}
.loader-item{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.7);
    backdrop-filter:    blur(5px);
    z-index: 500;
    width: 100%;
    height: 100%;
    span {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 2rem;
    }
}

.email-builder-modal{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ffffff;
    z-index: 500;

    .md-ctrl{
        border: 1px solid black;
        display: flex;
        padding: 0.5rem;
        justify-content: space-between;
        color: black;
        background: white;
        margin: 0.25rem;
    }
    .side-editor{
        overflow-y: auto;
        height: 100%;
        position: absolute;
        background: white;
        width: 80vw;
        top: 0;
        right: 0;
        border-left: 1px solid #cdcdcd;
        .closed-btn-m{
            width: 100%;
            background: var(--color-blue-900);
            color: white;
            padding: 0.25rem;
            text-align: center;
            font-weight: bold;
        }
    }
    .side-modal{
        overflow-y: auto;
        height: 100%;
        position: absolute;
        background: white;
        width: 30vw;
        top: 0;
        right: 0;
        border-left: 1px solid #cdcdcd;

        .col{
            border-top: 1px solid #cdcdcd;
            margin-top: 0.5rem;
            span {
                color: black;
                font-weight: bold;
                text-align: center;
                text-transform:  uppercase;
                width: 100%;
                font-size: 1.25rem;
                display: block;
            }
        }
        .td {
            font-weight: bold;
            color: black;
            width: 100%;
            margin-left: auto;
            margin-right: auto;
            display: block;
            margin-top: 1rem;
            padding-left: 1.5rem;
            border-top: 1px solid black;
        }
        .input-padding{
            .display {
                height: 150px;
                position: relative;
                color: black;
                margin-top: 0.5rem;
                border: 1px solid black;
                width: 90%;
                margin-left: auto;
                margin-right: auto;
            }
            .center{
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                font-weight: bold;
            }
            .top1,
            .top2,
            .top3,
            .top {
                position: absolute;
                left: 50%;
                top: 10px;
                transform: translate(-50%,15px);
            }
            .left1,
            .left2,
            .left3,
            .left {
                position: absolute;
                left: 30%;
                top: 50%;
                transform: translateY(-50%);
            }
            .right1,
            .right2,
            .right3,
            .right {
                position: absolute;
                right: 30%;
                top: 50%;
                transform: translateY(-50%);
            }
            .bottom1,
            .bottom2,
            .bottom3,
            .bottom {
                position: absolute;
                left: 50%;
                bottom: 10px;
                transform: translate(-50%,-15px);
            }
        }
        .vl {
            padding: 0.5rem;
            label {
                color: black;
                font-weight: bold;
                padding-left: 1.5rem;
            }


        }
        .input-background{
            width: 90%;
            margin-left: auto;
            margin-right: auto;
            display: block;
            label {
                font-weight: bold;
                color: black;
            }
            input {
                display: block;
                width: 100%;
                border: 1px solid black;
                background: none;
            }
        }
        .closed-btn{
            width: 100%;
            background: var(--color-blue-900);
            color: white;
            padding: 0.25rem;
            text-align: center;
            font-weight: bold;
        }
    }

    .area-block{
        width: 100%;
        margin-bottom: 0.5rem;
        .area-name{
            margin-left:0.5rem;
            display: block;
            font-weight: bold;
        }
        .area-settings{
            margin-right:0.5rem;
            display: block;
            font-weight: bold;
        }
        .area-block-header{
            width: 100%;
            background: #cdcdcd;
            display: flex;
            justify-content: space-between;
            border: 1px solid black;
        }
        .area-block-body{
            min-height: 30px;
            width: 100%;
            display: block;
            border-left: 1px solid black;
            border-bottom: 1px solid black;
            border-right: 1px solid black;
            padding: 0.5rem;
            ul {
                display: block;
                min-height: 50px;
                padding-bottom: 1rem;
            }
        }
    }
    .email-content {
        .module{
            margin: 0.5rem;
            color: black;
            .module-item{
                cursor: pointer;
                border: 1px solid black;
                text-align: center;
                font-weight: bold;
                display: block;
                padding: 0.25rem;
                margin-bottom: 0.5rem;
            }
        }
        .content{
            margin: 0.5rem;
            color: black;
            padding-bottom: 2rem;
        }
        .area{
            margin: 0.5rem;
            color: black;
            .area-item{
                cursor: pointer;
                border: 1px solid black;
                text-align: center;
                font-weight: bold;
                display: block;
                padding: 0.25rem;
                margin-bottom: 0.5rem;
            }
        }
    }
    .email-builder-toolbar{
        display: flex;
        width: 100%;
        border-bottom: 1px solid #cdcdcd;
        background: #cdcdcd;
        h2 {
            color: black;
            font-weight: bold;
            width: 25%;
            font-size: 1.75rem;
            margin: auto;
            padding-left: 1rem;
        }
        .email-builder-actions{
            display: flex;
            width: 100%;
            justify-content: end;
        }
    }
}
.editor-container{
    border:  1px solid #cdcdcd !important;
    margin: 0.25rem;
    height: 90%;
}

.modal-payment{
    z-index: 9000;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(5px);
    width: 100%;
    height: 100%;
    .modal-payment-content{
        position: fixed;
        top: 50%;
        left: 50%;
        background: #1a202c;
        width: 50%;
        transform: translate(-50%,-50%);
        h2{
            text-align: center;
            font-size: 1.25rem;
            padding: 0.5rem;
            border-bottom: 1px solid #cdcdcd;
        }
        a {
            width: fit-content !important;
            position: absolute;
            top: 5px;
            right: 5px;
        }

    }
}

security-wall-item{
    background: black;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 5000;
    .content{
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        span {
            text-align: center;
            display: block;
            margin-top: 2rem;
        }
        h2 {
            font-size: 2rem;
            warn {
                color: red;
                font-weight: bolder;
            }
        }
    }
}
lockdown-wall-item{
    background: repeating-linear-gradient(
            45deg,
            black,
            black 20px,
            red 20px,
            red 40px
    );
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 5000;
    .content{
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: rgba(0, 0, 0, 0.8); /* Fond noir semi-transparent */
        color: white;                 /* Texte blanc */
        padding: 2rem 3rem;
        border-radius: 10px;
        text-align: center;
        font-family: Arial, sans-serif;
        box-shadow: 0 0 15px rgba(255, 0, 0, 0.7); /* Ombre rouge pour souligner */
        span {
            text-align: center;
            display: block;
            margin-top: 2rem;
        }
        h2 {
            font-size: 1.5rem;
            warn {
                color: red;
                font-weight: bolder;
            }
        }
    }
}

confirm-modal{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9000;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(5px);
    width: 100%;
    height: 100%;
    .confirm-modal-content{
        width: 50%;
        padding: 0.5rem;
        background: #1a202c;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }
    h2 {
        text-align: center;
        font-size: 2rem;
        margin-bottom: 2rem;
    }
}

.ech-created{
    color: orange;
    font-weight: bolder;
}