☰

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.1
  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. // @grant    GM_addStyle
  11. // ==/UserScript==
  12.  
  13. (function() {
  14.  
  15.   GM_addStyle(`
  16. body {
  17.   font-family: 'Consolas', 'Courier New', monospace;
  18.   color: #d4d4d4;
  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: #0e639c !important;
  66.   --tertiary-med-or-tertiary: #0e639c !important;
  67.   --tertiary-low-or-tertiary-high: #0e639c !important;
  68.   --tertiary-low: #0e639c !important;
  69. }
  70.  
  71. html,
  72. body,
  73. * {
  74.   color: #AAA;
  75. }
  76.  
  77. #main-outlet-wrapper {
  78.   font-size: 12px !important;
  79. }
  80.  
  81. #main-outlet {
  82.   --primary-low: #000;
  83. }
  84.  
  85. table.topic-list .topic-excerpt {
  86.   color: #bb7;
  87. }
  88.  
  89. table.topic-list a.title.raw-link.raw-topic-link {
  90.   color: #39f;
  91. }
  92.  
  93. table.topic-list tr.topic-list-item {
  94.   border-bottom: none !important;
  95. }
  96.  
  97. .topic-list td.topic-list-data.posters {
  98.   height: auto;
  99.   padding: 0.33em;
  100.   width: 110px;
  101.   opacity: 0.2;
  102. }
  103.  
  104. .topic-list td.topic-list-data.posters:hover {
  105.   opacity: 1;
  106. }
  107.  
  108. ul>li {
  109.   margin-left: 2em;
  110. }
  111.  
  112. #main-outlet-wrapper {
  113.   max-width: 100% !important;
  114. }
  115.  
  116. body.has-sidebar-page header.d-header>div.wrap {
  117.   max-width: 100% !important;
  118. }
  119.  
  120. .topic-body {
  121.   width: 100% !important;
  122. }
  123.  
  124. :root {
  125.   --d-max-width: 100% !important;
  126. }
  127.  
  128. article .topic-map.--op {
  129.   max-width: 100%;
  130. }
  131.  
  132. @media screen and (min-width: 925px) {
  133.   #main-outlet .container.posts {
  134.     grid-template-columns: auto 120px;
  135.   }
  136. }
  137. `);
  138.  
  139.   var settings = {
  140.     icon_main: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAwIiBoZWlnaHQ9IjgwMCIgdmlld0JveD0iMCAwIDMyIDMyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Im0yOS4wMSA1LjAzLTUuNzY2LTIuNzc2YTEuNzQgMS43NCAwIDAgMC0xLjk4OS4zMzhMMi4zOCAxOS44YTEuMTY2IDEuMTY2IDAgMCAwLS4wOCAxLjY0N3EuMDM3LjA0LjA3Ny4wNzdsMS41NDEgMS40YTEuMTY1IDEuMTY1IDAgMCAwIDEuNDg5LjA2NkwyOC4xNDIgNS43NUExLjE1OCAxLjE1OCAwIDAgMSAzMCA2LjY3MnYtLjA2N2ExLjc1IDEuNzUgMCAwIDAtLjk5LTEuNTc1IiBzdHlsZT0iZmlsbDojMDA2NWE5Ii8+PHBhdGggZD0ibTI5LjAxIDI2Ljk3LTUuNzY2IDIuNzc3YTEuNzQ1IDEuNzQ1IDAgMCAxLTEuOTg5LS4zMzhMMi4zOCAxMi4yYTEuMTY2IDEuMTY2IDAgMCAxLS4wOC0xLjY0N3EuMDM3LS4wNC4wNzctLjA3N2wxLjU0MS0xLjRBMS4xNjUgMS4xNjUgMCAwIDEgNS40MSA5LjAxbDIyLjczMiAxNy4yNEExLjE1OCAxLjE1OCAwIDAgMCAzMCAyNS4zMjh2LjA3MmExLjc1IDEuNzUgMCAwIDEtLjk5IDEuNTciIHN0eWxlPSJmaWxsOiMwMDdhY2MiLz48cGF0aCBkPSJNMjMuMjQ0IDI5Ljc0N2ExLjc0NSAxLjc0NSAwIDAgMS0xLjk4OS0uMzM4QTEuMDI1IDEuMDI1IDAgMCAwIDIzIDI4LjY4NFYzLjMxNmExLjAyNCAxLjAyNCAwIDAgMC0xLjc0OS0uNzI0IDEuNzQgMS43NCAwIDAgMSAxLjk4OS0uMzM5bDUuNzY1IDIuNzcyQTEuNzUgMS43NSAwIDAgMSAzMCA2LjZ2MTguOGExLjc1IDEuNzUgMCAwIDEtLjk5MSAxLjU3NloiIHN0eWxlPSJmaWxsOiMxZjljZjAiLz48L3N2Zz4=',
  141.     icon_wide: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAwIiBoZWlnaHQ9IjEwNiIgdmlld0JveD0iMCAwIDEwMCAzMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48dGV4dCB4PSIzNCIgeT0iMjIiIGZvbnQtc2l6ZT0iMTUiIGZpbGw9IiNBQUEiIGZvbnQtd2VpZ2h0PSI1NTUiPlZTIENvZGU8L3RleHQ+PHBhdGggZD0ibTI5LjAxIDUuMDMtNS43NjYtMi43NzZhMS43NCAxLjc0IDAgMCAwLTEuOTg5LjMzOEwyLjM4IDE5LjhhMS4xNjYgMS4xNjYgMCAwIDAtLjA4IDEuNjQ3cS4wMzcuMDQuMDc3LjA3N2wxLjU0MSAxLjRhMS4xNjUgMS4xNjUgMCAwIDAgMS40ODkuMDY2TDI4LjE0MiA1Ljc1QTEuMTU4IDEuMTU4IDAgMCAxIDMwIDYuNjcydi0uMDY3YTEuNzUgMS43NSAwIDAgMC0uOTktMS41NzUiIHN0eWxlPSJmaWxsOiMwMDY1YTkiLz48cGF0aCBkPSJtMjkuMDEgMjYuOTctNS43NjYgMi43NzdhMS43NDUgMS43NDUgMCAwIDEtMS45ODktLjMzOEwyLjM4IDEyLjJhMS4xNjYgMS4xNjYgMCAwIDEtLjA4LTEuNjQ3cS4wMzctLjA0LjA3Ny0uMDc3bDEuNTQxLTEuNEExLjE2NSAxLjE2NSAwIDAgMSA1LjQxIDkuMDFsMjIuNzMyIDE3LjI0QTEuMTU4IDEuMTU4IDAgMCAwIDMwIDI1LjMyOHYuMDcyYTEuNzUgMS43NSAwIDAgMS0uOTkgMS41NyIgc3R5bGU9ImZpbGw6IzAwN2FjYyIvPjxwYXRoIGQ9Ik0yMy4yNDQgMjkuNzQ3YTEuNzQ1IDEuNzQ1IDAgMCAxLTEuOTg5LS4zMzhBMS4wMjUgMS4wMjUgMCAwIDAgMjMgMjguNjg0VjMuMzE2YTEuMDI0IDEuMDI0IDAgMCAwLTEuNzQ5LS43MjQgMS43NCAxLjc0IDAgMCAxIDEuOTg5LS4zMzlsNS43NjUgMi43NzJBMS43NSAxLjc1IDAgMCAxIDMwIDYuNnYxOC44YTEuNzUgMS43NSAwIDAgMS0uOTkxIDEuNTc2WiIgc3R5bGU9ImZpbGw6IzFmOWNmMCIvPjwvc3ZnPg=='
  142.   };
  143.  
  144.   GM_addStyle(`
  145.   #site-logo {
  146.   object-fit: scale-down;
  147.   object-position: -999vw;
  148.   background-size: cover;
  149.   background-repeat: no-repeat;
  150.   background-image: url('${settings.icon_main}');
  151.   opacity: 1;
  152.   transition: opacity 0.5s ease;
  153.   }
  154.   #site-logo.logo-big {
  155.   background-image: url('${settings.icon_wide}');
  156.   }
  157.   #site-logo.logo-mobile {
  158.   background-image: url('${settings.icon_wide}');
  159.   }
  160.   #site-logo:hover {
  161.   object-position: unset;
  162.   background-image: none;
  163.   }
  164.   `);
  165.  
  166.   function replaceIcon() {
  167.     document.querySelector('link[rel="icon"]').href = settings.icon_main;
  168.     if(!document.title.startsWith("VSCode")){
  169.       document.title = "VSCode | " + document.title;
  170.     }
  171.  
  172.   }
  173.   const observer = new MutationObserver(replaceIcon);
  174.   observer.observe(document.head, { childList: true, subtree: true });
  175.   replaceIcon();
  176.  
  177.   document.title = "VSCode | " + document.title;
  178. })();