editor.js/plugins/image/image.css

/**
* Image plugin for codex-editor
* @author CodeX Team <team@ifmo.su>
*
* @version 0.0.1
*/

.ce-image__wrapper img {
    transition: all 500ms ease-in;
    will-change: opacity, filter;
}

.ce-image__preview img {
    opacity: .5;
    filter: blur(1.7px) grayscale(1);
}

/** upload image form */
.ce-plugin-image__holder{
	position: relative;
	background: #FEFEFE;
	border: 2px solid #edeff5;
    text-align: center;
	margin: 30px 0;
	padding: 15px;
}
	.ce-plugin-image__holder input{
		border: 0;
		background: transparent;
		outline: none;
		-webkit-appearance: none;
		font-size: 1.2em;
		color: #A5ABBC;
	}
	/* Placeholder color for Chrome */
	.ce-plugin-image__holder input::-webkit-input-placeholder {
	  color: #A5ABBC;
	}
	/* Placeholder color for IE 10+ */
	.ce-plugin-image__holder input:-ms-input-placeholder {
	  color: #A5ABBC;
	}
	/* Placeholder color for Firefox 19+ */
	.ce-plugin-image__holder input::-moz-placeholder {
	  color: #A5ABBC;
	  opacity: 1;
	}

.ce-plugin-image__loader {
    background-color: transparent;
    background-image: repeating-linear-gradient(-45deg, transparent, transparent 4px, #f5f9ff 4px, #eaedef 8px) !important;
    background-size: 56px 56px;
    animation: loading-bar 5s infinite linear;
}
@keyframes loading-bar {
    100% { background-position: -56% 0 }
}



.ce-plugin-image__button{
	cursor: pointer;
	font-size: 1;
	color: #8990AA;
}
	.ce-plugin-image__button:hover{
		color: #393F52;
	}



/** Uploaded image */
.ce-plugin-image__wrapper {
    padding: 1em 0;
}

.ce-image__wrapper--bordered {
    border: 1px solid #eee;
    box-sizing: border-box;
}

.ce-plugin-image__uploaded--centered {
    display: block;
    max-width: 600px;
    margin: 0 auto;
}

.ce-plugin-image__uploaded--stretched {
	width: 100%;
}
	.ce-plugin-image__firstlevel--stretch {
		margin: 0 !important;
		max-width: none !important;
		padding: 0 !important;
	}

.ce-plugin-image__caption {
    max-width: 600px;
    margin: .5em auto 0;
    padding: .5em;
    text-align: center;
    color: #898a8c;
    background: #fff;
    border: 1px solid #ebeef3;
    border-radius: 3px;
    box-sizing: border-box;
}

    .ce-plugin-image__caption:empty::before {
        content: 'Введите подпись';
        text-align: center;
        font-weight: normal;
        color: #a1a5b3;;
        opacity: .9;
        transition: opacity 200ms ease;
    }

    .ce-plugin-image__caption:focus::before {
        opacity: .1;
        text-align: center;
    }

/** Settings */
.ce_plugin_image--select_button{
    display: block;
    color: #306ac7;
    cursor: pointer;
    line-height: 1.3em;
}
    .ce_plugin_image--select_button:not(:last-of-type){
        margin-bottom: 1.5em;
    }
    .ce_plugin_image--select_button:hover{
        color: #a1b4ec;
    }

.ce-image-settings {
    padding: 7px 0
}
.ce-image-settings__item {
    padding: 7px 15px;
    cursor: pointer;
}

.ce-settings-checkbox {
    display: inline-block;
    width: 17px;
    background: #494361;
    line-height: 0px;
    border-radius: 14px;
    padding: 2px;
    vertical-align: text-top;
    margin-right: 16px;
    transition: background-color 200ms ease-out;
    will-change: background-color;
}

.ce-settings-checkbox__toggler {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    transition: margin 200ms ease-out;
}

/**
 * Setting is active
 */
.ce-image-settings__item--toggled {
    color: #1FAA7E;
}

.ce-image-settings__item--toggled .ce-settings-checkbox {
    background-color: #14DC9E;
}

.ce-image-settings__item--toggled .ce-settings-checkbox__toggler {
    margin-left: 6px;
}