LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity
lbry-desktop/ui/scss/component/_markdown-editor.scss

129 lines
2.5 KiB
SCSS
Raw Permalink Normal View History

fix markdown-editor styles
2017-08-26 22:47:37 +02:00
.CodeMirror {
Codebox theming
2020-01-18 08:13:11 +01:00
border: 1px solid var(--color-input-border);
remove [data-mode='dark']
2019-11-22 22:13:00 +01:00
border-bottom-left-radius: var(--border-radius);
border-bottom-right-radius: var(--border-radius);
background: var(--color-input-bg);
color: var(--color-input);
fix markdown-editor styles
2017-08-26 22:47:37 +02:00
Replacing existing colors with npm module, and refactoring Sass
2018-10-17 00:29:55 +02:00
.CodeMirror-placeholder {
opacity: 0.5;
}
fix markdown-editor styles
2017-08-26 22:47:37 +02:00
}
Codebox theming
2020-01-18 08:13:11 +01:00
.CodeMirror-wrap {
overflow: hidden;
}
Replacing existing colors with npm module, and refactoring Sass
2018-10-17 00:29:55 +02:00
.editor-toolbar {
remove [data-mode='dark']
2019-11-22 22:13:00 +01:00
background-color: var(--color-header-background);
Second refactor pass
2018-10-17 19:14:24 +02:00
border: none;
remove [data-mode='dark']
2019-11-22 22:13:00 +01:00
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);
Second refactor pass
2018-10-17 19:14:24 +02:00
opacity: 1; // ?
fix markdown-editor styles
2017-08-26 22:47:37 +02:00
Replacing existing colors with npm module, and refactoring Sass
2018-10-17 00:29:55 +02:00
&:hover {
opacity: 1; // ?
}
fix markdown-editor styles
2017-08-26 22:47:37 +02:00
Replacing existing colors with npm module, and refactoring Sass
2018-10-17 00:29:55 +02:00
&.disabled-for-preview a:not(.no-disable) {
border-color: transparent;
opacity: 0.3;
}
fix markdown-editor styles
2017-08-26 22:47:37 +02:00
Replacing existing colors with npm module, and refactoring Sass
2018-10-17 00:29:55 +02:00
&.fullscreen {
&::before,
&::after {
display: none;
}
}
fix text selection
2018-07-28 22:17:06 +02:00
style fixes (#7548)
2022-04-20 23:17:47 +02:00
button.active {
&.preview {
color: var(--color-brand-blue);
}
}
fix: minor style issues
2019-03-21 16:22:23 +01:00
button {
remove [data-mode='dark']
2019-11-22 22:13:00 +01:00
color: var(--color-header-link);
fix: minor style issues
2019-03-21 16:22:23 +01:00
border-color: transparent;
Replacing existing colors with npm module, and refactoring Sass
2018-10-17 00:29:55 +02:00
transition: opacity 0.3s ease;
}
fix text selection
2018-07-28 22:17:06 +02:00
Replacing existing colors with npm module, and refactoring Sass
2018-10-17 00:29:55 +02:00
i.separator {
Second refactor pass
2018-10-17 19:14:24 +02:00
border: none;
Replacing existing colors with npm module, and refactoring Sass
2018-10-17 00:29:55 +02:00
}
Spell Checker CSS Style Changes These changes follow typical styling for spelling errors in most applications which means people are familiar with them which avoids confusion. The changes also mean that the incorrect spelling style is more visible especially in the Dark theme where it was almost impossible to see.
2018-06-24 17:27:34 +02:00
}
use @lbry/components
2019-02-13 17:27:20 +01:00
.form-field--SimpleMDE {
moonpay
2020-06-01 19:03:19 +02:00
margin-top: var(--spacing-l);
FormField: add an optional quick-action button for 'markdown' and 'textarea'. 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.
2020-05-21 09:25:37 +02:00
Fix broken markdown editor border color ## Issue The border became white recently, which made it look "focused" all the time. Confirmed with Sean that the change wasn't intentional.
2021-02-26 09:22:03 +01:00
.cm-s-easymde {
border-color: var(--color-input-border);
}
Fix color contrast in Markdown Editor (both light & dark). Fixed color issues that were making things hard to read: - selected text color, including inline code. - HTML tags - Horizontal rule not visible in Preview mode. While at it, I changed the color in Edit mode as well as syntax highlighting. - blockquote (was gray over gray) Attempted to fix uneven margins between top and bottom for inline-code and codeblock. Also, removed the extra margin to make it more nice and cosy, instead of far apart.
2020-06-03 05:01:21 +02:00
.cm-s-easymde .CodeMirror-cursor {
border-left: 1px solid var(--color-editor-cursor);
}
.cm-s-easymde .CodeMirror-selected {
background: var(--color-editor-selected);
}
.cm-s-easymde .cm-hr {
color: var(--color-editor-tag);
}
.cm-s-easymde .cm-tag {
color: var(--color-editor-tag);
}
.cm-s-easymde .cm-attribute {
color: var(--color-editor-attr);
}
.cm-s-easymde .cm-string {
color: var(--color-editor-string);
}
.cm-s-easymde .cm-comment {
background: var(--color-editor-inline-code-bg);
padding: 3px 0px; // @todo: should fill up line-spacing instead of harcoded.
}
change hyperlink color: fix #346
2020-05-07 21:06:21 +02:00
.cm-s-easymde .cm-link {
Fix color contrast in Markdown Editor (both light & dark). Fixed color issues that were making things hard to read: - selected text color, including inline code. - HTML tags - Horizontal rule not visible in Preview mode. While at it, I changed the color in Edit mode as well as syntax highlighting. - blockquote (was gray over gray) Attempted to fix uneven margins between top and bottom for inline-code and codeblock. Also, removed the extra margin to make it more nice and cosy, instead of far apart.
2020-06-03 05:01:21 +02:00
color: var(--color-editor-link);
}
.cm-s-easymde .cm-url {
color: var(--color-editor-url);
font-style: italic;
}
.cm-s-easymde .cm-quote {
color: var(--color-editor-quote);
font-style: italic;
change hyperlink color: fix #346
2020-05-07 21:06:21 +02:00
}
FormField: add an optional quick-action button for 'markdown' and 'textarea'. 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.
2020-05-21 09:25:37 +02:00
fix: minor style issues
2019-03-21 16:22:23 +01:00
// Overriding the lbry/components form styling
.editor-toolbar {
button:not(.button) {
padding-right: 0;
padding-left: 0;
border: transparent;
changed the color of the editor-toolbar_hover class (#7642) * changed the color of the editor-toolbar_hover class * Fixed hover, colors and spacing of editor-toolbar_hover class * active editor-toolbar class modified * var --color-editor-button-hover-bg and --color-editor-button-active-bg created * --color-editor-button-hover-bg and --color-editor-button-active-bg color corrected in light
2022-07-21 22:58:12 +02:00
margin-right: var(--spacing-xxs);
fix: minor style issues
2019-03-21 16:22:23 +01:00
&:hover {
changed the color of the editor-toolbar_hover class (#7642) * changed the color of the editor-toolbar_hover class * Fixed hover, colors and spacing of editor-toolbar_hover class * active editor-toolbar class modified * var --color-editor-button-hover-bg and --color-editor-button-active-bg created * --color-editor-button-hover-bg and --color-editor-button-active-bg color corrected in light
2022-07-21 22:58:12 +02:00
color: var(--color-header-link);
background-color: var(--color-editor-button-hover-bg);
fix: minor style issues
2019-03-21 16:22:23 +01:00
}
}
changed the color of the editor-toolbar_hover class (#7642) * changed the color of the editor-toolbar_hover class * Fixed hover, colors and spacing of editor-toolbar_hover class * active editor-toolbar class modified * var --color-editor-button-hover-bg and --color-editor-button-active-bg created * --color-editor-button-hover-bg and --color-editor-button-active-bg color corrected in light
2022-07-21 22:58:12 +02:00
button.active {
background: var(--color-editor-button-active-bg);
}
fix: minor style issues
2019-03-21 16:22:23 +01:00
}
use @lbry/components
2019-02-13 17:27:20 +01:00
}
Reference in a new issue Copy permalink