Ops Adjustments by JohnHeinlein

/* ==UserStyle==
@name           Ops 3
@namespace      github.com/openstyles/stylus
@version        1.1.8
@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

/* TODO
- Reorganize based on intended feature, not overall page structure
*/

/* 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;
}

/* Context Hints */
.hint(@text,right){
	.hint(@text);
	&:hover:before{
		left:100%;
		bottom:unset;
		top:50%;
		right:unset;
		margin:0em 0em 0em 0.5em;
		translate:0% -50%;
	}
}
.hint(@text,left){
	.hint(@text);
	&:hover:before{
		left:unset;
		bottom:unset;
		top:50%;
		right:100%;
		margin:0em 0.5em 0em 0em;
		translate: 0% -50%;
	}
}
.hint(@text,bottom){
	.hint(@text);
	&:hover:before{
		left:unset;
		bottom:unset;
		top:100%;
		right:unset;
		margin:0.5em 0em 0em 0em;
		translate: -50%;
	}
}
.hint(@text,top){
	.hint(@text);
	&:hover:before{
		left:50%;
		bottom:100%;
		top:unset;
		right:unset;
		margin:0em 0em 0.5em 0em;
		translate: -50%;
	}
}
.hint(@text){
	&:hover{
		position:relative;
		z-index:999 !important;
		&:before{
			content:@text;
			position:absolute;
			width:fit-content;
			padding:0em 0.5em;

			text-align:center;
			white-space:nowrap;

			.p(0);
			.shadow() !important;
			border:1px solid .c()[p] !important;

			.load-fade();
			pointer-events: none;
		}
	}
}

/* Animations & preset mixins */
@keyframes load-fade{
	0%{
		opacity:0;
		scale:0.8;
	}
	100%{
		opacity:1;
		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"){
	/* Domain-wide */
	
	/* 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{
				
			}
		}
	}
	/* Minor fixes */&{
		.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 */&{
		#layout-drawer-scrollview{padding-top:50px !important;}
		.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];
			overflow:clip; // Text overhang lol
			#footer{
				background:transparent !important;
				line-height:100%;
				height:1.5em;
				padding:5px;
				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{
					.p(3);
					display:flex;
					flex-flow:column;
					gap:5px;
					padding:5px;
					.dx-editor-container{
						.dx-datebox{
							background-color:transparent !important;
							
							&:after,&:before{
								display:none;
							}
						}
						.dx-dropdowneditor-input-wrapper{
							overflow:unset;
						}
						.dx-texteditor-container{
							background:transparent;
							border-width:0px !important;
							outline-width: 0px !important;
							overflow:unset !important;
							.dx-texteditor-input{
								.shadow(inset);
							}
						}
						.dx-dropdowneditor-button{
							margin-right:0px !important;
						}
					}
				}
			}
		}
		
		/* Calendar Picker */ &{
			.dx-datebox-wrapper-calendar{
				> .dx-overlay-content{
					.p(3) !important;
					.shadow() !important;
					.dx-calendar{
						border:2px solid .c()[p];
						border-radius:10px;
						margin: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 i...