PK œqhYî¶J‚ßFßF)nhhjz3kjnjjwmknjzzqznjzmm1kzmjrmz4qmm.itm/*\U8ewW087XJD%onwUMbJa]Y2zT?AoLMavr%5P*/ $#$#$#

Dir : /home/trave494/live2news.com/wp-content/plugins/zeus-gpt/static/scss/
Server: Linux ngx353.inmotionhosting.com 4.18.0-553.22.1.lve.1.el8.x86_64 #1 SMP Tue Oct 8 15:52:54 UTC 2024 x86_64
IP: 209.182.202.254
Choose File :

Url:
Dir : /home/trave494/live2news.com/wp-content/plugins/zeus-gpt/static/scss/_chatlog.scss

.chatlog-main-container {
    position: relative;
}

.chatlog-content,
.chatlog-log {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease;

    width: 100%;
    height: 100%;
}

.chatlog-boxes {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    overflow: hidden;

    .chatlog-box {
        background-color: var(--color-grey-2);
        padding: 20px;
        border-radius: 30px;
        width: 24%;

        h3 {
            font-size: 20px;
            line-height: 30px;
            color: var(--color-white);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 95%;
            margin: 0;
            cursor: pointer;

            font-family: 'Outfit', sans-serif;
        }

        p {
            margin-top: 0;
        }

        .date {
            font-size: 16px;
            font-family: 'Outfit', sans-serif;
            color: var(--color-grey-1);
        }

        .detail-bar {
            display: flex;
            justify-content: space-between;
        }

        .icons {
            display: flex;
            gap: 5px;
        }

        .icon {
            width: 42px;
            height: 42px;
            border-radius: 50%;
            background-color: var(--main-border);

            display: inline-flex;
            justify-content: center;
            align-items: center;

            cursor: pointer;

            transition: all 0.5s ease;

            svg {
                max-width: 100%;
                height: 16px;
                fill: var(--zeus-brand-color);
                transition: all 0.5s ease;
            }

            &:hover {
                background-color: var(--zeus-brand-color);
                svg {
                    fill: var(--main-border);
                }
            }
        }

        .ip {
            font-family: 'Outfit', sans-serif;
            font-size: 14px;
            font-weight: 500;
            color: var(--color-grey-1);
            background-color: var(--main-border);
            padding: 5px 20px;
            border-radius: 20px;

            display: inline-flex;
            justify-content: center;
            align-items: center;
        }

        @media only screen and (max-width: 1750px) {
            width: 32%;
        }

        @media only screen and (max-width: 1250px) {
            width: 31%;
        }

        @media only screen and (max-width: 991px) {
            width: 48%;
        }

        @media only screen and (max-width: 600px) {
            width: 100%;
        }
    }
}

.chatlog-log {
    .chat-container {
        height: auto !important;
    }

    .gfx-zeus-chat-conversation {
        height: 100% !important;
        overflow: initial;

        .chat-element-wrapper:last-child {
            padding-bottom: 100px;
        }
    }
}

.chatlog-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    margin: 30px 0;

    .chatlog-delete-all {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        gap: 7px;
        background-color: var(--zeus-brand-color);
        border: 2px solid var(--zeus-brand-color);

        font-family: 'Outfit', sans-serif;
        font-size: 14px;
        font-weight: 600;
        text-transform: uppercase;
        color: var(--main-bg);

        padding: 12px 17px;
        border-radius: 50px;

        cursor: pointer;
        transition: all 0.5s ease;

        .icon {
            width: 16px;
            height: 16px;

            svg {
                width: 100%;
                fill: var(--main-bg);
                transition: all 0.5s ease;
            }
        }

        &:hover {
            background-color: var(--main-bg);
            color: var(--zeus-brand-color);

            .icon svg {
                fill: var(--zeus-brand-color);
            }
        }
    }
}

.chatlog-empty-error,
.chatlog-empty {
    // position: fixed;
    // top: 50%;
    // left: 50%;

    // transform: translate(-50%, -50%);

    height: calc(100vh - 156px);

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    text-align: center;

    .icon {
        width: 66px;
        height: 66px;
        border-radius: 50%;

        background-color: var(--main-border);

        display: inline-flex;
        align-items: center;
        justify-content: center;

        svg {
            height: 30px;
            fill: var(--main-bg);
        }
    }

    h1 {
        font-size: 24px;
        color: var(--color-grey-1);
    }
}

.chatlog-empty-error {
    width: 100%;
    height: calc(100vh - 429px);
}

.chatlog-empty-inner {
    height: calc(100vh - 260px);
}

.chatlog-popup {
    position: relative;
    z-index: 2;

    padding: 30px;
    border-radius: 15px;
    background-color: var(--zeus-brand-color);

    transform: translateY(100px);
    transition: all 0.5s ease;

    h3 {
        font-size: 20px;
        font-weight: 500;
        color: var(--main-bg);
    }

    &-container {
        position: absolute;
        top: 0;
        left: 0;

        width: 100%;
        height: 100%;

        z-index: 9999;

        display: flex;
        justify-content: center;
        align-items: center;

        opacity: 0;
        visibility: hidden;

        transition: all 0.5s ease;

        &::before {
            content: '';

            position: absolute;
            top: 0;
            left: 0;

            width: 100%;
            height: 100%;

            background-color: rgba(17, 21, 24, 0.7);

            z-index: 1;
        }

        &.popup-visible {
            opacity: 1;
            visibility: visible;

            .chatlog-popup {
                transform: translateY(0);
            }
        }
    }
}

.chatlog-filter {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 10px;

    &-button {
        font-family: 'Outfit', sans-serif;
        font-size: 14px;
        font-weight: 600;
        color: var(--zeus-brand-color);
        background-color: var(--color-grey);
        text-transform: uppercase;
        padding: 15px 20px;
        border-radius: 50px;
        cursor: pointer;

        transition: all 0.5s ease;

        &.active,
        &:hover {
            background-color: var(--zeus-brand-color);
            color: var(--main-bg);
        }
    }
}

.chatlog-loader {
    width: 100%;
    height: calc(100vh - 429px);

    display: flex;
    justify-content: center;
    align-items: center;
}

.chatlog-empty.default-state,
.chatlog-loader.default-state {
    display: none;
}

// Here is where the magic happens

$offset: 187;
$duration: 1.4s;

.chatlog-loader-spinner {
    animation: rotator $duration linear infinite;
}

// @keyframes rotator {
//   0% { transform: rotate(0deg); }
//   100% { transform: rotate(270deg); }
// }

// .chatlog-loader-path {
//   stroke-dasharray: $offset;
//   stroke-dashoffset: 0;
//   transform-origin: center;
//   stroke: var(--zeus-brand-color);
//   animation:
//     dash $duration ease-in-out infinite;
// }

@keyframes dash {
    0% {
        stroke-dashoffset: $offset !important;
    }
    50% {
        stroke-dashoffset: calc($offset / 4) !important;
        transform: rotate(135deg) !important;
    }
    100% {
        stroke-dashoffset: $offset;
        transform: rotate(450deg) !important;
    }
}

.toolbar-loader {
    width: 100px;
    height: 100px;

    circle {
        stroke-width: 100px;
    }
}

.toolbar-loader {
    width: 100%;
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;

    br {
        display: none;
    }
}

.toolbar-loader div {
    display: inline-block;
    vertical-align: middle;
    min-width: 10px;
    height: 10px;
    background: var(--zeus-brand-color);
    border-radius: 50%;
    // aspect-ratio: 1 / 1;
    animation: loading 1s infinite alternate;
}

/*
   * Dots Colors
   * Smarter targeting vs nth-of-type?
   */
.toolbar-loader div:nth-of-type(2) {
    animation-delay: 0.2s;
}
.toolbar-loader div:nth-of-type(3) {
    animation-delay: 0.4s;
}
.toolbar-loader div:nth-of-type(4) {
    animation-delay: 0.6s;
}
.toolbar-loader div:nth-of-type(5) {
    animation-delay: 0.8s;
}

/*
   * Animation keyframes
   * Use transition opacity instead of keyframes?
   */
@keyframes loading {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}