Complete redisign for osu.ppy.sh with rounded corners, pleasant colors etc.
Osu!Website Redisign | Light Theme by Fujiya by Fujiya
Details
AuthorFujiya
LicenseNo License
Categoryosu.ppy.sh/community/forums
Created
Updated
Code size1.1 MB
Code checksum25d29ec8
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 Redisign (forum only)
@namespace github.com/9IZUKI9/Osu-Website-Redisign
@homepageURL https://github.com/9IZUKI9/Osu-Website-Redisign
@version 122.03.2025
@description Redesign of the osu! forum website
@author Fujiya
==/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: #c8c8ff;
border: 1px solid #d6f7ff;
color: #000;
color: #f1f1f1
}
color: #000;
.qtip-default .qtip-titlebar {
background-color: #c8d8ff
}
color: #000;
.qtip-default .qtip-icon {
background: #ffffff;
color: #000;
border-color: #ffffff;
color: #ffffff
}
color: #000;
.qtip-default .qtip-titlebar .qtip-close {
border-color: #ffffff;
color: #cecece
}
/*! Light tooltip style */
.qtip-light {
background-color: #c8c8c8;
border-color: #e5e5e5;
color: #ffffff
}
color: #000;
.qtip-light .qtip-titlebar {
background-color: #ffffff
}
color: #000;
/*! Dark tooltip style */
.qtip-dark {
background-color: #ffffff;
border-color: #ffffff;
color: #ffffff
}
color: #000;
.qtip-dark .qtip-titlebar {
background-color: #ffffff
}
color: #000;
.qtip-dark .qtip-icon {
border-color: #e7e7e7
}
.qtip-dark .qtip-titlebar .ui-state-hover {
border-color: #ffffff
}
/*! Cream tooltip style */
.qtip-cream {
background-color: #ccd0ff;
border-color: #cedeff;
color: #ffffff
}
color: #000;
.qtip-cream .qtip-titlebar {
background-color: #d7e9ff
}
color: #000;
.qtip-cream .qtip-close .qtip-icon {
background-position: -82px 0
}
/*! Red tooltip style */
.qtip-red {
background-color: #d0ffff;
border-color: #e...