☰

Custom Styling for Manning LiveBook

Apply custom CSS to improve readability on Manning LiveBook

当前为 2024-10-09 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         Custom Styling for Manning LiveBook
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.8
  5. // @description  Apply custom CSS to improve readability on Manning LiveBook
  6. // @match        https://livebook.manning.com/*
  7. // @grant        GM_addStyle
  8. // @run-at       document-start
  9. // @license MIT
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.     'use strict';
  14.  
  15.     // Add Google Fonts link
  16.     const linkElement = document.createElement('link');
  17.     linkElement.rel = 'stylesheet';
  18.     linkElement.href = 'https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap';
  19.     document.head.appendChild(linkElement);
  20.  
  21.     GM_addStyle(`
  22.         @import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap');
  23.  
  24.         div.text-marginalia-item {
  25.             font-size: 15px;
  26.             font-family: 'Source Serif 4', serif;
  27.             font-weight: 400;
  28.             font-style: italic;
  29.             line-height: 22px;
  30.             color: #cccccc;
  31.         }
  32.  
  33.         span.highlighted-note-text, span.highlighted-text {
  34.             background-color: hsl(50deg 100% 50% / 15%) !important;
  35.             border-bottom-color: hsl(50deg 100% 50% / 80%) !important;
  36.             background-repeat: no-repeat !important;
  37.             background-size: 100% 90% !important;
  38.             background-position: 0 75% !important;
  39.             color: rgb(255, 255, 255) !important;
  40.         }
  41.  
  42.         #main-page-content {
  43.             background-color: #151c23;
  44.             font-size: 15px;
  45.         }
  46.  
  47.         #book-markup-container {
  48.             max-width: 760px;
  49.             margin-left: auto;
  50.             margin-right: auto;
  51.         }
  52.  
  53.         div div p, li {
  54.               font-family: 'Source Serif 4';
  55.               color: rgb(193, 199, 206);
  56.               line-height: 22px;
  57.               font-weight: 350;
  58.               font-size: 15px;
  59.               font-feature-settings: "kern", "liga", "clig", "calt", "onum";
  60.               font-variation-settings: "opsz" 16;
  61.               font-kerning: auto;
  62.               text-rendering: optimizelegibility;
  63.               font-optical-sizing: auto;
  64.         }
  65.     `);
  66. })();