Skip to content

Osu!Dark Theme by Izuki

Screenshot of Osu!Dark Theme

Details

AuthorIzuki

LicenseNo License

CategoryDark Theme

Created

Updated

Size1.0 MB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Complete redisign for osu!website

Notes

Userstyle doesn't have notes.

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link.
/* ==UserStyle==
@name         Osu!Website Redisign
@namespace    http://tampermonkey.net/
@version      18.03.2025
@description  Complete redesign of the osu! website
@author       -Izuki-
==/UserStyle== */

@-moz-document domain("osu.ppy.sh") {
    
    @font-face {
        font-display: swap;
        font-family: Inter;
        font-style: normal;
        font-weight: 100;
        src: url(/assets/fonts/Inter-Thin-BETA.4ef9d4c3.woff2) format("woff2"),url(/assets/fonts/Inter-Thin-BETA.b626874b.woff) format("woff")
    }

    @font-face {
        font-display: swap;
        font-family: Inter;
        font-style: italic;
        font-weight: 100;
        src: url(/assets/fonts/Inter-ThinItalic-BETA.4b5cc1f0.woff2) format("woff2"),url(/assets/fonts/Inter-ThinItalic-BETA.7f66650e.woff) format("woff")
    }

    @font-face {
        font-display: swap;
        font-family: Inter;
        font-style: normal;
        font-weight: 200;
        src: url(/assets/fonts/Inter-ExtraLight-BETA.5c80ffcc.woff2) format("woff2"),url(/assets/fonts/Inter-ExtraLight-BETA.0e00ed3d.woff) format("woff")
    }

    @font-face {
        font-display: swap;
        font-family: Inter;
        font-style: italic;
        font-weight: 200;
        src: url(/assets/fonts/Inter-ExtraLightItalic-BETA.b3427a46.woff2) format("woff2"),url(/assets/fonts/Inter-ExtraLightItalic-BETA.2efa3d3f.woff) format("woff")
    }

    @font-face {
        font-display: swap;
        font-family: Inter;
        font-style: normal;
        font-weight: 300;
        src: url(/assets/fonts/Inter-Light-BETA.eec5c276.woff2) format("woff2"),url(/assets/fonts/Inter-Light-BETA.cb65f39e.woff) format("woff")
    }

    @font-face {
        font-display: swap;
        font-family: Inter;
        font-style: italic;
        font-weight: 300;
        src: url(/assets/fonts/Inter-LightItalic-BETA.113703a9.woff2) format("woff2"),url(/assets/fonts/Inter-LightItalic-BETA.754e462d.woff) format("woff")
    }

    @font-face {
        font-display: swap;
        font-family: Inter;
        font-style: normal;
        font-weight: 400;
        src: url(/assets/fonts/Inter-Regular.1011a20f.woff2) format("woff2"),url(/assets/fonts/Inter-Regular.4c8f4dc3.woff) format("woff")
    }

    @font-face {
        font-display: swap;
        font-family: Inter;
        font-style: italic;
        font-weight: 400;
        src: url(/assets/fonts/Inter-Italic.45ce8e8e.woff2) format("woff2"),url(/assets/fonts/Inter-Italic.cbbd4102.woff) format("woff")
    }

    @font-face {
        font-display: swap;
        font-family: Inter;
        font-style: normal;
        font-weight: 500;
        src: url(/assets/fonts/Inter-Medium.1adb92f9.woff2) format("woff2"),url(/assets/fonts/Inter-Medium.85d48661.woff) format("woff")
    }

    @font-face {
        font-display: swap;
        font-family: Inter;
        font-style: italic;
        font-weight: 500;
        src: url(/assets/fonts/Inter-MediumItalic.53d85fe2.woff2) format("woff2"),url(/assets/fonts/Inter-MediumItalic.e0f527bf.woff) format("woff")
    }

    @font-face {
        font-display: swap;
        font-family: Inter;
        font-style: normal;
        font-weight: 600;
        src: url(/assets/fonts/Inter-SemiBold.455befe4.woff2) format("woff2"),url(/assets/fonts/Inter-SemiBold.abaecffc.woff) format("woff")
    }

    @font-face {
        font-display: swap;
        font-family: Inter;
        font-style: italic;
        font-weight: 600;
        src: url(/assets/fonts/Inter-SemiBoldItalic.54c1d270.woff2) format("woff2"),url(/assets/fonts/Inter-SemiBoldItalic.4654cf2b.woff) format("woff")
    }

    @font-face {
        font-display: swap;
        font-family: Inter;
        font-style: normal;
        font-weight: 700;
        src: url(/assets/fonts/Inter-Bold.608bcc79.woff2) format("woff2"),url(/assets/fonts/Inter-Bold.ac56fedc.woff) format("woff")
    }

    @font-face {
        font-display: swap;
        font-family: Inter;
        font-style: italic;
        font-weight: 700;
        src: url(/assets/fonts/Inter-BoldItalic.cc464783.woff2) format("woff2"),url(/assets/fonts/Inter-BoldItalic.e19c4d28.woff) format("woff")
    }

    @font-face {
        font-display: swap;
        font-family: Inter;
        font-style: normal;
        font-weight: 800;
        src: url(/assets/fonts/Inter-ExtraBold.01b96605.woff2) format("woff2"),url(/assets/fonts/Inter-ExtraBold.878506c9.woff) format("woff")
    }

    @font-face {
        font-display: swap;
        font-family: Inter;
        font-style: italic;
        font-weight: 800;
        src: url(/assets/fonts/Inter-ExtraBoldItalic.87e87931.woff2) format("woff2"),url(/assets/fonts/Inter-ExtraBoldItalic.8a745e7c.woff) format("woff")
    }

    @font-face {
        font-display: swap;
        font-family: Inter;
        font-style: normal;
        font-weight: 900;
        src: url(/assets/fonts/Inter-Black.1d6c0b9e.woff2) format("woff2"),url(/assets/fonts/Inter-Black.693e6be6.woff) format("woff")
    }

    @font-face {
        font-display: swap;
        font-family: Inter;
        font-style: italic;
        font-weight: 900;
        src: url(/assets/fonts/Inter-BlackItalic.1b2f2f94.woff2) format("woff2"),url(/assets/fonts/Inter-BlackItalic.31f1a29d.woff) format("woff")
    }

    @font-face {
        font-named-instance:"Regular";font-family: Inter var;
        font-style: normal;
        font-weight: 100 900;
        src: url(/assets/fonts/Inter-upright.var.a1a71252.woff2) format("woff2 supports variations(gvar)"),url(/assets/fonts/Inter-upright.var.a1a71252.woff2) format("woff2-variations"),url(/assets/fonts/Inter-upright.var.a1a71252.woff2) format("woff2")
    }

    @font-face {
        font-named-instance:"Italic";font-family: Inter var;
        font-style: italic;
        font-weight: 100 900;
        src: url(/assets/fonts/Inter-italic.var.4ca9d8de.woff2) format("woff2 supports variations(gvar)"),url(/assets/fonts/Inter-italic.var.4ca9d8de.woff2) format("woff2-variations"),url(/assets/fonts/Inter-italic.var.4ca9d8de.woff2) format("woff2")
    }

    @font-face {
        font-family: Inter var experimental;
        font-style: oblique 0deg 10deg;
        font-weight: 100 900;
        src: url(/assets/fonts/Inter.var.eed966ca.woff2) format("woff2-variations"),url(/assets/fonts/Inter.var.eed966ca.woff2) format("woff2")
    }

    .qtip {
        box-shadow: none;
        direction: ltr;
        display: none;
        font-size: 10.5px;
        left: -28000px;
        line-height: 12px;
        max-width: 280px;
        min-width: 50px;
        padding: 0;
        position: absolute;
        top: -28000px
    }

    .qtip-content {
        word-wrap: break-word;
        padding: 5px 9px;
        text-align: left
    }

    .qtip-content,.qtip-titlebar {
        overflow: hidden;
        position: relative
    }

    .qtip-titlebar {
        border-width: 0 0 1px;
        font-weight: 700;
        padding: 5px 35px 5px 10px
    }

    .qtip-titlebar+.qtip-content {
        border-top-width: 0!important
    }

    .qtip-close {
        border: 1px solid transparent;
        cursor: pointer;
        outline: medium none;
        position: absolute;
        right: -9px;
        top: -9px;
        z-index: 11
    }

    .qtip-titlebar .qtip-close {
        margin-top: -9px;
        right: 4px;
        top: 50%
    }

    * html .qtip-titlebar .qtip-close {
        top: 16px
    }

    .qtip-icon .ui-icon,.qtip-titlebar .ui-icon {
        direction: ltr;
        display: block;
        text-indent: -1000em
    }

    .qtip-icon,.qtip-icon .ui-icon {
        border-radius: 3px;
        text-decoration: none
    }

    .qtip-icon .ui-icon {
        background: transparent none no-repeat -100em -100em;
        color: inherit;
        height: 14px;
        line-height: 14px;
        font: normal 700 10px/13px Tahoma,sans-serif;
        text-align: center;
        text-indent: 0;
        width: 18px
    }

    .qtip-default {
        background-color: #ffffa3;
        border: 1px solid #f1d031;
        color: #555
    }

    .qtip-default .qtip-titlebar {
        background-color: #ffef93
    }

    .qtip-default .qtip-icon {
        background: #f1f1f1;
        border-color: #ccc;
        color: #777
    }

    .qtip-default .qtip-titlebar .qtip-close {
        border-color: #aaa;
        color: #111
    }

    /*! Light tooltip style */
    .qtip-light {
        background-color: #fff;
        border-color: #e2e2e2;
        color: #454545
    }

    .qtip-light .qtip-titlebar {
        background-color: #f1f1f1
    }

    /*! Dark tooltip style */
    .qtip-dark {
        background-color: #505050;
        border-color: #303030;
        color: #f3f3f3
    }

    .qtip-dark .qtip-titlebar {
        background-color: #404040
    }

    .qtip-dark .qtip-icon {
        border-color: #444
    }

    .qtip-dark .qtip-titlebar .ui-state-hover {
        border-color: #303030
    }

    /*! Cream tooltip style */
    .qtip-cream {
        background-color: #fbf7aa;
        border-color: #f9e98e;
        color: #a27d35
    }

    .qtip-cream .qtip-titlebar {
        background-color: #f0de7d
    }

    .qtip-cream .qtip-close .qtip-icon {
        background-position: -82px 0
    }

    /*! Red tooltip style */
    .qtip-red {
        background-color: #f78b83;
        border-color: #d95252;
        color: #912323
    }

    .qtip-red .qtip-titlebar {
        background-color: #f06d65
    }

    .qtip-red .qtip-close .qtip-icon {
        background-position: -102px 0
    }

    .qtip-red .qtip-icon,.qtip-red .qtip-titlebar .ui-state-hover {
        border-color: #d95252
  ...

Reviews

No reviews yet.