☰

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.13
  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: 350;
  28.             line-height: 22px;
  29.             color: #cccccc;
  30.         }
  31.  
  32.         span.highlighted-note-text, span.highlighted-text {
  33.             background-color: hsl(50deg 100% 50% / 15%) !important;
  34.             border-bottom-color: hsl(50deg 100% 50% / 80%) !important;
  35.             background-repeat: no-repeat !important;
  36.             background-size: 100% 90% !important;
  37.             background-position: 0 75% !important;
  38.             color: rgb(255, 255, 255) !important;
  39.         }
  40.  
  41.         #main-page-content {
  42.             background-color: #151c23;
  43.             font-size: 15px;
  44.         }
  45.  
  46.         #book-markup-container {
  47.             max-width: 760px;
  48.             margin-left: auto;
  49.             margin-right: auto;
  50.         }
  51.  
  52.         div div p, li {
  53.               font-family: 'Source Serif 4';
  54.               color: rgb(193, 199, 206);
  55.               line-height: 22px;
  56.               font-weight: 350;
  57.               font-size: 15px;
  58.               font-feature-settings: "kern", "liga", "clig", "calt", "onum";
  59.               font-variation-settings: "opsz" 16;
  60.               font-kerning: auto;
  61.               text-rendering: optimizelegibility;
  62.               font-optical-sizing: auto;
  63.         }
  64.         
  65.         li {
  66.             line-height: 28px;
  67.         }
  68.  
  69.         div p i {
  70.           font-family: 'Source Serif 4' !important;
  71.           font-weight: 550 !important;
  72.           font-style: italic !important;
  73.         }
  74.     `);
  75. })();