☰

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