LinuxDo VScode style

Make LinuxDo Looklike VScode
当前为 2024-11-26 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name       LinuxDo VScode style
// @namespace  http://tampermonkey.net/
// @version    0.2.1
// @description  Make LinuxDo Looklike VScode
// @author     Yearly
// @match      https://linux.do/*
// @icon   data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMzIgMzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTExLjcgMTguNy02LjkgNS4yLTIuOC0xTDkgMTYgMiA5LjFsMi44LS45IDYuOSA1LjJMMjMuMSAyLjEgMzAgNC45djIyLjJMMjMuMiAzMFptMy42LTIuNyA3LjkgNS45VjEwLjFaIiBzdHlsZT0iZmlsbDojMDA3YWNjIi8+PC9zdmc+
// @license    MIT
// @run-at   document-start
// @grant    GM_addStyle
// @noframes
// ==/UserScript==
 
(function() {
 
// thin header
 GM_addStyle(`
     .d-header  {
         height: 2.5em !important;
     }
     .d-header .extra-info-wrapper .title-wrapper {
         display: flex;
         flex-direction: row;
     }
     .d-header div.title-wrapper > h1.header-title {
         width: auto;
         font-size: large;
     }
     .d-header #site-logo {
          height: 2em !important;
     }
     .d-header .d-header-icons .icon img.avatar {
          height: 2em !important;
     }`);
 
// code font
 
  GM_addStyle(`
body {
  font-family: 'Consolas', 'Courier New', monospace;
}
 
.d-header {
  background-color: #222 !important;
}
 
 
.topic-list .topic-list-item {
  border-bottom: 1px solid #3c3c3c !important;
}
 
.topic-list .topic-list-item:hover {
  background-color: #2a2d2e !important;
}
 
#d-sidebar > div.sidebar-footer-wrapper > div.sidebar-footer-container{
  padding: 0em 0.5em;
  background: #0374c7;
}
 
#d-sidebar > div.sidebar-footer-wrapper > div.sidebar-footer-container button.btn svg{
  --primary: #eee;
  color: #eee;
}
 
#reply-control {
  background-color: #252526 !important;
}
 
.d-editor-textarea-wrapper {
  background-color: #1e1e1e !important;
}
 
.d-editor-preview-wrapper {
  background-color: #252526 !important;
  border-left: 1px solid #3c3c3c !important;
}
 
.sidebar-wrapper > #d-sidebar > div.sidebar-footer-wrapper .sidebar-footer-container:before {
  border-bottom: solid 1px #8888;
  background:none;
}
 
#main-outlet-wrapper > div.sidebar-wrapper > #d-sidebar{
  border-right: 1px solid #8888;
}
`);
 
/*
  GM_addStyle(`
html,
body,
#main,
#ember3,
#main-outlet-wrapper{
  max-height:100%;
  height:100%;
}
#main-outlet{
  height:calc(100% - 2em);
 
     overflow-x: visible;
    overflow-y: auto;
}
`);
*/
 
GM_addStyle(`
html,
body {
  font-family: 'Consolas', 'Courier New', 'Lucida Console', 'Monaco', 'Source Code Pro', 'Fira Code', 'Ubuntu Mono', 'Menlo', 'DejaVu Sans Mono', monospace !important;
  --d-font-family--monospace: 'Consolas', 'Courier New', 'Lucida Console', 'Monaco', 'Source Code Pro', 'Fira Code', 'Ubuntu Mono', 'Menlo', 'DejaVu Sans Mono', monospace !important;
  --heading-font-family: 'Consolas', 'Courier New', 'Lucida Console', 'Monaco', 'Source Code Pro', 'Fira Code', 'Ubuntu Mono', 'Menlo', 'DejaVu Sans Mono', monospace !important;
  --font-family: 'Consolas', 'Courier New', 'Lucida Console', 'Monaco', 'Source Code Pro', 'Fira Code', 'Ubuntu Mono', 'Menlo', 'DejaVu Sans Mono', monospace !important;
}
 
:root {
  --secondary: #000 !important;
  --tertiary: #99d6ff !important;
  --tertiary-med-or-tertiary: #0e639c !important;
  --tertiary-low-or-tertiary-high: #0e639c !important;
  --tertiary-low: #0e639c !important;
  --love: #0e639c !important;
  --success: #0e639c !important;
  --quaternary: #0e639c !important;
  --tertiary-hover: #0e639c !important;
  --primary-low: #333 !important;
  --primary: #eee !important;
  --d-max-width: 100% !important;
}
 
#main-outlet-wrapper {
  font-size: 14px;
}
 
#main-outlet {
  --primary-low: #000;
}
 
table.topic-list .topic-excerpt {
  color: #bb7;
}
 
table.topic-list a.title.raw-link.raw-topic-link {
  color: #39f;
}
 
table.topic-list tr.topic-list-item {
  border-bottom: none !important;
}
 
.topic-list td.topic-list-data.posters {
  height: auto;
  padding: 0.33em;
  width: 110px;
  opacity: 0.2;
}
 
.topic-list td.topic-list-data.posters:hover {
  opacity: 1;
}
 
body > #d-splash > img.preloader-image {
    filter: invert(80%);
}
 
ul>li {
  margin-left: 2em;
}
 
#main-outlet-wrapper {
  max-width: 100% !important;
}
 
body.has-sidebar-page header.d-header>div.wrap {
  max-width: 100% !important;
}
 
.topic-body {
  width: 100% !important;
}
 
article .topic-map.--op {
  max-width: 100%;
}
 
@media screen and (min-width: 925px) {
  #main-outlet .container.posts {
    grid-template-columns: auto 120px;
  }
}
`);
 
  var settings = {
    icon_vscode_main: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAwIiBoZWlnaHQ9IjgwMCIgdmlld0JveD0iMCAwIDMyIDMyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Im0yOS4wMSA1LjAzLTUuNzY2LTIuNzc2YTEuNzQgMS43NCAwIDAgMC0xLjk4OS4zMzhMMi4zOCAxOS44YTEuMTY2IDEuMTY2IDAgMCAwLS4wOCAxLjY0N3EuMDM3LjA0LjA3Ny4wNzdsMS41NDEgMS40YTEuMTY1IDEuMTY1IDAgMCAwIDEuNDg5LjA2NkwyOC4xNDIgNS43NUExLjE1OCAxLjE1OCAwIDAgMSAzMCA2LjY3MnYtLjA2N2ExLjc1IDEuNzUgMCAwIDAtLjk5LTEuNTc1IiBzdHlsZT0iZmlsbDojMDA2NWE5Ii8+PHBhdGggZD0ibTI5LjAxIDI2Ljk3LTUuNzY2IDIuNzc3YTEuNzQ1IDEuNzQ1IDAgMCAxLTEuOTg5LS4zMzhMMi4zOCAxMi4yYTEuMTY2IDEuMTY2IDAgMCAxLS4wOC0xLjY0N3EuMDM3LS4wNC4wNzctLjA3N2wxLjU0MS0xLjRBMS4xNjUgMS4xNjUgMCAwIDEgNS40MSA5LjAxbDIyLjczMiAxNy4yNEExLjE1OCAxLjE1OCAwIDAgMCAzMCAyNS4zMjh2LjA3MmExLjc1IDEuNzUgMCAwIDEtLjk5IDEuNTciIHN0eWxlPSJmaWxsOiMwMDdhY2MiLz48cGF0aCBkPSJNMjMuMjQ0IDI5Ljc0N2ExLjc0NSAxLjc0NSAwIDAgMS0xLjk4OS0uMzM4QTEuMDI1IDEuMDI1IDAgMCAwIDIzIDI4LjY4NFYzLjMxNmExLjAyNCAxLjAyNCAwIDAgMC0xLjc0OS0uNzI0IDEuNzQgMS43NCAwIDAgMSAxLjk4OS0uMzM5bDUuNzY1IDIuNzcyQTEuNzUgMS43NSAwIDAgMSAzMCA2LjZ2MTguOGExLjc1IDEuNzUgMCAwIDEtLjk5MSAxLjU3NloiIHN0eWxlPSJmaWxsOiMxZjljZjAiLz48L3N2Zz4=',
 
    icon_vscode_wide: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMTEiIGhlaWdodD0iMzciIHZpZXdCb3g9IjEgLTEgMTAwIDMyIj48dGV4dCB4PSIzNiIgeT0iMjIuNSIgZm9udC1zaXplPSIxNSIgZmlsbD0iI0FBQSIgZm9udC13ZWlnaHQ9IjU1NSI+VlMgQ29kZTwvdGV4dD48cGF0aCBkPSJtMjkgNS01LjgtMi44YTEuNyAxLjcgMCAwIDAtMiAuM0wyLjQgMTkuOGExLjIgMS4yIDAgMCAwLS4xIDEuNmwuMS4xIDEuNSAxLjRhMS4yIDEuMiAwIDAgMCAxLjUuMUwyOC4xIDUuOGExLjIgMS4yIDAgMCAxIDEuOS45di0uMUExLjggMS44IDAgMCAwIDI5IDUiIHN0eWxlPSJmaWxsOiMwNmEiLz48cGF0aCBkPSJtMjkgMjctNS44IDIuOGExLjcgMS43IDAgMCAxLTItLjNMMi40IDEyLjJhMS4yIDEuMiAwIDAgMS0uMS0xLjZsLjEtLjEgMS41LTEuNEExLjIgMS4yIDAgMCAxIDUuNCA5bDIyLjcgMTcuMmExLjIgMS4yIDAgMCAwIDEuOS0uOXYuMWExLjggMS44IDAgMCAxLTEgMS42IiBzdHlsZT0iZmlsbDojMDdjIi8+PHBhdGggZD0iTTIzLjIgMjkuN2ExLjcgMS43IDAgMCAxLTItLjMgMSAxIDAgMCAwIDEuOC0uN1YzLjNhMSAxIDAgMCAwLTEuNy0uNyAxLjcgMS43IDAgMCAxIDItLjNsNS44IDIuOGExLjggMS44IDAgMCAxIC45IDEuNXYxOC44YTEuOCAxLjggMCAwIDEtMSAxLjZaIiBzdHlsZT0iZmlsbDojMTlmIi8+PC9zdmc+',
 
    icon_excel:' data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMzIgMzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJhIiB4MT0iNC40OTQiIHkxPSItMjA5Mi4wODYiIHgyPSIxMy44MzIiIHkyPSItMjA3NS45MTQiIGdyYWRpZW50VHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAyMTAwKSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPjxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iIzE4NCIvPjxzdG9wIG9mZnNldD0iLjUiIHN0b3AtY29sb3I9IiMxNzQiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiMwNjMiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cGF0aCBkPSJNMTkuNiAxNS4zIDguNSAxMy40djE0LjRBMS4yIDEuMiAwIDAgMCA5LjcgMjloMTkuMWExLjIgMS4yIDAgMCAwIDEuMi0xLjJ2LTUuM1oiIHN0eWxlPSJmaWxsOiMxNTMiLz48cGF0aCBkPSJNMTkuNiAzSDkuN2ExLjIgMS4yIDAgMCAwLTEuMiAxLjJ2NS4zTDE5LjYgMTZsNiAxLjlMMzAgMTZWOS41WiIgc3R5bGU9ImZpbGw6IzJhNiIvPjxwYXRoIGQ9Ik04LjUgOS41aDExVjE2aC0xMVoiIHN0eWxlPSJmaWxsOiMxNzQiLz48cGF0aCBkPSJNMTYuNCA4LjJIOC41djE2LjNoOGExLjIgMS4yIDAgMCAwIDEuMi0xLjJWOS40YTEuMiAxLjIgMCAwIDAtMS4zLTEuMiIgc3R5bGU9Im9wYWNpdHk6LjEwMDAwMDAwMTQ5MDExNjEyO2lzb2xhdGlvbjppc29sYXRlIi8+PHBhdGggZD0iTTE1LjggOC44SDguNXYxNi4zaDcuM2ExLjIgMS4yIDAgMCAwIDEuMi0xLjJWMTBhMS4yIDEuMiAwIDAgMC0xLjItMS4yIiBzdHlsZT0ib3BhY2l0eTouMjAwMDAwMDAyOTgwMjMyMjQ7aXNvbGF0aW9uOmlzb2xhdGUiLz48cGF0aCBkPSJNMTUuOCA4LjhIOC41djE1aDcuM2ExLjIgMS4yIDAgMCAwIDEuMi0xLjJWMTBhMS4yIDEuMiAwIDAgMC0xLjItMS4yIiBzdHlsZT0ib3BhY2l0eTouMjAwMDAwMDAyOTgwMjMyMjQ7aXNvbGF0aW9uOmlzb2xhdGUiLz48cGF0aCBkPSJNMTUgOC44SDguNHYxNUgxNWExLjIgMS4yIDAgMCAwIDEuMi0xLjJWMTBBMS4yIDEuMiAwIDAgMCAxNSA4LjgiIHN0eWxlPSJvcGFjaXR5Oi4yMDAwMDAwMDI5ODAyMzIyNDtpc29sYXRpb246aXNvbGF0ZSIvPjxwYXRoIGQ9Ik0zLjIgOC44aDEyYTEuMiAxLjIgMCAwIDEgMS4yIDEuMnYxMmExLjIgMS4yIDAgMCAxLTEuMiAxLjJoLTEyQTEuMiAxLjIgMCAwIDEgMiAyMlYxMGExLjIgMS4yIDAgMCAxIDEuMi0xLjIiIHN0eWxlPSJmaWxsOnVybCgjYSkiLz48cGF0aCBkPSJNNS43IDE5LjkgOC4yIDE2bC0yLjMtMy45aDEuOEw5IDE0LjZjLjEuMi4yLjQuMi41cS4xLS4zLjMtLjVsMS4zLTIuNGgxLjdMMTAuMSAxNmwyLjQgMy45aC0xLjhsLTEuNC0yLjdhMi40IDIuNCAwIDAgMS0uMS0uNCAxLjcgMS43IDAgMCAxLS4yLjRsLTEuNSAyLjdaIiBzdHlsZT0iZmlsbDojZmZmIi8+PHBhdGggZD0iTTI4LjggM2gtOS4ydjYuNUgzMFY0LjJBMS4yIDEuMiAwIDAgMCAyOC44IDMiIHN0eWxlPSJmaWxsOiMzYzgiLz48cGF0aCBkPSJNMTkuNiAxNkgzMHY2LjVIMTkuNloiIHN0eWxlPSJmaWxsOiMxNzQiLz48L3N2Zz4='
  };
 
  GM_addStyle(`
  #site-logo {
  object-fit: scale-down;
  object-position: -999vw;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url('${settings.icon_vscode_main}');
  opacity: 1;
  transition: opacity 0.5s ease;
  }
  #site-logo.logo-big {
  background-image: url('${settings.icon_vscode_wide}');
  }
  #site-logo.logo-mobile {
  background-image: url('${settings.icon_vscode_wide}');
  }
  #site-logo:hover {
  object-position: unset;
  background-image: none;
  }
  `);
 
  function replaceIcon() {
    document.querySelector('link[rel="icon"]').href = settings.icon_vscode_main;
    if(!document.title.startsWith("VSCode")){
      document.title = "VSCode | " + document.title;
    }
 
  }
  const observer = new MutationObserver(replaceIcon);
  observer.observe(document.head, { childList: true, subtree: true });
  replaceIcon();
 
  document.title = "VSCode | " + document.title;
 
 
  function createFooter() {
    const footer = document.createElement('div');
    footer.style=`
    position: sticky;
    bottom: 0px;
    right: 0px;
    background: #333;
    color: #eee;
    padding: 4px 1.4em 0.5px;
    overflow: hidden;
    font-size: 12.5px;
    z-index: 350;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 1.8em;
    line-height: 1;
    width: 100%;
    max-width: var(--d-max-width);
    border-top: solid 1px #8888;
    border-left: solid 2px #333;
    margin-left: -2.4em;
    margin-right: 0;
    user-select: none;
    `
 
    const leftDiv = document.createElement('div');
    const rightDiv = document.createElement('div');
 
    footer.appendChild(leftDiv);
    footer.appendChild(rightDiv);
 
    rightDiv.style = "text-align: right; color: #ddd; fill: #ddd; display: flex; justify-content: space-around; align-items: center; flex-direction: row; flex-wrap: nowrap; gap:1em;";
 
    const windowWidth = window.innerWidth;
    const windowHeight = window.innerHeight;
    const encoding = document.characterSet;
    const lines = document.body.textContent.split('\n').length;
 
    rightDiv.innerHTML = `
<span>Lines: ${lines}</span>
<span>${windowWidth} x ${windowHeight}</span>
<span>${encoding}</span>
<span>CRLF</span>
<span>HTML</span>
<style>
a.btn-with-svg[href] {
    color: #ddd;
    fill: #ddd;
    display: flex;
    justify-content: center;
    align-items: center;
    gap:0.3em;
}
a.btn-with-svg[href]:hover {
   background: #111;
   box-shadow: 0 0 0 3px #111;
   border-radius: 4px;
}
</style>
<a class="btn-with-svg" href="/chat">
<svg width="1.2em" height="1.2em" fill='#ddd' viewBox="0 0 24 24"  xmlns="http://www.w3.org/2000/svg"><path d="M10 3.2a2 2 0 0 1 3.7 0A7 7 0 0 1 19 10v4.7l1.8 2.7A1 1 0 0 1 20 19h-4.5a3.5 3.5 0 0 1-7 0H4a1 1 0 0 1-.8-1.6L5 14.7V10c0-3.2 2.2-6 5-6.8m.6 15.8a1.5 1.5 0 0 0 2.8 0zM12 5a5 5 0 0 0-5 5v5a1 1 0 0 1-.2.6L6 17h12.1l-1-1.4a1 1 0 0 1-.1-.6v-5a5 5 0 0 0-5-5"/></svg>
</a>
`;
 
    leftDiv.style = "color: #ddd; fill: #ddd; display: flex; justify-content: space-around; align-items: center; flex-direction: row; flex-wrap: nowrap; gap:0.3em; ";
 
    leftDiv.innerHTML = `
<span></span><span></span>
<a class="btn-with-svg" href="/">
<svg width="1.2em" height="1.2em" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg"><circle cx="188" cy="67.998" r="28" opacity=".2"/><path d="M224 67.998a36 36 0 1 0-44 35.092v.908a16.02 16.02 0 0 1-15.999 16L92 120a31.8 31.8 0 0 0-16 4.294V103.09a36 36 0 1 0-16 0v49.817a36 36 0 1 0 16 0V152a16.02 16.02 0 0 1 16-16l72.001-.002a32.036 32.036 0 0 0 31.999-32v-.908a36.055 36.055 0 0 0 28-35.092m-176 0a20 20 0 1 1 20 20 20.023 20.023 0 0 1-20-20M88 188a20 20 0 1 1-20-20 20.023 20.023 0 0 1 20 20M188 87.998a20 20 0 1 1 20-20 20.023 20.023 0 0 1-20 20"/></svg>
<span>main</span>
</a>
<a class="btn-with-svg" href="" onclick="location.reload();">
<svg width="1.2em" height="1.2em" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.006 8.267.78 9.5 0 8.73l2.09-2.07.76.01 2.09 2.12-.76.76-1.167-1.18a5 5 0 0 0 9.4 1.983l.813.597a6 6 0 0 1-11.22-2.683m10.99-.466L11.76 6.55l-.76.76 2.09 2.11.76.01 2.09-2.07-.75-.76-1.194 1.18a6 6 0 0 0-11.11-2.92l.81.594a5 5 0 0 1 9.3 2.346z"/></svg>
</a>
<span></span><span></span>
<svg width="1.2em" height="1.2em" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.6 1c1.6.1 3.1.9 4.2 2 1.3 1.4 2 3.1 2 5.1 0 1.6-.6 3.1-1.6 4.4-1 1.2-2.4 2.1-4 2.4s-3.2.1-4.6-.7-2.5-2-3.1-3.5S.8 7.5 1.3 6c.5-1.6 1.4-2.9 2.8-3.8C5.4 1.3 7 .9 8.6 1m.5 12.9c1.3-.3 2.5-1 3.4-2.1.8-1.1 1.3-2.4 1.2-3.8 0-1.6-.6-3.2-1.7-4.3-1-1-2.2-1.6-3.6-1.7-1.3-.1-2.7.2-3.8 1S2.7 4.9 2.3 6.3c-.4 1.3-.4 2.7.2 4q.9 1.95 2.7 3c1.2.7 2.6.9 3.9.6M7.9 7.5 10.3 5l.7.7-2.4 2.5 2.4 2.5-.7.7-2.4-2.5-2.4 2.5-.7-.7 2.4-2.5-2.4-2.5.7-.7z"/></svg>
<span>0</span>
<span></span><span></span>
<svg width="1.2em" height="1.2em" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M7.56 1h.88l6.54 12.26-.44.74H1.44L1 13.26zM8 2.28 2.28 13H13.7zM8.625 12v-1h-1.25v1zm-1.25-2V6h1.25v4z"/></svg>
<span>0</span>
<span></span><span></span>
`;
 
    return footer;
  }
 
  function updateFooter() {
    if(!document.querySelector("#main-outlet")) {
      setTimeout(updateFooter, 1000);
      return;
    }
 
    const footer = createFooter();
 
    const windowWidth = window.innerWidth;
    const windowHeight = window.innerHeight;
    const encoding = document.characterSet;
 
    const lines = document.body.textContent.split('\n').length;
 
    document.querySelector("#main-outlet").appendChild(footer);
 
    document.querySelector("#main-outlet-wrapper > div.sidebar-wrapper").style.zIndex=366;
 
    document.querySelector("#main-outlet-wrapper").style.overflowX = 'clip';
 
  }
  updateFooter();
 
 
})();