Path of Exile Trading Site by ProfessorChill

/* ==UserStyle==
@name         Path of Exile Trading Site
@version      20240615.17.08
@namespace    https://userstyles.world/user/Jvne
@description  For use with https://greasyfork.org/en/scripts/498010-path-of-exile-trading-style-script
@author       Jvne
@license      MIT
==/UserStyle== */

@-moz-document url-prefix("https://www.pathofexile.com/trade/search/") {
/* Variables */
:root {
	--font-size: 1em;
	--line-height: 1.25em;
	--background: #1d1f21;
	--foreground: #c5c8c6;
	--border: #282a2e;
	--online: #b5bd68;
	--offline: #cc6666;
	--away: #f0c674;
	
	/* Account Data Sizing */
	--account-padding: 0.25rem;
	--status-bar-height: calc((var(--line-height) * 2) + (var(--account-padding) * 2) + 13px);
	
	/* Sizing Params (for the odd way of overriding styling) */
	--logo-new-pos: calc((var(--line-height) * 4) + 31px);
	--search-top-pos: calc(var(--status-bar-height) + 29px);
	
	/* Button Positioning */
	--refresh: 0px;
	--copy: 2em;
	--search-by: 4em;
}

.row::after,
#trade .search-bar::after {
	clear: initial;
}

.row::before,
#trade .search-bar::before,
.row::after,
#trade .search-bar::after {
	content: initial;
	display: initial;
}

/* Font reset */
html,
body,
#statusBar,
#statusBar .row1,
#statusBar .row2,
.nav,
.linkBack {
	font-size: var(--font-size);
	line-height: var(--line-height);
}

/* Reset some divs with strict settings */
.FontinSmallCaps,
.nav,
.divinationCard,
.newItemPopup,
.results .row .middle .itemPopupAdditional,
.results #trade .search-bar .middle .itemPopupAdditional,
#trade .results .search-bar .middle .itemPopupAdditional,
.heading1,
.heading3 {
	font-size-adjust: initial;
}

#statusBar,
#statusBar .statusBarCenter,
#statusBar .statusBarRight {
	background: 0;
	background-position: 0;
	height: initial;
	padding: 0;
}

#trade .navigation {
	height: initial;
}

.results .row .left,
.results .row .middle,
.results .row .right {
	float: initial;
	min-height: initial;
	padding-left: initial;
	padding-right: initial;
	position: initial;
}

/* Styling starts here */
#statusBar {
	background-color: var(--background);
}

#statusBar .row1,
#statusBar .row2 {
	border-bottom: 1px solid var(--border);
	padding: var(--account-padding) 0.5em;
}

#statusBar .row2 a {
	color: var(--foreground);
}

#statusBar,
.navigation {
	left: 0;
	position: fixed !important;
	top: 0;
	width: 100%;
}

#statusBar,
.navigation,
.language-select {
	z-index: 10000;
}

.languageSelect {
	right: 0;
	position: fixed !important;
	top: 0;
}

.logo {
	margin: var(--logo-new-pos) 0 0;
}

#trade {
	max-width: initial !important;
	min-height: initial !important;
	padding: 0 10em;
}

.navigation {
	background-color: var(--background);
	top: var(--status-bar-height);
}

.nav.nav-tabs.main li,
.nav.nav-tabs.account li {
	background-color: var(--background);
}

.language-select {
	position: fixed;
	text-align: right;
}

.linkBack {
	padding: 0 0 0 1em;
	top: 0;
}

.nav.nav-tabs {
	border-bottom: 1px solid var(--border);
}

html:not([data-scroll='0']) .search-panel {
	background-color: var(--background);
	left: 0;
	top: var(--search-top-pos);
	position: fixed;
	z-index: 10000;
}

.results .row:not(.row-total) {
	background-color: var(--background);
	border: 1px solid var(--border);
	display: grid;
	grid-template-columns: 20em 1fr 20em;
	margin: 1em 0;
	padding: 0;
	position: initial;
}

.results .row .left,
.results .row .middle,
.results .row .right {
	width: 100%;
	height: 100%;
}

.newItemContainer .icon {
	display: block;
	left: 50%;
	margin: auto;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
}

.newItemContainer .iconContainer {
	height: 100%;
	position: relative;
}

.newItemContainer .verifiedStatus {
	bottom: 0;
	display: block;
	font-size: initial;
	left: 0;
	min-height: initial;
	margin: auto 0 0 0;
	position: absolute;
	width: 100%;
}

.results .row .left .newItemContainer {
	display: block;
	height: 100%;
}

.itemBoxContent {
	font-size: initial;
}

.results .row div .details {
	margin: 0;
	position: relative;
}

.results .row .details .price > span {
	padding: calc(var(--font-size)) 0 0;
}

.results .row .details .status-online,
.results .row .details .status-away,
.results .row .details .status-offline {
	border: 0;
	color: var(--border);
	font-size: var(--font-size);
	line-height: var(--line-height);
	padding: 0;
	position: absolute;
	top: 0;
	width: 100%;
}

.results .row .details .status-online {
	background-color: var(--online);
}

.results .row .details .status-away {
	background-color: var(--away);
}

.results .row .details .status-offline {
	background-color: var(--offline);
}

.results .row .left {
	position: relative;
}

.results .row .refresh {
	left: var(--refresh);
	top: 0;
}

.results .row .copy {
	left: var(--copy);
	top: 0;
}

.results .row .searchBy {
	left: var(--search-by);
	top: 0;
}

.results .row .refresh,
.results .row .copy,
.results .row .searchBy {
	z-index: 10000;
}

.results .row .left .newItemContainer {
	position: relative;
	z-index: 9990;
}
}