can be break into more than one
browser line.
*/
-var caretPosition = require('/caretPosition');
+var caretPosition = require('./caretPosition');
function Scroll(outerWin) {
// scroll settings
diff --git a/src/static/js/skin_variants.js b/src/static/js/skin_variants.js
new file mode 100644
index 000000000..8fc056acf
--- /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'));
+ }
+}
diff --git a/src/static/js/timeslider.js b/src/static/js/timeslider.js
index 3cdff91a9..5ac56bea1 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/undomodule.js b/src/static/js/undomodule.js
index 6610224fe..7bb47a625 100644
--- a/src/static/js/undomodule.js
+++ b/src/static/js/undomodule.js
@@ -253,7 +253,15 @@ var undoModule = (function()
}
if (!merged)
{
- stack.pushEvent(event);
+ /*
+ * Push the event on the undo stack only if it exists, and if it's
+ * not a "clearauthorship". This disallows undoing the removal of the
+ * authorship colors, but is a necessary stopgap measure against
+ * https://github.com/ether/etherpad-lite/issues/2802
+ */
+ if (event && (event.eventType !== "clearauthorship")) {
+ stack.pushEvent(event);
+ }
}
undoPtr = 0;
}
diff --git a/src/static/js/vendors/nice-select.js b/src/static/js/vendors/nice-select.js
new file mode 100644
index 000000000..cbd978ac7
--- /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 ad17132f8..c1cec179c 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,60 @@
@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: #64d29b;
+ --middle-color: #d2d2d2; /* kind of grey, use for border for examples */
+
+ --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);
+
+ --toolbar-border: none;
+
+ --main-font-family: Quicksand, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+
+ --editor-horizontal-padding: 55px;
+ --editor-vertical-padding: 40px;
}
-/* 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;
+@media (max-width:1000px) {
+ :root {
+ --editor-horizontal-padding: 15px;
+ --editor-vertical-padding: 15px;
+ }
}
-/* BACKGROUND COLOR */
-#editorcontainer, #padmain {
- background-color: #f9f9f9 !important;
+@media (max-width:600px) {
+ :root {
+ --editor-horizontal-padding: 15px;
+ --editor-vertical-padding: 15px;
+ }
}
-
-/* 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; }
-
-/* 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; }
+/* 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 88ddce4c3..1a7bd938a 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 93879023e..ccaea9d4d 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;
-}
-
-.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 7a2979e02..61d992c5f 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;
+ 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;
}
-
-.plugin-ep_author_neat #chattext {
- padding: 10px;
+#chattext p {
+ padding: 4px 10px;
}
-
-.plugin-ep_author_neat #chattext.authorColors p,
-.plugin-ep_author_neat #chattext.authorColors span {
- background-color: transparent !important;
+#chattext:not(.authorColors) p:first-child {
+ padding-top: 10px;
}
-
-#chattext p b {
- color: #4c4c4c;
-}
-
-#chattext::-webkit-scrollbar-track {
- background-color: #f6f6f6;
- border: 1px solid #f0f0f0;
-}
-
-#chattext::-webkit-scrollbar {
- width: 7px;
-}
-
-#chattext::-webkit-scrollbar-thumb {
- border-radius: 10px;
- background-color: #C5C5C5;
-}
-
-#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 5d34fc865..aa82218c2 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 7c514010c..fa255fe4a 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-title {
- text-shadow: none;
+.gritter-item:not(.error) .popup-content{
+ background-color: #64d29b;
+ background-color: var(--primary-color);
+ color: #ffffff;
+ color: var(--bg-color);
}
-
-#gritter-notice-wrapper {
- background-color: #fff;
+.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);
- border-radius: 3px;
- padding: 15px 20px 5px 30px;
- bottom: 50px !important;
- right: 30px !important;
+}
+#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);
}
-@media (max-width: 1100px) {
- #gritter-notice-wrapper {
- display: 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-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.saved-revision {
+ max-width: 600px;
+}
+
+#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.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 bdaa184e9..d8425d895 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 7b3c0381b..0a50c9bbe 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 000000000..cd4ea08b5
--- /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 2fb837747..63eee2dd5 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 b2f26c4a2..fd6c5ea2b 100644
--- a/src/static/skins/colibris/src/components/table-of-content.css
+++ b/src/static/skins/colibris/src/components/table-of-content.css
@@ -1,11 +1,21 @@
#toc {
- background: none !important;
- background-color: rgb(249, 249, 249) !important;
- padding: 20px !important;
- width: 146px !important;
- padding-left: 15px !important;
+ padding: 20px 20px 10px 10px !important;
+ min-width: 146px !important;
+ background-color: transparent !important;
+ border: none !important;
+ order: -2;
}
#tocItems {
line-height: 40px !important;
+}
+
+.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 78d774c30..354e13249 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,111 +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.selected {
+ background-color: #f2f3f4;
+ background-color: var(--bg-soft-color);
+}
+.toolbar ul li a.pressed,
+.toolbar ul li select:active {
+ color: #64d29b;
+ color: var(--primary-color);
}
-.toolbar ul li a:hover {
- background:#f7f7f7!important
+.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 li a.selected,
-.toolbar ul li a:focus {
- background: #eaeaea!important;
+.toolbar .menu_right li a.selected {
+ background-color: #576273;
+ background-color: var(--text-soft-color);
+ color: #ffffff;
+ color: var(--bg-color);
}
-.toolbar ul li select {
- border: none;
- border-bottom: 1px solid #d7d8da;
- border-radius: 0;
- width: 90px;
- margin-top: 5px;
-}
-
-.toolbar ul {
- height: 39px;
-}
-
-.toolbar ul.menu_left {
- left: 8px;
-}
-
-.toolbar ul.menu_right {
- right: 0;
- padding: 0;
-}
-
-.toolbar ul li[data-key=showusers] a {
+.toolbar ul li[data-key=showusers] {
margin: 0;
- height: 59px;
- line-height: 25px;
+ margin-left: 15px;
width: 45px;
- margin-left: -10px;
- border-radius: 0;
+ height: 100%;
+}
+.toolbar ul li[data-key=showusers] > a {
+ width: 100%;
+ height: 100%;
+ border-radius: 0 !important;
+}
+
+.toolbar .menu_right .separator {
+ display: none;
+}
+.toolbar .menu_right li {
+ margin-left: 10px;
+}
+
+.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;
- border: none !important;
- padding: 0 !important;
- overflow-x: visible;
- }
- .toolbar ul.menu_left {
- padding-top: 2px !important;
- }
- .toolbar ul.menu_right {
- left: 0;
- padding-left: 8px !important;
- padding-top: 8px !important;
- height: 35px !important;
- border-top: 1px solid #d2d2d2 !important;
- background-color: white;
- }
- .toolbar ul li a {
- padding: 4px 5px !important;
+
+ .toolbar ul li {
+ margin: 5px 2px;
}
- .toolbar ul li[data-key=showusers] {
- position: absolute;
- right: 0;
- top: 0;
- }
- .toolbar ul li[data-key=showusers] a {
- padding-top: 9px !important;
+ .toolbar .menu_right {
+ border-top: 1px solid #d2d2d2;
+ border-top: var(--toolbar-border);
+ background-color: #ffffff;
+ background-color: var(--bg-color);
+ padding: 0;
}
+
.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 bb5fbb495..beb498e3b 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,24 @@ 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 000000000..f51d46ce5
--- /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 9a32962cf..a6dd784d7 100644
--- a/src/static/skins/colibris/src/layout.css
+++ b/src/static/skins/colibris/src/layout.css
@@ -1,76 +1,48 @@
-#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: #f2f3f4;
+ 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; }
+#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-left: var(--editor-horizontal-padding);
+ padding-right: var(--editor-horizontal-padding);
+ padding-top: var(--editor-vertical-padding);
+ padding-bottom: var(--editor-vertical-padding);
+ box-shadow: none;
border: 0;
- border-radius: 5px;
- background-color: white;
- width: calc(100% - 110px) !important; /* 100% - padding */
+ border-radius: 8px 8px 0 0;
+ 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 must be the same than editor, otherwise it creates problem */
+ padding-top: 40px; /* = #innerdocbody iframe vertical padding */
+ padding-bottom: 40px;
+ padding-top: var(--editor-vertical-padding);
+ padding-bottom: var(--editor-vertical-padding);
}
-#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) {
@@ -79,33 +51,16 @@
#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 {
+ max-width: none;
border-radius: 0;
- width: calc(100% - 40px) !important; /* 100% - padding */
- }
- #sidediv {
- 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; }
@@ -116,18 +71,9 @@
#outerdocbody.plugin-ep_author_neat #sidediv { padding-right: 0 !important; }
}
-@media (max-width:600px) {
- html { overflow: scroll; }
- #outerdocbody {
- width: 100%;
- }
- #outerdocbody iframe, .timeslider #editorcontainerbox {
- padding: 15px !important;
- width: calc(100% - 30px) !important; /* 100% - padding */
- }
- #sidediv {
- display: none;
- top: 15px !important; /* = #outerdocbody iframe padding-top */
+@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 aae79bf84..1d50ed0f9 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 000000000..212acdfcf
--- /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-horizontal-padding: 35px;
+ --editor-vertical-padding: 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-horizontal-padding: 35px !important;
+ --editor-vertical-padding: 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 32480cc9c..8db2880c1 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 000000000..005890ef4
--- /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 f11fa61c8..000000000
--- 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 e69de29bb..000000000
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 b5ec7e61c..000000000
--- 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 4ecd5c1cd..95f81cf31 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 94b195203..000000000
--- 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 ba5199baa..b7b9f3e10 100644
--- a/src/static/skins/colibris/timeslider.css
+++ b/src/static/skins/colibris/timeslider.css
@@ -1,142 +1,98 @@
-@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;
}
-#timeslider .star:before {
- color: #da9700;
- content: "\e836";
+#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);
+}
+#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;
+
+#editbar {
+ display: block;
+ padding-bottom: 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 li > a {
+ border-radius: 3px;
}
-.timeslider #rightstep {
- top: 12px;
- right: 30px;
-}
-
-.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;
+ margin-right: 4px;
+ margin-bottom: 4px;
+}
+
+.timeslider-title {
+ font-size: 1.8rem !important;
+}
+.timeslider-subtitle {
+ margin-top: 6px;
+ font-size: .9em;
+}
+
+@media (max-width: 720px) {
+
+ #slider-btn-container {
+ margin-top: 0;
+ margin-right: 5px;
+ }
+ #slider-btn-container #playpause_button_icon {
+ width: 30px;
+ height: 30px;
+ }
+ #slider-btn-container #playpause_button_icon:before {
+ font-size: 18px;
+ }
}
\ No newline at end of file
diff --git a/src/static/skins/colibris/timeslider.js b/src/static/skins/colibris/timeslider.js
index c94a55778..1322ec4c8 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 b8cdb4642..e69de29bb 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 34bcf0599..45f9a7d3d 100644
--- a/src/templates/pad.html
+++ b/src/templates/pad.html
@@ -5,346 +5,377 @@
;
%>
+
<% 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"); %>
-
