Make LinuxDo Looklike VScode
// ==UserScript==
// @name LinuxDo VScode style
// @namespace http://tampermonkey.net/
// @version 0.1
// @description Make LinuxDo Looklike VScode
// @author Yearly
// @match https://linux.do/*
// @icon data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMzIgMzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTExLjcgMTguNy02LjkgNS4yLTIuOC0xTDkgMTYgMiA5LjFsMi44LS45IDYuOSA1LjJMMjMuMSAyLjEgMzAgNC45djIyLjJMMjMuMiAzMFptMy42LTIuNyA3LjkgNS45VjEwLjFaIiBzdHlsZT0iZmlsbDojMDA3YWNjIi8+PC9zdmc+
// @license MIT
// @grant GM_addStyle
// ==/UserScript==
(function() {
GM_addStyle(`
body {
font-family: 'Consolas', 'Courier New', monospace;
color: #d4d4d4;
}
.d-header {
background-color: #3c3c3c !important;
}
.topic-list {
background-color: #252526 !important;
}
.topic-list .topic-list-item {
border-bottom: 1px solid #3c3c3c !important;
}
.topic-list .topic-list-item:hover {
background-color: #2a2d2e !important;
}
#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;
}
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: #0e639c !important;
--tertiary-med-or-tertiary: #0e639c !important;
--tertiary-low-or-tertiary-high: #0e639c !important;
}
html,
body,
* {
color: #AAA;
}
#main-outlet-wrapper {
font-size: 12px !important;
}
#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;
}
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;
}
:root {
--d-max-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_main: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAwIiBoZWlnaHQ9IjgwMCIgdmlld0JveD0iMCAwIDMyIDMyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Im0yOS4wMSA1LjAzLTUuNzY2LTIuNzc2YTEuNzQgMS43NCAwIDAgMC0xLjk4OS4zMzhMMi4zOCAxOS44YTEuMTY2IDEuMTY2IDAgMCAwLS4wOCAxLjY0N3EuMDM3LjA0LjA3Ny4wNzdsMS41NDEgMS40YTEuMTY1IDEuMTY1IDAgMCAwIDEuNDg5LjA2NkwyOC4xNDIgNS43NUExLjE1OCAxLjE1OCAwIDAgMSAzMCA2LjY3MnYtLjA2N2ExLjc1IDEuNzUgMCAwIDAtLjk5LTEuNTc1IiBzdHlsZT0iZmlsbDojMDA2NWE5Ii8+PHBhdGggZD0ibTI5LjAxIDI2Ljk3LTUuNzY2IDIuNzc3YTEuNzQ1IDEuNzQ1IDAgMCAxLTEuOTg5LS4zMzhMMi4zOCAxMi4yYTEuMTY2IDEuMTY2IDAgMCAxLS4wOC0xLjY0N3EuMDM3LS4wNC4wNzctLjA3N2wxLjU0MS0xLjRBMS4xNjUgMS4xNjUgMCAwIDEgNS40MSA5LjAxbDIyLjczMiAxNy4yNEExLjE1OCAxLjE1OCAwIDAgMCAzMCAyNS4zMjh2LjA3MmExLjc1IDEuNzUgMCAwIDEtLjk5IDEuNTciIHN0eWxlPSJmaWxsOiMwMDdhY2MiLz48cGF0aCBkPSJNMjMuMjQ0IDI5Ljc0N2ExLjc0NSAxLjc0NSAwIDAgMS0xLjk4OS0uMzM4QTEuMDI1IDEuMDI1IDAgMCAwIDIzIDI4LjY4NFYzLjMxNmExLjAyNCAxLjAyNCAwIDAgMC0xLjc0OS0uNzI0IDEuNzQgMS43NCAwIDAgMSAxLjk4OS0uMzM5bDUuNzY1IDIuNzcyQTEuNzUgMS43NSAwIDAgMSAzMCA2LjZ2MTguOGExLjc1IDEuNzUgMCAwIDEtLjk5MSAxLjU3NloiIHN0eWxlPSJmaWxsOiMxZjljZjAiLz48L3N2Zz4=',
icon_wide: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAwIiBoZWlnaHQ9IjEwNiIgdmlld0JveD0iMCAwIDEwMCAzMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48dGV4dCB4PSIzNCIgeT0iMjIiIGZvbnQtc2l6ZT0iMTUiIGZpbGw9IiNBQUEiIGZvbnQtd2VpZ2h0PSI1NTUiPlZTIENvZGU8L3RleHQ+PHBhdGggZD0ibTI5LjAxIDUuMDMtNS43NjYtMi43NzZhMS43NCAxLjc0IDAgMCAwLTEuOTg5LjMzOEwyLjM4IDE5LjhhMS4xNjYgMS4xNjYgMCAwIDAtLjA4IDEuNjQ3cS4wMzcuMDQuMDc3LjA3N2wxLjU0MSAxLjRhMS4xNjUgMS4xNjUgMCAwIDAgMS40ODkuMDY2TDI4LjE0MiA1Ljc1QTEuMTU4IDEuMTU4IDAgMCAxIDMwIDYuNjcydi0uMDY3YTEuNzUgMS43NSAwIDAgMC0uOTktMS41NzUiIHN0eWxlPSJmaWxsOiMwMDY1YTkiLz48cGF0aCBkPSJtMjkuMDEgMjYuOTctNS43NjYgMi43NzdhMS43NDUgMS43NDUgMCAwIDEtMS45ODktLjMzOEwyLjM4IDEyLjJhMS4xNjYgMS4xNjYgMCAwIDEtLjA4LTEuNjQ3cS4wMzctLjA0LjA3Ny0uMDc3bDEuNTQxLTEuNEExLjE2NSAxLjE2NSAwIDAgMSA1LjQxIDkuMDFsMjIuNzMyIDE3LjI0QTEuMTU4IDEuMTU4IDAgMCAwIDMwIDI1LjMyOHYuMDcyYTEuNzUgMS43NSAwIDAgMS0uOTkgMS41NyIgc3R5bGU9ImZpbGw6IzAwN2FjYyIvPjxwYXRoIGQ9Ik0yMy4yNDQgMjkuNzQ3YTEuNzQ1IDEuNzQ1IDAgMCAxLTEuOTg5LS4zMzhBMS4wMjUgMS4wMjUgMCAwIDAgMjMgMjguNjg0VjMuMzE2YTEuMDI0IDEuMDI0IDAgMCAwLTEuNzQ5LS43MjQgMS43NCAxLjc0IDAgMCAxIDEuOTg5LS4zMzlsNS43NjUgMi43NzJBMS43NSAxLjc1IDAgMCAxIDMwIDYuNnYxOC44YTEuNzUgMS43NSAwIDAgMS0uOTkxIDEuNTc2WiIgc3R5bGU9ImZpbGw6IzFmOWNmMCIvPjwvc3ZnPg=='
};
GM_addStyle(`
#site-logo {
object-fit: scale-down;
object-position: -999vw;
background-size: cover;
background-repeat: no-repeat;
background-image: url('${settings.icon_main}');
opacity: 1;
transition: opacity 0.5s ease;
}
#site-logo.logo-big {
background-image: url('${settings.icon_wide}');
}
#site-logo.logo-mobile {
background-image: url('${settings.icon_wide}');
}
#site-logo:hover {
object-position: unset;
background-image: none;
}
`);
function replaceIcon() {
document.querySelector('link[rel="icon"]').href = settings.icon_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;
})();