☰

LinuxDo VScode style

Make LinuxDo Looklike VScode

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

  1. // ==UserScript==
  2. // @name     LinuxDo VScode style
  3. // @namespace  http://tampermonkey.net/
  4. // @version    0.1.2
  5. // @description  Make LinuxDo Looklike VScode
  6. // @author     Yearly
  7. // @match    https://linux.do/*
  8. // @icon   data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMzIgMzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTExLjcgMTguNy02LjkgNS4yLTIuOC0xTDkgMTYgMiA5LjFsMi44LS45IDYuOSA1LjJMMjMuMSAyLjEgMzAgNC45djIyLjJMMjMuMiAzMFptMy42LTIuNyA3LjkgNS45VjEwLjFaIiBzdHlsZT0iZmlsbDojMDA3YWNjIi8+PC9zdmc+
  9. // @license    MIT
  10. // @run-at   document-start
  11. // @grant    GM_addStyle
  12. // ==/UserScript==
  13.  
  14. (function() {
  15.  
  16.   GM_addStyle(`
  17. body {
  18.   font-family: 'Consolas', 'Courier New', monospace;
  19. }
  20.  
  21. .d-header {
  22.   background-color: #3c3c3c !important;
  23. }
  24.  
  25. .topic-list {
  26.   background-color: #252526 !important;
  27. }
  28.  
  29. .topic-list .topic-list-item {
  30.   border-bottom: 1px solid #3c3c3c !important;
  31. }
  32.  
  33. .topic-list .topic-list-item:hover {
  34.   background-color: #2a2d2e !important;
  35. }
  36.  
  37. #reply-control {
  38.   background-color: #252526 !important;
  39. }
  40.  
  41. .d-editor-textarea-wrapper {
  42.   background-color: #1e1e1e !important;
  43. }
  44.  
  45. .d-editor-preview-wrapper {
  46.   background-color: #252526 !important;
  47.   border-left: 1px solid #3c3c3c !important;
  48. }
  49.  
  50. .sidebar-wrapper > #d-sidebar > div.sidebar-footer-wrapper .sidebar-footer-container:before {
  51.   border-bottom: solid 1px #8888;
  52.   background:none;
  53. }
  54.  
  55. html,
  56. body {
  57.   font-family: 'Consolas', 'Courier New', 'Lucida Console', 'Monaco', 'Source Code Pro', 'Fira Code', 'Ubuntu Mono', 'Menlo', 'DejaVu Sans Mono', monospace !important;
  58.   --d-font-family--monospace: 'Consolas', 'Courier New', 'Lucida Console', 'Monaco', 'Source Code Pro', 'Fira Code', 'Ubuntu Mono', 'Menlo', 'DejaVu Sans Mono', monospace !important;
  59.   --heading-font-family: 'Consolas', 'Courier New', 'Lucida Console', 'Monaco', 'Source Code Pro', 'Fira Code', 'Ubuntu Mono', 'Menlo', 'DejaVu Sans Mono', monospace !important;
  60.   --font-family: 'Consolas', 'Courier New', 'Lucida Console', 'Monaco', 'Source Code Pro', 'Fira Code', 'Ubuntu Mono', 'Menlo', 'DejaVu Sans Mono', monospace !important;
  61. }
  62.  
  63. :root {
  64.   --secondary: #000 !important;
  65.   --tertiary: #99d6ff !important;
  66.   --tertiary-med-or-tertiary: #0e639c !important;
  67.   --tertiary-low-or-tertiary-high: #0e639c !important;
  68.   --tertiary-low: #0e639c !important;
  69.   --love: #0e639c !important;
  70.   --success: #0e639c !important;
  71.   --quaternary: #0e639c !important;
  72.   --tertiary-hover: #0e639c !important;
  73.   --primary-low: #111 !important;
  74.   --primary: #eee !important;
  75. }
  76.  
  77.  
  78. #main-outlet-wrapper {
  79.   font-size: 14px;
  80. }
  81.  
  82. #main-outlet {
  83.   --primary-low: #000;
  84. }
  85.  
  86. table.topic-list .topic-excerpt {
  87.   color: #bb7;
  88. }
  89.  
  90. table.topic-list a.title.raw-link.raw-topic-link {
  91.   color: #39f;
  92. }
  93.  
  94. table.topic-list tr.topic-list-item {
  95.   border-bottom: none !important;
  96. }
  97.  
  98. .topic-list td.topic-list-data.posters {
  99.   height: auto;
  100.   padding: 0.33em;
  101.   width: 110px;
  102.   opacity: 0.2;
  103. }
  104.  
  105. .topic-list td.topic-list-data.posters:hover {
  106.   opacity: 1;
  107. }
  108.  
  109. ul>li {
  110.   margin-left: 2em;
  111. }
  112.  
  113. #main-outlet-wrapper {
  114.   max-width: 100% !important;
  115. }
  116.  
  117. body.has-sidebar-page header.d-header>div.wrap {
  118.   max-width: 100% !important;
  119. }
  120.  
  121. .topic-body {
  122.   width: 100% !important;
  123. }
  124.  
  125. :root {
  126.   --d-max-width: 100% !important;
  127. }
  128.  
  129. article .topic-map.--op {
  130.   max-width: 100%;
  131. }
  132.  
  133. @media screen and (min-width: 925px) {
  134.   #main-outlet .container.posts {
  135.     grid-template-columns: auto 120px;
  136.   }
  137. }
  138. `);
  139.  
  140.   var settings = {
  141.     icon_main: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAwIiBoZWlnaHQ9IjgwMCIgdmlld0JveD0iMCAwIDMyIDMyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Im0yOS4wMSA1LjAzLTUuNzY2LTIuNzc2YTEuNzQgMS43NCAwIDAgMC0xLjk4OS4zMzhMMi4zOCAxOS44YTEuMTY2IDEuMTY2IDAgMCAwLS4wOCAxLjY0N3EuMDM3LjA0LjA3Ny4wNzdsMS41NDEgMS40YTEuMTY1IDEuMTY1IDAgMCAwIDEuNDg5LjA2NkwyOC4xNDIgNS43NUExLjE1OCAxLjE1OCAwIDAgMSAzMCA2LjY3MnYtLjA2N2ExLjc1IDEuNzUgMCAwIDAtLjk5LTEuNTc1IiBzdHlsZT0iZmlsbDojMDA2NWE5Ii8+PHBhdGggZD0ibTI5LjAxIDI2Ljk3LTUuNzY2IDIuNzc3YTEuNzQ1IDEuNzQ1IDAgMCAxLTEuOTg5LS4zMzhMMi4zOCAxMi4yYTEuMTY2IDEuMTY2IDAgMCAxLS4wOC0xLjY0N3EuMDM3LS4wNC4wNzctLjA3N2wxLjU0MS0xLjRBMS4xNjUgMS4xNjUgMCAwIDEgNS40MSA5LjAxbDIyLjczMiAxNy4yNEExLjE1OCAxLjE1OCAwIDAgMCAzMCAyNS4zMjh2LjA3MmExLjc1IDEuNzUgMCAwIDEtLjk5IDEuNTciIHN0eWxlPSJmaWxsOiMwMDdhY2MiLz48cGF0aCBkPSJNMjMuMjQ0IDI5Ljc0N2ExLjc0NSAxLjc0NSAwIDAgMS0xLjk4OS0uMzM4QTEuMDI1IDEuMDI1IDAgMCAwIDIzIDI4LjY4NFYzLjMxNmExLjAyNCAxLjAyNCAwIDAgMC0xLjc0OS0uNzI0IDEuNzQgMS43NCAwIDAgMSAxLjk4OS0uMzM5bDUuNzY1IDIuNzcyQTEuNzUgMS43NSAwIDAgMSAzMCA2LjZ2MTguOGExLjc1IDEuNzUgMCAwIDEtLjk5MSAxLjU3NloiIHN0eWxlPSJmaWxsOiMxZjljZjAiLz48L3N2Zz4=',
  142.     icon_wide: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAwIiBoZWlnaHQ9IjEwNiIgdmlld0JveD0iMCAwIDEwMCAzMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48dGV4dCB4PSIzNCIgeT0iMjIiIGZvbnQtc2l6ZT0iMTUiIGZpbGw9IiNBQUEiIGZvbnQtd2VpZ2h0PSI1NTUiPlZTIENvZGU8L3RleHQ+PHBhdGggZD0ibTI5LjAxIDUuMDMtNS43NjYtMi43NzZhMS43NCAxLjc0IDAgMCAwLTEuOTg5LjMzOEwyLjM4IDE5LjhhMS4xNjYgMS4xNjYgMCAwIDAtLjA4IDEuNjQ3cS4wMzcuMDQuMDc3LjA3N2wxLjU0MSAxLjRhMS4xNjUgMS4xNjUgMCAwIDAgMS40ODkuMDY2TDI4LjE0MiA1Ljc1QTEuMTU4IDEuMTU4IDAgMCAxIDMwIDYuNjcydi0uMDY3YTEuNzUgMS43NSAwIDAgMC0uOTktMS41NzUiIHN0eWxlPSJmaWxsOiMwMDY1YTkiLz48cGF0aCBkPSJtMjkuMDEgMjYuOTctNS43NjYgMi43NzdhMS43NDUgMS43NDUgMCAwIDEtMS45ODktLjMzOEwyLjM4IDEyLjJhMS4xNjYgMS4xNjYgMCAwIDEtLjA4LTEuNjQ3cS4wMzctLjA0LjA3Ny0uMDc3bDEuNTQxLTEuNEExLjE2NSAxLjE2NSAwIDAgMSA1LjQxIDkuMDFsMjIuNzMyIDE3LjI0QTEuMTU4IDEuMTU4IDAgMCAwIDMwIDI1LjMyOHYuMDcyYTEuNzUgMS43NSAwIDAgMS0uOTkgMS41NyIgc3R5bGU9ImZpbGw6IzAwN2FjYyIvPjxwYXRoIGQ9Ik0yMy4yNDQgMjkuNzQ3YTEuNzQ1IDEuNzQ1IDAgMCAxLTEuOTg5LS4zMzhBMS4wMjUgMS4wMjUgMCAwIDAgMjMgMjguNjg0VjMuMzE2YTEuMDI0IDEuMDI0IDAgMCAwLTEuNzQ5LS43MjQgMS43NCAxLjc0IDAgMCAxIDEuOTg5LS4zMzlsNS43NjUgMi43NzJBMS43NSAxLjc1IDAgMCAxIDMwIDYuNnYxOC44YTEuNzUgMS43NSAwIDAgMS0uOTkxIDEuNTc2WiIgc3R5bGU9ImZpbGw6IzFmOWNmMCIvPjwvc3ZnPg=='
  143.   };
  144.  
  145.   GM_addStyle(`
  146.   #site-logo {
  147.   object-fit: scale-down;
  148.   object-position: -999vw;
  149.   background-size: cover;
  150.   background-repeat: no-repeat;
  151.   background-image: url('${settings.icon_main}');
  152.   opacity: 1;
  153.   transition: opacity 0.5s ease;
  154.   }
  155.   #site-logo.logo-big {
  156.   background-image: url('${settings.icon_wide}');
  157.   }
  158.   #site-logo.logo-mobile {
  159.   background-image: url('${settings.icon_wide}');
  160.   }
  161.   #site-logo:hover {
  162.   object-position: unset;
  163.   background-image: none;
  164.   }
  165.   `);
  166.  
  167.   function replaceIcon() {
  168.     document.querySelector('link[rel="icon"]').href = settings.icon_main;
  169.     if(!document.title.startsWith("VSCode")){
  170.       document.title = "VSCode | " + document.title;
  171.     }
  172.  
  173.   }
  174.   const observer = new MutationObserver(replaceIcon);
  175.   observer.observe(document.head, { childList: true, subtree: true });
  176.   replaceIcon();
  177.  
  178.   document.title = "VSCode | " + document.title;
  179. })();