Skip to content

Instantly share code, notes, and snippets.

@LouisGameDev

LouisGameDev/osrs_themed_youtube_stylesheet.user.js

Last active January 27, 2025 09:28
Show Gist options
  • Save LouisGameDev/635ef36978d6468b5f8724fa7f56c6fb to your computer and use it in GitHub Desktop.
Save LouisGameDev/635ef36978d6468b5f8724fa7f56c6fb to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. LouisGameDev revised this gist Jan 27, 2025. No changes.
  2. LouisGameDev revised this gist Jan 27, 2025. No changes.
  3. LouisGameDev revised this gist Jan 27, 2025. No changes.
  4. LouisGameDev revised this gist Jan 27, 2025. No changes.
  5. LouisGameDev created this gist Jan 27, 2025.
    78 changes: 78 additions & 0 deletions osrs_themed_youtube_stylesheet.user.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,78 @@
    // ==UserScript==
    // @name OSRS Themed YouTube Stylesheet
    // @version 1.0
    // @author Dawncore/Louis
    // @description Injects RuneScape fonts with size rounding on every webpage
    // @match *://*.youtube.com/*
    // @grant GM_addStyle
    // ==/UserScript==

    (function() {
    // 1. Inject the CSS rules
    GM_addStyle(`
    :root *{
    --runescape-orange: #FF981F;
    --yt-spec-text-secondary: #CCCCCC;
    --yt-spec-text-primary: #FFFFFF;
    --yt-spec-text-primary-inverse:#FFFFFF;
    --yt-spec-base-background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFgAAAA8CAYAAADi8H14AAAAAXNSR0IArs4c6QAABNdJREFUeF7lm8FyFDEMRNl8EnCF4kTB//9PQjlVXrxeSd0taXY2kGNmLEvPbdnyeC8/v31++1T8e7lc7ixcXu7/x3Tz9vrXnde3W9esfhibHb7MfpCt6f/0/bIDHkGMhzOYPcjZ0fq8C/AKd/RzJuDdl3UgI8gh4Egha7CMktBIW8qLADN9emrO+DJseZAZwFfFDwUzzq+q7g7EC0YdVMuvbrhRqrAG5D1FMICPzHUW4Am3w7cM5ChFeJBNwL++f5EWueGsaSi5qEXq7YA77GcARynCAuymEwXw7ugwmnV+OnlU3mUXpWhmMipGM/vCAK5C9JyItmSjTYeCu3zPwj4FMNqOdcDtAruKIwP5dMBon42mYOfOgelLhXxXaFjq6VQDo96Kgjt9ZVIbGpSHAmbhPjtgb4E2Z5NVKj9qBfbSw0cBzICGOTg75aJcFYGdTmd3EFl/0VTPbudCwBVnPcBHwo3K2ApApi1daFSgoi3NI+BWKjcGJPPOCvtGwf8C3DNVbC5yv398lc4i1BEc7zPKrSxsnk9dgmFidn04GvBZcJ9FyZcjAbNwPfV6J3eqos5UMgV4Jm3G0f2TCQNj35J5/ahlasd+nvE/egcCVs9+VcArXGUAM4Ez9jN22wF7WyF0/Lg7osId7SsqXvPyzVaq8LHAg3ud9SgHK19Xs+pllWWdZWQrvu70MT8+7D6mUsTunHKIM9tOMCxcS71nfrdjZ1IL4D145RCHBYwGsapk1o8pkBbAjBHrO51XXLC7BSuvMYArF1U+DGBPzdXbP12Ao7SiQEbiu16dihY5ZMSrlrLtou2OukPZcz2j7i7Aa19hDmZBWaBR22owSpVoDdwR6cq6z9cCOFt5sZDR2fIKiwWfTVmWL3vaaVUwglRVMmq/qzNKBWhbh2LxCh3P7vi/q2AmMOQQYyM69VLar6CZi4pW2kDxqIDfK15vkUPBIWdQeybAjI3KWQKKKQLspZx2wFUoM8iqnQxoBDhaC7xFMwU4u6hlgs62yQxUBFgZ8NUOLJWVABUnFLvqu151iexYgNWYdhutgNU6HQWcfV4BtbaNtmTDN2YvfQjgHYyqgizYjh1JBBhVg9bAPgRwN3B0I7OaS0d7pqDY43oawNVUUgFc7RvNrrscvN9wR1sV1IH6/Ij0ocSg9J8pYMy7aYqDKlDrfSVIpj/Ff7bv7E/K/nvAXnW2DyQ6x/AG/n2R20dRUQCjKOYdVkmMrfGOEkPUN9o5IH/c66uKg6gT9vmzQbYWU/Xb32EXsFmoyqrODvoYKPZdr3+0U2Hjg4DV6cZ2rO6NVWCqH+wnKVbB018K8CMgo/SgAK4oGH0RYQDfHPYwv/R8BsCsD9kFe7arADYrORYwG6A6NTtzsDcLGPWPtgju8FW9T0eniAmCcfYsyFnAGfWyHGTAR4FGOXgfNOXMF8Fg1Ksq98ppTxFKvY0cV5SsAt5TVtQe+akARrbuhLACztTbaoce9AzgfTZVUgR7YVGN95oiqlWL2rEFugI5mi3It0jB2dRwlyI8wGotjoJBaUP9TGPtblYbjD8eYOaTEIrH/LX9bDQ6QICttMIEpaQKlLrQgof8OQ2wB8G7C1adTqM/VcERvGmrAzCy4bEKFWw12qeNp66sQ9k8bPXHlsyMgrPx/AFUQpfaquQxGQAAAABJRU5ErkJggg==");
    }
    html body h1,
    html body h1 *,
    html body h2,
    html body h2 *,
    html body h3,
    html body h3 *,
    html body h4,
    html body h4 *,
    html body h5,
    html body h5 *,
    html body h6,
    html body h6 *
    {
    color: var(--runescape-orange) !important;
    text-shadow: 1px 1px 0 #000 !important;
    }
    html body div,
    html body div * {
    text-shadow: 1px 1px 0 #000 !important;
    }
    .ytSearchboxComponentInputBoxDark {
    background-color: rgb(55 46 34 / 89%) !important;
    }
    .ytSearchboxComponentSuggestionsContainer {
    background-color: rgb(55 46 34 / 99%) !important;
    }
    .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--filled {
    background: url(data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAAFUAAAAWCAYAAACxOdCYAAAAAXNSR0IArs4c6QAABWpJREFUWEftmV1vW0UQhreKXdvko05oSkOLBEJCQki57z0/m3vuIyEkJAQSLSlNSdzEIW7tiOrZk+cw2awdp+Sqyrmx9/jMzsw7M+/MHt9Ld9etI3Cv3HH3u6//vXUtH/mGez/9egnHKqjfP9v9yGG4Pfd++HEvLQTVLAXU/dOVdDI+zdonZ5O0vrGWptNZOp+dp+l0mtedlU46OhrlZ+K6P+inbreTn0eWq9vtppXOSr5/cjy+suaZzc1hmp3P2t+5p66om/ulDmSxpWbnMrLqrdkR7UZv9ndtNe2snidA5YrA5kyNJW+W/vLXJAvOZudXjO0Peml9fT2d/XOWxuPTVK4bp3sZ1PISbO9vbW2mk5OTNDl7m9bWVtPgk0G7xpkmIE2Aanshx4UswGDX4eFR++iyslFvzQ6TgeB1Ok3CffNZA7DACm4Laiz53w4bB8jEs0kD7sHB320W8BsZi9NkItEr129Gx3mPB8ON/MnvXALl2nvlPlFHTT7ur2x8rqZL3TXZef4YVKpre/vTDOag388B5Ppqq9MGUCq4BCpgCqQRNpOQJCvMQH7n6vd6WVFcj0bHuWwBOxrw+uAwPX78qDWI9cPtrZyFBG7ytsk61u5ncF++fJWfjcEGTGhlONzIssq5701k1VuzQ795xkoQH/0D3Cqo8KiOCT+gcY9PqMByRxHA4RRAx7UcJKeayduPHubSjpxKhpTyrhtHG/7GmYNXry9Vh45FnscO9Md7y8jW/NAO6ICSF4caRvIr3HopU+HR2GBwxggSERoBAMm1UEOO3gX3urZkYtaXmW7Q2FeO4l65dq+YLQTLDIlcO8+OZWQX2UFFwKX4ZwWRGLFZwq/VTP35xWnboTUWQ+URNhVcADeLURDX3IcCKEuy24ssz5Qx6GWakZdKedY4wcUzsRm5F4FQhxkk71v2N5Flj3l26Lf9xakoVsq3T1broJKpXkZEnrK8P3+yk0u4xoPykZkUm5wgke1+R1eMfuRnpwueiTJ8jw1DeQOsbv1YVrbsC66x488X+y3NRb6PVTI3U+FUrufP99sGEstv3rxGhsT5jewsoysPRY6Oc7BANTTRzMXx2ShfVo70EacAA+weuUIumirVpn2RepCv2eGcG8dEko6G+PTpTsZsLqfu/T7KEbFzIxiNMlsj18YubRQ1wiBQ6paypelc2JZG0fUpRaqCWViaiPuUOsqJwUz/ENm4l00VQA2Mk4bTB3jtfjmsl38cqeiedj0yD+NMd8YsLmgARwEorh3C4+FA8AgSme3pCeczDVyA55oBXv4me2LHLQ8K8rOy2iVV3ES2ZofVih4y2ymIpLl2pPIURQMwy9jQ0cixA2C69+9nIHLmcfwMa+7RlNjDAPismWM2AMT03bu2oREg1nHuNLv5NICAbuANmHbI+VaRGb5IVr021miHFWq3FxP004w9XVW7P6A6N0YwKUNnxOgIADm/Wt7yFpyW+fFioOe7w78zX2xG3hMA52H3j8O/ZZirY3zaHhwieAD7IbI1O5x7mbNpWhFc5+K5jcqIy62OPpA6GWdJmomekS3zeGaOYCMfj6kxgwCvtk/kYPmTe5acFULQYnDcL1ZE1E251mQX2VH676gml4rblUz1h/hCBefLedIuD8hEzaE4ruVf5ctDgbqIMtGP/ElV+EKkbILKxcFfHR5MsIOqsrFYcdfJqlcej3Y4jUhD+rfwhYoK46u/P940/CVx2xxKgOKs5jDMp6cYG1N89WfmCaj6yzdKvuQoj6M2rvJdRGyk0tVNZW1K0S+Alo5szODyxYP/3lBdefWnU3wC7N1L6ojI4u/XvqQW1OW3vHsSBK79O+UOpv+PwHvhW2RxoNMFcgAAAABJRU5ErkJggg==) !important;
    background-repeat: no-repeat !important;
    background-size: 100% auto !important;
    image-rendering: pixelated !important;
    color: #FFFFFF !important;
    }
    .yt-spec-button-shape-next--size-m {
    border-radius: unset !important;
    height: 24px !important;
    }
    yt-chip-cloud-chip-renderer[chip-style=STYLE_DEFAULT][selected] #chip-container.yt-chip-cloud-chip-renderer, yt-chip-cloud-chip-renderer[chip-style=STYLE_HOME_FILTER][selected] #chip-container.yt-chip-cloud-chip-renderer {
    background-color: var(--runescape-orange) !important;
    }
    #cinematics {
    display: none !important;
    }
    `);

    })();