editor.js/src/styles/block.css
Peter Savchenko d22667df62
Improve style of selected blocks (#858)
* Cross-block-selection style improved

* Update CHANGELOG.md
2019-07-31 21:09:51 +03:00

99 lines
1.9 KiB
CSS

.ce-block {
&:first-of-type {
margin-top: 0;
}
&--focused {
background-image: linear-gradient(17deg, rgba(243, 248, 255, 0.03) 63.45%, rgba(207, 214, 229, 0.27) 98%);
border-radius: 3px;
@media (--mobile){
background-image: none;
background-color: rgba(200, 199, 219, 0.17);
margin: 0 -10px;
padding: 0 10px;
}
}
&--selected &__content {
background: var(--selectionColor);
/**
* Workaround Safari case when user can select inline-fragment with cross-block-selection
*/
& [contenteditable] {
-webkit-user-select: none;
user-select: none;
}
img,
.ce-stub {
opacity: 0.55;
}
}
&--stretched &__content {
max-width: none;
}
&__content {
position: relative;
max-width: var(--content-width);
margin: 0 auto;
transition: background-color 150ms ease;
}
&--drop-target &__content {
&:before {
content: '';
position: absolute;
top: 100%;
left: -20px;
margin-top: -1px;
height: 8px;
width: 8px;
border: solid var(--color-active-icon);
border-width: 1px 1px 0 0;
transform-origin: right;
transform: rotate(45deg);
}
&:after {
content: '';
position: absolute;
top: 100%;
height: 1px;
width: 100%;
color: var(--color-active-icon);
background: repeating-linear-gradient(
90deg,
var(--color-active-icon),
var(--color-active-icon) 1px,
#fff 1px,
#fff 6px
);
}
}
a {
cursor: pointer;
text-decoration: underline;
}
b {
font-weight: bold;
}
i {
font-style: italic;
}
}
.codex-editor--narrow .ce-block--focused {
@media (--not-mobile) {
margin-right: calc(var(--narrow-mode-right-padding) * -1);
padding-right: var(--narrow-mode-right-padding);
}
}