editor.js/plugins/image/image.css

127 lines
2.6 KiB
CSS
Raw Normal View History

/**
* Image plugin for codex-editor
* @author CodeX Team <team@ifmo.su>
*
* @version 0.0.1
*/
2017-01-26 01:10:36 +01:00
.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-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;
}
.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;
}