Invoke Ai - Rose Pine by Proxychainsz

/* ==UserStyle==
@name           InvokeAI - Rosé Pine
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    Rosé Pine for InvokeAi
@author         Proxychains
@preprocessor   stylus

@var checkbox extras		"Extra CSS" 1

==/UserStyle== */
@-moz-document url-prefix("http://127.0.0.1:9090/") {
	* {	
		--invoke-colors-invokeYellow-500: #c4a7e7 !important; /* Logo Color */
		--invoke-colors-invokeYellow-300: #ea9a97 !important; /* Logo Hover */

		--invoke-colors-base-100: #c5c1e6 !important; /* text */
		--invoke-colors-base-300: #6e6a86 !important; /* text muted */
		--invoke-colors-base-400: #928fad !important; /* Random text & buttons ?? */
		
		--invoke-colors-base-900: #191724 !important; /* Main Base */
		--invoke-colors-base-850: #1f1d2e !important; /* Main Surface */
		--invoke-colors-base-800: #26233a !important; /* Main Overlay */

		--invoke-colors-base-600:  #474459 !important;	/* Muted */
		--invoke-colors-error-400: #eb6f92 !important;	/* Error */
		--invoke-colors-green-200: #9dcfd8 !important;	/* Success */
		
		--invoke-colors-base-700: #21202e !important; /* Dropdown */
		--invoke-colors-base-650: #393552 !important; /* Dropdown Hover */
		--invoke-colors-base-750: #191724 !important; /* Prompt Hover/Select */

		--invoke-colors-invokeBlue-300: #ebbdbc !important; /* Current tab text & Progress bar */
		--invoke-colors-invokeBlue-400: #ea9a97 !important; /* Misc & Progress icon */
		--invoke-colors-invokeBlueAlpha-400: #ea9a977d !important; /* Progress icon border */
		--invoke-colors-invokeBlue-700: #ea9a977d !important; /* "auto" text box border */

		--invoke-colors-invokeBlue-200: #ea9a97 !important;   /* badge 1 */
		--invoke-colors-base-200: #9895b3 !important; 	 	  	/* badge 2 */
		--invoke-colors-invokeYellow-200: #f6c279 !important; /* badge 3 */
		
		--invoke-colors-blue-200: #ebbcba !important;				/* Active text */
		--invoke-colors-blue-400: #ebbcba !important;				/* Active borders (workflow) */
		--invoke-colors-blue-500: #8561b0 !important; 			/* toggle button */
		--invoke-colors-invokeBlue-500: #eb6f92 !important; /* checkmark */
		
		/* Scroll Bar */
		--os-handle-bg: rgba(125, 125, 125, .2);
		--os-handle-bg-hover: var(--invoke-colors-invokeYellow-500);
		--os-handle-bg-active: rgba(125, 125, 125, .2);
	}
	
	/* logo svg */
	img[alt~="invoke-logo"] {
		filter: invert(0%) sepia(13%) saturate(6132%) hue-rotate(222deg) brightness(97%) contrast(129%);
	}
	
	
	if (extras=="1") {
		
		button[aria-label="Add to Front of Queue"] {
			background: var(--invoke-colors-invokeYellow-500);
			&:hover {
				background: var(--invoke-colors-invokeYellow-300)
			}
		}
		button[aria-label="Cancel"]:disabled {
			background: var(--invoke-colors-base-800);
			&:hover {
				background: var(--invoke-colors-base-800) !important;
			}
		}
		button[aria-label="Send To Canvas"][data-checked="true"] {
			background: var(--invoke-colors-green-200);
		}

		/* positive/negative prompt  + prompt template dropdown */
		#prompt, #negativePrompt, .css-1wg91wp {
			background: var(--invoke-colors-base-850);
			border-color: var(--invoke-colors-base-850);	

			&:focus-visible, &:hover {
				background: var(--invoke-colors-base-800);
				border-color: var(--invoke-colors-base-800);	
			}
		}

		#prompt {
			color: var(--invoke-colors-green-200);
			font-size: 0.8rem;
		}
		#negativePrompt {
			color: var(--invoke-colors-error-400);
		}

		/* sliders */
		.chakra-slider__track {
			height: 2px
		}
		.chakra-slider__filled-track {
			background: var(--invoke-colors-invokeYellow-300);
		}
		.chakra-slider__thumb {
			width: 12px;
			height: 12px;
			background: var(--invoke-colors-base-800);
			border-color: var(--invoke-colors-invokeYellow-300);
			border-width: 3px;
		}
	}
	
}