/* design collage 页面 */

/* 滑动条样式 */
.ui-slider-handle {
    width: 13px !important;
    height: 13px !important;
    border-radius: 50%;
    outline: none;
    background-color: #fff !important;
}
.ui-widget-header {
    background: #2354f4;
}
.ui-state-active {
    border-color: #ccc !important;
}
.ui-state-hover {
    transform: scale(1.2);
}


.design-res .btn.is-active:after, .design-res .btn:hover:after {
    content: "";
    position: absolute;
    top: 5px;
    left: 0;
    width: 4px;
    height: 40px;
    background-color: #005cf9;
}

/* templates li  */
.templates li {
    width: 50px;
    height: 50px;
    cursor: pointer;
    gap: 2px;
}
.templates li span{
    background-color: #D1D5DB;
}
.templates li:hover span{
    background-color: #9CA3AF;
}
.templates li.active span{
    /* background-color: #60A5FA; */
    background-color: #3B82F6;
}

.editor-element {
	border: 2px dashed #d1e0fc;
	display: flex;
	justify-content: center;
	align-items: center;
}
.editor-cell {
    border: 2px solid transparent;
    overflow: hidden;
}
.editor-cell.selected {
	border-color: #005cf9;
}

.editor-contextmenu:before {
	content: "";
    position: absolute;
    top: -2px;
    left: 50%;
    box-shadow: 0 0 5px 0 rgb(11 3 6 / 20%);
    width: 12px;
    height: 12px;
    transform: rotate(45deg) translateX(-50%);
    z-index: -1;
}
.file-list .grid-item:hover:after {
	display: block;
}
.file-list .grid-item:after {
    content: "";
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(0,0,0,.2);
    border-radius: 4px;
    pointer-events: none;
}

.btn-remove{
    font-size: 18px;
    font-weight: 900 !important;
	color: transparent;
	position: absolute;
    top: 6px;
    right: 6px;
	cursor: pointer;
    
}
.grid-item:hover .btn-remove, .editor-cell:hover .btn-remove {
	color: black;
}
.btn-remove:hover::before {
	background-image: url("/images/design/collage/icon-remove-blue.svg");
}

.btn-flip-x {
	background-image: url("/images/design/collage/icon-flip-x.svg");
}
.btn-flip-y {
	background-image: url("/images/design/collage/icon-flip-y.svg");
}
.btn-rotate {
	background-image: url("/images/design/collage/icon-rotate.svg");
}
.btn-rotate-anti {
	background-image: url("/images/design/collage/icon-rotate-anti.svg");
}

.cell-toolbar--group:hover, .text-toolbar--group:hover {
    box-shadow: 0 10px 10px 0 rgb(53 100 175 / 15%);
}
.size-selector--editor-switcher {
	background-image: url("/images/design/collage/icon-switcher.svg");
}
.icon-size-percent {
	width: 30px;
	height: 30px;
	line-height: 30px;
	font-style: normal;
}
.icon-size-percent:hover, .icon-zoomfit:hover, .icon-zoomoff:hover {
	color: transparent;
	background-size: 20px;
	background-repeat: no-repeat;
	background-position: center;
}
.icon-size-percent:hover {
	background-image: url("/images/design/collage/icon-zoomfit.svg")
}
.icon-zoomfit:hover {
	background-image: url("/images/design/collage/icon-zoomoff.svg")
}
.icon-zoomoff:hover {
	background-image: url("/images/design/collage/icon-zoomfit.svg")
}

.list li:before {
    content: "";
    display: none;
    background-color: transparent;
    background-image: url("/images/design/collage/icon-selected-white.svg");
    background-size: 14px 12px;
    background-repeat: no-repeat;
    background-position: center;
	width: 100%;
	height: 100%;
}
.list li.selected:before {
    display: block;
}
.list li.color-picker.selected:before {
    display: none;
}
.list li.dark:before, .images-list li:before {
    background-image: url("/images/design/collage/icon-selected-black.svg");
}
.images-list li:before {
    background-color: hsla(0,0%,100%,.2);
    background-size: 20px 17px;
}

/* 谷歌 */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
}

/* 火狐
input[type="number"]{
    -moz-appearance: textfield;
} */

.text-color[type=”color”]::-webkit-color-swatch-wrapper {
    padding: 0;
}
.text-color[type="color"]::-webkit-color-swatch {
    border: 0;
}

/* 文字 */
/* .editor-transform:before {
    content: "";
    box-sizing: content-box;
    border: 1px dashed #666;
    cursor: move;
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    margin: -1px 0 0 -1px;
} */
.editor-transform .editor-grip {
    /* cursor: nw-resize; */
    margin-top: -15px;
    margin-left: -15px;
    padding: 11px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 5;
}
.editor-transform .editor-grip b {
    display: block;
    background: #FFF;
    border: 1px solid #666;
    height: 7px;
    width: 7px;
}
.editor-grip-ne, .editor-grip-sw {
    cursor: nesw-resize;
}
.editor-grip-nw, .editor-grip-se {
    cursor: nwse-resize;
}
.editor-grip-e, .editor-grip-w {
    cursor: ew-resize;
}
.editor-transform .editor-grip-sw {
    margin-top: -14px;
    top: 100%;
}
.editor-transform .editor-grip-w {
    top: 50%;
    left: 0;
}
.editor-transform .editor-grip-ne {
    margin-left: -14px;
    left: 100%;
}
.editor-transform .editor-grip-e {
    margin-left: -14px;
    left: 100%;
    top: 50%;
}
.editor-transform .editor-grip-se {
    margin-left: -14px;
    margin-top: -14px;
    left: 100%;
    top: 100%;
}
.editor-transform .editor-rotator {
    cursor: pointer;
    margin: 8px 0 0 -16px;
    padding: 7px;
    position: absolute;
    left: 50%;
    top: 100%;
    z-index: 5;
    width: 32px;
    height: 32px;
}
.editor-transform .editor-rotator b {
    display: inline-block;
    background-image: url("/images/design/collage/icon-rotator.svg");
    width: 18px;
    height: 18px;
}
.editor-transform .editor-rotator:before {
    content: "";
    border-left: 1px dashed #666;
    cursor: default;
    margin: -4px 0 0 -1px;
    height: 12px;
    width: 0;
    overflow: hidden;
    position: absolute;
    left: 50%;
    top: 0;
    pointer-events: none;
}
.editor-transform {
    cursor: pointer;
}


/* .editor-transform.selected::before {
    content: "";
    border: 1px dashed #666;
    cursor: move;
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    margin: -1px 0 0 -1px;
} */
.editor-transform.selected .text::before {
    content: "";
    border: 1px dashed #666;
    cursor: move;
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    margin: -1px 0 0 -1px;
}

textarea {
    resize: both;
    overflow: hidden;
    border-style: dashed;
}
/* 文字旋转手柄 */
.ui-rotatable-handle {
    background: url(/images/design/collage/icon-rotator.svg) no-repeat center;
    cursor: pointer;
    margin: 8px 0 0 -16px;
    padding: 10px;
    position: absolute;
    left: 50%;
    top: 100%;
    z-index: 5;
    width: 32px;
    height: 32px;
}

/* 获取焦点 去除边框 */
.element-main:focus {
    outline: none;
}
.editor-element-text:focus {
    outline: none;
}
.text:focus {
    outline: none;
}
/* 图片 文字 弹出框阴影设置 */
.panel-family-picker-inner {
    height: 40vh;
    box-shadow: 0 10px 14px rgb(53 100 175 / 15%);
}
.panel-number-picker-inner {
    height: 40vh;
    box-shadow: 0 10px 14px rgb(53 100 175 / 15%);
}

.family-picker-ul li:hover {
    background-color: #f0f3f4;
}

.editor-download {
    top: -2000px;
}


/* 页面底部出现 loading  */
/* 由于引入 jquery-mobile 造成的，引入下面样式解决问题 */
.ui-loader-default{ display:none}
.ui-mobile-viewport{ border:none;}
.ui-page {padding: 0; margin: 0; outline: 0}