☰

Make Notion Full-width

5/23/2020, 3:28:45 PM

目前為 2020-06-05 提交的版本，檢視 最新版本。

  1. // ==UserScript==
  2. // @name        Make Notion Full-width
  3. // @namespace   Notion Custom Scripts
  4. // @match       *://www.notion.so/*
  5. // @grant       none
  6. // @version     1.0
  7. // @author      Jacob Zimmerman (jczimm) <jczimm@jczimm.com>
  8. // @description 5/23/2020, 3:28:45 PM
  9. // ==/UserScript==
  10.  
  11. // adapted from http://greasemonkey.win-start.de/patterns/add-css.html
  12. function addGlobalStyle(css) {
  13.     const head = document.querySelector('head')
  14.     if (head) {
  15.       const style = document.createElement('style')
  16.       style.type = 'text/css'
  17.       style.innerHTML = css
  18.       head.appendChild(style)
  19.     }
  20. }
  21.  
  22. addGlobalStyle(`
  23. @media (max-width: 850px) {
  24.   .notion-overlay-container > div > div > div[style*="relative"] { /* don't select the gray background overlay, which has position: absolute */
  25.       max-height: unset !important;
  26.       max-width: unset !important;
  27.       width: 100% !important;
  28.       height: 100% !important;
  29.       top: 0 !important;
  30.   }
  31.   .notion-overlay-container .notion-quick-find-menu,
  32.   .notion-overlay-container .notion-quick-find-menu > div {
  33.       max-height: unset !important;
  34.       max-width: unset !important;
  35.   }
  36.  
  37.   .notion-frame > .notion-scroller > div:not(.notion-page-content) > div,
  38.   .notion-page-content {
  39.       padding-left: 1em !important;
  40.       padding-right: 1em !important;
  41.   }
  42.  
  43.   .notion-frame > .notion-scroller > div:not(.notion-page-content)[style*="padding"] {
  44.       padding-left: 0 !important;
  45.       padding-right: 0 !important;
  46.   }
  47.  
  48.   div[data-block-id] {
  49.       max-width: unset !important;
  50.   }
  51. }
  52. `)