diff --git a/src/static/css/iframe_editor.css b/src/static/css/iframe_editor.css index 8d6a60ec2..17b72885e 100644 --- a/src/static/css/iframe_editor.css +++ b/src/static/css/iframe_editor.css @@ -25,9 +25,10 @@ html.inner-editor { /* ACE-PAD Container (i.e. where the text is displayed) */ #innerdocbody { - padding: 10px; + padding: 15px; overflow: hidden; background-color: white; + line-height: 1.6; /* Be careful editing following rules. Longs words should not overflow, ep_align justify should work, Test on chrome, firefox and safari... Copy / Paste a word inside a sentence should not add line-breaks @@ -49,9 +50,9 @@ html.inner-editor { color: inherit; } -#innerdocbody span { - line-height: 125%; - padding: 6px 0 !important; +#innerdocbody.authorColors span { + padding-top: 3px; + padding-bottom: 4px; } option { @@ -62,8 +63,15 @@ option { #innerdocbody h2, #innerdocbody h3, #innerdocbody h4 { + line-height: 1.2; margin-bottom: .5em; } +#innerdocbody h1 span, +#innerdocbody h2 span, +#innerdocbody h3 span, +#innerdocbody h4 span { + padding-top: 0; +} /* --------------------- */ /* -- BROWSER SUPPORT -- */ @@ -87,9 +95,12 @@ body.mozilla, body.safari { } #sidediv .line-number { font-size: 9px; - padding: 0 10px; + padding: 0 14px 0 10px; font-family: monospace; } +.plugin-ep_author_neat #sidedivinner.authorColors .line-number { + padding-right: 10px; +} #sidedivinner { text-align: right; opacity: .9; diff --git a/src/static/css/pad.css b/src/static/css/pad.css index cf89ed35d..2043c3fff 100644 --- a/src/static/css/pad.css +++ b/src/static/css/pad.css @@ -14,14 +14,14 @@ @import url("pad/form.css"); html { - font-size: 14px; + font-size: 15px; line-height: 20px; color: #3e3e3e; } html, #sidedivinner > div:before { - font-family: Cantarell, Roboto, "Open Sans", "Helvetica Neue", Arial, sans-serif; + font-family: Roboto; } .clear { diff --git a/src/static/css/pad/fonts.css b/src/static/css/pad/fonts.css index 60b083ff6..d8c96c758 100644 --- a/src/static/css/pad/fonts.css +++ b/src/static/css/pad/fonts.css @@ -58,4 +58,22 @@ src: url("../../../static/font/Roboto-Bold.ttf") format("truetype"); font-weight: bold; font-style: normal; +} + + +@font-face { + font-family: 'Alegreya'; + font-style: normal; + font-weight: 400; + src: local('Alegreya Medium'), local('Alegreya-Medium'), + url('../../../static/font/Aleygreya-Medium.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ + url('../../../static/font/Aleygreya-Medium.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ +} +@font-face { + font-family: 'Alegreya'; + font-style: normal; + font-weight: 700; + src: local('Alegreya ExtraBold'), local('Alegreya-ExtraBold'), + url('../../../static/font/Aleygreya-ExtraBold.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ + url('../../../static/font/Aleygreya-ExtraBold.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } \ No newline at end of file diff --git a/src/static/css/pad/form.css b/src/static/css/pad/form.css index 0604b1a77..92f9a8530 100644 --- a/src/static/css/pad/form.css +++ b/src/static/css/pad/form.css @@ -23,7 +23,7 @@ select, .nice-select { -ms-user-select: none; user-select: none; white-space: nowrap; - width: 120px; + min-width: 100px; text-transform: capitalize; } .popup .nice-select { @@ -32,11 +32,6 @@ select, .nice-select { .nice-select:hover { border-color: #dbdbdb; } -.nice-select .current { - width: 90px; - display: inline-block; - overflow: hidden; -} .nice-select:after { border-bottom: 2px solid #999; border-right: 2px solid #999; diff --git a/src/static/css/timeslider.css b/src/static/css/timeslider.css index 35f756596..252248b33 100644 --- a/src/static/css/timeslider.css +++ b/src/static/css/timeslider.css @@ -21,7 +21,10 @@ } /* RIGHT TOOLBAR (export, settings, back to pad) */ - +.editbarright { + flex-shrink: 0; /* prevent the back to pad button to shrink */ + margin-top: -10px; +} .editbarright ul li a { background-color: transparent; border: none; diff --git a/src/static/font/Aleygreya-ExtraBold.woff b/src/static/font/Aleygreya-ExtraBold.woff new file mode 100644 index 000000000..b1e0423bb Binary files /dev/null and b/src/static/font/Aleygreya-ExtraBold.woff differ diff --git a/src/static/font/Aleygreya-ExtraBold.woff2 b/src/static/font/Aleygreya-ExtraBold.woff2 new file mode 100644 index 000000000..f66acbaf8 Binary files /dev/null and b/src/static/font/Aleygreya-ExtraBold.woff2 differ diff --git a/src/static/font/Aleygreya-Medium.woff b/src/static/font/Aleygreya-Medium.woff new file mode 100644 index 000000000..0403d5714 Binary files /dev/null and b/src/static/font/Aleygreya-Medium.woff differ diff --git a/src/static/font/Aleygreya-Medium.woff2 b/src/static/font/Aleygreya-Medium.woff2 new file mode 100644 index 000000000..5056666ba Binary files /dev/null and b/src/static/font/Aleygreya-Medium.woff2 differ diff --git a/src/static/js/ace2_inner.js b/src/static/js/ace2_inner.js index ea9566154..787aaaf94 100644 --- a/src/static/js/ace2_inner.js +++ b/src/static/js/ace2_inner.js @@ -156,15 +156,6 @@ function Ace2Inner(){ var scheduler = parent; // hack for opera required - var textFace = 'monospace'; - var textSize = 12; - - - function textLineHeight() - { - return Math.round(textSize * 4 / 3); - } - var dynamicCSS = null; var outerDynamicCSS = null; var parentDynamicCSS = null; @@ -312,25 +303,6 @@ function Ace2Inner(){ return ".authorColors ." + oneClassName; } - function setUpTrackingCSS() - { - if (dynamicCSS) - { - var backgroundHeight = lineMetricsDiv.offsetHeight; - var lineHeight = textLineHeight(); - var extraBodding = 0; - var extraTodding = 0; - if (backgroundHeight < lineHeight) - { - extraBodding = Math.ceil((lineHeight - backgroundHeight) / 2); - extraTodding = lineHeight - backgroundHeight - extraBodding; - } - var spanStyle = dynamicCSS.selectorStyle("#innerdocbody span"); - spanStyle.paddingTop = extraTodding + "px"; - spanStyle.paddingBottom = extraBodding + "px"; - } - } - function fadeColor(colorCSS, fadeFrac) { var color = colorutils.css2triple(colorCSS); @@ -623,26 +595,8 @@ function Ace2Inner(){ function setTextFace(face) { - textFace = face; - root.style.fontFamily = textFace; - lineMetricsDiv.style.fontFamily = textFace; - scheduler.setTimeout(function() - { - setUpTrackingCSS(); - }, 0); - } - - function setTextSize(size) - { - textSize = size; - root.style.fontSize = textSize + "px"; - root.style.lineHeight = textLineHeight() + "px"; - sideDiv.style.lineHeight = textLineHeight() + "px"; - lineMetricsDiv.style.fontSize = textSize + "px"; - scheduler.setTimeout(function() - { - setUpTrackingCSS(); - }, 0); + root.style.fontFamily = face; + lineMetricsDiv.style.fontFamily = face; } function recreateDOM() @@ -962,7 +916,6 @@ function Ace2Inner(){ }, styled: setStyled, textface: setTextFace, - textsize: setTextSize, rtlistrue: function(value) { setClassPresence(root, "rtl", value) setClassPresence(root, "ltr", !value) @@ -984,7 +937,6 @@ function Ace2Inner(){ }; editorInfo.ace_setBaseAttributedText = function(atxt, apoolJsonObj) { - setUpTrackingCSS(); changesetTracker.setBaseAttributedText(atxt, apoolJsonObj); }; editorInfo.ace_applyChangesToBase = function(c, optAuthor, apoolJsonObj) diff --git a/src/static/js/broadcast_slider.js b/src/static/js/broadcast_slider.js index 5f4325bbc..542ee78e1 100644 --- a/src/static/js/broadcast_slider.js +++ b/src/static/js/broadcast_slider.js @@ -24,6 +24,7 @@ // Timeslider controller would probably be more appropriate. var _ = require('./underscore'); var padmodals = require('./pad_modals').padmodals; +var colorutils = require('./colorutils').colorutils; function loadBroadcastSliderJS(fireWhenAllScriptsAreLoaded) { @@ -151,10 +152,11 @@ function loadBroadcastSliderJS(fireWhenAllScriptsAreLoaded) if (author.name) { if (numNamed !== 0) authorsList.append(', '); - + var textColor = colorutils.textColorFromBackgroundColor(authorColor, clientVars.skinName) $('') .text(author.name || "unnamed") .css('background-color', authorColor) + .css('color', textColor) .addClass('author') .appendTo(authorsList); diff --git a/src/static/skins/colibris/pad.css b/src/static/skins/colibris/pad.css index 68e8db1a8..a12bec385 100644 --- a/src/static/skins/colibris/pad.css +++ b/src/static/skins/colibris/pad.css @@ -50,21 +50,15 @@ --main-font-family: Quicksand, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; - --editor-horizontal-padding: 55px; - --editor-vertical-padding: 40px; + /* Those padding like an external padding. Basic padding of 15px is always applied */ + --editor-horizontal-padding: 40px; + --editor-vertical-padding: 25px; } @media (max-width:1000px) { :root { - --editor-horizontal-padding: 15px; - --editor-vertical-padding: 15px; - } -} - -@media (max-width:600px) { - :root { - --editor-horizontal-padding: 15px; - --editor-vertical-padding: 15px; + --editor-horizontal-padding: 0px; + --editor-vertical-padding: 0px; } } diff --git a/src/static/skins/colibris/src/general.css b/src/static/skins/colibris/src/general.css index f51d46ce5..1caf6a0f7 100644 --- a/src/static/skins/colibris/src/general.css +++ b/src/static/skins/colibris/src/general.css @@ -1,7 +1,3 @@ -html { - font-size: 15px; -} - body { color: #485365; color: var(--text-color); diff --git a/src/static/skins/colibris/src/layout.css b/src/static/skins/colibris/src/layout.css index dc27f94a3..6385cf140 100644 --- a/src/static/skins/colibris/src/layout.css +++ b/src/static/skins/colibris/src/layout.css @@ -33,8 +33,8 @@ /* 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); + padding-top: calc(var(--editor-vertical-padding) + 15px); + padding-bottom: calc(var(--editor-vertical-padding) + 15px); } @media (max-width:1000px) { diff --git a/src/static/skins/colibris/src/pad-editor.css b/src/static/skins/colibris/src/pad-editor.css index f8436e88c..7a4c8ec9d 100644 --- a/src/static/skins/colibris/src/pad-editor.css +++ b/src/static/skins/colibris/src/pad-editor.css @@ -1,7 +1,4 @@ #innerdocbody { - font-size: 15px; - line-height: 25px; - padding: 0; background: transparent; color: #485365; color: var(--text-color); diff --git a/src/static/skins/colibris/src/pad-variants.css b/src/static/skins/colibris/src/pad-variants.css index bd63604c9..1b335d3ab 100644 --- a/src/static/skins/colibris/src/pad-variants.css +++ b/src/static/skins/colibris/src/pad-variants.css @@ -1,7 +1,7 @@ /* =========================== */ /* === Super Light Toolbar === */ /* =========================== */ -.super-light-toolbar .toolbar, .super-light-toolbar .popup-content, #pad_title { +.super-light-toolbar .toolbar, .super-light-toolbar .popup-content, .super-light-toolbar #pad_title { --text-color: var(--super-dark-color); --text-soft-color: var(--dark-color); --border-color: #e4e6e9; @@ -11,7 +11,7 @@ /* ===================== */ /* === Light Toolbar === */ /* ===================== */ -.light-toolbar .toolbar, .light-toolbar .popup-content, #pad_title { +.light-toolbar .toolbar, .light-toolbar .popup-content, .light-toolbar #pad_title { --text-color: var(--super-dark-color); --text-soft-color: var(--dark-color); --border-color: var(--middle-color); @@ -21,7 +21,7 @@ /* ========================== */ /* === Super Dark Toolbar === */ /* ========================== */ -.super-dark-toolbar .toolbar, .super-dark-toolbar .popup-content, #pad_title { +.super-dark-toolbar .toolbar, .super-dark-toolbar .popup-content, .super-dark-toolbar #pad_title { --text-color: var(--super-light-color); --text-soft-color: var(--light-color); --border-color: var(--dark-color); @@ -35,7 +35,7 @@ /* ==================== */ /* === Dark Toolbar === */ /* ==================== */ -.dark-toolbar .toolbar, .dark-toolbar .popup-content, #pad_title { +.dark-toolbar .toolbar, .dark-toolbar .popup-content, .dark-toolbar #pad_title { --text-color: var(--super-light-color); --text-soft-color: var(--light-color); --border-color: var(--super-dark-color); @@ -189,8 +189,8 @@ .light-editor.light-background, .super-dark-editor.super-dark-background, .dark-editor.dark-background { - --editor-horizontal-padding: 35px; - --editor-vertical-padding: 20px; + --editor-horizontal-padding: 20px; + --editor-vertical-padding: 5px; } } @@ -218,8 +218,8 @@ } @media (min-width: 1001px) { .full-width-editor { - --editor-horizontal-padding: 35px !important; - --editor-vertical-padding: 20px !important; + --editor-horizontal-padding: 20px !important; + --editor-vertical-padding: 5px !important; } } .full-width-editor ::-webkit-scrollbar-track, diff --git a/src/static/skins/colibris/src/plugins/font_color.css b/src/static/skins/colibris/src/plugins/font_color.css index 95f81cf31..43647ac4d 100644 --- a/src/static/skins/colibris/src/plugins/font_color.css +++ b/src/static/skins/colibris/src/plugins/font_color.css @@ -5,6 +5,9 @@ #font-color { display: list-item !important; } +.readonly #font-color { + display: none !important; +} .color\:black, [data-color=black] { diff --git a/src/templates/pad.html b/src/templates/pad.html index fa4a619ec..25496b4ec 100644 --- a/src/templates/pad.html +++ b/src/templates/pad.html @@ -146,10 +146,7 @@ - <%= fonts = [ - "Quicksand", "Roboto", "Montserrat", "OpenDyslexic", "monospace", "RobotoMono", - "Arial", "Georgia", "Times New Roman", "Verdana", "Courrier New", - "Open Sans", "Lato", "Helvetica" ] %> + <%= fonts = ["Quicksand", "Roboto", "Alegreya", "PlayfairDisplay", "Montserrat", "OpenDyslexic", "RobotoMono"] %> <% for(var i=0; i < fonts.length; i++) { %> <% } %>