Complete redisign for osu.ppy.sh with rounded corners, pleasant colors etc.
Osu!Website Redesign | Dark Theme by Izuki
Details
AuthorIzuki
LicenseNo License
CategoryDark Theme
Created
Updated
Code size1.0 MB
Code checksumdd9f6407
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
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 Redesign
@namespace github.com/9IZUKI9/Osu-Website-Redesign
@homepageURL https://github.com/9IZUKI9/Osu-Website-Redesign
@version 29.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...