Skip to content

osu color changer by hewwo02

Imported from https://userstyles.world/api/style/1767.user.css

Details

Authorhewwo02

LicenseMIT

Categoryunset

Created

Updated

Size22 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Userstyle doesn't have 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 color changer
@namespace      https://github.com/cyperdark/osu-cc
@author         cyperdark
@version        1.4.0
@license        MIT
@preprocessor   stylus

@var checkbox enable_colors "Enable custom color" 1

@var select   main_color     'Main color scheme' {
    'Dark						': '4000deg',
    'Red						*': '0deg',
    'Scarlet					': '10deg',
    'International Orange		': '20deg',
    'Dark Orange				': '30deg',
    'Orange						': '40deg',
    'Gold						': '50deg',
    'Yellow						': '60deg',
    'Electric Lime				': '70deg',
    'Spring Bud					': '80deg',
    'Chartreuse					': '90deg',
    'Bright Green				': '100deg',
    'Harlequin					': '110deg',
    'Lime						': '120deg',
    'Free Speech Green			': '130deg',
    'Malachite					': '140deg',
    'Spring Green				': '150deg',
    'Medium Spring Green		': '160deg',
    'Bright Turquoise			': '170deg',
    'Aqua						': '180deg',
    'Deep Sky Blue				': '190deg',
    'Dodger Blue				': '210deg',
    'Navy Blue					': '220deg',
    'Light Blue					': '230deg',
    'Blue						': '240deg',
    'Dark Blue					': '250deg',
    'Grey purple				': '255deg',
    'Electric Indigo			': '260deg',
    'Indigo						': '270deg',
    'Electric Purple			': '280deg',
    'Psychedelic Purple			': '290deg',
    'Fuchsia					': '300deg',
    'Hot Magenta				': '310deg',
    'Hollywood Cerise			': '320deg',
    'Deep Pink					': '330deg',
    'Razzmatazz					': '340deg',
    'Torch Red					': '350deg',
}

@var checkbox friends_compact "Compacted frineds list; *works only in compact mode" 0
@var checkbox friends_color "Use theme color on borders for friends list " 0

@var checkbox chat_row "Right side chat " 0

@var checkbox dis_resolve_shadow "Enable dissusion highlights" 0
@var checkbox show_button "Always show beatmap buttons" 0

@var checkbox bg_enable "Enable background" 0

@var checkbox bg_top_enable "Enable header background" 0

@var checkbox new_profile_fix "Fix smth on profile" 0

@var checkbox custom_nickname_enable "Enable custom nickname color" 0

@var text custom_nickname "Profile nickname color" "linear-gradient(90deg, rgba(140,102,255,1) 0%, rgba(150,156,255,1) 25%, rgba(178,240,255,1) 67%, rgba(0,212,255,1) 100%)"

@var checkbox mode_icon_colors "Enable mode icon colors" 0

@var checkbox badges_inline "Show badges in one line" 0

@var select bg_image "Background image" {
 "Default image":  `"https://i.imgur.com/AL4ESML.jpg"`,
 "Custom": "none",
}

@var text bg_image_custom "Background url; Example: 'image link' (qoutes important) " `"https://i.imgur.com/AL4ESML.jpg"`

@var select bg_position "Background image" {
 "Center": "center",
 "Top": "top",
 "Left": "left",
 "Right": "right",
 "Bottom": "bottom",
 "Custom": "var(--bg_position_custom, none)",
}
@var text bg_position_custom "Background Position Custom; Example: 10px 10px or 50% 0%" "0% 50%"

@var select bg_size "Background Size" {
 "Cover": "cover",
 "Contain": "contain",
 "Custom": "var(--bg_size_custom, none)",
}

@var text bg_size_custom "Background Size Custom" "50%"

@var select bg_repeat "Background repeat" {
 "No repeat": "no-repeat",
 "Repeat": "repeat",
 "Repeat horizontally": "repeat-x",
 "Repeat vertically": "repeat-y",
 "Round": "round",
 "Space": "space",
}

@var select bg_blend "Background blend mode" {
 "Normal": "normal",
 "Multiply": "multiply",
 "Screen": "screen",
 "Overlay": "overlay",
 "Darken": "darken",
 "Lighten": "lighten",
 "Color dodge": "color-dodge",
 "Color burn": "color-burn",
 "Hard light": "hard-light",
 "Soft light": "soft-light",
 "Difference": "difference",
 "Exclusion": "exclusion",
 "Hue": "hue",
 "Saturation": "saturation",
 "Color": "color",
 "Luminosity": "luminosity",
}

==/UserStyle== */
@-moz-document url-prefix("https://osu.ppy.sh/"),
url-prefix("http://osu.ppy.sh/") {
	if enable_colors {
		:root {
			--base-hue: main_color;
			--base-hue-deg: main_color;
		}
	}

	body,
	html {
		scrollbar-color: hsl(main_color, 100%, 70%) #000;
	}
	
	.header-v4__bg-container {
		z-index: -1;
	}
	
	.forum-item:hover .forum-item-stripe span,
 	.forum-topic-entry:hover .forum-item-stripe span {
		display: block;
	}

	.forum-item .forum-item-stripe span,
 	.forum-topic-entry .forum-item-stripe span{
		display: none;
	}
	
	if main_color == '4000deg' {
		:root {
			--hsl-p: 0, 0%, 50%;
			--hsl-h1: 0, 0%, 100%;
			--hsl-h2: 0, 0%, 30%;
			--hsl-c1: 0, 0%, 100%;
			--hsl-c2: 0, 0%, 90%;
			--hsl-l1: 0, 0%, 80%;
			--hsl-l2: 0, 0%, 75%;
			--hsl-l3: 0, 0%, 70%;
			--hsl-l4: 0, 0%, 50%;
			--hsl-d1: 0, 0%, 30%;
			--hsl-d2: 0, 0%, 25%;
			--hsl-d3: 0, 0%, 20%;
			--hsl-d4: 0, 0%, 15%;
			--hsl-d5: 0, 0%, 10%;
			--hsl-d6: 0, 0%, 5%;
			--hsl-f1: 0, 0%, 60%;
			--hsl-b1: 0, 0%, 30%;
			--hsl-b2: 0, 0%, 25%;
			--hsl-b3: 0, 0%, 20%;
			--hsl-b4: 0, 0%, 15%;
			--hsl-b5: 0, 0%, 10%;
			--hsl-b6: 0, 0%, 5%;
			// --colour-pink-hue: 333;
			--hsl-pink-1: 0, 0%, 60%;
			// --hsl-pink-2: var(--colour-pink-hue),var(--c-saturation-2),var(--c-lightness-2);
			// --hsl-pink-3: var(--colour-pink-hue),var(--c-saturation-3),var(--c-lightness-3);
			// --colour-purple-hue: 255;
			--hsl-purple-1: 0, 0%, 60%;
			// --hsl-purple-2: var(--colour-purple-hue),var(--c-saturation-2),var(--c-lightness-2);
			// --hsl-purple-3: var(--colour-purple-hue),var(--c-saturation-3),var(--c-lightness-3);
			// --colour-blue-hue: 200;
			--hsl-blue-1: 0, 0%, 60%;
			// --hsl-blue-2: var(--colour-blue-hue),var(--c-saturation-2),var(--c-lightness-2);
			// --hsl-blue-3: var(--colour-blue-hue),var(--c-saturation-3),var(--c-lightness-3);
			// --colour-green-hue: 125;
			--hsl-green-1: 0, 0%, 60%;
			// --hsl-green-2: var(--colour-green-hue),var(--c-saturation-2),var(--c-lightness-2);
			// --hsl-green-3: var(--colour-green-hue),var(--c-saturation-3),var(--c-lightness-3);
			// --colour-lime-hue: 90;
			// --hsl-lime-1: var(--colour-lime-hue),var(--c-saturation-1),var(--c-lightness-1);
			// --hsl-lime-2: var(--colour-lime-hue),var(--c-saturation-2),var(--c-lightness-2);
			// --hsl-lime-3: var(--colour-lime-hue),var(--c-saturation-3),var(--c-lightness-3);
			// --colour-orange-hue: 45;
			--hsl-orange-1: 0, 0%, 60%;
			// --hsl-orange-2: var(--colour-orange-hue),var(--c-saturation-2),var(--c-lightness-2);
			// --hsl-orange-3: var(--colour-orange-hue),var(--c-saturation-3),var(--c-lightness-3);
			// --colour-red-hue: 360;
			--hsl-red-1: 0, 0%, 60%;
			// --hsl-red-2: var(--colour-red-hue),var(--c-saturation-2),var(--c-lightness-2);
			// --hsl-red-3: var(--colour-red-hue),var(--c-saturation-3),var(--c-lightness-3);
			// --colour-darkorange-hue: 20;
			--hsl-darkorange-1: 0, 0%, 60%;
			// --hsl-darkorange-2: var(--colour-darkorange-hue),var(--c-saturation-2),var(--c-lightness-2);
			// --hsl-darkorange-3: var(--colour-darkorange-hue),var(--c-saturation-3),var(--c-lightness-3);
			
			--beatmapset-graveyard-bg: #000;
			--beatmapset-graveyard-colour: #939393;
			--beatmapset-wip-bg: #FF9966;
			--beatmapset-pending-bg: #FFD966;
			--beatmapset-qualified-bg: #66CCFF;
			--beatmapset-approved-bg: #B3FF66;
			--beatmapset-ranked-bg: #B3FF66;
			--beatmapset-loved-bg: #FF66AB;
		}
		
		.beatmap-basic-stats {
			color: hsl(0, 0%, 100%);
		}

		.beatmap-basic-stats__entry-icon {
			filter: grayscale(1);
		}

		.stacked-bar-chart--beatmap-success-rate .stacked-bar-chart__bar--exit {
			fill: hsl(0, 0%, 100%);
		}

		.stacked-bar-chart--beatmap-success-rate .stacked-bar-chart__bar--fail {
			fill: hsl(0, 0%, 30%);
		}

		.beatmap-scoreboard-table__body-row.beatmap-scoreboard-table__body-row--friend {
			--row-background-color: hsl(0, 0%, 30%);
			--row-background-color-highlight: hsl(0, 0%, 50%);
		}

		.nav2-header__triangles {
			filter: grayscale(1);
		}

		.profile-info__icon--supporter {
			background-color: hsl(0, 0%, 50%);
			color: hsl(0, 0%, 100%);
		}
		
		.forum-item-stripe span {
			color: white;
		}

		.t-forum-category-management .u-forum--before-bg:before, .t-forum-category-management .u-forum--bg {
			background-color: hsl(0, 0%, 50%) !important;
		}
		
		.btn-circle--activated, .btn-circle.js-activated {
			color: hsl(0, 0%, 80%);
			background-color: hsl(0, 0%, 30%);
		}
		
		.game-mode-link {
			color: hsl(0, 0%, 70%);
		}
		
		.btn-osu-big:hover {
			color: hsl(0, 0%, 30%);
			background: hsl(0, 0%, 70%);
		}
		
		.beatmap-pack-items__icon {
			color: hsl(0, 0%, 50%);
		}
		
		.btn-osu-big--forum-button {
			background: hsl(0, 0%, 25%);
			color: hsl(0, 0%, 80%);
		}

		.btn-osu-big--forum-button:hover {
			background: hsl(0, 0%, 50%);
			color: hsl(0, 0%, 100%);
		}
		
		.btn-osu-big--chat-send {
			background: hsl(0, 0%, 25%);
		}

		.btn-osu-big--chat-send:hover {
			color: hsl(0, 0%, 100%);
			background: hsl(0, 0%, 50%);
		}
		
		.user-level {
			filter: grayscale(1);
		}
	} else {
		.user-level {
			filter: hue-rotate(calc(var(--base-hue) - 46deg));
		}
		
		.stacked-bar-chart--beatmap-success-rate .stacked-bar-chart__bar--exit {
			fill: hsl(main_color,100%,70%);
		}

		.stacked-bar-chart--beatmap-success-rate .stacked-bar-chart__bar--fail {
			fill: hsl(main_color,50%,45%);
		}

		.beatmap-scoreboard-table__body-row.beatmap-scoreboard-table__body-row--friend {
			--row-background-color: hsl(main_color,20%,35%);
			--row-background-color-highlight: hsl(main_color,30%,45%);
		}
	}
	
	if enable_colors {
		::-webkit-scrollbar {
			width: 10px;
		}
		::-webkit-scrollbar-thumb {
			if main_color == '4000deg' {
				background-color: hsl(0, 0%, 100%);
			} else {
				background-color: hsl(main_color, 100%, 70%);
			}
			border-radius: 100px;
		}
		::-webkit-scrollbar-thumb:hover {
			if main_color == '4000deg' {
				background-color: hsl(0, 0%, 80%);
			} else {
				background-color: hsl(main_color, 50%, 50%);
			}
		}
	}
	
	if badges_inline {
		.profile-badges {
			padding: 15px;
			overflow-y: auto;
			flex-wrap: nowrap;
			if enable_colors {
				background: hsl(main_color,10%,20%);
			} else {
				background: hsl(333,10%,20%);
			}
			border-radius: 4px;
			box-sh...

Reviews

No reviews yet.