Nitro-Cool-UI/src/components/room/widgets/furniture/FurnitureWidgets.scss

.nitro-room-widgets {
    pointer-events: none;
}

.nitro-widget-custom-stack-height {
    width: $nitro-widget-custom-stack-height-width;
    height: $nitro-widget-custom-stack-height-height;
}

.nitro-room-widget-toner {
    width: 190px;
}

.nitro-room-widget-dimmer {
    width: 275px;

    .dimmer-banner {
        width: 56px;
        height: 79px;
        background: url('@/assets/images/room-widgets/dimmer-widget/dimmer_banner.png')
            center no-repeat;
    }

    .color-swatch {
        height: 30px;
        border: 2px solid $white;
        box-shadow: inset 3px 3px rgba(0, 0, 0, 0.2);

        &.active {
            box-shadow: none;
        }
    }
}

.nitro-widget-crafting {
    width: $nitro-widget-crafting-width;
    height: $nitro-widget-crafting-height;
}

.nitro-widget-exchange-credit {
    width: $nitro-widget-exchange-credit-width;
    height: $nitro-widget-exchange-credit-height;

    .exchange-image {
        background-image: url('@/assets/images/room-widgets/exchange-credit/exchange-credit-image.png');
        width: 103px;
        height: 103px;
    }
}

.nitro-external-image-widget {
    .picture-preview {
        width: 320px;
        height: 320px;
    }

    .picture-preview-buttons {
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: gray;
    }

    .picture-preview-buttons-previous,
    .picture-preview-buttons-next {
        color: #222;
        background-color: white;
        padding: 10px;
        border-radius: 50%;
    }
}

.nitro-gift-opening {
    width: 340px;
    resize: none;
}

.nitro-mannequin {
    width: 300px;

    .mannequin-preview {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 83px;
        height: 130px;
        background-image: url('@/assets/images/room-widgets/mannequin-widget/mannequin-spritesheet.png');
        overflow: hidden;

        .avatar-image {
            background-position: unset;
            top: -8px;
        }
    }
}

.nitro-stickie {
    position: relative;
    width: 185px;
    height: 178px;
    top: 25px;
    left: 25px;
    padding: 1px;
    pointer-events: all;

    .stickie-header {
        width: 183px;
        height: 18px;
        padding: 0 7px;

        .header-trash,
        .header-close {
            cursor: pointer;
        }

        .stickie-color {
            width: 10px;
            height: 10px;
            cursor: pointer;
        }
    }

    .stickie-context {
        width: 183px;
        height: 145px;
        padding: 2px 7px;
        font-size: 12px;
        color: $black;

        .context-text {
            width: 100%;
            height: 100%;
            padding: 0;
            overflow-wrap: break-word;
            white-space: break-spaces;
            overflow-y: auto;
        }

        textarea {
            background: transparent;
            border: 0;
            outline: none;
            box-shadow: none;
            resize: none;
            font-style: italic;

            &:active {
                border: 0;
                outline: none;
                box-shadow: none;
            }
        }
    }
}

.nitro-stickie-image {
    background-image: url('@/assets/images/room-widgets/stickie-widget/stickie-spritesheet.png');

    &.stickie-blue,
    &.stickie-yellow,
    &.stickie-green,
    &.stickie-pink {
        width: 185px;
        height: 178px;
    }

    &.stickie-blue {
        background-position: -2px -2px;
    }

    &.stickie-yellow {
        background-image: url('@/assets/images/room-widgets/stickie-widget/stickie-yellow.png');
        //background-position: -191px -184px;
    }

    &.stickie-green {
        background-position: -191px -2px;
    }

    &.stickie-pink {
        background-position: -2px -184px;
    }

    &.stickie-christmas {
        background-image: url('@/assets/images/room-widgets/stickie-widget/stickie-christmas.png');
    }

    &.stickie-shakesp {
        background-image: url('@/assets/images/room-widgets/stickie-widget/stickie-shakesp.png');
    }

    &.stickie-dreams {
        background-image: url('@/assets/images/room-widgets/stickie-widget/stickie-dreams.png');
    }

    &.stickie-heart {
        background-image: url('@/assets/images/room-widgets/stickie-widget/stickie-heart.png');
    }

    &.stickie-juninas {
        background-image: url('@/assets/images/room-widgets/stickie-widget/stickie-juninas.png');
    }

    &.stickie-close {
        width: 10px;
        height: 10px;
        background-position: -2px -366px;
    }

    &.stickie-trash {
        width: 9px;
        height: 10px;
        background-position: -16px -366px;
    }
}

.nitro-engraving-lock {
    width: 300px;

    .engraving-lock-stage-1 {
        width: 31px;
        height: 39px;
        background-position: -380px -43px;
        background-image: url('@/assets/images/room-widgets/engraving-lock-widget/engraving-lock-spritesheet.png');
    }

    .engraving-lock-stage-2 {
        width: 36px;
        height: 43px;
        background-position: -375px 0px;
        background-image: url('@/assets/images/room-widgets/engraving-lock-widget/engraving-lock-spritesheet.png');
    }
}

.nitro-engraving-lock-view {
    width: 375px;
    height: 210px;
    background-position: 0px 0px;
    background-image: url('@/assets/images/room-widgets/engraving-lock-widget/engraving-lock-spritesheet.png');

    color: #622e54;
    font-weight: bold;
    font-size: 16px;
    text-shadow: 0px 1px white;

    &.engraving-lock-3 {
        background-position: 0px -210px;
        color: #614110;
    }

    &.engraving-lock-4 {
        background-position: 0px -420px;
        color: #f1dcc8;
        text-shadow: 0px 2px rgba(0, 0, 0, 0.4);

        .engraving-lock-avatar {
            margin-bottom: 10px;
        }
    }

    .engraving-lock-close {
        position: absolute;
        cursor: pointer;
        width: 15px;
        height: 15px;
        top: 34px;
        right: 27px;
    }

    .engraving-lock-avatar {
        width: 70px;
        height: 120px;

        div {
            position: absolute;
            margin-top: -5px;
        }

        &:nth-child(1) {
            div {
                margin-left: -10px;
            }
        }

        &:nth-child(2) {
            div {
                margin-left: -15px;
            }
        }
    }
}

.nitro-widget-high-score {
    width: 280px;
    max-width: 280px;
    height: 320px;

    border-radius: 0.3rem;
    border: solid 1px #000;

    .header {
        border-image-source: none !important;
        background-color: #40403e;
        border-radius: 0.3rem 0.3rem 0 0;
    }

    .align-right {
        text-align: right;
    }

    .section-border {
        border: solid 1px #8c8a88;
    }

    .high-score-content {
        height: 100%;
        background-color: #000;
        border-radius: 0.3rem;
    }

    .score-footer {
        color: #9a9896;
        font-weight: bold;
    }
}

.youtube-tv-widget {
    width: 600px;
    height: 380px;

    .youtube-video-container {
        .empty-video {
            background-color: black;
            color: white;
            width: 100%;
            height: 100%;
            text-align: center;
        }

        .youtubeContainer {
            position: relative;
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin-bottom: 50px;
        }

        .youtubeContainer iframe {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }
    }

    .playlist-container {
        overflow-y: auto;
        margin-right: -10px;
        color: black;
        height: 100%;

        .playlist-controls {
            width: 100%;
            .icon {
                margin-right: 10px;
                margin-bottom: 10px;
            }
        }

        .playlist-grid {
            height: 100%;
            width: 100%;
        }
    }
}

.nitro-playlist-editor-widget {
    width: 625px;
    height: 440px;

    img.my-music {
        position: absolute;
        top: -4px;
        left: -4px;
        z-index: 0;
    }

    img.playlist-img {
        position: absolute;
        top: -4px;
        left: 0;
        z-index: 0;
    }

    img.get-more,
    img.add-songs {
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 0;
    }

    .playlist-bottom {
        z-index: 3;
    }

    .move-disk {
        width: 22px;
        height: 18px;
        background-image: url('@/assets/images/room-widgets/playlist-editor/move.png');
    }

    .disk-2,
    .disk-image {
        background-blend-mode: multiply;
    }

    .disk-2 {
        width: 38px;
        height: 38px;
        background-image: url('@/assets/images/room-widgets/playlist-editor/disk_2.png');
        background-position: center;
        background-repeat: no-repeat;

        &.playing-song {
            background-image: url('@/assets/images/room-widgets/playlist-editor/playing.png');
        }

        &.selected-song {
            background-image: url('@/assets/images/room-widgets/playlist-editor/move.png');
            transform: scaleX(-1);
        }

        &:not(.playing-song):not(.selected-song) {
            -webkit-mask-image: url('@/assets/images/room-widgets/playlist-editor/disk_2.png');
            mask-image: url('@/assets/images/room-widgets/playlist-editor/disk_2.png');
        }
    }

    .pause-song {
        width: 18px;
        height: 20px;
        background-image: url('@/assets/images/room-widgets/playlist-editor/pause.png');
    }

    .pause-btn {
        width: 16px;
        height: 16px;

        background-image: url('@/assets/images/room-widgets/playlist-editor/pause-btn.png');
    }

    .music-note {
        width: 38px;
        height: 38px;
        background-image: url('@/assets/images/room-widgets/playlist-editor/playing.png');
    }

    .preview-song {
        width: 16px;
        height: 16px;
        background-image: url('@/assets/images/room-widgets/playlist-editor/preview.png');
    }

    .layout-grid-item {
        min-height: 95px;
        min-width: 95px;
        position: relative;

        .disk-image {
            background: url('@/assets/images/room-widgets/playlist-editor/disk_image.png');
            -webkit-mask-image: url('@/assets/images/room-widgets/playlist-editor/disk_image.png');
            mask-image: url('@/assets/images/room-widgets/playlist-editor/disk_image.png');
            height: 76px;
            width: 76px;
        }
    }
}

.nitro-mysterybox-dialog {
    width: 375px;
    height: 210px;

    .prize-container {
        height: 80px;
        width: 81px;
        background-image: url('@/assets/images/prize/prize_background.png');
        background-repeat: no-repeat;
        background-position: center;
    }
}

.nitro-mysterytrophy-dialog
{
    .mysterytrophy-dialog-top
    {
        width: 400px;
        height: 120px;
        border-radius: 2px;
        background-color: #0E3F52;

        .mysterytrophy-image
        {
            width: 80px;
            height: 84px;
            position: relative;
            background-image: url('@/assets/images/mysterytrophy/frank_mystery_trophy.png');
            background-repeat: no-repeat;
        }

        .mysterytrophy-text-big
        {
            font-size: 16px;
        }
    }

    .mysterytrophy-dialog-bottom
    {
        display: flex;
        justify-content: center;
        width: 400px;
        height: 120px;
        border-radius: 2px;
        background-color: #E9E9E1;

        .input-mysterytrophy-dialog
        {
            width: 380px;
            border: 1px solid black;

            .input-mysterytrophy
            {
                width: 350px;
                border: 0;
                outline: 0;
            }

            .mysterytrophy-pencil-image
            {
                width: 16px;
                height: 16px;
                position: relative;
                background-image: url('@/assets/images/infostand/pencil-icon.png');
                background-repeat: no-repeat;
            }
        }

        .text-decoration
        {
            text-decoration: underline;
        }
    }
}