Frontpage and Heatmap CSS tweaks (#13443)

* Frontpage and Heatmap CSS tweaks

- Make heatmap use primary color
- Defined secondary color shades
- Set various blue colors to CSS vars
- Misc tweaks

* remove a useless variable

* remove another useless variable

Co-authored-by: Lauris BH <lauris@nix.lv>

web_src/js/components/ActivityHeatmap.vue

@@ -1,11 +1,11 @@
 <template>
-  <div>
+  <div class="heatmap-container">
     <div v-show="isLoading">
       <slot name="loading"/>
     </div>
-    <h4 v-if="!isLoading" class="total-contributions">
+    <div v-if="!isLoading" class="total-contributions">
-      {{ values.length }} total contributions in the last 12 months
+      {{ values.length }} contributions in the last 12 months
-    </h4>
+    </div>
     <calendar-heatmap
       v-show="!isLoading"
       :locale="locale"
@@ -26,45 +26,28 @@ export default {
   components: {CalendarHeatmap},
   data: () => ({
     isLoading: true,
-    colorRange: [],
+    colorRange: [
-    endDate: null,
+      'var(--color-secondary-alpha-70)',
+      'var(--color-primary-alpha-50)',
+      'var(--color-primary-alpha-60)',
+      'var(--color-primary-alpha-70)',
+      'var(--color-primary-alpha-80)',
+      'var(--color-primary)',
+    ],
+    endDate: new Date(),
     values: [],
-    suburl: AppSubUrl,
-    user: heatmapUser,
     locale: {
       contributions: 'contributions',
       no_contributions: 'No contributions',
     },
   }),
-  mounted() {
+  async mounted() {
-    this.colorRange = [
+    const res = await fetch(`${AppSubUrl}/api/v1/users/${heatmapUser}/heatmap`);
-      this.getColor(0),
+    const data = await res.json();
-      this.getColor(1),
+    this.values = data.map(({contributions, timestamp}) => {
-      this.getColor(2),
+      return {date: new Date(timestamp * 1000), count: contributions};
-      this.getColor(3),
+    });
-      this.getColor(4),
+    this.isLoading = false;
-      this.getColor(5)
-    ];
-    this.endDate = new Date();
-    this.loadHeatmap(this.user);
-  },
-  methods: {
-    async loadHeatmap(userName) {
-      const res = await fetch(`${this.suburl}/api/v1/users/${userName}/heatmap`);
-      const data = await res.json();
-      this.values = data.map(({contributions, timestamp}) => {
-        return {date: new Date(timestamp * 1000), count: contributions};
-      });
-      this.isLoading = false;
-    },
-    getColor(idx) {
-      const el = document.createElement('div');
-      el.className = `heatmap-color-${idx}`;
-      document.body.appendChild(el);
-      const color = getComputedStyle(el).backgroundColor;
-      document.body.removeChild(el);
-      return color;
-    }
   },
 };
 </script>

web_src/less/_base.less

@@ -30,7 +30,33 @@
   --color-primary-alpha-70: #4183c4b3;
   --color-primary-alpha-80: #4183c4cc;
   --color-primary-alpha-90: #4183c4e1;
-  --color-secondary: rgba(34, 36, 38, .15);
+  --color-secondary: #dedede;
+  --color-secondary-dark-1: #cecece;
+  --color-secondary-dark-2: #bfbfbf;
+  --color-secondary-dark-3: #a0a0a0;
+  --color-secondary-dark-4: #909090;
+  --color-secondary-dark-5: #818181;
+  --color-secondary-dark-6: #717171;
+  --color-secondary-dark-7: #626262;
+  --color-secondary-dark-7: #525252;
+  --color-secondary-dark-8: #434343;
+  --color-secondary-dark-8: #333333;
+  --color-secondary-dark-9: #242424;
+  --color-secondary-dark-10: #141414;
+  --color-secondary-dark-11: #040404;
+  --color-secondary-light-1: #e5e5e5;
+  --color-secondary-light-2: #ebebeb;
+  --color-secondary-light-3: #f2f2f2;
+  --color-secondary-light-4: #f8f8f8;
+  --color-secondary-alpha-10: #dedede19;
+  --color-secondary-alpha-20: #dedede33;
+  --color-secondary-alpha-30: #dedede4b;
+  --color-secondary-alpha-40: #dedede66;
+  --color-secondary-alpha-50: #dedede80;
+  --color-secondary-alpha-60: #dedede99;
+  --color-secondary-alpha-70: #dededeb3;
+  --color-secondary-alpha-80: #dededecc;
+  --color-secondary-alpha-90: #dededee1;
   --color-body: #fff;
 }
 
@@ -192,6 +218,43 @@ a:hover,
   color: var(--color-primary-dark-2);
 }
 
+.ui.input.focus > input,
+.ui.input > input:focus {
+  border-color: var(--color-primary);
+}
+
+.ui.action.input:not([class*="left action"]) > input:focus {
+  border-right-color: var(--color-primary);
+}
+
+.ui.form input:not([type]):focus,
+.ui.form textarea:focus,
+.ui.form input[type="date"]:focus,
+.ui.form input[type="datetime-local"]:focus,
+.ui.form input[type="email"]:focus,
+.ui.form input[type="file"]:focus,
+.ui.form input[type="number"]:focus,
+.ui.form input[type="password"]:focus,
+.ui.form input[type="search"]:focus,
+.ui.form input[type="tel"]:focus,
+.ui.form input[type="text"]:focus,
+.ui.form input[type="time"]:focus,
+.ui.form input[type="url"]:focus,
+.ui.selection.dropdown:focus {
+  border-color: var(--color-primary);
+}
+
+.ui.selection.active.dropdown,
+.ui.selection.active.dropdown:hover,
+.ui.selection.active.dropdown .menu,
+.ui.selection.active.dropdown:hover .menu {
+  border-color: var(--color-primary-light-2);
+}
+
+.ui.selection.dropdown .menu {
+  margin: 0 -1.25px;
+}
+
 .dont-break-out {
   overflow-wrap: break-word;
   word-wrap: break-word;
@@ -963,59 +1026,13 @@ footer {
   margin-bottom: 2px !important;
 }
 
-#user-heatmap {
-  width: 107%; // Fixes newest contributions not showing
-  text-align: center;
-
-  svg:not(:root) {
-    overflow: inherit;
-    padding: 0 !important;
-  }
-
-  @media only screen and (max-width: 1200px) {
-    & {
-      display: none;
-    }
-  }
-
-  .total-contributions {
-    text-align: left;
-    font-weight: 500;
-    margin-top: 0;
-  }
-}
-
-.heatmap-color-0 {
-  background-color: #f4f4f4;
-}
-
-.heatmap-color-1 {
-  background-color: #d8efbf;
-}
-
-.heatmap-color-2 {
-  background-color: #9fdb81;
-}
-
-.heatmap-color-3 {
-  background-color: #66c74b;
-}
-
-.heatmap-color-4 {
-  background-color: #609926;
-}
-
-.heatmap-color-5 {
-  background-color: #025900;
-}
-
 .activity-bar-graph {
-  background-color: #6cc644;
+  background-color: var(--color-primary);
-  color: #000000;
+  color: #fff;
 }
 
 .activity-bar-graph-alt {
-  color: #000000;
+  color: #fff;
 }
 
 .archived-icon {

web_src/less/_dashboard.less

@@ -82,7 +82,6 @@
 
 &.feeds {
   .news {
-
     li {
       display: flex;
       align-items: baseline;
@@ -138,6 +137,10 @@
       border-radius: 3px;
       word-break: break-all;
     }
+
+    &:last-of-type .divider {
+      display: none !important;
+    }
   }
 
   .list {
@@ -160,7 +163,7 @@
 
       li {
         &:not(:last-child) {
-          border-bottom: 1px solid #ebebeb;
+          border-bottom: 1px solid var(--color-secondary);
         }
 
         &.private {
@@ -172,7 +175,7 @@
           display: block;
 
           .svg {
-            color: #888888;
+            color: var(--color-secondary-dark-6);
 
             &.rear {
               font-size: 15px;

web_src/less/features/heatmap.less

@@ -0,0 +1,50 @@
+#user-heatmap {
+  width: 107%; // Fixes newest contributions not showing
+  text-align: center;
+
+  svg:not(:root) {
+    overflow: inherit;
+    padding: 0 !important;
+  }
+
+  @media (max-width: 1200px) {
+    & {
+      display: none;
+    }
+  }
+
+  .total-contributions {
+    text-align: left;
+    font-weight: 500;
+    margin-top: 0;
+  }
+}
+
+.heatmap-container {
+  position: relative;
+}
+
+.heatmap-container .total-contributions {
+  font-size: 11px;
+  position: absolute;
+  bottom: 0;
+  left: 25px;
+}
+
+@media (max-width: 1200px) {
+  .heatmap-container .total-contributions {
+    left: 21px;
+  }
+}
+
+@media (max-width: 1000px) {
+  .heatmap-container .total-contributions {
+    font-size: 10px;
+    left: 17px;
+    bottom: -2px;
+  }
+}
+
+.heatmap-container text {
+  fill: currentColor !important;
+}

web_src/less/index.less

@@ -2,6 +2,7 @@
 
 @import "./features/gitgraph.less";
 @import "./features/animations.less";
+@import "./features/heatmap.less";
 @import "./markdown/mermaid.less";
 
 @import "_svg";

web_src/less/themes/theme-arc-green.less

@@ -24,6 +24,32 @@
   --color-primary-alpha-80: #87ab63cc;
   --color-primary-alpha-90: #87ab63e1;
   --color-secondary: #454a57;
+  --color-secondary-dark-1: #505665;
+  --color-secondary-dark-2: #5b6273;
+  --color-secondary-dark-3: #71798e;
+  --color-secondary-dark-4: #7f8699;
+  --color-secondary-dark-5: #8c93a4;
+  --color-secondary-dark-6: #9aa0af;
+  --color-secondary-dark-7: #a8adba;
+  --color-secondary-dark-7: #b6bac5;
+  --color-secondary-dark-8: #c4c7d0;
+  --color-secondary-dark-8: #d2d4db;
+  --color-secondary-dark-9: #dfe1e6;
+  --color-secondary-dark-10: #edeef1;
+  --color-secondary-dark-11: #fbfbfc;
+  --color-secondary-light-1: #373b46;
+  --color-secondary-light-2: #292c34;
+  --color-secondary-light-3: #1c1e23;
+  --color-secondary-light-4: #0e0f11;
+  --color-secondary-alpha-10: #454a5719;
+  --color-secondary-alpha-20: #454a5733;
+  --color-secondary-alpha-30: #454a574b;
+  --color-secondary-alpha-40: #454a5766;
+  --color-secondary-alpha-50: #454a5780;
+  --color-secondary-alpha-60: #454a5799;
+  --color-secondary-alpha-70: #454a57b3;
+  --color-secondary-alpha-80: #454a57cc;
+  --color-secondary-alpha-90: #454a57e1;
   --color-body: #383c4a;
 }
 
@@ -438,7 +464,7 @@
 }
 
 body {
-  color: #a5a5a8;
+  color: var(--color-secondary-dark-6);
 }
 
 ::placeholder,
@@ -528,7 +554,7 @@ body {
 }
 
 .ui.secondary.menu .item {
-  color: #a5a5a8;
+  color: var(--color-secondary-dark-6);
 }
 
 .following.bar .top.menu a.item:hover {
@@ -543,16 +569,10 @@ body {
 
 .ui.attached.table {
   border: 1px solid #304251;
-  background: #304251;
-}
-
-.feeds .list ul li:not(:last-child) {
-  border-bottom: 1px solid #333640;
 }
 
 .feeds .list ul li.private {
   background: #353945;
-  border: 1px solid #333640;
 }
 
 .ui.secondary.menu .active.item,
@@ -577,7 +597,7 @@ body {
 }
 
 .ui.menu .ui.dropdown .menu > .item {
-  color: #a5a5a8 !important;
+  color: var(--color-secondary-dark-6) !important;
 }
 
 .ui.menu .ui.dropdown .menu > .item:hover,
@@ -682,7 +702,7 @@ a.ui.basic.green.label:hover {
 }
 
 .issue.list > .item .comment {
-  color: #a5a5a8;
+  color: var(--color-secondary-dark-6);
 }
 
 .ui.basic.red.active.button,
@@ -693,7 +713,7 @@ a.ui.basic.green.label:hover {
 
 .ui.menu .item {
   background: var(--color-secondary);
-  color: #a5a5a8;
+  color: var(--color-secondary-dark-6);
 }
 
 .ui.menu .item.disabled,
@@ -706,7 +726,7 @@ a.ui.basic.green.label:hover {
 
 .ui.disabled.checkbox label,
 .ui.checkbox input[disabled] ~ label {
-  color: #a5a5a8;
+  color: var(--color-secondary-dark-6);
 }
 
 .ui.pagination.menu .active.item {
@@ -720,7 +740,7 @@ a.ui.basic.green.label:hover {
 
 .ui.header,
 .ui.breadcrumb .divider {
-  color: #a5a5a8;
+  color: var(--color-secondary-dark-6);
 }
 
 .ui.divider:not(.vertical):not(.horizontal) {
@@ -746,9 +766,8 @@ a.ui.basic.green.label:hover {
 .ui.form input[type="time"],
 .ui.form input[type="url"],
 .ui.selection.dropdown {
-  color: #a5a5a8;
+  color: var(--color-secondary-dark-6);
   background: #2e323e;
-  border: 1px solid var(--color-secondary);
 }
 
 .ui.form input:not([type]):hover,
@@ -785,7 +804,6 @@ a.ui.basic.green.label:hover {
 .ui.form input[type="url"]:focus,
 .ui.selection.dropdown:focus {
   background: #2e323e;
-  border: 1px solid #6a737d;
   color: #dbdbdb;
 }
 
@@ -862,7 +880,7 @@ a.ui.basic.green.label:hover {
 
 .ui.basic.button,
 .ui.basic.buttons .button {
-  color: #a5a5a8;
+  color: var(--color-secondary-dark-6);
   background: rgba(0, 0, 0, .06);
   box-shadow: none;
 }
@@ -934,7 +952,7 @@ a.ui.basic.green.label:hover {
 }
 
 .ui .text.grey {
-  color: #a5a5a8 !important;
+  color: var(--color-secondary-dark-6) !important;
 }
 
 .ui.attached.table.segment {
@@ -958,7 +976,7 @@ a.ui.basic.green.label:hover {
   }
 
   .item {
-    color: #a5a5a8;
+    color: var(--color-secondary-dark-6);
   }
 
   .item:hover {
@@ -1033,7 +1051,7 @@ a.ui.basic.green.label:hover {
 
 .ui.segment {
   background: #353945;
-  color: #a5a5a8 !important;
+  color: var(--color-secondary-dark-6) !important;
 }
 
 .ui.segment,
@@ -1043,7 +1061,7 @@ a.ui.basic.green.label:hover {
 }
 
 .ui.list > .item > .content {
-  color: #a5a5a8 !important;
+  color: var(--color-secondary-dark-6) !important;
 }
 
 .ui.active.button:active,
@@ -1070,7 +1088,7 @@ a.ui.basic.green.label:hover {
 }
 
 .ui.dropdown .menu > .item {
-  color: #a5a5a8;
+  color: var(--color-secondary-dark-6);
 }
 
 .repository.view.issue .comment-list .event > .svg.issue-symbol {
@@ -1146,7 +1164,7 @@ a.ui.basic.green.label:hover {
 }
 
 .comment-header-right a {
-  color: #a5a5a8;
+  color: var(--color-secondary-dark-6);
 }
 
 .comment-header-right a:hover {
@@ -1269,14 +1287,9 @@ td.blob-hunk {
 }
 
 .ui.selection.active.dropdown,
-.ui.selection.active.dropdown .menu {
-  border-color: #4e5361;
-  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1);
-}
-
 .ui.selection.active.dropdown:hover,
+.ui.selection.active.dropdown .menu,
 .ui.selection.active.dropdown:hover .menu {
-  border-color: #4e5361;
   box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1);
 }
 
@@ -1306,7 +1319,7 @@ td.blob-hunk {
 }
 
 .ui .text.black {
-  color: #a5a5a8;
+  color: var(--color-secondary-dark-6);
 }
 
 .ui .text.black:hover {
@@ -1346,7 +1359,7 @@ td.blob-hunk {
 .ui.checkbox label,
 .ui.checkbox + label,
 .ui.form .field > label {
-  color: #a5a5a8;
+  color: var(--color-secondary-dark-6);
 }
 
 .ui.form .inline.field > label,
@@ -1354,7 +1367,7 @@ td.blob-hunk {
 .ui.form .inline.fields .field > label,
 .ui.form .inline.fields .field > p,
 .ui.form .inline.fields > label {
-  color: #a5a5a8;
+  color: var(--color-secondary-dark-6);
 }
 
 .user.settings .email.list .item:not(:first-child) {
@@ -1525,7 +1538,7 @@ input {
 }
 
 .ui.selection.visible.dropdown > .text:not(.default) {
-  color: #a5a5a8;
+  color: var(--color-secondary-dark-6);
 }
 
 .ui.positive.message {
@@ -1570,7 +1583,7 @@ input {
 
 .ui.list .list > .item .description,
 .ui.list > .item .description {
-  color: #a5a5a8;
+  color: var(--color-secondary-dark-6);
 }
 
 .ui.user.list .item .description a {
@@ -1597,7 +1610,7 @@ input {
 }
 
 .lines-num {
-  color: #a5a5a8 !important;
+  color: var(--color-secondary-dark-6) !important;
   border-color: var(--color-secondary) !important;
 }
 
@@ -1649,12 +1662,12 @@ a.ui.labels .label:hover {
 
 .repository .ui.attached.message.isSigned.isVerified {
   background-color: #394829;
-  color: #a5a5a8;
+  color: var(--color-secondary-dark-6);
 
   &.message {
     color: #87ab63;
     .ui.text {
-      color: #a5a5a8;
+      color: var(--color-secondary-dark-6);
     }
     .pull-right {
       color: #87ab63;
@@ -1664,11 +1677,11 @@ a.ui.labels .label:hover {
 
 .repository .ui.attached.message.isSigned.isVerifiedUntrusted {
   background-color: #4a3903;
-  color: #a5a5a8;
+  color: var(--color-secondary-dark-6);
   &.message {
     color: #c2c193;
     .ui.text {
-      color: #a5a5a8;
+      color: var(--color-secondary-dark-6);
     }
     .pull-right,
     a {
@@ -1679,11 +1692,11 @@ a.ui.labels .label:hover {
 
 .repository .ui.attached.message.isSigned.isVerifiedUnmatched {
   background-color: #4e3321;
-  color: #a5a5a8;
+  color: var(--color-secondary-dark-6);
   &.message {
     color: #c2a893;
     .ui.text {
-      color: #a5a5a8;
+      color: var(--color-secondary-dark-6);
     }
     .pull-right,
     a {
@@ -1700,7 +1713,7 @@ a.ui.labels .label:hover {
       color: #d07d7d;
     }
     .pull-right {
-      color: #a5a5a8;
+      color: var(--color-secondary-dark-6);
     }
   }
 }
@@ -1756,7 +1769,7 @@ a.ui.labels .label:hover {
 
 .repository .labelspage .item a:hover,
 .organization.settings .labelspage .item a:hover {
-  color: #a5a5a8;
+  color: var(--color-secondary-dark-6);
 }
 
 #git-graph-container li a {
@@ -1768,7 +1781,7 @@ a.ui.labels .label:hover {
 }
 
 .ui.header .sub.header {
-  color: #a5a5a8;
+  color: var(--color-secondary-dark-6);
 }
 
 .ui.dividing.header {
@@ -1854,7 +1867,7 @@ a.ui.labels .label:hover {
 }
 
 .file-comment {
-  color: #a5a5a8;
+  color: var(--color-secondary-dark-6);
 }
 
 .ui.comments .comment {
@@ -1867,12 +1880,12 @@ a.ui.labels .label:hover {
   }
 
   .text {
-    color: #a5a5a8;
+    color: var(--color-secondary-dark-6);
   }
 }
 
 .comment-header a {
-  color: #a5a5a8 !important;
+  color: var(--color-secondary-dark-6) !important;
 }
 
 .comment-header .actions a:hover,
@@ -1880,41 +1893,6 @@ a.ui.labels .label:hover {
   color: #dedede !important;
 }
 
-.heatmap(@heat) {
-  @heatmap-cold: #2d303b;
-  @heatmap-hot: #a0cc75;
-  background-color: mix(@heatmap-hot, @heatmap-cold, @heat);
-}
-
-.heatmap-color-0 {
-  .heatmap(0%);
-}
-
-.heatmap-color-1 {
-  .heatmap(20%);
-}
-
-.heatmap-color-2 {
-  .heatmap(40%);
-}
-
-.heatmap-color-3 {
-  .heatmap(60%);
-}
-
-.heatmap-color-4 {
-  .heatmap(80%);
-}
-
-.heatmap-color-5 {
-  .heatmap(100%);
-}
-
-.activity-bar-graph {
-  background-color: #a0cc75;
-  color: #a5a5a8;
-}
-
 /* code mirror dark theme */
 
 .CodeMirror {
@@ -1924,7 +1902,7 @@ a.ui.labels .label:hover {
   border-top: 0;
 
   div.CodeMirror-cursor {
-    border-left: 1px solid #a5a5a8;
+    border-left: 1px solid var(--color-secondary-dark-6);
   }
 
   .CodeMirror-gutters {
@@ -2023,7 +2001,7 @@ a.ui.labels .label:hover {
 
 .ui.popup {
   background-color: #383c4a;
-  color: #a5a5a8;
+  color: var(--color-secondary-dark-6);
   border-color: var(--color-secondary);
 }
 
@@ -2059,7 +2037,7 @@ footer .container .links > * {
 }
 
 .repository.file.list #repo-files-table tbody .svg {
-  color: #a5a5a8;
+  color: var(--color-secondary-dark-6);
 }
 
 .repository.release #release-list > li .detail {