fffd2f1576
Technically, the other modes can have a quick-action button as well, but for now it's not implemented since it's unlikely to be used. The first usage will be to house the "toggle markdown editor" button, but it can be used for anything. The caller will handle the action. It will be located at the upper-right, which is a better place for such a button. Putting the "toggle markdown editor" button on the bottom seems too far away and seems to make the 'Done|Cancel' area too busy/cluttered.
76 lines
1.5 KiB
SCSS
76 lines
1.5 KiB
SCSS
.CodeMirror {
|
|
border: 1px solid var(--color-input-border);
|
|
border-bottom-left-radius: var(--border-radius);
|
|
border-bottom-right-radius: var(--border-radius);
|
|
background: var(--color-input-bg);
|
|
color: var(--color-input);
|
|
|
|
.CodeMirror-placeholder {
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
|
|
.CodeMirror-wrap {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.editor-toolbar {
|
|
background-color: var(--color-header-background);
|
|
border: none;
|
|
border-top-left-radius: var(--border-radius);
|
|
border-top-right-radius: var(--border-radius);
|
|
border-right: 1px solid var(--color-input-border);
|
|
border-top: 1px solid var(--color-input-border);
|
|
border-left: 1px solid var(--color-input-border);
|
|
|
|
opacity: 1; // ?
|
|
|
|
&:hover {
|
|
opacity: 1; // ?
|
|
}
|
|
|
|
&.disabled-for-preview a:not(.no-disable) {
|
|
border-color: transparent;
|
|
opacity: 0.3;
|
|
}
|
|
|
|
&.fullscreen {
|
|
&::before,
|
|
&::after {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
button {
|
|
color: var(--color-header-link);
|
|
border-color: transparent;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
i.separator {
|
|
border: none;
|
|
}
|
|
}
|
|
|
|
.form-field--SimpleMDE {
|
|
margin-top: var(--spacing-large);
|
|
|
|
// Override hyperlink styles
|
|
.cm-s-easymde .cm-link {
|
|
color: inherit;
|
|
}
|
|
|
|
// Overriding the lbry/components form styling
|
|
.editor-toolbar {
|
|
button:not(.button) {
|
|
padding-right: 0;
|
|
padding-left: 0;
|
|
background-color: transparent !important;
|
|
border: transparent;
|
|
|
|
&:hover {
|
|
color: var(--color-header-link-active);
|
|
}
|
|
}
|
|
}
|
|
}
|