Rounded borders and custom colors in chrome extension windows. by osirisgothra

/* ==UserStyle==
@name         Rounded borders and custom colors in chrome extension windows.
@version      20220411.12.30
@namespace    userstyles.world/user/osirisgothra
@description  no promises
@author       osirisgothra
@license      public domain share alike fallback
==/UserStyle== */

@-moz-document url-prefix("chrome-extension") {
/* by Gabriel Sharp <osirisgothra@hotmail.com>
   use --hueamt to set desired color, it must be
   a positive number between 0 and 360 with 'deg'
   appended at the end (for example 150deg)
   Using other numbers or negatives will cause the
   hue decalculation to be inaccurate but won't 
   hurting anything.

   Updated: fixed incorrect color showing in color thumbnailers

Todo: fix other color-dependant controls like color pickers, if you have requests
      you will need to email them to me

*/

:root
{
	/* Important: hue must be set in a variable 
	   otherwise patches on known elements that 
	   need hue reversed so they show correctly
	*/
	--hueamt: 144deg;
	
	filter: saturate(1) hue-rotate(var(--hueamt));
	background: linear-gradient(52deg,#83897526,#00030f);
}
:root button
{
		border-radius: 14px !important;
}

:root input
{
	background: linear-gradient(24deg,#1b0e0e,#131326) !important;
	border-color: #363d5f;
	border-radius: 4px;
}
div
{
	border-color: red !important;
	border-radius: 12px;
}

/*
Fixes on Known Elements

Put any known elements in the list below so
they can be undone if needed

.colorview-swatch::before
Fix: stylus color swatches, display them proper by
     inverting the hue again at the same angle

*/
.colorview-swatch::before,
img,
iframe
{
	filter: hue-rotate(calc(var(--hueamt) * -1));
}
}