web/cryptpad
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add a markdown toolbar to help with the markdown syntax

Browse Source
This commit is contained in:
yflory
2017-11-27 12:17:35 +01:00
parent 9795ac32cb
commit b0f553e9ea
11 changed files with 300 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
customize.dist/src/less2/include/markdown.less
View File

@@ -23,5 +23,15 @@
}
}
.markdown_main() {
blockquote {
background: #e5e5e5;
padding: 10px;
border-left: 3px solid #999;
padding-right: 0;
p { margin: 0; }
blockquote { margin: 0; }
}
}
// todo ul, ol

70
customize.dist/src/less2/include/toolbar.less
View File

@@ -23,6 +23,33 @@
display: flex;
}
.toolbar_button {
height: @toolbar_line-height;
box-sizing: border-box;
padding: 3px 10px;
margin: 0;
transition: all 0.15s;
.tools_unselectable();
&.cp-toolbar-hidden {
display: none;
}
.cp-toolbar-drawer-element {
display: none;
}
// Bootstrap 4 colors (btn-secondary)
border: 1px solid transparent;
color: inherit;
font: @toolbar_button-font;
* {
color: inherit;
font: @toolbar_button-font;
}
background: transparent;
&:hover {
background-color: rgba(50,50,50,0.3);
}
}
.cp-toolbar-userlist-drawer {
background-color: @colortheme_default-bg;
font: @colortheme_app-font-size @colortheme_font;
@@ -143,6 +170,20 @@
}
.addToolbarColors (@color, @bg-color, @barWidth: 600px) {
.cp-markdown-toolbar {
height: @toolbar_line-height;
background-color: lighten(@bg-color, 20%);
button {
outline: 0;
color: @color;
.toolbar_button;
font: normal normal normal 14px/1 FontAwesome;
&:hover {
background-color: lighten(@bgcolor, 8%);
}
&.cp-markdown-help { float: right; }
}
}
.cp-toolbar-userlist-drawer {
background-color: @bgcolor;
color: @color;
@@ -282,7 +323,6 @@
.addToolbarColors(@color, @bgcolor);
}
.cp-toolbar {
* {
outline-width: 0;
@@ -328,28 +368,7 @@
}
button {
transition: all 0.15s;
.tools_unselectable();
&.cp-toolbar-hidden {
display: none;
}
.cp-toolbar-drawer-element {
display: none;
}
// Bootstrap 4 colors (btn-secondary)
border: 1px solid transparent;
color: inherit;
font: @toolbar_button-font;
* {
color: inherit;
font: @toolbar_button-font;
}
}
.cp-toolbar-rightside button, .cp-toolbar-leftside button {
background: transparent;
&:hover {
background-color: rgba(50,50,50,0.3);
}
.toolbar_button;
}
.cp-toolbar-limit {
@@ -373,13 +392,12 @@
white-space: normal;
}
button, select {
/*button, select {
height: @toolbar_line-height;
box-sizing: border-box;
padding: 3px 10px;
margin: 0;
}
}*/
.cp-toolbar-rightside-button {
float: right;