display.css

.display {
    max-width: 100%;
}

.display.fullscreen {
    align-items: center;
    background-color: #2d2d2d;
    display: flex;
    height: 100%;
    justify-content: center;
    left: 0px;
    position: fixed;
    top: 0px;
    width: 100%;
    z-index: 6;
}

.display > .magnify-button {
    cursor: pointer;
    display: inline-block;
    transition: transform 0.35s cubic-bezier(0.075, 0.82, 0.165, 1);
    -o-transition: transform 0.35s cubic-bezier(0.075, 0.82, 0.165, 1);
    -ms-transition: transform 0.35s cubic-bezier(0.075, 0.82, 0.165, 1);
    -moz-transition: transform 0.35s cubic-bezier(0.075, 0.82, 0.165, 1);
    -khtml-transition: transform 0.35s cubic-bezier(0.075, 0.82, 0.165, 1);
    -webkit-transition: transform 0.35s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.display > .magnify-button:hover {
    transform: scale(1.3, 1.3);
    -o-transform: scale(1.3, 1.3);
    -ms-transform: scale(1.3, 1.3);
    -moz-transform: scale(1.3, 1.3);
    -khtml-transform: scale(1.3, 1.3);
    -webkit-transform: scale(1.3, 1.3);
}

.display > .magnify-button:active {
    transform: scale(1.0, 1.0);
    -o-transform: scale(1.0, 1.0);
    -ms-transform: scale(1.0, 1.0);
    -moz-transform: scale(1.0, 1.0);
    -khtml-transform: scale(1.0, 1.0);
    -webkit-transform: scale(1.0, 1.0);
}

.display > .display-minimize {
    bottom: 22px;
    display: none;
    position: absolute;
    right: 22px;
    user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
}

@media only screen and (max-width: 1120px) {
    .display > .display-minimize {
        top: 22px;
        bottom: initial;
    }
}

.display > .display-minimize > img {
    height: 32px;
    width: 32px;
}

.display.fullscreen > .display-minimize {
    display: block;
}

.display > .display-frame {
    background-color: #1b1a17;
    border: 2px solid #50cb93;
    box-sizing: content-box;
    -o-box-sizing: content-box;
    -ms-box-sizing: content-box;
    -moz-box-sizing: content-box;
    -khtml-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    font-size: 0px;
    padding: 8px 8px 8px 8px;
    transition: width 0.35s cubic-bezier(0.075, 0.82, 0.165, 1), height 0.35s cubic-bezier(0.075, 0.82, 0.165, 1);
    -o-transition: width 0.35s cubic-bezier(0.075, 0.82, 0.165, 1), height 0.35s cubic-bezier(0.075, 0.82, 0.165, 1);
    -ms-transition: width 0.35s cubic-bezier(0.075, 0.82, 0.165, 1), height 0.35s cubic-bezier(0.075, 0.82, 0.165, 1);
    -moz-transition: width 0.35s cubic-bezier(0.075, 0.82, 0.165, 1), height 0.35s cubic-bezier(0.075, 0.82, 0.165, 1);
    -khtml-transition: width 0.35s cubic-bezier(0.075, 0.82, 0.165, 1), height 0.35s cubic-bezier(0.075, 0.82, 0.165, 1);
    -webkit-transition: width 0.35s cubic-bezier(0.075, 0.82, 0.165, 1), height 0.35s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.display.fullscreen > .display-frame {
    background-color: transparent;
    border: none;
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.24);
    -o-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.24);
    -ms-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.24);
    -moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.24);
    -khtml-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.24);
    -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.24);
    margin: 0px 0px 0px 0px;
    max-width: unset;
    padding: 0px 0px 0px 0px;
}

.display > .display-frame > .display-canvas {
    outline: none;
    -o-outline: none;
    -ms-outline: none;
    -moz-outline: none;
    -khtml-outline: none;
    -webkit-outline: none;
    width: 100%;
}