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