diff --git a/settings.json.docker b/settings.json.docker index 007f80f5a..8802c11a5 100644 --- a/settings.json.docker +++ b/settings.json.docker @@ -95,6 +95,30 @@ */ "skinName": "${SKIN_NAME:colibris}", + /* + * Skin Variants + * + * 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 0e61c7c67..c2762fbe0 100644 --- a/settings.json.template +++ b/settings.json.template @@ -86,6 +86,30 @@ */ "skinName": "colibris", + /* + * Skin Variants + * + * 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/node/handler/PadMessageHandler.js b/src/node/handler/PadMessageHandler.js index acd9a29c6..fb04a4e30 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 d9e03acf2..245bf833a 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/js/ace.js b/src/static/js/ace.js index b64c3e226..d06d902a6 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/skins/colibris/pad.css b/src/static/skins/colibris/pad.css index 406a08220..7f648dbcd 100644 --- a/src/static/skins/colibris/pad.css +++ b/src/static/skins/colibris/pad.css @@ -19,6 +19,8 @@ @import url("src/plugins/tables2.css"); @import url("src/plugins/author_hover.css"); +@import url("src/pad-variants.css"); + html { font-size: 15px; } @@ -30,18 +32,24 @@ html { */ :root { - --dark-color: #374256; - --dark-soft-color: #576273; + --super-dark-color: #374256; + --dark-color: #576273; /*#4d5d77*/ + --dark-soft-color: #6d7684; /*#606978;*/ + --primary-color: #64d29b; --middle-color: #d2d2d2; /* between light-soft-color and dark-soft-color, use for border for examples */ - --light-soft-color: #f2f3f4; /*#f9f9f9;*/ - --light-color: white; - --text-color: var(--dark-color); - --text-soft-color: var(--dark-soft-color); + --light-soft-color: #d8dade; + --light-color: #f2f3f4; /*#f9f9f9;*/ + --super-light-color: white; +} + +html { + --text-color: var(--super-dark-color); + --text-soft-color: var(--dark-color); --border-color: var(--middle-color); - --bg-soft-color: var(--light-soft-color); - --bg-color: var(--light-color); + --bg-soft-color: var(--light-color); + --bg-color: var(--super-light-color); --main-font-family: Quicksand, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; } @@ -60,5 +68,5 @@ h1 { /* BACKGROUND COLOR */ #editorcontainerbox { - background-color: var(--bg-soft-color); + background-color: #f2f3f4; /* default */ } \ No newline at end of file diff --git a/src/static/skins/colibris/src/components/chat.css b/src/static/skins/colibris/src/components/chat.css index 6202f3689..4fa40b996 100644 --- a/src/static/skins/colibris/src/components/chat.css +++ b/src/static/skins/colibris/src/components/chat.css @@ -11,6 +11,7 @@ #chatbox.stickyChat { border: none; + background-color: var(--bg-soft-color); } #chatbox.stickyChat.chatAndUsersChat{ @@ -36,6 +37,8 @@ #chattext { border-bottom: 1px solid var(--border-color); + background-color: var(--bg-color); + color: var(--text-color); } .plugin-ep_author_neat #chattext { @@ -60,9 +63,10 @@ } #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; + background-color: var(--bg-soft-color); + color: var(--text-color); right: 30px; } diff --git a/src/static/skins/colibris/src/components/scrollbars.css b/src/static/skins/colibris/src/components/scrollbars.css index f28d3dbff..128d878d6 100644 --- a/src/static/skins/colibris/src/components/scrollbars.css +++ b/src/static/skins/colibris/src/components/scrollbars.css @@ -17,9 +17,9 @@ } .thin-scrollbar::-webkit-scrollbar-track { - background-color: var(--bg-soft-color); + background-color: var(--scrollbar-track); border-radius: 10px; - border: 5px solid var(--bg-color); + border: 5px solid var(--scrollbar-bg); } .thin-scrollbar::-webkit-scrollbar { @@ -28,6 +28,6 @@ .thin-scrollbar::-webkit-scrollbar-thumb { border-radius: 7px; - background-color: var(--border-color); - border: 5px solid var(--bg-color); + background-color: var(--scrollbar-thumb); + border: 5px solid var(--scrollbar-bg); } \ No newline at end of file diff --git a/src/static/skins/colibris/src/components/users.css b/src/static/skins/colibris/src/components/users.css index 1a63613ce..a14cc1962 100644 --- a/src/static/skins/colibris/src/components/users.css +++ b/src/static/skins/colibris/src/components/users.css @@ -7,6 +7,7 @@ table#otheruserstable { height: 250px; border-left: none; transition: none; + border-bottom-color: var(--border-color) } .popup#users.chatAndUsers #mycolorpicker.popup { right: calc(100% + 30px); diff --git a/src/static/skins/colibris/src/layout.css b/src/static/skins/colibris/src/layout.css index 0cb508513..003c73bb1 100644 --- a/src/static/skins/colibris/src/layout.css +++ b/src/static/skins/colibris/src/layout.css @@ -18,7 +18,8 @@ box-shadow: 0 0 0 0.5px rgba(209, 209, 209, 0.32), 0 0 7pt 0pt rgba(204, 204, 204, 0.52); border: 0; border-radius: 5px; - background-color: white; + background-color: var(--bg-color); + color: var(--text-color); } #sidediv { padding-top: 55px; /* = #innerdocbody iframe padding-top */ diff --git a/src/static/skins/colibris/src/pad-editor.css b/src/static/skins/colibris/src/pad-editor.css index c25a47f4d..e1d3288b6 100644 --- a/src/static/skins/colibris/src/pad-editor.css +++ b/src/static/skins/colibris/src/pad-editor.css @@ -1,7 +1,9 @@ -#innerdocbody, #innerdocbody { +#innerdocbody { font-size: 15px; line-height: 25px; padding: 0; + background: transparent; + color: var(--text-color); } #innerdocbody span, #innerdocbody span { @@ -26,5 +28,5 @@ option { } #innerdocbody a { - color: #3f51b5; + 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 000000000..abf9db58b --- /dev/null +++ b/src/static/skins/colibris/src/pad-variants.css @@ -0,0 +1,331 @@ +/* =========================== */ +/* === Super Light Toolbar === */ +/* =========================== */ +.super-light-toolbar .toolbar, .super-light-toolbar .popup-content { + --text-color: var(--dark-color); + --text-soft-color: var(--dark-soft-color); + --border-color: var(--middle-color); + --bg-soft-color: var(--light-color); + --bg-color: var(--super-light-color); +} +.super-light-toolbar #chat { + background-color: var(--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(--light-soft-color); + --bg-color: var(--light-color); +} +.popup input[type="text"] { + background-color: var(--super-light-color); +} +/* ========================== */ +/* === Super Dark Toolbar === */ +/* ========================== */ +.super-dark-toolbar .toolbar, .super-dark-toolbar .popup-content { + --text-color: var(--light-color); + --text-soft-color: var(--middle-color); + --border-color: var(--dark-soft-color); + --bg-soft-color: var(--dark-color); + --bg-color: var(--super-dark-color); + border: none; +} +.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(--dark-soft-color); + --bg-soft-color: var(--dark-soft-color); + --bg-color: var(--dark-color); +} +.dark-toolbar #outerdocbody iframe, .dark-toolbar #outerdocbody > #innerdocbody { + box-shadow: none; + border: 1px solid #ececec; + border-radius: 8px; +} + + + + + +/* ============================ */ +/* == Super Light Background == */ +/* ============================ */ +.super-light-background #editorcontainerbox, .super-light-background #sidediv { + --text-color: var(--dark-color); + --text-soft-color: var(--dark-soft-color); + --border-color: var(--light-soft-color); + --bg-soft-color: var(--light-color); + --bg-color: var(--super-light-color); + background-color: var(--super-light-color); +} +.super-light-background.super-light-toolbar .toolbar { + --border-color: var(--super-light-color); +} +.super-light-background #chatbox, .super-light-background #chatbox.stickyChat { + --bg-color: var(--super-light-color); + --bg-soft-color: var(--super-light-color); +} +.super-light-background #chatbox.stickyChat { + box-shadow: none; +} +/* ====================== */ +/* == Light Background == */ +/* ====================== */ +.light-background #editorcontainerbox, .light-background #sidediv { + --text-color: var(--super-dark-color); + --text-soft-color: var(--dark-color); + --border-color: var(--light-soft-color); + --bg-soft-color: var(--light-soft-color); + --bg-color: var(--light-color); + background-color: var(--light-color); +} +.light-background body { + --scrollbar-bg: var(--light-color); + --scrollbar-track: var(--light-soft-color); + --scrollbar-thumb: var(--dark-soft-color); +} +.light-background.light-toolbar .toolbar { + --border-color: var(--light-color); +} +.light-background input[type="text"] { + background-color: var(--super-light-color); +} +.light-background #chatbox, .light-background #chatbox.stickyChat { + --bg-color: var(--super-light-color); + --bg-soft-color: var(--light-color); + --scrollbar-bg: var(--super-light-color); + --scrollbar-track: var(--light-color); + --scrollbar-thumb: var(--middle-color); +} +.light-background #chatbox.stickyChat { + box-shadow: none; +} +/* Special combinaison with toolbar */ +.light-background.light-toolbar .toolbar { + --border-color: var(--light-color); +} +.light-background.light-editor #chattext { + background-color: var(--light-color); + --scrollbar-bg: var(--light-color); + --scrollbar-track: var(--light-soft-color); + --scrollbar-thumb: var(--dark-soft-color); +} +/* =========================== */ +/* == Super Dark Background == */ +/* =========================== */ +.super-dark-background #editorcontainerbox, .super-dark-background #sidediv { + --text-color: var(--light-color); + --text-soft-color: var(--light-soft-color); + --border-color: var(--dark-color); + --bg-soft-color: var(--dark-color); + --bg-color: var(--super-dark-color); +} +.super-dark-background #editorcontainerbox { + background-color: var(--super-dark-color); +} +.super-dark-background body { + --scrollbar-bg: var(--super-dark-color); + --scrollbar-track: var(--dark-color); + --scrollbar-thumb: var(--light-soft-color); +} +.super-dark-background .toolbar { + border-bottom: 1px solid var(--super-dark-color); +} +.super-dark-background #outerdocbody iframe, .super-dark-background #outerdocbody > #innerdocbody { + box-shadow: none; + border: none; + border-radius: 8px; +} +.super-dark-background #chatbox, .super-dark-background #chatbox.stickyChat { + background-color: var(--super-dark-color); + color: var(--light-color); +} +.super-dark-background input[type="text"] { + background-color: var(--bg-soft-color); + border: none; + color: var(--text-color); +} +.super-dark-background input[type="text"]::placeholder { + color: var(--middle-color); +} +.super-dark-background #chatbox:not(.stickyChat) { + border: 1px solid var(--dark-color); +} +/* Special combinaison with toolbar */ +.super-dark-background.super-dark-toolbar .popup-content { + border: 1px solid var(--dark-color); +} +.super-dark-background.super-dark-toolbar .toolbar { + --border-color: var(--super-dark-color); +} +/* ===================== */ +/* == Dark Background == */ +/* ===================== */ +.dark-background #editorcontainerbox, .dark-background #sidediv { + --text-color: var(--super-light-color); + --text-soft-color: var(--light-color); + --border-color: var(--dark-soft-color); + --bg-soft-color: var(--dark-soft-color); + --bg-color: var(--dark-color); +} +.dark-background #editorcontainerbox { + background-color: var(--dark-color); +} +.dark-background body { + --scrollbar-bg: var(--dark-color); + --scrollbar-track: var(--dark-soft-color); + --scrollbar-thumb: var(--light-soft-color); +} +.dark-background .toolbar { + border-bottom: 1px solid var(--dark-color); +} +.dark-background #outerdocbody iframe, .dark-background #outerdocbody > #innerdocbody { + box-shadow: none; + border: none; + border-radius: 8px; +} +.dark-background #chatbox, .dark-background #chatbox.stickyChat { + background-color: var(--dark-color); + color: var(--super-light-color); + --border-color: var(--dark-soft-color); +} +.dark-background input[type="text"] { + background-color: var(--dark-soft-color); + border: none; + color: var(--text-color); +} +.dark-background input[type="text"]::placeholder { + color: var(--middle-color); +} +.dark-background .popup-content, .dark-background #chatbox:not(.stickyChat) { + box-shadow: 0 0 14px 0px var(--super-dark-color); +} +/* Special combinaison with toolbar */ +.dark-background.dark-toolbar .popup-content { + box-shadow: 0 0 14px 0px var(--super-dark-color); +} +.dark-background.dark-toolbar .toolbar { + --border-color: var(--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 editor == */ +/* ============================= */ +.super-light-editor.super-light-background #outerdocbody iframe, +.super-light-editor.super-light-background #outerdocbody > #innerdocbody, +.light-editor.light-background #outerdocbody iframe, +.light-editor.light-background #outerdocbody > #innerdocbody, +.super-dark-editor.super-dark-background #outerdocbody iframe, +.super-dark-editor.super-dark-background #outerdocbody > #innerdocbody, +.dark-editor.dark-background #outerdocbody iframe, +.dark-editor.dark-background #outerdocbody > #innerdocbody { + box-shadow: none; + border: none; +} +.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 #outerdocbody iframe, + .super-light-editor.super-light-background #outerdocbody > #innerdocbody, + .super-light-editor.super-light-background #sidediv, + .light-editor.light-background #outerdocbody iframe, + .light-editor.light-background #outerdocbody > #innerdocbody, + .light-editor.light-background #sidediv, + .super-dark-editor.super-dark-background #outerdocbody iframe, + .super-dark-editor.super-dark-background #outerdocbody > #innerdocbody, + .super-dark-editor.super-dark-background #sidediv, + .dark-editor.dark-background #outerdocbody iframe, + .dark-editor.dark-background #outerdocbody > #innerdocbody, + .dark-editor.dark-background #sidediv { + padding-top: 35px; + } +} + +.super-light-editor.super-light-background #chaticon { + --bg-color: var(--light-color); + --text-color: var(--dark-color); +} +.light-editor.light-background #chaticon { + --bg-color: var(--super-light-color); + --text-color: var(--dark-color); +} +.super-dark-editor.super-dark-background #chaticon { + --bg-color: var(--dark-color); + --text-color: var(--light-color); +} +.dark-editor.dark-background #chaticon { + --bg-color: var(--light-color); + --text-color: var(--dark-color); +} + + + +/* ======================= */ +/* == Full Width Editor == */ +/* ======================= */ +.full-width-editor #outerdocbody iframe, .full-width-editor #outerdocbody > #innerdocbody { + max-width: none !important; +} +@media (min-width: 721px) { + .full-width-editor #chaticon { + right: 15px; + } +} \ No newline at end of file diff --git a/src/templates/pad.html b/src/templates/pad.html index ddf361860..98aaea9ea 100644 --- a/src/templates/pad.html +++ b/src/templates/pad.html @@ -7,7 +7,7 @@ <% e.begin_block("htmlHead"); %> - + <% e.end_block(); %> <%=settings.title%>