Pretzel Rocks Modernized by Freeplay

Imported from https://codeberg.org/Freeplay/UserStyles/raw/branch/main/pretzel-rocks-modernized.user.css
AuthorFreeplay
License
Created at2021-02-04 19:13:02
Updated at2021-02-04 19:13:02
Applies tohttps://pretzel.rocks/
Description

Makes Pretzel.Rocks look a bit better!
Notes

Userstyle doesn't have notes.
Source code

/* ==UserStyle==
@name           Pretzel Rocks Modernized
@version        1.0.0
@description    Makes Pretzel.Rocks look a bit better!
@updateURL      https://codeberg.org/Freeplay/UserStyles/raw/branch/main/pretzel-rocks-modernized.user.css
@preprocessor   stylus

 -- AUTHOR STUFF --
@namespace      Freeplay
@author         Freeplay (https://freeplay.codeberg.page/)
@homepageURL    https://codeberg.org/Freeplay/UserStyles
@supportURL     https://codeberg.org/Freeplay/UserStyles/issues

@var checkbox blur "Blur Effects" 1
@var text bgimg "Background Image (Place URL in quotes, empty quotes for none)" "'  '"
@var range bgblur "Background Image Blur" [0, 0, 60, 2, "px"]
@var range bgopacity "Background Image Opacity" [.5, 0, 1, .05]

==/UserStyle== */

@-moz-document domain("play.pretzel.rocks") {
	@keyframes inUp {
		0% { filter: opacity(.8); transform: translatey(2px) scale(.999) }
		100% { filter: opacity(1); }
	}
	@keyframes fadeInUp {
		0% { filter: opacity(0); transform: translatey(10px) scale(.98) }
		100% { filter: opacity(1); transform: none; }
	}
	
	html {
		background: #17242d;
		overflow: hidden;
	}
	.kYWdlj {
		overflow: visible !important;
		width: 100% !important;
	}
	#root {
		height: auto;
	}
	* {
		transition: background-color .2s, color .2s;
	}
	
	.content-wrapper {
		background: none !important;
	}
	.content-wrapper::before {
		content: "";
		background-image: url(bgimg);
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-size: cover;
		background-position: center;
		filter: opacity(bgopacity) brightness(bgopacity) blur(bgblur);
		z-index: -1;
	}
	
	/* Main Area */
	.dxxmHq {
		display: flex;
		flex-direction: column;
		max-height: 100%;
	}
	.kIugIj, .eGPwrc, .ejHdXL {
		width: 200px;
		background-color: rgba(0,0,0,0.5);
		if blur {
			backdrop-filter: blur(20px);
		}
		border: 0 !important;
	}
	.kIugIj {
		min-height: 60px !important;
		.hQCbDB { /* Logo */
			border-bottom-right-radius: 60px !important;
			z-index: 1;
			transition: all .2s;
			svg {
				transform: translate(-5px,-5px) !important;
				transition: all .2s;
			}
		}
	}
	
	.ejHdXL { /* Sidebar Nav */
		flex-grow: 1;
		.ieislx {
			overflow-y: auto;
			scrollbar-width: thin;
            &::-webkit-scrollbar {
                background-color: transparent; /* or add it to the track */
                width: 6px;
            }
            &::-webkit-scrollbar-thumb {
                background-color: #1bb3a4;
            }
            &::-webkit-scrollbar-track {
                margin-top: 25px;
                margin-bottom: 20px;
            }
			
			.nav-link {
				padding: 18px 28px !important;
				& > * {
					z-index: 2;
					position: relative;
				}
				& > span:first-child, & > i:first-child {
					min-width: 18px !important;
					max-width: 18px !important;
					margin: 0 !important;
					margin-right: 14px !important; 
					z-index: 3;
				}
				[class*=" pretzel-icon-"]::before {
					margin: 0 !important;
				}
				span:last-child::before {
					content: "";
					position: absolute;
					top: -12px;
					left: -48px;
					right: -18px;
					bottom: -12px;
					filter: opacity(.05);
					border-radius: 100px;
					z-index: -2;
					transition: background-color .2s;
				}
				&:hover > span:last-child::before {
					content: "";

					background-color: #1bb3a4;
				}
				&.active {
					background: none !important;
				}
				&.active > span:last-child::before {
					background-color: #1bb3a4;
					filter: opacity(.2) !important;
				}
			}
		}
			// &:active ~ .gwkGRz {
			// filter: opacity(.8);
			// transform: translatey(-2px) rotate(.1deg) scale(.995);
			// transition: transform .5s, filter .5s;
			// }
	}
	.eGPwrc { /* Sidebar Search & Message */
		flex-direction: column;
		position: relative;
		z-index: 10;
		min-height: unset !important;
		.bsZNZZ { /* back & forth nav */
			position: absolute;
			top: -58px;
			right: -5px;
			height: 45px;
			padding: 5px;
			.fEsvfc {
				justify-content: center;
			}
		}
		
		.jJHEFb { /* SearchBar */
			min-height: unset !important;
			padding: 8px;
			padding-top: 0;
			margin-top: -15px;
			box-sizing: border-box;
			input {
				border-radius: 100px;
				background-color: black;
			}
		}
		.bpGGiY { /* Message */
			padding-top: 4px !important;
		}
	}

	.gwkGRz { /* Content */
		position: absolute;
		right: 0;
		max-height: 100vh;
		width: calc(100% - 200px);
		margin-bottom: -90px;
		font-family: Segoe UI, Helvetica, Arial, sans-serif, Segoe UI Emoji !important;
		background-color: rgba(0,0,0,0.3);
		box-shadow: 0 10px 10px rgba(0,0,0,0.3);
		scrollbar-color: #1bb3a4 transparent;
		overflow: hidden;
		transition: transform .5s, filter .5s;
		
		& > div {
			padding: 40px !important;
			animation-name: inUp;
			animation-duration: .5s;
			overflow-y: scroll !important;
            transition: transform .2s, filter .2s;
			& > *:last-child {
				margin-bottom: 140px;
			}
		}
        & > div::-webkit-scrollbar {
            background-color: transparent; /* or add it to the track */
            width: 10px;
        }
        & > div::-webkit-scrollbar-thumb {
            background-color: #1bb3a4;
        }
        & > div::-webkit-scrollbar-track {
            margin-top: 20px;
            margin-bottom: 100px;
        }
		
		h2 {
			font-weight: 800;
			margin-left: 8px;
		}
		
		.krVRcw > .eZKQvz, .hKEfcy > .eZKQvz { /* Category & album covers */
			padding: 10px;
            margin-top: 5px;
			padding-bottom: 0;
			border-radius: 10px;
			transition: transform .2s, background-color .1s, backdrop-filter .2s;
			.gmOXvo { /* Cover */
				border-radius: 10%;
				overflow: hidden;
				box-shadow: 0 2px 24px rgba(0,0,0,0.4);
				transition: box-shadow .2s, transform .35s, border-radius .2s;
				.gmOXvo, .hFdXsU {
					transition: transform 1s;
					border-radius: 0 !important;
				}
				.dGHUPf, .gzEyns {
					border-radius: 0 !important;
					background: rgba(0,0,0,0.5) !important;
				}
				img {
					border-radius: 0 !important;
				}
				&:hover {
					box-shadow: 0 10px 24px rgba(0,0,0,0.5);
					transform: translateY(-5px);
					.gmOXvo, .hFdXsU {
						transform: scale(1.04);
					}
					& ~ .cxrlrH {
						transform: translatey(-1px);
					}
				}
				&:active {
					box-shadow: 0 8px 24px rgba(0,0,0,0.4) !important;
					transform: translateY(-2px) scale(.99) !important;
					transition: box-shadow .2s, transform .1s, border-radius .1s;
				}
			}
			&:hover, &:focus {
				transform: scale(1.02);
				background-color: rgba(27, 179, 164, .1);
				if blur {
					backdrop-filter: blur(10px);
				}
			}
			&:active {
				transform: scale(1.01) translatey(2px) !important;
			}
			.cxrlrH { /* Details */
				margin: 8px 0px;
				font-weight: 700;
				transition: transform .2s;
			}
			.eOglQK { /* Albom Stats */
				margin: 0 !important;
			}
		}
			
	}
	
	
	
	
	/* PLAYER */
	.eDWzlb {
		background-color: rgba(0, 0, 0, .8);
		if blur {
			backdrop-filter: blur(20px);
		} else {
			background-color: rgba(0,0,0,0.95);
		}
		height: 90px;
		position: relative;
		
		button {
			transition: transform .2s;
			&:hover {
				transform: scale(1.05) translatey(-2px);
			}
			&:active {
				transform: scale(.9);
				transition: transform .05s;
			}
		}
		
		.hBaqrb { /* Timeline duration text */
			position: absolute;
			top: -14px;
			z-index: 3;
			background-color: black;
			border-radius: 100px;
			color: #1bb3a4;
			padding: 2px 8px;
			&:first-child {
				left: 185px;
			}
			&:last-child {
				right: 185px;
			}
		}
		.idtMkh { /* Station Name */
			position: absolute;
			left: 275px;
			height: 100%;
			justify-content: center;
			max-width: calc(50vw - 460px);
			display: flex;
			flex-wrap: wrap;
			flex-direction: column;
			z-index: 3;
			line-height: 0 !important;
			span {
				font-size: 16px;
				line-height: 16px !important;
				text-align: left;
				max-width: 100%;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
		
		.hOOKvw {
			align-content: center !important;
			
			/* Actions */
			.dSKMFY {
				max-width: calc(50vw - 190px);
				overflow-x: auto;
				& > div {
					margin: 0 !important;
					margin-left: 10px !important;
					justify-content: flex-start !important;
				}
			}
			
			/* Timeline */
			.eiGOvh {
				width: 260px;
				padding: 0;
				flex: none !important;
				
				.kfHfcL { /* Buttons */
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					pointer-events: none;
					margin: 0 !important;
					height: 100% !important;
					& > * {
						pointer-events: all;
					}
					
					.rangeslider-vertical { /* Volume Slider */
						box-shadow: 0 0 0 10px rgba(0,0,0,0.8);
						animation-name: fadeInUp;
						animation-duration: .35s;
					}
					
				}
				
				
				.frGwQN {
					position: absolute;
					left: 220px;
					right: 220px;
					bottom: calc(100% - 3px);
					progress {
						border: 0 !important;
						height: 4px;
						transition: margin .1s, height .1s, filter .1s;
						border-radius: 100px;
						overflow: hidden;
						background: black !important;
					}
				}
			}
			
			/* Song Details */
			.fTWdpw {
				justify-content: flex-end;
				height: 100%;
				margin-right: 185px;
				z-index: 3;
				width: calc(50vw - 175px - 200px);
				/* Album Cover */
				.rwQJb {
					order: 2;
					width: 150px;
					height: 150px;
					position: absolute;
					right: 20px;
					bottom: 10px;
					border-radius: 20px;
					overflow: hidden;
					box-shadow: 0 2px 4px black;
					transition: all .2s, width .2s, height .2s, padding .4s, transform .6s, border-radius .2s, box-shadow .2s;
					img {
						box-shadow: 0px 0px 0 #1bb3a4;
					}
					&:hover {
						width: 300px;
						height: 300px;
						padding-right: 15px;
						padding-bottom: 30px;
						transform: scale(1.1) rotate(1deg);
						border-radius: 0;
						box-shadow: 0 2px 4px transparent;
						img {
							box-shadow: 8px 8px 0 #1bb3a4;
						}
					}
				}
				/* Rating Buttons */
				.dVZptc {
					position: absolute;
					left: 0;
					right: 0;
					width: 100%;
					justify-content: center;
					flex-direction: row;
					align-items: center;
					z-index: 1;
					pointer-events: none;
					
					.bTopae {
						pointer-events: all;
					}
					.bTopae:first-child {
						margin: 0;
						margin-left: 140px;
						pointer-events: all;
						margin-bottom: 10px;
						button {
							margin: 0 !important;
						}
					}
					.bTopae:last-child {
						margin: 0;
						margin-right: 140px;
						margin-bottom: 10px;
						order: -1;
						pointer-events: all;
						transform: scalex(-1);
						button {
							margin: 0 !important;
						}
					}
					
				}
				
				/* Song Text */
				.kzpiRD {
					text-align: right;
					flex-wrap: wrap;
					flex-direction: row;
					justify-content: flex-end;
					.oKpSL {
						width: 100%;
					}
					.ZSqOQ {
						margin-left: 4px;
					}
				}
			}
		}
	}
}