css: minor improvements

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