diff --git a/settings.json.docker b/settings.json.docker index 007f80f5a64..0d089177880 100644 --- a/settings.json.docker +++ b/settings.json.docker @@ -95,6 +95,32 @@ */ "skinName": "${SKIN_NAME:colibris}", + /* + * Skin Variants + * + * Use the UI skin variants builder at /p/test#skinvariantsbuilder + * + * For the colibris skin only, you can choose how to render the three main + * containers: + * - toolbar (top menu with icons) + * - editor (containing the text of the pad) + * - background (area outside of editor, mostly visible when using page style) + * + * For each of the 3 containers you can choose 4 color combinations: + * super-light, light, dark, super-dark. + * + * For example, to make the toolbar dark, you will include "dark-toolbar" into + * skinVariants. + * + * You can provide multiple skin variants separated by spaces. Default + * skinVariant is "super-light-toolbar super-light-editor light-background". + * + * For the editor container, you can also make it full width by adding + * "full-width-editor" variant (by default editor is rendered as a page, with + * a max-width of 900px). + */ + "skinVariants": "super-light-toolbar super-light-editor light-background", + /* * IP and port which Etherpad should bind at. * diff --git a/settings.json.template b/settings.json.template index 0e61c7c67a4..92928289865 100644 --- a/settings.json.template +++ b/settings.json.template @@ -86,6 +86,32 @@ */ "skinName": "colibris", + /* + * Skin Variants + * + * Use the UI skin variants builder at /p/test#skinvariantsbuilder + * + * For the colibris skin only, you can choose how to render the three main + * containers: + * - toolbar (top menu with icons) + * - editor (containing the text of the pad) + * - background (area outside of editor, mostly visible when using page style) + * + * For each of the 3 containers you can choose 4 color combinations: + * super-light, light, dark, super-dark. + * + * For example, to make the toolbar dark, you will include "dark-toolbar" into + * skinVariants. + * + * You can provide multiple skin variants separated by spaces. Default + * skinVariant is "super-light-toolbar super-light-editor light-background". + * + * For the editor container, you can also make it full width by adding + * "full-width-editor" variant (by default editor is rendered as a page, with + * a max-width of 900px). + */ + "skinVariants": "super-light-toolbar super-light-editor light-background", + /* * IP and port which Etherpad should bind at. * diff --git a/src/locales/en.json b/src/locales/en.json index 5a86a661819..4aa5769b976 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -38,27 +38,6 @@ "pad.settings.rtlcheck": "Read content from right to left?", "pad.settings.fontType": "Font type:", "pad.settings.fontType.normal": "Normal", - "pad.settings.fontType.opendyslexic": "Open Dyslexic", - "pad.settings.fontType.monospaced": "Monospace", - "pad.settings.fontType.montserrat": "Montserrat", - "pad.settings.fontType.comicsans": "Comic Sans", - "pad.settings.fontType.couriernew": "Courier New", - "pad.settings.fontType.georgia": "Georgia", - "pad.settings.fontType.impact": "Impact", - "pad.settings.fontType.lucida": "Lucida", - "pad.settings.fontType.lucidasans": "Lucida Sans", - "pad.settings.fontType.palatino": "Palatino", - "pad.settings.fontType.robotomono": "RobotoMono", - "pad.settings.fontType.tahoma": "Tahoma", - "pad.settings.fontType.timesnewroman": "Times New Roman", - "pad.settings.fontType.trebuchet": "Trebuchet", - "pad.settings.fontType.verdana": "Verdana", - "pad.settings.fontType.symbol": "Symbol", - "pad.settings.fontType.webdings": "Webdings", - "pad.settings.fontType.wingdings": "Wingdings", - "pad.settings.fontType.sansserif": "Sans Serif", - "pad.settings.fontType.serif": "Serif", - "pad.settings.globalView": "Global View", "pad.settings.language": "Language:", "pad.importExport.import_export": "Import/Export", diff --git a/src/node/handler/PadMessageHandler.js b/src/node/handler/PadMessageHandler.js index acd9a29c6ad..fb04a4e30fd 100644 --- a/src/node/handler/PadMessageHandler.js +++ b/src/node/handler/PadMessageHandler.js @@ -1065,6 +1065,7 @@ async function handleClientReady(client, message) // mile wide... var clientVars = { "skinName": settings.skinName, + "skinVariants": settings.skinVariants, "accountPrivs": { "maxRevisions": 100 }, diff --git a/src/node/utils/Settings.js b/src/node/utils/Settings.js index 91fe5d7c256..416c9c8b5ec 100644 --- a/src/node/utils/Settings.js +++ b/src/node/utils/Settings.js @@ -62,6 +62,8 @@ exports.faviconTimeslider = "../../" + exports.favicon; */ exports.skinName = null; +exports.skinVariants = "super-light-toolbar super-light-editor light-background"; + /** * The IP ep-lite should listen to */ diff --git a/src/static/css/iframe_editor.css b/src/static/css/iframe_editor.css index 9aa003aaf73..538a476f253 100644 --- a/src/static/css/iframe_editor.css +++ b/src/static/css/iframe_editor.css @@ -1,46 +1,62 @@ -/* These CSS rules are included in both the outer and inner ACE iframe. - Also see inner.css, included only in the inner one. +/* + These CSS rules are included in both the outer and inner ACE iframe (pad editor) */ @import url('./lists_and_indents.css'); -html { cursor: text; } /* in Safari, produces text cursor for whole doc (inc. below body) */ -span { cursor: auto; } +html.inner-editor { + height: auto !important; + background-color: transparent !important; +} +#outerdocbody { + display: flex; + flex-direction: row; + justify-content: center; + min-height: 100vh; /* take at least full height */ +} +#outerdocbody iframe { + flex: 1 auto; + display: flex; +} +#outerdocbody #sidediv { + order: -1; /* display it on the first row positionning, i.e. on the left */ +} -::selection { - background: #acf; +/* ACE-PAD Container (i.e. where the text is displayed) */ +#innerdocbody { + padding: 10px; + overflow: hidden; + background-color: white; } -::-moz-selection { - background: #acf; +#innerdocbody, #sidediv { + padding-top: 10px; /* Both must have same top padding, so line number are aligned with the rows */ + padding-bottom: 10px; /* some space when we scroll to the bottom */ } -a { - cursor: pointer !important; - white-space:pre-wrap; +/* --------------------- */ +/* -- BROWSER SUPPORT -- */ +/* --------------------- */ + +body.mozilla, body.safari { + display: table-cell; /* cause "body" area (e.g. where clicks are heard) to grow horizontally with text */ +} +.safari div { + padding-right: 1px; /* prevents the caret from disappearing on the longest line of the doc */ } +span { line-height: 125%; } + + +/* -------------- */ +/* -- WRAPPING -- */ +/* -------------- */ body { - margin: 0; white-space: nowrap; word-wrap: normal; } - -#outerdocbody { - background-color: #fff; -} -body.grayedout { background-color: #eee !important } - -#innerdocbody { - font-size: 12px; /* overridden by body.style */ - font-family:Arial, sans-serif; /* overridden by body.style */ - line-height: 16px; /* overridden by body.style */ - background-color: white; - color: black; -} - body.doesWrap { + display: block !important; /* white-space: pre-wrap; */ - /* Must be pre-wrap to keep trailing spaces. Otherwise you get a zombie caret, walking around your screen (see #1766). @@ -53,86 +69,41 @@ body.doesWrap { */ word-wrap: break-word; /* fix for issue #1648 - firefox not wrapping long lines (without spaces) correctly */ } - .noprewrap{ white-space: normal; } - -body.doesWrap:not(.noprewrap) > div{ +body.doesWrap:not(.noprewrap) > div { /* Related to #1766 */ white-space: pre-wrap; } -#innerdocbody { - padding-top: 1px; /* important for some reason? */ - padding-right: 10px; - padding-bottom: 8px; - padding-left: 1px /* prevents characters from looking chopped off in FF3 -- Removed because it added too much whitespace */; - overflow: hidden; - /* blank 1x1 gif, so that IE8 doesn't consider the body transparent */ - background-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==); -} + +/* ------------------------------------------ */ +/* -- SIDEDIV (line number, text author..) -- */ +/* ------------------------------------------ */ #sidediv { font-size: 11px; font-family: monospace; - line-height: 16px; /* overridden by sideDiv.style */ - padding-top: 8px; /* EDIT_BODY_PADDING_TOP */ - padding-right: 3px; /* LINE_NUMBER_PADDING_RIGHT - 1 */ - position: absolute; - width: 20px; /* MIN_LINEDIV_WIDTH */ - top: 0; - left: 0; - cursor: default; - color: white; + padding-right: 5px; + padding-left: 12px; + background-color: transparent; + border-right: 1px solid #ccc; } - #sidedivinner { text-align: right; + opacity: .9; } - -.sidedivdelayed { /* class set after sizes are set */ - background-color: #eee; - color: #888 !important; - border-right: 1px solid #ccc; -} -.sidedivhidden { - display: none; -} - -#outerdocbody iframe { - display: block; /* codemirror says it suppresses bugs */ - position: relative; - left: 32px; /* MIN_LINEDIV_WIDTH + LINE_NUMBER_PADDING_RIGHT + EDIT_BODY_PADDING_LEFT */ - top: 7px; /* EDIT_BODY_PADDING_TOP - 1*/ - border: 0; - width: 1px; /* changed programmatically */ - height: 1px; /* changed programmatically */ -} - -#outerdocbody .hotrect { - border: 1px solid #999; - position: absolute; -} - -/* cause "body" area (e.g. where clicks are heard) to grow horizontally with text */ -body.mozilla, body.safari { - display: table-cell; +#sidediv:not(.sidedivdelayed) { /* before sidediv get initialized, hide text */ + color: transparent; } - -body.doesWrap { - display: block !important; +#sidediv.sidedivhidden { + /* Do not use display: none to hide the sidediv, otherwise the parent container does not + get its height properly calculated by flexboxes */ + visibility: hidden; + width: 0; + padding: 0; } - -.safari div { - /* prevents the caret from disappearing on the longest line of the doc */ - padding-right: 1px; -} - -p { - margin: 0; -} - #linemetricsdiv { position: absolute; left: -1000px; @@ -142,11 +113,33 @@ p { font-size: 12px; /* overridden by lineMetricsDiv.style */ font-family: monospace; /* overridden by lineMetricsDiv.style */ } +@media (max-width: 720px) { + #sidediv { + /* Do not use display: none to hide the sidediv, otherwise the parent container does not + get its height properly calculated by flexboxes */ + visibility: hidden; + width: 0; + padding: 0; + } +} -/* Stops super long lines without being spaces such as aaaaaaaaaaaaaa*100 breaking the editor - Commented out because it stops IE from being able to render the document, crazy IE bug is crazy. */ -/* -.ace-line{ - overflow:hidden; + + + +/* ----------- */ +/* -- OTHER -- */ +/* ----------- */ + +::selection { + background: #acf; } -*/ +::-moz-selection { + background: #acf; +} +#innerdocbody a { + cursor: pointer !important; + white-space:pre-wrap; +} +body.grayedout { + background-color: #eee !important +} \ No newline at end of file diff --git a/src/static/css/pad.css b/src/static/css/pad.css index 10dd69eaaec..2e073dfdbbf 100644 --- a/src/static/css/pad.css +++ b/src/static/css/pad.css @@ -1,1353 +1,73 @@ -*, -html, -body, -p { - margin: 0; - padding: 0px; -} +@import url("pad/normalize.css"); + +@import url("pad/layout.css"); +@import url("pad/fonts.css"); +@import url("pad/toolbar.css"); +@import url("pad/popup.css"); +@import url("pad/popup_connectivity.css"); +@import url("pad/popup_import_export.css"); +@import url("pad/popup_users.css"); +@import url("pad/icons.css"); +@import url("pad/chat.css"); +@import url("pad/gritter.css"); +@import url("pad/loadingbox.css"); +@import url("pad/form.css"); -.clear { - clear: both -} html { - font-size: 62.5%; - width: 100%; -} -body, -textarea { - font-family: Helvetica, Arial, sans-serif -} -iframe { - position: absolute + font-size: 14px; + line-height: 20px; + color: #3e3e3e; } -.readonly .acl-write { - display: none; + +html, +#sidedivinner > div:before { + font-family: Cantarell, Roboto, "Open Sans", "Helvetica Neue", Arial, sans-serif; } -#users { - background: #f7f7f7; - background: -webkit-linear-gradient( #F7F7F7,#EEE); - background: -moz-linear-gradient( #F7F7F7,#EEE); - background: -ms-linear-gradient( #F7F7F7,#EEE); - background: -o-linear-gradient( #F7F7F7,#EEE); - background: linear-gradient( #F7F7F7,#EEE); - width: 160px; - color: #fff; - padding: 5px; - border-radius: 0 0 6px 6px; - border: 1px solid #ccc; +.clear { + clear: both } -#otherusers { - max-height: 400px; - overflow: auto; +a { + color: inherit; } a img { border: 0 } -/* menu */ -.toolbar { - background: #f7f7f7; - background: -webkit-linear-gradient(#f7f7f7, #f1f1f1 80%); - background: -moz-linear-gradient(#f7f7f7, #f1f1f1 80%); - background: -o-linear-gradient(#f7f7f7, #f1f1f1 80%); - background: -ms-linear-gradient(#f7f7f7, #f1f1f1 80%); - background: linear-gradient(#f7f7f7, #f1f1f1 80%); - border-bottom: 1px solid #ccc; - overflow: hidden; - padding-top: 4px; - width: 100%; - white-space: nowrap; - height: 32px; -} -.toolbar ul { - position: absolute; - list-style: none; - padding-right: 3px; - padding-left: 1px; - z-index: 2; - overflow: hidden; - float: left -} -.toolbar ul li { - float: left; - margin-left: 2px; - height:32px; -} -.toolbar ul li.separator { - border: inherit; - background: inherit; - visibility: hidden; - width: 0px; - padding: 5px; - height:22px; -} -.toolbar ul li a:hover { - text-decoration: none; -} -.toolbar ul li a:hover { - background: #fff; - background: -webkit-linear-gradient(#f4f4f4, #e4e4e4); - background: -moz-linear-gradient(#f4f4f4, #e4e4e4); - background: -o-linear-gradient(#f4f4f4, #e4e4e4); - background: -ms-linear-gradient(#f4f4f4, #e4e4e4); - background: linear-gradient(#f4f4f4, #e4e4e4); -} -.toolbar ul li a:active { - background: #eee; - background: -webkit-linear-gradient(#ddd, #fff); - background: -moz-linear-gradient(#ddd, #fff); - background: -o-linear-gradient(#ddd, #fff); - background: -ms-linear-gradient(#ddd, #fff); - background: linear-gradient(#ddd, #fff); - -webkit-box-shadow: 0 0 8px rgba(0,0,0,.1) inset; - -moz-box-shadow: 0 0 8px rgba(0,0,0,.1) inset; - box-shadow: 0 0 8px rgba(0,0,0,.1) inset; -} -.toolbar ul li .activeButton { - background: #eee; - background: -webkit-linear-gradient(#ddd, #fff); - background: -moz-linear-gradient(#ddd, #fff); - background: -o-linear-gradient(#ddd, #fff); - background: -ms-linear-gradient(#ddd, #fff); - background: linear-gradient(#ddd, #fff); - -webkit-box-shadow: 0 0 8px rgba(0,0,0,.1) inset; - -moz-box-shadow: 0 0 8px rgba(0,0,0,.1) inset; - box-shadow: 0 0 8px rgba(0,0,0,.1) inset; -} -.toolbar ul li a { - background: #fff; - background: -webkit-linear-gradient(#fff, #f0f0f0); - background: -moz-linear-gradient(#fff, #f0f0f0); - background: -o-linear-gradient(#fff, #f0f0f0); - background: -ms-linear-gradient(#fff, #f0f0f0); - background: linear-gradient(#fff, #f0f0f0); - border: 1px solid #ccc; - border-radius: 3px; - color: #ccc; - cursor: pointer; - display: inline-block; - min-height: 18px; - overflow: hidden; - padding: 4px 5px; - text-align: center; - text-decoration: none; - min-width: 18px; + +.thin-scrollbar::-webkit-scrollbar-track { + background-color: #f6f6f6; + border: 1px solid #f0f0f0; } -.toolbar ul li a .buttonicon { - position: relative; - top: 1px; +.thin-scrollbar::-webkit-scrollbar { + width: 7px; } -.toolbar ul li a .buttontext { - color: #666; - font-size: 14px; - border:none; - background:none; - margin-top:1px; - color:#666; +.thin-scrollbar::-webkit-scrollbar-thumb { + background-color: #C5C5C5; } .buttontext::-moz-focus-inner { padding: 0; border: 0; } - .buttontext:focus{ /* Not sure why important is required here but it is */ border: 1px solid #666 !important; } - -.toolbar ul li a.grouped-left { - border-radius: 3px 0 0 3px; -} -.toolbar ul li a.grouped-middle { - border-radius: 0; - margin-left: -2px; - border-left: 0; -} -.toolbar ul li a.grouped-right { - border-radius: 0 3px 3px 0; - margin-left: -2px; - border-left: 0; -} -.toolbar ul li a.selected { - background: #eee !important; - background: -webkit-linear-gradient(#EEE, #F0F0F0) !important; - background: -moz-linear-gradient(#EEE, #F0F0F0) !important; - background: -o-linear-gradient(#EEE, #F0F0F0) !important; - background: -ms-linear-gradient(#EEE, #F0F0F0) !important; - background: linear-gradient(#EEE, #F0F0F0) !important; -} -.toolbar ul li select { - background: #fff; - padding: 4px; - line-height: 22px; /* fix for safari (win/mac) */ - height: 28px; /* fix for chrome (mac) */ - border-radius: 3px; - border: 1px solid #ccc; - outline: none; -} -.toolbar ul.menu_left { - left:0px; - right:250px; -} - -.toolbar ul.menu_right { - right:0px; -} - -li[data-key=showusers] > a { - min-width: 30px; - text-align: left; -} -li[data-key=showusers] > a #online_count { - color: #777; - font-size: 11px; - position: relative; - top: 2px; - padding-left: 2px; -} -#editbar{ - display:none; -} - -#editorcontainer { - position: absolute; - top: 37px; /* + 1px border */ - left: 0px; - right: 0px; - bottom: 0px; - z-index: 1; - - /* Required to be able to scroll on iOS: */ - -webkit-overflow-scrolling: touch; -} -#editorcontainer iframe { - height: 100%; - width: 100%; - padding: 0; - margin: 0; - left: 0; /* Required for safari fixes RTL */ -} -#editorloadingbox { - padding-top: 100px; - padding-bottom: 100px; - font-size: 2.5em; - color: #aaa; - text-align: center; - position: absolute; - width: 100%; - height: 30px; - z-index: 100; -} - -#editorloadingbox .passForm{ - padding:10px; -} - -#editorloadingbox input{ - padding:10px; -} - -#editorloadingbox button{ - padding:10px; -} - -.loadingAnimation{ - -webkit-animation: loadingAnimation 2s infinite linear; - animation: loadingAnimation 2s infinite linear; - font-family: "fontawesome-etherpad"; - font-size:24px; - z-index:150; - width:25px; - height:25px; -} - -.loadingAnimation:before{ - content: "\e80e"; -} - -@-webkit-keyframes loadingAnimation { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - 100% { - -webkit-transform: rotate(359deg); - transform: rotate(359deg); - } -} -@keyframes loadingAnimation { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - 100% { - -webkit-transform: rotate(359deg); - transform: rotate(359deg); - } -} - -#editorcontainerbox { - position: absolute; - bottom: 0; - top: 0; - width: 100%; -} -#padpage { - position: absolute; - top: 0px; - bottom: 0px; - width: 100%; -} -#padmain { - margin-top: 0px; - position: absolute; - top: 63px !important; - left: 0px; - right: 0px; - bottom: 0px; - zoom: 1; -} -#padeditor { - bottom: 0px; - left: 0; - position: absolute; - right: 0px; - top: 0; - zoom: 1; -} -#myswatchbox { - position: absolute; - left: 5px; - top: 5px; - width: 24px; - height: 24px; - border: 1px solid #000; - background: transparent; - cursor: pointer; -} -#myswatch { - width: 100%; - height: 100%; - background: transparent; /*...initially*/ -} -#mycolorpicker { - width: 232px; - height: 265px; - position: absolute; - left: -250px; - top: 0px; - z-index: 101; - display: none; - border-radius: 0 0 6px 6px; - background: #f7f7f7; - border: 1px solid #ccc; - border-top: 0; - padding-left: 10px; - padding-top: 10px; -} -#mycolorpickersave { - left: 10px; - font-weight: bold; -} -#mycolorpickercancel { - left: 85px -} -#mycolorpickersave, -#mycolorpickercancel { - background: #fff; - background: -webkit-linear-gradient(#fff, #ccc); - background: -moz-linear-gradient(#fff, #ccc); - background: -o-linear-gradient(#fff, #ccc); - background: -ms-linear-gradient(#fff, #ccc); - background: linear-gradient(#fff, #ccc); - border: 1px solid #ccc; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; - font-size: 12px; - cursor: pointer; - color: #000; - overflow: hidden; - padding: 4px; - top: 240px; - text-align: center; - position: absolute; - width: 60px; -} -#mycolorpickerpreview { - position: absolute; - left: 207px; - top: 240px; - width: 16px; - height: 16px; - padding: 4px; - overflow: hidden; - color: #fff; - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - border-radius: 5px; -} -#myusernameform { - margin-left: 30px -} -#myusernameedit { - font-size: 1.3em; - color: #fff; - padding: 3px; - height: 18px; - margin: 0; - border: 0; - width: 122px; - background: transparent; -} -#myusernameform input.editable { - border: 1px solid #444 -} -#myuser .myusernameedithoverable:hover { - background: white; - color: black; -} -#mystatusform { - margin-left: 35px; - margin-top: 5px; -} -#mystatusedit { - font-size: 1.2em; - color: #777; - font-style: italic; - display: none; - padding: 2px; - height: 14px; - margin: 0; - border: 1px solid #bbb; - width: 199px; - background: transparent; -} -#myusernameform .editactive, -#myusernameform .editempty { - background: white; - border-left: 1px solid #c3c3c3; - border-top: 1px solid #c3c3c3; - border-right: 1px solid #e6e6e6; - border-bottom: 1px solid #e6e6e6; - color: #000; -} -#myusernameform .editempty { - color: #333 -} -#myswatchbox, #myusernameedit, #otheruserstable .swatch { - border: 1px solid #ccc !important; - color: #333; -} -table#otheruserstable { - display: none -} -#nootherusers { - padding: 10px; - font-size: 1.2em; - color: #eee; - font-weight: bold; -} -#nootherusers a { - color: #3C88FF -} -#otheruserstable td { - height: 26px; - vertical-align: middle; - padding: 0 2px; - color: #333; -} -#otheruserstable .swatch { - border: 1px solid #000; - width: 13px; - height: 13px; - overflow: hidden; - margin: 0 4px; - -webkit-touch-callout: none; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} -.usertdswatch { - width: 1% -} -.usertdname { - font-size: 1.3em; - color: #444; -} -.usertdstatus { - font-size: 1.1em; - font-style: italic; - color: #999; -} -.usertdactivity { - font-size: 1.1em; - color: #777; -} -.usertdname input { - border: 1px solid #bbb; - width: 80px; - padding: 2px; -} -.usertdname input.editactive, -.usertdname input.editempty { - background: white; - border-left: 1px solid #c3c3c3; - border-top: 1px solid #c3c3c3; - border-right: 1px solid #e6e6e6; - border-bottom: 1px solid #e6e6e6; -} -.usertdname input.editempty { - color: #888; - font-style: italic; -} - -#connectivity { - z-index: 600 !important; -} - -#connectivity * { - display: none; -} - -#connectivity .visible, -#connectivity .visible * { - display: block; -} - -/* styles for the automatic reconnection timer: */ -#connectivity .visible.with_reconnect_timer button, -#connectivity .visible.with_reconnect_timer .reconnecttimer * { - display: inline-block; -} - -#connectivity .with_reconnect_timer .hidden, -#connectivity .with_reconnect_timer #defaulttext.hidden, -#connectivity .with_reconnect_timer button.hidden { - display: none; -} - -#connectivity .with_reconnect_timer #cancelreconnect { - margin-left: 10px; -} -/* end of styles for the automatic reconnection timer */ - -#reconnect_form button { - font-size: 12pt; - padding: 5px; -} - -.toolbar #overlay { - z-index: 500; - display: none; - background-repeat: repeat-both; - width: 100%; - position: absolute; - height: inherit; - left: 0; - top: 0; -} -* html #overlay { - /* for IE 6+ */ - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; - filter: alpha(opacity=100); - opacity: 1; /* in case this is looked at */ - background-image: none; - background-repeat: no-repeat; /* scale the image */ -} - -#chatbox { - position: absolute; - bottom: 0px; - right: 20px; - width: 180px; - height: 200px; - z-index: 400; - background-color: #f7f7f7; - border-left: 1px solid #999; - border-right: 1px solid #999; - border-top: 1px solid #999; - padding: 3px; - padding-bottom: 10px; - border-top-left-radius: 5px; - border-top-right-radius: 5px; - display: none; -} -#chattext { - background-color: white; - border: 1px solid white; - -ms-overflow-y: scroll; - overflow-y: scroll; - font-size: 12px; - position: absolute; - right: 0px; - left: 0px; - top: 25px; - bottom: 25px; - z-index: 1002; -} -#chattext p { - padding: 3px; - -ms-overflow-x: hidden; - overflow-x: hidden; -} -.chatloadmessages -{ - margin-bottom: 5px; - margin-top: 5px; - margin-left: auto; - margin-right: auto; - display: block; -} -#chatloadmessagesbutton -{ - line-height: 1.8em; -} -#chatloadmessagesball -{ - display: none; -} -#chatinputbox { - padding: 3px 2px; - position: absolute; - bottom: 0px; - right: 0px; - left: 3px; -} -#chatlabel { - font-size: 13px; - font-weight: bold; - color: #555; - text-decoration: none; - margin-right: 3px; - vertical-align: middle; -} -#chatinput { - border: 1px solid #BBBBBB; - width: 100%; - float: right; -} -#chaticon { - z-index: 400; - position: fixed; - bottom: 0px; - right: 20px; - padding: 5px; - border-left: 1px solid #999; - border-right: 1px solid #999; - border-top: 1px solid #999; - border-top-left-radius: 5px; - border-top-right-radius: 5px; - background-color: #fff; - cursor: pointer; - display: none; -} -#chaticon a { - text-decoration: none -} -#chatcounter { - color: #777; - font-size: 10px; - vertical-align: middle; -} -#titlebar { - line-height: 16px; - font-weight: bold; - color: #555; - position: relative; - bottom: 2px; -} -#titlelabel { - font-size: 13px; - margin: 4px 0 0 4px; - position: absolute; -} -#titlesticky{ - font-size: 10px; - padding-top:2px; - float: right; - text-align: right; - text-decoration: none; - cursor: pointer; - color: #555; -} -#titlecross { - font-size: 25px; - float: right; - text-align: right; - text-decoration: none; - cursor: pointer; - color: #555; -} -.time { - float: right; - color: #333; - font-style: italic; - font-size: 10px; - margin-left: 3px; - margin-right: 3px; - margin-top: 2px; -} -#exportColumn{ - margin-top:20px; -} -.exporttype { - margin-top: 4px; - background-repeat: no-repeat; - padding-left: 25px; - color: #333; - text-decoration: none; - padding-bottom:2px; - display:inline; - padding-left:5px; - font-family: "Arial"; -} -.exportlink{ - font-family: "fontawesome-etherpad"; - display:block; - margin:5px; - color:#666; -} -#exporthtmla:before { - content: "\e826"; -} -#exportplaina:before { - content: "\e802"; -} -#exportworda:before { - content: "\e804"; -} -#exportpdfa:before { - content: "\e803"; -} -#exportetherpada:before { - content: "\e806"; -} -#exportopena:before { - content: "\e805"; -} - -/* hidden element */ -#importstatusball, -#importmessagesuccess, -#importmessageabiword { - display: none; -} - -.throbbold{ - font-weight:bold; -} - -#importmessageabiword { - color: #900; - font-size: small; -} - -#importsubmitinput { - margin-top: 12px; - padding:2px 4px 2px 4px; -} -#chatthrob { - display: none; - position: absolute; - bottom: 40px; - font-size: 14px; - width: 150px; - height: 40px; - right: 20px; - z-index: 200; - background-color: #000; - color: white; - background-color: rgb(0,0,0); - background-color: rgba(0,0,0,0.7); - padding: 10px; - -webkit-border-radius: 6px; - -moz-border-radius: 6px; - border-radius: 6px; - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; - filter: alpha(opacity=80); - opacity: .8; -} -.buttonicon { - width: 16px; - height: 16px; - display: inline-block; - vertical-align: middle; - border: none; - padding: 0; - background: none; - font-family: "fontawesome-etherpad"; - font-size: 15px; - font-style: normal; - font-weight: normal; - color: #666; - cursor: pointer; -} - -.buttonicon::-moz-focus-inner { - padding: 0; - border: 0 -} - -.buttonicon:before { - font-family: "fontawesome-etherpad"; -} - -.buttonicon:focus{ - border: 1px solid #666; -} -.buttonicon-bold:before { - content: "\e81c"; -} -.buttonicon-italic:before { - content: "\e81d"; -} -.buttonicon-underline:before { - content: "\e817"; -} -.buttonicon-strikethrough:before { - content: "\e818"; -} -.buttonicon-insertorderedlist:before { - content: "\e816"; -} -.buttonicon-insertunorderedlist:before { - content: "\e815"; -} -.buttonicon-indent:before { - content: "\e814"; -} -.buttonicon-outdent:before { - content: "\e813"; -} -.buttonicon-undo:before { - content: "\e823"; -} -.buttonicon-redo:before { - content: "\e824"; -} -.buttonicon-clearauthorship:before { - content: "\e80d"; -} -.buttonicon-settings:before { - content: "\e833"; -} -.buttonicon-import_export:before { - content: "\e834"; -} -.buttonicon-embed:before { - content: "\e827"; -} -.buttonicon-history:before { - content: "\e837"; -} -.buttonicon-chat:before { - content: "\e829"; -} -.buttonicon-showusers:before { - content: "\e808"; -} -.buttonicon-savedRevision:before { - content: "\e835"; -} -#focusprotector { - z-index: 100; - position: absolute; - bottom: 0px; - top: 0px; - left: 0px; - right: 0px; - background-color: white; - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=1)"; - filter: alpha(opacity=1); - opacity: 0.01; - display: none; -} .rtl { direction: RTL } -#chattext p { - word-wrap: break-word -} + /* fix for misaligned checkboxes */ input[type=checkbox] { vertical-align: -1px } +input { + color: inherit; +} .right { float: right } -.popup { - font-size: 12px; - width: 80%; - max-width: 500px; - padding: 10px; - border-radius: 0 0 6px 6px; - border: 1px solid #ccc; - border-top: none; - background: #f7f7f7; - background: -webkit-linear-gradient(#F7F7F7, #EEE); - background: -moz-linear-gradient(#F7F7F7, #EEE); - background: -ms-linear-gradient(#F7F7F7, #EEE); - background: -o-linear-gradient(#F7F7F7, #EEE); - background: linear-gradient(#F7F7F7, #EEE); - -webkit-box-shadow: 0 0 8px #888; - -moz-box-shadow: 0 0 8px #888; - box-shadow: 0 2px 4px #ddd; - color: #222; -} -.popup input[type=text] { - width: 100%; - padding: 5px; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - -ms-box-sizing: border-box; - box-sizing: border-box; - display: block; - margin-top: 10px; -} -.popup input[type=text], #users input[type=text] { - outline: none; -} -.popup button { - padding: 5px; - font-size: 14px; -} -.popup a { - text-decoration: none -} -.popup h1 { - color: #555; - font-size: 18px -} -.popup h2 { - color: #777; - font-size: 15px -} -.popup p { - margin: 5px 0 -} -.popup select { - background: #fff; - padding: 2px; - height: 24px; - border-radius: 3px; - border: 1px solid #ccc; - outline: none; - width: 120px; -} -.row { - float: left; - width: 100%; -} -.row + .row { - margin-top: 15px; -} -.column { - float: left; - width:50%; -} -#settings, -#import_export, -#embed, -#connectivity, -#users { - position: absolute; - top: 38px; - right: 20px; - display: none; - z-index: 500; -} -.stickyChat { - background-color: #f1f1f1 !important; - right: 0px !important; - top: 37px; - -webkit-border-radius: 0px !important; - -moz-border-radius: 0px !important; - border-radius: 0px !important; - height: auto !important; - border: none !important; - border-left: 1px solid #ccc !important; - width: 185px !important; -} -.chatAndUsers{ - display:block !important; - right:0px !important; - border-radius:0px !important; - width:182px !important; -/* Below makes UI look weird when X makes editbar flow onto two lines */ -/* margin:2px 0 0 0 !important;*/ - border: none !important; - border-bottom: 1px solid #ccc !important; - height:155px !important; - border-left: 1px solid #ccc !important; -} -.chatAndUsers > #otherusers{ - max-height: 100px; - overflow-y: auto; -} -.chatAndUsersChat > div > #titlecross{ - display:none; -} -.chatAndUsersChat{ - bottom:0px !important; - padding:0 !important; - margin: 165px 0px 0px 0px; - right:0 !important; - width:182px !important; - border: none !important; - padding:5px !important; - border-left: 1px solid #ccc !important; -} - -@media screen and (max-width: 600px) { - .toolbar ul li.separator { - display: none; - } - .toolbar ul li a { - padding: 4px 1px - } - .toolbar ul.menu_left { - left:0px; - right:150px; - } -} -@media all and (max-width: 400px){ - #gritter-notice-wrapper{ - max-height:172px; - overflow:hidden; - width:100% !important; - background-color: #ccc; - bottom:20px; - left:0px; - right:0px; - color:#000; - } - .gritter-close { - display:block !important; - left: auto !important; - right:5px; - } - #gritter-notice-wrapper.bottom-right{ - left:0px !important; - bottom:30px !important; - right:0px !important; - } - .gritter-item p{ - color:black; - font-size:16px; - } - .gritter-title{ - text-shadow: none !important; - color:black; - } - .gritter-item{ - padding:2px 11px 8px 4px; - } - .gritter-item-wrapper{ - margin:0; - } - .gritter-item-wrapper > div{ - background: none; - } - #editorcontainer { - top: 68px; - } - #editbar { - height: 62px; - } - .toolbar ul.menu_left { - left:0px; - right:100px; - } - - .popup { - width:100%; - max-width:300px; - top: 72px !important; - } -} - -/* Mobile devices */ -@media only screen and (max-width: 720px) { - #users { - top: auto; - right:0px !important; - bottom: 33px; - border-radius: 0px !important; - height: 55px !important; - overflow: auto; - } - #mycolorpicker { - left: 0px; - top:37px !important; - position:fixed; - /* #mycolorpicker: width -#users: width */; - } - #editorcontainer { - margin-bottom: 33px - } - /* cancel non-mobile border (will be defined on ".toolbar ul.menu_left" bellow) */ - .toolbar { - border-bottom: 0; - } - .toolbar ul { - background: #f7f7f7; - background: -webkit-linear-gradient(#f7f7f7, #f1f1f1 80%); - background: -moz-linear-gradient(#f7f7f7, #f1f1f1 80%); - background: -o-linear-gradient(#f7f7f7, #f1f1f1 80%); - background: -ms-linear-gradient(#f7f7f7, #f1f1f1 80%); - background: linear-gradient(#f7f7f7, #f1f1f1 80%); - width: 100%; - overflow: hidden; - } - .toolbar ul.menu_left { - right:0px; - position: relative; - display: flex; - top: 0; - overflow-x: auto; - padding: 4px 0 0 0; - border-bottom: 1px solid #ccc; - z-index: 10; - } - .toolbar ul.menu_right { - right:0px !important; - height: 32px; - position: fixed; - bottom: 0; - border-top: 1px solid #ccc; - } - .toolbar ul.menu_right > li:last-child { - float: right; - } - .toolbar ul.menu_right > li a { - border-radius: 0; - border: none; - background: none; - margin: 0; - padding: 8px; - } - .toolbar ul li a.selected { - background: none !important - } - li[data-key="showusers"] > a { - - margin-top:-10px; - padding-top:2px !important; - line-height:20px; - vertical-align:top !important; - } - #chaticon { - position:fixed; - right:48px; - } - .popup { - -webkit-border-radius: 0; - -moz-border-radius: 0; - border-radius: 0; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - -ms-box-sizing: border-box; - box-sizing: border-box; - width: 100%; - } - #settings, - #import_export, - #connectivity, - #embed { - top:auto; - left: 0; - bottom: 33px; - right: 0; - } - .toolbar ul li .separator { - display: none - } - #online_count { - line-height: 24px - } - #chatbox{ - position:fixed; - bottom:33px !important; - margin: 65px 0 0 0; - } - #gritter-notice-wrapper{ - bottom:43px !important; - right:10px !important; - } -} - -#passwordRequired{ - display:none; -} - -#permissionDenied{ - display:none; -} - -#wrongPassword{ - display:none; -} - -#noCookie{ - display:none; -} - -/* gritter stuff */ -#gritter-notice-wrapper { - position:fixed; - top:20px; - right:20px; - width:301px; - z-index:9999; - background-color:#666; -} -#gritter-notice-wrapper.bottom-right { - top: auto; - left: auto; - bottom: 20px; - right: 20px; -} -.gritter-item-wrapper { - position:relative; - margin:0 0 10px 0; -} -.gritter-top { - height:10px; -} -.hover .gritter-top { - background-position:right -30px; -} -.gritter-bottom { - height:8px; - margin:0; -} -.hover .gritter-bottom { - background-position: bottom right; -} -.gritter-item { - display:block; - color:#eee; - padding:2px 11px 8px 11px; - font-size: 11px; - font-family:verdana; -} -.hover .gritter-item { - background-position:right -40px; -} -.gritter-item p { - padding:0; - margin:0; -} -.gritter-close { - display:none; - position:absolute; - top:5px; - left:3px; - cursor:pointer; - width:30px; - height:30px; -} -.gritter-title { - font-size:14px; - font-weight:bold; - padding:0 0 7px 0; - display:block; - text-shadow:1px 1px 0 #000; /* Not supported by IE :( */ -} -.gritter-image { - width:48px; - height:48px; - float:left; -} -.gritter-with-image, -.gritter-without-image { - padding:0 0 5px 0; -} -.gritter-with-image { - width:220px; - float:right; -} -/* for the light (white) version of the gritter notice */ -.gritter-light .gritter-item, -.gritter-light .gritter-bottom, -.gritter-light .gritter-top, -.gritter-close { - color: #222; -} -.gritter-light .gritter-title { - text-shadow: none; -} -/* End of gritter stuff */ - -/* Montserrat Font */ -@font-face { - font-family: "Montserrat"; - src: url("../../static/font/Montserrat-Light.otf") format("opentype"); - font-weight: normal; - font-style: normal; -} -@font-face { - font-family: "Montserrat"; - src: url("../../static/font/Montserrat-Regular.otf") format("opentype"); - font-weight: bold; - font-style: normal; -} -/* End of Monterrat Font */ - -@font-face { - font-family: opendyslexic; - src: url("../../static/font/opendyslexic.otf") format("opentype"); -} - -/* Roboto Mono */ -@font-face { - font-family: "RobotoMono"; - src: url("../../static/font/RobotoMono-Regular.ttf") format("truetype"); - font-weight: normal; - font-style: normal; -} -@font-face { - font-family: "RobotoMono"; - src: url("../../static/font/RobotoMono-Bold.ttf") format("truetype"); - font-weight: bold; - font-style: normal; -} -/* End of Roboto Mono */ - -@font-face { - font-family: "fontawesome-etherpad"; - src:url("../../static/font/fontawesome-etherpad.eot"); - src:url("../../static/font/fontawesome-etherpad.eot?#iefix") format("embedded-opentype"), - url("../../static/font/fontawesome-etherpad.woff") format("woff"), - url("../../static/font/fontawesome-etherpad.ttf") format("truetype"), - url("../../static/font/fontawesome-etherpad.svg#fontawesome-etherpad") format("svg"); - font-weight: normal; - font-style: normal; - -} - -[data-icon]:before, -[class^="icon-"]:before, -[class*=" icon-"]:before { - font-family: "fontawesome-etherpad" !important; - font-style: normal !important; - font-weight: normal !important; - font-variant: normal !important; - text-transform: none !important; - speak: none; - line-height: 1; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -.hideControlsEditor{ - top:0px !important; -} -.hideControlsEditbar{ - display:none !important; -} +@media (max-width: 800px) { + .hide-for-mobile { display: none; } +} \ No newline at end of file diff --git a/src/static/css/pad/chat.css b/src/static/css/pad/chat.css new file mode 100644 index 00000000000..8d1aa1f92db --- /dev/null +++ b/src/static/css/pad/chat.css @@ -0,0 +1,164 @@ +#chaticon, #chatbox { + visibility: hidden; + z-index: 400; + position: absolute; + bottom: 0px; + right: 25px; +} +#chaticon.visible, #chatbox.visible { + visibility: visible; +} +#chaticon { + border-top-left-radius: 5px; + border-top-right-radius: 5px; + border: 1px solid #ccc; + border-bottom: none; +} +.chat-content { + width: 400px; + height: 300px; + border-top-left-radius: 5px; + border-top-right-radius: 5px; + display: flex; + border: 1px solid #ccc; + border-bottom: none; + z-index: 401; + background-color: #f7f7f7; + flex-direction: column; + transition: all 0.3s cubic-bezier(0.74, -0.05, 0.27, 1.75); + opacity: .3; + transform: scale(.5); + transform-origin: 100% 100% +} +#chatbox.visible .chat-content{ + opacity: 1; + transform: scale(1); +} + +#chatbox.stickyChat { + position: relative; + width: auto; + flex: 1 auto; /* take reminaning vertical space */ + height: auto; + right: 0; + display: flex; +} +#chatbox.stickyChat .chat-content { + background-color: #f1f1f1; + border-radius: 0; + border: none; + border-left: 1px solid #ccc; + height: 100%; + width: 100%; +} +#chatbox.stickyChat .chat-content .stick-to-screen-btn { + display: none; +} +#chatbox.stickyChat.chatAndUsersChat .chat-content .hide-reduce-btn { + display:none; +} + +/* -- TITLE BAR -- */ +#titlebar { + font-weight: bold; + padding: 5px; +} +#titlebar #titlelabel { + margin: 4px 0 0 4px; + display: inline; + font-size: 1.4rem; +} +#titlebar .stick-to-screen-btn, +#titlebar .hide-reduce-btn { + font-size: 25px; + color: inherit; + float: right; + text-align: right; + text-decoration: none; + cursor: pointer; +} +#titlebar .stick-to-screen-btn { + font-size: 10px; + padding-top: 2px; +} + +/* -- MESSAGES -- */ +#chattext { + background-color: white; + overflow-y: auto; + flex: 1 auto; + height: 0; /* strange bug on firefox, if height is not set, the chattext grow bigger than the maximum height */ +} +#chattext p { + padding: 3px; + overflow-x: hidden; + word-wrap: break-word; +} +#chattext .time { + float: right; + font-style: italic; + font-size: .85rem; + opacity: .8; + margin-left: 3px; + margin-right: 2px; +} + +/* -- INPUT BOX -- */ +#chatinputbox { + padding: 5px; +} +#chatinputbox #chatinput { + width: 100%; +} + + +/* -- CHAT ICON -- */ +#chaticon { + background-color: #fff; + cursor: pointer; + display: none; + padding: 5px; +} +#chaticon a { + text-decoration: none +} +#chaticon #chatlabel { + font-weight: bold; + text-decoration: none; + margin-right: 3px; + vertical-align: middle; +} +#chaticon #chatcounter { + font-size: .8rem; + vertical-align: middle; + margin-left: 5px; +} + +/* -- LOAD MESSAGES -- */ +.chatloadmessages +{ + margin-bottom: 5px; + margin-top: 5px; + margin-left: auto; + margin-right: auto; + display: block; +} +#chatloadmessagesbutton +{ + line-height: 1.8em; +} +#chatloadmessagesball +{ + display: none; +} + +@media only screen and (max-width: 720px) { + #chatbox { + right: 0; + bottom: 0; + left: 0; + } + #chatbox .chat-content { + width: 100%; + } +} diff --git a/src/static/css/pad/fonts.css b/src/static/css/pad/fonts.css new file mode 100644 index 00000000000..60b083ff6b4 --- /dev/null +++ b/src/static/css/pad/fonts.css @@ -0,0 +1,61 @@ +/* Montserrat Font */ +@font-face { + font-family: "Montserrat"; + src: url("../../../static/font/Montserrat-Light.otf") format("opentype"); + font-weight: normal; + font-style: normal; +} +@font-face { + font-family: "Montserrat"; + src: url("../../../static/font/Montserrat-Regular.otf") format("opentype"); + font-weight: bold; + font-style: normal; +} +/* End of Monterrat Font */ + +@font-face { + font-family: opendyslexic; + src: url("../../../static/font/opendyslexic.otf") format("opentype"); +} +@font-face { + font-family: "RobotoMono"; + src: url("../../../static/font/RobotoMono-Regular.ttf") format("truetype"); + font-weight: normal; + font-style: normal; +} +@font-face { + font-family: "RobotoMono"; + src: url("../../../static/font/RobotoMono-Bold.ttf") format("truetype"); + font-weight: bold; + font-style: normal; +} +@font-face { + font-family: "Quicksand"; + src: url("../../../static/font/Quicksand-Regular.ttf") format("truetype"); + font-weight: 300; + font-style: normal; +} +@font-face { + font-family: "Quicksand"; + src: url("../../../static/font/Quicksand-Medium.ttf") format("truetype"); + font-weight: normal; + font-style: normal; +} +@font-face { + font-family: "Quicksand"; + src: url("../../../static/font/Quicksand-Bold.ttf") format("truetype"); + font-weight: bold; + font-style: normal; +} +@font-face { + font-family: "Roboto"; + src: url("../../../static/font/Roboto-Regular.ttf") format("truetype"); + font-weight: normal; + font-style: normal; +} +@font-face { + font-family: "Roboto"; + src: url("../../../static/font/Roboto-Bold.ttf") format("truetype"); + font-weight: bold; + font-style: normal; +} \ No newline at end of file diff --git a/src/static/css/pad/form.css b/src/static/css/pad/form.css new file mode 100644 index 00000000000..5b42290a580 --- /dev/null +++ b/src/static/css/pad/form.css @@ -0,0 +1,174 @@ +select, .nice-select { + -webkit-tap-highlight-color: transparent; + background-color: #fff; + border-radius: 3px; + border: 1px solid #ccc; + box-sizing: border-box; + clear: both; + cursor: pointer; + display: inline-block; + font-family: inherit; + font-weight: normal; + height: 28px; + line-height: 28px; + outline: none; + padding-left: 8px; + padding-right: 24px; + position: relative; + text-align: left !important; + -webkit-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + white-space: nowrap; + width: 120px; + text-transform: capitalize; +} +.popup .nice-select { + padding: 4px 24px 4px 8px; +} +.nice-select:hover { + border-color: #dbdbdb; +} +.nice-select:active,.nice-select.open,.nice-select:focus { + /*border-color: #999;*/ +} +.nice-select:after { + border-bottom: 2px solid #999; + border-right: 2px solid #999; + content: ''; + display: block; + height: 5px; + margin-top: -3px; + pointer-events: none; + position: absolute; + right: 10px; + top: 50%; + -webkit-transform-origin: 66% 66%; + -ms-transform-origin: 66% 66%; + transform-origin: 66% 66%; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + -webkit-transition: all 0.15s ease-in-out; + transition: all 0.15s ease-in-out; + width: 5px; +} +.nice-select.open:after { + -webkit-transform: rotate(-135deg); + -ms-transform: rotate(-135deg); + transform: rotate(-135deg); +} +.nice-select.open .list { + opacity: 1; + pointer-events: auto; + -webkit-transform: scale(1) translateY(0); + -ms-transform: scale(1) translateY(0); + transform: scale(1) translateY(0); +} +.nice-select.disabled { + border-color: #ededed; + color: #999; + pointer-events: none; +} +.nice-select.disabled:after { + border-color: #cccccc; +} +.nice-select.wide { + width: 100%; +} +.nice-select.wide .list { + left: 0 !important; + right: 0 !important; +} +.nice-select.right { + float: right; +} +.nice-select.right .list { + left: auto; + right: 0; +} +.nice-select.small { + font-size: 12px; + height: 36px; + line-height: 34px; +} +.nice-select.small:after { + height: 4px; + width: 4px; +} +.nice-select.small .option { + line-height: 34px; + min-height: 34px; +} +.nice-select .list { + display: block; + background-color: #fff; + border-radius: 3px; + box-shadow: 0 0 0 1px rgba(68, 68, 68, 0.11); + box-sizing: border-box; + margin-top: 4px; + opacity: 0; + overflow: auto; + padding: 0; + pointer-events: none; + position: absolute; + top: 100%; + left: 0; + max-height: 10px; + -webkit-transform-origin: 50% 0; + -ms-transform-origin: 50% 0; + transform-origin: 50% 0; + -webkit-transform: scale(0.75) translateY(-21px); + -ms-transform: scale(0.75) translateY(-21px); + transform: scale(0.75) translateY(-21px); + -webkit-transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out; + transition: all 0.2s cubic-bezier(0.5, 0, 0.08, 1.10), opacity 0.15s ease-out; + z-index: 9; +} +.nice-select.reverse .list { + bottom: calc(100% + 5px); + top: auto; +} +.toolbar .nice-select .list { + position: fixed; + top: auto; + left: auto; +} +.nice-select .list:hover .option:not(:hover) { + background-color: transparent !important; +} +.nice-select .option { + cursor: pointer; + font-weight: 400; + line-height: 35px; + list-style: none; + min-height: 35px; + outline: none; + margin: 0; + padding-left: 8px; + padding-right: 8px; + text-align: left; + -webkit-transition: all 0.2s; + transition: all 0.2s; + text-transform: capitalize; +} +.nice-select .option:hover,.nice-select .option.focus,.nice-select .option.selected.focus { + background-color: #f6f6f6; +} +.nice-select .option.selected { + font-weight: bold; +} +.nice-select .option.disabled { + background-color: transparent; + color: #999; + cursor: default; +} + .no-csspointerevents.nice-select .list { + display: none; +} + .no-csspointerevents.nice-select.open .list { + display: block; +} diff --git a/src/static/css/pad/gritter.css b/src/static/css/pad/gritter.css new file mode 100644 index 00000000000..20d70be46b5 --- /dev/null +++ b/src/static/css/pad/gritter.css @@ -0,0 +1,49 @@ +#gritter-container { + position: absolute; + right: 50%; + transform: translateX(50%); + text-align: center; + z-index: 9999; +} +#gritter-container.top { + top: 20px; +} +#gritter-container.bottom { + bottom: 20px; +} + +.gritter-item.popup { + position: relative; + max-width: 450px; + visibility: visible; + right: auto !important; + left: auto !important; + top: auto; + bottom: auto; +} + +.gritter-item .popup-content { + display: flex; +} + +.gritter-item .gritter-content { + flex: 1 auto; + text-align: center; +} + +.gritter-item .gritter-close { + align-self: center; +} + +.gritter-item.error .popup-content { + color: #a84341; + background-color: #eed3d4; +} + +@media (max-width: 720px) { + #gritter-container { + left: 1rem; + right: 1rem; + transform: none; + } +} \ No newline at end of file diff --git a/src/static/css/pad/icons.css b/src/static/css/pad/icons.css new file mode 100644 index 00000000000..ab0f45b322e --- /dev/null +++ b/src/static/css/pad/icons.css @@ -0,0 +1,192 @@ +@font-face { + font-family: "fontawesome-etherpad"; + src:url("../../../static/font/fontawesome-etherpad.eot?2"); + src:url("../../../static/font/fontawesome-etherpad.eot?2#iefix") format("embedded-opentype"), + url("../../../static/font/fontawesome-etherpad.woff?2") format("woff"), + url("../../../static/font/fontawesome-etherpad.ttf?2") format("truetype"), + url("../../../static/font/fontawesome-etherpad.svg#fontawesome-etherpad") format("svg"); + font-weight: normal; + font-style: normal; + +} + +.buttonicon { + border: none; + padding: 0; + background: none; + text-align: center; + font-style: normal; + font-weight: normal; + position: relative; + cursor: pointer; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-style: normal; + font-variant: normal; + text-rendering: auto; +} + +.buttonicon:before, [class^="buttonicon-"]:before, [class*=" buttonicon-"]:before { + font-family: "fontawesome-etherpad"; + font-style: normal; + font-weight: normal; + speak: none; + font-size: 15px; + display: inline-block; + text-decoration: inherit; + width: 1em; + margin: 0; + text-align: center; + + /* For safety - reset parent styles, that can break glyph codes*/ + font-variant: normal; + text-transform: none; + + /* Font smoothing. That was taken from TWBS */ + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.buttonicon-insertorderedlist:before { + content: "\e844"; +} +.buttonicon-insertunorderedlist:before { + content: "\e82a"; +} +.buttonicon-clearauthorship:before { + content: "\e843"; + left: -9px; + position: absolute; + top: -9px; +} +.buttonicon-settings:before { + content: "\e851"; +} +.buttonicon-import_export:before { + content: "\e837"; +} +.buttonicon-embed:before { + content: "\e853"; +} +.buttonicon-history:before { + content: "\e837"; +} +.buttonicon-chat:before { + content: "\e82d"; +} +.buttonicon-showusers:before { + content: "\e835"; +} +.buttonicon-savedRevision:before { + content: "\e856"; +} +.buttonicon-undo:before { content: '\e84b'; } /* '' */ +.buttonicon-redo:before { content: '\e84c'; } /* '' */ + +.ep_font_size > a > .buttonicon:before { content: '\e852' !important; } +.ep_font_color .buttonicon:before { content: '\e84e' !important; border-bottom: solid 2px #e42a2a; } + +.buttonicon-underline:before { + top: -8px; + left: -8px; + position: absolute; +} + +/* COPY CSS GENERATED BY FONTELLO HERE */ +.buttonicon-sync-alt:before { content: '\e800'; } /* '' */ +.buttonicon-print:before { content: '\e801'; } /* '' */ +.buttonicon-stop:before { content: '\e802'; } /* '' */ +.buttonicon-play:before { content: '\e803'; } /* '' */ +.buttonicon-align-center:before { content: '\e804'; } /* '' */ +.buttonicon-align-justify:before { content: '\e805'; } /* '' */ +.buttonicon-align-left:before { content: '\e806'; } /* '' */ +.buttonicon-align-right:before { content: '\e807'; } /* '' */ +.buttonicon-pencil-alt:before { content: '\e808'; } /* '' */ +.buttonicon-file-code:before { content: '\e809'; } /* '' */ +.buttonicon-mail:before { content: '\e80a'; } /* '' */ +.buttonicon-trash:before { content: '\e80e'; } /* '' */ +.buttonicon-times:before { content: '\e826'; } /* '' */ +.buttonicon-pause:before { content: '\e829'; } /* '' */ +.buttonicon-list-ul:before { content: '\e82a'; } /* '' */ +.buttonicon-step-backward:before { content: '\e82b'; } /* '' */ +.buttonicon-step-forward:before { content: '\e82c'; } /* '' */ +.buttonicon-comments:before { content: '\e82d'; } /* '' */ +.buttonicon-heading:before { content: '\e82e'; } /* '' */ +.buttonicon-brush:before { content: '\e830'; } /* '' */ +.buttonicon-slideshare:before { content: '\e831'; } /* '' */ +.buttonicon-tasks:before { content: '\e832'; } /* '' */ +.buttonicon-superscript:before { content: '\e833'; } /* '' */ +.buttonicon-subscript:before { content: '\e834'; } /* '' */ +.buttonicon-users:before { content: '\e835'; } /* '' */ +.buttonicon-gauge:before { content: '\e836'; } /* '' */ +.buttonicon-exchange-alt:before { content: '\e837'; } /* '' */ +.buttonicon-text-width:before { content: '\e838'; } /* '' */ +.buttonicon-pencil:before { content: '\e839'; } /* '' */ +.buttonicon-picture:before { content: '\e83a'; } /* '' */ +.buttonicon-video:before { content: '\e83b'; } /* '' */ +.buttonicon-video-slash:before { content: '\e83c'; } /* '' */ +.buttonicon-microphone-alt:before { content: '\e83d'; } /* '' */ +.buttonicon-microphone-alt-slash:before { content: '\e83e'; } /* '' */ +.buttonicon-compress:before { content: '\e83f'; } /* '' */ +.buttonicon-expand:before { content: '\e840'; } /* '' */ +.buttonicon-spin5:before { content: '\e841'; } /* '' */ +.buttonicon-eye-slash:before { content: '\e843'; } /* '' */ +.buttonicon-list-ol:before { content: '\e844'; } /* '' */ +.buttonicon-bold:before { content: '\e845'; } /* '' */ +.buttonicon-underline:before { content: '\e846'; } /* '' */ +.buttonicon-italic:before { content: '\e847'; } /* '' */ +.buttonicon-strikethrough:before { content: '\e848'; } /* '' */ +.buttonicon-indent:before { content: '\e849'; } /* '' */ +.buttonicon-outdent:before { content: '\e84a'; } /* '' */ +.buttonicon-undo-alt:before { content: '\e84b'; } /* '' */ +.buttonicon-redo-alt:before { content: '\e84c'; } /* '' */ +.buttonicon-link:before { content: '\e84d'; } /* '' */ +.buttonicon-font:before { content: '\e84e'; } /* '' */ +.buttonicon-comment-medical:before { content: '\e84f'; } /* '' */ +.buttonicon-comment:before { content: '\e850'; } /* '' */ +.buttonicon-cog:before { content: '\e851'; } /* '' */ +.buttonicon-text-height:before { content: '\e852'; } /* '' */ +.buttonicon-share-alt:before { content: '\e853'; } /* '' */ +.buttonicon-code:before { content: '\e854'; } /* '' */ +.buttonicon-history:before { content: '\e855'; } /* '' */ +.buttonicon-star:before { content: '\e856'; } /* '' */ +.buttonicon-file-import:before { content: '\e857'; } /* '' */ +.buttonicon-file-download:before { content: '\e858'; } /* '' */ +.buttonicon-file-pdf:before { content: '\e859'; } /* '' */ +.buttonicon-file-word:before { content: '\e85a'; } /* '' */ +.buttonicon-file-alt:before { content: '\e85b'; } /* '' */ +.buttonicon-file:before { content: '\e85c'; } /* '' */ +.buttonicon-file-powerpoint:before { content: '\e85d'; } /* '' */ +.buttonicon-table:before { content: '\f0ce'; } /* '' */ +/* END Of FONTELLO GENERATED CSS */ + +.icon-spin:before { + -webkit-animation: spinAnimation 2s infinite linear; + animation: spinAnimation 2s infinite linear; + font-family: "fontawesome-etherpad"; + font-size: 22px; + z-index: 150; + width: 22px; + height: 22px; +} + +@-webkit-keyframes spinAnimation { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(359deg); + transform: rotate(359deg); + } +} +@keyframes spinAnimation { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(359deg); + transform: rotate(359deg); + } +} \ No newline at end of file diff --git a/src/static/css/pad/layout.css b/src/static/css/pad/layout.css new file mode 100644 index 00000000000..f2f2f1fdb85 --- /dev/null +++ b/src/static/css/pad/layout.css @@ -0,0 +1,46 @@ +html, body { + width: 100%; + height: 100%; + margin: 0; + padding: 0; +} +body { + display: flex; + flex-direction: column; +} +#editbar { + height: auto; +} +#editorcontainerbox { + flex: 1 auto; + position: relative; /* for nested popup to use absolute positionning */ + background-color: #eee; + + /* For sticky chat */ + display: flex; + flex-direction: row; +} +#editorcontainerbox #editorcontainer { + display: flex; /* transfer flex properties to nested elements, here the iframe */ + height: 100%; + flex: 1 auto; +} +#editorcontainerbox #editorcontainer iframe { + width: 100%; +} +#editorcontainerbox .sticky-container { /* container for #users, #chat, #toc (table of content) and so on... */ + display: flex; + flex-direction: column; + width: 200px; + max-width: 40%; + flex-shrink: 0; +} +#editorcontainerbox .sticky-container:not(.stikyUsers):not(.stickyChat) { + width: 0; /* hide when the container is empty */ +} + +@media only screen and (max-width: 720px) { + #editorcontainerbox { + margin-bottom: 39px; /* Leave space for the bottom toolbar on mobile */ + } +} diff --git a/src/static/css/pad/loadingbox.css b/src/static/css/pad/loadingbox.css new file mode 100644 index 00000000000..5e990cd7255 --- /dev/null +++ b/src/static/css/pad/loadingbox.css @@ -0,0 +1,27 @@ +#editorloadingbox { + padding-top: 100px; + padding-bottom: 100px; + font-size: 2.5em; + color: #aaa; + text-align: center; + position: absolute; + width: 100%; + height: 30px; + z-index: 100; +} + +#editorloadingbox .passForm{ + padding:10px; +} + +#editorloadingbox input{ + padding:10px; +} + +#editorloadingbox button{ + padding:10px; +} + +#passwordRequired, #permissionDenied, #wrongPassword, #noCookie { + display:none; +} \ No newline at end of file diff --git a/src/static/css/pad/normalize.css b/src/static/css/pad/normalize.css new file mode 100644 index 00000000000..cd04393347d --- /dev/null +++ b/src/static/css/pad/normalize.css @@ -0,0 +1,428 @@ +/*! normalize.css v3.0.2 | MIT License | git.io/normalize */ + +/** + * 1. Set default font family to sans-serif. + * 2. Prevent iOS text size adjust after orientation change, without disabling + * user zoom. + */ + +html { + font-family: sans-serif; /* 1 */ + -ms-text-size-adjust: 100%; /* 2 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +html { + box-sizing: border-box; +} +*, *:before, *:after { + box-sizing: border-box; +} +* { + margin: 0; + padding: 0; +} + +/** + * Remove default margin. + */ + +body { + margin: 0; +} + +/* HTML5 display definitions + ========================================================================== */ + +/** + * Correct `block` display not defined for any HTML5 element in IE 8/9. + * Correct `block` display not defined for `details` or `summary` in IE 10/11 + * and Firefox. + * Correct `block` display not defined for `main` in IE 11. + */ + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +main, +menu, +nav, +section, +summary { + display: block; +} + +/** + * 1. Correct `inline-block` display not defined in IE 8/9. + * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. + */ + +audio, +canvas, +progress, +video { + display: inline-block; /* 1 */ + vertical-align: baseline; /* 2 */ +} + +/** + * Prevent modern browsers from displaying `audio` without controls. + * Remove excess height in iOS 5 devices. + */ + +audio:not([controls]) { + display: none; + height: 0; +} + +/** + * Address `[hidden]` styling not present in IE 8/9/10. + * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. + */ + +[hidden], +template { + display: none; +} + +/* Links + ========================================================================== */ + +/** + * Remove the gray background color from active links in IE 10. + */ + +a { + background-color: transparent; +} + +/** + * Improve readability when focused and also mouse hovered in all browsers. + */ + +a:active, +a:hover { + outline: 0; +} + +/* Text-level semantics + ========================================================================== */ + +/** + * Address styling not present in IE 8/9/10/11, Safari, and Chrome. + */ + +abbr[title] { + border-bottom: 1px dotted; +} + +/** + * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. + */ + +b, +strong { + font-weight: bold; +} + +/** + * Address styling not present in Safari and Chrome. + */ + +dfn { + font-style: italic; +} + +/** + * Address styling not present in IE 8/9. + */ + +mark { + background: #ff0; + color: #000; +} + +/** + * Address inconsistent and variable font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` affecting `line-height` in all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sup { + top: -0.5em; +} + +sub { + bottom: -0.25em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Remove border when inside `a` element in IE 8/9/10. + */ + +img { + border: 0; +} + +/** + * Correct overflow not hidden in IE 9/10/11. + */ + +svg:not(:root) { + overflow: hidden; +} + +/* Grouping content + ========================================================================== */ + +/** + * Address margin not present in IE 8/9 and Safari. + */ + +figure { + margin: 1em 40px; +} + +/** + * Address differences between Firefox and other browsers. + */ + +hr { + -moz-box-sizing: content-box; + box-sizing: content-box; + height: 0; +} + +/** + * Contain overflow in all browsers. + */ + +pre { + overflow: auto; +} + +/** + * Address odd `em`-unit font size rendering in all browsers. + */ + +code, +kbd, +pre, +samp { + font-family: monospace, monospace; + font-size: 1em; +} + +/* Forms + ========================================================================== */ + +/** + * Known limitation: by default, Chrome and Safari on OS X allow very limited + * styling of `select`, unless a `border` property is set. + */ + +/** + * 1. Correct color not being inherited. + * Known issue: affects color of disabled elements. + * 2. Correct font properties not being inherited. + * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. + */ + +button, +input, +optgroup, +select, +textarea { + color: inherit; /* 1 */ + font: inherit; /* 2 */ + margin: 0; /* 3 */ +} + +/** + * Address `overflow` set to `hidden` in IE 8/9/10/11. + */ + +button { + overflow: visible; +} + +/** + * Address inconsistent `text-transform` inheritance for `button` and `select`. + * All other form control elements do not inherit `text-transform` values. + * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. + * Correct `select` style inheritance in Firefox. + */ + +button, +select { + text-transform: none; +} + +/** + * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` + * and `video` controls. + * 2. Correct inability to style clickable `input` types in iOS. + * 3. Improve usability and consistency of cursor style between image-type + * `input` and others. + */ + +/* 1 */ html input[type="button"], +button, +input[type="reset"], +input[type="submit"] { + -webkit-appearance: button; /* 2 */ + cursor: pointer; /* 3 */ +} + +/** + * Re-set default cursor for disabled elements. + */ + +button[disabled], +html input[disabled] { + cursor: default; +} + +/** + * Remove inner padding and border in Firefox 4+. + */ + +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} + +/** + * Address Firefox 4+ setting `line-height` on `input` using `!important` in + * the UA stylesheet. + */ + +input { + line-height: normal; +} + +/** + * It's recommended that you don't attempt to style these elements. + * Firefox's implementation doesn't respect box-sizing, padding, or width. + * + * 1. Address box sizing set to `content-box` in IE 8/9/10. + * 2. Remove excess padding in IE 8/9/10. + */ + +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Fix the cursor style for Chrome's increment/decrement buttons. For certain + * `font-size` values of the `input`, it causes the cursor style of the + * decrement button to change from `default` to `text`. + */ + +input[type="number"]::-webkit-inner-spin-button, +input[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Address `appearance` set to `searchfield` in Safari and Chrome. + * 2. Address `box-sizing` set to `border-box` in Safari and Chrome + * (include `-moz` to future-proof). + */ + +input[type="search"] { + -webkit-appearance: textfield; /* 1 */ + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; /* 2 */ + box-sizing: content-box; +} + +/** + * Remove inner padding and search cancel button in Safari and Chrome on OS X. + * Safari (but not Chrome) clips the cancel button when the search input has + * padding (and `textfield` appearance). + */ + +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * Define consistent border, margin, and padding. + */ + +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +/** + * 1. Correct `color` not being inherited in IE 8/9/10/11. + * 2. Remove padding so people aren't caught out if they zero out fieldsets. + */ + +legend { + border: 0; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Remove default vertical scrollbar in IE 8/9/10/11. + */ + +textarea { + overflow: auto; +} + +/** + * Don't inherit the `font-weight` (applied by a rule above). + * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. + */ + +optgroup { + font-weight: bold; +} + +/* Tables + ========================================================================== */ + +/** + * Remove most spacing between table cells. + */ + +table { + border-collapse: collapse; + border-spacing: 0; +} + +td, +th { + padding: 0; +} diff --git a/src/static/css/pad/popup.css b/src/static/css/pad/popup.css new file mode 100644 index 00000000000..0bf6e9892ee --- /dev/null +++ b/src/static/css/pad/popup.css @@ -0,0 +1,83 @@ +.popup.popup-show, .popup#users.chatAndUsers { + visibility: visible; +} + +.popup > .popup-content { + transform: scale(0.7); + opacity: 0; + transition: all 0.3s cubic-bezier(0.74, -0.05, 0.27, 1.75) +} + +.popup.popup-show > .popup-content, .popup#users.chatAndUsers > .popup-content { + transform: scale(1); + opacity: 1; +} + +.popup { + position: absolute; + top: 10px; + right: 30px; + visibility: hidden; + z-index: 500; +} +#mycolorpicker { + top: 0; +} +.popup.toolbar-popup { + right: auto; + margin-left: -10px; +} +.popup-content { + padding: 10px; + border-radius: 6px; + border: 1px solid #ccc; + box-shadow: 0 2px 4px #ddd; + background: #f7f7f7; + min-width: 300px; + max-width: 600px; +} +.popup input[type=text] { + width: 100%; + padding: 5px; + display: block; + margin-top: 10px; +} +.popup input[type=text], #users input[type=text] { + outline: none; +} +.popup a { + text-decoration: none +} +.popup h1 { + font-size: 1.8rem; + margin-bottom: 10px; +} +.popup h2 { + opacity: .7; + margin: 10px 0; + font-size: 1.2rem; +} +.popup:not(.comment-modal) p { + margin: 5px 0; +} + +/* Mobile devices */ +@media only screen and (max-width: 720px) { + .popup { + border-radius: 0; + top: 1rem; + margin: 0 !important; + right: 1rem !important; + left: 1rem !important; + max-width: none !important; + } + .popup-content { + max-height: 80vh; + overflow: auto; + } + /* Move popup to the bottom, except popup linked to left toolbar, like hyperklink popup */ + .popup:not(.toolbar-popup) { + top: auto; + bottom: 1rem; + } +} \ No newline at end of file diff --git a/src/static/css/pad/popup_connectivity.css b/src/static/css/pad/popup_connectivity.css new file mode 100644 index 00000000000..80923341388 --- /dev/null +++ b/src/static/css/pad/popup_connectivity.css @@ -0,0 +1,24 @@ +#connectivity .popup-content * { + display: none; +} + +#connectivity .visible, +#connectivity .visible * { + display: block; +} + +/* styles for the automatic reconnection timer: */ +#connectivity .visible.with_reconnect_timer button, +#connectivity .visible.with_reconnect_timer .reconnecttimer * { + display: inline-block; +} + +#connectivity .with_reconnect_timer .hidden, +#connectivity .with_reconnect_timer #defaulttext.hidden, +#connectivity .with_reconnect_timer button.hidden { + display: none; +} + +#connectivity .with_reconnect_timer #cancelreconnect { + margin-left: 10px; +} \ No newline at end of file diff --git a/src/static/css/pad/popup_import_export.css b/src/static/css/pad/popup_import_export.css new file mode 100644 index 00000000000..3bfe0722e75 --- /dev/null +++ b/src/static/css/pad/popup_import_export.css @@ -0,0 +1,26 @@ +.readonly .acl-write { + display: none; +} +.exportlink { + margin-bottom: 10px; + display: block; +} +.exporttype:before { + margin-right: 10px !important; +} + +/* hidden element */ +#importstatusball, +#importmessagesuccess, +#importmessageabiword { + display: none; +} + +#importmessageabiword { + color: #900; + font-size: small; +} + +#importsubmitinput { + margin-top: 10px; +} \ No newline at end of file diff --git a/src/static/css/pad/popup_users.css b/src/static/css/pad/popup_users.css new file mode 100644 index 00000000000..345274c3f9f --- /dev/null +++ b/src/static/css/pad/popup_users.css @@ -0,0 +1,137 @@ +/* --------------- */ +/* --- LAYOUT ---- */ +/* --------------- */ + +.popup#users { + flex-direction: column; + max-height: 500px; + height: auto; +} +.popup#users #myuser { + flex-shrink: 0; +} +.popup#users #otherusers { + flex: 1 auto; + overflow: auto; + max-height: 200px; +} + +.popup#users.chatAndUsers { + display: flex !important; /* always visible */ + position: relative; + z-index: 1; + top: 0; + right: 0; + left: auto; +} +.popup#users.chatAndUsers > .popup-content { + border: none; + border-bottom: 1px solid #ccc; + border-left: 1px solid #ccc; + border-right: 0; + border-radius: 0; + box-shadow: none; + height: 200px; + min-width: 0; + padding: 5px; +} + + +/* --------------- */ +/* --- MY USER --- */ +/* --------------- */ + +#myswatchbox { + float: left; + width: 24px; + height: 24px; + border: 1px solid #ccc + background: transparent; + cursor: pointer; +} +#myswatch { + width: 100%; + height: 100%; + background: transparent; /*...initially*/ +} + +#myusernameform { + margin-left: 30px; +} +input#myusernameedit { + height: 26px; + font-size: 1.3em; + padding: 3px; + border: 1px solid #ccc; + background-color: transparent; + margin: 0; +} +input#myusernameedit:not(.editable) { + color: grey; +} +#myuser .myusernameedithoverable:hover { + background: white; +} +#myusernameform .editactive, +#myusernameform .editempty { + background: white; + border-left: 1px solid #c3c3c3; + border-top: 1px solid #c3c3c3; + border-right: 1px solid #e6e6e6; + border-bottom: 1px solid #e6e6e6; +} + +#myusernameedit, #otheruserstable .swatch { + border: 1px solid #ccc; +} +#myusernameform .editempty { + opacity: .8; +} + + +/* --------------------------- */ +/* --- MY USER COLORPICKER --- */ +/* --------------------------- */ + +#mycolorpicker.popup { + min-width: 0; + right: calc(100% + 15px); + z-index: 101; +} +@media (max-width: 720px) { + #mycolorpicker.popup { + right: 0; + left: auto; + } +} +#mycolorpicker.popup .btn-container { + margin-top: 10px; +} +#mycolorpickerpreview { + width: 24px; + height: 24px; + border-radius: 5px; + float: right; +} + +/* ------------------- */ +/* --- OTHER USERS --- */ +/* ------------------- */ +#otheruserstable { + display: none; +} +#otheruserstable td { + height: 26px; + padding: 0 2px; +} +#otheruserstable .swatch { + border: 1px solid #ccc; + width: 13px; + height: 13px; + overflow: hidden; + margin: 0 4px; + user-select: none; +} +.usertdname { + font-size: 1.2rem; +} \ No newline at end of file diff --git a/src/static/css/pad/toolbar.css b/src/static/css/pad/toolbar.css new file mode 100644 index 00000000000..414a9e9097f --- /dev/null +++ b/src/static/css/pad/toolbar.css @@ -0,0 +1,175 @@ +.toolbar { + display: none; + position: relative; + background-color: #f4f4f4; + color: #666; + border-bottom: 1px solid #ccc; + overflow: hidden; + justify-content: space-between; + padding: 0px 5px 5px 5px; + flex-shrink: 0; +} +.toolbar ul { + list-style: none; + z-index: 2; + overflow: hidden; + margin: 0; + display: flex; + flex-direction: row; + align-items: flex-start; +} +.toolbar ul.menu_right { + flex-shrink: 0; /* prevent from shrinking */ +} +.toolbar ul li, .toolbar ul > div { + display: flex; /* transfer flexbox positionning to children */ +} +.toolbar ul li { + margin-top: 5px; /* when icons goes multi rows, have space betwwen each row */ +} +.toolbar ul li.separator { + visibility: hidden; + width: 10px; +} +.toolbar ul li a { + display: flex; + align-items: center; + justify-content: center; + min-width: 28px; + height: 28px; + border: 1px solid #ccc; + border-radius: 3px; + background: #fff; + cursor: pointer; + overflow: hidden; + text-decoration: none; + transition: background-color .1s; +} +.toolbar ul li button:active, .toolbar ul li button:focus { + outline: 0; + border: none; +} +.toolbar ul li a:hover { + text-decoration: none; + background-color: #f2f2f2; +} +.toolbar ul li a:active, .toolbar ul li a:focus { + background: #ddd; +} +.toolbar ul li a.selected { + background: #dadada; +} + +.toolbar ul li a.grouped-left { + border-radius: 3px 0 0 3px; +} +.toolbar ul li a.grouped-middle { + border-radius: 0; + border-left: 0; +} +.toolbar ul li a.grouped-right { + border-radius: 0 3px 3px 0; + border-left: 0; +} + +.toolbar ul li[data-key=showusers] > a { + min-width: 35px; +} +.toolbar ul li[data-key=showusers] > a .buttonicon-showusers { + padding-left: 3px; +} +.toolbar ul li[data-key=showusers] > a #online_count { + font-weight: bold; + font-size: 11px; + position: relative; + padding-left: 7px; +} + +.toolbar #toolbar-overlay { + z-index: 500; + display: none; + width: 100%; + position: absolute; + height: inherit; + left: 0; + top: 0; + bottom: 0; + right: 0; +} + +.toolbar .show-more-icon-btn { + display:none; + cursor: pointer; + height: 39px; + width: 39px; + line-height: 39px; + text-align: center; + font-weight: bold; + font-size: 2rem; + z-index: 20; +} + +.toolbar.cropped .menu_left { + width: calc(100% - 39px); + height: 33px; + flex-wrap: wrap; +} +.toolbar.cropped .show-more-icon-btn { + display: block; + position: absolute; + /*border-bottom: 1px solid #d2d2d2;*/ + right: 0; + top: 0; +} +.toolbar.cropped .show-more-icon-btn:after { + content: "+"; +} +.toolbar.full-icons .show-more-icon-btn { + line-height: 35px; +} +.toolbar.full-icons .show-more-icon-btn:after { + content: "-"; +} +.toolbar.full-icons .menu_left { + height: auto !important; + overflow: visible; +} + +@media only screen and (max-width: 720px) { + .toolbar ul li.separator { + width: 5px; + } + /* menu_right act like a new toolbar on the bottom of the screen */ + .toolbar .menu_right { + position: fixed; + bottom: 0; + right: 0; + left: 0; + border-top: 1px solid #ccc; + background-color: #f4f4f4; + padding: 0 5px 5px 5px; + } + .toolbar ul.menu_right > li { + margin-right: 8px; + } + .toolbar ul.menu_right > li.separator { + display: none; + } + .toolbar ul.menu_right > li a { + border: none; + background-color: transparent; + margin-left: 5px; + } + .toolbar ul.menu_right > li[data-key="showusers"] { + position: absolute; + right: 0; + top: 0; + bottom: 0; + margin: 0; + } + .toolbar ul.menu_right > li[data-key="showusers"] a { + height: 100%; + width: 40px; + border-radius: 0; + } +} \ No newline at end of file diff --git a/src/static/css/timeslider.css b/src/static/css/timeslider.css index 0311b10eeb8..c53323d3733 100644 --- a/src/static/css/timeslider.css +++ b/src/static/css/timeslider.css @@ -1,279 +1,145 @@ -@import url('./lists_and_indents.css'); - -p.pblort { - height: 100px; -} - -#editorcontainerbox { - overflow: auto; - top: 40px; - position: static; -} -#padcontent { - font-size: 12px; +#editbar { padding: 10px; + display: block; } -#timeslider-wrapper { - left: 0; - position: relative; - right: 0; - top: 0; +#innerdocbody { + margin: 0 auto; } -#timeslider-left { - background-color:#fff; - height: 63px; - left: 0; - position: absolute; - width: 134px; -} -#timeslider-right { - background-color:#fff; - height: 63px; - position: absolute; - right: 0; - top: 0; - width: 155px; -} -#timeslider { - height: 63px; - margin: 0 9px; - -webkit-touch-callout: none; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - background-color:#fff; - /* bgcolor is reuqired so you can't see pad content behind it */ -} -#timeslider #timeslider-slider { - height: 61px; - left: 0; - position: absolute; - top: 1px; - width: 100%; -} -#ui-slider-handle { - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; - background-color: #666; - cursor: pointer; - height: 61px; - left: 0; - position: absolute; - top: 0; - width: 13px; -} -#ui-slider-bar { - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; - cursor: pointer; - height: 60px; - margin-left: 5px; - margin-right: 150px; - position: relative; - top: 0px; + +.timeslider-bar { + display: flex; + flex-direction: row; } -#playpause_button, -#playpause_button_icon { - height: 44px; - position: absolute; - width: 44px; - text-align:center; - vertical-align:middle; - background:none; +/* TITLE */ + +.timeslider-title-container { + flex: 1 auto; } -#playpause_button { - right: 77px; - top: 9px; - height:50px; - height:50px; - background: background-linear-gradient( #F7F7F7, #F1F1F1 80%) repeat scroll 0 0 transparent; - border-radius:24px; - cursor:hand; +.timeslider-title { + font-size: 1.8rem !important; } -#playpause_button_icon:before { - line-height:44px; - padding-left:2px; - font-family: fontawesome-etherpad; - content: "\e82c"; - font-size:24px; - color:#666; +.timeslider-subtitle { + margin-top: 10px; } -#playpause_button_icon { - left: 0; - top: 0; - border-radius:48px; - border: solid 1px #666; -} -.pause:before { - line-height:44px; - padding-left:2px; - font-family: fontawesome-etherpad; - content: "\e82e" !important; - font-size:24px; - color:#666; - padding-left:0 !important; -} -#leftstar, -#rightstar, -#leftstep, -#rightstep { - background-color: white; - overflow: hidden; - position: absolute; +/* RIGHT TOOLBAR (export, settings, back to pad) */ + +.editbarright ul li a { + background-color: transparent; + border: none; + margin-left: 10px } -.stepper{ - font-family: fontawesome-etherpad; - border-radius:2px; - border: #666 solid 1px; -/* line-height:18px; */ - text-align:center; - height:22px; - color:#666; + +/* SLIDER */ + +#timeslider-wrapper { + display: flex; + flex-direction: row; + height: 40px; } -stepper:active{ - color:#000; +#timeslider-slider { + flex: 1 auto; + display: flex; + flex-direction: column; + justify-content: center; + cursor: pointer; + position: relative; } -#leftstep { - right: 38px; - top: 20px; - width: 25px; +#timeslider-slider #timer { + position: absolute; + top: -10px; + right: -10px; } -#leftstep:before{ - content: '\e821'; - vertical-align:middle; + +#timeslider-slider #ui-slider-bar { + height: 10px; + width: 100%; + background-color: #c2c2c2; + position: relative; } -#rightstep:before{ - content: "\e822"; - vertical-align:middle; + +#timeslider-slider #ui-slider-handle { + height: 40px; + width: 10px; + z-index: 2; + position: absolute; + background-color: #3e3e3e; + cursor: move; } -#rightstep { - right: 12px; - top: 20px; - width: 25px; +#timeslider-slider .star { + cursor: pointer; + position: absolute; + top: -8px } -.star:before{ +#timeslider-slider .star:before{ font-family: fontawesome-etherpad; - content: "\e835"; + color: #da9700; + content: "\e856"; vertical-align:middle; font-size:16px; + margin-left: -2px; } -#timeslider .star { - cursor: pointer; - height: 16px; - position: absolute; - top: 25px; - width: 15px; -} -#timeslider #timer { - background: linear-gradient(#F7F7F7, #F1F1F1 80%) repeat scroll 0% 0% transparent; - padding:2px; - border-radius:2px; - font-family: Arial, sans-serif; - font-size: 11px; - left: 7px; - position: absolute; - text-align: center; - top: 9px; - width: 122px; -} -.topbarcenter, -#docbar { - display: none -} -#padmain { - top: 0px !important -} -#editbar{ - -webkit-touch-callout: none; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} -.editbarright { - float: right; - text-align: right; - height: 30px !important; -} -.toolbar ul{ - position:relative; - float:right; - height:30px; -} -#import_export, #settings{ - top: 115px; - position: fixed; -} -#import_export .popup { - width: 183px; - border-top: none; - border-right: none; - border-radius: 0 0 0 6px; + +/* BUTTONS TO MOVE SLIDER (Play/Pause, Next, Prev)*/ + +#slider-btn-container { + margin-left: 15px; + display: flex; + align-items: center; } -#import_export { - width: 185px; +#slider-btn-container button { + border: 1px solid #666; + border-radius: 50%; + width: 30px; + height: 30px; + margin-left: 5px; } -.timeslider-bar { - background: #f7f7f7; - background: -webkit-linear-gradient(#f7f7f7, #f1f1f1 80%); - background: -moz-linear-gradient(#f7f7f7, #f1f1f1 80%); - background: -o-linear-gradient(#f7f7f7, #f1f1f1 80%); - background: -ms-linear-gradient(#f7f7f7, #f1f1f1 80%); - background: linear-gradient(#f7f7f7, #f1f1f1 80%); - overflow: hidden; - padding-top: 3px; - width: 100%; +#slider-btn-container #playpause_button_icon { + width: 40px; + height: 40px; + padding-left: 2px; } -.timeslider-bar #editbar { - border-bottom: none; - float: right; - width: auto; +#slider-btn-container #playpause_button_icon:before { + font-size: 22px; } -.timeslider-bar h1 { - margin: 5px +#slider-btn-container #playpause_button_icon.pause:before { + content: "\e829"; + padding-left: 0; + padding-right: 2px; } -.timeslider-bar p { - margin: 5px + + +/* PAD CONTENT */ + +#editorcontainerbox { + overflow-y: auto; } -#timeslider-top { +#outerdocbody { + display: block; width: 100%; - position: fixed; - z-index: 1; -} -#authorsList .author { - padding-left: 0.4em; - padding-right: 0.4em; -} -#authorsList .author-anonymous { - padding-left: 0.6em; - padding-right: 0.6em; -} -#padeditor { - position: static } -button{ - margin:0; - padding:0; - cursor:pointer; +#innerdocbody { + white-space: normal; + word-break: break-word; + width: 100%; + height: 100%; } -button::-moz-focus-inner { - padding: 0; - border: 0 -} +@media (max-width: 720px) { + #timeslider-slider #timer { display: none; } -button:focus{ - border: 1px solid #666; -} + .editbarright [data-key="timeslider_returnToPad"] { + position: absolute; + right: 10px; + top: 0; + } + .timeslider-title { + font-size: 1.5rem !important; + } +} \ No newline at end of file diff --git a/src/static/font/Quicksand-Bold.ttf b/src/static/font/Quicksand-Bold.ttf new file mode 100644 index 00000000000..49326cda826 Binary files /dev/null and b/src/static/font/Quicksand-Bold.ttf differ diff --git a/src/static/font/Quicksand-Medium.ttf b/src/static/font/Quicksand-Medium.ttf new file mode 100644 index 00000000000..7dc8c2745dd Binary files /dev/null and b/src/static/font/Quicksand-Medium.ttf differ diff --git a/src/static/font/Quicksand-Regular.ttf b/src/static/font/Quicksand-Regular.ttf new file mode 100644 index 00000000000..9fdce17db50 Binary files /dev/null and b/src/static/font/Quicksand-Regular.ttf differ diff --git a/src/static/font/Roboto-Bold.ttf b/src/static/font/Roboto-Bold.ttf new file mode 100644 index 00000000000..d998cf5b468 Binary files /dev/null and b/src/static/font/Roboto-Bold.ttf differ diff --git a/src/static/font/Roboto-Regular.ttf b/src/static/font/Roboto-Regular.ttf new file mode 100644 index 00000000000..2b6392ffe87 Binary files /dev/null and b/src/static/font/Roboto-Regular.ttf differ diff --git a/src/static/font/config.json b/src/static/font/config.json index 1c636281da4..31f516d2cd1 100644 --- a/src/static/font/config.json +++ b/src/static/font/config.json @@ -1,6 +1,6 @@ { "name": "fontawesome-etherpad", - "css_prefix_text": "icon-", + "css_prefix_text": "buttonicon-", "css_use_suffix": false, "hinting": true, "units_per_em": 1000, @@ -12,330 +12,18 @@ "code": 59402, "src": "fontawesome" }, - { - "uid": "474656633f79ea2f1dad59ff63f6bf07", - "css": "star", - "code": 59446, - "src": "fontawesome" - }, - { - "uid": "d17030afaecc1e1c22349b99f3c4992a", - "css": "star-empty", - "code": 59445, - "src": "fontawesome" - }, - { - "uid": "8b80d36d4ef43889db10bc1f0dc9a862", - "css": "user", - "code": 59401, - "src": "fontawesome" - }, - { - "uid": "31972e4e9d080eaa796290349ae6c1fd", - "css": "users", - "code": 59400, - "src": "fontawesome" - }, - { - "uid": "0f99ab40ab0b4d64a74f2d0deeb03e42", - "css": "videocam", - "code": 59403, - "src": "fontawesome" - }, - { - "uid": "381da2c2f7fd51f8de877c044d7f439d", - "css": "picture", - "code": 59404, - "src": "fontawesome" - }, - { - "uid": "7fd683b2c518ceb9e5fa6757f2276faa", - "css": "eye-off", - "code": 59405, - "src": "fontawesome" - }, - { - "uid": "7034e4d22866af82bef811f52fb1ba46", - "css": "code", - "code": 59431, - "src": "fontawesome" - }, { "uid": "7277ded7695b2a307a5f9d50097bb64c", "css": "print", "code": 59393, "src": "fontawesome" }, - { - "uid": "85528017f1e6053b2253785c31047f44", - "css": "comment", - "code": 59448, - "src": "fontawesome" - }, - { - "uid": "dcedf50ab1ede3283d7a6c70e2fe32f3", - "css": "chat", - "code": 59432, - "src": "fontawesome" - }, - { - "uid": "9c1376672bb4f1ed616fdd78a23667e9", - "css": "comment-empty", - "code": 59433, - "src": "fontawesome" - }, - { - "uid": "f48ae54adfb27d8ada53d0fd9e34ee10", - "css": "trash-empty", - "code": 59434, - "src": "fontawesome" - }, - { - "uid": "1b5a5d7b7e3c71437f5a26befdd045ed", - "css": "doc", - "code": 59394, - "src": "fontawesome" - }, - { - "uid": "9daa1fdf0838118518a7e22715e83abc", - "css": "file-pdf", - "code": 59395, - "src": "fontawesome" - }, - { - "uid": "310ffd629da85142bc8669f010556f2d", - "css": "file-word", - "code": 59396, - "src": "fontawesome" - }, - { - "uid": "f761c3bbe16ba2d332914ecb28e7a042", - "css": "file-excel", - "code": 59397, - "src": "fontawesome" - }, - { - "uid": "edcd4022de8d8df266ef7c42d2658ca5", - "css": "file-powerpoint", - "code": 59398, - "src": "fontawesome" - }, - { - "uid": "3c961c1a8d874815856fc6637dc5a13c", - "css": "file-image", - "code": 59399, - "src": "fontawesome" - }, - { - "uid": "26613a2e6bc41593c54bead46f8c8ee3", - "css": "file-code", - "code": 59430, - "src": "fontawesome" - }, - { - "uid": "e99461abfef3923546da8d745372c995", - "css": "cog", - "code": 59443, - "src": "fontawesome" - }, - { - "uid": "19c50c52858a81de58f9db488aba77bc", - "css": "mic", - "code": 59435, - "src": "fontawesome" - }, - { - "uid": "598a5f2bcf3521d1615de8e1881ccd17", - "css": "clock", - "code": 59447, - "src": "fontawesome" - }, - { - "uid": "bc71f4c6e53394d5ba46b063040014f1", - "css": "cw", - "code": 59428, - "src": "fontawesome" - }, - { - "uid": "f9c3205df26e7778abac86183aefdc99", - "css": "ccw", - "code": 59427, - "src": "fontawesome" - }, - { - "uid": "a73c5deb486c8d66249811642e5d719a", - "css": "arrows-cw", - "code": 59429, - "src": "fontawesome" - }, - { - "uid": "6020aff067fc3c119cdd75daa5249220", - "css": "exchange", - "code": 59444, - "src": "fontawesome" - }, - { - "uid": "ce06b5805120d0c2f8d60cd3f1a4fdb5", - "css": "play", - "code": 59436, - "src": "fontawesome" - }, - { - "uid": "b624a1e512819d410ddbee84e6918b9d", - "css": "stop", - "code": 59437, - "src": "fontawesome" - }, - { - "uid": "0b28050bac9d3facf2f0226db643ece0", - "css": "pause", - "code": 59438, - "src": "fontawesome" - }, - { - "uid": "c47efa0e3e74f6ba4c2562c1258fff1f", - "css": "to-end", - "code": 59426, - "src": "fontawesome" - }, - { - "uid": "12052b30d23a1a70d6b32962d5464cae", - "css": "to-start", - "code": 59425, - "src": "fontawesome" - }, - { - "uid": "f9cbf7508cd04145ade2800169959eef", - "css": "font", - "code": 59419, - "src": "fontawesome" - }, - { - "uid": "02cca871bb69da75e8ee286b7055832c", - "css": "bold", - "code": 59420, - "src": "fontawesome" - }, - { - "uid": "a8cb1c217f02b073db3670c061cc54d2", - "css": "italic", - "code": 59421, - "src": "fontawesome" - }, - { - "uid": "0c708edd8fae2376b3370aa56d40cf9e", - "css": "header", - "code": 59422, - "src": "fontawesome" - }, - { - "uid": "c009d417f87d6a27bb5a1cefd30b6cbd", - "css": "text-height", - "code": 59423, - "src": "fontawesome" - }, - { - "uid": "13a971bcccd2dda26d4d4eccd8593f8a", - "css": "text-width", - "code": 59424, - "src": "fontawesome" - }, - { - "uid": "f4f0e849b805be1f6d76b65581cb3b8b", - "css": "align-left", - "code": 59392, - "src": "fontawesome" - }, - { - "uid": "ae6336c46d73af999fe7460c089abb4d", - "css": "align-center", - "code": 59407, - "src": "fontawesome" - }, - { - "uid": "e1e7306b47c3c5e6faecce9d32571381", - "css": "align-right", - "code": 59408, - "src": "fontawesome" - }, - { - "uid": "25a81737628d1e654a30ad412d7d6dd7", - "css": "align-justify", - "code": 59409, - "src": "fontawesome" - }, - { - "uid": "48b87105bd38c20315f1b705b8c7b38c", - "css": "list", - "code": 59410, - "src": "fontawesome" - }, - { - "uid": "594e9271c08ff732c04b3bf3117b9040", - "css": "indent-left", - "code": 59411, - "src": "fontawesome" - }, - { - "uid": "4d2dfc45d8176b1f26aed973fa84a91e", - "css": "indent-right", - "code": 59412, - "src": "fontawesome" - }, - { - "uid": "a2a74f5e7b7d9ba054897d8c795a326a", - "css": "list-bullet", - "code": 59413, - "src": "fontawesome" - }, - { - "uid": "f6766a8b042c2453a4e153af03294383", - "css": "list-numbered", - "code": 59414, - "src": "fontawesome" - }, - { - "uid": "61c242c9e2134d5864d7fdd57b3c9289", - "css": "strike", - "code": 59416, - "src": "fontawesome" - }, - { - "uid": "d4a4a38a40b728f46dad1de4ac950231", - "css": "underline", - "code": 59415, - "src": "fontawesome" - }, - { - "uid": "4e88371fb8857dacc1f66afe6314e426", - "css": "superscript", - "code": 59417, - "src": "fontawesome" - }, - { - "uid": "3d1c929dbc966992185ce749548c1b2c", - "css": "subscript", - "code": 59418, - "src": "fontawesome" - }, { "uid": "9396b2d8849e0213a0f11c5fd7fcc522", "css": "tasks", "code": 59442, "src": "fontawesome" }, - { - "uid": "0bda4bc779d4c32623dec2e43bd67ee8", - "css": "gauge", - "code": 59439, - "src": "fontawesome" - }, - { - "uid": "cda0cdcfd38f5f1d9255e722dad42012", - "css": "spinner", - "code": 59406, - "src": "fontawesome" - }, { "uid": "fa9a0b7e788c2d78e24cef1de6b70e80", "css": "brush", @@ -354,17 +42,815 @@ "code": 59449, "src": "fontawesome" }, - { - "uid": "0ddd3e8201ccc7d41f7b7c9d27eca6c1", - "css": "link", - "code": 59450, - "src": "fontawesome" - }, { "uid": "8fb55fd696d9a0f58f3b27c1d8633750", "css": "table", "code": 61646, "src": "fontawesome" + }, + { + "uid": "1569a5b2bebe7e28bb0d26ddeca34fc8", + "css": "video", + "code": 59451, + "src": "custom_icons", + "selected": true, + "svg": { + "path": "M656.6 125H93.4C41.8 125 0 166.8 0 218.4V781.6C0 833.2 41.8 875 93.4 875H656.6C708.2 875 750 833.2 750 781.6V218.4C750 166.8 708.2 125 656.6 125ZM1026.6 198.6L812.5 346.3V653.7L1026.6 801.2C1068 829.7 1125 800.6 1125 750.8V249C1125 199.4 1068.2 170.1 1026.6 198.6Z", + "width": 1125 + }, + "search": [ + "video" + ] + }, + { + "uid": "8fe2c571b78d019e24cab0b780cb61d6", + "css": "video-slash", + "code": 59452, + "src": "custom_icons", + "selected": true, + "svg": { + "path": "M1237.9 894.7L1130.5 811.7C1160.5 809 1187.5 785 1187.5 751V249C1187.5 199.2 1130.7 170.1 1089.1 198.6L875 346.3V614.3L812.5 566V218.4C812.5 166.8 770.7 125 719.1 125H242L88.9 6.6C75.2-3.9 55.7-1.6 44.9 12.1L6.6 61.3C-3.9 75-1.6 94.5 12.1 105.1L83.4 160.2 812.5 723.8 1161.1 993.4C1174.8 1003.9 1194.3 1001.6 1205.1 987.9L1243.4 938.5C1254.1 925 1251.6 905.3 1237.9 894.7ZM62.5 781.6C62.5 833.2 104.3 875 155.9 875H719.1C741 875 760.9 867.2 777 854.5L62.5 302.1V781.6Z", + "width": 1250 + }, + "search": [ + "video-slash" + ] + }, + { + "uid": "d8020fccc088a524f7cc6db1f329cb3e", + "css": "microphone-alt", + "code": 59453, + "src": "custom_icons", + "selected": true, + "svg": { + "path": "M656.3 375H625C607.7 375 593.8 389 593.8 406.3V500C593.8 646.1 467.8 763.3 318.8 748.8 188.9 736.1 93.8 619.4 93.8 488.9V406.3C93.8 389 79.8 375 62.5 375H31.3C14 375 0 389 0 406.3V484.7C0 659.8 124.9 815.8 296.9 839.6V906.3H187.5C170.2 906.3 156.3 920.2 156.3 937.5V968.8C156.3 986 170.2 1000 187.5 1000H500C517.3 1000 531.3 986 531.3 968.8V937.5C531.3 920.2 517.3 906.3 500 906.3H390.6V840.3C558 817.3 687.5 673.6 687.5 500V406.3C687.5 389 673.5 375 656.3 375ZM343.8 687.5C447.3 687.5 531.3 603.6 531.3 500H364.6C353.1 500 343.8 493 343.8 484.4V453.1C343.8 444.5 353.1 437.5 364.6 437.5H531.3V375H364.6C353.1 375 343.8 368 343.8 359.4V328.1C343.8 319.5 353.1 312.5 364.6 312.5H531.3V250H364.6C353.1 250 343.8 243 343.8 234.4V203.1C343.8 194.5 353.1 187.5 364.6 187.5H531.3C531.3 83.9 447.3 0 343.8 0S156.3 83.9 156.3 187.5V500C156.3 603.6 240.2 687.5 343.8 687.5Z", + "width": 688 + }, + "search": [ + "microphone-alt" + ] + }, + { + "uid": "7d9dd931e0e6305cc5eed55efa435d7c", + "css": "microphone-alt-slash", + "code": 59454, + "src": "custom_icons", + "selected": true, + "svg": { + "path": "M1237.9 894.7L930.2 656.9C954.6 609.8 968.8 556.6 968.8 500V406.3C968.8 389 954.8 375 937.5 375H906.3C889 375 875 389 875 406.3V500C875 535 867.3 568 854.1 598L802.2 558C808.3 539.6 812.5 520.4 812.5 500H727.2L646.4 437.5H812.5V375H645.8C634.3 375 625 368 625 359.4V328.1C625 319.5 634.3 312.5 645.8 312.5H812.5V250H645.8C634.3 250 625 243 625 234.4V203.1C625 194.5 634.3 187.5 645.8 187.5H812.5C812.5 84 728.6 0 625 0S437.5 84 437.5 187.5V276.1L88.8 6.6C75.2-4 55.5-1.6 44.9 12.1L6.6 61.4C-4 75-1.6 94.7 12.1 105.3L1161.2 993.4C1174.8 1004 1194.5 1001.6 1205.1 987.9L1243.4 938.6C1254 925 1251.6 905.3 1237.9 894.7ZM781.3 906.3H671.9V840.3C694.7 837.1 717 831.9 738.2 824.5L639.8 748.4C626.7 749.2 613.6 750.1 600 748.8 490.9 738.1 407.2 653.8 382.9 549.9L281.3 471.3V484.7C281.3 659.8 406.2 815.8 578.1 839.6V906.3H468.8C451.5 906.3 437.5 920.2 437.5 937.5V968.8C437.5 986 451.5 1000 468.8 1000H781.3C798.5 1000 812.5 986 812.5 968.8V937.5C812.5 920.2 798.5 906.3 781.3 906.3Z", + "width": 1250 + }, + "search": [ + "microphone-alt-slash" + ] + }, + { + "uid": "63aa8ba99d3f31973dd2ef65274a03bd", + "css": "compress", + "code": 59455, + "src": "custom_icons", + "selected": true, + "svg": { + "path": "M851.6 375H609.4C583.4 375 562.5 354.1 562.5 328.1V85.9C562.5 73 573 62.5 585.9 62.5H664.1C677 62.5 687.5 73 687.5 85.9V250H851.6C864.5 250 875 260.5 875 273.4V351.6C875 364.5 864.5 375 851.6 375ZM312.5 328.1V85.9C312.5 73 302 62.5 289.1 62.5H210.9C198 62.5 187.5 73 187.5 85.9V250H23.4C10.5 250 0 260.5 0 273.4V351.6C0 364.5 10.5 375 23.4 375H265.6C291.6 375 312.5 354.1 312.5 328.1ZM312.5 914.1V671.9C312.5 645.9 291.6 625 265.6 625H23.4C10.5 625 0 635.5 0 648.4V726.6C0 739.5 10.5 750 23.4 750H187.5V914.1C187.5 927 198 937.5 210.9 937.5H289.1C302 937.5 312.5 927 312.5 914.1ZM687.5 914.1V750H851.6C864.5 750 875 739.5 875 726.6V648.4C875 635.5 864.5 625 851.6 625H609.4C583.4 625 562.5 645.9 562.5 671.9V914.1C562.5 927 573 937.5 585.9 937.5H664.1C677 937.5 687.5 927 687.5 914.1Z", + "width": 875 + }, + "search": [ + "compress" + ] + }, + { + "uid": "d71c270fcbdffa89ee7b646e9d5a2667", + "css": "expand", + "code": 59456, + "src": "custom_icons", + "selected": true, + "svg": { + "path": "M0 351.6V109.4C0 83.4 20.9 62.5 46.9 62.5H289.1C302 62.5 312.5 73 312.5 85.9V164.1C312.5 177 302 187.5 289.1 187.5H125V351.6C125 364.5 114.5 375 101.6 375H23.4C10.5 375 0 364.5 0 351.6ZM562.5 85.9V164.1C562.5 177 573 187.5 585.9 187.5H750V351.6C750 364.5 760.5 375 773.4 375H851.6C864.5 375 875 364.5 875 351.6V109.4C875 83.4 854.1 62.5 828.1 62.5H585.9C573 62.5 562.5 73 562.5 85.9ZM851.6 625H773.4C760.5 625 750 635.5 750 648.4V812.5H585.9C573 812.5 562.5 823 562.5 835.9V914.1C562.5 927 573 937.5 585.9 937.5H828.1C854.1 937.5 875 916.6 875 890.6V648.4C875 635.5 864.5 625 851.6 625ZM312.5 914.1V835.9C312.5 823 302 812.5 289.1 812.5H125V648.4C125 635.5 114.5 625 101.6 625H23.4C10.5 625 0 635.5 0 648.4V890.6C0 916.6 20.9 937.5 46.9 937.5H289.1C302 937.5 312.5 927 312.5 914.1Z", + "width": 875 + }, + "search": [ + "expand" + ] + }, + { + "uid": "5d2d07f112b8de19f2c0dbfec3e42c05", + "css": "spin5", + "code": 59457, + "src": "fontelico" + }, + { + "uid": "54cecf7a3401a3458fe7ea001e622d39", + "css": "trash", + "code": 59406, + "src": "custom_icons", + "selected": true, + "svg": { + "path": "M843.8 62.5H609.4L591 26A46.9 46.9 0 0 0 549 0H325.8A46.3 46.3 0 0 0 284 26L265.6 62.5H31.3A31.3 31.3 0 0 0 0 93.8V156.3A31.3 31.3 0 0 0 31.3 187.5H843.8A31.3 31.3 0 0 0 875 156.3V93.8A31.3 31.3 0 0 0 843.8 62.5ZM103.9 912.1A93.8 93.8 0 0 0 197.5 1000H677.5A93.8 93.8 0 0 0 771.1 912.1L812.5 250H62.5Z", + "width": 875 + }, + "search": [ + "trash" + ] + }, + { + "uid": "f99ec3e571ced9cd747e2b34d8c03436", + "css": "list-ul", + "code": 59434, + "src": "custom_icons", + "selected": true, + "svg": { + "path": "M187.5 187.5C187.5 239.3 145.5 281.3 93.8 281.3S0 239.3 0 187.5 42 93.8 93.8 93.8 187.5 135.7 187.5 187.5ZM93.8 406.3C42 406.3 0 448.2 0 500S42 593.8 93.8 593.8 187.5 551.8 187.5 500 145.5 406.3 93.8 406.3ZM93.8 718.8C42 718.8 0 760.7 0 812.5S42 906.3 93.8 906.3 187.5 864.3 187.5 812.5 145.5 718.8 93.8 718.8ZM281.3 257.8H968.8C986 257.8 1000 243.8 1000 226.6V148.4C1000 131.2 986 117.2 968.8 117.2H281.3C264 117.2 250 131.2 250 148.4V226.6C250 243.8 264 257.8 281.3 257.8ZM281.3 570.3H968.8C986 570.3 1000 556.3 1000 539.1V460.9C1000 443.7 986 429.7 968.8 429.7H281.3C264 429.7 250 443.7 250 460.9V539.1C250 556.3 264 570.3 281.3 570.3ZM281.3 882.8H968.8C986 882.8 1000 868.8 1000 851.6V773.4C1000 756.2 986 742.2 968.8 742.2H281.3C264 742.2 250 756.2 250 773.4V851.6C250 868.8 264 882.8 281.3 882.8Z", + "width": 1000 + }, + "search": [ + "list-ul" + ] + }, + { + "uid": "d921283a409a4e9a51ff1632b200c23d", + "css": "eye-slash", + "code": 59459, + "src": "custom_icons", + "selected": true, + "svg": { + "path": "M625 781.3C476.9 781.3 356.9 666.6 345.9 521.3L141 362.9C114.1 396.7 89.3 432.4 69.3 471.5A63.2 63.2 0 0 0 69.3 528.5C175.2 735.2 384.9 875 625 875 677.6 875 728.3 867.2 777.1 854.6L675.8 776.2A281.5 281.5 0 0 1 625 781.3ZM1237.9 894.7L1022 727.9A647 647 0 0 0 1180.7 528.5 63.2 63.2 0 0 0 1180.7 471.5C1074.8 264.8 865.1 125 625 125A601.9 601.9 0 0 0 337.3 198.6L88.8 6.6A31.3 31.3 0 0 0 44.9 12.1L6.6 61.4A31.3 31.3 0 0 0 12.1 105.3L1161.2 993.4A31.3 31.3 0 0 0 1205.1 987.9L1243.4 938.6A31.3 31.3 0 0 0 1237.9 894.7ZM879.1 617.4L802.3 558A185.1 185.1 0 0 0 812.5 500 185.1 185.1 0 0 0 575.6 319.9 93.1 93.1 0 0 1 593.8 375 91.1 91.1 0 0 1 590.7 394.5L447 283.4A277.9 277.9 0 0 1 625 218.8 281.1 281.1 0 0 1 906.3 500C906.3 542.2 895.9 581.6 879.1 617.4Z", + "width": 1250 + }, + "search": [ + "eye-slash" + ] + }, + { + "uid": "9f79bb02a62542500d6396747bfbdad5", + "css": "list-ol", + "code": 59460, + "src": "custom_icons", + "selected": true, + "svg": { + "path": "M6.4 272.5C6.4 257.9 14 249.9 29 249.9H58.5V172C58.5 161.9 59.6 151.5 59.6 151.5H58.9S55.4 156.7 53.3 158.8C44.6 167.2 32.8 167.5 22.7 156.7L11.9 144.6C1.5 134.1 2.2 122.7 13 112.6L55.4 73.6C64.1 65.6 71.7 62.5 83.6 62.5H107.2C122.2 62.5 130.2 70.1 130.2 85.1V249.9H160.4C175.4 249.9 183 257.9 183 272.5V289.9C183 304.5 175.4 312.5 160.4 312.5H29C14 312.5 6.4 304.5 6.4 289.9V272.5ZM4.3 594.9C4.3 502.6 103.8 484.8 103.8 459.8 103.8 445.8 92.2 442.7 85.7 442.7 79.6 442.7 73.1 444.8 67.2 450.2 57.3 459.8 46.7 463.9 35.8 455L19 441.7C7.7 432.8 5 422.5 13.6 411.6 26.5 394.5 50.8 375 92.6 375 130.5 375 179.4 395.5 179.4 452.3 179.4 527.2 88.1 542.9 84.3 563.4H160.6C175.3 563.4 183.2 571.3 183.2 585.7V602.8C183.2 617.1 175.3 625 160.6 625H27.9C14.2 625 4.3 617.1 4.3 602.8V594.9ZM11 887.9L22 869.8C29.5 856.8 39.8 856.1 52.4 863.6 62 867.7 71.2 869.8 80.5 869.8 100.3 869.8 108.5 862.9 108.5 853.7 108.5 840.7 97.6 835.9 77.4 835.9H68.2C56.5 835.9 50 831.8 44.2 820.5L42.2 816.8C37.4 807.5 39.8 797.6 47.6 787.7L58.6 774C71.9 757.6 82.5 747.7 82.5 747.7V747S74.3 749.1 57.9 749.1H32.6C17.9 749.1 10.4 741.2 10.4 726.8V709.7C10.4 695 17.9 687.5 32.6 687.5H146.8C161.5 687.5 169 695.4 169 709.7V716.2C169 727.5 166.3 735.4 159.1 743.9L124.9 783.3C163.2 793.2 181 823.3 181 851.3 181 893 153 937.5 86.3 937.5 53.8 937.5 31.2 928.3 16.2 919 4.9 910.8 3.9 899.9 11 887.9ZM281.3 257.8H968.8C986 257.8 1000 243.8 1000 226.6V148.4C1000 131.2 986 117.2 968.8 117.2H281.3C264 117.2 250 131.2 250 148.4V226.6C250 243.8 264 257.8 281.3 257.8ZM281.3 570.3H968.8C986 570.3 1000 556.3 1000 539.1V460.9C1000 443.7 986 429.7 968.8 429.7H281.3C264 429.7 250 443.7 250 460.9V539.1C250 556.3 264 570.3 281.3 570.3ZM281.3 882.8H968.8C986 882.8 1000 868.8 1000 851.6V773.4C1000 756.2 986 742.2 968.8 742.2H281.3C264 742.2 250 756.2 250 773.4V851.6C250 868.8 264 882.8 281.3 882.8Z", + "width": 1000 + }, + "search": [ + "list-ol" + ] + }, + { + "uid": "216f7d72d19fbfc4e319fe70240dc9fe", + "css": "bold", + "code": 59461, + "src": "custom_icons", + "selected": true, + "svg": { + "path": "M595.3 476.3C661 440.1 700.1 370.6 700.1 289.4 700.1 195.2 648.8 118.3 566.1 86 517.8 66.4 470.4 62.5 409.5 62.5H46.9C29.6 62.5 15.6 76.5 15.6 93.8V158.3C15.6 175.6 29.6 189.5 46.9 189.5H111.5V811.7H46.9C29.6 811.7 15.6 825.7 15.6 842.9V906.3C15.6 923.5 29.6 937.5 46.9 937.5H429.1C476.4 937.5 516.6 935 559.7 922.7 659.2 893 734.4 802 734.4 683.6 734.4 581.7 682.5 504.6 595.3 476.3ZM277.8 196.9H409.5C441.3 196.9 463.3 200.8 482.8 210 513.7 226.6 531.4 261.8 531.4 306.6 531.4 375 491.7 417.5 427.9 417.5H277.8V196.9ZM497.8 793.5C478 801.4 453.5 803.1 436.4 803.1H277.8V550.7H442.5C520 550.7 565.7 600.2 565.7 673.8 565.7 729.3 539 776.3 497.8 793.5Z", + "width": 750 + }, + "search": [ + "bold" + ] + }, + { + "uid": "0dbd89c5def7ede2cbbe99ef8effcbda", + "css": "underline", + "code": 59462, + "src": "custom_icons", + "selected": true, + "svg": { + "path": "M438 758.3C259 758.3 132.2 658.3 132.2 462.6V125H76.9C59.6 125 45.6 111 45.6 93.8V31.3C45.6 14 59.6 0 76.9 0H345.2C362.5 0 376.5 14 376.5 31.3V93.8C376.5 111 362.5 125 345.2 125H289V462.6C289 567.5 344.3 617.8 438 617.8 529.7 617.8 586.1 568.1 586.1 461.6V125H530.8C513.5 125 499.5 111 499.5 93.8V31.3C499.5 14 513.5 0 530.8 0H798.1C815.4 0 829.4 14 829.4 31.3V93.8C829.4 111 815.4 125 798.1 125H742.9V462.6C742.9 656.7 616.1 758.3 438 758.3ZM31.3 875H843.8C861 875 875 889 875 906.3V968.8C875 986 861 1000 843.8 1000H31.3C14 1000 0 986 0 968.8V906.3C0 889 14 875 31.3 875Z", + "width": 875 + }, + "search": [ + "underline" + ] + }, + { + "uid": "daa7f27064d8c218bf22731012103675", + "css": "italic", + "code": 59463, + "src": "custom_icons", + "selected": true, + "svg": { + "path": "M399.9 812.5H333.8L455.1 187.5H534.6A31.3 31.3 0 0 0 565.3 162.2L577.5 99.7C581.2 80.4 566.5 62.5 546.8 62.5H234.8A31.3 31.3 0 0 0 204.2 87.8L192 150.3C188.2 169.6 203 187.5 222.6 187.5H288.7L167.5 812.5H90.4A31.3 31.3 0 0 0 59.7 837.8L47.5 900.3C43.8 919.6 58.5 937.5 78.2 937.5H387.7A31.3 31.3 0 0 0 418.4 912.2L430.6 849.7C434.4 830.4 419.6 812.5 399.9 812.5Z", + "width": 625 + }, + "search": [ + "italic" + ] + }, + { + "uid": "638e629bf04f06f100d42a3b6c3afeaa", + "css": "strikethrough", + "code": 59464, + "src": "custom_icons", + "selected": true, + "svg": { + "path": "M968.8 562.5H31.3C14 562.5 0 548.5 0 531.3V468.8C0 451.5 14 437.5 31.3 437.5H968.8C986 437.5 1000 451.5 1000 468.8V531.3C1000 548.5 986 562.5 968.8 562.5ZM549.5 593.8C602.7 619 640.3 649.8 640.3 703.6 640.3 768.3 583.8 808.4 492.7 808.4 429.5 808.4 342.5 784.8 342.5 722V718.8C342.5 701.5 328.5 687.5 311.3 687.5H222.2C204.9 687.5 190.9 701.5 190.9 718.8V756.3C190.9 886.8 342.7 955.1 492.7 955.1 665.7 955.1 809.1 866.4 809.1 692.6 809.1 653.9 802 621.5 789.3 593.8H549.5ZM489 406.3C425.7 379.9 378 349.7 378 289.7 378 223.4 438.4 197.1 504.9 197.1 588.2 197.1 631.8 229.5 631.8 261.5V265.6C631.8 282.9 645.8 296.9 663 296.9H752.1C769.4 296.9 783.4 282.9 783.4 265.6V206.4C783.4 104 643.3 50.4 504.9 50.4 338.5 50.4 210.5 130.4 210.5 295.8 210.5 340.2 219.6 376.2 235.5 406.3H489Z", + "width": 1000 + }, + "search": [ + "strikethrough" + ] + }, + { + "uid": "1a1fa90cbaa7da526141f8be54d5491b", + "css": "indent", + "code": 59465, + "src": "custom_icons", + "selected": true, + "svg": { + "path": "M0 164.1V85.9C0 68.7 14 54.7 31.3 54.7H843.8C861 54.7 875 68.7 875 85.9V164.1C875 181.3 861 195.3 843.8 195.3H31.3C14 195.3 0 181.3 0 164.1ZM343.8 445.3H843.8C861 445.3 875 431.3 875 414.1V335.9C875 318.7 861 304.7 843.8 304.7H343.8C326.5 304.7 312.5 318.7 312.5 335.9V414.1C312.5 431.3 326.5 445.3 343.8 445.3ZM31.3 945.3H843.8C861 945.3 875 931.3 875 914.1V835.9C875 818.7 861 804.7 843.8 804.7H31.3C14 804.7 0 818.7 0 835.9V914.1C0 931.3 14 945.3 31.3 945.3ZM343.8 695.3H843.8C861 695.3 875 681.3 875 664.1V585.9C875 568.7 861 554.7 843.8 554.7H343.8C326.5 554.7 312.5 568.7 312.5 585.9V664.1C312.5 681.3 326.5 695.3 343.8 695.3ZM240.8 477.9L53.3 290.4C33.7 270.8 0 284.7 0 312.5V687.5C0 715.5 33.8 729.1 53.3 709.6L240.8 522.1C253.1 509.9 253.1 490.1 240.8 477.9Z", + "width": 875 + }, + "search": [ + "indent" + ] + }, + { + "uid": "8d1d056ea637f2f25e905cd5beac310e", + "css": "outdent", + "code": 59466, + "src": "custom_icons", + "selected": true, + "svg": { + "path": "M0 164.1V85.9C0 68.7 14 54.7 31.3 54.7H843.8C861 54.7 875 68.7 875 85.9V164.1C875 181.3 861 195.3 843.8 195.3H31.3C14 195.3 0 181.3 0 164.1ZM406.3 445.3H843.8C861 445.3 875 431.3 875 414.1V335.9C875 318.7 861 304.7 843.8 304.7H406.3C389 304.7 375 318.7 375 335.9V414.1C375 431.3 389 445.3 406.3 445.3ZM31.3 945.3H843.8C861 945.3 875 931.3 875 914.1V835.9C875 818.7 861 804.7 843.8 804.7H31.3C14 804.7 0 818.7 0 835.9V914.1C0 931.3 14 945.3 31.3 945.3ZM406.3 695.3H843.8C861 695.3 875 681.3 875 664.1V585.9C875 568.7 861 554.7 843.8 554.7H406.3C389 554.7 375 568.7 375 585.9V664.1C375 681.3 389 695.3 406.3 695.3ZM9.2 522.1L196.7 709.6C216.3 729.2 250 715.3 250 687.5V312.5C250 284.5 216.2 270.9 196.7 290.4L9.2 477.9C-3.1 490.1-3.1 509.9 9.2 522.1Z", + "width": 875 + }, + "search": [ + "outdent" + ] + }, + { + "uid": "097d911c1839d50e7183cfb6e7c16934", + "css": "undo-alt", + "code": 59467, + "src": "custom_icons", + "selected": true, + "svg": { + "path": "M499.1 15.6C369.7 15.9 252.2 66.9 165.4 149.8L95.6 80C66.1 50.5 15.6 71.4 15.6 113.2V375C15.6 400.9 36.6 421.9 62.5 421.9H324.3C366.1 421.9 387 371.4 357.5 341.9L275.9 260.3C336.2 203.9 414.2 172.6 497.1 171.9 677.6 170.3 829.7 316.4 828.1 502.8 826.6 679.7 683.2 828.1 500 828.1 419.7 828.1 343.8 799.5 283.9 747 274.7 738.8 260.7 739.3 252 748L174.5 825.5C165 835 165.4 850.5 175.4 859.6 261.3 937.1 375.1 984.4 500 984.4 767.5 984.4 984.4 767.5 984.4 500 984.4 232.8 766.3 15.1 499.1 15.6Z", + "width": 1000 + }, + "search": [ + "undo-alt" + ] + }, + { + "uid": "4bd031cc742bc0605f0d2a6c13eeb789", + "css": "redo-alt", + "code": 59468, + "src": "custom_icons", + "selected": true, + "svg": { + "path": "M500.9 15.6C630.3 15.9 747.8 66.9 834.6 149.8L904.4 80C933.9 50.5 984.4 71.4 984.4 113.2V375C984.4 400.9 963.4 421.9 937.5 421.9H675.7C633.9 421.9 613 371.4 642.5 341.9L724.1 260.3C663.8 203.9 585.8 172.6 502.9 171.9 322.4 170.3 170.3 316.4 171.9 502.8 173.4 679.7 316.8 828.1 500 828.1 580.3 828.1 656.2 799.5 716.1 747 725.3 738.8 739.3 739.3 748 748L825.5 825.5C835 835 834.6 850.5 824.6 859.6 738.7 937.1 624.9 984.4 500 984.4 232.5 984.4 15.6 767.5 15.6 500 15.6 232.8 233.7 15.1 500.9 15.6Z", + "width": 1000 + }, + "search": [ + "redo-alt" + ] + }, + { + "uid": "8a69d07fcdeb0deda9048dffdfeb03d3", + "css": "link", + "code": 59469, + "src": "custom_icons", + "selected": true, + "svg": { + "path": "M637.9 362.1C754.6 478.9 753 666.2 638.6 781.2 638.4 781.4 638.1 781.7 637.9 781.9L506.7 913.2C390.9 1028.9 202.6 1028.9 86.8 913.2-28.9 797.4-28.9 609.1 86.8 493.3L159.3 420.9C178.5 401.7 211.6 414.4 212.6 441.6 213.9 476.2 220.1 511 231.5 544.6 235.4 555.9 232.6 568.5 224.1 577L198.6 602.6C143.8 657.3 142.1 746.4 196.3 801.7 251.1 857.5 341 857.9 396.2 802.7L527.4 671.5C582.5 616.4 582.3 527.4 527.4 472.6 520.2 465.4 512.9 459.8 507.2 455.8A31.3 31.3 0 0 1 493.7 431.2C492.9 410.6 500.2 389.3 516.5 373L557.6 331.9C568.4 321.1 585.3 319.8 597.8 328.5A297.8 297.8 0 0 1 637.9 362.1ZM913.2 86.8C797.4-28.9 609.1-28.9 493.3 86.8L362.1 218.1C361.8 218.3 361.6 218.6 361.4 218.8 247 333.8 245.4 521.1 362.1 637.9A297.8 297.8 0 0 0 402.2 671.5C414.7 680.2 431.6 678.9 442.4 668.1L483.5 627C499.8 610.7 507.1 589.4 506.3 568.8A31.3 31.3 0 0 0 492.8 544.2C487.1 540.2 479.8 534.6 472.6 527.4 417.7 472.6 417.5 383.6 472.6 328.5L603.8 197.3C659 142.1 748.9 142.5 803.7 198.3 857.9 253.6 856.2 342.7 801.4 397.4L775.9 423C767.4 431.5 764.6 444.1 768.5 455.4 779.9 489 786.1 523.8 787.4 558.4 788.4 585.6 821.5 598.3 840.7 579.1L913.2 506.7C1028.9 390.9 1028.9 202.6 913.2 86.8Z", + "width": 1000 + }, + "search": [ + "link" + ] + }, + { + "uid": "195e10d964b70c44cde9513ec217cba4", + "css": "font", + "code": 59470, + "src": "custom_icons", + "selected": true, + "svg": { + "path": "M843.8 812.5H791.6L538.1 83.4C533.8 70.9 521.9 62.5 508.6 62.5H366.4C353.1 62.5 341.2 70.9 336.9 83.4L83.4 812.5H31.3C14.1 812.5 0 826.6 0 843.8V906.3C0 923.4 14.1 937.5 31.3 937.5H296.9C314.1 937.5 328.1 923.4 328.1 906.3V843.8C328.1 826.6 314.1 812.5 296.9 812.5H250L302 654.7H571.9L623.8 812.5H578.1C560.9 812.5 546.9 826.6 546.9 843.8V906.3C546.9 923.4 560.9 937.5 578.1 937.5H843.8C860.9 937.5 875 923.4 875 906.3V843.8C875 826.6 860.9 812.5 843.8 812.5ZM340.6 524L422.7 281.6C431.1 252 435.5 226.6 437.5 214.1 439.1 226.8 443.2 252.1 452.5 281.8L533.2 524Z", + "width": 875 + }, + "search": [ + "font" + ] + }, + { + "uid": "e9352fe9c753373d14694398ce8044fe", + "css": "comment-medical", + "code": 59471, + "src": "custom_icons", + "selected": true, + "svg": { + "path": "M500 62.5C223.9 62.5 0 244.4 0 468.8 0 565.5 41.8 654.3 111.3 724.1 86.8 822.4 5.3 910.2 4.3 911.1A15.6 15.6 0 0 0 15.6 937.5C145 937.5 242.2 875.5 290.2 837.1A595 595 0 0 0 500 875C776.2 875 1000 693.1 1000 468.8S776.2 62.5 500 62.5ZM687.5 515.6A15.6 15.6 0 0 1 671.9 531.3H562.5V640.6A15.6 15.6 0 0 1 546.9 656.3H453.1A15.6 15.6 0 0 1 437.5 640.6V531.3H328.1A15.6 15.6 0 0 1 312.5 515.6V421.9A15.6 15.6 0 0 1 328.1 406.3H437.5V296.9A15.6 15.6 0 0 1 453.1 281.3H546.9A15.6 15.6 0 0 1 562.5 296.9V406.3H671.9A15.6 15.6 0 0 1 687.5 421.9Z", + "width": 1000 + }, + "search": [ + "comment-medical" + ] + }, + { + "uid": "a5c7ef2089dd63c12d3328563fee2330", + "css": "comment", + "code": 59472, + "src": "custom_icons", + "selected": true, + "svg": { + "path": "M500 62.5C223.8 62.5 0 244.3 0 468.8 0 565.6 41.8 654.3 111.3 724 86.9 822.5 5.3 910.2 4.3 911.1 0 915.6-1.2 922.3 1.4 928.1S9.4 937.5 15.6 937.5C145.1 937.5 242.2 875.4 290.2 837.1 354.1 861.1 425 875 500 875 776.2 875 1000 693.2 1000 468.8S776.2 62.5 500 62.5Z", + "width": 1000 + }, + "search": [ + "comment" + ] + }, + { + "uid": "5455d3369b90673f0404f9290f40f074", + "css": "cog", + "code": 59473, + "src": "custom_icons", + "selected": true, + "svg": { + "path": "M952 616.6L868.7 568.6C877.1 523.2 877.1 476.8 868.7 431.4L952 383.4C961.5 377.9 965.8 366.6 962.7 356.1 941 286.5 904.1 223.6 855.9 171.3 848.4 163.3 836.3 161.3 827 166.8L743.8 214.8C708.8 184.8 668.6 161.5 625 146.3V50.4C625 39.5 617.4 29.9 606.6 27.5 535 11.5 461.5 12.3 393.4 27.5 382.6 29.9 375 39.5 375 50.4V146.5C331.6 161.9 291.4 185.2 256.3 215L173.2 167C163.7 161.5 151.8 163.3 144.3 171.5 96.1 223.6 59.2 286.5 37.5 356.2 34.2 366.8 38.7 378.1 48.2 383.6L131.4 431.6C123 477 123 523.4 131.4 568.8L48.2 616.8C38.7 622.3 34.4 633.6 37.5 644.1 59.2 713.7 96.1 776.6 144.3 828.9 151.8 836.9 163.9 838.9 173.2 833.4L256.4 785.4C291.4 815.4 331.6 838.7 375.2 853.9V950C375.2 960.9 382.8 970.5 393.6 972.9 465.2 988.9 538.7 988.1 606.8 972.9 617.6 970.5 625.2 960.9 625.2 950V853.9C668.6 838.5 708.8 815.2 743.9 785.4L827.1 833.4C836.7 838.9 848.6 837.1 856.1 828.9 904.3 776.8 941.2 713.9 962.9 644.1 965.8 633.4 961.5 622.1 952 616.6ZM500 656.3C413.9 656.3 343.8 586.1 343.8 500S413.9 343.8 500 343.8 656.3 413.9 656.3 500 586.1 656.3 500 656.3Z", + "width": 1000 + }, + "search": [ + "cog" + ] + }, + { + "uid": "320da42dd92a9773159f2e4037a1d1db", + "css": "text-height", + "code": 59474, + "src": "custom_icons", + "selected": true, + "svg": { + "path": "M31.3 62.5H593.8C611 62.5 625 76.5 625 93.8V281.3C625 298.5 611 312.5 593.8 312.5H524.4C507.2 312.5 493.2 298.5 493.2 281.3V187.5H386.2V812.5H453.1C470.4 812.5 484.4 826.5 484.4 843.8V906.3C484.4 923.5 470.4 937.5 453.1 937.5H171.9C154.6 937.5 140.6 923.5 140.6 906.3V843.8C140.6 826.5 154.6 812.5 171.9 812.5H238.8V187.5H131.8V281.3C131.8 298.5 117.8 312.5 100.6 312.5H31.3C14 312.5 0 298.5 0 281.3V93.8C0 76.5 14 62.5 31.3 62.5ZM959.6 71.7L1115.8 227.9C1135.4 247.4 1121.7 281.3 1093.7 281.3H1000V718.8H1093.8C1124.3 718.8 1134.1 753.9 1115.8 772.1L959.6 928.3C947.4 940.6 927.6 940.5 915.4 928.3L759.2 772.1C739.6 752.6 753.3 718.8 781.3 718.8H875V281.3H781.3C750.7 281.3 740.9 246.1 759.2 227.9L915.4 71.7C927.6 59.4 947.4 59.5 959.6 71.7Z", + "width": 1125 + }, + "search": [ + "text-height" + ] + }, + { + "uid": "bc0f1614c05e71b1c8beaf95bc900761", + "css": "share-alt", + "code": 59475, + "src": "custom_icons", + "selected": true, + "svg": { + "path": "M687.5 625C643.3 625 602.8 640.3 570.7 665.8L370.6 540.7A188.6 188.6 0 0 0 370.6 459.3L570.7 334.2C602.8 359.7 643.3 375 687.5 375 791.1 375 875 291.1 875 187.5S791.1 0 687.5 0 500 83.9 500 187.5C500 201.5 501.5 215.1 504.4 228.2L304.3 353.3C272.2 327.8 231.7 312.5 187.5 312.5 83.9 312.5 0 396.4 0 500S83.9 687.5 187.5 687.5C231.7 687.5 272.2 672.2 304.3 646.7L504.4 771.8A188.1 188.1 0 0 0 500 812.5C500 916.1 583.9 1000 687.5 1000S875 916.1 875 812.5 791.1 625 687.5 625Z", + "width": 875 + }, + "search": [ + "share-alt" + ] + }, + { + "uid": "ef49eade5ad70fcd1daa78d8d16bd68b", + "css": "code", + "code": 59476, + "src": "custom_icons", + "selected": true, + "svg": { + "path": "M544.7 999L425.6 964.5C413.1 960.9 406.1 947.9 409.6 935.4L676.2 17C679.7 4.5 692.8-2.5 705.3 1L824.4 35.5C836.9 39.1 843.9 52.1 840.4 64.6L573.8 983C570.1 995.5 557.2 1002.7 544.7 999ZM322.1 779.9L407 689.3C416 679.7 415.4 664.5 405.5 655.7L228.5 500 405.5 344.3C415.4 335.5 416.2 320.3 407 310.7L322.1 220.1C313.3 210.7 298.4 210.2 288.9 219.1L7.4 482.8C-2.5 492-2.5 507.8 7.4 517L288.9 780.9C298.4 789.8 313.3 789.5 322.1 779.9ZM961.1 781.1L1242.6 517.2C1252.5 508 1252.5 492.2 1242.6 483L961.1 218.9C951.8 210.2 936.9 210.5 927.9 219.9L843 310.5C834 320.1 834.6 335.4 844.5 344.1L1021.5 500 844.5 655.7C834.6 664.5 833.8 679.7 843 689.3L927.9 779.9C936.7 789.5 951.6 789.8 961.1 781.1Z", + "width": 1250 + }, + "search": [ + "code" + ] + }, + { + "uid": "b3fb5fc84c956ceabfd7ec42ee3fc5dd", + "css": "history", + "code": 59477, + "src": "custom_icons", + "selected": true, + "svg": { + "path": "M984.4 499.1C984.9 766 767.2 984.2 500.4 984.4 385.1 984.5 279.2 944.3 196 877.1 174.4 859.7 172.8 827.2 192.4 807.6L214.4 785.6C231.2 768.8 258.1 766.9 276.7 781.7 338 830.3 415.6 859.4 500 859.4 698.6 859.4 859.4 698.6 859.4 500 859.4 301.4 698.6 140.6 500 140.6 404.7 140.6 318.1 177.7 253.8 238.1L352.9 337.3C372.6 357 358.6 390.6 330.8 390.6H46.9C29.6 390.6 15.6 376.6 15.6 359.4V75.4C15.6 47.6 49.3 33.7 69 53.3L165.4 149.8C252.4 66.7 370.2 15.6 500 15.6 767.2 15.6 983.9 232 984.4 499.1ZM631 653L650.2 628.3C666.1 607.9 662.4 578.4 642 562.5L562.5 500.7V296.9C562.5 271 541.5 250 515.6 250H484.4C458.5 250 437.5 271 437.5 296.9V561.8L565.3 661.2C585.7 677.1 615.1 673.4 631 653Z", + "width": 1000 + }, + "search": [ + "history" + ] + }, + { + "uid": "bed311f2f0699a3e55a635284d86a5c7", + "css": "star", + "code": 59478, + "src": "custom_icons", + "selected": true, + "svg": { + "path": "M506.4 34.8L378.9 293.4 93.6 335C42.4 342.4 21.9 405.5 59 441.6L265.4 642.8 216.6 927C207.8 978.3 261.9 1016.8 307.2 992.8L562.5 858.6 817.8 992.8C863.1 1016.6 917.2 978.3 908.4 927L859.6 642.8 1066 441.6C1103.1 405.5 1082.6 342.4 1031.4 335L746.1 293.4 618.6 34.8C595.7-11.3 529.5-11.9 506.4 34.8Z", + "width": 1125 + }, + "search": [ + "star" + ] + }, + { + "uid": "28feb41c0766d59e9f56b2c4c9cb67a5", + "css": "file-import", + "code": 59479, + "src": "custom_icons", + "selected": true, + "svg": { + "path": "M31.3 562.5C14.1 562.5 0 576.6 0 593.8V656.3C0 673.4 14.1 687.5 31.3 687.5H250V562.5ZM986.3 205.1L795.1 13.7C786.3 4.9 774.4 0 761.9 0H750V250H1000V238.1C1000 225.8 995.1 213.9 986.3 205.1ZM687.5 265.6V0H296.9C270.9 0 250 20.9 250 46.9V562.5H500V435.2C500 407.2 533.8 393.4 553.5 413.1L740.2 601.6C753.1 614.6 753.1 635.5 740.2 648.4L553.3 836.7C533.6 856.4 499.8 842.6 499.8 814.6V687.5H250V953.1C250 979.1 270.9 1000 296.9 1000H953.1C979.1 1000 1000 979.1 1000 953.1V312.5H734.4C708.6 312.5 687.5 291.4 687.5 265.6Z", + "width": 1000 + }, + "search": [ + "file-import" + ] + }, + { + "uid": "a4382bef7f9361b8dacb8ae0b42691a4", + "css": "file-download", + "code": 59480, + "src": "custom_icons", + "selected": true, + "svg": { + "path": "M437.5 265.6V0H46.9C20.9 0 0 20.9 0 46.9V953.1C0 979.1 20.9 1000 46.9 1000H703.1C729.1 1000 750 979.1 750 953.1V312.5H484.4C458.6 312.5 437.5 291.4 437.5 265.6ZM586.8 678.4L398.5 865.4C385.5 878.3 364.5 878.3 351.5 865.4L163.2 678.4C143.4 658.8 157.3 625 185.2 625H312.5V468.8C312.5 451.5 326.5 437.5 343.8 437.5H406.3C423.5 437.5 437.5 451.5 437.5 468.8V625H564.8C592.7 625 606.6 658.8 586.8 678.4ZM736.3 205.1L545.1 13.7C536.3 4.9 524.4 0 511.9 0H500V250H750V238.1C750 225.8 745.1 213.9 736.3 205.1Z", + "width": 750 + }, + "search": [ + "file-download" + ] + }, + { + "uid": "149eec703c4bd1d93f052f3d239cce44", + "css": "file-pdf", + "code": 59481, + "src": "custom_icons", + "selected": true, + "svg": { + "path": "M355.3 500.2C345.5 468.9 345.7 408.6 351.4 408.6 367.8 408.6 366.2 480.7 355.3 500.2ZM352 592.4C336.9 631.8 318.2 677 296.5 714.8 332.2 701.2 372.7 681.3 419.3 672.1 394.5 653.3 370.7 626.4 352 592.4ZM168.2 836.1C168.2 837.7 193.9 825.6 236.3 757.6 223.2 769.9 179.5 805.5 168.2 836.1ZM484.4 312.5H750V953.1C750 979.1 729.1 1000 703.1 1000H46.9C20.9 1000 0 979.1 0 953.1V46.9C0 20.9 20.9 0 46.9 0H437.5V265.6C437.5 291.4 458.6 312.5 484.4 312.5ZM468.8 648C429.7 624.2 403.7 591.4 385.4 543 394.1 506.8 408 452 397.5 417.6 388.3 360.2 314.6 365.8 304.1 404.3 294.3 440 303.3 490.4 319.9 554.7 297.3 608.6 263.9 680.9 240.2 722.3 240 722.3 240 722.5 239.8 722.5 186.9 749.6 96.1 809.4 133.4 855.3 144.3 868.8 164.6 874.8 175.4 874.8 210.4 874.8 245.1 839.6 294.7 754.1 345.1 737.5 400.4 716.8 449 708.8 491.4 731.8 541 746.9 574 746.9 631.1 746.9 635 684.4 612.5 662.1 585.4 635.5 506.4 643.2 468.7 648ZM736.3 205.1L544.9 13.7C536.1 4.9 524.2 0 511.7 0H500V250H750V238.1C750 225.8 745.1 213.9 736.3 205.1ZM591.6 703.7C599.6 698.4 586.7 680.5 508 686.1 580.5 717 591.6 703.7 591.6 703.7Z", + "width": 750 + }, + "search": [ + "file-pdf" + ] + }, + { + "uid": "43c33879f17fb9c62a7466659a1a9347", + "css": "file-word", + "code": 59482, + "src": "custom_icons", + "selected": true, + "svg": { + "path": "M437.5 265.6V0H46.9C20.9 0 0 20.9 0 46.9V953.1C0 979.1 20.9 1000 46.9 1000H703.1C729.1 1000 750 979.1 750 953.1V312.5H484.4C458.6 312.5 437.5 291.4 437.5 265.6ZM549 500H595.7C610.7 500 621.9 513.9 618.6 528.7L544.3 856.8C542 867.6 532.4 875 521.5 875H447.3C436.5 875 427.1 867.6 424.6 857.2 374.2 655.1 384 698.6 374.6 641.4H373.6C371.5 669.3 368.9 675.4 323.6 857.2 321.1 867.6 311.7 875 301 875H228.5C217.6 875 208 867.4 205.7 856.6L131.8 528.5C128.5 513.9 139.6 500 154.7 500H202.5C213.7 500 223.4 507.8 225.6 518.9 256.1 671.3 264.8 732.8 266.6 757.6 269.7 737.7 280.9 693.8 324 518 326.6 507.4 335.9 500.2 346.9 500.2H403.7C414.6 500.2 424 507.6 426.6 518.2 473.4 714.3 482.8 760.4 484.4 770.9 484 749 479.3 736.1 526.6 518.6 528.5 507.6 538.1 500 549 500ZM750 238.1V250H500V0H511.9C524.4 0 536.3 4.9 545.1 13.7L736.3 205.1C745.1 213.9 750 225.8 750 238.1Z", + "width": 750 + }, + "search": [ + "file-word" + ] + }, + { + "uid": "5d3cbbf4f54f53889ff77614613a050d", + "css": "file-alt", + "code": 59483, + "src": "custom_icons", + "selected": true, + "svg": { + "path": "M437.5 265.6V0H46.9C20.9 0 0 20.9 0 46.9V953.1C0 979.1 20.9 1000 46.9 1000H703.1C729.1 1000 750 979.1 750 953.1V312.5H484.4C458.6 312.5 437.5 291.4 437.5 265.6ZM562.5 726.6C562.5 739.5 552 750 539.1 750H210.9C198 750 187.5 739.5 187.5 726.6V710.9C187.5 698 198 687.5 210.9 687.5H539.1C552 687.5 562.5 698 562.5 710.9V726.6ZM562.5 601.6C562.5 614.5 552 625 539.1 625H210.9C198 625 187.5 614.5 187.5 601.6V585.9C187.5 573 198 562.5 210.9 562.5H539.1C552 562.5 562.5 573 562.5 585.9V601.6ZM562.5 460.9V476.6C562.5 489.5 552 500 539.1 500H210.9C198 500 187.5 489.5 187.5 476.6V460.9C187.5 448 198 437.5 210.9 437.5H539.1C552 437.5 562.5 448 562.5 460.9ZM750 238.1V250H500V0H511.9C524.4 0 536.3 4.9 545.1 13.7L736.3 205.1C745.1 213.9 750 225.8 750 238.1Z", + "width": 750 + }, + "search": [ + "file-alt" + ] + }, + { + "uid": "c718261461d9a8046891e6c68d610118", + "css": "file", + "code": 59484, + "src": "custom_icons", + "selected": true, + "svg": { + "path": "M437.5 265.6V0H46.9C20.9 0 0 20.9 0 46.9V953.1C0 979.1 20.9 1000 46.9 1000H703.1C729.1 1000 750 979.1 750 953.1V312.5H484.4C458.6 312.5 437.5 291.4 437.5 265.6ZM750 238.1V250H500V0H511.9C524.4 0 536.3 4.9 545.1 13.7L736.3 205.1C745.1 213.9 750 225.8 750 238.1Z", + "width": 750 + }, + "search": [ + "file" + ] + }, + { + "uid": "9a14f9bdf73d4f035ecb964e16f27b5b", + "css": "users", + "code": 59445, + "src": "custom_icons", + "selected": true, + "svg": { + "path": "M187.5 437.5C256.4 437.5 312.5 381.4 312.5 312.5S256.4 187.5 187.5 187.5 62.5 243.6 62.5 312.5 118.6 437.5 187.5 437.5ZM1062.5 437.5C1131.4 437.5 1187.5 381.4 1187.5 312.5S1131.4 187.5 1062.5 187.5 937.5 243.6 937.5 312.5 993.6 437.5 1062.5 437.5ZM1125 500H1000C965.6 500 934.6 513.9 911.9 536.3 990.6 579.5 1046.5 657.4 1058.6 750H1187.5C1222.1 750 1250 722.1 1250 687.5V625C1250 556.1 1193.9 500 1125 500ZM625 500C745.9 500 843.8 402.1 843.8 281.3S745.9 62.5 625 62.5 406.3 160.4 406.3 281.3 504.1 500 625 500ZM775 562.5H758.8C718.2 582 673 593.8 625 593.8S532 582 491.2 562.5H475C350.8 562.5 250 663.3 250 787.5V843.8C250 895.5 292 937.5 343.8 937.5H906.3C958 937.5 1000 895.5 1000 843.8V787.5C1000 663.3 899.2 562.5 775 562.5ZM338.1 536.3C315.4 513.9 284.4 500 250 500H125C56.1 500 0 556.1 0 625V687.5C0 722.1 27.9 750 62.5 750H191.2C203.5 657.4 259.4 579.5 338.1 536.3Z", + "width": 1250 + }, + "search": [ + "users" + ] + }, + { + "uid": "5ce9d7d62b842d1e0b42ccb50417ed86", + "css": "pencil-alt", + "code": 59400, + "src": "custom_icons", + "selected": true, + "svg": { + "path": "M972.5 277.5L882.4 367.6C873.2 376.8 858.4 376.8 849.2 367.6L632.4 150.8C623.2 141.6 623.2 126.8 632.4 117.6L722.5 27.5C759-9 818.4-9 855.1 27.5L972.5 144.9C1009.2 181.4 1009.2 240.8 972.5 277.5ZM555.1 194.9L42.2 707.8 0.8 945.1C-4.9 977.1 23 1004.9 55.1 999.4L292.4 957.8 805.3 444.9C814.5 435.7 814.5 420.9 805.3 411.7L588.5 194.9C579.1 185.7 564.3 185.7 555.1 194.9ZM242.4 663.9C231.6 653.1 231.6 635.9 242.4 625.2L543.2 324.4C553.9 313.7 571.1 313.7 581.8 324.4S592.6 352.3 581.8 363.1L281.1 663.9C270.3 674.6 253.1 674.6 242.4 663.9ZM171.9 828.1H265.6V899L139.6 921.1 78.9 860.4 101 734.4H171.9V828.1Z", + "width": 1000 + }, + "search": [ + "pencil-alt" + ] + }, + { + "uid": "88a8e61cd1555895e8af136db8b58885", + "css": "times", + "code": 59430, + "src": "custom_icons", + "selected": true, + "svg": { + "path": "M474.1 500L669.5 304.6C693.5 280.6 693.5 241.7 669.5 217.7L626.1 174.2C602.1 150.3 563.2 150.3 539.2 174.2L343.8 369.7 148.3 174.2C124.3 150.3 85.4 150.3 61.4 174.2L18 217.7C-6 241.7-6 280.5 18 304.6L213.4 500 18 695.4C-6 719.4-6 758.3 18 782.3L61.4 825.8C85.4 849.7 124.3 849.7 148.3 825.8L343.8 630.3 539.2 825.8C563.2 849.7 602.1 849.7 626.1 825.8L669.5 782.3C693.5 758.3 693.5 719.5 669.5 695.4L474.1 500Z", + "width": 688 + }, + "search": [ + "times" + ] + }, + { + "uid": "91c50bb767ec3d33047773a7e539799e", + "css": "pause", + "code": 59433, + "src": "custom_icons", + "selected": true, + "svg": { + "path": "M281.3 935.5H93.8C42 935.5 0 893.6 0 841.8V154.3C0 102.5 42 60.5 93.8 60.5H281.3C333 60.5 375 102.5 375 154.3V841.8C375 893.6 333 935.5 281.3 935.5ZM875 841.8V154.3C875 102.5 833 60.5 781.3 60.5H593.8C542 60.5 500 102.5 500 154.3V841.8C500 893.6 542 935.5 593.8 935.5H781.3C833 935.5 875 893.6 875 841.8Z", + "width": 875 + }, + "search": [ + "pause" + ] + }, + { + "uid": "3053a00ac47ec0a6e52490d34a2251eb", + "css": "stop", + "code": 59394, + "src": "custom_icons", + "selected": true, + "svg": { + "path": "M781.3 62.5H93.8C42 62.5 0 104.5 0 156.3V843.8C0 895.5 42 937.5 93.8 937.5H781.3C833 937.5 875 895.5 875 843.8V156.3C875 104.5 833 62.5 781.3 62.5Z", + "width": 875 + }, + "search": [ + "stop" + ] + }, + { + "uid": "91b4828047e0874d4b2cfbb44dc16ff9", + "css": "step-backward", + "code": 59435, + "src": "custom_icons", + "selected": true, + "svg": { + "path": "M125 914.1V85.9C125 73 135.5 62.5 148.4 62.5H242.2C255.1 62.5 265.6 73 265.6 85.9V430.5L647.5 77C687.7 43.6 750 71.5 750 125V875C750 928.5 687.7 956.4 647.5 923L265.6 571.7V914.1C265.6 927 255.1 937.5 242.2 937.5H148.4C135.5 937.5 125 927 125 914.1Z", + "width": 875 + }, + "search": [ + "step-backward" + ] + }, + { + "uid": "9a0d3eec2bb3765a51f82dadf9a10bd1", + "css": "step-forward", + "code": 59436, + "src": "custom_icons", + "selected": true, + "svg": { + "path": "M750 85.9V914.1C750 927 739.5 937.5 726.6 937.5H632.8C619.9 937.5 609.4 927 609.4 914.1V569.5L227.5 923C187.3 956.4 125 928.5 125 875V125C125 71.5 187.3 43.6 227.5 77L609.4 428.3V85.9C609.4 73 619.9 62.5 632.8 62.5H726.6C739.5 62.5 750 73 750 85.9Z", + "width": 875 + }, + "search": [ + "step-forward" + ] + }, + { + "uid": "9f8f8db47c9da55d8ea2e0170476eb39", + "css": "play", + "code": 59395, + "src": "custom_icons", + "selected": true, + "svg": { + "path": "M828.9 419.3L141.4 12.9C85.5-20.1 0 11.9 0 93.6V906.3C0 979.5 79.5 1023.6 141.4 986.9L828.9 580.7C890.2 544.5 890.4 455.5 828.9 419.3Z", + "width": 875 + }, + "search": [ + "play" + ] + }, + { + "uid": "e0e61c06ec2c00a0c7b604fcc20b133c", + "css": "comments", + "code": 59437, + "src": "custom_icons", + "selected": true, + "svg": { + "path": "M812.5 375C812.5 202.3 630.7 62.5 406.3 62.5S0 202.3 0 375C0 442 27.5 503.7 74.2 554.7 48 613.7 4.9 660.5 4.3 661.1 0 665.6-1.2 672.3 1.4 678.1S9.4 687.5 15.6 687.5C87.1 687.5 146.3 663.5 188.9 638.7 251.8 669.3 326.2 687.5 406.3 687.5 630.7 687.5 812.5 547.7 812.5 375ZM1050.8 804.7C1097.5 753.9 1125 692 1125 625 1125 494.3 1020.5 382.4 872.5 335.7 874.2 348.6 875 361.7 875 375 875 581.8 664.6 750 406.3 750 385.2 750 364.6 748.4 344.3 746.3 405.9 858.6 550.4 937.5 718.8 937.5 798.8 937.5 873.2 919.5 936.1 888.7 978.7 913.5 1037.9 937.5 1109.4 937.5 1115.6 937.5 1121.3 933.8 1123.6 928.1 1126.2 922.5 1125 915.8 1120.7 911.1 1120.1 910.5 1077 863.9 1050.8 804.7Z", + "width": 1125 + }, + "search": [ + "comments" + ] + }, + { + "uid": "7c8b7bccd2548457f00645f3954e2863", + "css": "heading", + "code": 59438, + "src": "custom_icons", + "selected": true, + "svg": { + "path": "M968.8 156.3V93.8C968.8 76.5 954.8 62.5 937.5 62.5H625C607.7 62.5 593.8 76.5 593.8 93.8V156.3C593.8 173.5 607.7 187.5 625 187.5H698.5V437.5H301.5V187.5H375C392.3 187.5 406.3 173.5 406.3 156.3V93.8C406.3 76.5 392.3 62.5 375 62.5H62.5C45.2 62.5 31.3 76.5 31.3 93.8V156.3C31.3 173.5 45.2 187.5 62.5 187.5H135.3V812.5H62.5C45.2 812.5 31.3 826.5 31.3 843.8V906.3C31.3 923.5 45.2 937.5 62.5 937.5H375C392.3 937.5 406.3 923.5 406.3 906.3V843.8C406.3 826.5 392.3 812.5 375 812.5H301.5V562.5H698.5V812.5H625C607.7 812.5 593.8 826.5 593.8 843.8V906.3C593.8 923.5 607.7 937.5 625 937.5H937.5C954.8 937.5 968.8 923.5 968.8 906.3V843.8C968.8 826.5 954.8 812.5 937.5 812.5H864.7V187.5H937.5C954.8 187.5 968.8 173.5 968.8 156.3Z", + "width": 1000 + }, + "search": [ + "heading" + ] + }, + { + "uid": "c7ead3a5bb66fddf32a7899a0f3fbb6c", + "css": "align-center", + "code": 59396, + "src": "custom_icons", + "selected": true, + "svg": { + "path": "M687.5 85.9V164.1C687.5 181.3 673.5 195.3 656.3 195.3H218.8C201.5 195.3 187.5 181.3 187.5 164.1V85.9C187.5 68.7 201.5 54.7 218.8 54.7H656.3C673.5 54.7 687.5 68.7 687.5 85.9ZM31.3 445.3H843.8C861 445.3 875 431.3 875 414.1V335.9C875 318.7 861 304.7 843.8 304.7H31.3C14 304.7 0 318.7 0 335.9V414.1C0 431.3 14 445.3 31.3 445.3ZM31.3 945.3H843.8C861 945.3 875 931.3 875 914.1V835.9C875 818.7 861 804.7 843.8 804.7H31.3C14 804.7 0 818.7 0 835.9V914.1C0 931.3 14 945.3 31.3 945.3ZM656.3 554.7H218.8C201.5 554.7 187.5 568.7 187.5 585.9V664.1C187.5 681.3 201.5 695.3 218.8 695.3H656.3C673.5 695.3 687.5 681.3 687.5 664.1V585.9C687.5 568.7 673.5 554.7 656.3 554.7Z", + "width": 875 + }, + "search": [ + "align-center" + ] + }, + { + "uid": "e8e401b7ba1649fce89eb32cc85cb50d", + "css": "align-justify", + "code": 59397, + "src": "custom_icons", + "selected": true, + "svg": { + "path": "M0 164.1V85.9C0 68.7 14 54.7 31.3 54.7H843.8C861 54.7 875 68.7 875 85.9V164.1C875 181.3 861 195.3 843.8 195.3H31.3C14 195.3 0 181.3 0 164.1ZM31.3 445.3H843.8C861 445.3 875 431.3 875 414.1V335.9C875 318.7 861 304.7 843.8 304.7H31.3C14 304.7 0 318.7 0 335.9V414.1C0 431.3 14 445.3 31.3 445.3ZM31.3 945.3H843.8C861 945.3 875 931.3 875 914.1V835.9C875 818.7 861 804.7 843.8 804.7H31.3C14 804.7 0 818.7 0 835.9V914.1C0 931.3 14 945.3 31.3 945.3ZM31.3 695.3H843.8C861 695.3 875 681.3 875 664.1V585.9C875 568.7 861 554.7 843.8 554.7H31.3C14 554.7 0 568.7 0 585.9V664.1C0 681.3 14 695.3 31.3 695.3Z", + "width": 875 + }, + "search": [ + "align-justify" + ] + }, + { + "uid": "eb15f17c97d08c4151e60b4b2f630fb5", + "css": "align-left", + "code": 59398, + "src": "custom_icons", + "selected": true, + "svg": { + "path": "M562.5 85.9V164.1C562.5 181.3 548.5 195.3 531.3 195.3H31.3C14 195.3 0 181.3 0 164.1V85.9C0 68.7 14 54.7 31.3 54.7H531.3C548.5 54.7 562.5 68.7 562.5 85.9ZM0 335.9V414.1C0 431.3 14 445.3 31.3 445.3H843.8C861 445.3 875 431.3 875 414.1V335.9C875 318.7 861 304.7 843.8 304.7H31.3C14 304.7 0 318.7 0 335.9ZM31.3 945.3H843.8C861 945.3 875 931.3 875 914.1V835.9C875 818.7 861 804.7 843.8 804.7H31.3C14 804.7 0 818.7 0 835.9V914.1C0 931.3 14 945.3 31.3 945.3ZM531.3 554.7H31.3C14 554.7 0 568.7 0 585.9V664.1C0 681.3 14 695.3 31.3 695.3H531.3C548.5 695.3 562.5 681.3 562.5 664.1V585.9C562.5 568.7 548.5 554.7 531.3 554.7Z", + "width": 875 + }, + "search": [ + "align-left" + ] + }, + { + "uid": "48f22afc96cf17626d8da876b9b463dc", + "css": "align-right", + "code": 59399, + "src": "custom_icons", + "selected": true, + "svg": { + "path": "M312.5 164.1V85.9C312.5 68.7 326.5 54.7 343.8 54.7H843.8C861 54.7 875 68.7 875 85.9V164.1C875 181.3 861 195.3 843.8 195.3H343.8C326.5 195.3 312.5 181.3 312.5 164.1ZM31.3 445.3H843.8C861 445.3 875 431.3 875 414.1V335.9C875 318.7 861 304.7 843.8 304.7H31.3C14 304.7 0 318.7 0 335.9V414.1C0 431.3 14 445.3 31.3 445.3ZM31.3 945.3H843.8C861 945.3 875 931.3 875 914.1V835.9C875 818.7 861 804.7 843.8 804.7H31.3C14 804.7 0 818.7 0 835.9V914.1C0 931.3 14 945.3 31.3 945.3ZM343.8 695.3H843.8C861 695.3 875 681.3 875 664.1V585.9C875 568.7 861 554.7 843.8 554.7H343.8C326.5 554.7 312.5 568.7 312.5 585.9V664.1C312.5 681.3 326.5 695.3 343.8 695.3Z", + "width": 875 + }, + "search": [ + "align-right" + ] + }, + { + "uid": "b2d03fd882d7c96479a3c6c1dbc1a889", + "css": "file-powerpoint", + "code": 59485, + "src": "custom_icons", + "selected": true, + "svg": { + "path": "M378.3 529.7C395.5 529.7 408.6 535 418 545.5 436.7 566.8 437.1 609.4 417.6 631.6 408 642.6 394.3 648.2 376.4 648.2H323.8V529.7H378.3ZM736.3 205.1L544.9 13.7C536.1 4.9 524.2 0 511.7 0H500V250H750V238.1C750 225.8 745.1 213.9 736.3 205.1ZM437.5 265.6V0H46.9C20.9 0 0 20.9 0 46.9V953.1C0 979.1 20.9 1000 46.9 1000H703.1C729.1 1000 750 979.1 750 953.1V312.5H484.4C458.6 312.5 437.5 291.4 437.5 265.6ZM541 588.3C541 764.6 367.6 739.8 324 739.8V851.6C324 864.5 313.5 875 300.6 875H240.4C227.5 875 217 864.5 217 851.6V461.3C217 448.4 227.5 437.9 240.4 437.9H398.6C485.5 437.9 541 502 541 588.3Z", + "width": 750 + }, + "search": [ + "file-powerpoint" + ] + }, + { + "uid": "c59ea6604f4c8a3bebd9cb24630f0e3b", + "css": "superscript", + "code": 59443, + "src": "custom_icons", + "selected": true, + "svg": { + "path": "M531.3 375H398.8C388.1 375 377.9 380.7 372.3 389.8L293.6 516.8C289.1 523.8 284.8 531.1 281.4 537.3 278.1 531.1 274.2 524 270.3 517L192.4 389.8C186.7 380.7 176.6 375 165.8 375H31.3C14.1 375 0 389.1 0 406.3V468.8C0 485.9 14.1 500 31.3 500H90L193.2 651 82.6 812.5H31.3C14.1 812.5 0 826.6 0 843.8V906.3C0 923.4 14.1 937.5 31.3 937.5H156.3C167 937.5 177.1 931.8 182.8 922.7L270.1 781.8C274.4 774.8 278.3 767.6 281.6 761.1 285.2 767.4 289.3 774.6 293.8 781.1L383 922.9C388.7 932 398.6 937.5 409.4 937.5H531.3C548.4 937.5 562.5 923.4 562.5 906.2V843.7C562.5 826.6 548.4 812.5 531.3 812.5H488.3L373.8 647.9 476.6 500H531.3C548.4 500 562.5 485.9 562.5 468.8V406.3C562.5 389.1 548.4 375 531.3 375ZM968.8 500H771.9C778.7 479.5 808.6 458.4 842.8 436.7 875.2 416 912.1 392.6 941 360.7 975.2 323.4 991.6 282.2 991.6 234.6 991.6 116.2 892.6 62.5 800.6 62.5 717.6 62.5 651.4 105.5 616.2 160.9 607 175.2 611.1 194.1 625.2 203.7L684.4 243.4C698 252.5 716.6 249.4 726.6 236.3 742.2 216 763.3 200.8 788.5 200.8 826.4 200.8 839.8 226 839.8 247.5 839.8 318.2 606.6 358.8 606.6 560 606.6 573 607.8 585.4 609.4 597.7 611.5 613.3 624.6 624.8 640.4 624.8H968.8C985.9 624.8 1000 610.7 1000 593.6V531.1C1000 514.1 985.9 500 968.8 500Z", + "width": 1000 + }, + "search": [ + "superscript" + ] + }, + { + "uid": "cb9e27f4e2c9fe6182e2351f9ad71c14", + "css": "subscript", + "code": 59444, + "src": "custom_icons", + "selected": true, + "svg": { + "path": "M531.3 62.5H398.8C388.1 62.5 377.9 68.2 372.3 77.3L293.6 204.3C289.1 211.3 284.8 218.6 281.4 224.8 278.1 218.6 274.2 211.5 270.3 204.5L192.4 77.3C186.7 68.2 176.6 62.5 165.8 62.5H31.3C14.1 62.5 0 76.6 0 93.8V156.3C0 173.4 14.1 187.5 31.3 187.5H90L193.2 338.5 82.6 500H31.3C14.1 500 0 514.1 0 531.3V593.8C0 610.9 14.1 625 31.3 625H156.3C167 625 177.1 619.3 182.8 610.2L270.1 469.3C274.4 462.3 278.3 455.1 281.6 448.6 285.2 454.9 289.3 462.1 293.8 468.6L383 610.4C388.7 619.5 398.6 625 409.4 625H531.3C548.4 625 562.5 610.9 562.5 593.8V531.3C562.5 514.1 548.4 500 531.3 500H488.3L373.8 335.4 476.6 187.5H531.3C548.4 187.5 562.5 173.4 562.5 156.3V93.8C562.5 76.6 548.4 62.5 531.3 62.5ZM968.8 812.5H771.9C778.7 792 808.6 770.9 842.8 749.2 875.2 728.5 912.1 705.1 941 673.2 975.2 635.9 991.6 594.7 991.6 547.1 991.6 428.7 892.6 375 800.6 375 717.6 375 651.4 418 616.2 473.4 607 487.7 611.1 506.6 625.2 516.2L684.4 555.9C698 565 716.6 561.9 726.6 548.8 742.2 528.5 763.3 513.3 788.5 513.3 826.4 513.3 839.8 538.5 839.8 560 839.8 630.7 606.6 671.3 606.6 872.5 606.6 885.5 607.8 897.9 609.4 910.2 611.5 925.8 624.6 937.3 640.4 937.3H968.8C985.9 937.3 1000 923.2 1000 906.1V843.6C1000 826.6 985.9 812.5 968.8 812.5Z", + "width": 1000 + }, + "search": [ + "subscript" + ] + }, + { + "uid": "2f9853bb94503f2e5149dddae69657f6", + "css": "gauge", + "code": 59446, + "src": "custom_icons", + "selected": true, + "svg": { + "path": "M562.5 62.5C251.8 62.5 0 314.3 0 625 0 728.1 27.8 824.7 76.3 907.8 87.2 926.6 108.1 937.5 129.9 937.5H995.1C1016.9 937.5 1037.8 926.6 1048.7 907.8 1097.2 824.7 1125 728.1 1125 625 1125 314.3 873.2 62.5 562.5 62.5ZM562.5 187.5C591.2 187.5 614.4 207.3 621.7 233.7 619.6 238.1 616.6 242 615 246.7L597 300.8C587 307.6 575.5 312.5 562.5 312.5 528 312.5 500 284.5 500 250S528 187.5 562.5 187.5ZM187.5 750C153 750 125 722 125 687.5S153 625 187.5 625 250 653 250 687.5 222 750 187.5 750ZM281.3 437.5C246.7 437.5 218.8 409.5 218.8 375S246.7 312.5 281.3 312.5 343.8 340.5 343.8 375 315.8 437.5 281.3 437.5ZM763.2 296.1L643.4 655.4C670.2 678.4 687.5 712 687.5 750 687.5 772.9 680.9 794 670.2 812.5H454.8C444.1 794 437.5 772.9 437.5 750 437.5 683.7 489.3 630 554.5 625.8L674.3 266.4C682.4 241.9 708.9 228.4 733.6 236.8 758.1 245 771.4 271.5 763.2 296.1ZM791.9 407.8L822.2 316.9C828.9 314.4 836.1 312.5 843.8 312.5 878.3 312.5 906.3 340.5 906.3 375S878.3 437.5 843.8 437.5C821.5 437.5 802.9 425.3 791.9 407.8ZM937.5 750C903 750 875 722 875 687.5S903 625 937.5 625 1000 653 1000 687.5 972 750 937.5 750Z", + "width": 1125 + }, + "search": [ + "tachometer-alt" + ] + }, + { + "uid": "9f61e6a7ba9b929596aba1e946386ca1", + "css": "exchange-alt", + "code": 59447, + "src": "custom_icons", + "selected": true, + "svg": { + "path": "M0 328.1V296.9C0 271 21 250 46.9 250H750V156.3C750 114.5 800.6 93.7 830 123.1L986.3 279.4C1004.6 297.7 1004.6 327.3 986.3 345.6L830 501.9C800.7 531.2 750 510.7 750 468.8V375H46.9C21 375 0 354 0 328.1ZM953.1 625H250V531.3C250 489.6 199.5 468.6 170 498.1L13.7 654.4C-4.6 672.7-4.6 702.3 13.7 720.6L170 876.9C199.3 906.2 250 885.6 250 843.8V750H953.1C979 750 1000 729 1000 703.1V671.9C1000 646 979 625 953.1 625Z", + "width": 1000 + }, + "search": [ + "exchange-alt" + ] + }, + { + "uid": "762c1dbaf1d25d6f7365934483e90285", + "css": "text-width", + "code": 59448, + "src": "custom_icons", + "selected": true, + "svg": { + "path": "M31.3 62.5H843.8C861 62.5 875 76.5 875 93.8V281.3C875 298.5 861 312.5 843.8 312.5H774.4C757.2 312.5 743.2 298.5 743.2 281.3V187.5H511.2V437.5H578.1C595.4 437.5 609.4 451.5 609.4 468.8V531.3C609.4 548.5 595.4 562.5 578.1 562.5H296.9C279.6 562.5 265.6 548.5 265.6 531.3V468.8C265.6 451.5 279.6 437.5 296.9 437.5H363.8V187.5H131.8V281.3C131.8 298.5 117.8 312.5 100.6 312.5H31.3C14 312.5 0 298.5 0 281.3V93.8C0 76.5 14 62.5 31.3 62.5ZM865.8 727.9L709.6 571.7C691.4 553.4 656.3 563.2 656.3 593.8V687.5H218.8V593.8C218.8 565.8 184.9 552.1 165.4 571.7L9.2 727.9C-3 740.1-3.1 759.9 9.2 772.1L165.4 928.3C183.6 946.6 218.8 936.8 218.8 906.3V812.5H656.3V906.2C656.3 934.2 690.1 947.9 709.6 928.3L865.8 772.1C878 759.9 878.1 740.1 865.8 727.9Z", + "width": 875 + }, + "search": [ + "text-width" + ] + }, + { + "uid": "db94b783531717f104b39b398db3d0f2", + "css": "sync-alt", + "code": 59392, + "src": "custom_icons", + "selected": true, + "svg": { + "path": "M724.1 260.3C663 203.1 583.8 171.8 499.7 171.9 348.4 172 217.8 275.7 181.8 419.6 179.1 430.1 169.8 437.5 159 437.5H47.1C32.4 437.5 21.3 424.2 24 409.8 66.3 185.4 263.3 15.6 500 15.6 629.8 15.6 747.6 66.7 834.6 149.8L904.4 80C933.9 50.5 984.4 71.4 984.4 113.2V375C984.4 400.9 963.4 421.9 937.5 421.9H675.7C633.9 421.9 613 371.4 642.5 341.9L724.1 260.3ZM62.5 578.1H324.3C366.1 578.1 387 628.6 357.5 658.1L275.9 739.7C337 796.9 416.2 828.2 500.3 828.1 651.5 828 782.2 724.3 818.2 580.4 820.9 569.9 830.2 562.5 841 562.5H952.9C967.6 562.5 978.7 575.8 976 590.2 933.7 814.6 736.7 984.4 500 984.4 370.2 984.4 252.4 933.3 165.4 850.2L95.6 920C66.1 949.5 15.6 928.6 15.6 886.8V625C15.6 599.1 36.6 578.1 62.5 578.1Z", + "width": 1000 + }, + "search": [ + "sync-alt" + ] + }, + { + "uid": "f0ec8e32814f630fb6234b84cb5d4672", + "css": "picture", + "code": 59450, + "src": "custom_icons", + "selected": true, + "svg": { + "path": "M906.3 875H93.8C42 875 0 833 0 781.3V218.8C0 167 42 125 93.8 125H906.3C958 125 1000 167 1000 218.8V781.3C1000 833 958 875 906.3 875ZM218.8 234.4C158.3 234.4 109.4 283.3 109.4 343.8S158.3 453.1 218.8 453.1 328.1 404.2 328.1 343.8 279.2 234.4 218.8 234.4ZM125 750H875V531.3L704.1 360.3C694.9 351.2 680.1 351.2 670.9 360.3L406.3 625 297.8 516.6C288.7 507.4 273.8 507.4 264.7 516.6L125 656.3V750Z", + "width": 1000 + }, + "search": [ + "image" + ] + }, + { + "uid": "5c54164453ce690dddffa89377692bff", + "css": "file-code", + "code": 59401, + "src": "custom_icons", + "selected": true, + "svg": { + "path": "M750 238.2V250H500V0H511.8C524.3 0 536.2 4.9 545 13.7L736.3 205A46.9 46.9 0 0 1 750 238.2ZM484.4 312.5C458.6 312.5 437.5 291.4 437.5 265.6V0H46.9C21 0 0 21 0 46.9V953.1C0 979 21 1000 46.9 1000H703.1C729 1000 750 979 750 953.1V312.5H484.4ZM240.6 782.2A10.5 10.5 0 0 1 225.7 782.7L99 663.9A10.5 10.5 0 0 1 99 648.6L225.7 529.8A10.5 10.5 0 0 1 240.6 530.3L278.9 571.1A10.5 10.5 0 0 1 278.2 586.2L198.5 656.3 278.2 726.3A10.5 10.5 0 0 1 278.9 741.4L240.6 782.2ZM340.8 880.8L287.2 865.3A10.6 10.6 0 0 1 280 852.2L400 438.9A10.6 10.6 0 0 1 413.1 431.7L466.7 447.2A10.5 10.5 0 0 1 473.9 460.3L353.9 873.6A10.5 10.5 0 0 1 340.8 880.8ZM654.9 663.9L528.2 782.7A10.5 10.5 0 0 1 513.3 782.2L475 741.4A10.5 10.5 0 0 1 475.8 726.3L555.4 656.3 475.8 586.2A10.5 10.5 0 0 1 475 571.1L513.3 530.3A10.5 10.5 0 0 1 528.2 529.8L654.9 648.6A10.5 10.5 0 0 1 654.9 663.9Z", + "width": 750 + }, + "search": [ + "file-code" + ] } ] } \ No newline at end of file diff --git a/src/static/font/fontawesome-etherpad.eot b/src/static/font/fontawesome-etherpad.eot index 35a002de22b..abb48615f2c 100644 Binary files a/src/static/font/fontawesome-etherpad.eot and b/src/static/font/fontawesome-etherpad.eot differ diff --git a/src/static/font/fontawesome-etherpad.svg b/src/static/font/fontawesome-etherpad.svg index b69d0d974a2..fcc8fd360cf 100644 --- a/src/static/font/fontawesome-etherpad.svg +++ b/src/static/font/fontawesome-etherpad.svg @@ -1,128 +1,138 @@ -Copyright (C) 2018 by original authors @ fontello.com +Copyright (C) 2020 by original authors @ fontello.com - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + + + + + + + + + + + - + diff --git a/src/static/font/fontawesome-etherpad.ttf b/src/static/font/fontawesome-etherpad.ttf index 280a3d46018..683d0e11082 100644 Binary files a/src/static/font/fontawesome-etherpad.ttf and b/src/static/font/fontawesome-etherpad.ttf differ diff --git a/src/static/font/fontawesome-etherpad.woff b/src/static/font/fontawesome-etherpad.woff index c66051390e6..59373c06ce9 100644 Binary files a/src/static/font/fontawesome-etherpad.woff and b/src/static/font/fontawesome-etherpad.woff differ diff --git a/src/static/font/fontawesome-etherpad.woff2 b/src/static/font/fontawesome-etherpad.woff2 new file mode 100644 index 00000000000..0fd40b4647d Binary files /dev/null and b/src/static/font/fontawesome-etherpad.woff2 differ diff --git a/src/static/js/ace.js b/src/static/js/ace.js index 0b9862070e3..d06d902a6ba 100644 --- a/src/static/js/ace.js +++ b/src/static/js/ace.js @@ -225,7 +225,7 @@ function Ace2Editor() var iframeHTML = []; iframeHTML.push(doctype); - iframeHTML.push(""); + iframeHTML.push(""); // calls to these functions ($$INCLUDE_...) are replaced when this file is processed // and compressed, putting the compressed code from the named file directly into the @@ -316,7 +316,7 @@ window.onload = function () {\n\ }, 0);\n\ }'; - var outerHTML = [doctype, ''] + var outerHTML = [doctype, ''] var includedCSS = []; var $$INCLUDE_CSS = function(filename) {includedCSS.push(filename)}; diff --git a/src/static/js/ace2_inner.js b/src/static/js/ace2_inner.js index 2bd93fcf7b6..be73769786c 100644 --- a/src/static/js/ace2_inner.js +++ b/src/static/js/ace2_inner.js @@ -69,12 +69,6 @@ function Ace2Inner(){ var THE_TAB = ' '; //4 var MAX_LIST_LEVEL = 16; - var LINE_NUMBER_PADDING_RIGHT = 4; - var LINE_NUMBER_PADDING_LEFT = 4; - var MIN_LINEDIV_WIDTH = 20; - var EDIT_BODY_PADDING_TOP = 8; - var EDIT_BODY_PADDING_LEFT = 8; - var FORMATTING_STYLES = ['bold', 'italic', 'underline', 'strikethrough']; var SELECT_BUTTON_CLASS = 'selected'; @@ -127,12 +121,6 @@ function Ace2Inner(){ var hasLineNumbers = true; var isStyled = true; - // space around the innermost iframe element - var iframePadLeft = MIN_LINEDIV_WIDTH + LINE_NUMBER_PADDING_RIGHT + EDIT_BODY_PADDING_LEFT; - var iframePadTop = EDIT_BODY_PADDING_TOP; - var iframePadBottom = 0, - iframePadRight = 0; - var console = (DEBUG && window.console); var documentAttributeManager; @@ -267,15 +255,9 @@ function Ace2Inner(){ authorStyle.backgroundColor = bgcolor; parentAuthorStyle.backgroundColor = bgcolor; - // text contrast - if(colorutils.luminosity(colorutils.css2triple(bgcolor)) < 0.5) - { - authorStyle.color = '#ffffff'; - parentAuthorStyle.color = '#ffffff'; - }else{ - authorStyle.color = null; - parentAuthorStyle.color = null; - } + var textColor = colorutils.textColorFromBackgroundColor(bgcolor, parent.parent.clientVars.skinName); + authorStyle.color = textColor; + parentAuthorStyle.color = textColor; // anchor text contrast if(colorutils.luminosity(colorutils.css2triple(bgcolor)) < 0.55) @@ -3672,17 +3654,6 @@ function Ace2Inner(){ var lineHeight = myselection.focusNode.offsetHeight; // line height of blank lines } - var heightOfChatIcon = parent.parent.$('#chaticon').height(); // height of the chat icon button - lineHeight = (lineHeight *2) + heightOfChatIcon; - var viewport = getViewPortTopBottom(); - var viewportHeight = viewport.bottom - viewport.top - lineHeight; - var relCaretOffsetTop = caretOffsetTop - viewport.top; // relative Caret Offset Top to viewport - if (viewportHeight < relCaretOffsetTop){ - parent.parent.$("#chaticon").css("opacity",".3"); // make chaticon opacity low when user types near it - }else{ - parent.parent.$("#chaticon").css("opacity","1"); // make chaticon opacity back to full (so fully visible) - } - //dmesg("keyevent type: "+type+", which: "+which); // Don't take action based on modifier keys going up and down. // Modifier keys do not generate "keypress" events. @@ -4766,70 +4737,7 @@ function Ace2Inner(){ return; } - function setIfNecessary(obj, prop, value) - { - if (obj[prop] != value) - { - obj[prop] = value; - } - } - - var lineNumberWidth = sideDiv.firstChild.offsetWidth; - var newSideDivWidth = lineNumberWidth + LINE_NUMBER_PADDING_LEFT; - if (newSideDivWidth < MIN_LINEDIV_WIDTH) newSideDivWidth = MIN_LINEDIV_WIDTH; - iframePadLeft = EDIT_BODY_PADDING_LEFT; - if (hasLineNumbers) iframePadLeft += newSideDivWidth + LINE_NUMBER_PADDING_RIGHT; - setIfNecessary(iframe.style, "left", iframePadLeft + "px"); - setIfNecessary(sideDiv.style, "width", newSideDivWidth + "px"); - - for (var i = 0; i < 2; i++) - { - var newHeight = root.clientHeight; - var newWidth = (browser.msie ? root.createTextRange().boundingWidth : root.clientWidth); - var viewHeight = getInnerHeight() - iframePadBottom - iframePadTop; - var viewWidth = getInnerWidth() - iframePadLeft - iframePadRight; - if (newHeight < viewHeight) - { - newHeight = viewHeight; - if (browser.msie) setIfNecessary(outerWin.document.documentElement.style, 'overflowY', 'auto'); - } - else - { - if (browser.msie) setIfNecessary(outerWin.document.documentElement.style, 'overflowY', 'scroll'); - } - if (doesWrap) - { - newWidth = viewWidth; - } - else - { - if (newWidth < viewWidth) newWidth = viewWidth; - } - setIfNecessary(iframe.style, "height", newHeight + "px"); - setIfNecessary(iframe.style, "width", newWidth + "px"); - setIfNecessary(sideDiv.style, "height", newHeight + "px"); - } - if (browser.firefox) - { - if (!doesWrap) - { - // the body:display:table-cell hack makes mozilla do scrolling - // correctly by shrinking the to fit around its content, - // but mozilla won't act on clicks below the body. We keep the - // style.height property set to the viewport height (editor height - // not including scrollbar), so it will never shrink so that part of - // the editor isn't clickable. - var body = root; - var styleHeight = viewHeight + "px"; - setIfNecessary(body.style, "height", styleHeight); - } - else - { - setIfNecessary(root.style, "height", ""); - } - } var win = outerWin; - var r = 20; enforceEditability(); @@ -5160,7 +5068,6 @@ function Ace2Inner(){ { var win = outerWin; var odoc = outerWin.document; - pixelX += iframePadLeft; var distInsideLeft = pixelX - win.scrollX; var distInsideRight = win.scrollX + getInnerWidth() - pixelX; if (distInsideLeft < 0) @@ -5358,7 +5265,7 @@ function Ace2Inner(){ function initLineNumbers() { lineNumbersShown = 1; - sideDiv.innerHTML = '
1
'; + sideDiv.innerHTML = '
1
'; sideDivInner = outerWin.document.getElementById("sidedivinner"); $(sideDiv).addClass("sidediv"); } diff --git a/src/static/js/broadcast.js b/src/static/js/broadcast.js index 60273f2d07d..380f69d6c39 100644 --- a/src/static/js/broadcast.js +++ b/src/static/js/broadcast.js @@ -125,7 +125,7 @@ function loadBroadcastJS(socket, sendSocketMsg, fireWhenAllScriptsAreLoaded, Bro } else { - $("#padcontent").prepend(newDivs[i]); + $("#innerdocbody").prepend(newDivs[i]); } startDiv = newDivs[i]; } @@ -548,12 +548,12 @@ function loadBroadcastJS(socket, sendSocketMsg, fireWhenAllScriptsAreLoaded, Bro { // set up the currentDivs and DOM padContents.currentDivs = []; - $("#padcontent").html(""); + $("#innerdocbody").html(""); for (var i = 0; i < padContents.currentLines.length; i++) { var div = padContents.lineToElement(padContents.currentLines[i], padContents.alines[i]); padContents.currentDivs.push(div); - $("#padcontent").append(div); + $("#innerdocbody").append(div); } debugLog(padContents.currentDivs); }); diff --git a/src/static/js/broadcast_slider.js b/src/static/js/broadcast_slider.js index 1893994efe6..5f4325bbc33 100644 --- a/src/static/js/broadcast_slider.js +++ b/src/static/js/broadcast_slider.js @@ -41,16 +41,6 @@ function loadBroadcastSliderJS(fireWhenAllScriptsAreLoaded) var savedRevisions = []; var sliderPlaying = false; - function disableSelection(element) - { - element.onselectstart = function() - { - return false; - }; - element.unselectable = "on"; - element.style.MozUserSelect = "none"; - element.style.cursor = "default"; - } var _callSliderCallbacks = function(newval) { sliderPos = newval; @@ -76,9 +66,8 @@ function loadBroadcastSliderJS(fireWhenAllScriptsAreLoaded) newSavedRevision.addClass("star"); newSavedRevision.attr('pos', position); - newSavedRevision.css('position', 'absolute'); newSavedRevision.css('left', (position * ($("#ui-slider-bar").width() - 2) / (sliderLength * 1.0)) - 1); - $("#timeslider-slider").append(newSavedRevision); + $("#ui-slider-bar").append(newSavedRevision); newSavedRevision.mouseup(function(evt) { BroadcastSlider.setSliderPosition(position); @@ -122,27 +111,8 @@ function loadBroadcastSliderJS(fireWhenAllScriptsAreLoaded) $("#revision_label").html(html10n.get("timeslider.version", { "version": newpos})); - if (newpos == 0) - { - $("#leftstar").css('opacity', .5); - $("#leftstep").css('opacity', .5); - } - else - { - $("#leftstar").css('opacity', 1); - $("#leftstep").css('opacity', 1); - } - - if (newpos == sliderLength) - { - $("#rightstar").css('opacity', .5); - $("#rightstep").css('opacity', .5); - } - else - { - $("#rightstar").css('opacity', 1); - $("#rightstep").css('opacity', 1); - } + $("#leftstar, #leftstep").toggleClass('disabled', newpos == 0); + $("#rightstar, #rightstep").toggleClass('disabled', newpos == sliderLength); sliderPos = newpos; _callSliderCallbacks(newpos); @@ -166,12 +136,6 @@ function loadBroadcastSliderJS(fireWhenAllScriptsAreLoaded) padmodals.showModal("disconnected"); } - // Throttle seems like overkill here... Not sure why we do it! - var fixPadHeight = _.throttle(function(){ - var height = $('#timeslider-top').height(); - $('#editorcontainerbox').css({marginTop: height}); - }, 600); - function setAuthors(authors) { var authorsList = $("#authorsList"); @@ -230,8 +194,6 @@ function loadBroadcastSliderJS(fireWhenAllScriptsAreLoaded) { authorsList.append(html10n.get("timeslider.toolbar.authorsList")); } - - fixPadHeight(); } BroadcastSlider = { @@ -283,66 +245,42 @@ function loadBroadcastSliderJS(fireWhenAllScriptsAreLoaded) } // assign event handlers to html UI elements after page load - //$(window).load(function () fireWhenAllScriptsAreLoaded.push(function() { - disableSelection($("#playpause_button")[0]); - disableSelection($("#timeslider")[0]); - $(document).keyup(function(e) { - // If focus is on editbar, don't do anything - var target = $(':focus'); - if($(target).parents(".toolbar").length === 1){ - return; - } - var code = -1; if (!e) var e = window.event; - if (e.keyCode) code = e.keyCode; - else if (e.which) code = e.which; + var code = e.keyCode || e.which; if (code == 37) { // left - if (!e.shiftKey) - { - setSliderPosition(getSliderPosition() - 1); - } - else - { - var nextStar = 0; // default to first revision in document - for (var i = 0; i < savedRevisions.length; i++) - { - var pos = parseInt(savedRevisions[i].attr('pos')); - if (pos < getSliderPosition() && nextStar < pos) nextStar = pos; - } - setSliderPosition(nextStar); + if (e.shiftKey) { + $('#leftstar').click(); + } else { + $('#leftstep').click(); } } else if (code == 39) - { - if (!e.shiftKey) - { - setSliderPosition(getSliderPosition() + 1); - } - else - { - var nextStar = sliderLength; // default to last revision in document - for (var i = 0; i < savedRevisions.length; i++) - { - var pos = parseInt(savedRevisions[i].attr('pos')); - if (pos > getSliderPosition() && nextStar > pos) nextStar = pos; - } - setSliderPosition(nextStar); + { // right + if (e.shiftKey) { + $('#rightstar').click(); + } else { + $('#rightstep').click(); } } - else if (code == 32) playpause(); + else if (code == 32) + { // spacebar + $("#playpause_button_icon").trigger('click'); + } }); + // Resize $(window).resize(function() { updateSliderElements(); }); + // Slider click $("#ui-slider-bar").mousedown(function(evt) { $("#ui-slider-handle").css('left', (evt.clientX - $("#ui-slider-bar").offset().left)); @@ -386,57 +324,22 @@ function loadBroadcastSliderJS(fireWhenAllScriptsAreLoaded) }) // play/pause toggling - $("#playpause_button").mousedown(function(evt) + $("#playpause_button_icon").click(function(evt) { - var self = this; - - // $(self).css('background-image', 'url(/static/img/crushed_button_depressed.png)'); - $(self).mouseup(function(evt2) - { - // $(self).css('background-image', 'url(/static/img/crushed_button_undepressed.png)'); - $(self).unbind('mouseup'); - BroadcastSlider.playpause(); - }); - $(document).mouseup(function(evt2) - { - // $(self).css('background-image', 'url(/static/img/crushed_button_undepressed.png)'); - $(document).unbind('mouseup'); - }); + BroadcastSlider.playpause(); }); // next/prev saved revision and changeset - $('.stepper').mousedown(function(evt) + $('.stepper').click(function(evt) { - var self = this; - var origcss = $(self).css('background-position'); - if (!origcss) - { - origcss = $(self).css('background-position-x') + " " + $(self).css('background-position-y'); - } - var origpos = parseInt(origcss.split(" ")[1]); - var newpos = (origpos - 43); - if (newpos < 0) newpos += 87; - - var newcss = (origcss.split(" ")[0] + " " + newpos + "px"); - if ($(self).css('opacity') != 1.0) newcss = origcss; - - $(self).css('background-position', newcss) - - $(self).mouseup(function(evt2) - { - $(self).css('background-position', origcss); - $(self).unbind('mouseup'); - $(document).unbind('mouseup'); - if ($(self).attr("id") == ("leftstep")) - { + switch ($(this).attr("id")) { + case "leftstep": setSliderPosition(getSliderPosition() - 1); - } - else if ($(self).attr("id") == ("rightstep")) - { + break; + case "rightstep": setSliderPosition(getSliderPosition() + 1); - } - else if ($(self).attr("id") == ("leftstar")) - { + break; + case "leftstar": var nextStar = 0; // default to first revision in document for (var i = 0; i < savedRevisions.length; i++) { @@ -444,9 +347,8 @@ function loadBroadcastSliderJS(fireWhenAllScriptsAreLoaded) if (pos < getSliderPosition() && nextStar < pos) nextStar = pos; } setSliderPosition(nextStar); - } - else if ($(self).attr("id") == ("rightstar")) - { + break; + case "rightstar": var nextStar = sliderLength; // default to last revision in document for (var i = 0; i < savedRevisions.length; i++) { @@ -454,19 +356,13 @@ function loadBroadcastSliderJS(fireWhenAllScriptsAreLoaded) if (pos > getSliderPosition() && nextStar > pos) nextStar = pos; } setSliderPosition(nextStar); - } - }); - $(document).mouseup(function(evt2) - { - $(self).css('background-position', origcss); - $(self).unbind('mouseup'); - $(document).unbind('mouseup'); - }); + break; + } }) if (clientVars) { - $("#timeslider").show(); + $("#timeslider-wrapper").show(); var startPos = clientVars.collab_client_vars.rev; if(window.location.hash.length > 1) diff --git a/src/static/js/chat.js b/src/static/js/chat.js index 0b31428b636..a00ac9d9264 100755 --- a/src/static/js/chat.js +++ b/src/static/js/chat.js @@ -30,12 +30,14 @@ var chat = (function() var self = { show: function () { - $("#chaticon").hide(); - $("#chatbox").show(); - $("#gritter-notice-wrapper").hide(); - self.scrollDown(); + $("#chaticon").removeClass('visible'); + $("#chatbox").addClass('visible'); + self.scrollDown(true); chatMentions = 0; Tinycon.setBubble(0); + $('.chat-gritter-msg').each(function() { + $.gritter.remove(this.id); + }); }, focus: function () { @@ -46,42 +48,33 @@ var chat = (function() stickToScreen: function(fromInitialCall) // Make chat stick to right hand side of screen { chat.show(); - if(!isStuck || fromInitialCall) { // Stick it to - padcookie.setPref("chatAlwaysVisible", true); - $('#chatbox').addClass("stickyChat"); - $('#titlesticky').hide(); - $('#editorcontainer').css({"right":"192px"}); - $('.stickyChat').css("top",$('#editorcontainer').offset().top+"px"); - isStuck = true; - } else { // Unstick it - padcookie.setPref("chatAlwaysVisible", false); - $('.stickyChat').css("top", "auto"); - $('#chatbox').removeClass("stickyChat"); - $('#titlesticky').show(); - $('#editorcontainer').css({"right":"0px"}); - isStuck = false; - } + isStuck = (!isStuck || fromInitialCall); + $('#chatbox').hide(); + // Add timeout to disable the chatbox animations + setTimeout(function() { + $('#chatbox, .sticky-container').toggleClass("stickyChat", isStuck); + $('#chatbox').css('display', 'flex'); + }, 0); + + padcookie.setPref("chatAlwaysVisible", isStuck); + $('#options-stickychat').prop('checked', isStuck); }, chatAndUsers: function(fromInitialCall) { var toEnable = $('#options-chatandusers').is(":checked"); if(toEnable || !userAndChat || fromInitialCall){ - padcookie.setPref("chatAndUsers", true); chat.stickToScreen(true); $('#options-stickychat').prop('checked', true) $('#options-chatandusers').prop('checked', true) $('#options-stickychat').prop("disabled", "disabled"); - $('#users').addClass("chatAndUsers"); - $("#chatbox").addClass("chatAndUsersChat"); - // redraw userAndChat = true; - padeditbar.redrawHeight() }else{ - padcookie.setPref("chatAndUsers", false); $('#options-stickychat').prop("disabled", false); - $('#users').removeClass("chatAndUsers"); - $("#chatbox").removeClass("chatAndUsersChat"); + userAndChat = false; } + padcookie.setPref("chatAndUsers", userAndChat); + $('#users, .sticky-container').toggleClass("chatAndUsers popup-show stickyUsers", userAndChat); + $("#chatbox").toggleClass("chatAndUsersChat", userAndChat); }, hide: function () { @@ -92,16 +85,14 @@ var chat = (function() } else { $("#chatcounter").text("0"); - $("#chaticon").show(); - $("#chatbox").hide(); - $.gritter.removeAll(); - $("#gritter-notice-wrapper").show(); + $("#chaticon").addClass('visible'); + $("#chatbox").removeClass('visible'); } }, - scrollDown: function() + scrollDown: function(force) { - if($('#chatbox').css("display") != "none"){ - if(!self.lastMessage || !self.lastMessage.position() || self.lastMessage.position().top < $('#chattext').height()) { + if ($('#chatbox').hasClass('visible')) { + if (force || !self.lastMessage || !self.lastMessage.position() || self.lastMessage.position().top < ($('#chattext').outerHeight() + 20)) { // if we use a slow animate here we can have a race condition when a users focus can not be moved away // from the last message recieved. $('#chattext').animate({scrollTop: $('#chattext')[0].scrollHeight}, { duration: 400, queue: false }); @@ -167,14 +158,14 @@ var chat = (function() var alreadyFocused = $("#chatinput").is(":focus"); // does the user already have the chatbox open? - var chatOpen = $("#chatbox").is(":visible"); + var chatOpen = $("#chatbox").hasClass("visible"); // does this message contain this user's name? (is the curretn user mentioned?) var myName = $('#myusernameedit').val(); var wasMentioned = (text.toLowerCase().indexOf(myName.toLowerCase()) !== -1 && myName != "undefined"); if(wasMentioned && !alreadyFocused && !isHistoryAdd && !chatOpen) - { // If the user was mentioned show for twice as long and flash the browser window + { // If the user was mentioned, make the message sticky chatMentions++; Tinycon.setBubble(chatMentions); ctx.sticky = true; @@ -199,14 +190,11 @@ var chat = (function() if(!chatOpen && ctx.duration > 0) { $.gritter.add({ - // (string | mandatory) the heading of the notification - title: ctx.authorName, - // (string | mandatory) the text inside the notification - text: ctx.text, - // (bool | optional) if you want it to fade out on its own or just sit there + text: '' + ctx.authorName + '' + ctx.text, sticky: ctx.sticky, - // (int | optional) the time you want it to be alive for before fading out - time: ctx.duration + time: 5000, + position: 'bottom', + class_name: 'chat-gritter-msg' }); } } diff --git a/src/static/js/colorutils.js b/src/static/js/colorutils.js index af471c4538d..3faaebd3af9 100644 --- a/src/static/js/colorutils.js +++ b/src/static/js/colorutils.js @@ -142,4 +142,12 @@ colorutils.complementary = function(c) ]; } +colorutils.textColorFromBackgroundColor = function(bgcolor, skinName) +{ + var white = skinName == 'colibris' ? 'var(--super-light-color)' : '#fff'; + var black = skinName == 'colibris' ? 'var(--super-dark-color)' : '#222'; + + return colorutils.luminosity(colorutils.css2triple(bgcolor)) < 0.5 ? white : black; +} + exports.colorutils = colorutils; diff --git a/src/static/js/farbtastic.js b/src/static/js/farbtastic.js index 8a61627d298..acabea49d19 100644 --- a/src/static/js/farbtastic.js +++ b/src/static/js/farbtastic.js @@ -1,6 +1,7 @@ // Farbtastic 2.0 alpha +// edited by Sebastian Castro on 2020-04-06 (function ($) { - + var __debug = false; var __factor = 0.8; @@ -16,7 +17,7 @@ $.farbtastic = function (container, options) { $._farbtastic = function (container, options) { var fb = this; - + ///////////////////////////////////////////////////// /** @@ -134,7 +135,7 @@ $._farbtastic = function (container, options) { fb.ctxOverlay = fb.cnvOverlay[0].getContext('2d'); fb.ctxMask.translate(fb.mid, fb.mid); fb.ctxOverlay.translate(fb.mid, fb.mid); - + // Draw widget base layers. fb.drawCircle(); fb.drawMask(); @@ -208,7 +209,7 @@ $._farbtastic = function (container, options) { m.restore(); __debug && $('body').append('
drawCircle '+ (+(new Date()) - tm) +'ms'); }; - + /** * Draw the saturation/luminance mask. */ @@ -232,9 +233,9 @@ $._farbtastic = function (container, options) { outputPixel(x, y, c, a); } - } + } } - + // Method #1: direct pixel access (new Canvas). if (fb.ctxMask.getImageData) { // Create half-resolution buffer. @@ -295,7 +296,7 @@ $._farbtastic = function (container, options) { } cache.push([c, a]); }); - } + } __debug && $('body').append('
drawMask '+ (+(new Date()) - tm) +'ms'); } @@ -304,19 +305,17 @@ $._farbtastic = function (container, options) { */ fb.drawMarkers = function () { // Determine marker dimensions - var sz = options.width, lw = Math.ceil(fb.markerSize / 4), r = fb.markerSize - lw + 1; + var sz = options.width; var angle = fb.hsl[0] * 6.28, x1 = Math.sin(angle) * fb.radius, y1 = -Math.cos(angle) * fb.radius, x2 = 2 * fb.square * (.5 - fb.hsl[1]), - y2 = 2 * fb.square * (.5 - fb.hsl[2]), - c1 = fb.invert ? '#fff' : '#000', - c2 = fb.invert ? '#000' : '#fff'; + y2 = 2 * fb.square * (.5 - fb.hsl[2]); var circles = [ - { x: x1, y: y1, r: r, c: '#000', lw: lw + 1 }, - { x: x1, y: y1, r: fb.markerSize, c: '#fff', lw: lw }, - { x: x2, y: y2, r: r, c: c2, lw: lw + 1 }, - { x: x2, y: y2, r: fb.markerSize, c: c1, lw: lw }, + { x: x1, y: y1, r: fb.markerSize + 1, c: 'rgb(0,0,0,.4)', lw: 2 }, + { x: x1, y: y1, r: fb.markerSize, c: '#fff', lw: 2 }, + { x: x2, y: y2, r: fb.markerSize + 1, c: 'rgb(0,0,0,.4)', lw: 2 }, + { x: x2, y: y2, r: fb.markerSize, c: '#fff', lw: 2 }, ]; // Update the overlay canvas. @@ -343,7 +342,7 @@ $._farbtastic = function (container, options) { // Draw markers fb.drawMarkers(); - + // Linked elements or callback if (typeof fb.callback == 'object') { // Set background/foreground color @@ -363,15 +362,15 @@ $._farbtastic = function (container, options) { fb.callback.call(fb, fb.color); } } - + /** * Helper for returning coordinates relative to the center. */ fb.widgetCoords = function (event) { return { - x: event.pageX - fb.offset.left - fb.mid, + x: event.pageX - fb.offset.left - fb.mid, y: event.pageY - fb.offset.top - fb.mid - }; + }; } /** @@ -434,7 +433,7 @@ $._farbtastic = function (container, options) { fb.packDX = function (c, a) { return '#' + fb.dec2hex(a) + fb.dec2hex(c) + fb.dec2hex(c) + fb.dec2hex(c); }; - + fb.pack = function (rgb) { var r = Math.round(rgb[0] * 255); var g = Math.round(rgb[1] * 255); diff --git a/src/static/js/gritter.js b/src/static/js/gritter.js index 7f8c5b6eb6f..b0be20ffd24 100644 --- a/src/static/js/gritter.js +++ b/src/static/js/gritter.js @@ -7,6 +7,8 @@ * * Date: February 24, 2012 * Version: 1.7.4 + * + * Edited by Sebastian Castro on 2020-03-31 */ (function($){ @@ -14,16 +16,16 @@ * Set it up as an object under the jQuery namespace */ $.gritter = {}; - + /** * Set up global options that the user can over-ride */ $.gritter.options = { position: '', class_name: '', // could be set to 'gritter-light' to use white notifications - time: 6000 // hang on the screen for... + time: 3000 // hang on the screen for... } - + /** * Add a gritter notification to the screen * @see Gritter#add(); @@ -33,24 +35,24 @@ try { return Gritter.add(params || {}); } catch(e) { - + var err = 'Gritter Error: ' + e; - (typeof(console) != 'undefined' && console.error) ? - console.error(err, params) : + (typeof(console) != 'undefined' && console.error) ? + console.error(err, params) : alert(err); - + } - + } - + /** * Remove a gritter notification from the screen * @see Gritter#removeSpecific(); */ $.gritter.remove = function(id, params){ - Gritter.removeSpecific(id, params || {}); + Gritter.removeSpecific(id.split('gritter-item-')[1], params || {}); } - + /** * Remove all notifications * @see Gritter#stop(); @@ -58,28 +60,36 @@ $.gritter.removeAll = function(params){ Gritter.stop(params || {}); } - + /** * Big fat Gritter object * @constructor (not really since its object literal) */ var Gritter = { - + // Public - options to over-ride with $.gritter.options in "add" - position: '', - fade_in_speed: '', - fade_out_speed: '', time: '', - + // Private - no touchy the private parts _custom_timer: 0, _item_count: 0, _is_setup: 0, - _tpl_close: '
', - _tpl_title: '[[title]]', - _tpl_item: '', - _tpl_wrap: '
', - + _tpl_wrap_top: '
', + _tpl_wrap_bottom: '
', + _tpl_close: '', + _tpl_title: '

[[title]]

', + _tpl_item: [ + ''].join(''), + + /** * Add a gritter notification to the screen * @param {Object} params The object that contains all the options for drawing the notification @@ -93,29 +103,33 @@ // We might have some issues if we don't have a title or text! if(!params.text){ - throw 'You must supply "text" parameter.'; + throw 'You must supply "text" parameter.'; } - + // Check the options and set them once if(!this._is_setup){ this._runSetup(); } - + // Basics - var title = params.title, + var title = params.title, text = params.text, image = params.image || '', + position = params.position || 'top', sticky = params.sticky || false, item_class = params.class_name || $.gritter.options.class_name, - position = $.gritter.options.position, time_alive = params.time || ''; this._verifyWrapper(); - + + if (sticky) { + item_class += " sticky"; + } + this._item_count++; - var number = this._item_count, + var number = this._item_count, tmp = this._tpl_item; - + // Assign callbacks $(['before_open', 'after_open', 'before_close', 'after_close']).each(function(i, val){ Gritter['_' + val + '_' + number] = ($.isFunction(params[val])) ? params[val] : function(){} @@ -123,25 +137,22 @@ // Reset this._custom_timer = 0; - + // A custom fade time set if(time_alive){ this._custom_timer = time_alive; } - - var image_str = (image != '') ? '' : '', - class_name = (image != '') ? 'gritter-with-image' : 'gritter-without-image'; - + // String replacements on the template if(title){ title = this._str_replace('[[title]]',title,this._tpl_title); }else{ title = ''; } - + tmp = this._str_replace( - ['[[title]]', '[[text]]', '[[close]]', '[[image]]', '[[number]]', '[[class_name]]', '[[item_class]]'], - [title, text, this._tpl_close, image_str, this._item_count, class_name, item_class], tmp + ['[[title]]', '[[text]]', '[[number]]', '[[item_class]]'], + [title, text, this._item_count, item_class], tmp ); // If it's false, don't show another gritter message @@ -149,42 +160,37 @@ return false; } - $('#gritter-notice-wrapper').addClass(position).append(tmp); - + if (['top', 'bottom'].indexOf(position) == -1) { + position = 'top'; + } + + $('#gritter-container.' + position).append(tmp); + var item = $('#gritter-item-' + this._item_count); - - item.fadeIn(this.fade_in_speed, function(){ - Gritter['_after_open_' + number]($(this)); - }); - + + setTimeout(function() { item.addClass('popup-show'); }, 0); + Gritter['_after_open_' + number](item); + if(!sticky){ this._setFadeTimer(item, number); + // Bind the hover/unhover states + $(item).on('mouseenter', function(event) { + Gritter._restoreItemIfFading($(this), number); + }); + $(item).on('mouseleave', function(event) { + Gritter._setFadeTimer($(this), number); + }); } - - // Bind the hover/unhover states - $(item).bind('mouseenter mouseleave', function(event){ - if(event.type == 'mouseenter'){ - if(!sticky){ - Gritter._restoreItemIfFading($(this), number); - } - } - else { - if(!sticky){ - Gritter._setFadeTimer($(this), number); - } - } - Gritter._hoverState($(this), event.type); - }); - + // Clicking (X) makes the perdy thing close $(item).find('.gritter-close').click(function(){ Gritter.removeSpecific(number, {}, null, true); }); - + return number; - + }, - + /** * If we don't have any more gritter notifications, get rid of the wrapper using this check * @private @@ -193,89 +199,55 @@ * @param {Boolean} manual_close Did we close the gritter dialog with the (X) button */ _countRemoveWrapper: function(unique_id, e, manual_close){ - + // Remove it then run the callback function e.remove(); this['_after_close_' + unique_id](e, manual_close); - - // Check if the wrapper is empty, if it is.. remove the wrapper - if($('.gritter-item-wrapper').length == 0){ - $('#gritter-notice-wrapper').remove(); - } - + + // Remove container if empty + $('#gritter-container').each(function() { + if ($(this).find('.gritter-item').length == 0) { + $(this).remove(); + } + }) }, - + /** * Fade out an element after it's been on the screen for x amount of time * @private * @param {Object} e The jQuery element to get rid of * @param {Integer} unique_id The id of the element to remove - * @param {Object} params An optional list of params to set fade speeds etc. + * @param {Object} params An optional list of params. * @param {Boolean} unbind_events Unbind the mouseenter/mouseleave events if they click (X) */ _fade: function(e, unique_id, params, unbind_events){ var params = params || {}, fade = (typeof(params.fade) != 'undefined') ? params.fade : true, - fade_out_speed = params.speed || this.fade_out_speed, manual_close = unbind_events; this['_before_close_' + unique_id](e, manual_close); - + // If this is true, then we are coming from clicking the (X) if(unbind_events){ e.unbind('mouseenter mouseleave'); } - + // Fade it out or remove it if(fade){ - - e.animate({ - opacity: 0 - }, fade_out_speed, function(){ - e.animate({ height: 0 }, 300, function(){ - Gritter._countRemoveWrapper(unique_id, e, manual_close); - }) - }) - + e.removeClass('popup-show'); + setTimeout(function() { + Gritter._countRemoveWrapper(unique_id, e, manual_close); + }, 300) } else { - + this._countRemoveWrapper(unique_id, e); - - } - - }, - - /** - * Perform actions based on the type of bind (mouseenter, mouseleave) - * @private - * @param {Object} e The jQuery element - * @param {String} type The type of action we're performing: mouseenter or mouseleave - */ - _hoverState: function(e, type){ - - // Change the border styles and add the (X) close button when you hover - if(type == 'mouseenter'){ - - e.addClass('hover'); - - // Show close button - e.find('.gritter-close').show(); - - } - // Remove the border styles and hide (X) close button when you mouse out - else { - - e.removeClass('hover'); - - // Hide close button - e.find('.gritter-close').hide(); - + } - + }, - + /** * Remove a specific notification based on an ID * @param {Integer} unique_id The ID used to delete a specific notification @@ -284,17 +256,17 @@ * @param {Boolean} unbind_events If we clicked on the (X) we set this to true to unbind mouseenter/mouseleave */ removeSpecific: function(unique_id, params, e, unbind_events){ - + if(!e){ var e = $('#gritter-item-' + unique_id); } - // We set the fourth param to let the _fade function know to + // We set the fourth param to let the _fade function know to // unbind the "mouseleave" event. Once you click (X) there's no going back! this._fade(e, unique_id, params || {}, unbind_events); - + }, - + /** * If the item is fading out and we hover over it, restore it! * @private @@ -302,114 +274,116 @@ * @param {Integer} unique_id The ID of the element */ _restoreItemIfFading: function(e, unique_id){ - + clearTimeout(this['_int_id_' + unique_id]); e.stop().css({ opacity: '', height: '' }); - + }, - + /** * Setup the global options - only once * @private */ _runSetup: function(){ - + for(opt in $.gritter.options){ this[opt] = $.gritter.options[opt]; } this._is_setup = 1; - + }, - + /** * Set the notification to fade out after a certain amount of time * @private * @param {Object} item The HTML element we're dealing with * @param {Integer} unique_id The ID of the element */ - _setFadeTimer: function(e, unique_id){ - + _setFadeTimer: function(item, unique_id){ + var timer_str = (this._custom_timer) ? this._custom_timer : this.time; - this['_int_id_' + unique_id] = setTimeout(function(){ - Gritter._fade(e, unique_id); + this['_int_id_' + unique_id] = setTimeout(function(){ + Gritter._fade(item, unique_id); }, timer_str); - + }, - + /** * Bring everything to a halt * @param {Object} params A list of callback functions to pass when all notifications are removed - */ + */ stop: function(params){ - + // callbacks (if passed) var before_close = ($.isFunction(params.before_close)) ? params.before_close : function(){}; var after_close = ($.isFunction(params.after_close)) ? params.after_close : function(){}; - - var wrap = $('#gritter-notice-wrapper'); + + var wrap = $('#gritter-container'); before_close(wrap); wrap.fadeOut(function(){ $(this).remove(); after_close(); }); - + }, - + /** * An extremely handy PHP function ported to JS, works well for templating * @private * @param {String/Array} search A list of things to search for * @param {String/Array} replace A list of things to replace the searches with * @return {String} sa The output - */ + */ _str_replace: function(search, replace, subject, count){ - + var i = 0, j = 0, temp = '', repl = '', sl = 0, fl = 0, f = [].concat(search), r = [].concat(replace), s = subject, ra = r instanceof Array, sa = s instanceof Array; s = [].concat(s); - + if(count){ this.window[count] = 0; } - + for(i = 0, sl = s.length; i < sl; i++){ - + if(s[i] === ''){ continue; } - + for (j = 0, fl = f.length; j < fl; j++){ - + temp = s[i] + ''; repl = ra ? (r[j] !== undefined ? r[j] : '') : r[0]; s[i] = (temp).split(f[j]).join(repl); - + if(count && s[i] !== temp){ this.window[count] += (temp.length-s[i].length) / f[j].length; } - + } } - + return sa ? s : s[0]; - + }, - + /** * A check to make sure we have something to wrap our notices with * @private - */ + */ _verifyWrapper: function(){ - - if($('#gritter-notice-wrapper').length == 0){ - $('body').append(this._tpl_wrap); + if ($('#gritter-container.top').length === 0) { + $('#editorcontainerbox').append(this._tpl_wrap_top); + } + + if ($('#gritter-container.bottom').length === 0) { + $('#editorcontainerbox').append(this._tpl_wrap_bottom); } - } - + } - + })(jQuery); diff --git a/src/static/js/pad.js b/src/static/js/pad.js index 69fa659026c..1ba6f52addb 100644 --- a/src/static/js/pad.js +++ b/src/static/js/pad.js @@ -73,7 +73,7 @@ function randomString() // callback: the function to call when all above succeeds, `val` is the value supplied by the user var getParameters = [ { name: "noColors", checkVal: "true", callback: function(val) { settings.noColors = true; $('#clearAuthorship').hide(); } }, - { name: "showControls", checkVal: "false", callback: function(val) { $('#editbar').addClass('hideControlsEditbar'); $('#editorcontainer').addClass('hideControlsEditor'); } }, + { name: "showControls", checkVal: "true", callback: function(val) { $('#editbar').css('display', 'flex') } }, { name: "showChat", checkVal: "true", callback: function(val) { $('#chaticon').show(); } }, { name: "showLineNumbers", checkVal: "false", callback: function(val) { settings.LineNumbersDisabled = true; } }, { name: "useMonospaceFont", checkVal: "true", callback: function(val) { settings.useMonospaceFontGlobal = true; } }, @@ -364,12 +364,6 @@ function handshake() }); } -$.extend($.gritter.options, { - position: 'bottom-right', // defaults to 'top-right' but can be 'bottom-left', 'bottom-right', 'top-left', 'top-right' (added in 1.7.1) - fade: false, // dont fade, too jerky on mobile - time: 6000 // hang on the screen for... -}); - var pad = { // don't access these directly from outside this file, except // for debugging @@ -561,6 +555,18 @@ var pad = { pad.changeViewOption('rtlIsTrue', true); } pad.changeViewOption('padFontFamily', padcookie.getPref("padFontFamily")); + $('#viewfontmenu').val(padcookie.getPref("padFontFamily")).niceSelect('update'); + + // Prevent sticky chat or chat and users to be checked for mobiles + function checkChatAndUsersVisibility(x) { + if (x.matches) { // If media query matches + $('#options-chatandusers:checked').click(); + $('#options-stickychat:checked').click(); + } + } + var mobileMatch = window.matchMedia("(max-width: 800px)"); + mobileMatch.addListener(checkChatAndUsersVisibility); // check if window resized + setTimeout(function() { checkChatAndUsersVisibility(mobileMatch); }, 0); // check now after load hooks.aCallAll("postAceInit", {ace: padeditor.ace, pad: pad}); } diff --git a/src/static/js/pad_editbar.js b/src/static/js/pad_editbar.js index 9cf357aadd5..c73f38c18c0 100644 --- a/src/static/js/pad_editbar.js +++ b/src/static/js/pad_editbar.js @@ -24,6 +24,8 @@ var hooks = require('./pluginfw/hooks'); var padutils = require('./pad_utils').padutils; var padeditor = require('./pad_editor').padeditor; var padsavedrevs = require('./pad_savedrevs'); +var _ = require('ep_etherpad-lite/static/js/underscore'); +require('ep_etherpad-lite/static/js/vendors/nice-select'); var ToolbarItem = function (element) { this.$el = element; @@ -141,11 +143,6 @@ var padeditbar = (function() init: function() { var self = this; self.dropdowns = []; - // Listen for resize events (sucks but needed as iFrame ace_inner has to be position absolute - // A CSS fix for this would be nice but I'm not sure how we'd do it. - $(window).resize(function(){ - self.redrawHeight(); - }); $("#editbar .editbarbutton").attr("unselectable", "on"); // for IE $("#editbar").removeClass("disabledtoolbar").addClass("enabledtoolbar"); @@ -160,9 +157,11 @@ var padeditbar = (function() bodyKeyEvent(evt); }); - $('#editbar').show(); - - this.redrawHeight(); + $('.show-more-icon-btn').click(function() { + $('.toolbar').toggleClass('full-icons'); + }); + self.checkAllIconsAreDisplayedInToolbar(); + $(window).resize(_.debounce( self.checkAllIconsAreDisplayedInToolbar, 100 ) ); registerDefaultCommands(self); @@ -170,10 +169,16 @@ var padeditbar = (function() toolbar: self, ace: padeditor.ace }); + + $('select').niceSelect(); + + // When editor is scrolled, we add a class to style the editbar differently + $('iframe[name="ace_outer"]').contents().scroll(function() { + $('#editbar').toggleClass('editor-scrolled', $(this).scrollTop() > 2); + }) }, isEnabled: function() { -// return !$("#editbar").hasClass('disabledtoolbar'); return true; }, disable: function() @@ -185,55 +190,6 @@ var padeditbar = (function() this.commands[cmd] = callback; return this; }, - calculateEditbarHeight: function() { - // if we're on timeslider, there is nothing on editbar, so we just use zero - var onTimeslider = $('.menu_left').length === 0; - if (onTimeslider) return 0; - - // if editbar has both menu left and right, its height must be - // the max between the height of these two parts - var leftMenuPosition = $('.menu_left').offset().top; - var rightMenuPosition = $('.menu_right').offset().top; - var editbarHasMenuLeftAndRight = (leftMenuPosition === rightMenuPosition); - - var height; - if (editbarHasMenuLeftAndRight) { - height = Math.max($('.menu_left').height(), $('.menu_right').height()); - } - else { - height = $('.menu_left').height(); - } - - return height; - }, - redrawHeight: function(){ - var minimunEditbarHeight = self.calculateEditbarHeight(); - var editbarHeight = minimunEditbarHeight + 1 + "px"; - var containerTop = minimunEditbarHeight + 6 + "px"; - $('#editbar').css("height", editbarHeight); - - $('#editorcontainer').css("top", containerTop); - - // make sure pop ups are in the right place - if($('#editorcontainer').offset()){ - $('.popup').css("top", $('#editorcontainer').offset().top + "px"); - } - - // If sticky chat is enabled.. - if($('#options-stickychat').is(":checked")){ - if($('#editorcontainer').offset()){ - $('#chatbox').css("top", $('#editorcontainer').offset().top + "px"); - } - }; - - // If chat and Users is enabled.. - if($('#options-chatandusers').is(":checked")){ - if($('#editorcontainer').offset()){ - $('#users').css("top", $('#editorcontainer').offset().top + "px"); - } - } - - }, registerDropdownCommand: function (cmd, dropdown) { dropdown = dropdown || cmd; self.dropdowns.push(dropdown) @@ -256,6 +212,11 @@ var padeditbar = (function() }, toggleDropDown: function(moduleName, cb) { + // do nothing if users are sticked + if (moduleName === "users" && $('#users').hasClass('stickyUsers')) { + return; + } + // hide all modules and remove highlighting of all buttons if(moduleName == "none") { @@ -278,8 +239,7 @@ var padeditbar = (function() if(module.css('display') != "none") { $("li[data-key=" + thisModuleName + "] > a").removeClass("selected"); - module.slideUp("fast", cb); - returned = true; + module.removeClass("popup-show"); } } if(!returned && cb) return cb(); @@ -293,15 +253,18 @@ var padeditbar = (function() var thisModuleName = self.dropdowns[i]; var module = $("#" + thisModuleName); - if(module.css('display') != "none") + if(module.hasClass('popup-show')) { $("li[data-key=" + thisModuleName + "] > a").removeClass("selected"); - module.slideUp("fast"); + module.removeClass("popup-show"); } else if(thisModuleName==moduleName) { $("li[data-key=" + thisModuleName + "] > a").addClass("selected"); - module.slideDown("fast", cb); + module.addClass("popup-show"); + if (cb) { + cb(); + } } } } @@ -332,6 +295,15 @@ var padeditbar = (function() $('#embedinput').val(''); $('#linkinput').val(padurl); } + }, + checkAllIconsAreDisplayedInToolbar: function() + { + // reset style + $('.toolbar').removeClass('cropped') + var menu_left = $('.toolbar .menu_left')[0]; + if (menu_left && menu_left.scrollWidth > $('.toolbar').width()) { + $('.toolbar').addClass('cropped'); + } } }; @@ -352,7 +324,7 @@ var padeditbar = (function() // Timeslider probably.. // Shift focus away from any drop downs $(':focus').blur(); // required to do not try to remove! - $('#padmain').focus(); // Focus back onto the pad + $('#editorcontainerbox').focus(); // Focus back onto the pad }else{ // Shift focus away from any drop downs $(':focus').blur(); // required to do not try to remove! diff --git a/src/static/js/pad_editor.js b/src/static/js/pad_editor.js index c59a2fc615d..b035bf6fc3d 100644 --- a/src/static/js/pad_editor.js +++ b/src/static/js/pad_editor.js @@ -134,6 +134,7 @@ var padeditor = (function() v = getOption('showAuthorColors', true); self.ace.setProperty("showsauthorcolors", v); + $('#chattext').toggleClass('authorColors', v); padutils.setCheckbox($("#options-colorscheck"), v); // Override from parameters if true @@ -141,29 +142,7 @@ var padeditor = (function() self.ace.setProperty("showsauthorcolors", !settings.noColors); } - var fontFamily = newOptions['padFontFamily']; - switch (fontFamily) { - case "monospace": self.ace.setProperty("textface", "monospace"); break; - case "montserrat": self.ace.setProperty("textface", "Montserrat"); break; - case "opendyslexic": self.ace.setProperty("textface", "OpenDyslexic"); break; - case "comicsans": self.ace.setProperty("textface", "'Comic Sans MS','Comic Sans',cursive"); break; - case "georgia": self.ace.setProperty("textface", "Georgia,'Bitstream Charter',serif"); break; - case "impact": self.ace.setProperty("textface", "Impact,Haettenschweiler,'Arial Black',sans-serif"); break; - case "lucida": self.ace.setProperty("textface", "Lucida,'Lucida Serif','Lucida Bright',serif"); break; - case "lucidasans": self.ace.setProperty("textface", "'Lucida Sans','Lucida Grande','Lucida Sans Unicode','Luxi Sans',sans-serif"); break; - case "palatino": self.ace.setProperty("textface", "Palatino,'Palatino Linotype','URW Palladio L',Georgia,serif"); break; - case "robotomono": self.ace.setProperty("textface", "RobotoMono"); break; - case "tahoma": self.ace.setProperty("textface", "Tahoma,sans-serif"); break; - case "timesnewroman": self.ace.setProperty("textface", "'Times New Roman',Times,serif"); break; - case "trebuchet": self.ace.setProperty("textface", "'Trebuchet MS',sans-serif"); break; - case "verdana": self.ace.setProperty("textface", "Verdana,'DejaVu Sans',sans-serif"); break; - case "symbol": self.ace.setProperty("textface", "Symbol"); break; - case "webdings": self.ace.setProperty("textface", "Webdings"); break; - case "wingdings": self.ace.setProperty("textface", "Wingdings"); break; - case "sansserif": self.ace.setProperty("textface", "sans-serif"); break; - case "serif": self.ace.setProperty("textface", "serif"); break; - default: self.ace.setProperty("textface", ""); break; - } + self.ace.setProperty("textface", newOptions['padFontFamily'] || ""); }, dispose: function() { diff --git a/src/static/js/pad_modals.js b/src/static/js/pad_modals.js index 2fc621dc4b6..f965bc600d3 100644 --- a/src/static/js/pad_modals.js +++ b/src/static/js/pad_modals.js @@ -44,10 +44,11 @@ var padmodals = (function() }); }, showOverlay: function() { - $("#overlay").show(); + // Prevent the user to interact with the toolbar. Useful when user is disconnected for example + $("#toolbar-overlay").show(); }, hideOverlay: function() { - $("#overlay").hide(); + $("#toolbar-overlay").hide(); } }; return self; diff --git a/src/static/js/pad_savedrevs.js b/src/static/js/pad_savedrevs.js index 34323b22fc9..cb2198a5584 100644 --- a/src/static/js/pad_savedrevs.js +++ b/src/static/js/pad_savedrevs.js @@ -25,8 +25,8 @@ exports.saveNow = function(){ text: _("pad.savedrevs.timeslider") || "You can view saved revisions in the timeslider", // (bool | optional) if you want it to fade out on its own or just sit there sticky: false, - // (int | optional) the time you want it to be alive for before fading out - time: '2000' + time: 3000, + class_name: "saved-revision", }); } diff --git a/src/static/js/pad_userlist.js b/src/static/js/pad_userlist.js index 11b95880ac7..02e6add587e 100644 --- a/src/static/js/pad_userlist.js +++ b/src/static/js/pad_userlist.js @@ -207,6 +207,7 @@ var paduserlist = (function() tr = $(getRowHtml(domId, getEmptyRowHtml(getAnimationHeight(ANIMATION_START)), authorId)); } handleRowNode(tr, data); + $("table#otheruserstable").show(); if (position == 0) { $("table#otheruserstable").prepend(tr); @@ -263,6 +264,9 @@ var paduserlist = (function() scheduleAnimation(); } } + if (rowsPresent.length === 0) { + $("table#otheruserstable").hide(); + } } // newPosition is position after the row has been removed @@ -421,20 +425,6 @@ var paduserlist = (function() jqueryNode.removeAttr('disabled').addClass('editable'); } - function updateInviteNotice() - { - if (otherUsersInfo.length == 0) - { - $("#otheruserstable").hide(); - $("#nootherusers").show(); - } - else - { - $("#nootherusers").hide(); - $("#otheruserstable").show(); - } - } - var knocksToIgnore = {}; var guestPromptFlashState = 0; var guestPromptFlash = padutils.makeAnimationScheduler( @@ -619,8 +609,6 @@ var paduserlist = (function() rowManager.insertRow(newIndex, userData); } - updateInviteNotice(); - self.updateNumberOfOnlineUsers(); }, updateNumberOfOnlineUsers: function() @@ -668,13 +656,11 @@ var paduserlist = (function() hooks.callAll('userLeave', { userInfo: info }); - updateInviteNotice(); } } }, 8000); // how long to wait userData.leaveTimer = thisLeaveTimer; } - updateInviteNotice(); self.updateNumberOfOnlineUsers(); }, @@ -803,7 +789,7 @@ function closeColorPicker(accept) } colorPickerOpen = false; - $("#mycolorpicker").fadeOut("fast"); + $("#mycolorpicker").removeClass('popup-show'); } function showColorPicker() @@ -841,7 +827,7 @@ function showColorPicker() colorPickerSetup = true; } - $("#mycolorpicker").fadeIn(); + $("#mycolorpicker").addClass('popup-show') colorPickerOpen = true; $("#colorpickerswatches li").removeClass('picked'); diff --git a/src/static/js/skin_variants.js b/src/static/js/skin_variants.js new file mode 100644 index 00000000000..070a114b4c1 --- /dev/null +++ b/src/static/js/skin_variants.js @@ -0,0 +1,55 @@ +// Specific hash to display the skin variants builder popup +if (window.location.hash.toLowerCase() == "#skinvariantsbuilder") { + $('#skin-variants').addClass('popup-show'); + + $('.skin-variant').change(function() { + updateSkinVariantsClasses(); + }); + + var containers = ['editor', 'background', 'toolbar']; + var colors = ['super-light', 'light', 'dark', 'super-dark']; + + updateCheckboxFromSkinClasses(); + updateSkinVariantsClasses(); + + // add corresponding classes when config change + function updateSkinVariantsClasses() { + var domsToUpdate = [ + $('html'), + $('iframe[name=ace_outer]').contents().find('html'), + $('iframe[name=ace_outer]').contents().find('iframe[name=ace_inner]').contents().find('html') + ]; + colors.forEach(function(color) { + containers.forEach(function(container) { + domsToUpdate.forEach(function(el) { el.removeClass(color + '-' + container); }); + }) + }) + + domsToUpdate.forEach(function(el) { el.removeClass('full-width-editor'); }); + + var new_classes = []; + $('select.skin-variant-color').each(function() { + new_classes.push($(this).val() + "-" + $(this).data('container')); + }) + if ($('#skin-variant-full-width').is(':checked')) new_classes.push("full-width-editor"); + + domsToUpdate.forEach(function(el) { el.addClass(new_classes.join(" ")); }); + + $('#skin-variants-result').val('"skinVariants": "' + new_classes.join(" ") + '"'); + } + + // run on init + function updateCheckboxFromSkinClasses() { + $('html').attr('class').split(' ').forEach(function(classItem) { + var container = classItem.split('-').slice(-1); + + var container = classItem.substring(classItem.lastIndexOf("-") + 1, classItem.length); + if (containers.indexOf(container) > -1) { + var color = classItem.substring(0, classItem.lastIndexOf("-")); + $('.skin-variant-color[data-container="' + container + '"').val(color); + } + }) + + $('#skin-variant-full-width').prop('checked', $('html').hasClass('full-width-editor')); + } +} \ No newline at end of file diff --git a/src/static/js/timeslider.js b/src/static/js/timeslider.js index 3cdff91a951..5ac56bea11a 100644 --- a/src/static/js/timeslider.js +++ b/src/static/js/timeslider.js @@ -165,33 +165,9 @@ function handleClientVars(message) // font family change $("#viewfontmenu").change(function(){ - var font = $("#viewfontmenu").val(); - switch (font) { - case "monospace": setFont("Courier new");break; - case "opendyslexic": setFont("OpenDyslexic");break; - case "comicsans": setFont("Comic Sans MS");break; - case "georgia": setFont("Georgia");break; - case "impact": setFont("Impact");break; - case "lucida": setFont("Lucida");break; - case "lucidasans": setFont("Lucida Sans Unicode");break; - case "palatino": setFont("Palatino Linotype");break; - case "tahoma": setFont("Tahoma");break; - case "timesnewroman": setFont("Times New Roman");break; - case "trebuchet": setFont("Trebuchet MS");break; - case "verdana": setFont("Verdana");break; - case "symbol": setFont("Symbol");break; - case "webdings": setFont("Webdings");break; - case "wingdings": setFont("Wingdings");break; - case "sansserif": setFont("MS Sans Serif");break; - case "serif": setFont("MS Serif");break; - default: setFont("");break; - } + $('#innerdocbody').css("font-family", $(this).val() || ""); }); } -function setFont(font){ - $('#padcontent').css("font-family", font); -} - exports.baseURL = ''; exports.init = init; diff --git a/src/static/js/vendors/nice-select.js b/src/static/js/vendors/nice-select.js new file mode 100644 index 00000000000..cbd978ac7b1 --- /dev/null +++ b/src/static/js/vendors/nice-select.js @@ -0,0 +1,209 @@ +/* jQuery Nice Select - v1.1.0 + https://github.com/hernansartorio/jquery-nice-select + Made by Hernán Sartorio */ + +(function($) { + + $.fn.niceSelect = function(method) { + + // Methods + if (typeof method == 'string') { + if (method == 'update') { + this.each(function() { + var $select = $(this); + var $dropdown = $(this).next('.nice-select'); + var open = $dropdown.hasClass('open'); + + if ($dropdown.length) { + $dropdown.remove(); + create_nice_select($select); + + if (open) { + $select.next().trigger('click'); + } + } + }); + } else if (method == 'destroy') { + this.each(function() { + var $select = $(this); + var $dropdown = $(this).next('.nice-select'); + + if ($dropdown.length) { + $dropdown.remove(); + $select.css('display', ''); + } + }); + if ($('.nice-select').length == 0) { + $(document).off('.nice_select'); + } + } else { + console.log('Method "' + method + '" does not exist.') + } + return this; + } + + // Hide native select + this.hide(); + + // Create custom markup + this.each(function() { + var $select = $(this); + + if (!$select.next().hasClass('nice-select')) { + create_nice_select($select); + } + }); + + function create_nice_select($select) { + $select.after($('
') + .addClass('nice-select') + .addClass($select.attr('class') || '') + .addClass($select.attr('disabled') ? 'disabled' : '') + .attr('tabindex', $select.attr('disabled') ? null : '0') + .html('
    ') + ); + + var $dropdown = $select.next(); + var $options = $select.find('option'); + var $selected = $select.find('option:selected'); + + $dropdown.find('.current').html($selected.data('display') || $selected.text()); + + $options.each(function(i) { + var $option = $(this); + var display = $option.data('display'); + + $dropdown.find('ul').append($('
  • ') + .attr('data-value', $option.val()) + .attr('data-display', (display || null)) + .addClass('option' + + ($option.is(':selected') ? ' selected' : '') + + ($option.is(':disabled') ? ' disabled' : '')) + .html($option.text()) + ); + }); + } + + /* Event listeners */ + + // Unbind existing events in case that the plugin has been initialized before + $(document).off('.nice_select'); + + // Open/close + $(document).on('click.nice_select', '.nice-select', function(event) { + var $dropdown = $(this); + + $('.nice-select').not($dropdown).removeClass('open'); + + $dropdown.toggleClass('open'); + + if ($dropdown.hasClass('open')) { + $dropdown.find('.option'); + $dropdown.find('.focus').removeClass('focus'); + $dropdown.find('.selected').addClass('focus'); + if ($dropdown.closest('.toolbar').length > 0) { + $dropdown.find('.list').css('left', $dropdown.offset().left); + $dropdown.find('.list').css('top', $dropdown.offset().top + $dropdown.outerHeight()); + $dropdown.find('.list').css('min-width', $dropdown.outerWidth() + 'px'); + } + + $listHeight = $dropdown.find('.list').outerHeight(); + $top = $dropdown.parent().offset().top; + $bottom = $('body').height() - $top; + $maxListHeight = $bottom - $dropdown.outerHeight() - 20; + if ($maxListHeight < 200) { + $dropdown.addClass('reverse'); + $maxListHeight = 250; + } else { + $dropdown.removeClass('reverse') + } + $dropdown.find('.list').css('max-height', $maxListHeight + 'px'); + + } else { + $dropdown.focus(); + } + }); + + // Close when clicking outside + $(document).on('click.nice_select', function(event) { + if ($(event.target).closest('.nice-select').length === 0) { + $('.nice-select').removeClass('open').find('.option'); + } + }); + + // Option click + $(document).on('click.nice_select', '.nice-select .option:not(.disabled)', function(event) { + var $option = $(this); + var $dropdown = $option.closest('.nice-select'); + + $dropdown.find('.selected').removeClass('selected'); + $option.addClass('selected'); + + var text = $option.data('display') || $option.text(); + $dropdown.find('.current').text(text); + + $dropdown.prev('select').val($option.data('value')).trigger('change'); + }); + + // Keyboard events + $(document).on('keydown.nice_select', '.nice-select', function(event) { + var $dropdown = $(this); + var $focused_option = $($dropdown.find('.focus') || $dropdown.find('.list .option.selected')); + + // Space or Enter + if (event.keyCode == 32 || event.keyCode == 13) { + if ($dropdown.hasClass('open')) { + $focused_option.trigger('click'); + } else { + $dropdown.trigger('click'); + } + return false; + // Down + } else if (event.keyCode == 40) { + if (!$dropdown.hasClass('open')) { + $dropdown.trigger('click'); + } else { + var $next = $focused_option.nextAll('.option:not(.disabled)').first(); + if ($next.length > 0) { + $dropdown.find('.focus').removeClass('focus'); + $next.addClass('focus'); + } + } + return false; + // Up + } else if (event.keyCode == 38) { + if (!$dropdown.hasClass('open')) { + $dropdown.trigger('click'); + } else { + var $prev = $focused_option.prevAll('.option:not(.disabled)').first(); + if ($prev.length > 0) { + $dropdown.find('.focus').removeClass('focus'); + $prev.addClass('focus'); + } + } + return false; + // Esc + } else if (event.keyCode == 27) { + if ($dropdown.hasClass('open')) { + $dropdown.trigger('click'); + } + // Tab + } else if (event.keyCode == 9) { + if ($dropdown.hasClass('open')) { + return false; + } + } + }); + + // Detect CSS pointer-events support, for IE <= 10. From Modernizr. + var style = document.createElement('a').style; + style.cssText = 'pointer-events:auto'; + if (style.pointerEvents !== 'auto') { + $('html').addClass('no-csspointerevents'); + } + + return this; + + }; + +}(jQuery)); \ No newline at end of file diff --git a/src/static/skins/colibris/pad.css b/src/static/skins/colibris/pad.css index ad17132f874..4ce494f6040 100644 --- a/src/static/skins/colibris/pad.css +++ b/src/static/skins/colibris/pad.css @@ -1,6 +1,8 @@ +@import url("src/general.css"); @import url("src/layout.css"); @import url("src/pad-editor.css"); +@import url("src/components/scrollbars.css"); @import url("src/components/buttons.css"); @import url("src/components/popup.css"); @@ -14,114 +16,46 @@ @import url("src/components/import-export.css"); @import url("src/plugins/brightcolorpicker.css"); -@import url("src/plugins/comments_page.css"); @import url("src/plugins/font_color.css"); -@import url("src/plugins/set_title_on_pad.css"); @import url("src/plugins/tables2.css"); -@import url("src/plugins/embedded_hyperlinks.css"); @import url("src/plugins/author_hover.css"); +@import url("src/plugins/comments.css"); -/* NEUTRAL COLOR */ -body, -#innerdocbody -#users, -#chattext, -#chatinput, -#chatlabel, -#toc, -#tocItems a, -.toolbar ul li a:hover .buttonicon, -.toolbar ul li a, -.toolbar ul li select, -#mycolorpickercancel, -.btn-default, -.color\:black, -[data-color=black], -#chattext.authorColors p, #chattext.authorColors span, -#chattext .time, -#tbl_context_menu ul .yuimenuitemlabel, -.yui-skin-sam .yui-split-button button em:not(.color-picker-button), -#yui-picker-panel .button-group .yui-button:first-child button, -#newComment .sidebar-comment input[type=reset], #newComment .sidebar-comment input[type=reset]:hover, -#newComment .sidebar-comment input[type=submit]:hover, -.suggestion, .comment-reply-input, .reply-suggestion p:not(.reply-comment-suggest-from-p), .comment-text, -.sidebar-comment textarea, .reply-comment-suggest label, .comment-suggest label, .comment-reply-input -#comments, #newComments, .reply-comment-suggest-from-p, -.comment-changeFrom-value, -.comment-changeTo-value, -.reply-suggestion .reply-comment-suggest-from, -.suggestion .comment-suggest-from, -.hyperlink-dialog>.hyperlink-url, -.timeslider #padcontent span , -.exporttype, .timeslider #export > p -{ color: #2E3338 !important; } +@import url("src/pad-variants.css"); -/* MENUS ICONS */ -#edit_title:before, -#tbl-menu:before -{ color: #767676 !important; } -/* MENU BUTTONS */ -.timeslider #editbar .buttontext -{ background-color: #767676 !important; } +/* ----------------------------------------------------------------- + * COLORS + * If you want to change main colors, please replace following CSS variables + * ----------------------------------------------------------------- + */ -/* PRIMARY BUTTONS */ -#mycolorpickersave, -.btn-primary, -#tbl_btn_close, -#save_title button, -#yui-picker-panel .button-group .yui-button:last-child button, -#newComment.sidebar-comment input[type=submit], -.comment-changeTo-approve input[type=submit], -.hyperlink-dialog>.hyperlink-save, -#importsubmitinput, #forcereconnect -{ - background-color: #64d29b; - color: white; -} +:root { + --super-dark-color: #485365; /*#374256;*/ + --dark-color: #576273; /*#4d5d77*/ -/* PRIMARY COLOR */ -h1, -#titlelabel, -.yui-skin-sam .yui-panel .hd, -p[data-l10n-id="ep_comments_page.comment"], -.comment-reply-input-label span, -.stepper, #importmessageabiword, #importmessageabiword > a -{ color: #64d29b; } -#ui-slider-handle, #playpause_button_icon { - background-color: #64d29b; -} -.stepper { - border-color: #64d29b; -} + --primary-color: #64d29b; + --middle-color: #d2d2d2; /* kind of grey, use for border for examples */ -/* BACKGROUND COLOR */ -#editorcontainer, #padmain { - background-color: #f9f9f9 !important; -} + --light-color: #f2f3f4; /*#f9f9f9;*/ + --super-light-color: white; + --text-color: var(--super-dark-color); + --text-soft-color: var(--dark-color); + --border-color: var(--middle-color); + --bg-soft-color: var(--light-color); + --bg-color: var(--super-light-color); -/* NEUTRAL FONT */ -body, -#innerdocbody, -#chatinput, -.toolbar ul li select, -button, input, select, textarea, -td[name=tData], -#comments, #newComments, -#sidediv, -#comments .sidebar-comment, -#timeslider #timer, .exporttype -{ font-family: Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; } + --toolbar-border: none; -/* PRIMARY FONT */ -h1, -#titlelabel, -#chatlabel, -.btn, -.yui-skin-sam .yui-panel .hd, -.reply-suggestion p:not(.reply-comment-suggest-from-p), -p[data-l10n-id="ep_comments_page.comment"], -#newComment.sidebar-comment input[type=submit], -.comment-changeTo-approve input[type=submit], -.hyperlink-dialog>.hyperlink-save -{ font-family: Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif !important; } + --main-font-family: Quicksand, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; + + --editor-padding: 40px 55px; + --editor-padding-top: 40px; +} + +/* Default scrollbar values */ +body { + --scrollbar-bg: var(--light-color); + --scrollbar-track: var(--super-light-color); + --scrollbar-thumb: var(--dark-color); +} diff --git a/src/static/skins/colibris/pad.js b/src/static/skins/colibris/pad.js index 88ddce4c38a..1a7bd938a8c 100644 --- a/src/static/skins/colibris/pad.js +++ b/src/static/skins/colibris/pad.js @@ -1,4 +1,6 @@ function customStart() { $('#pad_title').show(); + $('.buttonicon').mousedown(function() { $(this).parent().addClass('pressed'); }) + $('.buttonicon').mouseup(function() { $(this).parent().removeClass('pressed'); }) } diff --git a/src/static/skins/colibris/src/components/buttons.css b/src/static/skins/colibris/src/components/buttons.css index 93879023ec8..ccaea9d4d9a 100644 --- a/src/static/skins/colibris/src/components/buttons.css +++ b/src/static/skins/colibris/src/components/buttons.css @@ -1,21 +1,31 @@ -.btn, #mycolorpickercancel, #mycolorpickersave, #save_title button, #yui-picker-panel .button-group .yui-button button, .hyperlink-dialog>.hyperlink-save, .timeslider #editbar .buttontext, -#importsubmitinput, #forcereconnect +button, .btn { - margin-right: 10px; padding: 5px 20px; border-radius: 4px; - font-size: 13px; line-height: 1.5; width: auto; - border: none !important; + border: none; font-weight: bold; text-transform: uppercase; position: relative; background: none; - top: 0; - left: 0; + cursor: pointer; } -.btn:hover, #mycolorpickercancel:hover, #mycolorpickersave:hover, #save_title button:hover, .hyperlink-dialog>.hyperlink-save:hover, #importsubmitinput:hover, #forcereconnect:hover { - cursor: pointer; +.btn-primary +{ + background-color: #64d29b; + background-color: var(--primary-color); + color: #ffffff; + color: var(--bg-color); +} +.btn-default { + color: #485365; + color: var(--text-color); } + +.buttonicon:before, [class^="buttonicon-"]:before, [class*=" buttonicon-"]:before { + line-height: 18px; +} + + diff --git a/src/static/skins/colibris/src/components/chat.css b/src/static/skins/colibris/src/components/chat.css index 7a2979e02c1..61d992c5f21 100644 --- a/src/static/skins/colibris/src/components/chat.css +++ b/src/static/skins/colibris/src/components/chat.css @@ -1,33 +1,43 @@ #chatbox { + background-color: transparent !important; + color: var(--text-color); +} +.chat-content { background: none; padding: 0; - background-color: white; - border: none; - box-shadow: 0 0 0 1px rgba(99, 114, 130, 0.16), 0 8px 16px rgba(27, 39, 51, 0.08); width: 400px; height: 300px; - background-color: #f9f9f9 !important; + background-color: #f2f3f4; + background-color: var(--bg-soft-color); } -#chatbox.stickyChat { - width: 193px !important; - border: none !important; +.chat-content, #chaticon { + box-shadow: 0 0 0 1px rgba(99, 114, 130, 0.16), 0 8px 16px rgba(27, 39, 51, 0.08); + border: none; } -#chatbox.stickyChat.chatAndUsersChat{ - margin-top: 181px; +#chaticon { + padding: 10px 20px; + background-color: #f2f3f4; + background-color: var(--bg-soft-color); + color: #485365; + color: var(--text-color); + right: 30px; +} + +#chatbox.stickyChat .chat-content { + border: none; box-shadow: none; - border-top: 1px solid #d2d2d2 !important; - padding: 0!important; + background-color: #f2f3f4; + background-color: var(--bg-soft-color); } #titlebar { bottom: 0; - line-height: 39px; + line-height: 44px; height: 44px; padding: 0 7px; z-index: 20000; - border-bottom: 1px solid #d2d2d2; } #titlelabel, #chatlabel { @@ -35,80 +45,40 @@ font-weight: bold; } -#titlelabel { font-size: 16px; } +#titlebar #titlelabel { font-size: 16px; } #chatlabel { margin-right: 15px; } #chattext { - top: 45px; - font-size: 13px; - bottom: 52px; - overflow-y: auto; padding: 0; - border: none; - border-bottom: 1px solid #cccccc; -} - -.plugin-ep_author_neat #chattext { - padding: 10px; -} - -.plugin-ep_author_neat #chattext.authorColors p, -.plugin-ep_author_neat #chattext.authorColors span { - background-color: transparent !important; -} - -#chattext p b { - color: #4c4c4c; + border-top: 1px solid #ffffff; + border-top: 1px solid var(--bg-color); + border-bottom: 1px solid #ffffff; + border-bottom: 1px solid var(--bg-color); + background-color: inherit; + color: inherit; } - -#chattext::-webkit-scrollbar-track { - background-color: #f6f6f6; - border: 1px solid #f0f0f0; +#chattext p { + padding: 4px 10px; } - -#chattext::-webkit-scrollbar { - width: 7px; -} - -#chattext::-webkit-scrollbar-thumb { - border-radius: 10px; - background-color: #C5C5C5; +#chattext:not(.authorColors) p:first-child { + padding-top: 10px; } - -#chatbox.stickyChat #chattext { - padding: 0px; +#chattext:not(.authorColors) p:last-child { + padding-bottom: 10px; } #chatinputbox { padding: 8px; } - -#chatinput { - width: calc(100% - 20px); - float: right; -} - -.plugin-ep_author_neat #chatbox.stickyChat #chattext { - padding: 5px 3px; -} - -#chaticon { - box-shadow: 0 0 0 1px rgba(99, 114, 130, 0.16), 0 8px 16px rgba(27, 39, 51, 0.08); - border: none; - padding: 10px 20px; - right: 30px; +#chatinputbox #chatinput { + background-color: #ffffff; + background-color: var(--bg-color); } @media (max-width: 720px) { #chaticon { right: 0; - bottom: 44px; - } - - #chatbox { - width: 100%; - right: 0; } - #titlesticky { display: none; } + .stick-to-screen-btn { display: none; } } \ No newline at end of file diff --git a/src/static/skins/colibris/src/components/form.css b/src/static/skins/colibris/src/components/form.css index 5d34fc865d3..aa82218c2af 100644 --- a/src/static/skins/colibris/src/components/form.css +++ b/src/static/skins/colibris/src/components/form.css @@ -1,9 +1,114 @@ -#input_title, #chatinput, .hyperlink-dialog>.hyperlink-url { - border: 1px solid #d2d2d2; - height: 18px; +input[type="text"], select, textarea, .nice-select { border-radius: 3px; + box-shadow: none; + border: none; + outline: 0; +} + +input[type="text"], textarea { padding: 8px 10px; - background: none !important; - background-color: white !important; - box-shadow: none !important; -} \ No newline at end of file + background-color: #f2f3f4; + background-color: var(--bg-soft-color); + border: none; + color: #485365; + color: var(--text-color); +} +input[type="text"]::placeholder, textarea::placeholder { + color: #576273; + color: var(--text-soft-color); +} +select, .nice-select { + background-color: #f2f3f4; + background-color: var(--bg-soft-color); + border: none; + padding: 4px 10px; + padding-right: 25px; + font-weight: bold; + line-height: inherit; +} +.nice-select .list { + background-color: #f2f3f4; + background-color: var(--bg-soft-color); +} +.nice-select .option:hover,.nice-select .option.focus,.nice-select .option.selected.focus { + background-color: #ffffff; + background-color: var(--bg-color); +} +.nice-select .option { + padding: 0 15px; +} +.popup .nice-select .list { + right: 0; + left: auto; +} + + +/* Checkboxes + ========================================================================== */ +/* Remove default checkbox */ +[type="checkbox"]:not(:checked), +[type="checkbox"]:checked { + position: absolute; + opacity: 0; + pointer-events: none; +} + +[type="checkbox"] + label { + position: relative; + padding-left: 2.5rem; + cursor: pointer; + display: inline-block; + height: 1.4rem; + line-height: 1.4rem; + font-size: 1rem; +} + +[type="checkbox"] + label:before, +[type="checkbox"] + label:after { + content: ''; + position: absolute; + margin-top: 4px; + transition: all .2s ease-in-out; +} + +/* BEFORE, the container*/ +[type="checkbox"] + label:before { + width: 24px; + height: 14px; + top: 0; + left: 0; + border-radius: 6px; + border: 2px solid #576273; + border: 2px solid var(--text-soft-color); + background-color: #f2f3f4; + background-color: var(--bg-soft-color); + opacity: .7; +} +[type="checkbox"]:checked + label:before { + background-color: transparent; + border-color: #64d29b; + border-color: var(--primary-color); +} + +/* AFTER, the circle moving */ +[type="checkbox"] + label:after { + width: 16px; + height: 16px; + border-radius: 50%; + background-color: #576273; + background-color: var(--text-soft-color); + top: -1px; + left: -3px; +} +[type="checkbox"]:checked + label:after { + background-color: #64d29b; + background-color: var(--primary-color); + transform: translateX(14px); +} + +[type="checkbox"]:checked:disabled + label, +[type="checkbox"]:checked:disabled + label:before, +[type="checkbox"]:checked:disabled + label:after { + cursor: not-allowed; + opacity: .4; +} diff --git a/src/static/skins/colibris/src/components/gritter.css b/src/static/skins/colibris/src/components/gritter.css index 7c514010c64..fa255fe4a22 100644 --- a/src/static/skins/colibris/src/components/gritter.css +++ b/src/static/skins/colibris/src/components/gritter.css @@ -1,28 +1,65 @@ -/* Popups at the bottom of the page to indicate when the pad expires, and others stuff */ +.gritter-item:not(.error) .popup-content{ + background-color: #64d29b; + background-color: var(--primary-color); + color: #ffffff; + color: var(--bg-color); +} +.gritter-item .popup-content { + padding: 15px; + box-shadow: 0 0 0 1px rgba(99, 114, 130, 0.16), 0 8px 16px rgba(27, 39, 51, 0.08); +} +#gritter-container.bottom .gritter-item .popup-content { + margin-top: 10px; +} +#gritter-container.top .gritter-item .popup-content { + margin-bottom: 10px; +} +.gritter-item p { + margin: 0 !important; +} +.gritter-item .gritter-title { + margin-bottom: 10px; +} +.gritter-item .gritter-close { + margin-left: 15px; + margin-right: 0px; +} +.gritter-item:not(.error) .gritter-close .buttonicon { + color: #ffffff; + color: var(--bg-color); +} -.gritter-title { - text-shadow: none; +/* CHAT GRIITER ITEM */ +.gritter-item.chat-gritter-msg:not(.error) .popup-content { + background-color: white; + background-color: var(--bg-color); + color: #485365; + color: var(--text-color); +} +.gritter-item.chat-gritter-msg .gritter-content { + text-align: left; +} +.gritter-item.chat-gritter-msg .author-name { + font-weight: bold; + margin-right: 5px; +} +.gritter-item.chat-gritter-msg:not(.error) .gritter-close .buttonicon { + color: #485365; + color: var(--text-color); } -#gritter-notice-wrapper { - background-color: #fff; - box-shadow: 0 0 0 1px rgba(99, 114, 130, 0.16), 0 8px 16px rgba(27, 39, 51, 0.08); - border-radius: 3px; - padding: 15px 20px 5px 30px; - bottom: 50px !important; - right: 30px !important; +.gritter-item.saved-revision { + max-width: 600px; } -@media (max-width: 1100px) { - #gritter-notice-wrapper { - display: none; - } +#gritter-container.top .gritter-item.popup > .popup-content { + transform: scale(0.8) translateY(-100px); +} +#gritter-container.bottom .gritter-item.popup > .popup-content { + transform: scale(0.8) translateY(0px); } -.gritter-item { - font-family: Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif !important; - color: #4e545b; - font-size: 12px; - line-height: 20px; - padding: 0; +.gritter-item.popup.popup-show > .popup-content { + transform: scale(1) translateY(0) !important; + transition: all 0.4s cubic-bezier(0.74, -0.05, 0.27, 1.75) !important; } \ No newline at end of file diff --git a/src/static/skins/colibris/src/components/import-export.css b/src/static/skins/colibris/src/components/import-export.css index bdaa184e9c2..d8425d89529 100644 --- a/src/static/skins/colibris/src/components/import-export.css +++ b/src/static/skins/colibris/src/components/import-export.css @@ -1,32 +1,16 @@ -#exportColumn { - margin-top: 0; - padding-left: 20px; - width: calc(50% - 20px); -} - #importmessageabiword { font-style: italic; - font-size: 13px; + color: #64d29b; + color: var(--primary-color); } #importmessageabiword > a { font-weight: bold; text-decoration: underline; -} - -.exportlink { - font-size: 14px; - margin: 0; - margin-bottom: 7px; - margin-left: 10px; -} - -.exporttype { - margin-left: 5px; - font-size: 14px; + color: #64d29b; + color: var(--primary-color); } #importmessagefail { - font-size: 13px; margin-top: 10px; } diff --git a/src/static/skins/colibris/src/components/popup.css b/src/static/skins/colibris/src/components/popup.css index 7b3c0381b7a..0a50c9bbe15 100644 --- a/src/static/skins/colibris/src/components/popup.css +++ b/src/static/skins/colibris/src/components/popup.css @@ -1,30 +1,70 @@ -#users, -#mycolorpicker, -.popup, -.hyperlink-dialog { - border-radius: 3px; - padding: 20px 20px; +.popup-content { + border-radius: 5px; + padding: 25px; background: none; - background-color: white; + background-color: #ffffff; + background-color: var(--bg-color); + color: #576273; + color: var(--text-soft-color); border: none; box-shadow: 0 0 0 1px rgba(99, 114, 130, 0.16), 0 8px 16px rgba(27, 39, 51, 0.08); } -#users input[type=text], -.popup input[type=text] { - border: none !important; - border-bottom: 1px solid #d7d8da !important; +#mycolorpicker, #users { + min-width: 0; } .popup h1 { - margin-bottom: 15px; + margin-bottom: 20px; + font-size: 1.6rem; } .popup h2 { margin-bottom: 15px; + margin-top: 20px; + color: #485365; + color: var(--text-color); } -.popup p { +.popup:not(.comment-modal) p { margin: 10px 0; } +.popup .dropdowns-container .dropdown-line { + margin-top: 15px; +} +.popup .dropdowns-container label { + width: 120px; + display: inline-block; +} +.popup .dropdowns-container .nice-select { + min-width: 180px; +} + +@media (max-width: 720px) { + .popup-content { + padding: 1rem; + box-shadow: 0 0 0 1px rgba(99, 114, 130, 0.16), -1px 1px 16px 3px rgba(27, 39, 51, 0.12); + } + .popup .dropdowns-container select { + min-width: 0; + } +} + +/* SKIN Variants Popup */ +#skin-variants { + bottom: 0; + left: 0; + right: auto; + top: auto; +} +#skin-variants .popup-content > p { + margin-top: 25px; +} +#skin-variants-result{ + background-color: #f2f3f4; + background-color: var(--bg-soft-color); +} +.skin-variant-container { + text-transform: capitalize; +} diff --git a/src/static/skins/colibris/src/components/scrollbars.css b/src/static/skins/colibris/src/components/scrollbars.css new file mode 100644 index 00000000000..cd4ea08b59a --- /dev/null +++ b/src/static/skins/colibris/src/components/scrollbars.css @@ -0,0 +1,39 @@ +@media (min-width: 721px) { + ::-webkit-scrollbar-track { + background-color: white; + background-color: var(--scrollbar-track); + border-radius: 10px; + border: 7px solid #f2f3f4; + border: 7px solid var(--scrollbar-bg); + } + + ::-webkit-scrollbar { + width: 22px; + } + + ::-webkit-scrollbar-thumb { + border-radius: 10px; + background-color: #576273; + background-color: var(--scrollbar-thumb); + border: 7px solid #f2f3f4; + border: 7px solid var(--scrollbar-bg); + } +} + +.thin-scrollbar::-webkit-scrollbar-track { + background-color: #f2f3f4; + background-color: var(--bg-soft-color); + border-radius: 0px; + border: none; +} + +.thin-scrollbar::-webkit-scrollbar { + width: 6px; +} + +.thin-scrollbar::-webkit-scrollbar-thumb { + border-radius: 0px; + background-color: #d2d2d2; + background-color: var(--middle-color); + border: none; +} \ No newline at end of file diff --git a/src/static/skins/colibris/src/components/sidediv.css b/src/static/skins/colibris/src/components/sidediv.css index 2fb8377476f..63eee2dd526 100644 --- a/src/static/skins/colibris/src/components/sidediv.css +++ b/src/static/skins/colibris/src/components/sidediv.css @@ -1,14 +1,16 @@ #sidediv { background-color: transparent; border: none; + opacity: .8; } #sidedivinner>div:before { - font-size: 13px; + font-family: var(--main-font-family); /* the parent div have font-family monospace (line number) */ + color: #485365; + color: var(--text-color); padding-right: 18px !important; - color: #6a6a6b; - text-transform: uppercase; - font-size: 11px !important; + text-transform: capitalize; + font-size: 12px !important; font-weight: bold; } @@ -21,8 +23,10 @@ #sidedivinner>div { line-height: 24px; - font-size: 10px !important; - color: #a0a0a0; + font-size: 9px !important; + font-family: RobotoMono; + color: #576273; + color: var(--text-soft-color); } #sidedivinner.authorColors>div, #sidedivinner.authorColors>div.primary-none, #sidedivinner>div { diff --git a/src/static/skins/colibris/src/components/table-of-content.css b/src/static/skins/colibris/src/components/table-of-content.css index 0a063e3b47c..fd6c5ea2bef 100644 --- a/src/static/skins/colibris/src/components/table-of-content.css +++ b/src/static/skins/colibris/src/components/table-of-content.css @@ -1,9 +1,9 @@ #toc { - background: none !important; - background-color: rgb(249, 249, 249) !important; - padding: 20px !important; + padding: 20px 20px 10px 10px !important; min-width: 146px !important; - padding-left: 15px !important; + background-color: transparent !important; + border: none !important; + order: -2; } #tocItems { @@ -12,4 +12,10 @@ .plugin-ep_resizable_bars #toc { min-width: 186px !important; +} + +@media (max-width: 1200px) { + #toc { + padding-top: 10px !important + } } \ No newline at end of file diff --git a/src/static/skins/colibris/src/components/toolbar.css b/src/static/skins/colibris/src/components/toolbar.css index ce19b5be898..354e1324965 100644 --- a/src/static/skins/colibris/src/components/toolbar.css +++ b/src/static/skins/colibris/src/components/toolbar.css @@ -1,26 +1,50 @@ .toolbar { - height: 39px !important; - padding-top: 0; - margin: 0; - background-color: white !important; - background: none; - border: 1px solid #d2d2d2 + border-bottom: none; + padding: 0; + background-color: #ffffff; + background-color: var(--bg-color); + color: #576273; + color: var(--text-soft-color); + border-bottom: none; +} + +#editbar.editor-scrolled { + border-bottom: 1px solid #d2d2d2; + border-bottom: var(--toolbar-border); +} + +.toolbar ul { + align-items: center; +} + +.toolbar ul.menu_left { + padding-left: 5px; +} + +.toolbar ul li { + margin: 7px 1px; +} + +.toolbar ul li a, .toolbar .buttonicon { + color: inherit; } .toolbar .buttonicon { background-color: transparent; - font-size: 14px; - color: #767676; + font-size: 15px; +} +.buttonicon-insertorderedlist:before, +.buttonicon-insertunorderedlist:before, +.buttonicon-indent:before, +.buttonicon-outdent:before { + font-size: 16px !important; } .toolbar ul li.separator { - padding: 0; - visibility: visible; + visibility: hidden; width: 1px; margin: 0 10px; - margin-right: 6px; - height: 39px; - background-color: rgba(78, 85, 92, 0.22); + position: relative; } .toolbar.condensed ul li { @@ -35,109 +59,95 @@ background-color: transparent; background: none; border: none; - margin-top: 6px; + border-radius: 3px !important; + transition: background-color .1s; } -.toolbar ul li a:hover, -.toolbar ul li a.selected, -.toolbar ul li a:focus { - background: none !important; - border-radius: 0; +.toolbar ul li a:hover, .toolbar ul li select:hover { + background-color: #f2f3f4; + background-color: var(--bg-soft-color); + color: #485365; + color: var(--text-color); } - -.toolbar ul li a:hover { - background:#f7f7f7!important +.toolbar ul li a.selected { + background-color: #f2f3f4; + background-color: var(--bg-soft-color); } - -.toolbar ul li a.selected, -.toolbar ul li a:focus { - background: #eaeaea!important; +.toolbar ul li a.pressed, +.toolbar ul li select:active { + color: #64d29b; + color: var(--primary-color); } -.toolbar ul li select { - border: none; - border-bottom: 1px solid #d7d8da; - border-radius: 0; - width: 90px; - margin-top: 5px; +.toolbar ul li select:active option { + background-color: #ffffff; + background-color: var(--bg-color); + color: #576273; + color: var(--text-soft-color); + padding: 5px; } -.toolbar ul { - height: 39px; +.toolbar .menu_right li a.selected { + background-color: #576273; + background-color: var(--text-soft-color); + color: #ffffff; + color: var(--bg-color); } -.toolbar ul.menu_left { - padding-left: 8px; +.toolbar ul li[data-key=showusers] { + margin: 0; + margin-left: 15px; + width: 45px; + height: 100%; +} +.toolbar ul li[data-key=showusers] > a { + width: 100%; + height: 100%; + border-radius: 0 !important; } -.toolbar ul.menu_right { - right: 0; - padding: 0; +.toolbar .menu_right .separator { + display: none; +} +.toolbar .menu_right li { + margin-left: 10px; } -.toolbar ul li[data-key=showusers] a { - margin: 0; - height: 59px; - line-height: 25px; - width: 45px; - margin-left: -10px; - border-radius: 0; +.toolbar.cropped .menu_left { + height: 39px; + padding-top: 1px; +} +.toolbar .show-more-icon-btn { + font-size: 1.8rem; + color: #64d29b; + color: var(--primary-color); } @media (max-width: 1000px) { .toolbar ul li.separator { - margin: 0 2px; + margin: 0 5px; background: none; display: block; } - - .toolbar ul li[data-key=showusers] a { - margin-left: 0 !important; - } } @media (max-width: 720px) { - .toolbar ul { - height: 39px; - background: none; - background-color: transparent; - overflow-x: visible; - } - .toolbar ul.menu_left { - padding: 2px 0 0 0; + + .toolbar ul li { + margin: 5px 2px; } - .toolbar ul.menu_right { - left: 0; - padding-left: 8px; - padding-top: 8px; - height: 35px !important; + + .toolbar .menu_right { border-top: 1px solid #d2d2d2; - background-color: white; - } - .toolbar ul li a { - padding: 4px 5px !important; + border-top: var(--toolbar-border); + background-color: #ffffff; + background-color: var(--bg-color); + padding: 0; } - .toolbar ul li[data-key=showusers] { - position: absolute; - right: 0; - top: 0; - } - .toolbar ul li[data-key=showusers] a { - padding-top: 9px !important; - } .toolbar ul li a:hover { background-color: transparent; } - #connectivity, #embed, #import_export, #settings { bottom: 42px; } - - li.superscript, - li.subscript, - li[data-key="undo"], - li[data-key="redo"] { - display: none; - } - - .toolbar ul li.separator { margin: 0; } + .toolbar ul li.separator { margin: 0; display: none; } } diff --git a/src/static/skins/colibris/src/components/users.css b/src/static/skins/colibris/src/components/users.css index bb5fbb49500..7a398b17c7c 100644 --- a/src/static/skins/colibris/src/components/users.css +++ b/src/static/skins/colibris/src/components/users.css @@ -1,5 +1,18 @@ table#otheruserstable { - margin-top: 10px !important; + margin-top: 20px; +} + +.popup#users.chatAndUsers > .popup-content { + padding: 20px 10px; + height: 250px; + border-left: none; + transition: none; + border-bottom-color: #d2d2d2; + border-bottom-color: var(--border-color); +} +.popup#users.chatAndUsers #mycolorpicker.popup { + right: calc(100% + 30px); + top: 15px; } #otheruserstable .swatch { @@ -16,80 +29,31 @@ table#otheruserstable { margin-left: 35px; } -#myusernameedit { - width: 110px; -} - -#myswatchbox { - background: none; - float: left; - position: relative; - left: 0; - top: 0; +input#myusernameedit { + min-width: 110px; border: none !important; + background-color: transparent !important; + border-bottom: 1px solid #d2d2d2 !important; + border-bottom: 1px solid var(--border-color) !important; + border-radius: 0; + padding-bottom: 5px; } #myswatch { border-radius: 50%; } -#nootherusers { - padding: 0; -} - -#mycolorpicker { - width: auto; - height: auto; - left: -280px; -} - #colorpicker { margin-bottom: 25px; } -#mycolorpickercancel { - padding-left: 3px; -} - -#mycolorpickersave { - color: #fff; -} - #mycolorpickerpreview { - float: right; - top: 0; - left: 0; - position: relative; border-radius: 50%; - height: 20px; - width: 20px; } @media (max-width: 720px) { - #users { - bottom: 42px; - top: initial !important; - height: auto !important; - } - #mycolorpicker { - width: auto; - height: auto; right: 0; - bottom: 42px; left: initial; - top: initial !important; } -} - -#users.chatAndUsers { - width: 172px!important; - box-shadow: none; - border: none !important; - padding: 10px; - padding-top: 15px; -} - -#users.chatAndUsers #myusernameedit { - width: calc(100% - 10px); } \ No newline at end of file diff --git a/src/static/skins/colibris/src/general.css b/src/static/skins/colibris/src/general.css new file mode 100644 index 00000000000..f51d46ce5aa --- /dev/null +++ b/src/static/skins/colibris/src/general.css @@ -0,0 +1,15 @@ +html { + font-size: 15px; +} + +body { + color: #485365; + color: var(--text-color); + font-family: Quicksand, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; + font-family: var(--main-font-family); +} + +h1 { + color: #64d29b; + color: var(--primary-color); +} \ No newline at end of file diff --git a/src/static/skins/colibris/src/layout.css b/src/static/skins/colibris/src/layout.css index 4a9827dc404..b1305048be1 100644 --- a/src/static/skins/colibris/src/layout.css +++ b/src/static/skins/colibris/src/layout.css @@ -1,77 +1,44 @@ -#connectivity, -#embed, -#import_export, -#settings, -#users { - top: 38px; - right: 30px; -} - -#editorcontainer { - top: 41px !important; - padding-top: 0 !important; -} - -#outerdocbody, .timeslider #editorcontainerbox { - max-width: 900px; +#outerdocbody { margin: 0 auto; padding-top: 20px; + width: 100%; } -#outerdocbody { - overflow-y: auto; - position: relative; - background-color: transparent; - padding-left: 40px; /* space for side div */ +#editorcontainerbox { + background-color: #ffffff; + background-color: var(--bg-color); } -#outerdocbody.plugin-ep_author_neat { - padding-left: 120px; /* more space for sidediv */ -} -@media (max-width:600px) { - #outerdocbody.plugin-ep_author_neat { padding-left: 0; } - #options-linenoscheck { display:none; } - #options-linenoscheck ~ label { display:none; } - #outerdocbody { padding-left: 0; } /* side div is hidden now */ +#editorcontainerbox .sticky-container { + width: 250px; } #outerdocbody.sidediv-hidden { padding-left: 0; /* sidediv hidden */ } -#outerdocbody iframe { - display: block; - position: relative; - left: 0 !important; - top: 0; -} - -#outerdocbody iframe, .timeslider #editorcontainerbox { - padding: 55px; - box-shadow: 0 0 0 0.5px rgba(209, 209, 209, 0.32), 0 0 7pt 0pt rgba(204, 204, 204, 0.52); +#outerdocbody iframe, #outerdocbody > #innerdocbody { + max-width: 900px; + padding: 40px 55px; + padding: var(--editor-padding); + padding-top: 40px; + padding-top: var(--editor-padding-top); + box-shadow: none; border: 0; - border-radius: 5px; - background-color: white; - width: calc(100% - 110px) !important; /* 100% - padding */ + border-radius: 8px; + background-color: #ffffff; + background-color: var(--bg-color); + color: #485365; + color: var(--text-color); } - #sidediv { - position: absolute; - right: calc(100% - 35px); - left: initial; - top: 74px !important; - padding: 0; + padding-top: 40px; /* = #innerdocbody iframe padding-top */ + padding-top: var(--editor-padding-top); } -#outerdocbody.plugin-ep_author_neat #sidediv { - right: calc(100% - 113px); -} - -/* Fixs comments_page & author_hover does not take in account the document padding */ -.comment-modal { margin-top: 75px !important; margin-left: 45px; } +/* Fixs author_hover does not take in account the document padding */ .authortooltip { margin-top: 65px !important; margin-left: 60px; } .caretindicator { margin-top: 61px!important; margin-left: 52px; } - #outerdocbody.plugin-ep_author_neat .authortooltip{ margin-left: 145px; } #outerdocbody.plugin-ep_author_neat .caretindicator{ margin-left: 52px; margin-top: 65px!important;} @media (max-width:1000px) { @@ -80,33 +47,20 @@ #outerdocbody.plugin-ep_author_neat .caretindicator{ margin-left: 17px; } } -@media (min-width: 1381px) { - #outerdocbody.plugin-ep_comments_page { padding-right: 150px; } } - #outerdocbody.plugin-ep_comments_page #comments { left: calc(100% - 150px) } -@media (max-width: 1380px) { - #outerdocbody.plugin-ep_comments_page #comments { left: calc(100% - 220px) } - #outerdocbody.plugin-ep_comments_page { padding-right: 220px; } -} -@media (max-width: 1278px) { - #outerdocbody.plugin-ep_comments_page #comments { display: none; } - #outerdocbody.plugin-ep_comments_page { padding-right: 0px; } -} - @media (max-width:1000px) { #outerdocbody { - max-width: none; padding-top: 0; } - #outerdocbody iframe, .timeslider #editorcontainerbox { - padding: 20px !important; + #outerdocbody iframe, #outerdocbody > #innerdocbody { + padding: 20px; + max-width: none; border-radius: 0; - width: calc(100% - 40px) !important; /* 100% - padding */ } #sidediv { - top: 20px !important; /* = #outerdocbody iframe padding-top */ + padding-top: 20px !important; /* = #outerdocbody iframe padding-top */ } - .comment-modal, .authortooltip { margin-top: 20px !important; } + .authortooltip { margin-top: 20px !important; } .caretindicator { margin-top: 0px !important; } #outerdocbody.plugin-ep_author_neat .caretindicator { margin-top: 10px !important; } @@ -118,17 +72,14 @@ } @media (max-width:600px) { - html { overflow: scroll; } - #outerdocbody { - width: 100%; + #outerdocbody iframe, #outerdocbody > #innerdocbody { + padding: 15px; } - #outerdocbody iframe, .timeslider #editorcontainerbox { - padding: 15px !important; - width: calc(100% - 30px) !important; /* 100% - padding */ - } - #sidediv { - display: none; - top: 15px !important; /* = #outerdocbody iframe padding-top */ + /* #sidediv is hidden at this size of screen */ +} +@media only screen and (max-width: 720px) { + #editorcontainerbox { + margin-bottom: 39px; /* margin for bottom toolbar */ } } diff --git a/src/static/skins/colibris/src/pad-editor.css b/src/static/skins/colibris/src/pad-editor.css index aae79bf844c..1d50ed0f9c9 100644 --- a/src/static/skins/colibris/src/pad-editor.css +++ b/src/static/skins/colibris/src/pad-editor.css @@ -1,43 +1,34 @@ -#innerdocbody, #padcontent { +#innerdocbody { font-size: 15px; line-height: 25px; padding: 0; + background: transparent; + color: #485365; + color: var(--text-color); } -#innerdocbody span, #padcontent span { +#innerdocbody span, #innerdocbody span { padding: 4px 0 !important; } -#innerdocbody h1 span, #padcontent h1 span { +#innerdocbody h1 span, #innerdocbody h1 span { padding: 0; } -body { - overflow: hidden; -} - option { text-transform: capitalize; } -h1 { +#innerdocbody h1 { font-size: 2.5em !important; } -h3 { +#innerdocbody h3 { font-size: 1.15em; letter-spacing: 1px; } -a { - color: #3f51b5; -} - -h1, h2, h3, h4, h5, h6 { - line-height: 120%; -} - - - - - +#innerdocbody a { + color: #64d29b; + color: var(--primary-color); +} \ No newline at end of file diff --git a/src/static/skins/colibris/src/pad-variants.css b/src/static/skins/colibris/src/pad-variants.css new file mode 100644 index 00000000000..6841878fb95 --- /dev/null +++ b/src/static/skins/colibris/src/pad-variants.css @@ -0,0 +1,228 @@ +/* =========================== */ +/* === Super Light Toolbar === */ +/* =========================== */ +.super-light-toolbar .toolbar, .super-light-toolbar .popup-content { + --text-color: var(--super-dark-color); + --text-soft-color: var(--dark-color); + --border-color: #e4e6e9; + --bg-soft-color: var(--light-color); + --bg-color: var(--super-light-color); +} +/* ===================== */ +/* === Light Toolbar === */ +/* ===================== */ +.light-toolbar .toolbar, .light-toolbar .popup-content { + --text-color: var(--super-dark-color); + --text-soft-color: var(--dark-color); + --border-color: var(--middle-color); + --bg-soft-color: var(--super-light-color); + --bg-color: var(--light-color); +} +/* ========================== */ +/* === Super Dark Toolbar === */ +/* ========================== */ +.super-dark-toolbar .toolbar, .super-dark-toolbar .popup-content { + --text-color: var(--super-light-color); + --text-soft-color: var(--light-color); + --border-color: var(--dark-color); + --bg-soft-color: var(--dark-color); + --bg-color: var(--super-dark-color); +} +.super-dark-toolbar.super-dark-editor .popup-content { + border: 1px solid var(--dark-color); + box-shadow: none; +} +/* ==================== */ +/* === Dark Toolbar === */ +/* ==================== */ +.dark-toolbar .toolbar, .dark-toolbar .popup-content { + --text-color: var(--super-light-color); + --text-soft-color: var(--light-color); + --border-color: var(--super-dark-color); + --bg-soft-color: var(--super-dark-color); + --bg-color: var(--dark-color); +} + + + + + +/* ============================ */ +/* == Super Light Background == */ +/* ============================ */ +.super-light-background #editorcontainerbox, .super-light-background #sidediv, +.super-light-background #chatbox, .super-light-background #outerdocbody, .super-light-background { + --text-color: var(--super-dark-color); + --text-soft-color: var(--dark-color); + --border-color: #e4e6e9; + --bg-soft-color: var(--light-color); + --bg-color: var(--super-light-color); +} +.super-light-background body, .full-width-editor.super-light-editor body:not(.comments-active) { + --scrollbar-bg: var(--super-light-color); + --scrollbar-track: var(--light-color); + --scrollbar-thumb: var(--dark-color); +} +.super-light-background .compact-display-content { + background-color: var(--super-light-color); +} +/* ====================== */ +/* == Light Background == */ +/* ====================== */ +.light-background #editorcontainerbox, .light-background #sidediv, +.light-background #chatbox, .light-background #outerdocbody, .light-background { + --text-color: var(--super-dark-color); + --text-soft-color: var(--dark-color); + --border-color: var(--middle-color); + --bg-soft-color: var(--super-light-color); + --bg-color: var(--light-color); +} +.light-background body, .full-width-editor.light-editor body:not(.comments-active) { + --scrollbar-bg: var(--light-color); + --scrollbar-track: var(--super-light-color); + --scrollbar-thumb: var(--dark-color); +} +.light-background .compact-display-content { + background-color: var(--light-color); +} +/* =========================== */ +/* == Super Dark Background == */ +/* =========================== */ +.super-dark-background #editorcontainerbox, .super-dark-background #sidediv, +.super-dark-background #chatbox, .super-dark-background #outerdocbody, .super-dark-background { + --text-color: var(--super-light-color); + --text-soft-color: var(--light-color); + --border-color: var(--dark-color); + --bg-soft-color: var(--dark-color); + --bg-color: var(--super-dark-color); +} +.super-dark-background body, .full-width-editor.super-dark-editor body:not(.comments-active) { + --scrollbar-bg: var(--super-dark-color); + --scrollbar-track: var(--dark-color); + --scrollbar-thumb: var(--light-color); +} +.super-dark-background .compact-display-content { + background-color: var(--super-dark-color); +} +/* Special combinaison with toolbar */ +.super-dark-background.super-dark-toolbar .popup-content { + border: 1px solid var(--dark-color); + box-shadow: none; +} +/* ===================== */ +/* == Dark Background == */ +/* ===================== */ +.dark-background #editorcontainerbox, .dark-background #sidediv, +.dark-background #chatbox, .dark-background #outerdocbody, .dark-background { + --text-color: var(--super-light-color); + --text-soft-color: var(--light-color); + --border-color: var(--super-dark-color); + --bg-soft-color: var(--super-dark-color); + --bg-color: var(--dark-color); +} +.dark-background body, .full-width-editor.dark-editor body:not(.comments-active) { + --scrollbar-bg: var(--dark-color); + --scrollbar-track: var(--super-dark-color); + --scrollbar-thumb: var(--light-color); +} +.dark-background .compact-display-content { + background-color: var(--dark-color); +} +/* Special combinaison with toolbar */ +.dark-background.dark-toolbar .popup-content, .dark-editor.dark-toolbar .popup-content { + box-shadow: 0 0 14px 0px var(--super-dark-color); +} + + + + + +/* ======================== */ +/* == Super Light Editor == */ +/* ======================== */ +.super-light-editor #outerdocbody iframe, .super-light-editor #outerdocbody > #innerdocbody { + --bg-color: var(--super-light-color); +} +.super-light-editor #innerdocbody { + --text-color: var(--super-dark-color); +} +/* ================== */ +/* == Light Editor == */ +/* ================== */ +.light-editor #outerdocbody iframe, .light-editor #outerdocbody > #innerdocbody { + --bg-color: var(--light-color); +} +.light-editor #innerdocbody { + --text-color: var(--super-dark-color); +} +/* ======================= */ +/* == Super Dark Editor == */ +/* ======================= */ +.super-dark-editor #outerdocbody iframe, .super-dark-editor #outerdocbody > #innerdocbody { + --bg-color: var(--super-dark-color); +} +.super-dark-editor #innerdocbody { + --text-color: var(--super-light-color); +} +/* ================= */ +/* == Dark Editor == */ +/* ================= */ +.dark-editor #outerdocbody iframe, .dark-editor #outerdocbody > #innerdocbody { + --bg-color: var(--dark-color); +} +.dark-editor #innerdocbody { + --text-color: var(--super-light-color); +} + + +/* ======================================== */ +/* == Combinaison with background/editor == */ +/* ======================================== */ +.super-light-editor.super-light-background #outerdocbody, +.light-editor.light-background #outerdocbody, +.super-dark-editor.super-dark-background #outerdocbody, +.dark-editor.dark-background #outerdocbody { + padding-top: 0; +} +@media (min-width: 1001px) { + .super-light-editor.super-light-background, + .light-editor.light-background, + .super-dark-editor.super-dark-background, + .dark-editor.dark-background { + --editor-padding: 20px 35px; + --editor-padding-top: 20px; + } +} + +/* ===================================== */ +/* == Combinaison with toolbar/editor == */ +/* ===================================== */ +.super-light-editor.super-light-toolbar .toolbar, +.light-editor.light-toolbar .toolbar, +.super-dark-editor.super-dark-toolbar .toolbar, +.dark-editor.dark-toolbar .toolbar { + --toolbar-border: 1px solid var(--border-color); +} + + +/* ======================= */ +/* == Full Width Editor == */ +/* ======================= */ +.full-width-editor #outerdocbody iframe, .full-width-editor #outerdocbody > #innerdocbody { + max-width: none !important; + border-radius: 0; +} +.full-width-editor #outerdocbody { + padding: 0; + margin: 0; +} +@media (min-width: 1001px) { + .full-width-editor { + --editor-padding: 20px 35px !important; + --editor-padding-top: 20px !important; + } +} +.full-width-editor ::-webkit-scrollbar-track, +.full-width-editor ::-webkit-scrollbar-thumb { + border-radius: 0px; +} \ No newline at end of file diff --git a/src/static/skins/colibris/src/plugins/brightcolorpicker.css b/src/static/skins/colibris/src/plugins/brightcolorpicker.css index 32480cc9c5f..8db2880c12c 100644 --- a/src/static/skins/colibris/src/plugins/brightcolorpicker.css +++ b/src/static/skins/colibris/src/plugins/brightcolorpicker.css @@ -1,13 +1,7 @@ -#colorpicker { - left: -200px !important; - top: 0px !important; -} - #colorpicker a.brightColorPicker-cancelButton { background: none; padding: 0; padding-top: 10px; - font-family: Arial, sans-serif; font-weight: bold; border: none; } diff --git a/src/static/skins/colibris/src/plugins/comments.css b/src/static/skins/colibris/src/plugins/comments.css new file mode 100644 index 00000000000..005890ef484 --- /dev/null +++ b/src/static/skins/colibris/src/plugins/comments.css @@ -0,0 +1,112 @@ +.sidebar-comment .btn { + margin-top: 10px; + padding: 3px 8px; + font-size: .9rem; + margin: 10px 0 5px 0; +} +.sidebar-comment .btn.btn-primary:not(#comment-create-btn) { + background-color: #576273; + background-color: var(--text-soft-color); +} +.sidebar-comment .suggestion-create { + margin-top: 10px; +} +.suggestion-display .from-value, .suggestion-display .to-value { + color: #64d29b; + color: var(--primary-color); + font-weight: bold; + opacity: 1; +} +.suggestion-display .from-value { + margin-right: 5px; +} +.comment-actions-wrapper .buttonicon { + opacity: .8; +} +.comment-actions-wrapper .buttonicon:hover { + opacity: 1; +} +.comment-actions-wrapper .comment-edit { + margin-right: 5px; +} +[type="checkbox"] + label.label-suggestion-checkbox { + margin-left: 5px; + padding-left: 2.4rem; +} +.sidebar-comment .full-display-content { + margin-left: -10px; + box-shadow: none; + background-color: #f2f3f4; + background-color: var(--bg-soft-color); + border: 1px solid #ffffff; + border: 1px solid var(--bg-color); +} +.comment-reply { + border-top: 1px solid #ffffff; + border-top: 1px solid var(--bg-color); + background-color: inherit; +} +.comment-reply textarea, .comment-reply input[type="text"] { + background-color: #ffffff; + background-color: var(--bg-color); +} +.btn.revert-suggestion-btn { + padding-left: 0; +} +.comment-edit-form { + margin-top: 15px; +} + +/* MODAL */ +.comment-modal .full-display-content { + box-shadow: none; + margin: 0 !important; + border: none; + background-color: #ffffff; + background-color: var(--bg-color); +} +.comment-modal .comment-modal-comment { + padding: 0; +} +.comment-modal .comment-reply textarea, .comment-modal .comment-reply input[type="text"] { + background-color: #f2f3f4; + background-color: var(--bg-soft-color); +} +.comment-modal .comment-reply { + border-top: 1px solid #f2f3f4; + border-top: 1px solid var(--bg-soft-color); +} +.comment-modal .full-display-content .comment-title-wrapper, +.comment-modal .full-display-content .comment-reply { + padding: 15px; +} + + +/* NEW COMMENT POPUP */ +.new-comment-popup textarea { + background-color: #f2f3f4; + background-color: var(--bg-soft-color); +} +.new-comment-popup .suggestion { + margin-bottom: 10px; +} + + +/* EDITOR COMMENTEED LINE */ +#innerdocbody .ace-line .comment { + background-color: #fffacc; + color: var(--super-dark-color); +} + + +@media (min-width: 1200px) { + #comments { + width: 300px; + } + .sidebar-comment .full-display-content { + margin-left: 10px; + } + .compact-display-content { + padding-left: 20px; + } +} \ No newline at end of file diff --git a/src/static/skins/colibris/src/plugins/comments_page.css b/src/static/skins/colibris/src/plugins/comments_page.css deleted file mode 100644 index f11fa61c8a4..00000000000 --- a/src/static/skins/colibris/src/plugins/comments_page.css +++ /dev/null @@ -1,290 +0,0 @@ -.comment.selected { - color: #a28239; -} - -#newComment { - box-shadow: 0 0 0 1px rgba(99, 114, 130, 0.16), 0 8px 16px rgba(27, 39, 51, 0.08); - border: none; - padding: 15px; -} - -p[data-l10n-id="ep_comments_page.comment"] { - font-weight: 900; - font-size: 16px; - text-transform: uppercase; - margin-bottom: 10px; -} - -#newComment.sidebar-comment textarea:not(.comment-suggest-from) { - border: 1px solid #d2d2d2; - border-radius: 3px; - padding: 8px 10px; - height: 80px; - padding: 8px; - font-size: 14px; - width: calc(100% - 15px); -} - -#newComment.sidebar-comment .comment-suggest-from { - height: auto !important; - font-size: 14px; - padding: 8px; - width: calc(100% - 15px) !important; - background-color: #f9f9f9; - margin-top: 8px; - border: 1px solid #f3eeee; - border-left: 4px solid #a7a7a7; - border-radius: 3px; -} - -.comment-suggest { - margin-bottom: 8px; -} - -.reply-comment-suggest input, -.comment-suggest input { - vertical-align: -2px; - margin-right: 5px; -} - -.reply-comment-suggest label, -.comment-suggest label { - font-style: italic; - font-weight: normal; -} - -.sidebar-comment input, -.comment-buttons input { - border-radius: 4px; - text-transform: uppercase; - font-weight: 900; - font-size: 13px; - line-height: 1.5; - width: auto; - border: none; -} - -#newComment.sidebar-comment input[type=submit] { - color: white; - margin-right: 10px; - padding: 0 10px; - border: none; -} - -#newComment.sidebar-comment input[type=reset] { - background-color: white; - border: none; -} - -.comment-content:focus { - border: 2px solid rgba(33, 150, 243, 0.51); -} - -.comment-changeTo-approve input[type=submit] { width: 100%; font-size: 12px;} - -.reply-comment-suggest-from-p, -.comment-changeFrom-value, -.comment-changeTo-value, -.reply-suggestion .reply-comment-suggest-from, -.suggestion .comment-suggest-from { - border: none; - font-weight: normal; - font-style: italic; - padding-left: 0; - width: 100% !important; - padding: 0; - padding-top: 8px; - /* width: inherit !important; */ - /*color: rgba(41, 125, 191, 0.85);*/ -} - -textarea.comment-suggest-to { - margin-bottom: 8px; -} - -.suggestion { - font-weight: bold; - font-size: 11px; - text-transform: uppercase; -} - -#comments { - top: 82px; -} - -#comments .sidebar-comment { - background-color: transparent; - font-size: 13px; - border: none; - box-shadow: none; -} - -@media (min-width: 1200px) { - #comments .sidebar-comment:hover, - #comments .sidebar-comment.mouseover, - .comment-modal { - margin-right: -30px; - } -} - -#comments .sidebar-comment:hover, -#comments .sidebar-comment.mouseover, -.comment-modal { - background-color: #fff; - padding: 0; - padding-top: 10px; - margin-top: -8px; - width: 250px; - box-shadow: 0 0 0 1px rgba(99, 114, 130, 0.16), 0 8px 16px rgba(27, 39, 51, 0.08); -} - -#comments .sidebar-comment:hover time, -#comments .sidebar-comment.mouseover time, -.comment-modal-comment>time { - display: block !important; -} - -#comments .sidebar-comment:hover>section, -#comments .sidebar-comment.mouseover>section, -.comment-modal-comment>section { - padding: 0 15px; - padding-bottom: 10px; - margin-top: 5px; - display: block; - line-height: 20px; - margin-top: 8px; -} - -.comment-delete-container { - float: right; - margin: 0; - height: 15px; - font-size: 15px; - background-color: transparent; - padding: 6px 15px 4px 8px; - color: #7b7777; -} - -.comment-reply { - border-top: 1px solid #d2d2d2; - background-color: #f9f9f9; - margin: 0; - padding: 10px 15px 3px; -} - -.comment-reply-input-label span { - font-weight: bold; -} - -.comment-reply-input { - border: 1px solid #d2d2d2 !important; - width: calc(100% - 20px) !important; - padding: 8px 10px; - text-transform: none !important; - margin-top: 5px; - margin-bottom: 10px; - font-weight: normal; -} - -.reply-suggestion p:not(.reply-comment-suggest-from-p) { - text-transform: uppercase; - font-size: 11px; - font-weight: 400; - text-transform: uppercase; -} - -.comment-changeTo-approve input { - height: 25px; - margin: 0; - margin-top: 5px; -} - -.reply-suggestion { - margin-top: 8px; -} - -.reply-comment-suggest-from-p { - padding: 0 -} - -.comment-text { - font-weight: normal; - line-height: 20px; -} - -.sidebar-comment-reply:nth-child(even) { - background-color: transparent; -} - -.sidebar-comment-reply { - padding: 0; - margin-bottom: 10px; -} - -.comment-author-name { - font-style: normal; -} - -.comment-changeFrom-label, -.comment-changeTo-label { - text-transform: uppercase; - font-size: 11px; -} - -.comment-reply note { - line-height: 16px; -} - -.reply-comment-suggest { - display: none !important -} - -.comment-changeTo-form { - margin-bottom: 5px; - padding: 0 15px; -} - -.sidebar-comment>.comment-author-name, -.comment-modal-comment>.comment-author-name { - padding-left: 0px; -} - -#comments .sidebar-comment:hover >.comment-author-name, -#comments .sidebar-comment.mouseover >.comment-author-name { - margin-top: 2px; - display: inline-block; - padding-left: 15px; -} - -.sidebar-comment>time, -.comment-modal-comment>time { - position: absolute; - top: 11px; - font-size: 11px; - right: 36px; - color: #555555; - font-style: italic; -} - -.comment-changeTo-approve { - margin-bottom: 14px; - margin-top: 5px; -} - -.comment-reply note:first-child { - margin-top: 8px; -} - -.comment-modal { - padding: 0; - border: none; - width: 350px !important; - margin-top: 0; - padding-top: 10px; -} - -.comment-modal-comment>.comment-author-name { - padding-left: 14px; -} - - diff --git a/src/static/skins/colibris/src/plugins/cursortrace.css b/src/static/skins/colibris/src/plugins/cursortrace.css deleted file mode 100644 index e69de29bb2d..00000000000 diff --git a/src/static/skins/colibris/src/plugins/embedded_hyperlinks.css b/src/static/skins/colibris/src/plugins/embedded_hyperlinks.css deleted file mode 100644 index b5ec7e61cb8..00000000000 --- a/src/static/skins/colibris/src/plugins/embedded_hyperlinks.css +++ /dev/null @@ -1,6 +0,0 @@ -.hyperlink-dialog>.hyperlink-save{ - height: 34px; - margin-top: 1px; - margin-right: 0; - margin-left: 2px; -} \ No newline at end of file diff --git a/src/static/skins/colibris/src/plugins/font_color.css b/src/static/skins/colibris/src/plugins/font_color.css index 4ecd5c1cd01..95f81cf31a2 100644 --- a/src/static/skins/colibris/src/plugins/font_color.css +++ b/src/static/skins/colibris/src/plugins/font_color.css @@ -1,32 +1,38 @@ -li.acl-write.font-color-icon.plugin-ep_font_color { - display: none; +.font-color-icon { + display: none !important; } #font-color { display: list-item !important; } +.color\:black, +[data-color=black] { + color: #485365; + color: var(--text-color); +} + .color\:red, [data-color=red] { - color: #F44336; + color: #F44336; } .color\:green, [data-color=green] { - color: #66d29c; + color: #66d29c; } .color\:blue, [data-color=blue] { - color: #2196f3; + color: #2196f3; } .color\:yellow, [data-color=yellow] { - color: #e0d776; + color: #ffeb3b; } .color\:orange, [data-color=orange] { - color: #d2a564; + color: #FF9800; } \ No newline at end of file diff --git a/src/static/skins/colibris/src/plugins/set_title_on_pad.css b/src/static/skins/colibris/src/plugins/set_title_on_pad.css deleted file mode 100644 index 94b19520318..00000000000 --- a/src/static/skins/colibris/src/plugins/set_title_on_pad.css +++ /dev/null @@ -1,34 +0,0 @@ -#pad_title { - margin-bottom: 15px !important; - margin-top: 5px !important; - display: none; /* display only when page is loaded via javascript */ -} - -@media (max-width:720px) { - #pad_title { display: none !important; } -} - -#edit_title { - color: white; -} -#edit_title:before { - font-family: fontawesome-etherpad; - position: absolute; - top: 20px; - font-size: 14px; - content: "\E839"; - margin-left: 10px; -} - -#input_title { - background-color: #f9f9f9 !important; - height: auto !important; - margin-top: 3px; - width: calc(100% - 110px) !important; - padding: 8px 10px !important; -} - -#save_title button { - height: 30px !important; - padding: 5px 20px !important; -} \ No newline at end of file diff --git a/src/static/skins/colibris/timeslider.css b/src/static/skins/colibris/timeslider.css index ba5199baa97..1d2e347aede 100644 --- a/src/static/skins/colibris/timeslider.css +++ b/src/static/skins/colibris/timeslider.css @@ -1,142 +1,81 @@ -@media (max-width: 600px) { html { overflow: hidden } } - -@media (max-width: 1100px) { - .timeslider #padeditor { - padding: 0 !important; - } -} - -.timeslider #import_export, .timeslider #settings{ - top: 108px !important; - right: 55px; -} - -.timeslider #export > p { - font-size: 15px; - margin-top: 0; - margin-bottom: 20px; -} - -.timeslider #padpage { - display: flex; - flex-direction: column; -} - -.timeslider #timeslider-top { - position: relative; - border-bottom: 1px solid #e4e4e4; -} - -.timeslider-bar { background: none; } -.timeslider-bar p { margin: 8px; font-size: 12px;} - -.timeslider-bar #editbar { - border: none; - background: none !important; - margin-right: 10px; -} - -.timeslider #padmain { - position: relative; - top: 0 !important; - flex: 1 auto; - overflow: auto; -} - -.timeslider #padeditor { - height: 100%; - padding-top: 30px; -} - -.timeslider #editorcontainerbox { - height: 100%; - overflow: visible; - margin-top: 0 !important; -} - -#timeslider { - margin-top: -20px; - margin-left: 0; - background-color: transparent; -} - -#timeslider, #timeslider-left, #timeslider-right { - height: 57px; - background-color: transparent; -} - -#timeslider #timer { - opacity: 0.8; - font-style: italic; - right: 158px; - top: -3px; - left: initial; - background: none; -} - -#timeslider #timeslider-slider { margin-left: 4px; } - -#ui-slider-handle { - z-index: 5; +#timeslider-slider #ui-slider-handle { border-radius: 3px; + width: 12px; height: 28px; - top: 19px; + background-color: #64d29b; + background-color: var(--primary-color); } -#ui-slider-bar { - height: 10px; - margin-top: 28px; - margin-right: 180px; +#timeslider-slider #ui-slider-bar { border-radius: 3px; - background-color: #e4e4e4; + background-color: #d2d2d2; + background-color: var(--border-color); } - -#timeslider .star { - top: 25px; +#slider-btn-container { + margin: -18px 15px 0 20px; +} +#slider-btn-container #playpause_button_icon { + color: #ffffff; + color: var(--bg-color); + background-color: #64d29b; + background-color: var(--primary-color); + border: none; + margin-right: 5px; + padding-top: 3px; + width: 45px; + height: 45px; +} +#slider-btn-container #playpause_button_icon:not(.pause) { + padding-left: 4px; +} +#slider-btn-container .stepper { + border: 2px solid !important; + height: 30px; + width: 30px; + line-height: 28px; + margin-left: 5px; + font-size: 13px; + color: #64d29b; + color: var(--primary-color); + border-color: #64d29b; + border-color: var(--primary-color); } -#timeslider .star:before { - color: #da9700; - content: "\e836"; +#slider-btn-container .stepper.disabled { + opacity: .5; } .timeslider #editbar .buttontext { - color: white; + background-color: #576273; + background-color: var(--text-soft-color); + color: #ffffff; + color: var(--bg-color); margin: 0; } -.timeslider #editbar .grouped-right { - margin: 0; padding: 0; - margin-top: 5px; - margin-left: 5px; -} - -.timeslider #playpause_button { - right: 95px; - top: 1px; -} -#playpause_button_icon { - border:none; -} -#playpause_button_icon:before { color: white; } -.timeslider #leftstep { - right: 60px; - top: 12px; +#editbar { + display: block; + padding-bottom: 5px; } -.timeslider #rightstep { - top: 12px; - right: 30px; +#editbar li > a { + border-radius: 3px; } -.stepper { - border: 2px solid; - text-align: center; - border-radius: 50%; - height: 25px; - padding-top: 2px; +#timeslider-slider #timer { + opacity: .7; + top: -12px; + font-size: .8em; } .timeslider #authorsList .author { padding: 2px 5px; border-radius: 3px; +} + +.timeslider-title { + font-size: 1.8rem !important; +} +.timeslider-subtitle { + margin-top: 6px; + font-size: .9em; } \ No newline at end of file diff --git a/src/static/skins/colibris/timeslider.js b/src/static/skins/colibris/timeslider.js index c94a55778df..1322ec4c8ef 100644 --- a/src/static/skins/colibris/timeslider.js +++ b/src/static/skins/colibris/timeslider.js @@ -1,6 +1,3 @@ function customStart() { - console.log("custom start", $('#timeslider-wrapper').length); - // inverse display order betwwen slidebar and titles - $('#timeslider-wrapper').appendTo('#timeslider-top'); } diff --git a/src/static/skins/no-skin/pad.css b/src/static/skins/no-skin/pad.css index b8cdb4642b6..e69de29bb2d 100644 --- a/src/static/skins/no-skin/pad.css +++ b/src/static/skins/no-skin/pad.css @@ -1,5 +0,0 @@ -@media (max-width:600px) { - #sidediv { - display: none !important; - } -} \ No newline at end of file diff --git a/src/templates/pad.html b/src/templates/pad.html index ceda1d00e02..2de82db0385 100644 --- a/src/templates/pad.html +++ b/src/templates/pad.html @@ -5,346 +5,376 @@ ; %> + <% e.begin_block("htmlHead"); %> - + <% e.end_block(); %> - <%=settings.title%> - + |@licend The above is the entire license notice + for the JavaScript code in this page.| + */ + - - - - - + + + + + - <% e.begin_block("styles"); %> - + <% e.begin_block("styles"); %> + - <% e.begin_block("customStyles"); %> - - <% e.end_block(); %> + <% e.begin_block("customStyles"); %> + + <% e.end_block(); %> - - <% e.end_block(); %> + + <% e.end_block(); %> - - - + + + - + - <% e.begin_block("body"); %> -
    -
    -
    -
    + <% e.begin_block("body"); %> - - -
    - <% e.begin_block("afterEditbar"); %><% e.end_block(); %> + + + +
    +
    + + + + +
    + + <% e.begin_block("afterEditbar"); %><% e.end_block(); %> + +
    + + <% e.begin_block("editorContainerBox"); %> -
    + + + + +
    + +
    +
    +

    You need a password to access this pad

    +
    + +
    +
    +
    +

    You do not have permission to access this pad

    +
    +
    +

    Your password was wrong

    +
    +
    +

    Cookie could not be found. Please allow cookies in your browser!

    +
    + <% e.begin_block("loading"); %> +

    Loading...

    + <% e.end_block(); %> + +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + + + + + +
    - - - - + + + -
    +
    0
    -
    - -  - █   +
    +
    +

    + -  + █  
    -
    +
    @@ -353,89 +383,134 @@

    +
    +
    +
    + + + + + <% if (settings.skinName == 'colibris') { %> + + <% } %> + + <% e.end_block(); %> + +
    + + <% e.end_block(); %> + + + + + + + <% e.begin_block("scripts"); %> + + + + + + + + + + + + + + + <% e.begin_block("customScripts"); %> + + <% e.end_block(); %> + + + + + <% e.end_block(); %> diff --git a/src/templates/timeslider.html b/src/templates/timeslider.html index 6d3b6f2f477..77d3252177b 100644 --- a/src/templates/timeslider.html +++ b/src/templates/timeslider.html @@ -3,7 +3,7 @@ , langs = require("ep_etherpad-lite/node/hooks/i18n").availableLangs %> - + <%=settings.title%> Timeslider @@ -273,5 +297,4 @@

    <% e.end_block(); %> - diff --git a/tests/frontend/runner.css b/tests/frontend/runner.css index ce158b818ea..66d3283ca3e 100644 --- a/tests/frontend/runner.css +++ b/tests/frontend/runner.css @@ -6,6 +6,9 @@ body { padding: 0px; margin: 0px; height: 100%; + display: flex; + flex-direction: row; + overflow: hidden; } #console { @@ -14,33 +17,30 @@ body { #iframe-container { width: 50%; + min-width: 820px; height: 100%; } #iframe-container iframe { height: 100%; - position:absolute; - min-width:500px; - max-width:800px; - left:50%; width:100%; } #mocha { font: 20px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif; border-right: 2px solid #999; - width: 50%; + flex: 1 auto; height: 100%; - position: absolute; overflow: auto; - float:left; } #mocha #report { - margin-top: 50px; + margin: 0; + padding: 0; + margin-top: 10px; } -#mocha ul, #mocha li { +#mocha li { margin: 0; padding: 0; } @@ -175,6 +175,10 @@ body { -webkit-box-shadow: 0 1px 3px #eee; } +#report ul { + padding: 0; +} + #report.pass .test.fail { display: none; } @@ -191,12 +195,11 @@ body { } #stats { - position: fixed; - top: 15px; - right: 52%; + padding: 10px; font-size: 12px; margin: 0; color: #888; + text-align: right; } #stats .progress { diff --git a/tests/frontend/specs/change_user_color.js b/tests/frontend/specs/change_user_color.js index 46a63637d69..5969eabe298 100644 --- a/tests/frontend/specs/change_user_color.js +++ b/tests/frontend/specs/change_user_color.js @@ -12,7 +12,7 @@ describe("change user color", function(){ //click on the settings button to make settings visible var $userButton = chrome$(".buttonicon-showusers"); $userButton.click(); - + var $userSwatch = chrome$("#myswatch"); $userSwatch.click(); @@ -63,10 +63,15 @@ describe("change user color", function(){ var inner$ = helper.padInner$; var chrome$ = helper.padChrome$; + var $colorOption = helper.padChrome$('#options-colorscheck'); + if (!$colorOption.is(':checked')) { + $colorOption.click(); + } + //click on the settings button to make settings visible var $userButton = chrome$(".buttonicon-showusers"); $userButton.click(); - + var $userSwatch = chrome$("#myswatch"); $userSwatch.click(); diff --git a/tests/frontend/specs/chat.js b/tests/frontend/specs/chat.js index e48dad8b02f..8eaf08a9514 100644 --- a/tests/frontend/specs/chat.js +++ b/tests/frontend/specs/chat.js @@ -75,56 +75,60 @@ describe("Chat messages and UI", function(){ //get the chat selector var $stickychatCheckbox = chrome$("#options-stickychat"); - //select chat always on screen and fire change event - $stickychatCheckbox.attr('selected','selected'); - $stickychatCheckbox.change(); - $stickychatCheckbox.click(); - - //check if chat changed to get the stickychat Class - var $chatbox = chrome$("#chatbox"); - var hasStickyChatClass = $chatbox.hasClass("stickyChat"); - expect(hasStickyChatClass).to.be(true); - - //select chat always on screen and fire change event - $stickychatCheckbox.attr('selected','selected'); - $stickychatCheckbox.change(); - $stickychatCheckbox.click(); - - //check if chat changed to remove the stickychat Class - var hasStickyChatClass = $chatbox.hasClass("stickyChat"); - expect(hasStickyChatClass).to.be(false); - - done(); + //select chat always on screen + if (!$stickychatCheckbox.is(':checked')) { + $stickychatCheckbox.click(); + } + + // due to animation, we need to make some timeout... + setTimeout(function() { + //check if chat changed to get the stickychat Class + var $chatbox = chrome$("#chatbox"); + var hasStickyChatClass = $chatbox.hasClass("stickyChat"); + expect(hasStickyChatClass).to.be(true); + + // select chat always on screen and fire change event + $stickychatCheckbox.click(); + + setTimeout(function() { + //check if chat changed to remove the stickychat Class + var hasStickyChatClass = $chatbox.hasClass("stickyChat"); + expect(hasStickyChatClass).to.be(false); + + done(); + }, 10) + }, 10) + + }); it("makes chat stick to right side of the screen then makes it one step smaller", function(done) { var inner$ = helper.padInner$; var chrome$ = helper.padChrome$; - //click on the settings button to make settings visible - var $settingsButton = chrome$(".buttonicon-settings"); - $settingsButton.click(); - - //get the chat selector - var $stickychatCheckbox = chrome$("#options-stickychat"); + // open chat + chrome$('#chaticon').click(); - //select chat always on screen and fire change event - $stickychatCheckbox.attr('selected','selected'); - $stickychatCheckbox.change(); - $stickychatCheckbox.click(); + // select chat always on screen from chatbox + chrome$('.stick-to-screen-btn').click(); - //check if chat changed to get the stickychat Class - var $chatbox = chrome$("#chatbox"); - var hasStickyChatClass = $chatbox.hasClass("stickyChat"); - expect(hasStickyChatClass).to.be(true); + // due to animation, we need to make some timeout... + setTimeout(function() { + //check if chat changed to get the stickychat Class + var $chatbox = chrome$("#chatbox"); + var hasStickyChatClass = $chatbox.hasClass("stickyChat"); + expect(hasStickyChatClass).to.be(true); - //select chat always on screen and fire change event - chrome$('#titlecross').click(); + // select chat always on screen and fire change event + chrome$('#titlecross').click(); - //check if chat changed to remove the stickychat Class - var hasStickyChatClass = $chatbox.hasClass("stickyChat"); - expect(hasStickyChatClass).to.be(false); + setTimeout(function() { + //check if chat changed to remove the stickychat Class + var hasStickyChatClass = $chatbox.hasClass("stickyChat"); + expect(hasStickyChatClass).to.be(false); - done(); + done(); + }, 10) + }, 10) }); }); diff --git a/tests/frontend/specs/pad_modal.js b/tests/frontend/specs/pad_modal.js index 80752e4b829..15a8bc138b2 100644 --- a/tests/frontend/specs/pad_modal.js +++ b/tests/frontend/specs/pad_modal.js @@ -1,6 +1,6 @@ describe('Pad modal', function() { context('when modal is a "force reconnect" message', function() { - var MODAL_SELECTOR = '#connectivity .slowcommit'; + var MODAL_SELECTOR = '#connectivity'; beforeEach(function(done) { helper.newPad(function() { @@ -10,7 +10,7 @@ describe('Pad modal', function() { // wait for modal to be displayed var $modal = helper.padChrome$(MODAL_SELECTOR); helper.waitFor(function() { - return $modal.is(':visible'); + return $modal.hasClass('popup-show'); }, 50000).done(done); }); @@ -30,7 +30,7 @@ describe('Pad modal', function() { it('does not close the modal', function(done) { var $modal = helper.padChrome$(MODAL_SELECTOR); - var modalIsVisible = $modal.is(':visible'); + var modalIsVisible = $modal.hasClass('popup-show'); expect(modalIsVisible).to.be(true); @@ -45,7 +45,7 @@ describe('Pad modal', function() { it('does not close the modal', function(done) { var $modal = helper.padChrome$(MODAL_SELECTOR); - var modalIsVisible = $modal.is(':visible'); + var modalIsVisible = $modal.hasClass('popup-show'); expect(modalIsVisible).to.be(true); @@ -126,6 +126,7 @@ describe('Pad modal', function() { var isModalOpened = function(modalSelector) { var $modal = helper.padChrome$(modalSelector); - return $modal.is(':visible'); + + return $modal.hasClass('popup-show'); } });