css: minor improvements

src/static/css/iframe_editor.css

@@ -92,7 +92,7 @@ body.doesWrap:not(.noprewrap) > div {
 }
 #sidedivinner {
   text-align: right;
-  opacity: .7;
+  opacity: .9;
 }
 #sidediv:not(.sidedivdelayed) { /* before sidediv get initialized, hide text */
   color: transparent;
@@ -132,7 +132,7 @@ body.doesWrap:not(.noprewrap) > div {
 ::-moz-selection {
   background: #acf;
 }
-a {
+#innerdocbody a {
   cursor: pointer !important;
   white-space:pre-wrap;
 }

src/static/css/pad.css

@@ -14,10 +14,15 @@
 
 html {
   font-size: 14px;
-  font-family: Cantarell, Roboto, "Open Sans", "Helvetica Neue", Arial, sans-serif;
   line-height: 20px;
   color: #3e3e3e;
 }
+
+html,
+#sidedivinner > div:before {
+  font-family: Cantarell, Roboto, "Open Sans", "Helvetica Neue", Arial, sans-serif;
+}
+
 .clear {
   clear: both
 }

src/static/css/pad/chat.css

@@ -42,6 +42,7 @@
 }
 #titlebar #titlelabel {
   margin: 4px 0 0 4px;
+  display: inline;
 }
 #titlebar .stick-to-screen-btn,
 #titlebar .hide-reduce-btn {
@@ -106,6 +107,7 @@
 #chaticon #chatcounter {
   font-size: .8rem;
   vertical-align: middle;
+  margin-left: 5px;
 }
 
 /* -- LOAD MESSAGES -- */

src/static/css/pad/popup_users.css

@@ -115,7 +115,9 @@ input#myusernameedit:not(.editable) {
 /* ------------------- */
 /* --- OTHER USERS --- */
 /* ------------------- */
-
+#otheruserstable {
+  display: none;
+}
 #otheruserstable td {
   height: 26px;
   padding: 0 2px;

src/static/css/timeslider.css

@@ -71,7 +71,7 @@
 #timeslider-slider .star {
   cursor: pointer;
   position: absolute;
-  top: -6px
+  top: -8px
 }
 #timeslider-slider .star:before{
   font-family: fontawesome-etherpad;

src/static/js/farbtastic.js

@@ -1,4 +1,5 @@
 // Farbtastic 2.0 alpha
+// edited by Sebastian Castro <sebastian.castro@protonmail.com> on 2020-04-06
 (function ($) {
 
 var __debug = false;
@@ -304,19 +305,17 @@ $._farbtastic = function (container, options) {
    */
   fb.drawMarkers = function () {
     // Determine marker dimensions
-    var sz = options.width, lw = Math.ceil(fb.markerSize / 4), r = fb.markerSize - lw + 1;
+    var sz = options.width;
     var angle = fb.hsl[0] * 6.28,
         x1 =  Math.sin(angle) * fb.radius,
         y1 = -Math.cos(angle) * fb.radius,
         x2 = 2 * fb.square * (.5 - fb.hsl[1]),
-        y2 = 2 * fb.square * (.5 - fb.hsl[2]),
-        c1 = fb.invert ? '#fff' : '#000',
-        c2 = fb.invert ? '#000' : '#fff';
+        y2 = 2 * fb.square * (.5 - fb.hsl[2]);
     var circles = [
-      { x: x1, y: y1, r: r,             c: '#000', lw: lw + 1 },
-      { x: x1, y: y1, r: fb.markerSize, c: '#fff', lw: lw },
-      { x: x2, y: y2, r: r,             c: c2,     lw: lw + 1 },
-      { x: x2, y: y2, r: fb.markerSize, c: c1,     lw: lw },
+      { x: x1, y: y1, r: fb.markerSize + 1, c: 'rgb(0,0,0,.4)', lw: 2 },
+      { x: x1, y: y1, r: fb.markerSize, c: '#fff', lw: 2 },
+      { x: x2, y: y2, r: fb.markerSize + 1, c: 'rgb(0,0,0,.4)', lw: 2 },
+      { x: x2, y: y2, r: fb.markerSize, c: '#fff',     lw: 2 },
     ];
 
     // Update the overlay canvas.

src/static/js/pad_userlist.js

@@ -207,6 +207,7 @@ var paduserlist = (function()
         tr = $(getRowHtml(domId, getEmptyRowHtml(getAnimationHeight(ANIMATION_START)), authorId));
       }
       handleRowNode(tr, data);
+      $("table#otheruserstable").show();
       if (position == 0)
       {
         $("table#otheruserstable").prepend(tr);
@@ -263,6 +264,9 @@ var paduserlist = (function()
           scheduleAnimation();
         }
       }
+      if (rowsPresent.length === 0) {
+        $("table#otheruserstable").hide();
+      }
     }
 
     // newPosition is position after the row has been removed

src/static/skins/colibris/pad.css

@@ -78,16 +78,20 @@ p[data-l10n-id="ep_comments_page.comment"],
 #slider-btn-container button {
   border-color: #64d29b;
 }
+
+h2 {
+  opacity: .9 !important; /* make it a bit less agressive */
+}
 /* PRIMARY-COLOR VARIANT */
 .toolbar ul li a.selected,
 .toolbar ul li a.pressed,
 .toolbar ul li select:active {
-  background-color: #f0faf6 !important;
+  background-color: #f0faf6 !important; /* primary light */
 }
 .toolbar ul li a.selected .buttonicon,
 .toolbar ul li a.pressed .buttonicon,
 .toolbar ul li select:active {
-  color: #5abb89;
+  color: #5abb89; /* primary a bit darker */
 }
 
 /* BACKGROUND COLOR */
@@ -96,4 +100,6 @@ p[data-l10n-id="ep_comments_page.comment"],
 }
 
 /* FONT */
-body { font-family: Quicksand, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; }
+body,
+#sidedivinner > div:before
+{ font-family: Quicksand, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; }

src/static/skins/colibris/src/components/gritter.css

@@ -1,11 +1,14 @@
-.gritter-item {
-  margin-bottom: 10px;
-}
 .gritter-item .popup-content {
   color: white;
+  margin-bottom: 10px;
   box-shadow: 0 0 0 1px rgba(99, 114, 130, 0.16), 0 8px 16px rgba(27, 39, 51, 0.08);
 }
-
+.gritter-item p {
+  margin: 0;
+}
+.gritter-item .gritter-title {
+  margin-bottom: 20px;
+}
 .gritter-item .gritter-close {
   margin-left: 10px;
   margin-right: -5px;

src/static/skins/colibris/src/components/popup.css

@@ -12,11 +12,13 @@
 }
 
 .popup h1 {
-  margin-bottom: 15px;
+  margin-bottom: 20px;
+  font-size: 1.6rem;
 }
 
 .popup h2 {
   margin-bottom: 15px;
+  margin-top: 20px;
 }
 
 .popup p {

src/static/skins/colibris/src/components/sidediv.css

@@ -6,7 +6,7 @@
 #sidedivinner>div:before {
   font-size: 13px;
   padding-right: 18px !important;
-  color: #6a6a6b;
+  color: #818188;
   text-transform: uppercase;
   font-size: 11px !important;
   font-weight: bold;
@@ -22,7 +22,7 @@
 #sidedivinner>div {
   line-height: 24px;
   font-size: 10px !important;
-  color: #7b7878;
+  color: #b2aaaa;
 }
 
 #sidedivinner.authorColors>div, #sidedivinner.authorColors>div.primary-none, #sidedivinner>div {

src/static/skins/colibris/src/components/toolbar.css

@@ -2,6 +2,7 @@
   background-color: white;
   border-bottom: 1px solid #d2d2d2;
   padding: 0;
+  color: #5f6368;
 }
 
 .toolbar ul {
@@ -15,16 +16,18 @@
 .toolbar ul li {
   margin: 5px 1px;
 }
+.toolbar ul li a, .toolbar .buttonicon {
+  color: inherit;
+}
 
 .toolbar .buttonicon {
   background-color: transparent;
   font-size: 15px;
-  color: #5f6368;
 }
-.buttonicon-insertorderedlist,
-.buttonicon-insertunorderedlist,
-.buttonicon-indent,
-.buttonicon-outdent {
+.buttonicon-insertorderedlist:before,
+.buttonicon-insertunorderedlist:before,
+.buttonicon-indent:before,
+.buttonicon-outdent:before {
   font-size: 16px !important;
 }
 
@@ -75,7 +78,6 @@
   border-radius: 3px;
   width: auto;
   font-weight: bold;
-  color: #6d7075;
   font-size: 14px;
 }
 
@@ -96,6 +98,7 @@
 }
 .toolbar .menu_right li {
   margin-left: 8px;
+  opacity: .9;
 }
 
 .toolbar.cropped .menu_left {
@@ -114,10 +117,6 @@
     background: none;
     display: block;
   }
-
-  .toolbar ul li[data-key=showusers] {
-    margin-left: -5px !important;
-  }
 }
 
 @media (max-width: 720px) {

src/static/skins/colibris/src/components/users.css

@@ -1,5 +1,5 @@
 table#otheruserstable {
-  margin-top: 10px !important;
+  margin-top: 20px;
 }
 
 #otheruserstable .swatch {
@@ -16,8 +16,12 @@ table#otheruserstable {
   margin-left: 35px;
 }
 
-#myusernameedit {
+input#myusernameedit {
   min-width: 110px;
+  border: none !important;
+  border-bottom: 1px solid #ddd !important;
+  border-radius: 0;
+  padding-bottom: 5px;
 }
 
 #myswatch {

src/static/skins/colibris/timeslider.css

@@ -9,17 +9,24 @@
   background-color: #e4e4e4;
 }
 #slider-btn-container {
-  margin: 0 20px;
-  margin-top: -15px;
+  margin: -18px 15px 0 20px;
 }
 #slider-btn-container #playpause_button_icon {
   color: white;
   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: 25px;
-  width: 25px;
+  height: 30px;
+  width: 30px;
+  line-height: 28px;
   margin-left: 5px;
   font-size: 13px;
 }

src/templates/pad.html

@@ -363,7 +363,7 @@
 
         <div id="chatbox">
             <div id="titlebar">
-              <span id ="titlelabel" data-l10n-id="pad.chat"></span>
+              <h1 id ="titlelabel" data-l10n-id="pad.chat"></h1>
               <a id="titlecross" class="hide-reduce-btn" onClick="chat.hide();return false;">-&nbsp;</a>
               <a id="titlesticky" class="stick-to-screen-btn" onClick="chat.stickToScreen(true);return false;" data-l10n-id="pad.chat.stick.title">█&nbsp;&nbsp;</a>
             </div>