☰

GitLab Tweaks

Improve visual design of GitLab, to reduce visual and cognitive strain, and increase zen mindfulness

  1. // ==UserScript==
  2. // @name         GitLab Tweaks
  3. // @namespace    GLT
  4. // @version      1.0.0
  5. // @description  Improve visual design of GitLab, to reduce visual and cognitive strain, and increase zen mindfulness
  6. // @author       joeytwiddle
  7. // @copyright    2018, Paul "Joey" Clark (http://neuralyte.org/~joey)
  8. // @license      MIT
  9. // @match        https://gitlab.com/*
  10. // @run-at       document-start
  11. // @grant        GM_addStyle
  12. // ==/UserScript==
  13.  
  14. /* eslint-env es6 */
  15.  
  16. (function() {
  17.   'use strict';
  18.  
  19.   const generalFixes = true;
  20.  
  21.   // Other fonts I considered: sans-serif, sans, Arial, "Noto Sans", "Open Sans"
  22.   const customFont = '"Open Sans", Arial, sans-serif';
  23.  
  24.   const customMonospaceFont = '"Lucida Sans Typewriter", "Lucida Console", monospace';
  25.  
  26.   // Some whitespace around the central content, to enhance zen state
  27.   const padTheCentralColumn = true;
  28.  
  29.   const padTheHeader = true;
  30.  
  31.   // Use only one of these, not both.
  32.   // This keeps the grey line separators, but adds some space above and below them (border-bottom)
  33.   const paddingAroundContentBlockSeparators = true;
  34.   // This removes the grey line separators, by turning them into larger transparent separators
  35.   const paddingInsteadOfContentBlockSeparators = false;
  36.  
  37.   // Don't let the textarea grow too tall.  (If it does, it's likely the submit button will be pushed offscreen!)
  38.   const limitHeightOfTextarea = true;
  39.  
  40.   const showScrollbarOnIssueSidebar = true;
  41.  
  42.   const smallScrollbars = true;
  43.  
  44.   const hideSidebarsUntilHovered = true;
  45.  
  46.  
  47.   // Notes:
  48.   // We put `body` at the start of every selector to increase its specificity.
  49.   // That allows our CSS to override the site's CSS, even if we add ours early (which is desirable to avoid relayout).
  50.  
  51.   if (generalFixes) {
  52.     // If the labels are just the right length, some of the "Request to merge ..." text will touch the "Open in Web IDE" button.
  53.     // We force a little gap on the right-hand side.
  54.     GM_addStyle(`
  55.       body .normal {
  56.         padding-right: 8px;
  57.       }
  58.     `);
  59.   }
  60.  
  61.   if (typeof customFont !== 'undefined' && customFont) {
  62.     // The website's recommended fonts were: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
  63.     GM_addStyle(`
  64.       body {
  65.         font-family: ${customFont} !important;
  66.       }
  67.     `);
  68.   }
  69.  
  70.   if (typeof customMonospaceFont !== 'undefined' && customMonospaceFont) {
  71.     // The website's recommended monospace fonts were: "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas", "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace
  72.     GM_addStyle(`
  73.       .monospace, .commit-sha, .gfm-commit, .gfm-commit_range, .ref-name, .git-revision-dropdown .dropdown-content ul li a, .mr-state-widget .label-branch, .git-revision-dropdown-toggle, .commit-sha-group .label-monospace, .file-editor .file-title, .file-editor .editor-file-name, .ci-table .api, .git-clone-holder .form-control, .git-clone-holder .search form, .search .git-clone-holder form,
  74.       pre, tt, code, kbd, samp,
  75.       .md code,
  76.       ul.notes>li .note-body .note-text code {
  77.         font-family: ${customMonospaceFont} !important;
  78.       }
  79.     `);
  80.   }
  81.  
  82.   if (padTheCentralColumn) {
  83.     GM_addStyle(`
  84.       body .content-wrapper .container-fluid {
  85.         padding: 0 30px;
  86.       }
  87.     `);
  88.   }
  89.  
  90.   if (padTheHeader) {
  91.     GM_addStyle(`
  92.       body .alert-wrapper {
  93.         padding-top: 10px;
  94.       }
  95.       body .breadcrumbs-container {
  96.         padding-bottom: 30px;
  97.       }
  98.       body .detail-page-header {
  99.         margin-bottom: 14px;
  100.       }
  101.     `);
  102.   }
  103.  
  104.   if (paddingAroundContentBlockSeparators) {
  105.     GM_addStyle(`
  106.       body .content-block {
  107.         margin-bottom: 25px !important;
  108.         padding-bottom: 25px !important;
  109.       }
  110.     `);
  111.   }
  112.  
  113.   if (paddingInsteadOfContentBlockSeparators) {
  114.     GM_addStyle(`
  115.       body .content-block {
  116.         border-bottom: 20px solid transparent;
  117.       }
  118.     `);
  119.   }
  120.  
  121.   if (limitHeightOfTextarea) {
  122.     GM_addStyle(`
  123.       body textarea.js-gfm-input {
  124.         max-height: 60vh !important;
  125.         max-height: calc(100vh - 400px) !important;
  126.       }
  127.     `);
  128.   }
  129.  
  130.   if (showScrollbarOnIssueSidebar) {
  131.     GM_addStyle(`
  132.       body .right-sidebar .issuable-sidebar {
  133.         width: calc(100% - 2px);
  134.       }
  135.     `);
  136.   }
  137.  
  138.   if (smallScrollbars) {
  139.     // The body here is used to avoid modifying the outermost page scrollbar.
  140.     // Remove 'body *' if you want these to apply to the page scrollbar too.
  141.     GM_addStyle(`
  142.       body *::-webkit-scrollbar {
  143.         width: 8px;
  144.         background: #eee;
  145.       }
  146.  
  147.       body *::-webkit-scrollbar-thumb {
  148.         background: #ccc;
  149.         border-radius: 10px;
  150.       }
  151.  
  152.       /*
  153.       body *::-webkit-scrollbar-track {
  154.         box-shadow: inset 0 0 3px white;
  155.         border-radius: 10px;
  156.       }
  157.       */
  158.     `);
  159.   }
  160.  
  161.   if (hideSidebarsUntilHovered) {
  162.     GM_addStyle(`
  163.       .nav-sidebar > *, .right-sidebar > * {
  164.         opacity: 0;
  165.         transition: opacity 0.2s;
  166.       }
  167.  
  168.       .nav-sidebar:hover > *, .right-sidebar:hover > * {
  169.         opacity: 1;
  170.       }
  171.     `);
  172.   }
  173.  
  174.   /*
  175.   // This is good for increasing specificity, but it gets added too late, causing a relayout.
  176.   document.addEventListener('DOMContentLoaded', () => {
  177.     document.body.classList.add('vistweaks');
  178.   });
  179.   */
  180. })();