advanced version of osu!cc by cyperdark, tried my best to change every color to match the accent.
hellotoearth osu!cc by exit-scammed
Details
Authorexit-scammed
LicenseNo License
Categoryosu
Created
Updated
Size7.3 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
it will change the color to light blue (main accent).
full color change will only available in my account profile (hellotoearth).
Source code
/* ==UserStyle==
@name hellotoearth osu!cc
@version 20220102.08.17
@namespace userstyles.world/user/exit-scammed
@description advanced version of osu!cc by cyperdark, tried my best to change every color to match the accent.
@author exit-scammed
@license No License
==/UserStyle== */
@-moz-document url-prefix("https://osu.ppy.sh/") {
:root {
--base-hue: 206;
--base-hue-deg: 206deg;
--base-hue-deg2: 170deg;
/* remove the comment mark if you want the super dark background (i have awful color taste so sorry) */
/*--hsl-b1: var(--base-hue),0%,10%;
--hsl-b2: var(--base-hue),0%,20%;
--hsl-b3: var(--base-hue),0%,10%;
--hsl-b4: var(--base-hue),0%,5%;
--hsl-b5: var(--base-hue),0%,0%;
--hsl-b6: var(--base-hue),0%,3%;*/
}
body,
.user-action-button--friend {
background: hsl(var(--base-hue), 40%, 60%);
}
.user-action-button--friend:hover {
background: hsl(var(--base-hue), 30%, 50%);
}
.header-v4__bg-container {
z-index: -1;
}
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-thumb {
background-color: hsl(var(--base-hue), 50%, 40%);
border-radius: 50px;
}
::-webkit-scrollbar-thumb:hover {
background-color: hsl(var(--base-hue), 70%, 40%);
}
}
@-moz-document regexp("https://osu.ppy.sh/users/9893708") {
:root {
--base-hue: 255!important;
--base-hue-deg: 255deg;
}
.value-display.value-display--pp {
display: none !important;
}
}
@-moz-document url-prefix("https://osu.ppy.sh/users") {
/*.profile-rank-count {
display: none !important;
}*/
.user-level {
filter: hue-rotate(var(--base-hue-deg2));
}
.profile-info {
--content-height: 65px;
}
.profile-info__bg {
background-image: url("https://i.pinimg.com/originals/b0/9b/da/b09bda150cc9d326e6f654fc0a4667ef.jpg") !important;
}
.header-v4--users .header-v4__bg {
display: none !important;
}
.profile-header__rank-count-mobile {
display: none !important;
}
.header-v4--users .header-v4__container--main {
min-height: 120px !important;
}
.nav2-header__triangles {
filter: hue-rotate(var(--base-hue-deg));
}
/*.page-mode.page-mode--profile-page-extra {
display: none !important;
}*/
.value-display {
text-align: left;
min-width: 80px;
}
.profile-detail__chart {
margin: 0px -10px;
}
.line-chart--profile-page .line-chart__line {
stroke: hsl(var(--base-hue), 80%, 70%);
stroke-width: 2px;
margin: 0px 0px;
}
.header-v4__row--title {
background: hsl(var(--base-hue), 0%);
}
.medals-group__title {
text-align: center;
}
.line-chart--profile-page .line-chart__line {
stroke: hsl(var(--base-hue), 80%, 70%);
stroke-width: 2px;
}
.game-mode-link {
color: #dfdfdf;
}
.game-mode-link--active {
font-weight: 700;
color: #fff;
}
.simple-menu__header {
display: none !important;
}
.profile-detail__stats {
align-items: center;
}
.simple-menu {
background-color: #1f1f1fe0;
--item-hover-bg: #00000000;
}
.nav2-header__menu-bg {
display: none !important;
}
.line-chart--profile-page .line-chart__hover-line {
background-color: hsl(var(--base-hue), 80%, 70%);
}
.line-chart--profile-page .line-chart__hover-circle {
border-color: hsl(var(--base-hue), 80%, 70%);
border-width: 3px;
}
.play-detail__accuracy {
color: hsl(var(--hsl-h1));
}
.beatmap-playcount__count {
color: hsl(var(--hsl-h1));
}
.play-detail__beatmap {
color: hsl(var(--hsl-h1));
font-weight: 500;
font-style: italic;
}
/*.profile-detail__values {
color: #d8edff;
text-align: right;
justify-content: right;
}*/
.value-display--rank .value-display__value {
font-size: 35px;
font-weight: 500;
margin: 0px 0px;
background: -webkit-linear-gradient(0deg, #8df7fb 5%, #85ccfe 50%, #abbeff 80%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.profile-info__title {
text-shadow: 0px 1px 1px black, 0px 1px 2px black;
filter: brightness(2) saturate(0.5);
}
.profile-info__flag-flag {
font-size: calc(var(--icon-height) / 1.2);
}
.profile-info__flags {
margin-top: 5px;
}
.profile-info__flag-text {
padding-left: 6px;
}
.profile-detail__stats {
justify-content: center;
align-items: center;
}
.bar--user-profile {
height: 22px;
overflow: hidden;
}
.bar__text {
top: 50%;
right: 10px;
transform: translate(0, -50%);
margin-top: 0;
}
.profile-info__bg::before {
content: '';
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background: linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, transparent 5%, transparent 95%, rgba(0, 0, 0, 0.2));
}
.profile-info__avatar {
border-radius: calc(var(--cover-radius) / 1.5);
}
.profile-detail {
position: relative;
grid-template-areas: "stats" "badges";
}
.profile-detail .profile-badges {
grid-area: badges;
}
.profile-detail .profile-detail__stats {
grid-area: stats;
}
.profile-detail__stats > div:nth-child(1) {
display: grid;
grid-template-areas: "stats" "rank" "ranks";
}
.profile-detail__stats > div:nth-child(1) > div:nth-child(1) {
grid-area: ranks;
position: absolute;
top: 0;
right: 0;
transform: translate(-40%, -145%);
}
.profile-detail__stats > div:nth-child(1) > div:nth-child(2) {
grid-area: rank;
}
.profile-detail__stats > div:nth-child(1) > div:nth-child(3) {
grid-area: stats;
}
.profile-detail__stats > div:nth-child(1) > div:nth-child(3) > div:nth-child(1) {
display: grid;
gap: 0px 30px;
grid-template-areas: "time medals pp";
}
.profile-detail__stats > div:nth-child(1) > div:nth-child(3) > div:nth-child(1) > div:nth-child(1) {
grid-area: medals;
min-width: fit-content;
}
.profile-detail__stats > div:nth-child(1) > div:nth-child(3) > div:nth-child(1) > div:nth-child(2) {
grid-area: pp;
min-width: fit-content;
}
.profile-detail__stats > div:nth-child(1) > div:nth-child(3) > div:nth-child(1) > div:nth-child(3) {
grid-area: time;
min-width: fit-content;
}
.profile-info__icon--supporter {
color: hsl(main_color, 20%, 25%);
}
.profile-badges {
padding: 15px;
overflow-y: auto;
flex-wrap: nowrap;
border-radius: 4px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.profile-info__title, .profile-info__name, .profile-info__flags {
text-shadow: 0px 1px 1px black, 0px 1px 5px black;
}
}