readable_quip.user.js

// ==UserScript==
// @name        Readable documents
// @namespace   example
// @include     https://airbnb.quip.com/*
// @version     1.0
// @grant       GM_addStyle
// ==/UserScript==

function transformation(match, p1) {
    return `calc(1.33333333333 * ${p1})`;
}

GM_addStyle(`
  * {
    transition: none !important;
    text-shadow: none !important;
  }

  .article {
    font-size: zoom(100%);
  }
  .article .section {
    margin-top: zoom(20px);
    margin-bottom: zoom(20px);
  }
  .thread-document > .document > article {
    padding-bottom: 210px;
  }

  .document-thread .editor {
    left: 320px;
  }
  .document-thread .document-thread-body, .document-thread > .nav-bar {
    width: 320px;
  }
  .content.mention > span.icon-font {
    display: none;
  }
  .selection-inspector.bubble {
    visibility: hidden;
  }

  .article .section[data-section-style="0"] > .content {
    line-height: zoom(20px);
  }
  .article .section[data-section-style="1"]:first-of-type {
    margin-bottom: zoom(40px);
  }
  .article .section[data-section-style="1"]:first-of-type > .content {
    font-size: zoom(35px);
    line-height: zoom(42px);
  }
  .article .section[data-section-style="2"] > .content {
    font-size: zoom(18px);
    line-height: zoom(22px);
  }
  .article .section[data-section-style="3"]>.content {
    font-size: zoom(13px);
    line-height: zoom(16px);
    text-transform: none;
  }
  .article .section[data-section-style="1"], .article .section[data-section-style="2"], .article .section[data-section-style="3"] {
    margin-top: zoom(25px);
    margin-bottom: zoom(15px);
  }
  .article .section[data-section-style="7"] ul li.checked .content {
    text-decoration: none;
  }
  .article .section[data-section-style="7"] ul li.parent {
    font-weight: normal;
  }
  body:not(.mobile) .article .section[data-section-type="1"] ul > li:not(.contains-code-section) > .section {
    padding-bottom: zoom(6px);
  }
  .article .section[data-section-type="1"] ul li {
    line-height: zoom(20px);
  }
  .article .section[data-section-style="5"] ul li:before {
    left: zoom(-18px);
    font-size: zoom(14px);
    line-height: zoom(19px);
  }
  .article .section[data-section-style="7"] ul .checkbox {
    margin-top: zoom(3px);
    margin-left: zoom(-19px);
    -webkit-appearance: none;
    border: 1px solid #444;
    border-radius: zoom(2px);
    height: zoom(12px);
    width: zoom(12px);
  }
  .article .section[data-section-style="7"] ul .checkbox:checked {
    border-width: 0;
    background-color: #1ba2e3;
  }
  .article .section[data-section-style="7"] ul .checkbox:checked:before {
    content: '✓';
    color: white;
    padding-left: zoom(2.5px);
    line-height: zoom(12px);
  }
  .article .section[data-section-style="16"]>.content {
    line-height: zoom(20px);
    color: #333;
    padding: zoom(3px) 0 zoom(3px) zoom(18px);
  }
  .article .section[data-section-style="4"]>.content {
    line-height: 20px;
    font-size: 15px;
  }

  li[data-indent="0"] {
    margin-left: zoom(1 * 23px) !important;
  }
  li[data-indent="1"] {
    margin-left: zoom(2 * 23px) !important;
  }
  li[data-indent="2"] {
    margin-left: zoom(3 * 23px) !important;
  }
  li[data-indent="3"] {
    margin-left: zoom(4 * 23px) !important;
  }
  li[data-indent="4"] {
    margin-left: zoom(5 * 23px) !important;
  }
  li[data-indent="5"] {
    margin-left: zoom(6 * 23px) !important;
  }
`.replace(/zoom\((.*?)\)/g, transformation));