cal.pub0.org/packages/ui/components/editor/stylesEditor.css

393 lines
6.4 KiB
CSS

.editor a {
text-decoration: underline;
font-size: 14px;
}
.editor li {
padding-left: 1.28571429em;
text-indent: -1.28571429em;
}
.editor ul {
list-style: disc inside;
}
.editor ol {
list-style: decimal inside;
}
.editor-container {
border-radius: 6px;
position: relative;
line-height: 20px;
font-weight: 400;
text-align: left;
border-color: var(--cal-border);
border-width: 1px;
padding: 1px;
}
.editor-inner {
background: var(--cal-bg);
position: relative;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
overflow: scroll;
resize: vertical;
height: auto;
min-height: 40px;
}
.editor-input {
height: auto;
font-size: 14px;
position: relative;
tab-size: 1;
outline: 0;
padding: 10px 10px;
outline: none;
}
.editor-text-bold {
font-weight: bold;
}
.editor-text-italic {
font-style: italic;
}
.editor-link {
color: rgb(33, 111, 219);
text-decoration: none;
}
.editor-tokenFunction {
color: #dd4a68;
}
.editor-paragraph {
margin: 0;
position: relative;
color: var(--cal-text);
}
.editor-paragraph:last-child {
margin-bottom: 0;
}
.editor-heading-h1 {
font-size: 25px;
font-weight: 400;
margin-bottom: 20px;
font-weight: bold;
}
.editor-heading-h2 {
font-size: 20px;
font-weight: bold;
margin-bottom: 20px;
}
.editor-list-ul {
margin-bottom: 12px;
}
.editor-list-ol {
margin-bottom: 12px;
}
.editor-listitem {
margin: 0px 32px;
}
.editor-nested-listitem {
list-style-type: none;
}
pre::-webkit-scrollbar {
background: transparent;
width: 10px;
}
pre::-webkit-scrollbar-thumb {
background: #999;
}
.toolbar {
display: flex;
margin-bottom: 1px;
background: var(--cal-bg);
padding: 2px;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
vertical-align: middle;
}
.toolbar button.toolbar-item {
display: flex;
border: 0;
padding: 8px;
cursor: pointer;
justify-self: center;
}
.toolbar button.toolbar-item.spaced {
margin-right: 2px;
}
.icon.paragraph {
background-image: url(images/icons/text-paragraph.svg);
}
.toolbar button.toolbar-item.active {
background-color: var(--cal-bg-inverted);
color: var(--cal-text-inverted);
}
.toolbar button.toolbar-item.active i {
opacity: 1;
}
.toolbar button.toolbar-item:not(.active):not([disabled]) {
background-color: var(--cal-bg);
color: var(--cal-text);
}
.toolbar button.toolbar-item:not(.active):hover {
color: var(--cal-text-default);
background-color: var(--cal-bg-inverted);
}
.toolbar select.toolbar-item {
border: 0;
display: flex;
background: none;
border-radius: 10px;
padding: 8px;
vertical-align: middle;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
width: 70px;
font-size: 14px;
color: #777;
text-overflow: ellipsis;
}
.toolbar .toolbar-item .text {
line-height: 20px;
width: 200px;
vertical-align: middle;
font-size: 14px;
text-overflow: ellipsis;
width: 70px;
overflow: hidden;
height: 20px;
text-align: left;
}
.toolbar .toolbar-item .icon {
display: flex;
color: var(--cal-text);
}
#block-controls button:hover {
background-color: #efefef;
}
#block-controls button:focus-visible {
border-color: blue;
}
.dropdown {
z-index: 5;
display: block;
position: absolute;
box-shadow: 0 12px 28px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.1),
inset 0 0 0 1px rgba(255, 255, 255, 0.5);
border-radius: 8px;
min-width: 100px;
min-height: 40px;
background-color: #fff;
}
.dropdown .item {
margin: 0 8px 0 8px;
padding: 8px;
color: #050505;
cursor: pointer;
line-height: 16px;
font-size: 15px;
display: flex;
align-content: center;
flex-direction: row;
flex-shrink: 0;
justify-content: space-between;
background-color: #fff;
border-radius: 8px;
border: 0;
min-width: 268px;
}
.dropdown .item .active {
display: flex;
width: 20px;
height: 20px;
background-size: contain;
}
.dropdown .item:first-child {
margin-top: 8px;
}
.dropdown .item:last-child {
margin-bottom: 8px;
}
.dropdown .item:hover {
background-color: #eee;
}
.dropdown .item .text {
display: flex;
line-height: 20px;
flex-grow: 1;
width: 200px;
}
.dropdown .item .icon {
display: flex;
width: 20px;
height: 20px;
user-select: none;
margin-right: 12px;
line-height: 16px;
background-size: contain;
}
.link-editor {
position: absolute;
z-index: 100;
top: -10000px;
left: -10000px;
margin-top: -6px;
max-width: 300px;
width: 100%;
opacity: 0;
background-color: #fff;
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
border-radius: 8px;
transition: opacity 0.5s;
}
.link-editor .link-input {
display: block;
width: calc(100% - 24px);
box-sizing: border-box;
margin: 8px 12px;
padding: 8px 12px;
border-radius: 15px;
background-color: #eee;
font-size: 15px;
color: rgb(5, 5, 5);
border: 0;
outline: 0;
position: relative;
font-family: inherit;
}
.link-editor div.link-edit {
background-image: url(images/icons/pencil-fill.svg);
background-size: 16px;
background-position: center;
background-repeat: no-repeat;
width: 35px;
vertical-align: -0.25em;
position: absolute;
right: 0;
top: 0;
bottom: 0;
cursor: pointer;
}
.link-editor .link-input a {
color: rgb(33, 111, 219);
text-decoration: none;
display: block;
white-space: nowrap;
overflow: hidden;
margin-right: 30px;
text-overflow: ellipsis;
}
.link-editor .link-input a:hover {
text-decoration: underline;
}
.link-editor .button {
width: 20px;
height: 20px;
display: inline-block;
padding: 6px;
border-radius: 8px;
cursor: pointer;
margin: 0 2px;
}
.link-editor .button.hovered {
width: 20px;
height: 20px;
display: inline-block;
background-color: #eee;
}
.link-editor .button i,
.actions i {
background-size: contain;
display: inline-block;
height: 20px;
width: 20px;
vertical-align: -0.25em;
}
i,
.icon {
fill: currentColor;
}
.icon.paragraph {
background-image: url(images/icons/text-paragraph.svg);
}
.icon.large-heading,
.icon.h1 {
background-image: url(images/icons/type-h1.svg);
}
.icon.small-heading,
.icon.h2 {
background-image: url(images/icons/type-h2.svg);
}
.icon.bullet-list,
.icon.ul {
background-image: url(images/icons/list-ul.svg);
}
.icon.numbered-list,
.icon.ol {
background-image: url(images/icons/list-ol.svg);
}
i.bold {
background-image: url(images/icons/type-bold.svg);
}
i.italic {
background-image: url(images/icons/type-italic.svg);
}
i.link {
background-image: url(images/icons/link.svg);
}