mirror of
https://github.com/codex-team/editor.js
synced 2024-05-23 08:42:25 +02:00
9425e17598
1) improved blocks transmition. We can switch contenteditable elements by clicking arrow buttons. 2) Refactoring (Removing) blocks. When backspace key pressed and input is empty, we can remove from DOM this element
166 lines
3.3 KiB
CSS
166 lines
3.3 KiB
CSS
/** Quote - settings */
|
|
.ce_plugin_quote--settings{
|
|
white-space: nowrap;
|
|
/*padding-right: 10px; */
|
|
}
|
|
.ce_plugin_quote--caption{
|
|
color: #b9c2c2;
|
|
}
|
|
.ce_plugin_quote--select_button{
|
|
display: inline-block;
|
|
margin-left: 40px;
|
|
border-bottom: 1px solid #c3d5ed;
|
|
padding-bottom: 2px;
|
|
color: #5399d4;
|
|
cursor: pointer;
|
|
}
|
|
.ce_plugin_quote--select_button:hover{
|
|
border-bottom-color: #f6d8da;
|
|
color: #cc7d74;
|
|
}
|
|
|
|
/** Quote Styles */
|
|
|
|
.quoteStyle-withCaption--author:empty {
|
|
direction: rtl;
|
|
}
|
|
.quoteStyle-withCaption--author {
|
|
|
|
margin: 2.5em 100px !important;
|
|
margin-top: 25px;
|
|
text-align: right;
|
|
font-size: 1.38em;
|
|
font-weight: bold;
|
|
color: #000;
|
|
line-height: 1.5em;
|
|
|
|
}
|
|
.quoteStyle-simple--text,
|
|
.quoteStyle-withCaption--blockquote,
|
|
.quoteStyle-withPhoto--quote {
|
|
font-size: 1.3em;
|
|
line-height: 1.9em;
|
|
}
|
|
|
|
.quoteStyle-simple--text,
|
|
.quoteStyle-withCaption--blockquote
|
|
{
|
|
margin: 2.5em 100px;
|
|
padding: 1.5em 2.0em !important;
|
|
background: #FBFBFB;
|
|
}
|
|
|
|
.quoteStyle-withCaption--blockquote:focus,
|
|
.quoteStyle-withCaption--author:focus {
|
|
outline: none;
|
|
}
|
|
|
|
.quoteStyle-simple--text:empty::before,
|
|
.quoteStyle-withCaption--blockquote:empty::before,
|
|
.quoteStyle-withPhoto--quote:empty::before
|
|
{
|
|
content : 'Введите цитату';
|
|
color: #818BA1;
|
|
opacity: 0.7;
|
|
transition: opacity 200ms ease;
|
|
}
|
|
|
|
.quoteStyle-withCaption--author:empty::before
|
|
{
|
|
content : 'Введите имя автора';
|
|
color: #A5ABBC;
|
|
opacity: 1;
|
|
transition: opacity 200ms ease;
|
|
}
|
|
.quoteStyle-withPhoto--author:empty::before {
|
|
content : 'Введите имя автора';
|
|
color: #000;
|
|
opacity: .8;
|
|
transition: opacity 200ms ease;
|
|
}
|
|
|
|
.quoteStyle-simple--text:focus::before,
|
|
.quoteStyle-withCaption--blockquote:focus::before,
|
|
.quoteStyle-withPhoto--quote:focus::before
|
|
{
|
|
opacity: .1;
|
|
}
|
|
|
|
.quoteStyle-withCaption--author:focus::before,
|
|
.quoteStyle-withPhoto--author:focus::before
|
|
{
|
|
opacity: .1;
|
|
}
|
|
|
|
/** Quote with photo */
|
|
.ce_redactor .quoteStyle-withPhoto--wrapper {
|
|
margin: 0;
|
|
padding: 4.5em 8.5em !important;
|
|
}
|
|
|
|
.quoteStyle-withPhoto--photo {
|
|
width: 80px;
|
|
height: 80px;
|
|
text-align: center;
|
|
line-height: 80px;
|
|
border-radius: 50%;
|
|
float: left;
|
|
margin-right: 35px;
|
|
border: 3px dashed #D7E2EE;
|
|
}
|
|
.quoteStyle-withPhoto--photo:hover {
|
|
cursor: pointer;
|
|
background: #F0F3F6;
|
|
border: 3px dashed #D7E2EE;
|
|
}
|
|
|
|
.quoteStyle-withPhoto--photo:hover::after {
|
|
display: block;
|
|
}
|
|
|
|
.quoteStyle-withPhoto--photo .ce-icon-picture {
|
|
font-family: "codex_editor";
|
|
font-size: 1.5em;
|
|
color: #8990AA;
|
|
}
|
|
|
|
.quoteStyle-withPhoto--author {
|
|
font-size: 1.56em;
|
|
font-weight: bold;
|
|
color: #000;
|
|
outline: none;
|
|
overflow: hidden;
|
|
margin-bottom: 6px;
|
|
}
|
|
.quoteStyle-withPhoto--job {
|
|
font-size: 1.38em;
|
|
color: #818BA1;
|
|
outline: none;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.quoteStyle-withPhoto--job:empty::before {
|
|
content : 'Введите должность автора';
|
|
color: #A5ABBC;
|
|
opacity: 1;
|
|
transition: opacity 200ms ease;
|
|
}
|
|
|
|
.quoteStyle-withPhoto--job:focus::before {
|
|
opacity: .1;
|
|
}
|
|
|
|
.quoteStyle-withPhoto--quote {
|
|
background: #FBFBFB;
|
|
margin-top: 45px;
|
|
line-height: 32px;
|
|
outline: none;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.quoteStyle-withPhoto--authorWrapper {
|
|
|
|
margin-top: 10px;
|
|
|
|
}
|