diff --git a/customize.dist/src/less2/include/markdown.less b/customize.dist/src/less2/include/markdown.less index 16e6654ed..42e5ea0d8 100644 --- a/customize.dist/src/less2/include/markdown.less +++ b/customize.dist/src/less2/include/markdown.less @@ -289,3 +289,32 @@ } } +//reusable styling for the markdown toggle button across all apps + .markdown-toolbar-button-style() { + padding: 3px 5px; + height: fit-content; + margin: 0; + line-height: 1; + border-radius: @variables_radius; + display: inline-flex; + background-color: @cp_toolbar-bottom-bg; + color: @cp_toolbar-bottom-fg; + + &:hover { + background-color: fade(@cryptpad_text_col, 20%); + border-color: @cryptpad_text_col; + color: @cryptpad_text_col; + } + + &.cp-toolbar-button-active { + background-color: @cp_toolbar-bg; + border-color: @cp_toolbar-fg; + color: @cp_toolbar-fg; + + &:hover { + background-color: fade(@cryptpad_text_col, 20%); + } + } +} + + diff --git a/www/common/common-ui-elements.js b/www/common/common-ui-elements.js index 938746da9..5d5a5d940 100644 --- a/www/common/common-ui-elements.js +++ b/www/common/common-ui-elements.js @@ -1343,7 +1343,7 @@ define([ UIElements.createMarkdownToolbarToggle = function(toolbarElement, editor) { var $button = $('