mirrors/etherpad-lite
1
0
Fork 0
mirror of https://github.com/ether/etherpad-lite.git synced 2025-04-20 07:35:05 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 27

colibris: introduce skin variants, in order to customize the rendering

Browse source 
This provide a nice way to change the colors of main containers from settings file. See comment inside settings for how it works
This commit is contained in:
Sebastian Castro 2020-04-07 17:33:40 +02:00 • committed by muxator
parent 913d5fd0d9
commit 709e5d2233
13 changed files with 418 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

24
settings.json.docker
View file

@ -95,6 +95,30 @@
*/ */
"skinName": "${SKIN_NAME:colibris}", "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. * IP and port which Etherpad should bind at.
* *

24
settings.json.template
View file

@ -86,6 +86,30 @@
*/ */
"skinName": "colibris", "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. * IP and port which Etherpad should bind at.
* *

1
src/node/handler/PadMessageHandler.js
View file

@ -1065,6 +1065,7 @@ async function handleClientReady(client, message)
// mile wide... // mile wide...
var clientVars = { var clientVars = {
"skinName": settings.skinName, "skinName": settings.skinName,
"skinVariants": settings.skinVariants,
"accountPrivs": { "accountPrivs": {
"maxRevisions": 100 "maxRevisions": 100
}, },

2
src/node/utils/Settings.js
View file

@ -62,6 +62,8 @@ exports.faviconTimeslider = "../../" + exports.favicon;
*/ */
exports.skinName = null; exports.skinName = null;
exports.skinVariants = "super-light-toolbar super-light-editor light-background";
/** /**
* The IP ep-lite should listen to * The IP ep-lite should listen to
*/ */

4
src/static/js/ace.js
View file

@ -225,7 +225,7 @@ function Ace2Editor()
var iframeHTML = []; var iframeHTML = [];
iframeHTML.push(doctype); iframeHTML.push(doctype);
iframeHTML.push("<html class='inner-editor'><head>"); iframeHTML.push("<html class='inner-editor " + clientVars.skinVariants + "'><head>");
// calls to these functions ($$INCLUDE_...) are replaced when this file is processed // 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 // and compressed, putting the compressed code from the named file directly into the
@ -316,7 +316,7 @@ window.onload = function () {\n\
}, 0);\n\ }, 0);\n\
}'; }';
var outerHTML = [doctype, '<html class="inner-editor outerdoc"><head>'] var outerHTML = [doctype, '<html class="inner-editor outerdoc ' + clientVars.skinVariants + '"><head>']
var includedCSS = []; var includedCSS = [];
var $$INCLUDE_CSS = function(filename) {includedCSS.push(filename)}; var $$INCLUDE_CSS = function(filename) {includedCSS.push(filename)};

26
src/static/skins/colibris/pad.css
View file

@ -19,6 +19,8 @@
@import url("src/plugins/tables2.css"); @import url("src/plugins/tables2.css");
@import url("src/plugins/author_hover.css"); @import url("src/plugins/author_hover.css");
@import url("src/pad-variants.css");
html { html {
font-size: 15px; font-size: 15px;
} }
@ -30,18 +32,24 @@ html {
*/ */
:root { :root {
--dark-color: #374256; --super-dark-color: #374256;
--dark-soft-color: #576273; --dark-color: #576273; /*#4d5d77*/
--dark-soft-color: #6d7684; /*#606978;*/
--primary-color: #64d29b; --primary-color: #64d29b;
--middle-color: #d2d2d2; /* between light-soft-color and dark-soft-color, use for border for examples */ --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); --light-soft-color: #d8dade;
--text-soft-color: var(--dark-soft-color); --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); --border-color: var(--middle-color);
--bg-soft-color: var(--light-soft-color); --bg-soft-color: var(--light-color);
--bg-color: var(--light-color); --bg-color: var(--super-light-color);
--main-font-family: Quicksand, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; --main-font-family: Quicksand, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
} }
@ -60,5 +68,5 @@ h1 {
/* BACKGROUND COLOR */ /* BACKGROUND COLOR */
#editorcontainerbox { #editorcontainerbox {
background-color: var(--bg-soft-color); background-color: #f2f3f4; /* default */
} }

6
src/static/skins/colibris/src/components/chat.css
View file

@ -11,6 +11,7 @@
#chatbox.stickyChat { #chatbox.stickyChat {
border: none; border: none;
background-color: var(--bg-soft-color);
} }
#chatbox.stickyChat.chatAndUsersChat{ #chatbox.stickyChat.chatAndUsersChat{
@ -36,6 +37,8 @@
#chattext { #chattext {
border-bottom: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color);
background-color: var(--bg-color);
color: var(--text-color);
} }
.plugin-ep_author_neat #chattext { .plugin-ep_author_neat #chattext {
@ -60,9 +63,10 @@
} }
#chaticon { #chaticon {
box-shadow: 0 0 0 1px rgba(99, 114, 130, 0.16), 0 8px 16px rgba(27, 39, 51, 0.08);
border: none; border: none;
padding: 10px 20px; padding: 10px 20px;
background-color: var(--bg-soft-color);
color: var(--text-color);
right: 30px; right: 30px;
} }

8
src/static/skins/colibris/src/components/scrollbars.css
View file

@ -17,9 +17,9 @@
} }
.thin-scrollbar::-webkit-scrollbar-track { .thin-scrollbar::-webkit-scrollbar-track {
background-color: var(--bg-soft-color); background-color: var(--scrollbar-track);
border-radius: 10px; border-radius: 10px;
border: 5px solid var(--bg-color); border: 5px solid var(--scrollbar-bg);
} }
.thin-scrollbar::-webkit-scrollbar { .thin-scrollbar::-webkit-scrollbar {
@ -28,6 +28,6 @@
.thin-scrollbar::-webkit-scrollbar-thumb { .thin-scrollbar::-webkit-scrollbar-thumb {
border-radius: 7px; border-radius: 7px;
background-color: var(--border-color); background-color: var(--scrollbar-thumb);
border: 5px solid var(--bg-color); border: 5px solid var(--scrollbar-bg);
} }

1
src/static/skins/colibris/src/components/users.css
View file

@ -7,6 +7,7 @@ table#otheruserstable {
height: 250px; height: 250px;
border-left: none; border-left: none;
transition: none; transition: none;
border-bottom-color: var(--border-color)
} }
.popup#users.chatAndUsers #mycolorpicker.popup { .popup#users.chatAndUsers #mycolorpicker.popup {
right: calc(100% + 30px); right: calc(100% + 30px);

3
src/static/skins/colibris/src/layout.css
View file

@ -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); 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: 0;
border-radius: 5px; border-radius: 5px;
background-color: white; background-color: var(--bg-color);
color: var(--text-color);
} }
#sidediv { #sidediv {
padding-top: 55px; /* = #innerdocbody iframe padding-top */ padding-top: 55px; /* = #innerdocbody iframe padding-top */

6
src/static/skins/colibris/src/pad-editor.css
View file

@ -1,7 +1,9 @@
#innerdocbody, #innerdocbody { #innerdocbody {
font-size: 15px; font-size: 15px;
line-height: 25px; line-height: 25px;
padding: 0; padding: 0;
background: transparent;
color: var(--text-color);
} }
#innerdocbody span, #innerdocbody span { #innerdocbody span, #innerdocbody span {
@ -26,5 +28,5 @@ option {
} }
#innerdocbody a { #innerdocbody a {
color: #3f51b5; color: var(--primary-color);
} }

331
src/static/skins/colibris/src/pad-variants.css Normal file
View file

@ -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;
}
}

2
src/templates/pad.html
View file

@ -7,7 +7,7 @@
<!doctype html> <!doctype html>
<% e.begin_block("htmlHead"); %> <% e.begin_block("htmlHead"); %>
<html class="<%=hooks.clientPluginNames().join(' '); %>"> <html class="<%=hooks.clientPluginNames().join(' '); %> <%=settings.skinVariants%>">
<% e.end_block(); %> <% e.end_block(); %>
<title><%=settings.title%></title> <title><%=settings.title%></title>