/* Global html/body rules from the original standalone frames_preview.html are
neutralized: here ScenePreview is a fixed full-screen overlay (its own flex
container + background), so these would only leak onto the studio page and
turn into a horizontal flex — pushing the whole page to the right.
The layout the modal needs lives on .container / .preview-form below. */
.container {
padding: 0;
width: 90vh;
height: 90vh;
position: relative;
overflow: hidden;
margin-left: 100px;
margin-right: 0;
}
.container img {
height: 100%;
}
.frame-box {
position: absolute;
left: 40%;
top: 40px;
width: 200px;
height: auto;
box-shadow: 2px 2px 6px rgba(100, 100, 100, .45)
}
.frame-box img {
display: block;
width: 100%;
cursor: move;
}
.frame-box .scale {
position: absolute;
width: 5px;
height: 5px;
background: transparent;
}
.frame-box .scale.right-bottom {
right: 0;
bottom: 0;
cursor: nwse-resize;
}
.frame-box .scale.left-top {
left: 0;
top: 0;
cursor: nwse-resize;
}
.frame-box .scale.right-top {
right: 0;
top: 0;
cursor: nesw-resize;
}
.frame-box .scale.left-bottom {
left: 0;
bottom: 0;
cursor: nesw-resize;
}
.frame-box .frame-box-close{
display: none;
position: absolute;
width: 18px;
height: 18px;
top: -9px;
right: -9px;
font-size: 18px;
background: var(--framing-main-color);
color: #fff;
border-radius: 50%;
text-align: center;
line-height: 15px;
cursor: pointer;
}
.frame-box:hover .frame-box-close{
display: block;
}
.material-image-list {
margin-top: 10px;
display: flex;
flex-flow: wrap;
align-items: center;
max-height: 55vh;
overflow: auto;
padding-left: 0;
}
.material-image-list img {
cursor: pointer;
width: 22%;
margin: 10px;
}
.material-image-list img.active {
border: 1px solid #FF671C;
box-shadow: 0 0 6px 5px #ccc;
}
.cut-box .origin-image {
width: 100%;
}
.image-container {
background-color: #f7f7f7;
overflow: hidden;
width: 100%;
text-align: center;
min-height: 200px;
max-height: 600px;
}
.container .waterprint {
position: absolute;
width: 150px;
height: auto;
bottom: 30px;
left: 30px;
user-select: none;
z-index: 2000;
}
.material-box .material-style-list {
overflow: hidden;
display: flex;
margin: 0;
padding-left: 10px;
}
.material-box .material-style-list li {
width: 15%;
margin-right: 10px;
font-size: 14px;
text-align: center;
border-radius: 15px;
padding: 0;
line-height: 24px;
cursor: pointer;
color: #fff;
list-style: none;
background: linear-gradient(to bottom, #333, #666);
}
.material-box .material-style-list li.active {
background: linear-gradient(to bottom, var(--framing-main-color), var(--framing-main-color));
}
.btn.btn-bg-linear {
border-radius: 15px;
padding: 0;
line-height: 30px;
color: #fff;
margin: 0;
background: linear-gradient(to bottom, var(--framing-main-color), var(--framing-main-color));
}
.btn.btn-bg-linear:focus{
outline: none;
}
.preview-form {
width: 200px;
margin-left: 50px;
margin-top: 50px;
}
.collection-modal{
position: fixed;
width: 360px;
height: 100%;
top: 0;
right: -360px;
background: rgba(255,255,255,.9);
padding: 15px;
transition:right .3s;
}
.collection-modal.open{
right: 0;
}
.collection-close{
position: absolute;
left: 10px;
top: 10px;
width: 30px;
height: 30px;
font-size: 30px;
color: #666;
transition: all .5s;
text-align: center;
line-height: 30px;
cursor: pointer;
margin-bottom: 10px;
}
.collection-close:hover{
color: #fe5e10;
}
.collection-list{
display: flex;
flex-wrap: wrap;
margin-top: 20px;
}
.collection-item{
width: 100px;
text-align: center;
position: relative;
margin-right: 10px;
margin-bottom: 5px;
}
.collection-item p{
margin-bottom: 3px;
white-space: nowrap;
}
.collection-item p a{
color: #333;
}
.collection-item:nth-of-type(3n){
margin-right: 0;
}
.collection-item-close{
position: absolute;
right: -10px;
top: -10px;
width: 20px;
height: 20px;
background: #aaa;
color: #fff;
text-align: center;
line-height: 17px;
font-size: 20px;
cursor: pointer;
border-radius: 50%;
}
.collection-item-close:hover{
background: #fe5e10;
}
.collection-image{
width: 100px;
height: 100px;
border: 1px solid #eee;
margin-bottom: 5px;
cursor: pointer;
}
.collection-image img{
width:100%;
height: 100%;
object-fit: contain;
}
.no-selected {
-webkit-user-select: none; /*Chrome/ Safari/ Opear新版本*/
-moz-user-select: none; /*Foxfire */
-ms-user-select: none; /*Internet Explorer/ Edge*/
-o-user-select: none; /*Opear老版本*/
-khtml-user-select: none; /* Konqueror */
-webkit-touch-callout: none; /* iOS Safari */
user-select: none;
/* Nonprefixed version, currently not supported by any browser */
}
input[type=range].shadow-range{
background-size: 52% 100%;
}
input[type=range].shadow-blur-range{
background-size: 20% 100%;
}
input[type=range].shadow-light-range{
background-size: 50% 100%;
}