658 lines
24 KiB
CSS
658 lines
24 KiB
CSS
/*
|
|
* Slim v4.19.0 - Image Cropping Made Easy
|
|
* Copyright (c) 2018 Rik Schennink - http://slimimagecropper.com
|
|
*/
|
|
.slim-file-hopper {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0; }
|
|
|
|
.slim-image-editor {
|
|
position: relative;
|
|
height: 100%;
|
|
text-align: left;
|
|
z-index: 1; }
|
|
.slim-image-editor .slim-container {
|
|
position: relative;
|
|
height: calc(100% - 8em);
|
|
width: 100%;
|
|
z-index: 2;
|
|
direction: ltr; }
|
|
.slim-image-editor .slim-editor-utils-group,
|
|
.slim-image-editor .slim-editor-btn-group {
|
|
-webkit-flex-shrink: 0;
|
|
-ms-flex-negative: 0;
|
|
flex-shrink: 0; }
|
|
.slim-image-editor .slim-stage {
|
|
position: absolute;
|
|
line-height: 0; }
|
|
.slim-image-editor .slim-wrapper {
|
|
position: absolute;
|
|
z-index: 2; }
|
|
.slim-image-editor .slim-crop-preview {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
line-height: 0; }
|
|
.slim-image-editor .slim-stage {
|
|
z-index: 4; }
|
|
.slim-image-editor .slim-crop-preview {
|
|
z-index: 3;
|
|
border-radius: 4px; }
|
|
.slim-image-editor .slim-crop-preview img, .slim-image-editor .slim-crop-preview::after,
|
|
.slim-image-editor .slim-crop-preview canvas {
|
|
position: absolute;
|
|
display: block;
|
|
border-radius: inherit;
|
|
left: 0;
|
|
top: 0; }
|
|
.slim-image-editor .slim-crop-preview .slim-crop {
|
|
z-index: 3; }
|
|
.slim-image-editor .slim-crop-preview::after {
|
|
z-index: 2;
|
|
right: 0;
|
|
bottom: 0;
|
|
content: ''; }
|
|
.slim-image-editor .slim-crop-preview .slim-crop-blur {
|
|
-webkit-filter: contrast(0.7);
|
|
-moz-filter: contrast(0.7);
|
|
filter: contrast(0.7);
|
|
z-index: 1; }
|
|
.slim-image-editor .slim-editor-utils-group {
|
|
text-align: center; }
|
|
.slim-image-editor .slim-editor-utils-group button {
|
|
width: 2.5em;
|
|
height: 2.5em;
|
|
padding: 0;
|
|
font-size: 1em;
|
|
cursor: pointer;
|
|
outline: none;
|
|
box-shadow: inset 0 -1px 2px rgba(0, 0, 0, 0.1), inset 0 1px 0 0 rgba(255, 255, 255, 0.15);
|
|
background-color: transparent;
|
|
background-size: 50% 50%;
|
|
background-position: center center;
|
|
background-repeat: no-repeat; }
|
|
.slim-image-editor .slim-editor-utils-group button:active {
|
|
background-color: rgba(0, 0, 0, 0.1);
|
|
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15); }
|
|
.slim-image-editor .slim-editor-btn-group {
|
|
text-align: center; }
|
|
.slim-image-editor .slim-editor-btn-group button {
|
|
position: relative;
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
font-size: 1em;
|
|
margin: 0 .75em;
|
|
padding: .75em 1.5em .875em;
|
|
cursor: pointer;
|
|
overflow: hidden;
|
|
-webkit-transition: color .25s, box-shadow .25s, background-color .25s;
|
|
transition: color .25s, box-shadow .25s, background-color .25s;
|
|
box-shadow: inset 0 -1px 2px rgba(0, 0, 0, 0.1), inset 0 1px 0 0 rgba(255, 255, 255, 0.15);
|
|
background-color: transparent;
|
|
outline: none; }
|
|
.slim-image-editor .slim-editor-btn-group button:active {
|
|
padding: .875em 1.5em .75em;
|
|
background-color: rgba(0, 0, 0, 0.1);
|
|
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15); }
|
|
|
|
.slim-rotation-disabled .slim-container {
|
|
height: calc(100% - 4em); }
|
|
|
|
.slim-rotation-disabled .slim-editor-utils-group {
|
|
display: none; }
|
|
|
|
.slim-editor-utils-btn,
|
|
.slim-editor-btn {
|
|
color: rgba(255, 255, 255, 0.75);
|
|
border: 2px solid rgba(0, 0, 0, 0.25); }
|
|
.slim-editor-utils-btn:focus, .slim-editor-utils-btn:hover,
|
|
.slim-editor-btn:focus,
|
|
.slim-editor-btn:hover {
|
|
color: rgba(255, 255, 255, 0.9); }
|
|
|
|
.slim-editor-utils-btn {
|
|
border-radius: .6875em; }
|
|
|
|
.slim-editor-btn {
|
|
border-radius: .5em; }
|
|
|
|
.slim-image-editor-preview::after {
|
|
background-color: rgba(244, 250, 255, 0.4);
|
|
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07), 0 1px 5px rgba(0, 0, 0, 0.3); }
|
|
|
|
.slim-btn-rotate {
|
|
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='252' height='287' viewBox='0 0 252 287' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M134.762.626v36.15c65.016 4.594 116.34 58.75 116.34 124.936 0 69.198-56.09 125.288-125.29 125.288C56.616 287 .525 230.91.525 161.71c0-30.036 10.592-57.59 28.215-79.17l31.934 31.934C51.03 127.75 45.27 144.04 45.27 161.71c0 44.485 36.06 80.544 80.544 80.544 44.484 0 80.544-36.058 80.544-80.543 0-41.454-31.327-75.56-71.594-80.017v35.272l-62.646-57.89L134.762.625zm-8.95 196.883c-19.77 0-35.796-16.028-35.796-35.798 0-19.77 16.027-35.796 35.797-35.796 19.77 0 35.797 16.026 35.797 35.796s-16.027 35.797-35.797 35.797z' fill='rgba(255,255,255,.8)' fill-rule='evenodd'/%3E%3C/svg%3E"); }
|
|
|
|
.slim-editor-utils-group {
|
|
padding: 1em 0 0; }
|
|
|
|
.slim-editor-btn-group {
|
|
padding: 1em 0 0; }
|
|
|
|
@media (min-width: 40em) {
|
|
.slim-btn-group {
|
|
padding-top: 2em; } }
|
|
|
|
.slim-crop-area {
|
|
position: absolute;
|
|
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.75); }
|
|
.slim-crop-area .grid {
|
|
overflow: hidden; }
|
|
.slim-crop-area .grid::before, .slim-crop-area .grid::after {
|
|
position: absolute;
|
|
z-index: 2;
|
|
content: '';
|
|
opacity: 0;
|
|
-webkit-transition: opacity .5s;
|
|
transition: opacity .5s; }
|
|
.slim-crop-area .grid::before {
|
|
top: 33.333%;
|
|
bottom: 33.333%;
|
|
left: 1px;
|
|
right: 1px;
|
|
box-shadow: inset 0 -1px 0 0 rgba(255, 255, 255, 0.35), inset 0 1px 0 0 rgba(255, 255, 255, 0.35); }
|
|
.slim-crop-area .grid::after {
|
|
top: 1px;
|
|
bottom: 1px;
|
|
left: 33.333%;
|
|
right: 33.333%;
|
|
box-shadow: inset -1px 0 0 0 rgba(255, 255, 255, 0.35), inset 1px 0 0 0 rgba(255, 255, 255, 0.35); }
|
|
.slim-crop-area button {
|
|
position: absolute;
|
|
background: #fafafa;
|
|
box-shadow: inset 0 1px 0 0 #fff, 0 1px 1px rgba(0, 0, 0, 0.15);
|
|
border: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
width: 16px;
|
|
height: 16px;
|
|
margin-top: -8px;
|
|
margin-left: -8px;
|
|
border-radius: 8px;
|
|
z-index: 3; }
|
|
.slim-crop-area [class*='n'] {
|
|
top: 0; }
|
|
.slim-crop-area [class*='s'] {
|
|
top: 100%; }
|
|
.slim-crop-area [class*='w'] {
|
|
left: 0; }
|
|
.slim-crop-area [class*='e'] {
|
|
left: 100%; }
|
|
.slim-crop-area .e,
|
|
.slim-crop-area .w {
|
|
top: 50%;
|
|
cursor: ew-resize;
|
|
height: 30px;
|
|
margin-top: -15px; }
|
|
.slim-crop-area .n,
|
|
.slim-crop-area .s {
|
|
left: 50%;
|
|
cursor: ns-resize;
|
|
width: 30px;
|
|
margin-left: -15px; }
|
|
.slim-crop-area .ne,
|
|
.slim-crop-area .sw {
|
|
cursor: nesw-resize; }
|
|
.slim-crop-area .nw,
|
|
.slim-crop-area .se {
|
|
cursor: nwse-resize; }
|
|
.slim-crop-area .c {
|
|
top: 10px;
|
|
left: 10px;
|
|
width: calc(100% - 20px);
|
|
height: calc(100% - 20px);
|
|
margin: 0;
|
|
border-radius: 0;
|
|
border: none;
|
|
z-index: 2;
|
|
box-shadow: none;
|
|
opacity: 0;
|
|
cursor: move; }
|
|
.slim-crop-area button:not(.c)::after {
|
|
content: '';
|
|
position: absolute;
|
|
left: -12px;
|
|
right: -12px;
|
|
top: -12px;
|
|
bottom: -12px; }
|
|
.slim-crop-area .slim-crop-mask {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
overflow: hidden;
|
|
z-index: 1; }
|
|
.slim-crop-area .slim-crop-mask img {
|
|
position: absolute;
|
|
-webkit-transform-origin: 0 0;
|
|
transform-origin: 0 0;
|
|
-webkit-transform: translateZ(0);
|
|
transform: translateZ(0);
|
|
margin: 0 !important;
|
|
width: auto;
|
|
height: auto;
|
|
max-width: none;
|
|
min-width: initial; }
|
|
.slim-crop-area[data-dragging='true'] .grid::before, .slim-crop-area[data-dragging='true'] .grid::after {
|
|
opacity: 1; }
|
|
|
|
.slim-popover {
|
|
-ms-touch-action: none;
|
|
touch-action: none;
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 1em;
|
|
font-size: 16px;
|
|
background: rgba(25, 27, 29, 0.99);
|
|
z-index: 2147483647;
|
|
overflow: hidden; }
|
|
.slim-popover[data-state='off'] {
|
|
left: -100%; }
|
|
.slim-popover::after {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
content: '';
|
|
background: -webkit-radial-gradient(center ellipse, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 80%);
|
|
background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 80%); }
|
|
|
|
@media (min-width: 40em) {
|
|
.slim-popover {
|
|
padding: 2em; } }
|
|
|
|
.slim,
|
|
.slim-popover,
|
|
.slim-crop-area,
|
|
.slim-image-editor {
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
box-sizing: border-box; }
|
|
.slim button,
|
|
.slim-popover button,
|
|
.slim-crop-area button,
|
|
.slim-image-editor button {
|
|
-webkit-highlight: none;
|
|
-webkit-tap-highlight-color: transparent; }
|
|
.slim *,
|
|
.slim-popover *,
|
|
.slim-crop-area *,
|
|
.slim-image-editor * {
|
|
box-sizing: inherit; }
|
|
.slim img,
|
|
.slim-popover img,
|
|
.slim-crop-area img,
|
|
.slim-image-editor img {
|
|
background-color: #eee;
|
|
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAABG2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS41LjAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIi8+CiA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgo8P3hwYWNrZXQgZW5kPSJyIj8+Gkqr6gAAAYBpQ0NQc1JHQiBJRUM2MTk2Ni0yLjEAACiRdZHPK0RRFMc/M4gYERaKxUvDamhQExtlJqEmTWOUwWbmzS81P17vzaTJVtlOUWLj14K/gK2yVopISdlZExv0nGfUSObc7rmf+73nnO49F+yhtJoxat2Qyeb14KRXmQ8vKPWP2OjCQRtKRDW08UDAT1V7u5Fosat+q1b1uH+tKRY3VLA1CI+pmp4XnhL2r+Q1izeFO9RUJCZ8LOzS5YLC15YeLfOTxckyf1ish4I+sLcKK8lfHP3FakrPCMvLcWbSBfXnPtZLHPHs3KysPTK7MQgyiReFaSbw4WGQUfEe+hliQHZUyXd/58+Qk1xVvEYRnWWSpMjjErUg1eOyJkSPy0hTtPr/t69GYnioXN3hhboH03zphfoN+CyZ5vu+aX4eQM09nGUr+bk9GHkVvVTRnLvQsgYn5xUtugWn69B5p0X0yLdUI9OeSMDzETSHof0SGhfLPfs55/AWQqvyVRewvQN9Et+y9AUyt2fOEwKMEgAAAAlwSFlzAAALEwAACxMBAJqcGAAAAC9JREFUOI1jZGBgkGIgDjwjRhETkYYRDUYNHDVwMBjISIJaonLU4PfyqIGjBpIBAPvwAUFW9TOIAAAAAElFTkSuQmCC"); }
|
|
|
|
.slim img {
|
|
width: 100%;
|
|
height: auto; }
|
|
|
|
span.slim {
|
|
display: block; }
|
|
|
|
.slim {
|
|
position: relative;
|
|
font-size: inherit;
|
|
background-color: #eee;
|
|
-webkit-transition: background-color 0.25s;
|
|
transition: background-color 0.25s;
|
|
padding-bottom: 0.025px; }
|
|
|
|
@-webkit-keyframes rotate {
|
|
0% {
|
|
-webkit-transform: rotate(0deg);
|
|
transform: rotate(0deg); }
|
|
100% {
|
|
-webkit-transform: rotate(360deg);
|
|
transform: rotate(360deg); } }
|
|
|
|
@keyframes rotate {
|
|
0% {
|
|
-webkit-transform: rotate(0deg);
|
|
transform: rotate(0deg); }
|
|
100% {
|
|
-webkit-transform: rotate(360deg);
|
|
transform: rotate(360deg); } }
|
|
.slim[data-state*='file-over'] .slim-btn {
|
|
pointer-events: none; }
|
|
.slim[data-state*='empty']:hover {
|
|
background-color: #ddd; }
|
|
.slim[data-state*='empty'] .slim-label {
|
|
visibility: visible;
|
|
opacity: 1; }
|
|
.slim[data-state*='busy'] .slim-label {
|
|
opacity: 0; }
|
|
.slim[data-state*='loading'] .slim-label {
|
|
display: none; }
|
|
.slim[data-state*='loading'] .slim-label-loading {
|
|
opacity: 1;
|
|
display: block; }
|
|
.slim[data-state*='preview'] .slim-label {
|
|
visibility: hidden; }
|
|
.slim[data-state*='error'] {
|
|
background-color: #e8a69f !important;
|
|
color: #702010; }
|
|
.slim > img,
|
|
.slim > input[type='file'] {
|
|
display: block !important;
|
|
opacity: 0 !important;
|
|
width: 0 !important;
|
|
height: 0 !important;
|
|
padding: 0 !important;
|
|
margin-left: 0 !important;
|
|
margin-right: 0 !important;
|
|
margin-top: 0 !important;
|
|
border: 0 !important; }
|
|
.slim > img + input[type='file'] {
|
|
margin-bottom: 0 !important; }
|
|
.slim > input[type='file'] + img {
|
|
margin-bottom: 0 !important; }
|
|
.slim > input[type='hidden'] {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
margin: -1px;
|
|
opacity: 0; }
|
|
.slim .slim-label-loading {
|
|
display: none; }
|
|
.slim .slim-label {
|
|
visibility: hidden;
|
|
-webkit-transition: opacity 0.25s;
|
|
transition: opacity 0.25s; }
|
|
.slim .slim-label-loading,
|
|
.slim .slim-label,
|
|
.slim .slim-error {
|
|
max-width: 100%; }
|
|
.slim .slim-file-hopper {
|
|
z-index: 3;
|
|
background: rgba(0, 0, 0, 0.0001); }
|
|
.slim .slim-ratio,
|
|
.slim .slim-drip,
|
|
.slim .slim-status,
|
|
.slim .slim-result,
|
|
.slim .slim-area {
|
|
border-radius: inherit; }
|
|
.slim .slim-area {
|
|
width: 100%;
|
|
color: inherit;
|
|
overflow: hidden; }
|
|
.slim .slim-area *:only-of-type {
|
|
margin: 0; }
|
|
.slim .slim-area .slim-loader {
|
|
pointer-events: none;
|
|
position: absolute;
|
|
right: 0.875em;
|
|
top: 0.875em;
|
|
width: 23px;
|
|
height: 23px;
|
|
z-index: 1; }
|
|
.slim .slim-area .slim-loader svg {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
opacity: 0; }
|
|
.slim .slim-area .slim-upload-status {
|
|
position: absolute;
|
|
right: 1em;
|
|
top: 1em;
|
|
z-index: 1;
|
|
opacity: 0;
|
|
-webkit-transition: opacity 0.25s;
|
|
transition: opacity 0.25s;
|
|
white-space: nowrap;
|
|
line-height: 1.65;
|
|
font-weight: normal; }
|
|
.slim .slim-area .slim-upload-status-icon {
|
|
display: inline-block;
|
|
opacity: 0.9; }
|
|
.slim .slim-area .slim-drip,
|
|
.slim .slim-area .slim-status,
|
|
.slim .slim-area .slim-result {
|
|
left: 0;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0; }
|
|
.slim .slim-area .slim-drip,
|
|
.slim .slim-area .slim-result {
|
|
position: absolute; }
|
|
.slim .slim-area .slim-status {
|
|
padding: 3em 1.5em;
|
|
display: -webkit-box;
|
|
display: -webkit-flex;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-align: center;
|
|
-webkit-align-items: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
-webkit-box-pack: center;
|
|
-webkit-justify-content: center;
|
|
-ms-flex-pack: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-box-direction: normal;
|
|
-webkit-flex-direction: column;
|
|
-ms-flex-direction: column;
|
|
flex-direction: column;
|
|
pointer-events: none; }
|
|
.slim .slim-area .slim-drip {
|
|
z-index: 1;
|
|
overflow: hidden; }
|
|
.slim .slim-area .slim-drip > span {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
opacity: 0;
|
|
margin-left: -25%;
|
|
margin-top: -25%;
|
|
width: 50%;
|
|
padding-bottom: 50%; }
|
|
.slim .slim-area .slim-drip > span > span {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0, 0, 0, 0.25);
|
|
border-radius: 50%;
|
|
opacity: 0.5;
|
|
left: 0;
|
|
top: 0; }
|
|
.slim .slim-area .slim-result {
|
|
overflow: hidden;
|
|
-webkit-perspective: 1px; }
|
|
.slim .slim-area .slim-result img {
|
|
display: block;
|
|
width: 100%;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0; }
|
|
.slim .slim-area .slim-result img:not([src]), .slim .slim-area .slim-result img[src=''] {
|
|
visibility: hidden; }
|
|
.slim .slim-btn-group {
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
z-index: 3;
|
|
overflow: hidden;
|
|
pointer-events: none; }
|
|
.slim .slim-btn-group button {
|
|
pointer-events: all;
|
|
cursor: pointer; }
|
|
.slim[data-ratio*=':'] {
|
|
min-height: initial; }
|
|
.slim[data-ratio*=':'] .slim-status {
|
|
position: absolute;
|
|
padding: 0 1.5em; }
|
|
.slim[data-ratio='16:10'] > input[type='file'],
|
|
.slim[data-ratio='16:10'] > img {
|
|
margin-bottom: 62.5%; }
|
|
.slim[data-ratio='10:16'] > input[type='file'],
|
|
.slim[data-ratio='10:16'] > img {
|
|
margin-bottom: 160%; }
|
|
.slim[data-ratio='16:9'] > input[type='file'],
|
|
.slim[data-ratio='16:9'] > img {
|
|
margin-bottom: 56.25%; }
|
|
.slim[data-ratio='9:16'] > input[type='file'],
|
|
.slim[data-ratio='9:16'] > img {
|
|
margin-bottom: 177.77778%; }
|
|
.slim[data-ratio='5:3'] > input[type='file'],
|
|
.slim[data-ratio='5:3'] > img {
|
|
margin-bottom: 60%; }
|
|
.slim[data-ratio='3:5'] > input[type='file'],
|
|
.slim[data-ratio='3:5'] > img {
|
|
margin-bottom: 166.66667%; }
|
|
.slim[data-ratio='5:4'] > input[type='file'],
|
|
.slim[data-ratio='5:4'] > img {
|
|
margin-bottom: 80%; }
|
|
.slim[data-ratio='4:5'] > input[type='file'],
|
|
.slim[data-ratio='4:5'] > img {
|
|
margin-bottom: 125%; }
|
|
.slim[data-ratio='4:3'] > input[type='file'],
|
|
.slim[data-ratio='4:3'] > img {
|
|
margin-bottom: 75%; }
|
|
.slim[data-ratio='3:4'] > input[type='file'],
|
|
.slim[data-ratio='3:4'] > img {
|
|
margin-bottom: 133.33333%; }
|
|
.slim[data-ratio='3:2'] > input[type='file'],
|
|
.slim[data-ratio='3:2'] > img {
|
|
margin-bottom: 66.66667%; }
|
|
.slim[data-ratio='2:3'] > input[type='file'],
|
|
.slim[data-ratio='2:3'] > img {
|
|
margin-bottom: 150%; }
|
|
.slim[data-ratio='1:1'] > input[type='file'],
|
|
.slim[data-ratio='1:1'] > img {
|
|
margin-bottom: 100%; }
|
|
|
|
.slim-btn-group {
|
|
padding: 1.5em 0;
|
|
text-align: center; }
|
|
|
|
.slim-btn {
|
|
position: relative;
|
|
padding: 0;
|
|
margin: 0 7.2px;
|
|
font-size: 0;
|
|
outline: none;
|
|
width: 36px;
|
|
height: 36px;
|
|
border: none;
|
|
color: #fff;
|
|
background-color: rgba(0, 0, 0, 0.7);
|
|
background-repeat: no-repeat;
|
|
background-size: 50% 50%;
|
|
background-position: center center; }
|
|
.slim-btn {
|
|
border-radius: 50%; }
|
|
.slim-btn::before {
|
|
border-radius: inherit;
|
|
position: absolute;
|
|
box-sizing: border-box;
|
|
left: -3px;
|
|
right: -3px;
|
|
bottom: -3px;
|
|
top: -3px;
|
|
border: 3px solid white;
|
|
content: '';
|
|
-webkit-transform: scale(0.95);
|
|
transform: scale(0.95);
|
|
opacity: 0;
|
|
-webkit-transition: all 0.25s;
|
|
transition: all 0.25s;
|
|
z-index: -1;
|
|
pointer-events: none; }
|
|
.slim-btn:focus::before, .slim-btn:hover::before {
|
|
opacity: 1;
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1); }
|
|
.slim-btn * {
|
|
pointer-events: none; }
|
|
|
|
.slim-btn-remove {
|
|
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 269 269' xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' clip-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='1.414'%3E%3Cpath d='M63.12 250.254s3.998 18.222 24.582 18.222h93.072c20.583 0 24.582-18.222 24.582-18.222l18.374-178.66H44.746l18.373 178.66zM170.034 98.442c0-4.943 4.006-8.95 8.95-8.95 4.942 0 8.95 4.007 8.95 8.95l-8.95 134.238c0 4.943-4.008 8.95-8.95 8.95-4.942 0-8.95-4.008-8.95-8.95l8.95-134.238zm-44.746 0c0-4.943 4.006-8.95 8.948-8.95 4.943 0 8.95 4.007 8.95 8.95V232.68c0 4.943-4.007 8.95-8.95 8.95s-8.95-4.008-8.95-8.95V98.442zm-35.798-8.95c4.943 0 8.95 4.006 8.95 8.95l8.95 134.237c0 4.942-4.008 8.948-8.95 8.948-4.943 0-8.95-4.007-8.95-8.95l-8.95-134.236c0-4.943 4.008-8.95 8.95-8.95zm128.868-53.68h-39.376V17.898c0-13.578-4.39-17.9-17.898-17.9H107.39C95 0 89.492 6 89.492 17.9V35.81H50.116c-7.914 0-14.32 6.007-14.32 13.43 0 7.424 6.406 13.43 14.32 13.43H218.36c7.914 0 14.32-6.006 14.32-13.43 0-7.423-6.406-13.43-14.32-13.43zm-57.274 0H107.39l.002-17.914h53.695V35.81z' fill='%23fff'/%3E%3C/svg%3E"); }
|
|
|
|
.slim-btn-download {
|
|
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 269 269' xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' clip-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='1.414'%3E%3Cpath d='M232.943 223.73H35.533c-12.21 0-22.11 10.017-22.11 22.373 0 12.356 9.9 22.373 22.11 22.373h197.41c12.21 0 22.11-10.017 22.11-22.373 0-12.356-9.9-22.373-22.11-22.373zM117.88 199.136c4.035 4.04 9.216 6.147 14.492 6.508.626.053 1.227.188 1.866.188.633 0 1.228-.135 1.847-.186 5.284-.357 10.473-2.464 14.512-6.51l70.763-70.967c8.86-8.876 8.86-23.268 0-32.143-8.86-8.876-23.225-8.876-32.086 0l-32.662 32.756V22.373C156.612 10.017 146.596 0 134.238 0c-12.356 0-22.372 10.017-22.372 22.373v106.41L79.204 96.027c-8.86-8.876-23.226-8.876-32.086 0-8.86 8.875-8.86 23.267 0 32.142l70.763 70.966z' fill='%23fff'/%3E%3C/svg%3E"); }
|
|
|
|
.slim-btn-upload {
|
|
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='243' height='269' viewBox='0 0 243 269' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3EDownload%3C/title%3E%3Cpath d='M219.943 223.73H22.533c-12.21 0-22.11 10.017-22.11 22.373 0 12.356 9.9 22.373 22.11 22.373h197.41c12.21 0 22.11-10.017 22.11-22.373 0-12.356-9.9-22.373-22.11-22.373zM104.88 6.696c4.035-4.04 9.216-6.147 14.492-6.508C119.998.135 120.6 0 121.238 0c.633 0 1.228.135 1.847.186 5.284.357 10.473 2.464 14.512 6.51l70.763 70.967c8.86 8.875 8.86 23.267 0 32.142-8.86 8.876-23.225 8.876-32.086 0L143.612 77.05v106.41c0 12.355-10.016 22.372-22.374 22.372-12.356 0-22.372-10.017-22.372-22.373V77.05l-32.662 32.755c-8.86 8.876-23.226 8.876-32.086 0-8.86-8.875-8.86-23.267 0-32.142L104.88 6.696z' fill='%23FFF' fill-rule='evenodd'/%3E%3C/svg%3E"); }
|
|
|
|
.slim-btn-edit {
|
|
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 269 269' xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' clip-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='1.414'%3E%3Cpath d='M161.36 56.337c-7.042-7.05-18.46-7.05-25.5 0l-6.373 6.38-89.243 89.338.023.023-2.812 2.82s-8.968 9.032-29.216 74.4c-.143.456-.284.91-.427 1.373-.36 1.172-.726 2.362-1.094 3.568-.327 1.066-.657 2.154-.988 3.25-.28.922-.556 1.835-.84 2.778-.64 2.14-1.29 4.318-1.954 6.567-1.455 4.937-5.01 16.07-.99 20.1 3.87 3.882 15.12.467 20.043-.993 2.233-.662 4.396-1.31 6.52-1.952.98-.296 1.932-.586 2.89-.878 1.032-.314 2.058-.626 3.063-.935 1.27-.39 2.52-.775 3.75-1.157l1.09-.34c62.193-19.365 73.358-28.453 74.286-29.284l.01-.01.067-.06 2.88-2.886.192.193 89.244-89.336 6.373-6.382c7.04-7.048 7.04-18.476 0-25.525l-50.998-51.05zM103.4 219.782c-.08.053-.185.122-.297.193l-.21.133c-.076.047-.158.098-.245.15l-.243.148c-2.97 1.777-11.682 6.362-32.828 14.017-2.47.894-5.162 1.842-7.98 2.82l-30.06-30.092c.98-2.84 1.928-5.55 2.825-8.04 7.638-21.235 12.22-29.974 13.986-32.94l.12-.2c.063-.1.12-.196.175-.283l.126-.2c.07-.11.14-.217.192-.296l2.2-2.205 54.485 54.542-2.248 2.255zM263.35 56.337l-50.996-51.05c-7.04-7.048-18.456-7.048-25.498 0L174.108 18.05c-7.04 7.048-7.04 18.476 0 25.524l50.996 51.05c7.04 7.048 18.457 7.048 25.498 0l12.75-12.762c7.04-7.05 7.04-18.477 0-25.525z' fill='%23fff'/%3E%3C/svg%3E"); }
|
|
|
|
.slim-loader-background {
|
|
stroke: rgba(0, 0, 0, 0.15); }
|
|
|
|
.slim-loader-foreground {
|
|
stroke: rgba(0, 0, 0, 0.65); }
|
|
|
|
.slim[data-state*='preview'] .slim-loader-background {
|
|
stroke: rgba(255, 255, 255, 0.25); }
|
|
|
|
.slim[data-state*='preview'] .slim-loader-foreground {
|
|
stroke: #fff; }
|
|
|
|
.slim-upload-status {
|
|
padding: 0 0.5em;
|
|
border-radius: 0.3125em;
|
|
font-size: 0.75em;
|
|
box-shadow: 0 0.125em 0.25em rgba(0, 0, 0, 0.25); }
|
|
|
|
.slim-upload-status[data-state='success'] {
|
|
background-color: #d1ed8f;
|
|
color: #323e15; }
|
|
.slim-upload-status[data-state='success'] .slim-upload-status-icon {
|
|
width: 0.5em;
|
|
height: 0.75em;
|
|
-webkit-transform: rotate(45deg);
|
|
transform: rotate(45deg);
|
|
border: 0.1875em solid currentColor;
|
|
border-left: none;
|
|
border-top: none;
|
|
margin-right: 0.325em;
|
|
margin-left: 0.25em;
|
|
margin-bottom: 0.0625em; }
|
|
|
|
.slim-upload-status[data-state='error'] {
|
|
background: #efd472;
|
|
color: #574016; }
|
|
.slim-upload-status[data-state='error'] .slim-upload-status-icon {
|
|
margin-left: -0.125em;
|
|
margin-right: 0.5em;
|
|
width: 0.5625em;
|
|
height: 1em;
|
|
position: relative;
|
|
-webkit-transform: rotate(45deg);
|
|
transform: rotate(45deg); }
|
|
.slim-upload-status[data-state='error'] .slim-upload-status-icon:after, .slim-upload-status[data-state='error'] .slim-upload-status-icon:before {
|
|
content: '';
|
|
position: absolute;
|
|
box-sizing: content-box;
|
|
width: 0;
|
|
height: 0;
|
|
border-width: 0.09em;
|
|
border-style: solid;
|
|
border-color: currentColor;
|
|
background-color: currentColor;
|
|
-webkit-transform: translate(-50%, -50%) translate(0.5em, 0.5em);
|
|
transform: translate(-50%, -50%) translate(0.5em, 0.5em); }
|
|
.slim-upload-status[data-state='error'] .slim-upload-status-icon:before {
|
|
width: 0.66666666667em; }
|
|
.slim-upload-status[data-state='error'] .slim-upload-status-icon:after {
|
|
height: 0.66666666667em; }
|