Ops Adjustments by JohnHeinlein

/* ==UserStyle==
@name           Ops 3
@namespace      github.com/openstyles/stylus
@version        1.1.0
@description    Attempt to separate style from layout tweaks to improve maintainability and readability.
@author         JDanger
@preprocessor 	less
==/UserStyle== */

// This is incredibly messy and has been patched together over months.
// Godspeed, brave soldier

/* USER EDITABLE VARIABLES */
@base-prime: 	#ff5722; // Primary color. Complement is calculated automatically
//@base-prime: 	green;		// Custom color
@base-dark: 	#121212; // Base color for "dark mode" elements
@base-text: 	#f8f8f8; // Based color for text
@base-shadow: 	#080808; // Base color for shadow
@base-bg:		#f6f6f6; // Base color for background
@base-hi:		#00ff00; // Base color for highlighting

@bg-img: "https://i.imgur.com/QSiWgKX.png";
@popup_padding: 10px;

/* COLOR GENERATION FUNCTION */
.c(@darken: 0, @spin: 0, @alpha:0%){
	c:  fadeout(darken( spin(@base-prime, (@spin + 180)),(@darken * 10) ),@alpha);	// Complementary color to primary
	d:  fadeout(lighten(spin(@base-dark , @spin),		 (@darken * 10) ),@alpha);	// Base for material shades
	t:  fadeout(darken( spin(@base-text , @spin),		 (@darken * 10) ),@alpha);	// Normal, readable font color
	p:  fadeout(darken( spin(@base-prime, @spin),		 (@darken * 10) ),@alpha);	// Primary color
	bg: fadeout(darken( spin(@base-bg,	  @spin),		 (@darken * 10) ), @alpha);
	hi: fadeout(darken( spin(@base-hi,	  @spin),		 (@darken * 10) ), @alpha);
}
@complement: .c(@darken: 2)[c];
@primary: .c()[p];

/* Shadows */
@shadow-color: black;
.shadow(@x:1px, @y:1px, @r:10px, @c:@shadow-color){
	box-shadow: @x @y @r @c;
}
.shadow(inset, @x:1px, @y:1px, @r:10px, @c:@shadow-color){
	box-shadow: inset @x @y @r @c
}
.shadow(lift, @x:1px, @y:1px, @r:10px, @c:@shadow-color){
	position:relative;
	z-index:2;
	box-shadow: @x @y @r @c;
}

/* Mixins */
.p(@layer:0,@shadow:5px,@radius:10px,@alpha:0%){
	background-color: .c(@darken:@layer,@alpha:@alpha)[d];
	color: .c()[t];
	.shadow() !important;
	
	border-radius:@radius;
	border:unset !important;
	filter:unset !important;
}
.button(@layer:2, @hover-color:.c()[c]){
	.p(@layer);
	border:0;
	transition: background-color 0.1s linear;
	&:hover{
		background-color: @hover-color;
		color: .c()[d];
	}
}
.flex-center(@row, @rest...){
	display:flex;
	flex-flow:row;
	align-items:center;
	justify-content:center;
}

/* Animations & preset mixins */
@keyframes load-fade{
	0%{
		opacity:0;
		transform: scale(0.8);
	}
	100%{
		opacity:1;
		transform: scale(1);
	}
}
.load-fade{animation:load-fade 0.25s ease-out;}

@keyframes load-grow{
	0%{max-height:0px;}
	100%{max-height:100%;}
}
.load-grow{animation:load-grow 0.25s ease-out;}

@-moz-document domain("ops.sunnking.com"){
	/* Scrollbar */&{
		html{
			scrollbar-width:thin;
			scrollbar-color: .c(2)[d] .c()[d];
		}
		.dx-scrollable-scrollbar{
			z-index:3;
		}
	}
	/* Background */&{
		.float-container {background-image: none;}	
		body {
			background-image: url(@bg-img) !important;
			background-size: cover;
			background-attachment:fixed;
		}
	}
	/* Common Controls */&{
		input,select,textarea{
			border-radius:5px;	
			border:1px solid #d4d4d4 !important;
			&:focus-visible{
				outline:2px solid .c()[p] !important;
			}
		}
		textarea{
			scrollbar-color: .c()[d] .c(2)[d];
			overflow:auto;
		}
		button{
			transition: all 0.1s linear !important;
		}
		
		// Rollers. Webkit specific (FF)
		input[type="number"]{
			&::-webkit-inner-spin-button{
				
			}
		}
	}
	/* Page Title Zap */&{
		.TitleIconBox{display:none;}
	}
	
	/* Main grid */&{
		.dx-scrollview-content:has(.ip_header){
			display:grid !important;
			grid-template-rows: min-content 1fr min-content;
			grid-template-columns: 1fr;
			grid-template-areas:
				"header"
				"body"
				"footer";

			// Anything that's in the main container, but not a header/footer
			> *:not(.ip_header):not(.content-footer){
				grid-area:body;
				overflow-x:auto; //Required, else header and footer expand with content
			}
			.ip_header{grid-area:header;}
			.content-footer{grid-area:footer}
		}
	}
	/* Header */&{
		.ip_header{
			@header-height: 50px;
			display:flex;
			overflow:hidden;

			background:linear-gradient(90deg,.c()[d],90%, .c()[p]) !important;
			.shadow();
			border-bottom: 2px solid .c()[p];

			align-items:center;
			height:@header-height;

			*{margin:0px !important;}

			/* Drop-downs */&{
				> .form{
					order:1;
					margin-right:auto !important;

					color:.c()[t];
				}
			}
			/* Logo */&{
				center{
					order:3;
					height:50px;
					width:fit-content;
					*{height:50px !important;}
					img{
						filter:drop-shadow(10px 0px 5px .c()[p]) drop-shadow(-1px 0px 2px .c()[p]);
						transition: filter 0.1s linear;
						&:hover{filter:drop-shadow(0px 0px 5px .c()[t]);}
					}

				}
			}
			/* Search */&{
				#div_layout_search{
					margin:0px !important;
					order:2;

					#layout_search{
						box-sizing: border-box;

						border:none;
						transition: filter 0.1s linear;
						&:focus-visible{
							outline:none;
							border:2px solid .c()[p];
							filter:drop-shadow(0px 0px 5px .c()[p]);
						}
					}
				}
			}
		}
	}
	/* Footer */&{
		.content-footer{
			margin:unset;
			background-color:.c(0)[d];
			border-top: 3px solid .c()[p];
			color:.c(2)[t];
			#footer{
				background:transparent !important;
				line-height:100%;
				br{display:none;}
			}
		}
	}
	
	/* Drop-down menus & Input widgets */&{
		#menu,.dx-submenu{
			ul li{
				div{color:.c()[t];}
				.dx-state-hover,.dx-menu-item-expanded{
					background-color:.c[p];
					transition:background-color 0.2s ease-in-out;
				}
			}
		}
		.dx-overlay-wrapper{
			.dx-submenu{
				.shadow(@r:10px);
				.p(2) !important;
				.dx-menu-item{
					
					.dx-icon{color:white !important;}
					&.dx-state-hover{
						background-color:.c(2)[c] !important;
					}
				}
				// Little submenu arrow
				.dx-menu-item-popout::before{color:.c()[t];}
			}
		}
		.dx-context-menu{
			background:transparent !important;
			.dx-menu-item-selected{
				background-color:.c(2)[p];
			}
		}
		
		/* Table drop-downs? */ &{
			.dx-popup-normal{
				.p(1) !important;
				position:absolute;

				overflow:unset !important;
				box-shadow:unset !important;

				.dx-popup-content > .dx-scrollable{
					background:transparent;
					> .dx-scrollable-wrapper .dx-scrollable-container{
						.p(2);
						.dx-scrollable-content{
							.dx-list-item{
								color:.c()[t];
								&[aria-selected="true"]{background-color:.c(2)[p];}
								&.dx-state-hover{background-color:.c(2)[c];}
							}
						}
						.dx-scrollable-scrollbar{}
					}
				}
			}
		}
		
		/* Range picker */ &{
			.dx-datagrid-filter-range-overlay{
				.dx-overlay-content{
					background-color:transparent;
					box-shadow:unset !important;
					.dx-editor-container{
						.dx-datebox{

						}
						.dx-texteditor-container{
							background:transparent;
							border-width:0px;
						}
					}
				}
			}
		}
	}
	/* Pop-ups */&{
		.template_overlay,.product_overlay{
			z-index:10;	
			.template_popup,.product_popup, >*{
				display:flex;
				flex-flow:column;
				justify-content:space-between;
				z-index:10;
				
				padding: 10px;
				.p(1);
				
				h2{
					margin:0px 0px @popup_padding 0px;
				}
				button{
					.button() !important;
				}
				
				#popup_close{
					position:absolute;
					
					width:fit-content !important;
					top: @popup_padding;
					right:@popup_padding;
					
					color:.c()[t];
					text-shadow:unset;
					&:hover{color:red;}
				}
			}
		}
		.dx-popup-wrapper{
			.dx-overlay-content{
				
			}
		}
		#popupMultipleSearch{
			textarea{
				width:100% !important;
			}
		}
	}
	
	/* Datagrid */&{
		.dx-datagrid{
			input{
				color:.c()[t];
			}
		}
	}
	
	/* DARK MODE */&{
		input, select, textarea{
			background-color:.c(@darken:2)[d] !important;
			border-width:0px !important;
			//box-shadow:0px 0px 3px black;
			.shadow(@r:5px);
			color:.c()[t];
		}
	}
	/* Add-ons */&{
		.jd-hidden{
			display: none !important;
			pointer-events: none
		}
		.jd-warning{
			animation:jd-warning 1s linear infinite alternate both;
			
			transition:padding 0.1s linear;
			padding:0px 5px;
			border-width:2px;
			margin-top:2px;
			margin-bottom:2px;
			
			@keyframes jd-warning{
				from{border-color:pink}
				to{border-color:red}
			}
		}
		.jd-loading{
			position:relative;
			
			.jd-load-container{
				position:absolute;
				height:100%;
				width:100%;
				top:0;

				i{
					font-size:25px;
					line-height:$font-size;
					color:.c()[p];
					
					position: absolute;
					margin:0px !important;
					left:calc(50% - ($font-size)/2);
					top: calc(50% - ($font-size)/2);
					
					animation: loading 1s linear both infinite;
					
					@keyframes loading{
						from{transform:rotate(0deg)}
						to{transform:rotate(360deg)}
					}
				}
				.jd-blur{
					position:absolute;
					height:100%;
					width:100%;

					backdrop-filter: blur(10px);
				}
			}
		}
		
		/* Error Highlighting */ &{
			#AssetDetails_Top{
				tr:nth-child(4), tr:nth-child(5){
					border-color:red;
					border-radius:5px;
					transition: padding 0.1s linear, border-width 0.2s linear, margin 0.1s linear;
				}
			} 
		}
		/* Ebay item specifics */ &{
			#jd-ebay-panel{
				display:flex;
				flex-flow:column;
				z-index:1;

				width:500px;
				height:fit-content;
				max-height:500px;

				overflow-y:hidden;
				overflow-x:hidden;
				scrollbar-width:thin; 
				.p(1);
				
				
				
				/* Title */ &{
					.jd-header{
						position:sticky;
						top:0;
						width:500px;
						
						display:grid;
						grid: "title controls" 25px / 1fr min-content;
						
						background-color:.c()[p];
						p{	
							grid-area: title;
							
							margin-bottom:0px;
							padding-left:5px;

							
							font-size:14pt;

							user-select:none;
						}
						#jd-ebay-controls{
							grid-area: controls;
							height:25px;
							padding:0px;
							display:flex;
							flex-flow:row...