html {
min-height: 100%;
}
body.eq2-shell {
--page-bg: #eef1f0;
--surface: rgba(255, 255, 255, 0.94);
--surface-strong: #ffffff;
--surface-muted: #f4f7f5;
--sidebar-bg: rgba(246, 249, 247, 0.96);
--sidebar-link: #34443c;
--workspace-bg: rgba(238, 244, 241, 0.72);
--border: #cbd5d0;
--border-strong: #96a59d;
--text: #17201b;
--text-muted: #53635b;
--accent: #0f766e;
--accent-strong: #0b4f4a;
--accent-warm: #b45309;
--button-bg: var(--accent);
--button-bg-hover: var(--accent-strong);
--button-border: var(--accent-strong);
--button-text: #ffffff;
--success: #15803d;
--danger: #b91c1c;
--focus: #5eead4;
--shadow: 0 14px 45px rgba(18, 28, 23, 0.16);
--legacy-header: #e2ebe7;
--legacy-row-odd: #edf4f1;
--legacy-row-even: #f6f8f7;
--legacy-row-hover: #dbe8e3;
--legacy-alert: #ffe1e1;
--readonly-bg: #e9efec;
--readonly-text: #35443d;
margin: 0;
min-height: 100%;
position: relative;
isolation: isolate;
overflow-x: auto;
background: var(--page-bg);
color: var(--text);
font: 13px Arial, Helvetica, sans-serif;
}
body.eq2-shell.theme-night,
body.eq2-shell[data-appearance="night"] {
--page-bg: #101211;
--surface: rgba(20, 23, 22, 0.95);
--surface-strong: #181c1a;
--surface-muted: #202824;
--sidebar-bg: rgba(18, 22, 20, 0.96);
--sidebar-link: #d9e7e0;
--workspace-bg: rgba(8, 10, 10, 0.6);
--border: #34423c;
--border-strong: #5f746b;
--text: #eef5f1;
--text-muted: #b8c7bf;
--accent: #4fa89b;
--accent-strong: #8fd8cf;
--accent-warm: #fbbf24;
--button-bg: #2f665f;
--button-bg-hover: #3a7b72;
--button-border: #548f86;
--button-text: #f3fffb;
--success: #4ade80;
--danger: #f87171;
--focus: #fbbf24;
--shadow: 0 16px 50px rgba(0, 0, 0, 0.42);
--legacy-header: #26342f;
--legacy-row-odd: #202824;
--legacy-row-even: #171d1b;
--legacy-row-hover: #2f3d37;
--legacy-alert: rgba(248, 113, 113, 0.22);
--readonly-bg: #26302c;
--readonly-text: #d7e4de;
}
@media (prefers-color-scheme: dark) {
body.eq2-shell.theme-system {
--page-bg: #101211;
--surface: rgba(20, 23, 22, 0.95);
--surface-strong: #181c1a;
--surface-muted: #202824;
--sidebar-bg: rgba(18, 22, 20, 0.96);
--sidebar-link: #d9e7e0;
--workspace-bg: rgba(8, 10, 10, 0.6);
--border: #34423c;
--border-strong: #5f746b;
--text: #eef5f1;
--text-muted: #b8c7bf;
--accent: #4fa89b;
--accent-strong: #8fd8cf;
--accent-warm: #fbbf24;
--button-bg: #2f665f;
--button-bg-hover: #3a7b72;
--button-border: #548f86;
--button-text: #f3fffb;
--success: #4ade80;
--danger: #f87171;
--focus: #fbbf24;
--shadow: 0 16px 50px rgba(0, 0, 0, 0.42);
--legacy-header: #26342f;
--legacy-row-odd: #202824;
--legacy-row-even: #171d1b;
--legacy-row-hover: #2f3d37;
--legacy-alert: rgba(248, 113, 113, 0.22);
--readonly-bg: #26302c;
--readonly-text: #d7e4de;
}
}
body.eq2-shell.foil-day {
--surface: rgba(255, 255, 255, 0.965);
--surface-strong: rgba(255, 255, 255, 0.985);
--surface-muted: rgba(246, 249, 247, 0.95);
--workspace-bg: rgba(238, 244, 241, 0.82);
--sidebar-bg: rgba(247, 250, 248, 0.97);
}
body.eq2-shell.theme-night.foil-day,
body.eq2-shell.theme-night.foil-night,
body.eq2-shell[data-appearance="night"].foil-day,
body.eq2-shell[data-appearance="night"].foil-night {
--surface: rgba(20, 23, 22, 0.965);
--surface-strong: rgba(24, 28, 26, 0.985);
--surface-muted: rgba(31, 39, 35, 0.95);
--workspace-bg: rgba(8, 10, 10, 0.74);
--sidebar-bg: rgba(18, 22, 20, 0.97);
}
@media (prefers-color-scheme: dark) {
body.eq2-shell.theme-system.foil-day,
body.eq2-shell.theme-system.foil-night {
--surface: rgba(20, 23, 22, 0.965);
--surface-strong: rgba(24, 28, 26, 0.985);
--surface-muted: rgba(31, 39, 35, 0.95);
--workspace-bg: rgba(8, 10, 10, 0.74);
--sidebar-bg: rgba(18, 22, 20, 0.97);
}
}
body.eq2-shell::before {
content: "";
position: fixed;
inset: 0;
z-index: 0;
background: var(--page-bg);
pointer-events: none;
}
body.eq2-shell.foil-day::before {
background:
linear-gradient(102deg, transparent 0 10%, rgba(255, 255, 255, 0.9) 14%, rgba(0, 229, 255, 0.55) 18%, rgba(33, 255, 156, 0.44) 22%, rgba(255, 226, 87, 0.42) 26%, rgba(255, 84, 214, 0.36) 30%, transparent 38%),
linear-gradient(76deg, transparent 0 44%, rgba(0, 163, 255, 0.36) 49%, rgba(38, 255, 197, 0.32) 53%, rgba(255, 118, 60, 0.3) 58%, transparent 66%),
radial-gradient(ellipse at 24% 18%, rgba(0, 216, 255, 0.36), transparent 28%),
radial-gradient(ellipse at 74% 64%, rgba(255, 68, 203, 0.28), transparent 32%),
repeating-linear-gradient(112deg, rgba(255, 255, 255, 0.22) 0 1px, transparent 1px 5px),
linear-gradient(118deg, #f8fbff, #cbd4da 18%, #ffffff 34%, #b7c0c8 52%, #eef4f8 70%, #c6d0d8 100%);
}
body.eq2-shell.foil-night::before {
background:
linear-gradient(102deg, transparent 0 9%, rgba(255, 255, 255, 0.58) 13%, rgba(0, 234, 255, 0.72) 17%, rgba(28, 255, 143, 0.54) 21%, rgba(255, 213, 52, 0.48) 25%, rgba(255, 39, 183, 0.46) 30%, transparent 39%),
linear-gradient(78deg, transparent 0 42%, rgba(0, 117, 255, 0.34) 47%, rgba(0, 255, 199, 0.4) 52%, rgba(255, 78, 210, 0.38) 58%, rgba(255, 167, 46, 0.25) 63%, transparent 70%),
linear-gradient(168deg, transparent 0 68%, rgba(0, 255, 210, 0.24) 73%, rgba(72, 83, 255, 0.3) 79%, transparent 86%),
radial-gradient(ellipse at 18% 26%, rgba(0, 215, 255, 0.26), transparent 28%),
radial-gradient(ellipse at 84% 56%, rgba(255, 56, 195, 0.22), transparent 34%),
repeating-linear-gradient(112deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 4px),
linear-gradient(118deg, #010203, #030809 18%, #071119 34%, #020304 52%, #0a1513 70%, #010203 100%);
}
body.eq2-shell::after {
content: "";
position: fixed;
inset: -26%;
z-index: 0;
pointer-events: none;
opacity: 0;
transform: perspective(900px) rotateX(12deg) rotateZ(-8deg) translate3d(-8%, -4%, 0);
transform-origin: 50% 50%;
background-size: 190% 190%, 170% 170%, 240% 240%, 28px 28px;
mix-blend-mode: screen;
}
body.eq2-shell.foil-day::after,
body.eq2-shell.foil-night::after {
animation: eq2FoilSweep 9s ease-in-out infinite alternate;
}
body.eq2-shell.foil-day::after {
opacity: 0.9;
background:
linear-gradient(101deg, transparent 0 28%, rgba(255, 255, 255, 0.9) 35%, rgba(0, 238, 255, 0.58) 40%, rgba(37, 255, 143, 0.48) 44%, rgba(255, 217, 70, 0.43) 48%, rgba(255, 60, 190, 0.38) 53%, transparent 64%),
radial-gradient(ellipse at 40% 42%, rgba(255, 255, 255, 0.48), transparent 18%),
linear-gradient(73deg, transparent, rgba(75, 145, 255, 0.24) 40%, rgba(255, 70, 215, 0.22) 54%, transparent 72%),
repeating-linear-gradient(112deg, rgba(255, 255, 255, 0.22) 0 1px, transparent 1px 6px);
}
body.eq2-shell.foil-night::after {
opacity: 1;
background:
linear-gradient(101deg, transparent 0 27%, rgba(255, 255, 255, 0.72) 34%, rgba(0, 239, 255, 0.72) 39%, rgba(20, 255, 126, 0.55) 43%, rgba(255, 214, 45, 0.48) 48%, rgba(255, 39, 183, 0.52) 53%, transparent 65%),
radial-gradient(ellipse at 41% 42%, rgba(255, 255, 255, 0.3), transparent 18%),
linear-gradient(73deg, transparent, rgba(48, 104, 255, 0.32) 40%, rgba(255, 55, 207, 0.3) 54%, transparent 72%),
repeating-linear-gradient(112deg, rgba(255, 255, 255, 0.12) 0 1px, transparent 1px 6px);
}
body.eq2-shell.foil-day::before {
background:
conic-gradient(from 34deg at 19% 18%, rgba(255, 255, 255, 0.95), rgba(0, 214, 255, 0.38), rgba(255, 255, 255, 0.22), rgba(255, 182, 58, 0.3), rgba(255, 255, 255, 0.9)),
conic-gradient(from 228deg at 68% 42%, rgba(255, 255, 255, 0.3), rgba(19, 255, 196, 0.42), rgba(255, 83, 209, 0.32), rgba(255, 255, 255, 0.18), rgba(109, 146, 255, 0.3)),
linear-gradient(103deg, transparent 0 18%, rgba(255, 255, 255, 0.74) 23%, rgba(0, 234, 255, 0.4) 28%, rgba(33, 255, 156, 0.32) 34%, rgba(255, 226, 87, 0.3) 41%, rgba(255, 84, 214, 0.26) 48%, transparent 61%),
repeating-linear-gradient(112deg, rgba(255, 255, 255, 0.24) 0 1px, rgba(130, 145, 155, 0.08) 1px 2px, transparent 2px 7px),
linear-gradient(118deg, #f9fbff, #cfd7dc 18%, #ffffff 34%, #b9c4cb 52%, #eef4f8 70%, #c7d1d8 100%);
}
body.eq2-shell.foil-night::before {
background:
conic-gradient(from 32deg at 20% 20%, rgba(255, 255, 255, 0.24), rgba(0, 234, 255, 0.48), rgba(0, 0, 0, 0.12), rgba(255, 175, 47, 0.26), rgba(5, 7, 8, 0.7)),
conic-gradient(from 232deg at 72% 47%, rgba(9, 12, 14, 0.92), rgba(0, 255, 197, 0.32), rgba(255, 58, 196, 0.3), rgba(255, 255, 255, 0.12), rgba(29, 46, 95, 0.46)),
linear-gradient(102deg, transparent 0 20%, rgba(255, 255, 255, 0.38) 25%, rgba(0, 234, 255, 0.62) 31%, rgba(28, 255, 143, 0.44) 37%, rgba(255, 213, 52, 0.36) 43%, rgba(255, 39, 183, 0.38) 51%, transparent 63%),
repeating-linear-gradient(112deg, rgba(255, 255, 255, 0.08) 0 1px, rgba(0, 255, 210, 0.04) 1px 2px, transparent 2px 7px),
linear-gradient(118deg, #010203, #05090a 18%, #071019 34%, #020304 52%, #0a1513 70%, #010203 100%);
}
body.eq2-shell.foil-day::after,
body.eq2-shell.foil-night::after {
animation-duration: 14s;
background-size: 230% 230%, 160% 160%, 210% 210%, 36px 36px;
}
body.eq2-shell.foil-day::after {
opacity: 0.58;
background:
linear-gradient(101deg, transparent 0 30%, rgba(255, 255, 255, 0.92) 37%, rgba(0, 238, 255, 0.5) 42%, rgba(37, 255, 143, 0.36) 46%, rgba(255, 217, 70, 0.34) 51%, rgba(255, 60, 190, 0.3) 56%, transparent 68%),
radial-gradient(ellipse at 40% 42%, rgba(255, 255, 255, 0.42), transparent 18%),
linear-gradient(73deg, transparent, rgba(75, 145, 255, 0.2) 40%, rgba(255, 70, 215, 0.18) 54%, transparent 72%),
repeating-linear-gradient(112deg, rgba(255, 255, 255, 0.18) 0 1px, transparent 1px 7px);
}
body.eq2-shell.foil-night::after {
opacity: 0.76;
background:
linear-gradient(101deg, transparent 0 29%, rgba(255, 255, 255, 0.62) 36%, rgba(0, 239, 255, 0.7) 41%, rgba(20, 255, 126, 0.5) 45%, rgba(255, 214, 45, 0.42) 50%, rgba(255, 39, 183, 0.5) 56%, transparent 69%),
radial-gradient(ellipse at 41% 42%, rgba(255, 255, 255, 0.24), transparent 18%),
linear-gradient(73deg, transparent, rgba(48, 104, 255, 0.28) 40%, rgba(255, 55, 207, 0.26) 54%, transparent 72%),
repeating-linear-gradient(112deg, rgba(255, 255, 255, 0.1) 0 1px, transparent 1px 7px);
}
@keyframes eq2FoilSweep {
0% {
background-position: 0% 42%, 12% 30%, 0 0, 0% 45%;
transform: perspective(900px) rotateX(14deg) rotateY(-7deg) rotateZ(-9deg) translate3d(-10%, -5%, 0) scale(1.08);
filter: saturate(1.1) brightness(1);
}
50% {
background-position: 68% 48%, 54% 62%, 18px 10px, 54% 48%;
transform: perspective(900px) rotateX(9deg) rotateY(6deg) rotateZ(-5deg) translate3d(2%, 1%, 0) scale(1.12);
filter: saturate(1.45) brightness(1.14);
}
100% {
background-position: 100% 54%, 92% 44%, 36px 20px, 100% 58%;
transform: perspective(900px) rotateX(16deg) rotateY(9deg) rotateZ(-12deg) translate3d(9%, -2%, 0) scale(1.09);
filter: saturate(1.22) brightness(1.04);
}
}
body.eq2-shell a:link,
body.eq2-shell a:visited {
color: var(--accent);
}
body.eq2-shell a:hover {
color: var(--accent-warm);
}
body.eq2-shell #site-container {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 244px minmax(0, 1fr);
grid-template-rows: auto 1fr;
width: min(100%, 1760px);
min-width: 0;
min-height: calc(100vh + 180px);
margin: 0 auto;
border: 0;
background: var(--workspace-bg);
box-shadow: var(--shadow);
}
body.eq2-shell.foil-day #site-container,
body.eq2-shell.foil-night #site-container {
background: var(--workspace-bg);
backdrop-filter: blur(0.7px) saturate(1.08);
}
body.eq2-shell.theme-night.foil-day #site-container,
body.eq2-shell.theme-night.foil-night #site-container,
body.eq2-shell[data-appearance="night"].foil-day #site-container,
body.eq2-shell[data-appearance="night"].foil-night #site-container {
background: var(--workspace-bg);
}
@media (prefers-color-scheme: dark) {
body.eq2-shell.theme-system.foil-day #site-container,
body.eq2-shell.theme-system.foil-night #site-container {
background: var(--workspace-bg);
}
}
body.eq2-shell #site-banner {
position: relative;
grid-column: 1;
grid-row: 1;
min-height: 0;
height: auto;
padding: 76px 14px 14px;
border-right: 1px solid var(--border);
border-bottom: 1px solid var(--border);
background:
url(../images/eq2.png) 14px 13px / 56px auto no-repeat,
linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.48)),
var(--sidebar-bg);
color: var(--text);
}
.shell-brand-block {
display: grid;
gap: 2px;
min-width: 0;
}
body.eq2-shell #site-banner .site-brand,
.shell-brand-version {
position: relative;
z-index: 1;
font-weight: bold;
line-height: 1.2;
}
.shell-brand-version {
color: var(--accent-strong);
font-size: 12px;
text-transform: uppercase;
}
.shell-brand-subtitle,
.shell-meta-label {
color: var(--text-muted);
font-size: 11px;
font-weight: 800;
letter-spacing: 0;
text-transform: uppercase;
}
body.eq2-shell.theme-night #site-banner,
body.eq2-shell[data-appearance="night"] #site-banner {
background:
url(../images/eq2.png) 14px 13px / 56px auto no-repeat,
linear-gradient(180deg, rgba(27, 33, 30, 0.9), rgba(18, 23, 21, 0.76)),
var(--sidebar-bg);
}
body.eq2-shell #user-info,
body.eq2-shell #db-picker {
position: static;
color: var(--text-muted);
}
body.eq2-shell #user-info {
max-width: none;
line-height: 1.35;
}
.shell-banner-tools {
display: grid;
gap: 10px;
margin-top: 14px;
}
.shell-user-card,
.shell-world-card {
border: 1px solid var(--border);
border-radius: 8px;
background: var(--surface);
padding: 9px;
}
body.eq2-shell #user-info a {
display: inline-flex;
margin-top: 5px;
color: var(--accent);
font-weight: 800;
}
body.eq2-shell #user-info a.shell-settings-link {
margin-top: 7px;
color: var(--button-text);
text-decoration: none;
}
body.eq2-shell #user-info a.shell-settings-link:hover {
color: var(--button-text);
}
body.eq2-shell #user-info .shell-flag {
display: inline-block;
margin-left: 6px;
font-weight: bold;
}
body.eq2-shell #db-picker .world-picker {
display: grid;
gap: 5px;
margin: 0;
}
body.eq2-shell #db-picker label {
color: var(--text-muted);
font-weight: bold;
}
body.eq2-shell #db-picker select {
width: 100%;
min-width: 0;
padding: 3px 6px;
}
body.eq2-shell #top-menu {
position: static;
grid-column: 1;
grid-row: 2;
align-self: start;
max-height: none;
overflow: visible;
background: var(--sidebar-bg);
border-right: 1px solid var(--border);
border-bottom: 0;
}
body.eq2-shell #top-menu .top-menu-list {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 3px;
min-width: 0;
padding: 10px;
}
body.eq2-shell #top-menu table {
min-width: 0;
}
body.eq2-shell #top-menu td {
width: auto;
min-width: 76px;
padding: 0;
background: transparent;
}
body.eq2-shell #top-menu td a {
display: block;
padding: 9px 11px;
color: var(--text-muted);
text-align: center;
}
body.eq2-shell #top-menu .top-menu-link {
display: flex;
align-items: center;
flex: 0 0 auto;
min-width: 0;
min-height: 32px;
border: 1px solid transparent;
border-radius: 7px;
padding: 0 10px;
color: var(--sidebar-link);
text-align: left;
text-decoration: none;
box-sizing: border-box;
font-weight: 800;
}
body.eq2-shell #top-menu .top-menu-logout {
margin-top: 8px;
border-top-color: var(--border);
color: var(--danger);
}
body.eq2-shell #top-menu td.tabOn a {
background: var(--accent);
color: #ffffff;
}
body.eq2-shell #top-menu .top-menu-link.tabOn {
border-color: var(--accent);
background:
linear-gradient(90deg, var(--accent), var(--accent-strong));
color: #ffffff;
box-shadow: 0 8px 18px rgba(15, 118, 110, 0.22);
}
body.eq2-shell #top-menu td.tabOff a:hover {
background: rgba(15, 118, 110, 0.12);
color: var(--text);
}
body.eq2-shell #top-menu .top-menu-link.tabOff:hover {
border-color: var(--border);
background: rgba(15, 118, 110, 0.12);
color: var(--text);
}
body.eq2-shell #login-box {
display: flex;
grid-column: 2;
grid-row: 1 / span 2;
align-items: flex-start;
justify-content: center;
min-height: 420px;
height: auto;
padding: 72px 16px;
box-sizing: border-box;
}
body.eq2-shell #login-box .shell-login-form {
width: min(360px, 100%);
margin: 0;
}
body.eq2-shell #login-box table.shell-login-panel {
width: 100%;
border: 1px solid var(--border);
border-radius: 8px;
border-spacing: 0;
overflow: hidden;
background: var(--surface-strong);
box-shadow: var(--shadow);
color: var(--text);
}
body.eq2-shell #login-box td {
padding: 9px 12px;
color: var(--text);
}
body.eq2-shell #login-box td.title {
border-bottom: 1px solid var(--border);
background: var(--legacy-header);
color: var(--text);
font-size: 15px;
letter-spacing: 0;
}
body.eq2-shell #login-box td.label {
width: 34%;
color: var(--text-muted);
font-weight: bold;
white-space: nowrap;
}
body.eq2-shell #login-box input.text {
width: 100%;
box-sizing: border-box;
border: 1px solid var(--border-strong);
border-radius: 6px;
background: var(--surface-muted);
color: var(--text);
padding: 7px 8px;
font-size: 13px;
}
body.eq2-shell #login-box input.text:focus {
border-color: var(--focus);
outline: 2px solid rgba(94, 234, 212, 0.22);
outline-offset: 1px;
}
body.eq2-shell #login-box input.submit {
width: auto;
min-width: 96px;
height: auto;
}
body.eq2-shell #login-box .login-status {
padding: 0;
}
body.eq2-shell #login-box .login-status table {
width: 100%;
margin: 0;
border: 0;
border-radius: 0;
box-shadow: none;
background: var(--legacy-alert);
}
body.eq2-shell #main-body {
position: relative;
grid-column: 2;
grid-row: 1 / span 2;
min-width: 0;
padding: 18px;
overflow: auto;
}
body.eq2-shell .shell-footer-spacer {
clear: both;
display: block;
width: 100%;
height: 180px;
min-height: 180px;
pointer-events: none;
}
body.eq2-shell.density-compact .shell-footer-spacer {
height: 144px;
min-height: 144px;
}
body.eq2-shell.nav-topbar #site-container {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto auto 1fr;
}
body.eq2-shell.nav-topbar #site-banner {
grid-column: 1;
grid-row: 1;
display: grid;
grid-template-columns: minmax(220px, 1fr) minmax(320px, auto);
gap: 14px;
align-items: center;
min-height: 0;
border-right: 0;
padding: 14px 16px 14px 84px;
background:
url(../images/eq2.png) 14px center / 56px auto no-repeat,
linear-gradient(90deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.56)),
var(--sidebar-bg);
}
body.eq2-shell.theme-night.nav-topbar #site-banner,
body.eq2-shell[data-appearance="night"].nav-topbar #site-banner {
background:
url(../images/eq2.png) 14px center / 56px auto no-repeat,
linear-gradient(90deg, rgba(27, 33, 30, 0.92), rgba(18, 23, 21, 0.78)),
var(--sidebar-bg);
}
body.eq2-shell.nav-topbar .shell-banner-tools {
grid-template-columns: minmax(150px, max-content) minmax(220px, 320px);
align-items: stretch;
margin-top: 0;
}
body.eq2-shell.nav-topbar .shell-user-card,
body.eq2-shell.nav-topbar .shell-world-card {
padding: 7px 9px;
}
body.eq2-shell.nav-topbar #top-menu {
grid-column: 1;
grid-row: 2;
position: static;
max-height: none;
overflow-x: auto;
overflow-y: hidden;
border-right: 0;
border-bottom: 1px solid var(--border);
}
body.eq2-shell.nav-topbar #top-menu .top-menu-list {
flex-direction: row;
min-width: max-content;
padding: 8px;
}
body.eq2-shell.nav-topbar #top-menu .top-menu-link {
min-width: 84px;
justify-content: center;
text-align: center;
}
body.eq2-shell.nav-topbar #top-menu .top-menu-logout {
margin-top: 0;
margin-left: auto;
border-top-color: transparent;
}
body.eq2-shell.nav-topbar #main-body,
body.eq2-shell.nav-topbar #login-box {
grid-column: 1;
grid-row: 3;
}
body.eq2-shell.foil-day #main-body,
body.eq2-shell.foil-night #main-body {
background:
linear-gradient(115deg, rgba(255, 255, 255, 0.08), transparent 24%, rgba(94, 234, 212, 0.08) 42%, rgba(255, 120, 220, 0.07) 58%, transparent 78%),
repeating-linear-gradient(101deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 10px);
}
body.eq2-shell #main-body .news-list {
margin: 0 auto;
color: var(--text);
}
body.eq2-shell #main-body .news-list > tbody > tr > td {
color: var(--text);
font-weight: bold;
}
body.eq2-shell #main-body .news-day {
margin: 10px 0 16px;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--surface);
color: var(--text);
}
body.eq2-shell #main-body .news-day legend {
padding: 0 8px;
color: var(--text-muted);
font-weight: bold;
}
body.eq2-shell #main-body .news-entry {
border-collapse: separate;
border-spacing: 0;
color: var(--text);
}
body.eq2-shell #main-body .news-card {
border: 1px solid var(--border);
border-radius: 8px;
background: var(--surface-strong) !important;
color: var(--text);
padding: 10px 12px;
font-weight: normal;
}
body.eq2-shell #main-body .news-card h2 {
margin: 0 0 8px;
color: var(--text);
font-size: 18px;
}
body.eq2-shell #main-body .news-card hr {
border: 0;
border-top: 1px solid var(--border);
margin: 10px 0;
}
body.eq2-shell #main-body tr[bgcolor="#cccccc" i],
body.eq2-shell #main-body tr[bgcolor="#dddddd" i],
body.eq2-shell #main-body tr[bgcolor="#eeeeee" i],
body.eq2-shell #main-body tr[bgcolor="#abc" i],
body.eq2-shell #main-body tr[bgcolor="#789" i],
body.eq2-shell #main-body tr[bgcolor="#c1d9e3" i],
body.eq2-shell #main-body td[bgcolor="#cccccc" i],
body.eq2-shell #main-body td[bgcolor="#dddddd" i],
body.eq2-shell #main-body td[bgcolor="#eeeeee" i],
body.eq2-shell #main-body td[bgcolor="#abc" i],
body.eq2-shell #main-body td[bgcolor="#789" i],
body.eq2-shell #main-body td[bgcolor="#c1d9e3" i],
body.eq2-shell #main-body td[bgcolor="#e0e0e0" i] {
background: var(--surface-muted) !important;
color: var(--text);
}
body.eq2-shell.theme-night #main-body tr[bgcolor="#cccccc" i],
body.eq2-shell.theme-night #main-body tr[bgcolor="#dddddd" i],
body.eq2-shell.theme-night #main-body tr[bgcolor="#eeeeee" i],
body.eq2-shell.theme-night #main-body tr[bgcolor="#abc" i],
body.eq2-shell.theme-night #main-body tr[bgcolor="#789" i],
body.eq2-shell.theme-night #main-body tr[bgcolor="#c1d9e3" i],
body.eq2-shell.theme-night #main-body tr[bgcolor="#eedfb8" i],
body.eq2-shell.theme-night #main-body tr[bgcolor="#d7c499" i],
body.eq2-shell.theme-night #main-body td[bgcolor="#cccccc" i],
body.eq2-shell.theme-night #main-body td[bgcolor="#dddddd" i],
body.eq2-shell.theme-night #main-body td[bgcolor="#eeeeee" i],
body.eq2-shell.theme-night #main-body td[bgcolor="#abc" i],
body.eq2-shell.theme-night #main-body td[bgcolor="#789" i],
body.eq2-shell.theme-night #main-body td[bgcolor="#c1d9e3" i],
body.eq2-shell.theme-night #main-body td[bgcolor="#eedfb8" i],
body.eq2-shell.theme-night #main-body td[bgcolor="#d7c499" i],
body.eq2-shell.theme-night #main-body td[bgcolor="#e0e0e0" i],
body.eq2-shell[data-appearance="night"] #main-body tr[bgcolor="#cccccc" i],
body.eq2-shell[data-appearance="night"] #main-body tr[bgcolor="#dddddd" i],
body.eq2-shell[data-appearance="night"] #main-body tr[bgcolor="#eeeeee" i],
body.eq2-shell[data-appearance="night"] #main-body tr[bgcolor="#abc" i],
body.eq2-shell[data-appearance="night"] #main-body tr[bgcolor="#789" i],
body.eq2-shell[data-appearance="night"] #main-body tr[bgcolor="#c1d9e3" i],
body.eq2-shell[data-appearance="night"] #main-body tr[bgcolor="#eedfb8" i],
body.eq2-shell[data-appearance="night"] #main-body tr[bgcolor="#d7c499" i],
body.eq2-shell[data-appearance="night"] #main-body td[bgcolor="#cccccc" i],
body.eq2-shell[data-appearance="night"] #main-body td[bgcolor="#dddddd" i],
body.eq2-shell[data-appearance="night"] #main-body td[bgcolor="#eeeeee" i],
body.eq2-shell[data-appearance="night"] #main-body td[bgcolor="#abc" i],
body.eq2-shell[data-appearance="night"] #main-body td[bgcolor="#789" i],
body.eq2-shell[data-appearance="night"] #main-body td[bgcolor="#c1d9e3" i],
body.eq2-shell[data-appearance="night"] #main-body td[bgcolor="#eedfb8" i],
body.eq2-shell[data-appearance="night"] #main-body td[bgcolor="#d7c499" i],
body.eq2-shell[data-appearance="night"] #main-body td[bgcolor="#e0e0e0" i] {
background: var(--legacy-row-even) !important;
color: var(--text);
}
body.eq2-shell.theme-night #main-body tr[bgcolor="#f99" i],
body.eq2-shell.theme-night #main-body td[bgcolor="#f99" i],
body.eq2-shell[data-appearance="night"] #main-body tr[bgcolor="#f99" i],
body.eq2-shell[data-appearance="night"] #main-body td[bgcolor="#f99" i] {
background: var(--legacy-alert) !important;
color: var(--text);
}
@media (prefers-color-scheme: dark) {
body.eq2-shell.theme-system #main-body tr[bgcolor="#cccccc" i],
body.eq2-shell.theme-system #main-body tr[bgcolor="#dddddd" i],
body.eq2-shell.theme-system #main-body tr[bgcolor="#eeeeee" i],
body.eq2-shell.theme-system #main-body tr[bgcolor="#abc" i],
body.eq2-shell.theme-system #main-body tr[bgcolor="#789" i],
body.eq2-shell.theme-system #main-body tr[bgcolor="#c1d9e3" i],
body.eq2-shell.theme-system #main-body tr[bgcolor="#eedfb8" i],
body.eq2-shell.theme-system #main-body tr[bgcolor="#d7c499" i],
body.eq2-shell.theme-system #main-body td[bgcolor="#cccccc" i],
body.eq2-shell.theme-system #main-body td[bgcolor="#dddddd" i],
body.eq2-shell.theme-system #main-body td[bgcolor="#eeeeee" i],
body.eq2-shell.theme-system #main-body td[bgcolor="#abc" i],
body.eq2-shell.theme-system #main-body td[bgcolor="#789" i],
body.eq2-shell.theme-system #main-body td[bgcolor="#c1d9e3" i],
body.eq2-shell.theme-system #main-body td[bgcolor="#eedfb8" i],
body.eq2-shell.theme-system #main-body td[bgcolor="#d7c499" i],
body.eq2-shell.theme-system #main-body td[bgcolor="#e0e0e0" i] {
background: var(--legacy-row-even) !important;
color: var(--text);
}
body.eq2-shell.theme-system #main-body tr[bgcolor="#f99" i],
body.eq2-shell.theme-system #main-body td[bgcolor="#f99" i] {
background: var(--legacy-alert) !important;
color: var(--text);
}
}
body.eq2-shell #main-body .suggest_shadow {
position: absolute;
z-index: 20000;
min-width: 280px;
max-width: min(520px, calc(100vw - 32px));
border: 1px solid var(--border-strong);
border-radius: 7px;
background: var(--surface-strong);
color: var(--text);
box-shadow: 0 18px 45px rgba(0, 0, 0, 0.28);
overflow: hidden;
}
body.eq2-shell #main-body .suggest_link,
body.eq2-shell #main-body .suggest_link_over {
background: var(--surface-strong);
color: var(--text);
padding: 6px 9px;
line-height: 1.25;
}
body.eq2-shell #main-body .suggest_link {
border-bottom: 1px solid var(--border);
}
body.eq2-shell #main-body .suggest_link_over {
background: var(--accent);
color: #ffffff;
cursor: pointer;
}
body.eq2-shell input[type="text"],
body.eq2-shell input[type="password"],
body.eq2-shell input[type="number"],
body.eq2-shell select,
body.eq2-shell textarea {
max-width: 100%;
border: 1px solid var(--border-strong);
border-radius: 6px;
background: var(--surface-strong);
color: var(--text);
padding: 6px 8px;
}
body.eq2-shell input:focus,
body.eq2-shell select:focus,
body.eq2-shell textarea:focus {
outline: 2px solid var(--focus);
outline-offset: 1px;
background: var(--surface-strong);
}
body.eq2-shell #main-body input:focus,
body.eq2-shell #main-body select:focus,
body.eq2-shell #main-body textarea:focus {
background: var(--surface-strong);
}
body.eq2-shell.theme-night #main-body input:not([type="submit"]):not([type="button"]):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
body.eq2-shell.theme-night #main-body select,
body.eq2-shell.theme-night #main-body textarea,
body.eq2-shell[data-appearance="night"] #main-body input:not([type="submit"]):not([type="button"]):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
body.eq2-shell[data-appearance="night"] #main-body select,
body.eq2-shell[data-appearance="night"] #main-body textarea {
background: #121817 !important;
border-color: var(--border-strong) !important;
color: var(--text) !important;
caret-color: var(--text);
color-scheme: dark;
}
body.eq2-shell.theme-night #main-body input:not([type="submit"]):not([type="button"]):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):focus,
body.eq2-shell.theme-night #main-body select:focus,
body.eq2-shell.theme-night #main-body textarea:focus,
body.eq2-shell[data-appearance="night"] #main-body input:not([type="submit"]):not([type="button"]):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):focus,
body.eq2-shell[data-appearance="night"] #main-body select:focus,
body.eq2-shell[data-appearance="night"] #main-body textarea:focus {
background: #0b1211 !important;
border-color: var(--focus) !important;
color: #ffffff !important;
}
body.eq2-shell.theme-night #main-body input[readonly],
body.eq2-shell.theme-night #main-body textarea[readonly],
body.eq2-shell[data-appearance="night"] #main-body input[readonly],
body.eq2-shell[data-appearance="night"] #main-body textarea[readonly] {
border-color: #7c8f86 !important;
background:
repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.045) 0 6px, transparent 6px 12px),
#26302c !important;
color: #d7e4de !important;
box-shadow: inset 3px 0 0 var(--accent-warm);
cursor: default;
}
body.eq2-shell.theme-night #main-body option,
body.eq2-shell[data-appearance="night"] #main-body option {
background: #121817;
color: var(--text);
}
body.eq2-shell.theme-night #main-body input::placeholder,
body.eq2-shell.theme-night #main-body textarea::placeholder,
body.eq2-shell[data-appearance="night"] #main-body input::placeholder,
body.eq2-shell[data-appearance="night"] #main-body textarea::placeholder {
color: #8ea39a;
}
body.eq2-shell.theme-night #main-body input[type="checkbox"],
body.eq2-shell[data-appearance="night"] #main-body input[type="checkbox"] {
accent-color: #ffffff;
}
body.eq2-shell.theme-night #main-body .blue_checkbox,
body.eq2-shell[data-appearance="night"] #main-body .blue_checkbox {
outline-color: #ffffff;
}
body.eq2-shell.theme-night #main-body .blue_checkbox .checkmark,
body.eq2-shell[data-appearance="night"] #main-body .blue_checkbox .checkmark {
background: #ffffff;
}
body.eq2-shell.theme-night #main-body .blue_checkbox:hover input ~ .checkmark,
body.eq2-shell[data-appearance="night"] #main-body .blue_checkbox:hover input ~ .checkmark {
background: #e6fff9;
}
body.eq2-shell.theme-night #main-body .blue_checkbox input:checked ~ .checkmark,
body.eq2-shell[data-appearance="night"] #main-body .blue_checkbox input:checked ~ .checkmark {
background: #ffffff;
}
body.eq2-shell.theme-night #main-body .blue_checkbox .checkmark:after,
body.eq2-shell[data-appearance="night"] #main-body .blue_checkbox .checkmark:after {
border-color: #0b1211;
}
@media (prefers-color-scheme: dark) {
body.eq2-shell.theme-system #main-body input:not([type="submit"]):not([type="button"]):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
body.eq2-shell.theme-system #main-body select,
body.eq2-shell.theme-system #main-body textarea {
background: #121817 !important;
border-color: var(--border-strong) !important;
color: var(--text) !important;
caret-color: var(--text);
color-scheme: dark;
}
body.eq2-shell.theme-system #main-body input:not([type="submit"]):not([type="button"]):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):focus,
body.eq2-shell.theme-system #main-body select:focus,
body.eq2-shell.theme-system #main-body textarea:focus {
background: #0b1211 !important;
border-color: var(--focus) !important;
color: #ffffff !important;
}
body.eq2-shell.theme-system #main-body input[readonly],
body.eq2-shell.theme-system #main-body textarea[readonly] {
border-color: #7c8f86 !important;
background:
repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.045) 0 6px, transparent 6px 12px),
#26302c !important;
color: #d7e4de !important;
box-shadow: inset 3px 0 0 var(--accent-warm);
cursor: default;
}
body.eq2-shell.theme-system #main-body option {
background: #121817;
color: var(--text);
}
body.eq2-shell.theme-system #main-body input::placeholder,
body.eq2-shell.theme-system #main-body textarea::placeholder {
color: #8ea39a;
}
body.eq2-shell.theme-system #main-body input[type="checkbox"] {
accent-color: #ffffff;
}
body.eq2-shell.theme-system #main-body .blue_checkbox {
outline-color: #ffffff;
}
body.eq2-shell.theme-system #main-body .blue_checkbox .checkmark,
body.eq2-shell.theme-system #main-body .blue_checkbox input:checked ~ .checkmark {
background: #ffffff;
}
body.eq2-shell.theme-system #main-body .blue_checkbox:hover input ~ .checkmark {
background: #e6fff9;
}
body.eq2-shell.theme-system #main-body .blue_checkbox .checkmark:after {
border-color: #0b1211;
}
}
body.eq2-shell #main-body input.submit,
body.eq2-shell #main-body input.submit-wide,
body.eq2-shell #main-body .submit-template,
body.eq2-shell button {
width: auto;
min-width: 86px;
border: 1px solid var(--button-border);
border-radius: 6px;
background: var(--button-bg);
color: var(--button-text);
padding: 7px 12px;
font-weight: bold;
cursor: pointer;
}
body.eq2-shell #main-body input.submit:hover,
body.eq2-shell #main-body input.submit-wide:hover,
body.eq2-shell #main-body .submit-template:hover,
body.eq2-shell button:hover {
background: var(--button-bg-hover);
}
body.eq2-shell .script-editor-shell {
display: grid;
gap: 12px;
max-width: 100%;
min-width: 0;
color: var(--text);
}
body.eq2-shell .script-editor-status:empty {
display: none;
}
body.eq2-shell .script-editor-status table {
margin: 0;
}
body.eq2-shell .script-editor-header {
margin: 0;
padding: 12px 14px;
}
body.eq2-shell .eq2-kicker {
margin: 0 0 4px;
color: var(--accent-strong);
font-size: 11px;
font-weight: 900;
letter-spacing: 0;
text-transform: uppercase;
}
body.eq2-shell .script-editor-header h2 {
margin: 0;
line-height: 1.2;
}
body.eq2-shell .script-editor-path {
margin: 5px 0 0;
color: var(--text-muted);
font-family: Consolas, "Courier New", monospace;
font-size: 12px;
font-weight: 700;
overflow-wrap: anywhere;
}
body.eq2-shell .script-editor-state {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 28px;
padding: 0 10px;
border: 1px solid var(--border);
border-radius: 999px;
background: var(--surface-muted);
color: var(--text-muted);
font-size: 12px;
font-weight: 900;
white-space: nowrap;
}
body.eq2-shell .script-editor-workspace {
display: grid;
grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
gap: 12px;
align-items: stretch;
min-width: 0;
}
body.eq2-shell .script-editor-shell .script-template-pane,
body.eq2-shell .script-editor-shell .script-editor-form {
display: grid;
grid-template-rows: auto minmax(0, 1fr) auto;
min-width: 0;
overflow: hidden;
background: var(--surface-strong);
}
body.eq2-shell .script-editor-panel-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
min-width: 0;
padding: 10px 12px;
border-bottom: 1px solid var(--border);
background: var(--surface-muted);
}
body.eq2-shell .script-editor-panel-header h3 {
margin: 0;
color: var(--text);
font-size: 14px;
letter-spacing: 0;
}
body.eq2-shell .script-editor-shell #ScriptToolbar {
min-width: 0;
color: var(--text);
}
body.eq2-shell .script-editor-shell #ScriptToolbar:empty {
display: none;
}
body.eq2-shell .script-editor-shell #ScriptToolbar[data-signature-active="1"] {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
max-width: min(760px, 52vw);
padding: 4px 6px;
border: 1px solid #94a3b8;
border-radius: 6px;
background: #ffffff;
color: #111827;
font-size: 12px;
line-height: 1.35;
overflow: hidden;
}
body.eq2-shell .script-signature-label,
body.eq2-shell .script-signature-count,
.script-signature-label,
.script-signature-count {
flex: 0 0 auto;
color: #374151 !important;
font-weight: 700;
}
body.eq2-shell .script-signature-label,
.script-signature-label {
padding: 1px 6px;
border: 1px solid #374151;
border-radius: 4px;
background: #17201b;
color: #ffffff !important;
}
body.eq2-shell .script-signature-code,
.script-signature-code {
min-width: 0;
color: #111827 !important;
font-family: Consolas, "Courier New", monospace;
font-size: 12px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
body.eq2-shell .script-signature-param,
body.eq2-shell .script-signature-comma,
.script-signature-param,
.script-signature-comma {
color: #111827 !important;
}
body.eq2-shell .script-signature-param.is-active,
.script-signature-param.is-active {
margin: 0 -2px;
padding: 1px 3px;
border-radius: 3px;
background: #fff7cc !important;
color: #111827 !important;
font-weight: 800;
}
body.eq2-shell .ace_editor.ace_autocomplete,
body .ace_editor.ace_autocomplete {
border: 1px solid #64748b !important;
background: #ffffff !important;
color: #111827 !important;
box-shadow: 0 12px 28px rgba(15, 23, 42, 0.24) !important;
}
body.eq2-shell .ace_editor.ace_autocomplete .ace_marker-layer .ace_active-line,
body .ace_editor.ace_autocomplete .ace_marker-layer .ace_active-line {
background: #e5e7eb !important;
}
body.eq2-shell .ace_editor.ace_autocomplete .ace_line-hover,
body .ace_editor.ace_autocomplete .ace_line-hover {
background: #f3f4f6 !important;
border-color: #94a3b8 !important;
}
body.eq2-shell .ace_editor.ace_autocomplete .ace_line,
body .ace_editor.ace_autocomplete .ace_line {
color: #111827 !important;
}
body.eq2-shell .ace_editor.ace_autocomplete .ace_completion-highlight,
body.eq2-shell .ace_editor.ace_autocomplete .ace_rightAlignedText,
body .ace_editor.ace_autocomplete .ace_completion-highlight,
body .ace_editor.ace_autocomplete .ace_rightAlignedText {
color: #111827 !important;
font-weight: 700;
text-shadow: none !important;
z-index: 1 !important;
}
body.eq2-shell .ace_doc-tooltip,
body .ace_doc-tooltip {
max-width: min(420px, 80vw) !important;
padding: 10px 12px !important;
border: 1px solid #64748b !important;
border-radius: 6px !important;
background: #ffffff !important;
background-image: none !important;
color: #111827 !important;
box-shadow: 0 12px 28px rgba(15, 23, 42, 0.24) !important;
font: 12px/1.45 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
white-space: normal !important;
}
body.eq2-shell .ace_doc-tooltip .script-function-doc,
body .ace_doc-tooltip .script-function-doc {
color: #111827 !important;
}
body.eq2-shell .ace_doc-tooltip .script-function-doc strong,
body .ace_doc-tooltip .script-function-doc strong {
display: block;
margin-bottom: 6px;
color: #111827 !important;
font-family: Consolas, "Courier New", monospace;
font-size: 12px;
}
body.eq2-shell .ace_doc-tooltip .script-function-kind,
body .ace_doc-tooltip .script-function-kind {
display: inline-block;
margin: 0 0 6px;
padding: 2px 6px;
border-radius: 4px;
background: #17201b !important;
color: #ffffff !important;
font-weight: 800;
}
body.eq2-shell .ace_doc-tooltip .script-function-return,
body.eq2-shell .ace_doc-tooltip .script-function-empty,
body .ace_doc-tooltip .script-function-return,
body .ace_doc-tooltip .script-function-empty {
margin-bottom: 6px;
color: #374151 !important;
}
body.eq2-shell .ace_doc-tooltip .script-function-doc ul,
body .ace_doc-tooltip .script-function-doc ul {
margin: 6px 0 0 18px;
padding: 0;
}
body.eq2-shell .ace_doc-tooltip .script-function-doc li,
body .ace_doc-tooltip .script-function-doc li {
margin: 2px 0;
color: #111827 !important;
}
body.eq2-shell .ace_doc-tooltip .script-function-doc code,
body .ace_doc-tooltip .script-function-doc code {
padding: 1px 4px;
border-radius: 3px;
background: #f3f4f6 !important;
color: #111827 !important;
font-family: Consolas, "Courier New", monospace;
}
body.eq2-shell .ace_doc-tooltip .script-function-doc span,
body .ace_doc-tooltip .script-function-doc span {
color: #374151 !important;
}
body.eq2-shell .script-template-scroll {
max-height: clamp(360px, 58vh, 720px);
overflow: auto;
padding: 10px;
background: var(--surface);
}
body.eq2-shell .script-template-table {
width: 100%;
min-width: 0;
border-collapse: separate;
border-spacing: 0;
}
body.eq2-shell .script-template-table th,
body.eq2-shell .script-template-table td {
padding: 6px 5px;
text-align: center;
vertical-align: middle;
}
body.eq2-shell .script-template-table th {
color: var(--text);
font-size: 12px;
}
body.eq2-shell .script-template-table td:first-child,
body.eq2-shell .script-template-table th:first-child {
width: 42px;
color: var(--text-muted);
font-size: 11px;
}
body.eq2-shell .script-template-table .submit-template {
width: 100%;
min-width: 0;
min-height: 28px;
padding: 5px 7px;
font-size: 12px;
white-space: normal;
}
body.eq2-shell .script-editor-canvas {
min-width: 0;
height: clamp(420px, 58vh, 720px);
padding: 10px;
background: var(--surface);
}
body.eq2-shell .script-editor-shell #scripteditor {
width: 100%;
height: 100%;
min-height: 100%;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--surface-strong);
color: var(--text);
}
body.eq2-shell #main-body .script-editor-shell textarea.ace_text-input:not(.ace_composition),
body.eq2-shell #main-body .script-editor-shell textarea.ace_text-input:not(.ace_composition):focus,
body.eq2-shell .script-editor-shell textarea.ace_text-input:not(.ace_composition),
body.eq2-shell .script-editor-shell textarea.ace_text-input:not(.ace_composition):focus {
position: absolute;
z-index: 0;
width: 0.5em;
max-width: none;
height: 1em;
margin: 0 -1px;
padding: 0 1px;
border: 0;
outline: 0;
background: transparent;
box-shadow: none;
opacity: 0;
resize: none;
overflow: hidden;
text-indent: -1em;
white-space: pre !important;
}
body.eq2-shell .script-editor-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
padding: 10px 12px;
border-top: 1px solid var(--border);
background: var(--surface-muted);
}
body.eq2-shell.density-compact .script-editor-header {
padding: 9px 11px;
}
body.eq2-shell.density-compact .script-editor-panel-header,
body.eq2-shell.density-compact .script-editor-actions {
padding: 7px 9px;
}
body.eq2-shell.density-compact .script-editor-canvas {
height: clamp(380px, 60vh, 680px);
padding: 8px;
}
body.eq2-shell.density-compact .script-template-scroll {
max-height: clamp(320px, 58vh, 680px);
padding: 8px;
}
body.eq2-shell.theme-day .script-editor-shell .ace_editor,
body.eq2-shell[data-appearance="day"] .script-editor-shell .ace_editor {
background: #ffffff !important;
color: #111827 !important;
}
body.eq2-shell.theme-day .script-editor-shell .ace_gutter,
body.eq2-shell[data-appearance="day"] .script-editor-shell .ace_gutter {
background: #f3f4f6 !important;
color: #4b5563 !important;
}
body.eq2-shell.theme-day .script-editor-shell .ace_scroller,
body.eq2-shell.theme-day .script-editor-shell .ace_content,
body.eq2-shell[data-appearance="day"] .script-editor-shell .ace_scroller,
body.eq2-shell[data-appearance="day"] .script-editor-shell .ace_content {
background: #ffffff !important;
}
body.eq2-shell.theme-day .script-editor-shell .ace_text-layer,
body.eq2-shell.theme-day .script-editor-shell .ace_line,
body.eq2-shell[data-appearance="day"] .script-editor-shell .ace_text-layer,
body.eq2-shell[data-appearance="day"] .script-editor-shell .ace_line {
color: #111827 !important;
}
body.eq2-shell.theme-day .script-editor-shell .ace_keyword,
body.eq2-shell.theme-day .script-editor-shell .ace_storage,
body.eq2-shell.theme-day .script-editor-shell .ace_meta,
body.eq2-shell[data-appearance="day"] .script-editor-shell .ace_keyword,
body.eq2-shell[data-appearance="day"] .script-editor-shell .ace_storage,
body.eq2-shell[data-appearance="day"] .script-editor-shell .ace_meta {
color: #1d4ed8 !important;
}
body.eq2-shell.theme-day .script-editor-shell .ace_entity.ace_name.ace_function,
body.eq2-shell.theme-day .script-editor-shell .ace_support.ace_function,
body.eq2-shell.theme-day .script-editor-shell .ace_variable,
body.eq2-shell[data-appearance="day"] .script-editor-shell .ace_entity.ace_name.ace_function,
body.eq2-shell[data-appearance="day"] .script-editor-shell .ace_support.ace_function,
body.eq2-shell[data-appearance="day"] .script-editor-shell .ace_variable {
color: #065f46 !important;
}
body.eq2-shell.theme-day .script-editor-shell .ace_variable.ace_parameter,
body.eq2-shell[data-appearance="day"] .script-editor-shell .ace_variable.ace_parameter {
color: #92400e !important;
}
body.eq2-shell.theme-day .script-editor-shell .ace_string,
body.eq2-shell[data-appearance="day"] .script-editor-shell .ace_string {
color: #047857 !important;
}
body.eq2-shell.theme-day .script-editor-shell .ace_constant,
body.eq2-shell[data-appearance="day"] .script-editor-shell .ace_constant {
color: #7c2d12 !important;
}
body.eq2-shell.theme-day .script-editor-shell .ace_comment,
body.eq2-shell[data-appearance="day"] .script-editor-shell .ace_comment {
color: #64748b !important;
}
body.eq2-shell.theme-night .script-editor-shell .ace_editor,
body.eq2-shell[data-appearance="night"] .script-editor-shell .ace_editor {
background: #141817 !important;
color: #e5e7eb !important;
}
body.eq2-shell.theme-night .script-editor-shell .ace_gutter,
body.eq2-shell[data-appearance="night"] .script-editor-shell .ace_gutter {
background: #101413 !important;
color: #a7b5ad !important;
}
body.eq2-shell.theme-night .script-editor-shell .ace_scroller,
body.eq2-shell.theme-night .script-editor-shell .ace_content,
body.eq2-shell[data-appearance="night"] .script-editor-shell .ace_scroller,
body.eq2-shell[data-appearance="night"] .script-editor-shell .ace_content {
background: #141817 !important;
}
body.eq2-shell.theme-night .script-editor-shell .ace_text-layer,
body.eq2-shell.theme-night .script-editor-shell .ace_line,
body.eq2-shell[data-appearance="night"] .script-editor-shell .ace_text-layer,
body.eq2-shell[data-appearance="night"] .script-editor-shell .ace_line {
color: #e5e7eb !important;
}
@media (prefers-color-scheme: dark) {
body.eq2-shell.theme-system .script-editor-shell .ace_editor {
background: #141817 !important;
color: #e5e7eb !important;
}
body.eq2-shell.theme-system .script-editor-shell .ace_gutter {
background: #101413 !important;
color: #a7b5ad !important;
}
body.eq2-shell.theme-system .script-editor-shell .ace_scroller,
body.eq2-shell.theme-system .script-editor-shell .ace_content {
background: #141817 !important;
}
body.eq2-shell.theme-system .script-editor-shell .ace_text-layer,
body.eq2-shell.theme-system .script-editor-shell .ace_line {
color: #e5e7eb !important;
}
}
body.eq2-shell .warning {
color: var(--danger);
}
body.eq2-shell #main-body table.SubPanel,
body.eq2-shell #main-body table.SectionMain,
body.eq2-shell #main-body table.SectionMainFloat,
body.eq2-shell #main-body table.SectionToggles,
body.eq2-shell #main-body table.SectionMenuLeft,
body.eq2-shell #main-body table.ContrastTable,
body.eq2-shell #main-body table.RecipeDataTable,
body.eq2-shell #Editor table.SubPanel,
body.eq2-shell #Editor table.SectionMain,
body.eq2-shell #Editor table.SectionMainFloat,
body.eq2-shell #Editor table.SectionToggles,
body.eq2-shell #Editor table.SectionMenuLeft {
background: var(--surface-strong) !important;
border-color: var(--border) !important;
color: var(--text) !important;
}
body.eq2-shell #main-body .SubPanel,
body.eq2-shell #main-body .SectionMain,
body.eq2-shell #main-body .SectionMainFloat,
body.eq2-shell #main-body .SectionToggles,
body.eq2-shell #main-body .SectionMenuLeft,
body.eq2-shell #main-body .ContrastTable,
body.eq2-shell #main-body .RecipeDataTable,
body.eq2-shell #main-body .filter_labels,
body.eq2-shell #main-body .RecipeDataTable td,
body.eq2-shell #main-body .RecipeDataTable th,
body.eq2-shell #Editor,
body.eq2-shell #Editor table,
body.eq2-shell #Editor th,
body.eq2-shell #Editor td {
color: var(--text);
}
body.eq2-shell #main-body tr.Row1,
body.eq2-shell #Editor tr.Row1 {
background: var(--legacy-row-odd) !important;
color: var(--text);
}
body.eq2-shell #main-body tr.Row2,
body.eq2-shell #Editor tr.Row2 {
background: var(--legacy-row-even) !important;
color: var(--text);
}
body.eq2-shell #main-body .ContrastTable tr:nth-child(odd) {
background: var(--legacy-row-odd) !important;
color: var(--text);
}
body.eq2-shell #main-body .ContrastTable tr:nth-child(even) {
background: var(--legacy-row-even) !important;
color: var(--text);
}
body.eq2-shell #main-body .ContrastTable tr:hover,
body.eq2-shell #main-body .RecipeDataTable .RecipeDataRow:hover {
background: var(--legacy-row-hover) !important;
color: var(--text);
}
body.eq2-shell #Editor li.active-menu-list {
border-radius: 4px;
background: var(--legacy-row-hover);
color: var(--text);
}
body.eq2-shell #Editor li.active-menu-list a,
body.eq2-shell #Editor li.active-menu-list a:link,
body.eq2-shell #Editor li.active-menu-list a:visited {
color: var(--accent-strong);
font-weight: 700;
}
body.eq2-shell #main-body td.Title,
body.eq2-shell #main-body td.SectionTitle,
body.eq2-shell #main-body th.Title,
body.eq2-shell #main-body th.SectionTitle,
body.eq2-shell #main-body .ContrastTable th,
body.eq2-shell #Editor td.Title,
body.eq2-shell #Editor td.SectionTitle,
body.eq2-shell #EditorTable th,
body.eq2-shell .EditorTable th {
background: var(--legacy-header) !important;
color: var(--text) !important;
border-color: var(--border) !important;
}
body.eq2-shell #main-body td.SectionBody,
body.eq2-shell #main-body td.Detail,
body.eq2-shell #main-body td.Label,
body.eq2-shell #main-body td.ReadOnlyDetail,
body.eq2-shell #main-body td.ReadOnlyAlert,
body.eq2-shell #Editor td.Detail,
body.eq2-shell #Editor td.Label,
body.eq2-shell #Editor td.ReadOnlyDetail,
body.eq2-shell #Editor td.ReadOnlyAlert {
color: var(--text) !important;
}
body.eq2-shell #main-body td.ReadOnlyDetail,
body.eq2-shell #Editor td.ReadOnlyDetail {
background: var(--legacy-row-even) !important;
}
body.eq2-shell #main-body td.ReadOnlyAlert,
body.eq2-shell #Editor td.ReadOnlyAlert {
background: var(--legacy-alert) !important;
}
body.eq2-shell.theme-night #main-body #itemHighlightedRow td,
body.eq2-shell[data-appearance="night"] #main-body #itemHighlightedRow td {
background: var(--legacy-row-even) !important;
color: var(--text) !important;
}
@media (prefers-color-scheme: dark) {
body.eq2-shell.theme-system #main-body #itemHighlightedRow td {
background: var(--legacy-row-even) !important;
color: var(--text) !important;
}
}
body.eq2-shell #main-body .RecipeDataTable {
border-color: var(--border) !important;
border-collapse: collapse;
}
body.eq2-shell #main-body .RecipeDataRow {
background: var(--legacy-row-even) !important;
color: var(--text);
}
body.eq2-shell #main-body .RecipeDataRow[incomplete] {
background: var(--legacy-alert) !important;
color: var(--text);
}
body.eq2-shell #main-body .RecipeProductRow {
border-color: var(--border-strong) !important;
}
body.eq2-shell #site-container *,
body.eq2-shell #main-body *,
body.eq2-shell #Editor * {
box-sizing: border-box;
}
body.eq2-shell #site-container form,
body.eq2-shell #site-container table,
body.eq2-shell #site-container fieldset,
body.eq2-shell #main-body form,
body.eq2-shell #main-body table,
body.eq2-shell #main-body fieldset,
body.eq2-shell #Editor form,
body.eq2-shell #Editor table,
body.eq2-shell #Editor fieldset {
max-width: 100%;
}
body.eq2-shell #site-container fieldset,
body.eq2-shell #main-body fieldset,
body.eq2-shell #Editor fieldset {
min-width: 0;
border-color: var(--border);
border-radius: 8px;
background: color-mix(in srgb, var(--surface) 82%, transparent);
color: var(--text);
}
body.eq2-shell #site-container legend,
body.eq2-shell #main-body legend,
body.eq2-shell #Editor legend {
padding: 0 6px;
color: var(--text-muted);
font-weight: 800;
letter-spacing: 0;
}
body.eq2-shell #site-container th,
body.eq2-shell #site-container td,
body.eq2-shell #main-body th,
body.eq2-shell #main-body td,
body.eq2-shell #Editor th,
body.eq2-shell #Editor td {
vertical-align: top;
}
body.eq2-shell #site-container table.SubPanel > tbody > tr > td,
body.eq2-shell #site-container table.SectionMain > tbody > tr > td,
body.eq2-shell #site-container table.SectionMainFloat > tbody > tr > td,
body.eq2-shell #site-container table.SectionToggles > tbody > tr > td,
body.eq2-shell #site-container table.SectionMenuLeft > tbody > tr > td,
body.eq2-shell #site-container table.ContrastTable th,
body.eq2-shell #site-container table.ContrastTable td,
body.eq2-shell #main-body table.SubPanel > tbody > tr > td,
body.eq2-shell #main-body table.SectionMain > tbody > tr > td,
body.eq2-shell #main-body table.SectionMainFloat > tbody > tr > td,
body.eq2-shell #main-body table.SectionToggles > tbody > tr > td,
body.eq2-shell #main-body table.SectionMenuLeft > tbody > tr > td,
body.eq2-shell #main-body table.ContrastTable th,
body.eq2-shell #main-body table.ContrastTable td,
body.eq2-shell #Editor table.SubPanel > tbody > tr > td,
body.eq2-shell #Editor table.SectionMain > tbody > tr > td,
body.eq2-shell #Editor table.SectionMainFloat > tbody > tr > td,
body.eq2-shell #Editor table.SectionToggles > tbody > tr > td,
body.eq2-shell #Editor table.SectionMenuLeft > tbody > tr > td {
padding: 5px 7px;
}
body.eq2-shell #site-container .eq2-table-scroll,
body.eq2-shell #site-container .server-table-scroll,
body.eq2-shell #site-container .items-effects-scroll,
body.eq2-shell #site-container .items-stats-scroll,
body.eq2-shell #site-container .items-appearances-scroll,
body.eq2-shell #site-container .items-classifications-scroll,
body.eq2-shell #site-container .items-mod-strings-scroll,
body.eq2-shell #site-container .items-recipe-items-scroll,
body.eq2-shell #site-container .spawns-data-table,
body.eq2-shell #main-body .eq2-table-scroll,
body.eq2-shell #main-body .server-table-scroll,
body.eq2-shell #main-body .items-effects-scroll,
body.eq2-shell #main-body .items-stats-scroll,
body.eq2-shell #main-body .items-appearances-scroll,
body.eq2-shell #main-body .items-classifications-scroll,
body.eq2-shell #main-body .items-mod-strings-scroll,
body.eq2-shell #main-body .items-recipe-items-scroll,
body.eq2-shell #main-body .spawns-data-table {
max-width: 100%;
overflow-x: auto;
}
body.eq2-shell.theme-night #main-body [style*="background-color:#ddd" i],
body.eq2-shell.theme-night #main-body [style*="background-color: #ddd" i],
body.eq2-shell.theme-night #main-body [style*="background:#ddd" i],
body.eq2-shell.theme-night #main-body [style*="background: #ddd" i],
body.eq2-shell.theme-night #main-body [style*="background-color:#ccc" i],
body.eq2-shell.theme-night #main-body [style*="background-color: #ccc" i],
body.eq2-shell.theme-night #main-body [style*="background:#ccc" i],
body.eq2-shell.theme-night #main-body [style*="background: #ccc" i],
body.eq2-shell.theme-night #main-body [style*="background:#eee" i],
body.eq2-shell.theme-night #main-body [style*="background: #eee" i],
body.eq2-shell.theme-night #main-body [style*="background-color:#eee" i],
body.eq2-shell.theme-night #main-body [style*="background-color: #eee" i],
body.eq2-shell.theme-night #main-body [style*="background-color:#fff" i],
body.eq2-shell.theme-night #main-body [style*="background-color: #fff" i],
body.eq2-shell.theme-night #main-body [style*="background:#fff" i],
body.eq2-shell.theme-night #main-body [style*="background: #fff" i],
body.eq2-shell.theme-night #main-body [style*="background-color:white" i],
body.eq2-shell.theme-night #main-body [style*="background-color: white" i],
body.eq2-shell.theme-night #main-body [style*="background:white" i],
body.eq2-shell.theme-night #main-body [style*="background: white" i],
body.eq2-shell.theme-night #main-body [style*="background-color:#abc" i],
body.eq2-shell.theme-night #main-body [style*="background-color: #abc" i],
body.eq2-shell[data-appearance="night"] #main-body [style*="background-color:#ddd" i],
body.eq2-shell[data-appearance="night"] #main-body [style*="background-color: #ddd" i],
body.eq2-shell[data-appearance="night"] #main-body [style*="background:#ddd" i],
body.eq2-shell[data-appearance="night"] #main-body [style*="background: #ddd" i],
body.eq2-shell[data-appearance="night"] #main-body [style*="background-color:#ccc" i],
body.eq2-shell[data-appearance="night"] #main-body [style*="background-color: #ccc" i],
body.eq2-shell[data-appearance="night"] #main-body [style*="background:#ccc" i],
body.eq2-shell[data-appearance="night"] #main-body [style*="background: #ccc" i],
body.eq2-shell[data-appearance="night"] #main-body [style*="background:#eee" i],
body.eq2-shell[data-appearance="night"] #main-body [style*="background: #eee" i],
body.eq2-shell[data-appearance="night"] #main-body [style*="background-color:#eee" i],
body.eq2-shell[data-appearance="night"] #main-body [style*="background-color: #eee" i],
body.eq2-shell[data-appearance="night"] #main-body [style*="background-color:#fff" i],
body.eq2-shell[data-appearance="night"] #main-body [style*="background-color: #fff" i],
body.eq2-shell[data-appearance="night"] #main-body [style*="background:#fff" i],
body.eq2-shell[data-appearance="night"] #main-body [style*="background: #fff" i],
body.eq2-shell[data-appearance="night"] #main-body [style*="background-color:white" i],
body.eq2-shell[data-appearance="night"] #main-body [style*="background-color: white" i],
body.eq2-shell[data-appearance="night"] #main-body [style*="background:white" i],
body.eq2-shell[data-appearance="night"] #main-body [style*="background: white" i],
body.eq2-shell[data-appearance="night"] #main-body [style*="background-color:#abc" i],
body.eq2-shell[data-appearance="night"] #main-body [style*="background-color: #abc" i] {
background: var(--legacy-row-even) !important;
color: var(--text) !important;
}
@media (prefers-color-scheme: dark) {
body.eq2-shell.theme-system #main-body [style*="background-color:#ddd" i],
body.eq2-shell.theme-system #main-body [style*="background-color: #ddd" i],
body.eq2-shell.theme-system #main-body [style*="background:#ddd" i],
body.eq2-shell.theme-system #main-body [style*="background: #ddd" i],
body.eq2-shell.theme-system #main-body [style*="background-color:#ccc" i],
body.eq2-shell.theme-system #main-body [style*="background-color: #ccc" i],
body.eq2-shell.theme-system #main-body [style*="background:#ccc" i],
body.eq2-shell.theme-system #main-body [style*="background: #ccc" i],
body.eq2-shell.theme-system #main-body [style*="background:#eee" i],
body.eq2-shell.theme-system #main-body [style*="background: #eee" i],
body.eq2-shell.theme-system #main-body [style*="background-color:#eee" i],
body.eq2-shell.theme-system #main-body [style*="background-color: #eee" i],
body.eq2-shell.theme-system #main-body [style*="background-color:#fff" i],
body.eq2-shell.theme-system #main-body [style*="background-color: #fff" i],
body.eq2-shell.theme-system #main-body [style*="background:#fff" i],
body.eq2-shell.theme-system #main-body [style*="background: #fff" i],
body.eq2-shell.theme-system #main-body [style*="background-color:white" i],
body.eq2-shell.theme-system #main-body [style*="background-color: white" i],
body.eq2-shell.theme-system #main-body [style*="background:white" i],
body.eq2-shell.theme-system #main-body [style*="background: white" i],
body.eq2-shell.theme-system #main-body [style*="background-color:#abc" i],
body.eq2-shell.theme-system #main-body [style*="background-color: #abc" i] {
background: var(--legacy-row-even) !important;
color: var(--text) !important;
}
}
body.eq2-shell.theme-night #site-container [disabled],
body.eq2-shell.theme-night #main-body [disabled],
body.eq2-shell[data-appearance="night"] #site-container [disabled],
body.eq2-shell[data-appearance="night"] #main-body [disabled] {
opacity: 1;
border-color: #55665f !important;
background: #1f2824 !important;
color: #9dad9f !important;
cursor: not-allowed;
}
body.eq2-shell.theme-night #site-container select optgroup,
body.eq2-shell.theme-night #site-container select option,
body.eq2-shell.theme-night #main-body select optgroup,
body.eq2-shell.theme-night #main-body select option,
body.eq2-shell[data-appearance="night"] #site-container select optgroup,
body.eq2-shell[data-appearance="night"] #site-container select option,
body.eq2-shell[data-appearance="night"] #main-body select optgroup,
body.eq2-shell[data-appearance="night"] #main-body select option {
background: #121817;
color: var(--text);
}
body.eq2-shell.theme-night #site-container input[type="checkbox"],
body.eq2-shell.theme-night #site-container input[type="radio"],
body.eq2-shell.theme-night #main-body input[type="checkbox"],
body.eq2-shell.theme-night #main-body input[type="radio"],
body.eq2-shell[data-appearance="night"] #site-container input[type="checkbox"],
body.eq2-shell[data-appearance="night"] #site-container input[type="radio"],
body.eq2-shell[data-appearance="night"] #main-body input[type="checkbox"],
body.eq2-shell[data-appearance="night"] #main-body input[type="radio"] {
accent-color: #ffffff;
color-scheme: light;
filter: brightness(1.08);
}
@media (prefers-color-scheme: dark) {
body.eq2-shell.theme-system #site-container [disabled],
body.eq2-shell.theme-system #main-body [disabled] {
opacity: 1;
border-color: #55665f !important;
background: #1f2824 !important;
color: #9dad9f !important;
cursor: not-allowed;
}
body.eq2-shell.theme-system #site-container select optgroup,
body.eq2-shell.theme-system #site-container select option,
body.eq2-shell.theme-system #main-body select optgroup,
body.eq2-shell.theme-system #main-body select option {
background: #121817;
color: var(--text);
}
body.eq2-shell.theme-system #site-container input[type="checkbox"],
body.eq2-shell.theme-system #site-container input[type="radio"],
body.eq2-shell.theme-system #main-body input[type="checkbox"],
body.eq2-shell.theme-system #main-body input[type="radio"] {
accent-color: #ffffff;
color-scheme: light;
filter: brightness(1.08);
}
}
body.eq2-shell.density-compact #main-body {
padding: 8px;
}
body.eq2-shell.density-compact #top-menu td a {
padding: 6px 9px;
}
body.eq2-shell.density-compact #top-menu .top-menu-link {
padding: 6px 9px;
}
body.eq2-shell.density-compact #Editor td.SectionBody,
body.eq2-shell.density-compact #Editor td.Detail,
body.eq2-shell.density-compact #Editor td.Label {
padding: 2px 4px;
}
body.eq2-shell.density-compact #main-body fieldset {
padding: 7px 9px;
}
body.eq2-shell.density-compact #main-body legend {
padding: 0 4px;
}
body.eq2-shell.density-compact #main-body input[type="text"],
body.eq2-shell.density-compact #main-body input[type="password"],
body.eq2-shell.density-compact #main-body input[type="number"],
body.eq2-shell.density-compact #main-body select,
body.eq2-shell.density-compact #main-body textarea {
min-height: 24px;
border-radius: 4px;
padding: 3px 5px;
font-size: 12px;
line-height: 1.25;
}
body.eq2-shell.density-compact #main-body button,
body.eq2-shell.density-compact #main-body input[type="button"],
body.eq2-shell.density-compact #main-body input[type="submit"],
body.eq2-shell.density-compact #main-body .button-like {
min-height: 24px;
border-radius: 4px;
padding: 3px 8px;
font-size: 12px;
line-height: 1.25;
}
body.eq2-shell.density-compact #main-body table {
border-spacing: 0;
}
body.eq2-shell.density-compact #main-body th,
body.eq2-shell.density-compact #main-body td {
padding: 3px 5px;
}
body.eq2-shell.density-compact #main-body :is(
.settings-header,
.items-search-header,
.items-detail-header,
.server-panel-header,
.server-recipes-header,
.server-recipe-detail-header,
.guilds-header,
.guilds-detail-header,
.guilds-section-header,
.quests-header,
.quests-detail-header,
.quests-section-header,
.zones-header,
.zones-detail-header,
.zones-section-header,
.characters-header,
.characters-detail-header,
.characters-section-heading,
.spawns-header,
.spawns-modern-detail-header
) {
margin-bottom: 8px;
gap: 8px;
}
body.eq2-shell.density-compact #main-body :is(
.settings-header h1,
.items-search-header h1,
.items-detail-header h1,
.server-recipes-header h1,
.guilds-header h1,
.quests-header h1,
.zones-header h1,
.characters-header h1,
.characters-detail-header h1,
.spawns-header h1
) {
font-size: 20px;
line-height: 1.15;
}
body.eq2-shell.density-compact #main-body :is(
.settings-panel,
.items-search-panel,
.items-create-panel,
.items-effects-layout fieldset,
.items-appearances-layout fieldset,
.items-classifications-layout fieldset,
.items-book-layout fieldset,
.items-house-layout fieldset,
.items-house-container-layout fieldset,
.items-detail-record-layout fieldset,
.items-recipe-items-layout fieldset,
.items-stats-layout fieldset,
.items-script-layout fieldset,
.items-base-layout fieldset,
.items-mod-strings-layout fieldset,
.server-recipes-panel,
.server-recipes-results,
.server-recipes-detail > fieldset,
.server-recipe-card,
.server-recipe-component-section,
.server-search-panel,
.server-detail-panel,
.server-panel,
.server-table-shell,
.server-editor-lists-panel,
.spells-tab-panel,
.spells-main-card,
.spells-action-card,
.spells-tier-card,
.spells-trait-card,
.spells-aa-panel,
.guilds-panel,
.guilds-card,
.guilds-detail-panel,
.guilds-events-card,
.quests-panel,
.quests-card,
.quests-filter-panel,
.quests-detail-panel,
.zones-panel,
.zones-card,
.zones-filter-panel,
.zones-detail-panel,
.zones-main-form,
.zones-form-section,
.characters-panel,
.characters-stat,
.characters-results,
.characters-detail-header,
.characters-section-card,
.characters-side-nav,
.characters-overview-stats section,
.characters-equipment-item,
.characters-slot-item,
.characters-paperdoll-frame,
.spawns-panel,
.spawns-filter-panel,
.spawns-create-panel,
.spawns-section-card,
.spawns-spawn-general-card,
.spawns-spawn-commands-card
) {
padding: 9px;
border-radius: 6px;
}
body.eq2-shell.density-compact #main-body :is(
.settings-grid,
.settings-preferences,
.items-effects-layout,
.items-effects-forms,
.items-appearances-layout,
.items-appearances-forms,
.items-classifications-layout,
.items-classifications-forms,
.items-book-form,
.items-book-grid,
.items-house-form,
.items-house-grid,
.items-house-container-form,
.items-house-container-grid,
.items-detail-record-form,
.items-detail-record-grid,
.items-recipe-items-forms,
.items-stats-forms,
.items-base-form,
.items-base-grid,
.items-base-class-groups,
.items-base-adornment-grid,
.items-mod-strings-forms,
.items-search-form,
.items-search-form-grid,
.server-recipes-search,
.server-recipes-create,
.server-recipe-detail-grid,
.server-recipe-component-row,
.server-recipe-details-form,
.server-filter-form,
.server-form-grid,
.server-table-row,
.server-wide-grid,
.server-row-actions,
.spells-main-form,
.spells-main-meta-grid,
.spells-main-text-grid,
.spells-main-settings-grid,
.spells-main-appearance-grid,
.spells-main-toggle-grid,
.spells-main-side-layout,
.spells-search-form,
.spells-search-filter-grid,
.spells-search-lookup-row,
.spells-tier-grid,
.spells-tier-identity-grid,
.spells-tier-insert-grid,
.spells-trait-grid,
.spells-aa-grid,
.guilds-search-form,
.guilds-new-form,
.guilds-summary-form,
.guilds-event-create,
.guilds-member-create,
.guilds-rank-create,
.guilds-recruiting-form,
.accounts-stat-grid,
.accounts-search-form,
.accounts-edit-form,
.accounts-field-grid,
.quests-filter-form,
.quests-search-form,
.quests-register-form,
.quests-detail-row,
.zones-filter-form,
.zones-search-form,
.zones-new-form,
.zones-main-form,
.zones-form-grid,
.zones-coord-grid,
.zones-settings-grid,
.zones-instance-grid,
.zones-toggle-row,
.characters-stat-grid,
.characters-search-form,
.characters-detail-layout,
.characters-field-grid,
.characters-field-grid-dense,
.characters-overview-grid,
.characters-overview-stats,
.characters-equipment-window,
.characters-data-row,
.characters-swap-form,
.spawns-filter-grid,
.spawns-search-form,
.spawns-create-form,
.spawns-card-grid,
.spawns-spawn-layout,
.spawns-detail-form-grid,
.spawns-check-grid,
.spawns-data-table,
.spawns-data-row,
.spawns-bulk-delete-grid
) {
gap: 6px;
}
body.eq2-shell.density-compact #main-body :is(
.items-effects-table th,
.items-effects-table td,
.items-appearances-table th,
.items-appearances-table td,
.items-classifications-table th,
.items-classifications-table td,
.items-recipe-items-table th,
.items-recipe-items-table td,
.items-stats-table th,
.items-stats-table td,
.items-mod-strings-table th,
.items-mod-strings-table td,
.server-recipes-results th,
.server-recipes-results td,
.server-loot-table-list th,
.server-loot-table-list td,
.server-editor-lists-table th,
.server-editor-lists-table td
) {
padding: 3px 4px;
}
body.eq2-shell.density-compact #main-body :is(
.server-table-row,
.spawns-data-row,
.characters-data-row
) {
padding: 5px;
}
body.eq2-shell.density-compact #main-body :is(
.items-base-class-group,
.items-base-class-summary,
.server-recipe-check-row,
.quests-toggle,
.zones-toggle,
.characters-chip-list span
) {
padding: 5px 6px;
}
body.eq2-shell.density-compact #main-body :is(
.items-base-check-row,
.server-recipe-check-row,
.quests-toggle,
.zones-toggle,
.characters-check-line
) {
min-height: 20px;
gap: 5px;
}
body.eq2-shell.density-compact #main-body :is(
.items-base-layout #itemClassesTable,
.items-base-layout #itemTSClassesGrid
) {
grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
gap: 6px;
}
body.eq2-shell.density-compact #main-body .items-base-grid {
grid-template-columns: minmax(560px, 1fr) minmax(190px, 0.3fr) minmax(225px, 0.36fr);
gap: 8px;
}
body.eq2-shell.density-compact #main-body .items-base-slots-table {
border-spacing: 0 2px;
}
body.eq2-shell.density-compact #main-body .spawns-spawn-general-table th,
body.eq2-shell.density-compact #main-body .spawns-command-table th,
body.eq2-shell.density-compact #main-body .spawns-spawn-general-table td,
body.eq2-shell.density-compact #main-body .spawns-command-table td {
padding: 3px 4px;
}
body.eq2-shell.density-compact #main-body .characters-paperdoll-frame {
min-height: 210px;
}
body.eq2-shell.density-compact #main-body .characters-slot-item {
min-height: 34px;
}
.eq2-page {
display: grid;
gap: 12px;
min-width: 0;
}
.eq2-page-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 16px;
min-width: 0;
margin: 4px 0 14px;
}
.eq2-page-title {
min-width: 0;
}
.eq2-page-title h1,
.eq2-page-title h2 {
margin: 0;
line-height: 1.2;
}
.eq2-muted {
color: var(--text-muted);
}
.eq2-chip {
display: inline-flex;
align-items: center;
min-height: 26px;
border: 1px solid var(--border);
border-radius: 999px;
background: var(--surface-muted);
color: var(--text-muted);
padding: 0 10px;
font-weight: 800;
}
.eq2-grid {
display: grid;
gap: 12px;
min-width: 0;
}
.eq2-grid-2 {
grid-template-columns: repeat(2, minmax(280px, 1fr));
}
.eq2-grid-3 {
grid-template-columns: repeat(3, minmax(220px, 1fr));
}
.eq2-card,
.eq2-panel {
min-width: 0;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--surface-strong);
color: var(--text);
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
}
.eq2-panel-wide {
grid-column: 1 / -1;
}
.eq2-panel > fieldset {
margin: 0;
border: 0;
padding: 16px;
}
.eq2-panel legend,
.eq2-panel-title {
margin-bottom: 8px;
color: var(--text);
font-size: 16px;
font-weight: 800;
}
.eq2-panel-heading {
margin: 0 0 10px;
color: var(--text);
font-weight: 800;
}
.eq2-field {
display: grid;
grid-template-columns: 150px minmax(0, 1fr);
align-items: center;
gap: 10px;
margin: 10px 0;
min-width: 0;
}
.eq2-field > label,
.eq2-field-label {
color: var(--text-muted);
font-weight: 800;
text-align: right;
}
.eq2-field-wide {
grid-column: 1 / -1;
}
.eq2-field-stack {
display: grid;
gap: 5px;
align-content: start;
min-width: 0;
}
.eq2-field-stack > label,
.eq2-field-stack .eq2-field-label {
color: var(--text-muted);
font-weight: 800;
}
.eq2-control,
.eq2-field-stack input[type="text"],
.eq2-field-stack input[type="number"],
.eq2-field-stack input[type="password"],
.eq2-field-stack select,
.eq2-field-stack textarea {
box-sizing: border-box;
width: 100%;
min-height: 31px;
border: 1px solid var(--border-strong);
border-radius: 6px;
background: var(--surface-muted);
color: var(--text);
padding: 6px 8px;
}
.eq2-control[readonly],
.eq2-field-stack input[readonly],
.eq2-field-stack textarea[readonly] {
background: var(--legacy-row-even);
color: var(--text-muted);
}
.eq2-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
justify-content: flex-end;
}
.eq2-button,
.eq2-action-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 30px;
border: 1px solid var(--button-border);
border-radius: 6px;
background: var(--button-bg);
color: var(--button-text);
padding: 0 10px;
font-weight: 800;
text-decoration: none;
cursor: pointer;
}
.eq2-button:hover,
.eq2-action-button:hover {
background: var(--button-bg-hover);
color: var(--button-text);
}
body.eq2-shell a.eq2-action-button,
body.eq2-shell a.eq2-action-button:link,
body.eq2-shell a.eq2-action-button:visited,
body.eq2-shell a.eq2-action-button:hover,
body.eq2-shell a.eq2-action-button:focus {
color: var(--button-text);
}
.eq2-icon-button {
display: inline-grid;
place-items: center;
width: 30px;
height: 30px;
border: 1px solid var(--button-border);
border-radius: 6px;
background: var(--button-bg);
color: var(--button-text);
font-weight: 800;
cursor: pointer;
}
.eq2-notice {
margin: 4px 0 14px;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--surface-muted);
color: var(--text);
padding: 9px 10px;
font-weight: 800;
}
.eq2-notice-warning {
border-color: rgba(180, 83, 9, 0.42);
background: rgba(251, 191, 36, 0.14);
color: var(--accent-warm);
}
.eq2-notice-danger {
border-color: rgba(185, 28, 28, 0.42);
background: rgba(248, 113, 113, 0.16);
color: var(--danger);
}
.eq2-status {
min-width: 0;
color: var(--text);
}
.eq2-status table {
border: 1px solid var(--border);
border-radius: 6px;
background: var(--surface-strong);
color: var(--text);
}
.eq2-tabs {
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
}
.eq2-tabs a {
display: inline-flex;
align-items: center;
min-height: 28px;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--surface-muted);
color: var(--text-muted);
padding: 0 9px;
font-weight: 800;
text-decoration: none;
}
.eq2-tabs a.is-active,
.eq2-tabs a.active,
.eq2-tabs a[aria-current="page"] {
border-color: var(--accent);
background: var(--accent);
color: #ffffff;
}
body.eq2-shell #main-body :is(
.eq2-tabs,
.items-subnav,
.items-search-actions,
.guilds-tabs,
.quests-tabs,
.zones-tabs,
.characters-mode-tabs,
.characters-filter-actions,
.characters-overview-tabs,
.spawns-filter-actions,
.server-loot-mode-tabs,
.server-icons-tabs,
.server-misc-script-tabs,
.server-mode-tabs
),
body.eq2-shell #Editor :is(
.eq2-tabs,
.guilds-tabs,
.quests-tabs,
.zones-tabs,
.characters-mode-tabs,
.characters-filter-actions,
.characters-overview-tabs,
.spawns-filter-actions,
.server-loot-mode-tabs,
.server-icons-tabs,
.server-misc-script-tabs,
.server-mode-tabs
),
body.eq2-shell #main-body #sub-menu1:not(table),
body.eq2-shell #Editor #sub-menu1:not(table) {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
max-width: 100%;
overflow-x: auto;
scrollbar-width: thin;
}
body.eq2-shell #main-body table#sub-menu1 {
display: block;
width: 100%;
max-width: 100%;
border-collapse: separate;
background: transparent;
overflow-x: auto;
}
body.eq2-shell #main-body table#sub-menu1 tbody,
body.eq2-shell #main-body table#sub-menu1 tr {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
}
body.eq2-shell #main-body table#sub-menu1 td {
display: block;
padding: 0;
background: transparent !important;
}
body.eq2-shell #main-body :is(
.eq2-tabs,
.items-subnav,
.items-search-actions,
.guilds-tabs,
.quests-tabs,
.zones-tabs,
.characters-mode-tabs,
.characters-filter-actions,
.characters-overview-tabs,
.spawns-filter-actions,
.server-loot-mode-tabs,
.server-icons-tabs,
.server-misc-script-tabs,
.server-mode-tabs
) a,
body.eq2-shell #Editor :is(
.eq2-tabs,
.guilds-tabs,
.quests-tabs,
.zones-tabs,
.characters-mode-tabs,
.characters-filter-actions,
.characters-overview-tabs,
.spawns-filter-actions,
.server-loot-mode-tabs,
.server-icons-tabs,
.server-misc-script-tabs,
.server-mode-tabs
) a,
body.eq2-shell #main-body #sub-menu1 a,
body.eq2-shell #Editor #sub-menu1 a {
box-sizing: border-box;
display: inline-flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
max-width: min(100%, 260px);
min-height: 30px;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--surface-muted);
color: var(--accent-strong);
padding: 5px 10px;
font-weight: 800;
line-height: 1.15;
text-align: center;
text-decoration: none;
white-space: nowrap;
}
body.eq2-shell #main-body :is(
.eq2-tabs,
.items-subnav,
.items-search-actions,
.guilds-tabs,
.quests-tabs,
.zones-tabs,
.characters-mode-tabs,
.characters-filter-actions,
.characters-overview-tabs,
.spawns-filter-actions,
.server-loot-mode-tabs,
.server-icons-tabs,
.server-misc-script-tabs,
.server-mode-tabs
) a:hover,
body.eq2-shell #main-body :is(
.eq2-tabs,
.items-subnav,
.items-search-actions,
.guilds-tabs,
.quests-tabs,
.zones-tabs,
.characters-mode-tabs,
.characters-filter-actions,
.characters-overview-tabs,
.spawns-filter-actions,
.server-loot-mode-tabs,
.server-icons-tabs,
.server-misc-script-tabs,
.server-mode-tabs
) a:focus,
body.eq2-shell #main-body #sub-menu1 a:hover,
body.eq2-shell #main-body #sub-menu1 a:focus {
border-color: var(--accent);
background: var(--legacy-row-hover);
color: var(--accent-strong);
outline: 2px solid transparent;
}
body.eq2-shell #main-body :is(
.eq2-tabs,
.items-subnav,
.items-search-actions,
.guilds-tabs,
.quests-tabs,
.zones-tabs,
.characters-mode-tabs,
.characters-filter-actions,
.characters-overview-tabs,
.spawns-filter-actions,
.server-loot-mode-tabs,
.server-icons-tabs,
.server-misc-script-tabs,
.server-mode-tabs
) a:is(.is-active, .active, [aria-current="page"]),
body.eq2-shell #Editor :is(
.eq2-tabs,
.guilds-tabs,
.quests-tabs,
.zones-tabs,
.characters-mode-tabs,
.characters-filter-actions,
.characters-overview-tabs,
.spawns-filter-actions,
.server-loot-mode-tabs,
.server-icons-tabs,
.server-misc-script-tabs,
.server-mode-tabs
) a:is(.is-active, .active, [aria-current="page"]),
body.eq2-shell #main-body #sub-menu1 a:is(.is-active, .active, [aria-current="page"]),
body.eq2-shell #Editor #sub-menu1 a:is(.is-active, .active, [aria-current="page"]) {
border-color: var(--accent-strong);
background: var(--accent);
color: var(--button-text);
box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.18);
}
.eq2-choice-row {
display: flex;
flex-wrap: wrap;
gap: 10px 18px;
}
.eq2-choice-stack {
display: grid;
gap: 6px;
max-width: 260px;
}
.eq2-choice-row label,
.eq2-choice-stack label {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--text);
text-align: left;
}
.eq2-table {
width: 100%;
border-collapse: collapse;
color: var(--text);
}
.eq2-table th,
.eq2-table td {
border-bottom: 1px solid var(--border);
padding: 5px 6px;
text-align: left;
vertical-align: top;
}
.eq2-table th {
background: var(--legacy-header);
color: var(--text-muted);
font-size: 12px;
font-weight: 800;
text-transform: uppercase;
}
.eq2-table tbody tr:nth-child(even) {
background: var(--legacy-row-even);
}
.eq2-table tbody tr:nth-child(odd) {
background: var(--legacy-row-odd);
}
.eq2-table-scroll {
max-width: 100%;
min-width: 0;
overflow-x: auto;
}
.eq2-edit-table input[type="text"],
.eq2-edit-table input[type="number"],
.eq2-edit-table select,
.eq2-edit-table textarea {
box-sizing: border-box;
min-height: 28px;
border: 1px solid var(--border-strong);
border-radius: 5px;
background: var(--surface-muted);
color: var(--text);
padding: 4px 6px;
}
.eq2-edit-table input[readonly],
.eq2-edit-table textarea[readonly] {
background: var(--legacy-row-even);
color: var(--text-muted);
}
.eq2-empty-cell,
.eq2-new-label {
color: var(--text-muted);
font-weight: 800;
}
.eq2-new-label {
text-align: center;
}
body.eq2-shell.density-compact .eq2-page,
body.eq2-shell.density-compact .eq2-grid,
body.eq2-shell.density-compact .eq2-tabs,
body.eq2-shell.density-compact .eq2-choice-row,
body.eq2-shell.density-compact .eq2-choice-stack {
gap: 6px;
}
body.eq2-shell.density-compact .eq2-page-header {
gap: 8px;
margin-bottom: 8px;
}
body.eq2-shell.density-compact .eq2-panel,
body.eq2-shell.density-compact .eq2-card {
border-radius: 6px;
}
body.eq2-shell.density-compact .eq2-panel > fieldset,
body.eq2-shell.density-compact .eq2-card {
padding: 9px;
}
body.eq2-shell.density-compact .eq2-field {
gap: 6px;
margin: 6px 0;
}
body.eq2-shell.density-compact .eq2-button,
body.eq2-shell.density-compact .eq2-action-button,
body.eq2-shell.density-compact .eq2-tabs a {
min-height: 24px;
border-radius: 4px;
padding: 0 8px;
font-size: 12px;
}
body.eq2-shell.density-compact .eq2-table th,
body.eq2-shell.density-compact .eq2-table td {
padding: 3px 4px;
}
body.eq2-shell.settings-overlay-open {
overflow: hidden;
}
.settings-overlay {
position: fixed;
inset: 0;
z-index: 100000;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(360px, min(740px, calc(100vw - 28px)));
grid-template-rows: minmax(0, 1fr);
}
.settings-overlay[hidden] {
display: none;
}
.settings-overlay-backdrop {
grid-column: 1 / -1;
grid-row: 1;
background: rgba(0, 0, 0, 0.46);
backdrop-filter: blur(2px);
}
.settings-overlay-panel {
position: relative;
grid-column: 2;
grid-row: 1;
display: grid;
grid-template-rows: auto minmax(0, 1fr) auto;
min-width: 0;
margin: 14px;
border: 1px solid var(--border-strong);
border-radius: 9px;
background: var(--surface);
box-shadow: 0 26px 70px rgba(0, 0, 0, 0.38);
overflow: hidden;
}
.settings-overlay-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
border-bottom: 1px solid var(--border);
background: var(--surface-strong);
padding: 10px 12px;
}
.settings-overlay-header h2 {
margin: 0;
color: var(--text);
font-size: 17px;
line-height: 1.2;
}
.settings-overlay-close {
min-width: 30px;
min-height: 30px;
border: 1px solid var(--button-border);
border-radius: 6px;
background: var(--button-bg);
color: var(--button-text);
font-weight: 800;
cursor: pointer;
}
.settings-overlay-iframe {
width: 100%;
height: 100%;
border: 0;
background: var(--surface);
}
.settings-overlay-footer {
display: flex;
justify-content: flex-end;
gap: 8px;
border-top: 1px solid var(--border);
background: var(--surface-strong);
padding: 9px 12px;
}
.settings-overlay-open-full,
.settings-overlay-close-text {
min-height: 30px;
}
body.eq2-shell.settings-overlay-frame {
min-height: auto;
overflow: auto;
background: var(--surface);
}
body.eq2-shell.settings-overlay-frame::before,
body.eq2-shell.settings-overlay-frame::after {
display: none;
}
body.eq2-shell.settings-overlay-frame #main-body {
display: block;
grid-column: auto;
grid-row: auto;
padding: 12px;
overflow: visible;
}
body.eq2-shell.settings-overlay-frame .settings-page {
max-width: none;
margin: 0;
}
.settings-page {
margin: 0 auto;
max-width: 1180px;
}
.settings-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 16px;
margin: 4px 0 14px;
}
.settings-header-actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 8px;
}
.settings-header h1 {
margin: 0;
font-size: 24px;
line-height: 1.2;
}
.settings-subtitle,
.settings-account-chip {
color: var(--text-muted);
}
.settings-account-chip {
border: 1px solid var(--border);
border-radius: 999px;
background: var(--surface-muted);
padding: 6px 10px;
font-weight: bold;
}
.settings-status {
margin-bottom: 12px;
}
.settings-status table {
border: 1px solid var(--border);
border-radius: 6px;
background: var(--surface-strong);
}
.settings-grid {
display: grid;
grid-template-columns: repeat(2, minmax(280px, 1fr));
gap: 12px;
}
.settings-panel {
border: 1px solid var(--border);
border-radius: 8px;
background: var(--surface-strong);
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
}
.settings-panel-wide {
grid-column: 1 / -1;
}
.settings-panel fieldset {
margin: 0;
border: 0;
padding: 16px;
}
.settings-panel legend {
margin-bottom: 8px;
color: var(--text);
font-size: 16px;
font-weight: bold;
}
.settings-field {
display: grid;
grid-template-columns: 150px minmax(0, 1fr);
align-items: center;
gap: 10px;
margin: 10px 0;
}
.settings-field label {
color: var(--text-muted);
font-weight: bold;
text-align: right;
}
.settings-field input[type="text"],
.settings-field input[type="password"],
.settings-field select {
width: min(100%, 360px);
}
.settings-readonly {
min-height: 18px;
color: var(--text);
}
.settings-preferences {
display: grid;
grid-template-columns: repeat(2, minmax(260px, 1fr));
column-gap: 28px;
}
.settings-field-wide {
grid-column: 1 / -1;
}
.settings-radio-row {
display: flex;
flex-wrap: wrap;
gap: 10px 18px;
}
.settings-choice-stack {
display: grid;
gap: 6px;
max-width: 260px;
}
.settings-radio-row label,
.settings-choice-stack label {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--text);
text-align: left;
}
.settings-navigation-options {
display: grid;
grid-template-columns: repeat(2, minmax(180px, 1fr));
gap: 10px;
}
.settings-navigation-option {
display: grid;
grid-template-columns: auto 72px minmax(0, 1fr);
align-items: center;
gap: 10px;
min-width: 0;
border: 1px solid var(--border);
border-radius: 7px;
background: var(--surface-muted);
color: var(--text);
padding: 9px;
text-align: left;
}
.settings-navigation-option:has(input:checked) {
border-color: var(--accent);
background: color-mix(in srgb, var(--accent) 14%, var(--surface-muted));
}
.settings-navigation-option strong,
.settings-navigation-option small {
display: block;
}
.settings-navigation-option small {
margin-top: 2px;
color: var(--text-muted);
font-size: 11px;
font-weight: 700;
line-height: 1.25;
}
.settings-navigation-preview {
display: grid;
width: 72px;
height: 42px;
border: 1px solid var(--border-strong);
border-radius: 6px;
background: var(--surface);
padding: 4px;
gap: 3px;
}
.settings-navigation-preview span {
border-radius: 3px;
background: var(--accent-muted);
}
.settings-navigation-preview-sidebar {
grid-template-columns: 16px 1fr;
grid-template-rows: repeat(3, 1fr);
}
.settings-navigation-preview-sidebar span:first-child {
grid-row: 1 / -1;
}
.settings-navigation-preview-topbar {
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 12px 1fr;
}
.settings-navigation-preview-topbar span {
grid-row: 1;
}
.settings-notice {
margin: 4px 0 14px;
border: 1px solid rgba(180, 83, 9, 0.42);
border-radius: 6px;
background: rgba(251, 191, 36, 0.14);
color: var(--accent-warm);
padding: 9px 10px;
font-weight: bold;
}
.settings-foil-preview {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.foil-swatch {
position: relative;
overflow: hidden;
width: 150px;
height: 44px;
border: 1px solid var(--border-strong);
border-radius: 7px;
}
.foil-swatch-day {
background:
conic-gradient(from 34deg at 20% 20%, rgba(255, 255, 255, 0.96), rgba(0, 214, 255, 0.42), rgba(255, 255, 255, 0.22), rgba(255, 182, 58, 0.32), rgba(255, 255, 255, 0.88)),
linear-gradient(103deg, transparent 0 18%, rgba(255, 255, 255, 0.74) 23%, rgba(0, 234, 255, 0.4) 28%, rgba(33, 255, 156, 0.32) 34%, rgba(255, 226, 87, 0.3) 41%, rgba(255, 84, 214, 0.26) 48%, transparent 61%),
repeating-linear-gradient(112deg, rgba(255, 255, 255, 0.24) 0 1px, rgba(130, 145, 155, 0.08) 1px 2px, transparent 2px 7px),
linear-gradient(118deg, #f9fbff, #cfd7dc 18%, #ffffff 34%, #b9c4cb 52%, #eef4f8 70%, #c7d1d8 100%);
}
.foil-swatch-night {
background:
conic-gradient(from 32deg at 20% 20%, rgba(255, 255, 255, 0.24), rgba(0, 234, 255, 0.48), rgba(0, 0, 0, 0.12), rgba(255, 175, 47, 0.26), rgba(5, 7, 8, 0.7)),
linear-gradient(102deg, transparent 0 20%, rgba(255, 255, 255, 0.38) 25%, rgba(0, 234, 255, 0.62) 31%, rgba(28, 255, 143, 0.44) 37%, rgba(255, 213, 52, 0.36) 43%, rgba(255, 39, 183, 0.38) 51%, transparent 63%),
repeating-linear-gradient(112deg, rgba(255, 255, 255, 0.08) 0 1px, rgba(0, 255, 210, 0.04) 1px 2px, transparent 2px 7px),
linear-gradient(118deg, #010203, #05090a 18%, #071019 34%, #020304 52%, #0a1513 70%, #010203 100%);
}
.foil-swatch::after {
content: "";
position: absolute;
inset: -60%;
background:
linear-gradient(101deg, transparent 0 29%, rgba(255, 255, 255, 0.68) 36%, rgba(0, 239, 255, 0.68) 41%, rgba(20, 255, 126, 0.48) 45%, rgba(255, 214, 45, 0.42) 50%, rgba(255, 39, 183, 0.46) 56%, transparent 69%),
repeating-linear-gradient(112deg, rgba(255, 255, 255, 0.14) 0 1px, transparent 1px 7px);
mix-blend-mode: screen;
animation: eq2FoilSweep 6.8s ease-in-out infinite alternate;
}
.foil-swatch-night::after {
opacity: 0.85;
}
@media (prefers-reduced-motion: reduce) {
body.eq2-shell.foil-day::after,
body.eq2-shell.foil-night::after,
.foil-swatch::after {
animation: none;
}
}
.settings-actions {
margin-top: 14px;
text-align: right;
}
.items-search-page {
display: grid;
gap: 14px;
}
.items-subnav {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin: 0 0 12px;
padding: 0;
}
.items-subnav a {
display: inline-flex;
align-items: center;
min-height: 28px;
padding: 0 10px;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--surface-muted);
color: var(--text);
text-decoration: none;
font-weight: bold;
}
.items-subnav a.active {
border-color: var(--accent);
background: rgba(15, 118, 110, 0.14);
color: var(--accent);
}
.items-search-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
.items-search-header h1 {
margin: 0;
font-size: 20px;
line-height: 1.2;
color: var(--text);
}
.items-search-actions {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.items-search-actions a {
display: inline-flex;
align-items: center;
min-height: 30px;
padding: 0 10px;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--surface-muted);
color: var(--text);
text-decoration: none;
font-weight: bold;
}
.items-search-actions a.active {
border-color: var(--accent);
background: rgba(15, 118, 110, 0.14);
color: var(--accent);
}
.items-search-status {
border: 1px solid var(--border);
border-left: 4px solid var(--accent);
border-radius: 6px;
background: var(--surface-muted);
color: var(--text);
padding: 9px 12px;
font-weight: bold;
}
.items-search-panel {
border: 1px solid var(--border);
border-radius: 8px;
background: var(--surface-strong);
padding: 14px;
}
.items-create-page {
display: grid;
gap: 14px;
max-width: 520px;
}
.items-create-panel {
max-width: 440px;
}
.items-detail-header {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 10px;
margin: 0 0 10px;
padding: 12px 14px;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--surface-strong);
color: var(--text);
}
.items-detail-header h1 {
margin: 0;
color: var(--text);
font-size: 18px;
line-height: 1.25;
letter-spacing: 0;
}
.items-detail-meta {
margin-top: 3px;
color: var(--text-muted);
font-weight: bold;
text-align: right;
}
body.eq2-shell #main-body #sub-menu1.items-detail-tabs {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 0 0 14px;
padding: 8px;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--surface-muted);
color: var(--text);
}
body.eq2-shell #main-body #sub-menu1.items-detail-tabs a {
display: inline-flex;
align-items: center;
min-height: 30px;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--surface-strong);
color: var(--link);
padding: 5px 10px;
font-weight: bold;
text-decoration: none;
}
body.eq2-shell #main-body #sub-menu1.items-detail-tabs a:hover,
body.eq2-shell #main-body #sub-menu1.items-detail-tabs a:focus {
border-color: var(--accent);
background: var(--legacy-row-hover);
color: var(--link-hover);
}
body.eq2-shell #main-body #sub-menu1.items-detail-tabs a.active {
border-color: var(--accent-strong);
background: var(--accent);
color: #ffffff;
}
.items-effects-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(280px, 350px);
gap: 12px;
align-items: start;
}
.items-effects-layout fieldset {
margin: 0;
border-color: var(--border);
background: var(--surface-strong);
color: var(--text);
}
.items-effects-layout legend {
color: var(--text);
font-weight: bold;
}
.items-effects-heading {
margin: 0 0 8px;
color: var(--text);
font-weight: bold;
}
.items-effects-forms {
display: none;
}
.items-effects-scroll {
overflow-x: auto;
}
.items-effects-table {
width: 100%;
min-width: 760px;
border: 0;
border-collapse: collapse;
color: var(--text);
}
.items-effects-table th,
.items-effects-table td {
border: 0;
border-bottom: 1px solid var(--border);
padding: 5px 6px;
vertical-align: middle;
}
.items-effects-table th {
background: var(--legacy-header);
color: var(--text);
text-align: left;
}
.items-effects-table tbody tr:nth-child(odd) {
background: var(--legacy-row-odd);
}
.items-effects-table tbody tr:nth-child(even) {
background: var(--legacy-row-even);
}
.items-effects-table input[type="text"] {
box-sizing: border-box;
width: 100%;
min-height: 28px;
border: 1px solid var(--border-strong);
border-radius: 5px;
background: var(--surface-muted);
color: var(--text);
padding: 4px 6px;
}
.items-effects-table input[readonly] {
background: var(--legacy-row-even);
color: var(--text-muted);
}
.items-effects-table .items-effect-id,
.items-effects-table .items-effect-item-id,
.items-effects-table .items-effect-index,
.items-effects-table .items-effect-percentage,
.items-effects-table .items-effect-bullet {
max-width: 70px;
}
.items-effects-table .items-effect-effect {
min-width: 260px;
}
.items-effects-table .items-effect-command {
min-width: 62px;
padding: 5px 8px;
}
.items-effects-empty {
color: var(--text-muted);
font-weight: bold;
}
.items-effects-new-label {
text-align: center;
}
.items-effects-preview {
min-width: 0;
}
.items-appearances-layout {
display: grid;
gap: 12px;
align-items: start;
}
.items-appearances-layout fieldset {
margin: 0;
border-color: var(--border);
background: var(--surface-strong);
color: var(--text);
}
.items-appearances-layout legend {
color: var(--text);
font-weight: bold;
}
.items-appearances-heading {
margin: 0 0 8px;
color: var(--text);
font-weight: bold;
}
.items-appearances-forms {
display: none;
}
.items-appearances-scroll {
overflow-x: auto;
}
.items-appearances-table {
width: 100%;
min-width: 900px;
border: 0;
border-collapse: collapse;
color: var(--text);
}
.items-appearances-table th,
.items-appearances-table td {
border: 0;
border-bottom: 1px solid var(--border);
padding: 5px 6px;
vertical-align: middle;
}
.items-appearances-table th {
background: var(--legacy-header);
color: var(--text);
text-align: left;
}
.items-appearances-table tbody tr:nth-child(odd) {
background: var(--legacy-row-odd);
}
.items-appearances-table tbody tr:nth-child(even) {
background: var(--legacy-row-even);
}
.items-appearances-table input[type="text"] {
box-sizing: border-box;
width: 100%;
min-height: 28px;
border: 1px solid var(--border-strong);
border-radius: 5px;
background: var(--surface-muted);
color: var(--text);
padding: 4px 6px;
}
.items-appearances-table input[readonly] {
background: var(--legacy-row-even);
color: var(--text-muted);
}
.items-appearances-table .items-appearance-id,
.items-appearances-table .items-appearance-item-id,
.items-appearances-table .items-appearance-value {
max-width: 72px;
}
.items-appearances-table .items-appearance-command {
min-width: 62px;
padding: 5px 8px;
}
.items-appearances-empty {
color: var(--text-muted);
font-weight: bold;
}
.items-appearances-new-label {
text-align: center;
}
.items-classifications-layout {
display: grid;
gap: 12px;
align-items: start;
}
.items-classifications-layout fieldset {
margin: 0;
border-color: var(--border);
background: var(--surface-strong);
color: var(--text);
}
.items-classifications-layout legend {
color: var(--text);
font-weight: bold;
}
.items-classifications-heading {
margin: 0 0 8px;
color: var(--text);
font-weight: bold;
}
.items-classifications-forms {
display: none;
}
.items-classifications-scroll {
overflow-x: auto;
}
.items-classifications-table {
width: 100%;
max-width: 620px;
border: 0;
border-collapse: collapse;
color: var(--text);
}
.items-classifications-table th,
.items-classifications-table td {
border: 0;
border-bottom: 1px solid var(--border);
padding: 5px 6px;
vertical-align: middle;
}
.items-classifications-table th {
background: var(--legacy-header);
color: var(--text);
text-align: left;
}
.items-classifications-table tbody tr:nth-child(odd) {
background: var(--legacy-row-odd);
}
.items-classifications-table tbody tr:nth-child(even) {
background: var(--legacy-row-even);
}
.items-classifications-table input[type="text"] {
box-sizing: border-box;
width: 100%;
min-height: 28px;
border: 1px solid var(--border-strong);
border-radius: 5px;
background: var(--surface-muted);
color: var(--text);
padding: 4px 6px;
}
.items-classifications-table input[readonly] {
background: var(--legacy-row-even);
color: var(--text-muted);
}
.items-classifications-table .items-classification-id,
.items-classifications-table .items-classification-item-id {
max-width: 70px;
}
.items-classifications-table .items-classification-value {
min-width: 220px;
}
.items-classifications-table .items-classification-command {
min-width: 62px;
padding: 5px 8px;
}
.items-classifications-empty {
color: var(--text-muted);
font-weight: bold;
}
.items-classifications-new-label {
text-align: center;
}
.items-book-layout {
display: grid;
gap: 12px;
max-width: 560px;
}
.items-book-layout fieldset {
margin: 0;
border-color: var(--border);
background: var(--surface-strong);
color: var(--text);
}
.items-book-layout legend {
color: var(--text);
font-weight: bold;
}
.items-book-heading {
margin: 0 0 10px;
color: var(--text);
font-weight: bold;
}
.items-book-form {
display: grid;
gap: 12px;
margin: 0;
}
.items-book-grid {
display: grid;
grid-template-columns: 110px minmax(120px, 1fr);
gap: 8px 10px;
align-items: center;
}
.items-book-grid label {
color: var(--text-muted);
font-weight: bold;
text-align: right;
}
.items-book-grid input[type="text"] {
box-sizing: border-box;
width: 100%;
min-height: 29px;
border: 1px solid var(--border-strong);
border-radius: 5px;
background: var(--surface-muted);
color: var(--text);
padding: 5px 7px;
}
.items-book-grid input[readonly] {
background: var(--legacy-row-even);
color: var(--text-muted);
}
.items-book-small {
max-width: 90px;
}
.items-book-wide {
max-width: 320px;
}
.items-book-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding-left: 120px;
}
.items-book-command {
min-width: 86px;
}
.items-book-empty {
color: var(--text-muted);
font-weight: bold;
}
.items-house-layout {
display: grid;
gap: 12px;
max-width: 560px;
}
.items-house-layout fieldset {
margin: 0;
border-color: var(--border);
background: var(--surface-strong);
color: var(--text);
}
.items-house-layout legend {
color: var(--text);
font-weight: bold;
}
.items-house-heading {
margin: 0 0 10px;
color: var(--text);
font-weight: bold;
}
.items-house-form {
display: grid;
gap: 12px;
margin: 0;
}
.items-house-grid {
display: grid;
grid-template-columns: 150px minmax(120px, 1fr);
gap: 8px 10px;
align-items: center;
}
.items-house-grid label {
color: var(--text-muted);
font-weight: bold;
text-align: right;
}
.items-house-grid input[type="text"] {
box-sizing: border-box;
width: 100%;
min-height: 29px;
border: 1px solid var(--border-strong);
border-radius: 5px;
background: var(--surface-muted);
color: var(--text);
padding: 5px 7px;
}
.items-house-grid input[readonly] {
background: var(--legacy-row-even);
color: var(--text-muted);
}
.items-house-small {
max-width: 100px;
}
.items-house-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding-left: 160px;
}
.items-house-command {
min-width: 86px;
}
.items-house-empty {
color: var(--text-muted);
font-weight: bold;
}
.items-house-container-layout {
display: grid;
gap: 12px;
max-width: 620px;
}
.items-house-container-layout fieldset {
margin: 0;
border-color: var(--border);
background: var(--surface-strong);
color: var(--text);
}
.items-house-container-layout legend {
color: var(--text);
font-weight: bold;
}
.items-house-container-heading {
margin: 0 0 10px;
color: var(--text);
font-weight: bold;
}
.items-house-container-form {
display: grid;
gap: 12px;
margin: 0;
}
.items-house-container-grid {
display: grid;
grid-template-columns: 170px minmax(120px, 1fr);
gap: 8px 10px;
align-items: center;
}
.items-house-container-grid label {
color: var(--text-muted);
font-weight: bold;
text-align: right;
}
.items-house-container-grid input[type="text"] {
box-sizing: border-box;
width: 100%;
min-height: 29px;
border: 1px solid var(--border-strong);
border-radius: 5px;
background: var(--surface-muted);
color: var(--text);
padding: 5px 7px;
}
.items-house-container-grid input[readonly] {
background: var(--legacy-row-even);
color: var(--text-muted);
}
.items-house-container-small {
max-width: 110px;
}
.items-house-container-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding-left: 180px;
}
.items-house-container-command {
min-width: 86px;
}
.items-house-container-empty {
color: var(--text-muted);
font-weight: bold;
}
.items-detail-record-layout {
display: grid;
gap: 12px;
max-width: 780px;
}
.items-detail-record-layout fieldset {
margin: 0;
border-color: var(--border);
background: var(--surface-strong);
color: var(--text);
}
.items-detail-record-layout legend {
color: var(--text);
font-weight: bold;
}
.items-detail-record-heading {
margin: 0 0 10px;
color: var(--text);
font-weight: bold;
}
.items-detail-record-form {
display: grid;
gap: 12px;
margin: 0;
}
.items-detail-record-grid {
display: grid;
grid-template-columns: 150px minmax(80px, 1fr) 150px minmax(80px, 1fr);
gap: 8px 10px;
align-items: center;
}
.items-detail-record-grid label {
color: var(--text-muted);
font-weight: bold;
text-align: right;
}
.items-detail-record-control-wrap {
display: flex;
gap: 6px;
align-items: center;
min-width: 0;
}
.items-detail-record-control {
box-sizing: border-box;
width: 100%;
min-height: 29px;
border: 1px solid var(--border-strong);
border-radius: 5px;
background: var(--surface-muted);
color: var(--text);
padding: 5px 7px;
}
.items-detail-record-control[readonly] {
background: var(--legacy-row-even);
color: var(--text-muted);
}
.items-detail-record-small {
max-width: 110px;
}
.items-detail-record-icon {
box-sizing: border-box;
width: 28px;
min-width: 28px;
height: 28px;
padding: 0;
border: 1px solid var(--border-strong);
border-radius: 5px;
background: var(--surface-muted);
color: var(--text);
line-height: 1;
}
.items-detail-record-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding-left: 160px;
}
.items-detail-record-command {
min-width: 86px;
}
.items-detail-record-empty,
.items-detail-record-new-label {
color: var(--text-muted);
font-weight: bold;
}
.items-tree-page {
display: grid;
gap: 12px;
color: var(--text);
}
.items-tree-intro {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.items-tree-intro h2,
.items-tree-intro p,
.items-tree-fallback h3,
.items-tree-fallback h4,
.items-tree-fallback p {
margin: 0;
}
.items-tree-intro h2 {
font-size: 17px;
}
.items-tree-intro p {
margin-top: 4px;
color: var(--text-muted);
}
.items-tree-legend,
.items-tree-status-row {
display: flex;
flex-wrap: wrap;
gap: 7px;
align-items: center;
}
.items-tree-legend-item,
.items-tree-status {
display: inline-flex;
align-items: center;
min-height: 24px;
box-sizing: border-box;
border: 1px solid var(--border-strong);
border-radius: 999px;
background: var(--surface-muted);
color: var(--text-muted);
padding: 3px 9px;
font-size: 11px;
font-weight: 800;
}
.items-tree-legend-item::before {
content: "";
width: 8px;
height: 8px;
margin-right: 6px;
border-radius: 50%;
background: var(--border-strong);
}
.items-tree-legend-item.is-success,
.items-tree-status.is-success {
border-color: color-mix(in srgb, var(--success) 62%, var(--border));
background: color-mix(in srgb, var(--success) 12%, var(--surface-strong));
color: var(--success);
}
.items-tree-legend-item.is-success::before {
background: var(--success);
}
.items-tree-legend-item.is-danger,
.items-tree-status.is-danger {
border-color: color-mix(in srgb, var(--danger) 62%, var(--border));
background: color-mix(in srgb, var(--danger) 12%, var(--surface-strong));
color: var(--danger);
}
.items-tree-legend-item.is-danger::before {
background: var(--danger);
}
.items-tree-graph {
display: none;
gap: 0;
border: 1px solid var(--border);
border-radius: 9px;
background: var(--surface);
box-shadow: 0 8px 24px rgba(12, 18, 16, 0.08);
overflow: hidden;
}
.items-tree-enhanced .items-tree-graph {
display: grid;
}
.items-tree-enhanced .items-tree-fallback {
display: none;
}
body.items-tree-fullscreen-open {
overflow: hidden;
}
.items-tree-graph.is-fullscreen-active {
width: 100vw;
height: 100vh;
max-width: none;
max-height: none;
grid-template-rows: auto minmax(0, 1fr);
border: 0;
border-radius: 0;
background: var(--surface);
}
.items-tree-graph.is-fullscreen-fallback {
position: fixed;
inset: 0;
z-index: 2147483000;
}
.items-tree-graph.is-fullscreen-active .items-tree-viewport,
body.eq2-shell.density-compact .items-tree-graph.is-fullscreen-active .items-tree-viewport {
height: auto;
min-height: 0;
}
.items-tree-toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 9px;
min-height: 45px;
box-sizing: border-box;
border-bottom: 1px solid var(--border);
background: var(--surface-muted);
padding: 7px 10px;
}
.items-tree-toolbar-actions {
display: inline-flex;
gap: 5px;
}
.items-tree-toolbar-actions .eq2-button {
min-width: 34px;
min-height: 30px;
padding: 4px 9px;
font-weight: 800;
}
.items-tree-zoom-status {
min-width: 48px;
color: var(--text);
font-variant-numeric: tabular-nums;
font-weight: 800;
text-align: center;
}
.items-tree-toolbar-help {
color: var(--text-muted);
font-size: 12px;
font-weight: 700;
}
.items-tree-viewport {
position: relative;
height: clamp(520px, 70vh, 820px);
min-height: 420px;
overflow: hidden;
background:
radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--border-strong) 35%, transparent) 1px, transparent 1.5px) 0 0 / 20px 20px,
var(--surface-strong);
cursor: grab;
touch-action: none;
user-select: none;
}
.items-tree-viewport:focus-visible {
outline: 3px solid var(--focus);
outline-offset: -3px;
}
.items-tree-viewport.is-panning {
cursor: grabbing;
}
.items-tree-scene {
position: absolute;
left: 0;
top: 0;
transform-origin: 0 0;
will-change: transform;
}
.items-tree-edges {
position: absolute;
left: 0;
top: 0;
z-index: 0;
overflow: visible;
pointer-events: none;
}
.items-tree-edge {
fill: none;
stroke: var(--border-strong);
stroke-width: 2;
vector-effect: non-scaling-stroke;
}
.items-tree-edge.is-success {
stroke: var(--success);
}
.items-tree-edge.is-danger {
stroke: var(--danger);
stroke-dasharray: 7 4;
}
.items-tree-edge-label {
fill: var(--text-muted);
stroke: var(--surface-strong);
stroke-width: 5px;
paint-order: stroke fill;
font: 700 11px Arial, Helvetica, sans-serif;
}
.items-tree-edge-label.is-success {
fill: var(--success);
}
.items-tree-edge-label.is-danger {
fill: var(--danger);
}
.items-tree-graph-node {
position: absolute;
left: 0;
top: 0;
z-index: 1;
box-sizing: border-box;
width: 268px;
border: 1px solid var(--border-strong);
border-radius: 9px;
background: var(--surface-strong);
box-shadow: 0 7px 20px rgba(12, 18, 16, 0.13);
color: var(--text);
overflow: hidden;
}
.items-tree-graph-node.is-success {
border-color: var(--success);
box-shadow: inset 4px 0 0 color-mix(in srgb, var(--success) 75%, transparent), 0 7px 20px rgba(12, 18, 16, 0.13);
}
.items-tree-graph-node.is-danger {
border-color: var(--danger);
box-shadow: inset 4px 0 0 color-mix(in srgb, var(--danger) 75%, transparent), 0 7px 20px rgba(12, 18, 16, 0.13);
}
.items-tree-node-item {
width: 286px;
border-width: 2px;
border-color: var(--accent);
}
.items-tree-node-branch {
width: 238px;
background: var(--surface-muted);
}
.items-tree-node-lootglobal {
border-left: 4px solid var(--accent);
}
.items-tree-graph-node-content {
display: block;
box-sizing: border-box;
min-height: 100%;
padding: 11px 12px;
color: inherit;
text-decoration: none;
}
a.items-tree-graph-node-content:hover,
a.items-tree-graph-node-content:focus-visible {
background: color-mix(in srgb, var(--accent) 9%, var(--surface-strong));
color: inherit;
text-decoration: none;
}
a.items-tree-graph-node-content:focus-visible {
outline: 3px solid var(--focus);
outline-offset: -3px;
}
.items-tree-graph-node-header {
display: flex;
align-items: center;
gap: 9px;
}
.items-tree-graph-node-header img {
width: 42px;
height: 42px;
flex: 0 0 42px;
border: 1px solid var(--border);
border-radius: 6px;
object-fit: contain;
}
.items-tree-node-kind {
display: block;
margin-bottom: 3px;
color: var(--text-muted);
font-size: 9px;
font-weight: 900;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.items-tree-graph-node h3 {
margin: 0;
color: var(--text);
font-size: 14px;
line-height: 1.25;
overflow-wrap: anywhere;
}
.items-tree-node-subtitle {
margin: 8px 0 0;
color: var(--text-muted);
font-size: 11px;
font-weight: 800;
}
.items-tree-node-meta {
display: grid;
gap: 3px;
margin: 8px 0 0;
padding: 7px 0 0;
border-top: 1px solid var(--border);
color: var(--text-muted);
font-size: 11px;
line-height: 1.25;
list-style: none;
}
.items-tree-node-meta li {
overflow-wrap: anywhere;
}
.items-tree-fallback {
display: grid;
gap: 12px;
}
.items-tree-fallback-item {
display: flex;
align-items: center;
gap: 12px;
}
.items-tree-fallback-item img {
width: 52px;
height: 52px;
border-radius: 7px;
object-fit: contain;
}
.items-tree-fallback-item h3 {
font-size: 16px;
}
.items-tree-fallback-item p,
.items-tree-fallback-card p {
margin-top: 5px;
color: var(--text-muted);
}
.items-tree-fallback-section {
display: grid;
gap: 10px;
}
.items-tree-fallback-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 9px;
}
.items-tree-fallback-card {
min-width: 0;
border: 1px solid var(--border);
border-radius: 7px;
background: var(--surface-muted);
padding: 10px;
}
.items-tree-fallback-card.is-danger {
border-color: var(--danger);
}
.items-tree-fallback-card h4 {
font-size: 13px;
}
.items-tree-fallback-card ul {
display: grid;
gap: 5px;
margin: 9px 0 0;
padding-left: 20px;
color: var(--text-muted);
}
.items-tree-global-summary {
margin-top: 9px;
padding: 8px;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--surface-strong);
color: var(--text-muted);
}
.items-tree-global-summary > strong {
color: var(--text);
font-size: 11px;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.items-tree-global-summary ul {
margin-top: 6px;
}
.items-tree-empty {
color: var(--text-muted);
font-weight: 700;
}
body.eq2-shell.density-compact .items-tree-viewport {
height: clamp(460px, 66vh, 720px);
}
body.eq2-shell.density-compact .items-tree-graph-node-content {
padding: 8px 10px;
}
@media (max-width: 720px) {
.items-tree-intro {
align-items: flex-start;
}
.items-tree-toolbar-help {
width: 100%;
}
.items-tree-viewport {
height: 520px;
}
.items-tree-fallback-grid {
grid-template-columns: minmax(0, 1fr);
}
}
.spells-tab-panel {
display: grid;
gap: 14px;
color: var(--text);
}
.spells-tab-header {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--surface);
box-shadow: 0 8px 24px rgba(12, 18, 16, 0.08);
}
.spells-tab-header h2 {
margin: 0;
color: var(--text);
font-size: 18px;
letter-spacing: 0;
}
.server-table-row.spells-data-row {
grid-template-columns: 70px 96px 140px 90px 126px minmax(170px, 1fr) minmax(150px, auto);
min-width: 900px;
}
.server-table-row.spells-effects-row {
grid-template-columns: 64px 92px 132px 84px minmax(560px, 2.4fr) 72px 72px minmax(164px, auto);
align-items: stretch;
min-width: 1320px;
}
.server-table-heading.spells-effects-row {
align-items: center;
}
.server-table-row.spells-classes-row {
grid-template-columns: 70px 96px minmax(180px, 1fr) minmax(150px, 0.75fr) 86px 106px minmax(210px, auto);
min-width: 980px;
}
.server-table-row.spells-effects-row textarea {
box-sizing: border-box;
width: 100%;
min-height: 92px;
line-height: 1.35;
resize: vertical;
}
.server-table-row.spells-effects-row .server-row-actions {
align-self: start;
}
.spells-new-row {
background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}
.spells-tab-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.spells-main-form {
display: grid;
gap: 14px;
}
.spells-main-card,
.spells-main-actions {
display: grid;
gap: 12px;
padding: 14px;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--surface);
box-shadow: 0 8px 24px rgba(12, 18, 16, 0.08);
}
.spells-main-card h3 {
margin: 0;
color: var(--text);
font-size: 16px;
letter-spacing: 0;
}
.spells-main-meta-grid,
.spells-main-text-grid,
.spells-main-settings-grid,
.spells-main-appearance-grid,
.spells-main-toggle-grid {
display: grid;
gap: 8px;
align-items: end;
}
.spells-main-meta-grid {
grid-template-columns: repeat(4, minmax(140px, 1fr));
}
.spells-main-meta-grid > div {
display: grid;
gap: 4px;
min-width: 0;
padding: 8px;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--surface-strong);
color: var(--text-muted);
font-size: 12px;
font-weight: 700;
}
.spells-main-meta-grid strong {
color: var(--text);
font-size: 13px;
overflow-wrap: anywhere;
}
.spells-main-text-grid {
grid-template-columns: minmax(180px, 0.75fr) minmax(300px, 1.25fr);
}
.spells-main-settings-grid {
grid-template-columns: repeat(4, minmax(130px, 1fr));
}
.spells-main-side-layout {
display: grid;
grid-template-columns: minmax(260px, 0.8fr) minmax(320px, 1.2fr);
gap: 14px;
align-items: start;
}
.spells-main-appearance-grid {
grid-template-columns: repeat(2, minmax(120px, 1fr));
}
.spells-main-field,
.spells-main-toggle {
display: grid;
gap: 4px;
min-width: 0;
color: var(--text-muted);
font-size: 12px;
font-weight: 700;
}
.spells-main-field input,
.spells-main-field select,
.spells-main-field textarea {
box-sizing: border-box;
width: 100%;
min-height: 30px;
border: 1px solid var(--border-strong);
border-radius: 5px;
background: var(--surface-strong);
color: var(--text);
padding: 4px 6px;
}
.spells-main-field textarea {
min-height: 98px;
line-height: 1.35;
resize: vertical;
}
.spells-main-field input[readonly],
.spells-main-field textarea[readonly] {
background: var(--legacy-row-even);
color: var(--text);
}
.spells-main-field-wide,
.spells-main-script-field {
grid-column: span 2;
}
.spells-main-icon-preview {
display: flex;
gap: 10px;
align-items: center;
min-height: 44px;
}
.spells-main-icon-preview img {
width: 42px;
height: 42px;
object-fit: contain;
image-rendering: auto;
}
.spells-main-popup-link {
align-self: end;
}
.spells-main-toggle-grid {
grid-template-columns: repeat(3, minmax(150px, 1fr));
}
.spells-main-toggle {
grid-template-columns: 1fr auto;
align-items: center;
min-height: 32px;
padding: 5px 8px;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--surface-strong);
color: var(--text);
}
.spells-main-toggle span {
overflow-wrap: anywhere;
}
.spells-main-toggle-alert span {
color: var(--danger);
font-weight: 800;
}
.spells-main-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.spells-main-actions span {
color: var(--text-muted);
font-weight: 700;
}
.spells-search-page {
display: grid;
gap: 14px;
color: var(--text);
}
.spells-search-header,
.spells-search-panel {
display: grid;
gap: 10px;
padding: 14px;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--surface);
box-shadow: 0 8px 24px rgba(12, 18, 16, 0.08);
}
.spells-search-header h1 {
margin: 0;
color: var(--text);
font-size: 20px;
letter-spacing: 0;
}
.spells-search-header p {
margin: 0;
color: var(--text-muted);
}
.spells-search-form {
display: grid;
gap: 12px;
}
.spells-search-filter-grid,
.spells-search-lookup-row {
display: grid;
gap: 8px;
align-items: end;
}
.spells-search-filter-grid {
grid-template-columns: repeat(3, minmax(170px, 1fr)) auto;
}
.spells-search-lookup-row {
position: relative;
grid-template-columns: minmax(260px, 1fr) repeat(2, minmax(130px, 0.2fr)) minmax(170px, auto) auto;
}
.spells-search-lookup-field {
min-width: 0;
}
.spells-search-check-field {
display: flex;
align-items: end;
min-height: 30px;
}
.spells-search-check {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--text-muted);
font-size: 12px;
font-weight: 700;
}
.spells-search-check input {
width: 16px;
height: 16px;
margin: 0;
}
.spells-search-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
.spells-search-reload {
align-self: end;
}
.spells-search-results {
overflow-x: auto;
}
.server-table-row.spells-search-row {
grid-template-columns: 72px 54px minmax(180px, 1fr) minmax(320px, 1.6fr) 82px minmax(126px, 0.7fr) 54px 54px minmax(150px, 0.8fr) 58px 82px 74px 138px 82px;
min-width: 1576px;
align-items: start;
}
.spells-search-classic-refresh {
color: var(--text-muted);
font-size: 11px;
font-weight: 700;
}
.spells-classic-refresh-label {
display: inline-flex;
align-items: center;
margin-left: 8px;
padding: 3px 7px;
border: 1px solid var(--border-strong);
border-radius: 999px;
background: var(--surface-strong);
color: var(--text-muted);
font-size: 11px;
font-weight: 800;
vertical-align: middle;
}
.spells-search-icon img {
width: 32px;
height: 32px;
object-fit: contain;
}
.spells-search-links {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 4px;
font-size: 11px;
font-weight: 700;
}
.spells-search-links a {
display: inline;
margin-top: 0;
}
.spells-search-state {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 22px;
padding: 0 7px;
border-radius: 999px;
font-size: 11px;
font-weight: 800;
}
.spells-search-state.is-active {
background: color-mix(in srgb, #16a34a 18%, var(--surface-strong));
color: #15803d;
}
.spells-search-state.is-inactive {
background: color-mix(in srgb, var(--danger) 16%, var(--surface-strong));
color: var(--danger);
}
.spells-search-hide-form {
margin: 0;
}
.spells-search-hide-form button {
min-width: 58px;
}
.spells-action-page {
display: grid;
gap: 14px;
color: var(--text);
}
.spells-action-nav {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
.spells-action-card {
display: grid;
gap: 12px;
padding: 14px;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--surface);
box-shadow: 0 8px 24px rgba(12, 18, 16, 0.08);
}
.spells-action-card h3,
.spells-action-card p {
margin: 0;
}
.spells-action-copy,
.spells-action-effects {
color: var(--text-muted);
}
.spells-action-effects {
margin: 0;
padding-left: 18px;
}
.spells-action-choice-grid {
display: grid;
grid-template-columns: repeat(3, minmax(180px, 1fr));
gap: 8px;
align-items: end;
}
.spells-action-success {
border-color: color-mix(in srgb, #16a34a 32%, var(--border));
background: color-mix(in srgb, #16a34a 10%, var(--surface));
}
.spells-action-danger {
border-color: color-mix(in srgb, var(--danger) 35%, var(--border));
background: color-mix(in srgb, var(--danger) 8%, var(--surface));
}
.spells-action-success p {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
.spells-tier-stack {
display: grid;
gap: 14px;
}
.spells-tier-card,
.spells-tier-insert {
display: grid;
gap: 12px;
padding: 14px;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--surface);
box-shadow: 0 8px 24px rgba(12, 18, 16, 0.08);
}
.spells-tier-card-header,
.spells-tier-insert {
align-items: start;
}
.spells-tier-card-header {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 10px;
}
.spells-tier-card h3,
.spells-tier-insert h3 {
margin: 0;
color: var(--text);
font-size: 16px;
letter-spacing: 0;
}
.spells-tier-insert p {
margin: 4px 0 0;
color: var(--text-muted);
}
.spells-tier-section {
display: grid;
gap: 8px;
}
.spells-tier-section h4 {
margin: 0;
color: var(--text);
font-size: 13px;
letter-spacing: 0;
}
.spells-tier-grid,
.spells-tier-insert-grid {
display: grid;
gap: 8px;
align-items: end;
}
.spells-tier-grid {
grid-template-columns: repeat(4, minmax(130px, 1fr));
}
.spells-tier-identity-grid {
grid-template-columns: minmax(90px, 0.5fr) minmax(110px, 0.55fr) minmax(160px, 0.8fr) minmax(220px, 1.35fr);
}
.spells-tier-insert-grid {
grid-template-columns: minmax(110px, 0.35fr) minmax(180px, 0.65fr) auto;
}
.spells-tier-field {
display: grid;
gap: 4px;
min-width: 0;
color: var(--text-muted);
font-size: 12px;
font-weight: 700;
}
.spells-tier-field input,
.spells-tier-field select {
box-sizing: border-box;
width: 100%;
min-height: 30px;
border: 1px solid var(--border-strong);
border-radius: 5px;
background: var(--surface-strong);
color: var(--text);
padding: 4px 6px;
}
.spells-tier-field input[readonly] {
background: var(--legacy-row-even);
color: var(--text-muted);
}
.spells-tier-readonly {
color: var(--text-muted);
font-weight: 700;
}
.spells-script-page .script-editor-shell {
margin: 0;
}
.spells-script-page .SubPanel {
border-color: var(--border);
background: var(--surface);
}
.spells-trait-stack,
.spells-aa-page {
display: grid;
gap: 14px;
}
.spells-trait-card,
.spells-aa-panel {
display: grid;
gap: 12px;
padding: 14px;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--surface);
box-shadow: 0 8px 24px rgba(12, 18, 16, 0.08);
}
.spells-trait-new-card {
background: color-mix(in srgb, var(--accent) 7%, var(--surface));
}
.spells-trait-card-header {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.spells-trait-card h3,
.spells-aa-panel h3 {
margin: 0;
color: var(--text);
font-size: 16px;
letter-spacing: 0;
}
.spells-trait-card h3 span {
color: var(--danger);
font-size: 12px;
font-weight: 800;
}
.spells-trait-grid,
.spells-aa-grid {
display: grid;
grid-template-columns: repeat(4, minmax(130px, 1fr));
gap: 8px;
align-items: end;
}
.spells-trait-field,
.spells-aa-field {
display: grid;
gap: 4px;
min-width: 0;
color: var(--text-muted);
font-size: 12px;
font-weight: 700;
}
.spells-trait-field input,
.spells-trait-field select,
.spells-aa-field input,
.spells-aa-field textarea {
box-sizing: border-box;
width: 100%;
min-height: 30px;
border: 1px solid var(--border-strong);
border-radius: 5px;
background: var(--surface-strong);
color: var(--text);
padding: 4px 6px;
}
.spells-trait-field input[readonly],
.spells-aa-field input[readonly],
.spells-aa-field textarea[readonly] {
background: var(--legacy-row-even);
color: var(--text);
}
.spells-trait-empty-id {
align-self: stretch;
justify-content: end;
}
.spells-trait-empty-id strong {
display: flex;
align-items: center;
min-height: 30px;
color: var(--text-muted);
}
.spells-trait-readonly {
color: var(--text-muted);
font-weight: 700;
}
.spells-aa-field-wide {
grid-column: span 2;
}
.spells-aa-field textarea {
min-height: 92px;
line-height: 1.35;
resize: vertical;
}
.items-recipe-items-layout {
display: grid;
gap: 12px;
align-items: start;
}
.items-recipe-items-layout fieldset {
margin: 0;
border-color: var(--border);
background: var(--surface-strong);
color: var(--text);
}
.items-recipe-items-layout legend {
color: var(--text);
font-weight: bold;
}
.items-recipe-items-heading {
margin: 0 0 10px;
color: var(--text);
font-weight: bold;
}
.items-recipe-items-forms {
display: none;
}
.items-recipe-items-scroll {
max-width: 100%;
overflow-x: auto;
}
.items-recipe-items-table {
width: auto;
min-width: 760px;
border-collapse: collapse;
color: var(--text);
}
.items-recipe-items-table th,
.items-recipe-items-table td {
border: 1px solid var(--border);
background: var(--surface);
padding: 4px;
vertical-align: middle;
}
.items-recipe-items-table th {
background: var(--surface-muted);
color: var(--text);
font-weight: bold;
text-align: left;
}
.items-recipe-items-table tbody tr:nth-child(even) td {
background: var(--legacy-row-even);
}
.items-recipe-items-table input[type="text"] {
box-sizing: border-box;
min-height: 28px;
border: 1px solid var(--border-strong);
border-radius: 5px;
background: var(--surface-muted);
color: var(--text);
padding: 4px 6px;
}
.items-recipe-items-table input[readonly] {
background: var(--legacy-row-even);
color: var(--text-muted);
}
.items-recipe-item-id,
.items-recipe-item-recipe-id,
.items-recipe-item-icon {
width: 64px;
}
.items-recipe-item-name {
width: 410px;
}
.items-recipe-item-crc {
width: 100px;
}
.items-recipe-item-crc-field {
display: flex;
align-items: center;
gap: 8px;
}
.items-recipe-item-crc-link {
white-space: nowrap;
}
.items-recipe-item-command {
min-width: 62px;
padding: 5px 8px;
}
.items-recipe-items-empty,
.items-recipe-items-new-label {
color: var(--text-muted);
font-weight: bold;
}
.items-stats-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
gap: 14px;
align-items: start;
}
.items-stats-layout fieldset {
margin: 0;
border-color: var(--border);
background: var(--surface-strong);
color: var(--text);
}
.items-stats-layout legend {
color: var(--text);
font-weight: bold;
}
.items-stats-heading {
margin: 0 0 10px;
color: var(--text);
font-weight: bold;
}
.items-stats-forms {
display: none;
}
.items-stats-scroll {
max-width: 100%;
overflow-x: auto;
}
.items-stats-table {
width: auto;
min-width: 880px;
border-collapse: collapse;
color: var(--text);
}
.items-stats-table th,
.items-stats-table td {
border: 1px solid var(--border);
background: var(--surface);
padding: 4px;
vertical-align: middle;
}
.items-stats-table th {
background: var(--surface-muted);
color: var(--text);
font-weight: bold;
text-align: left;
}
.items-stats-table tbody tr:nth-child(even) td {
background: var(--legacy-row-even);
}
.items-stats-table input[type="text"],
.items-stats-table select {
box-sizing: border-box;
min-height: 28px;
border: 1px solid var(--border-strong);
border-radius: 5px;
background: var(--surface-muted);
color: var(--text);
padding: 4px 6px;
}
.items-stats-table input[readonly] {
background: var(--legacy-row-even);
color: var(--text-muted);
}
.items-stat-id,
.items-stat-item-id,
.items-stat-order {
width: 58px;
}
.items-stat-type,
.items-stat-subtype {
width: 150px;
}
.items-stat-number {
width: 82px;
}
.items-stat-string {
width: 140px;
}
.items-stat-command {
min-width: 62px;
padding: 5px 8px;
}
.items-stats-empty,
.items-stats-new-label {
color: var(--text-muted);
font-weight: bold;
}
.items-stats-mode-link {
display: inline-flex;
margin-top: 10px;
color: var(--link);
font-weight: bold;
}
.items-stats-preview {
min-width: 0;
}
.items-stats-preview table {
max-width: 100%;
}
body.eq2-shell #main-body .tooltipBox {
box-sizing: border-box;
width: 100%;
border: 1px solid rgba(147, 217, 255, 0.22);
border-radius: 7px;
background: #050709;
color: #ffffff;
padding: 10px;
box-shadow: var(--shadow-soft);
}
body.eq2-shell #main-body .tooltipBox .tooltipBoxtext {
display: block;
min-width: 0;
}
body.eq2-shell #main-body .tooltip-detail-label {
color: #93d9ff;
font-weight: 800;
}
.items-script-layout {
min-width: 0;
color: var(--text);
}
.items-script-layout fieldset {
margin: 0;
border-color: var(--border);
background: var(--surface-strong);
color: var(--text);
}
.items-script-layout legend {
color: var(--text);
font-weight: bold;
}
.items-script-empty {
color: var(--text-muted);
font-weight: bold;
}
.items-script-layout #scripteditor {
border: 1px solid var(--border-strong);
border-radius: 6px;
}
.items-base-layout {
min-width: 0;
color: var(--text);
}
.items-base-form {
display: grid;
gap: 12px;
margin: 0;
}
.items-base-grid {
display: grid;
grid-template-columns: minmax(600px, 1fr) minmax(220px, 0.34fr) minmax(260px, 0.42fr);
grid-template-areas:
"general slots toggles"
"adventure tradeskill adornments";
gap: 12px;
align-items: start;
min-width: 0;
}
.items-base-general {
grid-area: general;
min-width: 0;
}
.items-base-slots {
grid-area: slots;
min-width: 0;
}
.items-base-toggles {
grid-area: toggles;
min-width: 0;
}
.items-base-adornments {
grid-area: adornments;
min-width: 0;
}
.items-base-adventure,
.items-base-tradeskill {
min-width: 0;
}
.items-base-adventure {
grid-area: adventure;
}
.items-base-tradeskill {
grid-area: tradeskill;
}
.items-base-layout fieldset {
margin: 0;
min-width: 0;
min-inline-size: 0;
border-color: var(--border);
background: var(--surface-strong);
color: var(--text);
}
.items-base-general > fieldset {
max-width: 100%;
overflow-x: auto;
}
.items-base-layout legend {
color: var(--text);
font-weight: bold;
}
.items-base-layout table {
color: var(--text);
}
.items-base-general > fieldset > table {
width: 100%;
max-width: 100%;
table-layout: fixed;
}
.items-base-general > fieldset > table td {
min-width: 0;
overflow-wrap: anywhere;
white-space: normal;
}
.items-base-layout input[type="text"],
.items-base-layout textarea,
.items-base-layout select {
box-sizing: border-box;
border: 1px solid var(--border-strong);
border-radius: 5px;
background: var(--surface-muted);
color: var(--text);
padding: 4px 6px;
}
.items-base-general input[type="text"],
.items-base-general textarea,
.items-base-general select {
max-width: 100%;
}
.items-base-general textarea {
width: 100% !important;
}
.items-base-id-controls,
.items-base-active-control {
display: flex;
align-items: center;
}
.items-base-id-controls {
flex-wrap: wrap;
gap: 8px 12px;
}
.items-base-active-control {
gap: 6px;
color: var(--text-muted);
font-size: 11px;
font-weight: 700;
white-space: nowrap;
}
.items-base-active-control .blue_checkbox {
margin: 0;
}
.items-base-layout input[readonly],
.items-base-layout [style*="background-color:#ddd" i],
.items-base-layout [style*="background-color: #ddd" i],
.items-base-layout [style*="background:#ddd" i] {
background: var(--legacy-row-even) !important;
color: var(--text-muted) !important;
}
.items-base-layout #itemTSClassesGrid,
.items-base-layout #itemClassesTable,
.items-base-layout #itemAdornmentsGrid,
.items-base-checkbox-grid,
.items-base-class-groups,
.items-base-adornment-grid {
display: grid;
gap: 8px;
width: 100%;
}
.items-base-checkbox-grid {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.items-base-slots-table {
width: auto;
border-collapse: separate;
border-spacing: 0 4px;
table-layout: fixed;
}
.items-base-layout .items-base-slots-table {
display: table;
}
.items-base-slots-table th,
.items-base-slots-table td {
border: 0;
background: transparent;
color: var(--text);
padding: 1px 4px;
vertical-align: middle;
}
.items-base-slots-table th {
width: 68px;
color: var(--text);
font-weight: 600;
text-align: right;
white-space: nowrap;
}
.items-base-slots-table td {
width: 24px;
text-align: left;
}
.items-base-slots-table .blue_checkbox {
display: block;
margin: 0;
}
.items-base-layout #itemClassesTable,
.items-base-layout #itemTSClassesGrid,
.items-base-class-groups {
grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
align-items: stretch;
}
.items-base-adornment-grid label {
display: grid;
grid-template-columns: minmax(120px, 1fr) auto;
gap: 8px;
align-items: center;
color: var(--text);
}
.items-base-check-row {
display: grid;
grid-template-columns: minmax(0, 1fr) 22px;
gap: 8px;
align-items: center;
min-height: 24px;
color: var(--text);
}
.items-base-check-row > span {
min-width: 0;
overflow-wrap: anywhere;
text-align: left;
}
.items-base-check-row .blue_checkbox {
justify-self: start;
margin: 0;
}
.items-base-class-summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 8px;
padding: 6px 8px;
border: 1px solid var(--border);
border-radius: 5px;
background: var(--legacy-row-even);
color: var(--text);
}
.items-base-class-summary span {
color: var(--text-muted);
font-weight: bold;
}
.items-base-class-group {
display: grid;
gap: 5px;
align-content: start;
min-width: 0;
padding: 8px;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--surface-muted);
}
.items-base-class-group h3 {
margin: 0 0 3px;
padding-bottom: 4px;
border-bottom: 1px solid var(--border);
color: var(--text);
font-size: 12px;
font-weight: bold;
letter-spacing: 0;
text-align: left;
}
.items-base-class-group-featured {
background: var(--legacy-row-even);
}
.items-base-class-value {
display: inline-flex;
width: fit-content;
border-radius: 5px;
background: var(--legacy-row-even);
color: var(--text);
padding: 4px 6px;
}
.items-base-actions {
display: flex;
justify-content: center;
gap: 8px;
}
.items-base-command {
min-width: 100px;
}
.items-base-error,
.items-base-empty {
color: var(--danger);
font-weight: bold;
}
.items-mod-strings-layout {
display: grid;
gap: 12px;
align-items: start;
}
.items-mod-strings-layout fieldset {
margin: 0;
border-color: var(--border);
background: var(--surface-strong);
color: var(--text);
}
.items-mod-strings-layout legend {
color: var(--text);
font-weight: bold;
}
.items-mod-strings-heading {
margin: 0 0 8px;
color: var(--text);
font-weight: bold;
}
.items-mod-strings-forms {
display: none;
}
.items-mod-strings-scroll {
overflow-x: auto;
}
.items-mod-strings-table {
width: 100%;
min-width: 650px;
border: 0;
border-collapse: collapse;
color: var(--text);
}
.items-mod-strings-table th,
.items-mod-strings-table td {
border: 0;
border-bottom: 1px solid var(--border);
padding: 5px 6px;
vertical-align: middle;
}
.items-mod-strings-table th {
background: var(--legacy-header);
color: var(--text);
text-align: left;
}
.items-mod-strings-table tbody tr:nth-child(odd) {
background: var(--legacy-row-odd);
}
.items-mod-strings-table tbody tr:nth-child(even) {
background: var(--legacy-row-even);
}
.items-mod-strings-table input[type="text"] {
box-sizing: border-box;
width: 100%;
min-height: 28px;
border: 1px solid var(--border-strong);
border-radius: 5px;
background: var(--surface-muted);
color: var(--text);
padding: 4px 6px;
}
.items-mod-strings-table input[readonly] {
background: var(--legacy-row-even);
color: var(--text-muted);
}
.items-mod-strings-table .items-mod-string-id,
.items-mod-strings-table .items-mod-string-item-id,
.items-mod-strings-table .items-mod-string-index {
max-width: 70px;
}
.items-mod-strings-table .items-mod-string-mod {
min-width: 130px;
}
.items-mod-strings-table .items-mod-string-description {
min-width: 220px;
}
.items-mod-strings-table .items-mod-string-command {
min-width: 62px;
padding: 5px 8px;
}
.items-mod-strings-empty {
color: var(--text-muted);
font-weight: bold;
}
.items-mod-strings-new-label {
text-align: center;
}
.eq2-history-page {
display: grid;
gap: 14px;
}
.eq2-history-panel,
.eq2-history-empty {
padding: 14px;
}
.eq2-history-filters {
display: grid;
grid-template-columns: repeat(2, minmax(180px, 280px));
gap: 12px;
align-items: end;
}
.eq2-history-log {
display: grid;
gap: 10px;
min-width: 0;
}
.eq2-history-status {
margin: 0;
}
.eq2-history-entry {
border: 1px solid var(--border);
border-radius: 8px;
background: var(--surface-strong);
overflow: hidden;
}
.eq2-history-entry header {
display: flex;
flex-wrap: wrap;
gap: 6px 10px;
align-items: center;
border-bottom: 1px solid var(--border);
background: var(--legacy-header);
color: var(--text);
padding: 8px 10px;
}
.eq2-history-object,
.eq2-history-table-pill {
color: var(--text);
font-weight: 800;
}
.eq2-history-entry pre {
margin: 0;
white-space: pre-wrap;
word-break: break-word;
background: var(--surface-muted);
color: var(--text);
padding: 10px;
font-family: Consolas, "Courier New", monospace;
font-size: 12px;
line-height: 1.45;
}
.eq2-history-count {
justify-self: start;
color: var(--text-muted);
font-weight: bold;
}
.items-history-page {
display: grid;
gap: 14px;
}
.items-history-filters {
display: grid;
grid-template-columns: repeat(2, minmax(180px, 280px));
gap: 12px;
align-items: end;
}
.items-history-log {
display: grid;
gap: 10px;
}
.items-history-entry {
border: 1px solid var(--border);
border-radius: 8px;
background: var(--surface-strong);
overflow: hidden;
}
.items-history-entry header {
display: flex;
flex-wrap: wrap;
gap: 6px 10px;
border-bottom: 1px solid var(--border);
background: var(--legacy-header);
color: var(--text);
padding: 8px 10px;
}
.items-history-entry pre {
margin: 0;
white-space: pre-wrap;
word-break: break-word;
background: var(--surface-muted);
color: var(--text);
padding: 10px;
font-family: Consolas, "Courier New", monospace;
font-size: 12px;
line-height: 1.45;
}
.items-history-empty,
.items-history-count {
color: var(--text-muted);
font-weight: bold;
}
.items-search-form {
display: grid;
gap: 12px;
margin: 0;
}
.items-search-form-grid {
grid-template-columns: repeat(4, minmax(150px, 1fr));
}
.items-search-field {
display: grid;
gap: 5px;
align-content: start;
}
.items-search-field-wide {
grid-column: 1 / -1;
}
.items-search-field label {
color: var(--text-muted);
font-weight: bold;
}
.items-search-field input[type="text"],
.items-search-field input[type="number"],
.items-search-field select,
.items-search-lookup input[type="text"] {
box-sizing: border-box;
width: 100%;
min-height: 31px;
border: 1px solid var(--border-strong);
border-radius: 6px;
background: var(--surface-muted);
color: var(--text);
padding: 6px 8px;
}
.items-search-lookup {
position: relative;
max-width: 520px;
}
.items-search-check {
display: inline-flex;
align-items: center;
gap: 5px;
color: var(--text-muted);
font-weight: normal;
}
.items-search-check-standalone {
min-height: 31px;
align-items: end;
}
.items-search-results {
overflow-x: auto;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--surface-strong);
}
.items-search-results table {
width: 100%;
min-width: 960px;
border: 0;
border-collapse: collapse;
color: var(--text);
}
.items-search-results th,
.items-search-results td {
border: 0;
border-bottom: 1px solid var(--border);
padding: 7px 8px;
vertical-align: middle;
}
.items-search-results th {
background: var(--legacy-header);
color: var(--text);
text-align: left;
white-space: nowrap;
}
.items-search-results tbody tr:nth-child(odd) {
background: var(--legacy-row-odd);
}
.items-search-results tbody tr:nth-child(even) {
background: var(--legacy-row-even);
}
.items-search-results tbody tr:hover {
background: var(--legacy-row-hover);
}
.items-search-variant {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 42px;
border: 1px solid var(--border);
border-radius: 999px;
background: var(--surface-muted);
color: var(--text-muted);
font-size: 11px;
font-weight: bold;
line-height: 1;
padding: 4px 8px;
white-space: nowrap;
}
.items-search-variant-pvp {
border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
background: color-mix(in srgb, var(--accent) 14%, var(--surface-strong));
color: var(--text);
}
.items-search-icon {
text-align: center;
}
.items-search-icon img {
display: inline-block;
width: 32px;
height: 32px;
object-fit: contain;
}
body.eq2-shell #main-body .eq2-panel > fieldset {
margin: 0;
border: 0;
background: transparent;
padding: 16px;
color: var(--text);
}
body.eq2-shell.density-compact #main-body .eq2-panel > fieldset {
padding: 9px;
}
.server-recipes-page {
display: grid;
gap: 14px;
color: var(--text);
}
.server-recipes-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
}
.server-recipes-header h1 {
margin: 0;
font-size: 22px;
font-weight: 700;
letter-spacing: 0;
}
.server-recipes-header p {
margin: 4px 0 0;
color: var(--text-muted);
}
.server-recipes-action,
.server-recipes-actions a {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 30px;
padding: 0 12px;
border: 1px solid var(--border-strong);
border-radius: 6px;
background: var(--surface-strong);
color: var(--accent-strong);
font-weight: 700;
text-decoration: none;
}
.server-recipes-panel,
.server-recipes-results,
.server-recipes-detail > fieldset {
border: 1px solid var(--border);
border-radius: 8px;
background: var(--surface);
box-shadow: 0 8px 24px rgba(12, 18, 16, 0.08);
}
.server-recipes-panel,
.server-recipes-results {
padding: 14px;
}
.server-recipes-new h2 {
margin: 0 0 12px;
font-size: 16px;
letter-spacing: 0;
}
.server-recipes-search,
.server-recipes-create {
display: grid;
grid-template-columns: minmax(180px, 2fr) minmax(90px, 0.7fr) minmax(90px, 0.7fr) minmax(170px, 1.2fr) auto auto auto;
gap: 10px;
align-items: end;
}
.server-recipes-create {
grid-template-columns: minmax(220px, 420px) auto;
justify-content: start;
}
.server-recipes-field {
display: grid;
gap: 4px;
min-width: 0;
}
.server-recipes-field label,
.server-recipes-check {
color: var(--text-muted);
font-size: 12px;
font-weight: 700;
}
.server-recipes-field input,
.server-recipes-field select {
box-sizing: border-box;
width: 100%;
min-height: 30px;
border: 1px solid var(--border-strong);
border-radius: 6px;
background: var(--surface-strong);
color: var(--text);
}
.server-recipes-check {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 30px;
white-space: nowrap;
}
.server-recipes-actions {
display: inline-flex;
align-items: center;
gap: 8px;
}
.server-recipes-status {
border: 1px solid var(--border);
border-radius: 8px;
padding: 10px 12px;
background: var(--surface-muted);
color: var(--text);
font-weight: 700;
}
.server-recipes-results {
overflow-x: auto;
}
.server-recipes-note {
margin: 0 0 10px;
color: var(--text-muted);
font-size: 12px;
font-weight: 700;
}
.server-recipes-results table {
width: 100%;
border-collapse: collapse;
background: var(--surface-strong);
}
.server-recipes-results th,
.server-recipes-results td {
padding: 7px 9px;
border-bottom: 1px solid var(--border);
color: var(--text);
text-align: left;
}
.server-recipes-results th {
background: var(--legacy-header);
color: var(--text);
}
.server-recipes-results tbody tr:nth-child(odd) {
background: var(--legacy-row-odd);
}
.server-recipes-results tbody tr:nth-child(even) {
background: var(--legacy-row-even);
}
.server-recipes-results tbody tr:hover {
background: var(--legacy-row-hover);
}
.server-recipes-note-row {
--server-recipe-note-color: #f97316;
background: color-mix(in srgb, var(--server-recipe-note-color) 22%, var(--surface));
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--server-recipe-note-color) 40%, transparent), 0 0 0 2px color-mix(in srgb, var(--server-recipe-note-color) 30%, transparent);
}
.server-recipes-icon {
width: 46px;
text-align: center;
}
.server-recipes-icon img,
.server-recipes-detail img {
max-width: 42px;
max-height: 42px;
object-fit: contain;
}
.server-recipes-detail {
overflow-x: auto;
}
.server-recipes-detail > fieldset {
padding: 12px;
color: var(--text);
}
.server-recipes-detail fieldset {
border-color: var(--border);
color: var(--text);
}
.server-recipes-detail legend {
color: var(--text);
font-weight: 700;
}
.server-recipes-detail table,
.server-recipes-detail .RecipeDataTable,
.server-recipes-detail .ContrastTable {
background: var(--surface-strong) !important;
color: var(--text);
}
.server-recipes-detail td,
.server-recipes-detail th,
.server-recipes-detail label,
.server-recipes-detail strong {
color: var(--text);
}
.server-recipes-detail input,
.server-recipes-detail select,
.server-recipes-detail textarea {
border: 1px solid var(--border-strong);
border-radius: 5px;
background: var(--surface-strong);
color: var(--text);
}
.server-recipes-detail .RecipeDataRow,
.server-recipes-detail .RecipeProductRow,
.server-recipes-detail tr[style*="background:#eee"],
.server-recipes-detail tr[bgcolor="#dddddd"] {
background: var(--legacy-row-even) !important;
color: var(--text);
}
.server-recipe-detail {
display: grid;
gap: 14px;
color: var(--text);
}
.server-recipe-detail-header {
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--surface);
}
.server-recipe-detail-header h2 {
margin: 0;
font-size: 20px;
letter-spacing: 0;
}
.server-recipe-detail-header p {
margin: 3px 0 0;
color: var(--text-muted);
}
.server-recipe-detail-grid {
display: grid;
grid-template-columns: minmax(320px, 0.9fr) minmax(520px, 1.35fr);
gap: 12px;
align-items: start;
}
.server-recipe-card {
display: grid;
gap: 10px;
min-width: 0;
padding: 12px;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--surface);
box-shadow: 0 8px 24px rgba(12, 18, 16, 0.08);
}
.server-recipe-card h3,
.server-recipe-component-section h4,
.server-recipe-class-group h4 {
margin: 0;
color: var(--text);
letter-spacing: 0;
}
.server-recipe-card h3 {
font-size: 16px;
}
.server-recipe-component-section {
display: grid;
gap: 6px;
}
.server-recipe-component-section h4 {
padding-bottom: 4px;
border-bottom: 1px solid var(--border);
font-size: 12px;
text-transform: uppercase;
}
.server-recipe-component-row {
display: grid;
grid-template-columns: minmax(74px, 0.7fr) minmax(60px, 0.45fr) minmax(150px, 1fr) auto;
gap: 8px;
align-items: end;
padding: 8px;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--surface-muted);
}
.server-recipe-component-row.incomplete {
border-color: var(--accent-warm);
}
.server-recipe-component-row label,
.server-recipe-product-inputs label,
.server-recipe-field {
display: grid;
gap: 4px;
min-width: 0;
}
.server-recipe-component-row label span,
.server-recipe-product-inputs label span,
.server-recipe-field label {
color: var(--text-muted);
font-size: 12px;
font-weight: bold;
}
.server-recipe-component-row input[type="text"],
.server-recipe-product-inputs input[type="text"],
.server-recipe-field input,
.server-recipe-field select,
.server-recipe-field textarea {
box-sizing: border-box;
width: 100%;
min-height: 30px;
border: 1px solid var(--border-strong);
border-radius: 5px;
background: var(--surface-strong);
color: var(--text);
padding: 4px 6px;
}
.server-recipe-field textarea {
min-height: 72px;
resize: vertical;
}
.server-recipe-component-name {
align-self: center;
min-width: 0;
overflow-wrap: anywhere;
}
.server-recipe-icon-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 6px;
min-width: 46px;
}
.server-recipe-products {
grid-column: 2;
}
.server-recipe-linked-items {
grid-column: 1 / -1;
}
.server-recipe-linked-items-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 8px;
}
.server-recipe-linked-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 8px;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--surface-muted);
}
.server-recipe-linked-item a {
min-width: 0;
overflow-wrap: anywhere;
}
.server-recipe-linked-item-uses {
color: var(--text-muted);
font-size: 12px;
white-space: nowrap;
}
.server-recipe-linked-empty {
margin: 0;
color: var(--text-muted);
}
.server-recipe-products-form {
display: grid;
gap: 8px;
}
.server-recipe-product-header,
.server-recipe-product-row {
display: grid;
grid-template-columns: 70px repeat(2, minmax(180px, 1fr));
gap: 8px;
align-items: stretch;
}
.server-recipe-product-header {
color: var(--text-muted);
font-size: 12px;
font-weight: bold;
}
.server-recipe-product-row {
padding: 8px;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--surface-muted);
}
.server-recipe-product-slot {
display: grid;
gap: 6px;
min-width: 0;
}
.server-recipe-product-inputs {
display: grid;
grid-template-columns: minmax(80px, 1fr) minmax(54px, 0.55fr);
gap: 6px;
}
.server-recipe-product-item {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.server-recipe-product-item a {
min-width: 0;
overflow-wrap: anywhere;
}
.server-recipe-details {
grid-column: 1 / 3;
}
.server-recipe-details-form {
display: grid;
grid-template-columns: repeat(3, minmax(160px, 1fr));
gap: 10px;
align-items: end;
}
.server-recipe-field-wide,
.server-recipe-class-section {
grid-column: 1 / -1;
}
.server-recipe-check-row {
display: grid;
grid-template-columns: minmax(0, 1fr) 22px;
gap: 8px;
align-items: center;
min-height: 26px;
color: var(--text);
}
.server-recipe-check-row > span {
min-width: 0;
text-align: right;
overflow-wrap: anywhere;
}
.server-recipe-check-row .blue_checkbox {
justify-self: end;
margin: 0;
}
.server-recipe-class-summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 8px;
padding: 6px 8px;
border: 1px solid var(--border);
border-radius: 5px;
background: var(--legacy-row-even);
}
.server-recipe-class-summary span {
color: var(--text-muted);
font-weight: bold;
}
.server-recipe-class-groups {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 8px;
}
.server-recipe-class-group {
display: grid;
gap: 5px;
align-content: start;
padding: 8px;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--surface-muted);
}
.server-recipe-class-group h4 {
padding-bottom: 4px;
border-bottom: 1px solid var(--border);
font-size: 12px;
}
.server-recipe-components-page,
.server-recipe-component-detail {
display: grid;
gap: 14px;
color: var(--text);
}
.server-recipe-components-search {
display: grid;
grid-template-columns: minmax(220px, 420px) auto;
gap: 10px;
align-items: end;
justify-content: start;
}
.server-recipe-return a {
display: inline-flex;
align-items: center;
min-height: 30px;
padding: 0 12px;
border: 1px solid var(--border-strong);
border-radius: 6px;
background: var(--surface-strong);
color: var(--accent-strong);
font-weight: 700;
text-decoration: none;
}
.server-recipe-component-columns {
display: grid;
grid-template-columns: minmax(420px, 1fr) minmax(420px, 1fr);
gap: 12px;
align-items: start;
}
.server-recipe-component-items {
display: grid;
gap: 6px;
}
.server-recipe-component-item-header,
.server-recipe-component-item-row {
display: grid;
grid-template-columns: minmax(82px, 0.5fr) 46px minmax(180px, 1fr) auto;
gap: 8px;
align-items: center;
}
.server-recipe-component-item-header {
color: var(--text-muted);
font-size: 12px;
font-weight: bold;
}
.server-recipe-component-item-row {
padding: 8px;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--surface-muted);
}
.server-recipe-component-suggestion {
grid-template-columns: minmax(82px, 0.5fr) 46px minmax(180px, 1fr) 1px;
}
.server-recipe-component-item-row input[type="text"] {
box-sizing: border-box;
width: 100%;
min-height: 30px;
border: 1px solid var(--border-strong);
border-radius: 5px;
background: var(--surface-strong);
color: var(--text);
padding: 4px 6px;
}
.server-recipe-component-icon {
display: flex;
align-items: center;
justify-content: center;
min-height: 34px;
}
.server-recipe-component-icon img {
max-width: 42px;
max-height: 42px;
object-fit: contain;
}
.server-recipe-component-name {
min-width: 0;
overflow-wrap: anywhere;
}
.server-recipe-component-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.server-recipe-component-tags span,
.server-recipe-component-empty {
border: 1px solid var(--border);
border-radius: 999px;
background: var(--legacy-row-even);
color: var(--text);
padding: 4px 8px;
font-size: 12px;
font-weight: bold;
}
.server-recipe-component-empty {
border-radius: 6px;
font-size: 13px;
}
.server-commands-page {
display: grid;
gap: 14px;
color: var(--text);
}
.server-commands-table {
display: grid;
gap: 6px;
padding: 12px;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--surface);
box-shadow: 0 8px 24px rgba(12, 18, 16, 0.08);
overflow-x: auto;
}
.server-commands-header,
.server-commands-row {
display: grid;
grid-template-columns: 54px 70px minmax(140px, 1fr) minmax(120px, 0.8fr) 80px 96px auto;
gap: 8px;
align-items: center;
min-width: 850px;
}
.server-commands-header {
padding: 0 8px 4px;
color: var(--text-muted);
font-size: 12px;
font-weight: bold;
}
.server-commands-row {
margin: 0;
padding: 8px;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--surface-muted);
}
.server-commands-row:nth-child(even) {
background: var(--legacy-row-even);
}
.server-commands-id {
font-weight: bold;
text-align: center;
}
.server-commands-row input[type="text"] {
box-sizing: border-box;
width: 100%;
min-height: 30px;
border: 1px solid var(--border-strong);
border-radius: 5px;
background: var(--surface-strong);
color: var(--text);
padding: 4px 6px;
}
.server-commands-new-row {
border-color: var(--border-strong);
}
.server-loot-page {
display: grid;
gap: 14px;
color: var(--text);
}
.server-loot-search-panel {
display: grid;
gap: 12px;
}
.server-loot-mode-tabs {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.server-loot-mode-tabs a,
.server-loot-pages a {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 30px;
padding: 0 11px;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--surface-strong);
color: var(--text);
font-weight: 700;
text-decoration: none;
}
.server-loot-mode-tabs a.is-active,
.server-loot-pages a.is-active {
border-color: var(--accent);
background: color-mix(in srgb, var(--accent) 18%, var(--surface-strong));
color: var(--accent-strong);
}
.server-loot-name-search,
.server-loot-select-grid {
display: grid;
grid-template-columns: minmax(240px, 420px) auto;
gap: 12px;
align-items: end;
}
.server-loot-lookup {
position: relative;
}
.server-loot-empty {
margin: 0;
color: var(--text-muted);
font-weight: 700;
}
.server-loot-all,
.server-loot-detail,
.server-loot-drops {
border: 1px solid var(--border);
border-radius: 8px;
background: var(--surface);
box-shadow: 0 8px 24px rgba(12, 18, 16, 0.08);
overflow-x: auto;
padding: 14px;
}
.server-loot-all-toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 10px;
}
.server-loot-all-toolbar strong {
display: block;
color: var(--text);
font-size: 15px;
}
.server-loot-all-toolbar span,
.server-loot-page-size label {
color: var(--text-muted);
font-size: 12px;
font-weight: 700;
}
.server-loot-list-actions,
.server-loot-page-size {
display: inline-flex;
align-items: center;
gap: 8px;
}
.server-loot-list-actions select,
.server-loot-page-size select,
.server-loot-list-select select {
min-height: 30px;
border: 1px solid var(--border-strong);
border-radius: 6px;
background: var(--surface-strong);
color: var(--text);
}
.server-loot-pages {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 6px 0 12px;
}
.server-loot-table-list {
min-width: 960px;
}
.server-loot-table-list th,
.server-loot-table-list td {
color: var(--text);
vertical-align: middle;
}
.server-loot-table-list input[type="checkbox"] {
width: 17px;
height: 17px;
accent-color: var(--accent);
}
.server-loot-coin-summary {
white-space: nowrap;
}
.server-loot-coin-summary span {
display: inline-flex;
align-items: center;
gap: 3px;
margin-right: 7px;
font-variant-numeric: tabular-nums;
}
.server-loot-coin-summary img,
.server-loot-coin-group img {
width: 16px;
height: 16px;
object-fit: contain;
}
.server-loot-edit-list,
.server-loot-drop-table {
display: grid;
gap: 8px;
margin-top: 12px;
overflow-x: auto;
padding-bottom: 2px;
}
.server-loot-edit-row {
display: grid;
grid-template-columns: minmax(520px, 1.35fr) minmax(340px, 0.95fr) minmax(220px, 0.7fr);
gap: 12px;
align-items: stretch;
min-width: 1120px;
margin: 0;
padding: 10px;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--surface-muted);
}
.server-loot-primary-panel,
.server-loot-coin-panel,
.server-loot-actions-panel {
min-width: 0;
}
.server-loot-primary-panel {
display: grid;
grid-template-columns: 92px minmax(150px, 1fr) repeat(3, minmax(68px, 78px));
gap: 8px;
align-items: end;
}
.server-loot-coin-panel {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.server-loot-actions-panel {
display: grid;
grid-template-rows: auto 1fr;
gap: 8px;
align-content: space-between;
}
.server-loot-edit-row label,
.server-loot-list-select {
display: grid;
gap: 4px;
min-width: 0;
color: var(--text-muted);
font-size: 12px;
font-weight: 700;
}
.server-loot-edit-row input[type="number"],
.server-loot-drop-row input[type="number"],
.server-loot-edit-row input[type="text"],
.server-loot-drop-row input[type="text"] {
box-sizing: border-box;
width: 100%;
min-height: 30px;
border: 1px solid var(--border-strong);
border-radius: 5px;
background: var(--surface-strong);
color: var(--text);
padding: 4px 6px;
}
.server-loot-id-block {
display: grid;
gap: 2px;
align-content: end;
min-height: 54px;
color: var(--text-muted);
font-size: 12px;
font-weight: 700;
}
.server-loot-id-block strong {
color: var(--text);
font-size: 16px;
}
.server-loot-coin-group {
display: grid;
grid-template-columns: repeat(4, minmax(38px, 1fr));
gap: 5px;
align-content: end;
padding: 8px;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--surface-strong);
}
.server-loot-coin-group > span {
grid-column: 1 / -1;
color: var(--text-muted);
font-size: 12px;
font-weight: 700;
}
.server-loot-coin-group label {
display: flex;
align-items: center;
gap: 4px;
}
.server-loot-form-actions {
align-self: end;
justify-content: flex-start;
flex-wrap: wrap;
}
.server-loot-drop-header,
.server-loot-drop-row {
display: grid;
grid-template-columns: 96px minmax(260px, 1.35fr) 96px 82px 76px minmax(124px, 0.75fr) minmax(150px, auto);
gap: 8px;
align-items: center;
min-width: 980px;
}
.server-loot-drop-header {
padding: 8px 10px;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--legacy-header);
color: var(--text);
font-size: 12px;
font-weight: 700;
}
.server-loot-drop-row {
margin: 0;
padding: 8px 10px;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--surface-muted);
}
.server-loot-drop-row:nth-child(even) {
background: var(--legacy-row-even);
}
.server-loot-drop-field {
display: grid;
gap: 4px;
min-width: 0;
}
.server-loot-drop-field span {
display: none;
color: var(--text-muted);
font-size: 12px;
font-weight: 700;
}
.server-loot-drop-new {
border-color: var(--border-strong);
}
.server-loot-drop-item {
display: flex;
align-items: center;
gap: 8px;
min-height: 34px;
min-width: 0;
}
.server-loot-drop-item img {
width: 32px;
height: 32px;
object-fit: contain;
}
.server-loot-drop-item a,
.server-loot-drop-item span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.server-loot-global-page {
display: grid;
gap: 14px;
color: var(--text);
}
.server-loot-global-table {
display: grid;
gap: 7px;
padding: 12px;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--surface);
box-shadow: 0 8px 24px rgba(12, 18, 16, 0.08);
overflow-x: auto;
}
.server-loot-global-header,
.server-loot-global-row {
display: grid;
grid-template-columns: 100px 80px minmax(260px, 1fr) 80px 80px 80px 180px;
gap: 8px;
align-items: end;
min-width: 960px;
}
.server-loot-global-header {
padding: 0 8px 4px;
color: var(--text-muted);
font-size: 12px;
font-weight: 700;
}
.server-loot-global-row {
margin: 0;
padding: 8px;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--surface-muted);
}
.server-loot-global-row:nth-child(even) {
background: var(--legacy-row-even);
}
.server-loot-global-field {
display: grid;
gap: 4px;
min-width: 0;
}
.server-loot-global-field label {
color: var(--text-muted);
font-size: 12px;
font-weight: 700;
}
.server-loot-global-field input,
.server-loot-global-field select {
box-sizing: border-box;
width: 100%;
min-height: 30px;
border: 1px solid var(--border-strong);
border-radius: 5px;
background: var(--surface-strong);
color: var(--text);
padding: 4px 6px;
}
.server-loot-global-picker a,
.server-loot-global-picker span,
.server-loot-global-picker small {
overflow-wrap: anywhere;
}
.server-loot-global-picker small {
color: var(--text-muted);
}
.server-loot-global-picker [hidden] {
display: none;
}
.server-variables-page,
.server-icons-page {
display: grid;
gap: 14px;
color: var(--text);
}
.server-variables-panel,
.server-variables-table,
.server-icons-grid {
border: 1px solid var(--border);
border-radius: 8px;
background: var(--surface);
box-shadow: 0 8px 24px rgba(12, 18, 16, 0.08);
overflow-x: auto;
padding: 14px;
}
.server-variables-panel h2 {
margin: 0 0 12px;
color: var(--text);
font-size: 16px;
letter-spacing: 0;
}
.server-variables-table {
display: grid;
gap: 7px;
}
.server-variables-header,
.server-variables-row {
display: grid;
grid-template-columns: minmax(170px, 0.75fr) minmax(260px, 1.2fr) minmax(280px, 1.35fr) auto;
gap: 8px;
align-items: start;
min-width: 900px;
}
.server-variables-header {
padding: 0 8px 4px;
color: var(--text-muted);
font-size: 12px;
font-weight: 700;
}
.server-variables-row {
margin: 0;
padding: 8px;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--surface-muted);
}
.server-variables-row:nth-child(even) {
background: var(--legacy-row-even);
}
.server-variables-new-row {
min-width: 0;
}
.server-variables-field {
display: grid;
gap: 4px;
min-width: 0;
margin: 0;
color: var(--text-muted);
font-size: 12px;
font-weight: 700;
}
.server-variables-field input[type="text"],
.server-variables-field textarea {
box-sizing: border-box;
width: 100%;
border: 1px solid var(--border-strong);
border-radius: 5px;
background: var(--surface-strong);
color: var(--text);
padding: 5px 7px;
}
.server-variables-field input[type="text"] {
min-height: 30px;
}
.server-variables-field textarea {
min-height: 64px;
resize: vertical;
}
.server-variables-empty,
.server-icons-empty {
margin: 0;
color: var(--text-muted);
font-weight: 700;
}
.server-icons-tabs {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.server-icons-tabs a {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 30px;
padding: 0 11px;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--surface-strong);
color: var(--text);
font-weight: 700;
text-decoration: none;
}
.server-icons-tabs a.is-active {
border-color: var(--accent);
background: color-mix(in srgb, var(--accent) 18%, var(--surface-strong));
color: var(--accent-strong);
}
.server-icons-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
gap: 10px;
overflow: visible;
}
.server-icon-card {
display: grid;
justify-items: center;
gap: 5px;
min-height: 94px;
margin: 0;
padding: 8px;
border: 1px solid var(--border);
border-radius: 7px;
background: var(--surface-muted);
color: var(--text);
}
.server-icon-id {
color: var(--text-muted);
font-size: 12px;
font-weight: 700;
}
.server-icon-preview {
display: inline-grid;
place-items: center;
width: 44px;
height: 44px;
border-radius: 6px;
background-color: rgba(0, 0, 0, 0.22);
}
.server-icon-preview img {
width: 40px;
height: 40px;
object-fit: none;
}
.server-icon-card figcaption {
width: 100%;
min-height: 14px;
color: var(--text-muted);
font-size: 11px;
line-height: 1.25;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.server-lua-blocks-page {
display: grid;
gap: 14px;
color: var(--text);
}
.server-lua-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
.server-lua-panel,
.server-lua-list {
border: 1px solid var(--border);
border-radius: 8px;
background: var(--surface);
box-shadow: 0 8px 24px rgba(12, 18, 16, 0.08);
padding: 14px;
}
.server-lua-panel h2 {
margin: 0 0 12px;
color: var(--text);
font-size: 16px;
letter-spacing: 0;
}
.server-lua-form {
display: grid;
grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) minmax(140px, 0.7fr) auto;
gap: 10px;
align-items: end;
}
.server-lua-block-form {
grid-template-columns: minmax(180px, 1fr) minmax(190px, 1fr) minmax(160px, 0.8fr) minmax(120px, 0.55fr);
}
.server-lua-field,
.server-lua-static {
display: grid;
gap: 4px;
min-width: 0;
margin: 0;
color: var(--text-muted);
font-size: 12px;
font-weight: 700;
}
.server-lua-field input[type="text"],
.server-lua-field select,
.server-lua-field textarea {
box-sizing: border-box;
width: 100%;
border: 1px solid var(--border-strong);
border-radius: 5px;
background: var(--surface-strong);
color: var(--text);
padding: 5px 7px;
}
.server-lua-field input[type="text"],
.server-lua-field select {
min-height: 30px;
}
.server-lua-field textarea {
min-height: 82px;
resize: vertical;
}
.server-lua-field .server-lua-code,
.server-lua-code {
min-height: 220px;
font-family: Consolas, "Courier New", monospace;
font-size: 12px;
line-height: 1.45;
tab-size: 4;
}
.server-lua-wide {
grid-column: 1 / -1;
}
.server-lua-static strong {
color: var(--text);
font-size: 14px;
}
.server-lua-list {
display: grid;
gap: 12px;
}
.server-lua-category {
display: grid;
gap: 10px;
padding: 12px;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--surface-muted);
}
.server-lua-category-header {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 10px;
align-items: flex-start;
}
.server-lua-category-header span,
.server-lua-category-header p,
.server-lua-meta,
.server-lua-empty {
color: var(--text-muted);
font-size: 12px;
font-weight: 700;
}
.server-lua-category-header h2,
.server-lua-block-card h3 {
margin: 0;
color: var(--text);
font-size: 15px;
letter-spacing: 0;
}
.server-lua-category-header p,
.server-lua-block-card p {
margin: 3px 0 0;
}
.server-lua-block-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 10px;
}
.server-lua-block-card {
display: grid;
gap: 8px;
padding: 10px;
border: 1px solid var(--border);
border-radius: 7px;
background: var(--surface-strong);
}
.server-lua-block-card header {
display: flex;
justify-content: space-between;
gap: 8px;
align-items: flex-start;
}
.server-lua-block-card p {
color: var(--text-muted);
min-height: 16px;
}
.server-lua-meta {
display: flex;
flex-wrap: wrap;
gap: 7px;
}
.server-lua-meta span {
padding: 2px 6px;
border: 1px solid var(--border);
border-radius: 999px;
background: var(--surface-muted);
}
.server-lua-block-card pre {
max-height: 180px;
margin: 0;
padding: 9px;
border: 1px solid var(--border);
border-radius: 6px;
background: color-mix(in srgb, var(--surface-muted) 75%, #000 25%);
color: var(--text);
font-family: Consolas, "Courier New", monospace;
font-size: 12px;
line-height: 1.4;
overflow: auto;
white-space: pre-wrap;
}
.server-misc-scripts-page {
display: grid;
gap: 14px;
color: var(--text);
}
.server-misc-script-tabs {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.server-misc-script-tabs a {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 30px;
padding: 0 11px;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--surface-strong);
color: var(--text);
font-weight: 700;
text-decoration: none;
}
.server-misc-script-tabs a.is-active {
border-color: var(--accent);
background: color-mix(in srgb, var(--accent) 18%, var(--surface-strong));
color: var(--accent-strong);
}
.server-misc-script-layout {
display: grid;
grid-template-columns: minmax(250px, 320px) minmax(0, 1fr);
gap: 12px;
align-items: start;
}
.server-misc-script-browser,
.server-misc-script-placeholder {
border: 1px solid var(--border);
border-radius: 8px;
background: var(--surface);
box-shadow: 0 8px 24px rgba(12, 18, 16, 0.08);
}
.server-misc-script-browser {
max-height: 720px;
overflow: auto;
padding: 12px;
}
.server-misc-script-browser header h2,
.server-misc-script-placeholder h2 {
margin: 0 0 10px;
color: var(--text);
font-size: 16px;
letter-spacing: 0;
}
.server-misc-script-folder {
margin-bottom: 8px;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--surface-muted);
}
.server-misc-script-folder summary {
padding: 7px 9px;
color: var(--text);
font-weight: 700;
cursor: pointer;
}
.server-misc-script-folder ul {
display: grid;
gap: 3px;
margin: 0;
padding: 0 8px 8px 18px;
list-style: none;
}
.server-misc-script-folder a,
.server-misc-script-folder span {
display: block;
padding: 4px 6px;
border-radius: 5px;
color: var(--text-muted);
font-size: 12px;
text-decoration: none;
overflow-wrap: anywhere;
}
.server-misc-script-folder a:hover,
.server-misc-script-folder a.is-active {
background: var(--surface-strong);
color: var(--text);
}
.server-misc-script-editor {
min-width: 0;
overflow: auto;
}
.server-misc-script-editor > .script-editor-shell {
margin: 0;
}
.spawns-script-editor-detail .spawns-modern-detail-header {
padding: 12px 14px;
}
.server-misc-script-placeholder {
padding: 18px;
}
.server-misc-script-placeholder p,
.server-misc-script-empty {
margin: 0;
color: var(--text-muted);
font-weight: 700;
}
.server-groundspawn-items-page,
.server-groundspawns-page,
.server-heroic-ops-page,
.server-collections-page,
.server-entity-commands-page,
.server-factions-page,
.server-merchants-page,
.server-npc-equipment-page,
.server-npc-spells-page,
.server-race-types-page,
.server-revive-points-page,
.server-flight-paths-page,
.server-starting-factions-page,
.server-starting-spells-page,
.server-static-values-page {
display: grid;
gap: 14px;
color: var(--text);
}
.server-groundspawn-items-page.server-panel,
.server-groundspawns-page.server-panel,
.server-heroic-ops-page.server-panel,
.server-collections-page.server-panel,
.server-houses-page.server-panel,
.server-entity-commands-page.server-panel,
.server-factions-page.server-panel,
.server-merchants-page.server-panel,
.server-npc-equipment-page.server-panel,
.server-npc-spells-page.server-panel,
.server-race-types-page.server-panel,
.server-revive-points-page.server-panel,
.server-flight-paths-page.server-panel,
.server-transporters-page.server-panel,
.server-starting-factions-page.server-panel,
.server-starting-spells-page.server-panel,
.server-static-values-page.server-panel,
.server-groundspawn-insert,
.server-groundspawn-create,
.server-collection-create,
.server-house-create,
.server-entity-command-create,
.server-race-type-create,
.server-transporter-create,
.server-starting-faction-create,
.server-npc-spell-list-create,
.server-search-panel,
.server-detail-panel,
.server-revive-create,
.server-table-shell {
border: 1px solid var(--border);
border-radius: 8px;
background: var(--surface);
box-shadow: 0 8px 24px rgba(12, 18, 16, 0.08);
}
.server-groundspawn-items-page.server-panel,
.server-groundspawns-page.server-panel,
.server-heroic-ops-page.server-panel,
.server-collections-page.server-panel,
.server-houses-page.server-panel,
.server-entity-commands-page.server-panel,
.server-factions-page.server-panel,
.server-merchants-page.server-panel,
.server-npc-equipment-page.server-panel,
.server-npc-spells-page.server-panel,
.server-race-types-page.server-panel,
.server-revive-points-page.server-panel,
.server-flight-paths-page.server-panel,
.server-transporters-page.server-panel,
.server-starting-factions-page.server-panel,
.server-starting-spells-page.server-panel,
.server-static-values-page.server-panel,
.server-groundspawn-insert,
.server-groundspawn-create,
.server-collection-create,
.server-house-create,
.server-entity-command-create,
.server-race-type-create,
.server-transporter-create,
.server-starting-faction-create,
.server-npc-spell-list-create,
.server-search-panel,
.server-detail-panel,
.server-revive-create {
padding: 14px;
}
.server-panel-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
}
.server-panel-header h2,
.server-subsection-header h3,
.server-groundspawn-insert h3,
.server-groundspawn-create h3,
.server-collection-create h3,
.server-house-create h3,
.server-entity-command-create h3,
.server-race-type-create h3,
.server-transporter-create h3,
.server-starting-faction-create h3,
.server-npc-spell-list-create h3,
.server-detail-panel h3,
.server-revive-create h3 {
margin: 0;
color: var(--text);
font-size: 18px;
letter-spacing: 0;
}
.server-panel-header p {
margin: 4px 0 0;
color: var(--text-muted);
}
.server-form-section {
display: grid;
gap: 8px;
margin-top: 12px;
}
.server-form-section h4 {
margin: 0;
color: var(--text);
font-size: 13px;
letter-spacing: 0;
}
.server-mode-tabs {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.server-mode-tabs a {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 30px;
padding: 0 11px;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--surface-strong);
color: var(--text);
font-weight: 700;
text-decoration: none;
}
.server-mode-tabs a.is-active {
border-color: var(--accent);
background: color-mix(in srgb, var(--accent) 18%, var(--surface-strong));
color: var(--accent-strong);
}
.server-filter-form,
.server-form-grid {
display: grid;
gap: 8px;
align-items: end;
}
.server-filter-form {
grid-template-columns: minmax(180px, 320px) auto;
}
.server-form-grid {
grid-template-columns: minmax(180px, 1.2fr) minmax(120px, 0.7fr) minmax(90px, 0.45fr) minmax(110px, 0.5fr);
margin-bottom: 10px;
}
.server-filter-form label,
.server-form-grid label,
.server-table-row label {
display: grid;
gap: 4px;
min-width: 0;
color: var(--text-muted);
font-size: 12px;
font-weight: 700;
}
.server-filter-form input,
.server-filter-form select,
.server-form-grid input,
.server-form-grid select,
.server-form-grid textarea,
.server-table-row input,
.server-table-row select,
.server-table-row textarea {
box-sizing: border-box;
width: 100%;
min-height: 30px;
border: 1px solid var(--border-strong);
border-radius: 5px;
background: var(--surface-strong);
color: var(--text);
padding: 4px 6px;
}
.server-form-grid textarea {
min-height: 72px;
resize: vertical;
}
.server-table-shell {
overflow-x: auto;
}
.server-table-row {
display: grid;
grid-template-columns: 76px minmax(180px, 1fr) minmax(220px, 1.25fr) 74px 86px minmax(128px, auto);
gap: 8px;
align-items: end;
min-width: 840px;
padding: 8px;
border-bottom: 1px solid var(--border);
}
.server-table-row:last-child {
border-bottom: 0;
}
.server-table-heading {
align-items: center;
background: var(--legacy-header);
color: var(--text);
font-size: 12px;
font-weight: 700;
}
.server-table-row label > span {
display: none;
}
.server-table-row input[readonly] {
background: var(--legacy-row-even);
color: var(--text-muted);
}
.server-table-row a {
display: block;
margin-top: 3px;
color: var(--accent-strong);
text-decoration: none;
overflow-wrap: anywhere;
}
.server-row-actions {
display: inline-flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
}
.server-row-actions span {
color: var(--text-muted);
font-weight: 700;
}
.server-empty-state {
padding: 12px;
color: var(--text-muted);
font-weight: 700;
}
.server-inline-action {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 30px;
padding: 0 10px;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--surface-strong);
color: var(--accent-strong);
font-weight: 700;
text-decoration: none;
}
.server-subsection-header {
padding: 10px;
border-bottom: 1px solid var(--border);
background: var(--surface);
}
.server-wide-grid {
max-width: 100%;
}
.server-groundspawn-row {
grid-template-columns: 70px minmax(140px, 1.35fr) repeat(11, minmax(74px, 0.6fr)) minmax(168px, auto);
min-width: 1280px;
}
.server-groundspawn-create-grid {
grid-template-columns: minmax(160px, 1.25fr) repeat(11, minmax(76px, 0.55fr));
}
.server-collection-picker {
display: grid;
gap: 10px;
}
.server-collection-form-grid {
grid-template-columns: 72px minmax(240px, 1.3fr) minmax(220px, 1fr) 90px;
}
.server-collection-create .server-collection-form-grid {
grid-template-columns: minmax(240px, 1.3fr) minmax(220px, 1fr) 90px;
}
.server-collection-detail-row {
grid-template-columns: 72px 96px minmax(260px, 1.4fr) 82px minmax(150px, auto);
min-width: 820px;
}
.server-collection-reward-row {
grid-template-columns: 72px minmax(130px, 0.8fr) 110px minmax(260px, 1.4fr) 96px minmax(150px, auto);
min-width: 920px;
}
.server-npc-equipment-row {
grid-template-columns: 72px 90px 100px minmax(250px, 1.35fr) minmax(170px, 0.9fr) minmax(150px, auto) minmax(90px, auto);
min-width: 1040px;
}
.server-npc-equipment-item-row {
grid-template-columns: 72px 110px minmax(270px, 1.4fr) minmax(190px, 1fr) minmax(150px, auto);
min-width: 860px;
}
.server-merchant-form-grid {
grid-template-columns: 96px 130px 130px minmax(260px, 1fr);
}
.server-merchant-search-row,
.server-merchant-zone-row {
grid-template-columns: 72px 110px 116px minmax(300px, 1fr) minmax(100px, auto);
min-width: 760px;
}
.server-merchant-inventory-row {
grid-template-columns: 64px 104px minmax(210px, 1.1fr) 86px minmax(166px, 0.9fr) minmax(166px, 0.9fr) 82px 92px 74px minmax(132px, auto);
min-width: 1220px;
}
.server-merchant-price-pair {
display: grid;
grid-template-columns: minmax(84px, 1fr) 66px;
gap: 6px;
}
.server-heroic-starter-row {
grid-template-columns: 64px minmax(150px, 0.8fr) minmax(150px, 0.8fr) 92px 86px minmax(390px, 1.4fr) minmax(220px, 0.9fr) minmax(132px, auto);
min-width: 1240px;
}
.server-heroic-chain-row {
grid-template-columns: 64px minmax(170px, 0.9fr) minmax(150px, 0.8fr) 82px 86px 92px minmax(390px, 1.45fr) minmax(132px, auto);
min-width: 1180px;
}
.server-heroic-ability-strip {
display: grid;
grid-template-columns: repeat(3, minmax(104px, 1fr));
gap: 6px;
}
.server-heroic-ability,
.server-ho-icon-field {
display: flex;
align-items: center;
gap: 6px;
min-width: 0;
}
.server-heroic-ability i,
.server-ho-icon-field i {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
flex: 0 0 34px;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--surface-strong);
overflow: hidden;
font-style: normal;
}
.server-heroic-ability img,
.server-ho-icon-field img {
width: 32px;
height: 32px;
object-fit: contain;
}
.server-ho-empty-icon {
color: var(--text-muted);
font-size: 10px;
font-weight: 800;
text-transform: uppercase;
}
.server-heroic-outcomes {
display: grid;
gap: 3px;
align-self: center;
color: var(--text-muted);
}
.server-entity-command-row {
grid-template-columns: 70px 72px minmax(180px, 1.2fr) 78px minmax(220px, 1.3fr) minmax(110px, 0.7fr) 72px 82px minmax(130px, auto);
min-width: 980px;
}
.server-race-type-filter {
grid-template-columns: minmax(220px, 1fr) minmax(220px, 0.9fr) minmax(120px, 0.45fr) auto auto;
}
.server-race-type-count {
color: var(--text-muted);
font-size: 12px;
font-weight: 800;
white-space: nowrap;
}
.server-race-type-create-grid {
grid-template-columns: 90px minmax(160px, 0.85fr) minmax(180px, 0.95fr) 110px minmax(260px, 1.4fr);
}
.server-race-type-group {
display: grid;
}
.server-race-type-group-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.server-race-type-group-header span {
color: var(--text-muted);
font-size: 12px;
font-weight: 800;
}
.server-race-type-row {
grid-template-columns: 70px 90px minmax(160px, 0.9fr) minmax(180px, 1fr) 110px minmax(280px, 1.5fr) minmax(132px, auto);
min-width: 1080px;
}
.server-entity-command-create-grid {
grid-template-columns: 72px minmax(180px, 1.1fr) 78px minmax(220px, 1.25fr) minmax(110px, 0.7fr) 72px 82px;
}
.server-entity-command-lookup {
position: relative;
display: grid;
gap: 5px;
min-width: min(360px, 100%);
}
.server-entity-command-lookup label {
display: grid;
gap: 4px;
color: var(--text-muted);
font-size: 12px;
font-weight: 700;
}
.server-entity-command-lookup input[type="text"] {
box-sizing: border-box;
width: 100%;
min-height: 30px;
border: 1px solid var(--border-strong);
border-radius: 5px;
background: var(--surface-strong);
color: var(--text);
padding: 4px 6px;
}
.server-entity-command-lookup #ECmdSuggest {
position: absolute;
z-index: 10000;
top: calc(100% + 4px);
left: 0;
right: 0;
}
.server-revive-result-row {
grid-template-columns: 70px minmax(190px, 1.2fr) minmax(170px, 1fr) minmax(170px, 1fr) minmax(92px, auto);
min-width: 760px;
}
.server-revive-row {
grid-template-columns: 70px minmax(170px, 1.1fr) minmax(150px, 0.9fr) minmax(150px, 0.9fr) repeat(5, minmax(78px, 0.5fr)) minmax(92px, auto);
min-width: 1040px;
}
.server-revive-form-grid {
grid-template-columns: minmax(170px, 1.1fr) repeat(7, minmax(92px, 0.5fr));
}
.server-revive-detail .server-revive-form-grid {
grid-template-columns: 72px minmax(170px, 1.1fr) repeat(7, minmax(92px, 0.5fr));
}
.server-flight-row {
grid-template-columns: 70px minmax(180px, 1fr) minmax(190px, 1.2fr) 80px 80px 92px minmax(92px, auto);
min-width: 880px;
}
.server-flight-form-grid {
grid-template-columns: 72px minmax(190px, 1.1fr) minmax(220px, 1.2fr) 82px 82px 96px;
}
.server-flight-point-row {
grid-template-columns: 80px 90px repeat(3, minmax(120px, 1fr));
min-width: 560px;
}
.server-house-row {
grid-template-columns: 70px minmax(190px, 1.2fr) minmax(190px, 1fr) minmax(190px, 1fr) 96px minmax(92px, auto);
min-width: 860px;
}
.server-house-create-grid {
grid-template-columns: minmax(220px, 1.3fr) minmax(220px, 1fr) minmax(220px, 1fr) minmax(120px, 0.6fr);
}
.server-house-identity-grid {
grid-template-columns: 72px minmax(220px, 1.3fr) minmax(220px, 1fr) minmax(220px, 1fr) minmax(120px, 0.6fr);
}
.server-house-cost-grid {
grid-template-columns: repeat(6, minmax(96px, 1fr));
}
.server-house-exit-grid {
grid-template-columns: repeat(4, minmax(110px, 1fr));
}
.server-faction-row {
grid-template-columns: 70px minmax(190px, 1.1fr) minmax(120px, 0.7fr) 84px 84px 84px minmax(260px, 1.4fr) minmax(92px, auto);
min-width: 1120px;
}
.server-faction-form-grid {
grid-template-columns: 72px minmax(220px, 1.2fr) minmax(140px, 0.8fr) repeat(3, minmax(102px, 0.55fr));
}
.server-faction-description-grid {
grid-template-columns: 1fr;
}
.server-faction-alliance-row {
grid-template-columns: 72px minmax(260px, 1fr) minmax(260px, 1fr) minmax(150px, auto);
min-width: 780px;
}
.server-faction-alliance-create-grid {
grid-template-columns: minmax(260px, 1fr) minmax(260px, 1fr) minmax(120px, auto);
margin-top: 10px;
}
.server-starting-faction-row {
grid-template-columns: 72px minmax(170px, 0.8fr) minmax(260px, 1.2fr) 96px minmax(150px, auto);
min-width: 760px;
}
.server-starting-faction-create-grid {
grid-template-columns: minmax(170px, 0.8fr) minmax(260px, 1.2fr) 96px;
}
.server-npc-spell-picker {
display: grid;
gap: 10px;
}
.server-npc-spell-list-grid {
grid-template-columns: 80px minmax(180px, 0.8fr) minmax(260px, 1.3fr) 120px minmax(160px, auto);
}
.server-npc-spell-list-create .server-npc-spell-list-grid {
grid-template-columns: minmax(180px, 0.8fr) minmax(260px, 1.3fr) 120px;
}
.server-npc-spell-entry-list > .server-panel-note {
margin: 0;
padding: 10px 12px;
border-bottom: 1px solid var(--border);
background: var(--surface-muted);
color: var(--text-muted);
font-size: 12px;
line-height: 1.45;
}
.server-npc-spell-row {
grid-template-columns: 62px minmax(230px, 1.4fr) 92px 70px 86px 112px minmax(180px, 1fr) minmax(150px, auto);
min-width: 1100px;
}
.server-npc-spell-search-row {
grid-template-columns: 80px minmax(260px, 1.3fr) minmax(180px, 0.9fr) minmax(92px, auto);
min-width: 720px;
}
.server-starting-spell-row {
grid-template-columns: 72px minmax(160px, 0.85fr) minmax(170px, 0.9fr) minmax(230px, 1.35fr) 72px 110px minmax(150px, auto);
min-width: 980px;
}
.server-icon-cell {
position: relative;
display: inline-flex;
width: 32px;
height: 32px;
}
.server-icon-cell img {
display: block;
width: 32px;
height: 32px;
image-rendering: auto;
}
.server-spell-inactive-marker {
position: absolute;
top: -7px;
right: -7px;
display: grid;
place-items: center;
width: 17px;
height: 17px;
border: 1px solid #dc2626;
border-radius: 50%;
background: rgba(255, 255, 255, 0.96);
color: #dc2626;
font-size: 12px;
font-weight: 900;
line-height: 1;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
z-index: 1;
}
.server-inline-checks {
display: flex;
flex-wrap: wrap;
gap: 6px 12px;
align-items: center;
color: var(--text);
font-size: 12px;
font-weight: 700;
}
.server-inline-checks label {
display: inline-flex;
align-items: center;
gap: 5px;
color: var(--text);
}
.server-inline-checks input[type="checkbox"] {
width: 16px;
min-height: 16px;
accent-color: var(--accent);
}
.server-form-note {
margin: 4px 0 10px;
color: var(--text-muted);
font-weight: 700;
}
.server-transporter-row {
grid-template-columns: 70px 90px minmax(190px, 1.2fr) minmax(120px, 0.8fr) minmax(190px, 1fr) minmax(190px, 1fr) 76px minmax(92px, auto);
min-width: 1100px;
}
.server-transporter-create-grid {
grid-template-columns: 96px minmax(190px, 1.2fr) minmax(136px, 0.8fr) minmax(220px, 1fr) minmax(220px, 1fr) 80px;
}
.server-transporter-general-grid {
grid-template-columns: 72px 96px minmax(220px, 1.3fr) 86px minmax(150px, 0.8fr);
}
.server-transporter-location-grid {
grid-template-columns: minmax(230px, 1.25fr) repeat(4, minmax(100px, 0.7fr));
}
.server-transporter-requirements-grid {
grid-template-columns: repeat(7, minmax(92px, 1fr));
}
.server-transporter-map-grid {
grid-template-columns: repeat(9, minmax(92px, 1fr));
}
.server-transporter-message-grid {
grid-template-columns: 1fr;
}
.server-transporter-filters {
grid-template-columns: minmax(220px, 1.3fr) minmax(150px, .7fr) auto;
align-items: end;
}
.server-transporter-filters.is-enhanced {
grid-template-columns: minmax(240px, 1fr) minmax(150px, .7fr) auto;
}
.server-transporter-filter-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
.server-transporter-clear {
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
min-height: 30px;
padding: 4px 10px;
border: 1px solid var(--border-strong);
border-radius: 5px;
background: var(--surface-strong);
color: var(--text);
font-weight: 700;
text-decoration: none;
}
.server-transporter-clear:hover,
.server-transporter-clear:focus-visible {
border-color: var(--accent);
color: var(--accent-strong);
}
.server-transporter-clone-target,
.server-transporter-clone-target.is-enhanced {
grid-template-columns: minmax(0, 1fr);
align-items: start;
}
.server-transporter-clone-target > button {
justify-self: start;
}
.server-transporter-clone-target .transporter-zone-matches:not([hidden]) {
position: static;
max-height: min(260px, 35vh);
margin-top: 4px;
}
.server-transporter-filters.is-enhanced .transporter-zone-fallback,
.server-transporter-clone-target.is-enhanced .transporter-zone-fallback {
display: none;
}
.transporter-zone-picker {
display: none;
position: relative;
min-width: 0;
}
.is-enhanced .transporter-zone-picker {
display: block;
}
.transporter-zone-picker > label {
margin-bottom: 4px;
}
.transporter-zone-picker > input {
width: 100%;
}
.transporter-zone-matches:not([hidden]) {
position: absolute;
z-index: 20;
top: 100%;
left: 0;
right: 0;
max-height: 260px;
overflow-y: auto;
border: 1px solid var(--border-strong);
border-radius: 6px;
background: var(--surface);
box-shadow: 0 8px 22px rgba(0, 0, 0, .2);
}
.transporter-zone-match,
.transporter-zone-match-hint {
padding: 8px 10px;
}
.transporter-zone-match {
cursor: pointer;
}
.transporter-zone-match:hover,
.transporter-zone-match[aria-selected="true"] {
background: color-mix(in srgb, var(--accent) 16%, var(--surface));
}
.transporter-zone-match-hint {
color: var(--text-muted);
font-size: 12px;
}
.server-transporter-secondary {
padding: 12px 16px;
}
.server-transporter-secondary summary,
.server-transporter-create summary {
cursor: pointer;
font-weight: 800;
}
.server-transporter-secondary form,
.server-transporter-create form {
margin-top: 12px;
}
.server-transporter-result {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 16px;
padding: 10px 12px;
border-top: 1px solid var(--border);
}
.server-transporter-result strong {
min-width: 180px;
}
.server-transporter-result a:first-of-type,
.server-transporter-actions {
margin-left: auto;
}
.server-transporter-actions {
display: inline-flex;
gap: 10px;
}
.server-transporter-list-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 6px 12px 12px;
}
.server-transporter-list-header h3,
.server-transporter-list-header p {
margin: 0;
}
.server-action-button {
display: inline-block;
padding: 8px 12px;
border-radius: 6px;
background: var(--accent);
color: #fff;
font-weight: 800;
text-decoration: none;
}
#main-body .server-transporters-page a.server-action-button,
#main-body .server-transporters-page a.server-action-button:visited {
color: #fff;
}
.server-transporter-dialog {
width: min(1000px, calc(100vw - 28px));
max-width: none;
max-height: min(92vh, 900px);
padding: 18px;
border: 1px solid var(--border);
border-radius: 10px;
background: var(--surface);
color: var(--text);
overflow: auto;
box-shadow: 0 22px 70px rgba(0, 0, 0, .4);
}
.server-transporter-dialog::backdrop {
background: rgba(8, 15, 22, .65);
}
.server-transporter-dialog-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
position: sticky;
top: -18px;
z-index: 1;
padding: 8px 0 12px;
background: var(--surface);
}
.server-transporter-dialog-header h3 {
margin: 0;
}
.server-transporter-dialog .server-form-section {
margin-top: 16px;
}
.server-transporter-dialog .server-row-actions {
padding: 12px 0 0;
}
.server-transporter-dialog .server-form-grid {
grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
}
.server-transporter-dialog .server-form-grid label:has(select) {
grid-column: span 2;
}
.server-transporter-dialog input,
.server-transporter-dialog select {
max-width: 100%;
}
.server-transporter-clone-dialog {
width: min(840px, calc(100vw - 28px));
}
.server-form-error {
color: #b91c1c;
font-weight: 800;
}
@media (max-width: 760px) {
.server-transporter-filters,
.server-transporter-filters.is-enhanced,
.server-transporter-clone-target.is-enhanced,
.server-transporter-clone-target {
grid-template-columns: 1fr;
}
.server-transporter-list-header {
align-items: flex-start;
flex-direction: column;
}
.server-transporter-row:not(.server-table-heading) > span[data-label] {
display: flex;
justify-content: space-between;
gap: 12px;
padding: 4px 0;
border-bottom: 1px solid var(--border);
}
.server-transporter-row:not(.server-table-heading) > span[data-label]::before {
content: attr(data-label);
color: var(--text-muted);
font-weight: 800;
}
.server-transporter-dialog .server-form-grid {
grid-template-columns: 1fr;
}
.server-transporter-dialog .server-form-grid label:has(select) {
grid-column: auto;
}
}
.server-editor-lists-page {
display: grid;
gap: 14px;
color: var(--text);
}
.server-editor-lists-panel {
border: 1px solid var(--border);
border-radius: 8px;
background: var(--surface);
box-shadow: 0 8px 24px rgba(12, 18, 16, 0.08);
overflow-x: auto;
padding: 14px;
}
.server-editor-lists-panel h2,
.server-editor-lists-section-header h2 {
margin: 0 0 12px;
color: var(--text);
font-size: 16px;
letter-spacing: 0;
}
.server-editor-lists-table {
width: 100%;
min-width: 720px;
border-collapse: collapse;
background: var(--surface-strong);
}
.server-editor-lists-table th,
.server-editor-lists-table td {
padding: 8px 10px;
border-bottom: 1px solid var(--border);
color: var(--text);
text-align: left;
}
.server-editor-lists-table th {
background: var(--legacy-header);
color: var(--text);
}
.server-editor-lists-table tbody tr:nth-child(odd) {
background: var(--legacy-row-odd);
}
.server-editor-lists-table tbody tr:nth-child(even) {
background: var(--legacy-row-even);
}
.server-editor-list-form,
.server-editor-list-confirm {
display: grid;
grid-template-columns: minmax(180px, 1fr) minmax(110px, 0.45fr) minmax(150px, 0.7fr) minmax(140px, 0.7fr) auto;
gap: 10px;
align-items: end;
margin-bottom: 14px;
}
.server-editor-list-form label,
.server-editor-list-static,
.server-editor-list-confirm div {
display: grid;
gap: 4px;
min-width: 0;
color: var(--text-muted);
font-size: 12px;
font-weight: 700;
}
.server-editor-list-form input[type="text"],
.server-editor-list-form select {
box-sizing: border-box;
width: 100%;
min-height: 30px;
border: 1px solid var(--border-strong);
border-radius: 5px;
background: var(--surface-strong);
color: var(--text);
padding: 4px 6px;
}
.server-editor-list-static strong,
.server-editor-list-confirm strong {
color: var(--text);
font-size: 14px;
}
.server-editor-list-note {
grid-column: 1 / -1;
margin: 0;
color: var(--text-muted);
font-weight: 700;
}
.server-editor-list-inline-form {
margin: 0;
}
.guilds-page {
display: grid;
gap: 14px;
}
.guilds-header,
.guilds-panel,
.guilds-card {
border: 1px solid var(--border);
border-radius: 8px;
background: var(--surface);
box-shadow: 0 8px 24px rgba(12, 18, 16, 0.08);
}
.guilds-header,
.guilds-panel,
.guilds-card {
padding: 14px;
}
.guilds-header,
.guilds-detail-header,
.guilds-section-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
.guilds-header h1,
.guilds-detail-header h2,
.guilds-section-header h2,
.guilds-section-header h3 {
margin: 0;
color: var(--text);
font-size: 18px;
letter-spacing: 0;
}
.guilds-header h1 {
font-size: 22px;
}
.guilds-header p,
.guilds-detail-header p {
margin: 4px 0 0;
color: var(--text-muted);
}
.guilds-detail-header h2 span {
color: var(--text-muted);
font-size: 13px;
}
.guilds-header-actions,
.guilds-search-actions,
.guilds-form-actions,
.guilds-tabs {
display: inline-flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
.guilds-header-actions a,
.guilds-search-actions a,
.guilds-tabs a {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 30px;
padding: 0 11px;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--surface-strong);
color: var(--text);
font-weight: 700;
text-decoration: none;
}
.guilds-header-actions a.is-active,
.guilds-tabs a.is-active {
border-color: var(--accent);
background: color-mix(in srgb, var(--accent) 18%, var(--surface-strong));
color: var(--accent-strong);
}
.guilds-search-form,
.guilds-new-form,
.guilds-summary-form,
.guilds-event-create {
display: grid;
gap: 8px;
align-items: end;
}
.guilds-search-form {
grid-template-columns: minmax(220px, 420px) auto;
}
.guilds-new-form {
grid-template-columns: minmax(180px, 1fr) minmax(260px, 1.4fr) repeat(4, minmax(100px, 0.6fr)) auto;
}
.guilds-summary-form {
grid-template-columns: 82px minmax(180px, 1fr) minmax(260px, 1.5fr) repeat(3, minmax(92px, 0.55fr)) minmax(110px, 0.7fr) auto;
}
.guilds-event-create {
margin-top: 10px;
padding: 10px;
border: 1px solid var(--border);
border-radius: 7px;
background: var(--surface-muted);
grid-template-columns: 76px repeat(4, minmax(92px, 0.6fr)) minmax(260px, 1.5fr) repeat(3, minmax(90px, 0.5fr)) auto;
}
.guilds-field,
.guilds-meta,
.guilds-event-flags label {
display: grid;
gap: 4px;
min-width: 0;
color: var(--text-muted);
font-size: 12px;
font-weight: 700;
}
.guilds-field input,
.guilds-field select,
.guilds-event-flags select {
box-sizing: border-box;
width: 100%;
min-height: 30px;
border: 1px solid var(--border-strong);
border-radius: 5px;
background: var(--surface-strong);
color: var(--text);
padding: 4px 6px;
}
.guilds-field input[readonly],
.guilds-event-row input[readonly] {
background: var(--legacy-row-even);
color: var(--text-muted);
}
.guilds-meta {
align-content: end;
min-height: 30px;
}
.guilds-meta strong {
display: flex;
align-items: center;
min-height: 30px;
color: var(--text);
}
.guilds-field-wide {
grid-column: span 2;
}
.guilds-wide-input {
min-width: 0;
}
.guilds-detail-panel,
.guilds-card,
.guilds-events-card {
display: grid;
gap: 12px;
}
.guilds-result-row {
grid-template-columns: 80px minmax(220px, 1.4fr) 90px minmax(100px, 0.7fr) minmax(110px, 0.7fr) minmax(110px, 0.7fr) minmax(110px, auto);
min-width: 860px;
}
.guilds-event-row {
grid-template-columns: 76px 84px 112px minmax(130px, 0.8fr) minmax(280px, 1.6fr) minmax(220px, 1.1fr) minmax(150px, auto);
min-width: 1120px;
}
.guilds-event-row.server-table-row {
align-items: end;
}
.guilds-event-flags {
display: grid;
grid-template-columns: repeat(3, minmax(64px, 1fr));
gap: 6px;
}
.guilds-member-create,
.guilds-rank-create,
.guilds-recruiting-form {
display: grid;
gap: 8px;
align-items: end;
padding: 10px;
border: 1px solid var(--border);
border-radius: 7px;
background: var(--surface-muted);
}
.guilds-member-create {
grid-template-columns: 70px 90px repeat(6, minmax(86px, 0.6fr)) minmax(100px, 0.6fr) minmax(150px, 1fr) minmax(150px, 1fr) minmax(150px, 1fr) auto;
}
.guilds-rank-create {
grid-template-columns: 70px 90px minmax(90px, 0.5fr) minmax(160px, 1fr) minmax(180px, 1fr) minmax(180px, 1fr) auto;
}
.guilds-recruiting-form {
grid-template-columns: minmax(90px, 0.4fr) repeat(2, minmax(220px, 1fr)) auto;
}
.guilds-member-row {
grid-template-columns: 70px 82px 86px 92px 92px 82px 76px 82px 112px minmax(260px, 1.5fr) minmax(150px, auto);
min-width: 1220px;
}
.guilds-rank-row {
grid-template-columns: 70px 90px repeat(4, minmax(160px, 1fr)) minmax(150px, auto);
min-width: 980px;
}
.guilds-member-notes {
display: grid;
grid-template-columns: minmax(120px, 1fr) minmax(120px, 1fr) minmax(90px, 0.6fr);
gap: 6px;
}
.guilds-recruiting-form textarea {
box-sizing: border-box;
width: 100%;
min-height: 76px;
border: 1px solid var(--border-strong);
border-radius: 5px;
background: var(--surface-strong);
color: var(--text);
padding: 6px;
resize: vertical;
}
.guilds-notice-card .server-empty-state {
color: var(--text-muted);
}
.quests-page {
display: grid;
gap: 14px;
}
.quests-header,
.quests-panel,
.quests-card {
border: 1px solid var(--border);
border-radius: 8px;
background: var(--surface);
box-shadow: 0 8px 24px rgba(12, 18, 16, 0.08);
}
.quests-header,
.quests-panel,
.quests-card {
padding: 14px;
}
.quests-header,
.quests-detail-header,
.quests-section-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
.quests-header h1,
.quests-detail-header h2,
.quests-section-header h3 {
margin: 0;
color: var(--text);
font-size: 18px;
letter-spacing: 0;
}
.quests-header h1 {
font-size: 22px;
}
.quests-header p,
.quests-detail-header p {
margin: 4px 0 0;
color: var(--text-muted);
}
.quests-detail-header h2 span {
color: var(--text-muted);
font-size: 13px;
}
.quests-header-actions,
.quests-filter-actions,
.quests-tabs,
.quests-form-actions {
display: inline-flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
.quests-header-actions a,
.quests-filter-actions a,
.quests-tabs a {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 30px;
padding: 0 11px;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--surface-strong);
color: var(--text);
font-weight: 700;
text-decoration: none;
}
.quests-header-actions a.is-active,
.quests-tabs a.is-active {
border-color: var(--accent);
background: color-mix(in srgb, var(--accent) 18%, var(--surface-strong));
color: var(--accent-strong);
}
.quests-filter-panel,
.quests-detail-panel,
.quests-card {
display: grid;
gap: 12px;
}
.quests-filter-form,
.quests-search-form,
.quests-register-form {
display: grid;
gap: 8px;
align-items: end;
}
.quests-filter-form {
grid-template-columns: repeat(2, minmax(220px, 380px)) auto;
}
.quests-search-form {
grid-template-columns: minmax(220px, 420px) auto;
}
.quests-register-form {
grid-template-columns: minmax(76px, 0.35fr) repeat(4, minmax(140px, 1fr));
}
.quests-field,
.quests-meta,
.quests-toggle {
display: grid;
gap: 4px;
min-width: 0;
color: var(--text-muted);
font-size: 12px;
font-weight: 700;
}
.quests-field input,
.quests-field select,
.quests-field textarea,
.quests-detail-row input,
.quests-detail-row select {
box-sizing: border-box;
width: 100%;
min-height: 30px;
border: 1px solid var(--border-strong);
border-radius: 5px;
background: var(--surface-strong);
color: var(--text);
padding: 4px 6px;
}
.quests-field textarea {
min-height: 98px;
resize: vertical;
}
.quests-field input[readonly],
.quests-detail-row input[readonly] {
background: var(--legacy-row-even);
color: var(--text-muted);
}
.quests-field-wide {
grid-column: span 2;
}
.quests-meta {
align-content: end;
min-height: 30px;
}
.quests-meta strong {
display: flex;
align-items: center;
min-height: 30px;
color: var(--text);
}
.quests-guide {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
padding: 8px 10px;
border: 1px solid var(--border);
border-radius: 7px;
background: var(--surface-muted);
color: var(--text-muted);
}
.quests-guide strong {
color: var(--text);
}
.quests-toggle-row {
grid-column: 1 / -1;
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
padding: 8px 10px;
border: 1px solid var(--border);
border-radius: 7px;
background: var(--surface-muted);
}
.quests-toggle {
display: inline-flex;
gap: 7px;
align-items: center;
color: var(--text);
}
.quests-toggle input[type="checkbox"] {
width: 16px;
height: 16px;
}
.quests-form-actions {
grid-column: 1 / -1;
justify-content: flex-end;
}
.quests-danger-note {
grid-column: 1 / -1;
margin: 0;
color: var(--danger);
font-weight: 700;
}
.quests-result-row {
grid-template-columns: 72px minmax(220px, 1.1fr) minmax(220px, 1fr) minmax(320px, 1.6fr) 70px minmax(120px, 0.65fr) minmax(150px, 0.75fr);
min-width: 1220px;
}
.quests-result-script {
min-width: 0;
overflow-wrap: anywhere;
}
.quests-zone-row {
grid-template-columns: 72px minmax(220px, 1.1fr) 70px 90px minmax(120px, 0.65fr) minmax(220px, 1fr) minmax(320px, 1.4fr);
min-width: 1180px;
}
.quests-result-name,
.quests-link-icons {
display: inline-flex;
gap: 6px;
align-items: center;
min-width: 0;
}
.quests-link-icons img {
display: block;
border: 0;
}
.quests-result-count {
padding: 10px 12px;
border-top: 1px solid var(--border);
color: var(--text-muted);
font-weight: 700;
}
.quests-detail-create-row {
margin-bottom: 10px;
border: 1px solid var(--border);
border-radius: 7px;
background: var(--surface-muted);
}
.quests-detail-row {
grid-template-columns: 70px 84px minmax(120px, 0.7fr) minmax(130px, 0.8fr) minmax(110px, 0.8fr) minmax(90px, 0.5fr) minmax(90px, 0.5fr) minmax(150px, auto);
min-width: 1030px;
}
.quests-value-field {
position: relative;
}
.quests-item-hover {
display: inline-flex;
margin-top: 4px;
}
.quests-script-card {
padding: 0;
overflow: hidden;
}
.quests-script-card .script-editor-shell {
margin: 0;
}
.zones-page {
display: grid;
gap: 14px;
}
.zones-header,
.zones-panel,
.zones-card {
border: 1px solid var(--border);
border-radius: 8px;
background: var(--surface);
box-shadow: 0 8px 24px rgba(12, 18, 16, 0.08);
}
.zones-header,
.zones-panel,
.zones-card {
padding: 14px;
}
.zones-header,
.zones-detail-header,
.zones-section-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
.zones-header h1,
.zones-detail-header h2,
.zones-section-header h3 {
margin: 0;
color: var(--text);
font-size: 18px;
letter-spacing: 0;
}
.zones-header h1 {
font-size: 22px;
}
.zones-header p,
.zones-detail-header p {
margin: 4px 0 0;
color: var(--text-muted);
}
.zones-detail-header h2 span {
color: var(--text-muted);
font-size: 13px;
}
.zones-header-actions,
.zones-filter-actions,
.zones-tabs,
.zones-form-actions {
display: inline-flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
.zones-header-actions a,
.zones-filter-actions a,
.zones-tabs a {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 30px;
padding: 0 11px;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--surface-strong);
color: var(--text);
font-weight: 700;
text-decoration: none;
}
.zones-header-actions a.is-active,
.zones-tabs a.is-active {
border-color: var(--accent);
background: color-mix(in srgb, var(--accent) 18%, var(--surface-strong));
color: var(--accent-strong);
}
.zones-filter-panel,
.zones-detail-panel,
.zones-card,
.zones-main-form,
.zones-form-section {
display: grid;
gap: 12px;
}
.zones-filter-form,
.zones-search-form,
.zones-new-form {
display: grid;
gap: 8px;
align-items: end;
}
.zones-filter-form {
grid-template-columns: minmax(220px, 420px) auto;
}
.zones-search-form {
grid-template-columns: minmax(220px, 420px) auto;
}
.zones-new-form {
grid-template-columns: minmax(220px, 420px) auto;
}
.zones-main-form {
grid-template-columns: 90px minmax(0, 1fr);
}
.zones-form-section,
.zones-form-actions {
grid-column: 1 / -1;
}
.zones-form-section h4 {
margin: 0;
color: var(--text);
font-size: 13px;
letter-spacing: 0;
}
.zones-form-grid,
.zones-coord-grid,
.zones-settings-grid,
.zones-instance-grid,
.zones-toggle-row {
display: grid;
gap: 8px;
align-items: end;
}
.zones-form-grid {
grid-template-columns: repeat(4, minmax(150px, 1fr));
}
.zones-coord-grid,
.zones-settings-grid,
.zones-instance-grid {
grid-template-columns: repeat(5, minmax(120px, 1fr));
}
.zones-field,
.zones-meta,
.zones-toggle,
.zones-inline-check {
display: grid;
gap: 4px;
min-width: 0;
color: var(--text-muted);
font-size: 12px;
font-weight: 700;
}
.zones-field input,
.zones-field select,
.zones-location-row input,
.zones-revive-row input,
.zones-revive-row select {
box-sizing: border-box;
width: 100%;
min-height: 30px;
border: 1px solid var(--border-strong);
border-radius: 5px;
background: var(--surface-strong);
color: var(--text);
padding: 4px 6px;
}
.zones-field input[readonly],
.zones-location-row input[readonly],
.zones-revive-row input[readonly] {
background: var(--legacy-row-even);
color: var(--text-muted);
}
.zones-wide-input {
min-width: 0;
}
.zones-meta {
align-content: end;
min-height: 30px;
}
.zones-meta strong {
display: flex;
align-items: center;
min-height: 30px;
color: var(--text);
}
.zones-script-meta {
grid-column: span 2;
}
.zones-toggle-row {
grid-template-columns: repeat(4, minmax(120px, 1fr));
padding: 8px 10px;
border: 1px solid var(--border);
border-radius: 7px;
background: var(--surface-muted);
}
.zones-toggle,
.zones-inline-check {
display: inline-flex;
gap: 7px;
align-items: center;
color: var(--text);
}
.zones-toggle input[type="checkbox"],
.zones-inline-check input[type="checkbox"] {
width: 16px;
height: 16px;
}
.zones-form-actions {
justify-content: flex-end;
}
.zones-result-row {
grid-template-columns: 70px minmax(210px, 1fr) minmax(140px, 0.7fr) minmax(280px, 1.4fr) minmax(120px, 0.65fr) minmax(150px, 0.7fr) 80px minmax(180px, 1fr);
min-width: 1180px;
}
.zones-result-name,
.zones-link-icons {
display: inline-flex;
gap: 6px;
align-items: center;
min-width: 0;
}
.zones-link-icons img {
display: block;
border: 0;
}
.zones-result-count {
padding: 10px 12px;
border-top: 1px solid var(--border);
color: var(--text-muted);
font-weight: 700;
}
.zones-list-row {
grid-template-columns: 70px minmax(160px, 0.8fr) minmax(260px, 1.4fr) repeat(3, minmax(82px, 0.45fr)) repeat(2, minmax(100px, 0.5fr));
min-width: 900px;
}
.zones-location-create-row,
.zones-revive-create-row {
margin-bottom: 10px;
border: 1px solid var(--border);
border-radius: 7px;
background: var(--surface-muted);
}
.zones-location-row {
grid-template-columns: 72px 84px 92px minmax(240px, 1.4fr) minmax(90px, 0.5fr) minmax(90px, 0.5fr) minmax(150px, auto);
min-width: 900px;
}
.zones-revive-row {
grid-template-columns: 70px minmax(170px, 1fr) repeat(2, minmax(180px, 1fr)) repeat(4, minmax(78px, 0.45fr)) minmax(150px, auto);
min-width: 1180px;
}
.zones-script-card {
padding: 0;
overflow: hidden;
}
.zones-script-card .script-editor-shell {
margin: 0;
}
.characters-page {
display: grid;
gap: 14px;
}
.accounts-page {
display: grid;
gap: 14px;
}
.accounts-header,
.accounts-panel,
.accounts-section-card,
.accounts-results,
.accounts-character-list {
border: 1px solid var(--border);
border-radius: 8px;
background: var(--surface-strong);
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
}
.accounts-header {
padding: 16px;
}
.accounts-header h1 {
font-size: 24px;
margin: 0 0 4px;
}
.accounts-header p {
margin: 0;
}
.accounts-header-actions,
.accounts-actions,
.accounts-form-actions,
.accounts-section-heading {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.accounts-header-actions a,
.accounts-actions a,
.accounts-section-heading a {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 30px;
padding: 0 12px;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--surface-muted);
color: var(--text);
font-weight: 800;
text-decoration: none;
}
.accounts-header-actions a.is-active {
background: var(--button-bg);
border-color: var(--button-border);
color: var(--button-text);
}
body.eq2-shell .accounts-header-actions a,
body.eq2-shell .accounts-header-actions a:link,
body.eq2-shell .accounts-header-actions a:visited,
body.eq2-shell .accounts-actions a,
body.eq2-shell .accounts-actions a:link,
body.eq2-shell .accounts-actions a:visited,
body.eq2-shell .accounts-section-heading a,
body.eq2-shell .accounts-section-heading a:link,
body.eq2-shell .accounts-section-heading a:visited {
color: var(--text);
}
body.eq2-shell .accounts-header-actions a.is-active,
body.eq2-shell .accounts-header-actions a.is-active:link,
body.eq2-shell .accounts-header-actions a.is-active:visited {
color: var(--button-text);
}
.accounts-stat-grid {
display: grid;
grid-template-columns: repeat(4, minmax(120px, 1fr));
gap: 10px;
}
.accounts-search-form {
display: grid;
grid-template-columns: minmax(260px, 1fr) auto;
gap: 12px;
align-items: end;
padding: 14px;
}
.accounts-field,
.accounts-edit-field {
display: grid;
gap: 5px;
min-width: 0;
color: var(--text-muted);
font-weight: 800;
}
.accounts-field input,
.accounts-edit-field input,
.accounts-edit-field textarea {
width: 100%;
box-sizing: border-box;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--surface);
color: var(--text);
padding: 8px 9px;
font: inherit;
}
.accounts-edit-field textarea {
min-height: 78px;
resize: vertical;
font-family: Consolas, "Courier New", monospace;
}
.accounts-edit-field input[readonly],
.accounts-edit-field textarea[readonly],
.accounts-edit-field input:disabled,
.accounts-edit-field textarea:disabled {
background: var(--readonly-bg);
color: var(--readonly-text);
}
.accounts-section-heading {
justify-content: space-between;
padding: 14px 14px 0;
}
.accounts-section-heading h2,
.accounts-section-card h3 {
margin: 0;
}
.accounts-edit-form {
display: grid;
gap: 12px;
padding: 14px;
}
.accounts-section-card {
padding: 14px;
}
.accounts-field-grid {
display: grid;
grid-template-columns: repeat(3, minmax(160px, 1fr));
gap: 10px;
margin-top: 10px;
}
.accounts-edit-field-wide {
grid-column: span 2;
}
.accounts-edit-field-full {
grid-column: 1 / -1;
}
.accounts-result-row {
grid-template-columns: 70px minmax(160px, 1fr) minmax(180px, 1fr) minmax(110px, 0.7fr) 120px 70px 80px 70px 80px minmax(150px, 0.9fr);
}
.accounts-result-row-public {
grid-template-columns: 70px minmax(160px, 1fr) 120px 70px 80px 70px 80px minmax(150px, 0.9fr);
}
.accounts-character-row {
grid-template-columns: 70px minmax(160px, 1fr) minmax(120px, 0.8fr) minmax(120px, 0.8fr) 90px minmax(150px, 1fr) 80px 90px;
}
.characters-header,
.characters-panel,
.characters-stat,
.characters-results {
border: 1px solid var(--border);
border-radius: 7px;
background: var(--surface);
box-shadow: var(--shadow-soft);
}
.characters-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
padding: 14px;
}
.characters-header h1 {
margin: 0;
color: var(--text);
font-size: 22px;
line-height: 1.2;
}
.characters-header p {
margin: 6px 0 0;
color: var(--text-muted);
}
.characters-header-actions,
.characters-mode-tabs,
.characters-filter-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
.characters-header-actions a,
.characters-mode-tabs a,
.characters-filter-actions a {
display: inline-flex;
align-items: center;
min-height: 30px;
border: 1px solid var(--border-strong);
border-radius: 6px;
background: var(--surface-strong);
color: var(--accent-strong);
padding: 0 10px;
font-weight: 700;
text-decoration: none;
}
.characters-header-actions a.is-active,
.characters-mode-tabs a.is-active {
background: var(--accent);
color: var(--button-text);
}
body.eq2-shell .characters-header-actions a.is-active,
body.eq2-shell .characters-header-actions a.is-active:link,
body.eq2-shell .characters-header-actions a.is-active:visited,
body.eq2-shell .characters-mode-tabs a.is-active,
body.eq2-shell .characters-mode-tabs a.is-active:link,
body.eq2-shell .characters-mode-tabs a.is-active:visited {
color: var(--button-text);
}
.characters-stat-grid {
display: grid;
grid-template-columns: repeat(4, minmax(140px, 1fr));
gap: 10px;
}
.characters-stat {
display: grid;
gap: 4px;
padding: 12px;
}
.characters-stat span {
color: var(--text-muted);
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
}
.characters-stat strong {
color: var(--text);
font-size: 24px;
line-height: 1;
}
.characters-filter-panel {
display: grid;
gap: 12px;
padding: 14px;
}
.characters-search-form {
display: grid;
grid-template-columns: minmax(260px, 1fr) auto;
gap: 10px;
align-items: end;
}
.characters-field {
display: grid;
gap: 5px;
min-width: 0;
color: var(--text-muted);
font-size: 12px;
font-weight: 700;
}
.characters-field input,
.characters-field select {
box-sizing: border-box;
width: 100%;
min-height: 32px;
border: 1px solid var(--border-strong);
border-radius: 5px;
background: var(--surface-strong);
color: var(--text);
padding: 5px 8px;
}
.characters-field-wide {
position: relative;
}
.characters-filter-note {
color: var(--text-muted);
font-weight: 700;
}
.characters-result-row {
grid-template-columns: 70px minmax(160px, 1fr) 78px minmax(100px, 0.65fr) minmax(120px, 0.75fr) 78px minmax(140px, 0.9fr) minmax(180px, 1fr) 92px minmax(150px, 0.8fr);
min-width: 1160px;
}
.characters-result-name a {
color: var(--text);
}
.characters-status {
display: inline-flex;
align-items: center;
min-height: 22px;
border: 1px solid var(--border);
border-radius: 999px;
padding: 0 8px;
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
}
.characters-status-online {
border-color: rgba(71, 201, 140, 0.45);
background: rgba(71, 201, 140, 0.16);
color: var(--success);
}
.characters-status-offline {
background: var(--surface-muted);
color: var(--text-muted);
}
.characters-status-deleted {
border-color: rgba(226, 94, 94, 0.45);
background: rgba(226, 94, 94, 0.16);
color: var(--danger);
}
.characters-result-count {
padding: 10px 12px;
border-top: 1px solid var(--border);
color: var(--text-muted);
font-weight: 700;
}
.characters-detail-header,
.characters-section-card,
.characters-side-nav {
border: 1px solid var(--border);
border-radius: 7px;
background: var(--surface);
box-shadow: var(--shadow-soft);
}
.characters-detail-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
padding: 14px;
}
.characters-detail-header h1 {
margin: 0;
color: var(--text);
font-size: 22px;
line-height: 1.2;
}
.characters-detail-header p {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 6px 0 0;
color: var(--text-muted);
}
.characters-detail-meta {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 8px;
color: var(--text-muted);
font-weight: 700;
}
.characters-detail-meta > span,
.characters-detail-meta > a {
display: inline-flex;
align-items: center;
min-height: 28px;
border: 1px solid var(--border);
border-radius: 999px;
background: var(--surface-muted);
padding: 0 10px;
text-decoration: none;
}
.characters-detail-layout {
display: grid;
grid-template-columns: minmax(180px, 220px) minmax(0, 1fr);
gap: 14px;
align-items: start;
}
.characters-side-nav {
position: sticky;
top: 12px;
display: grid;
gap: 10px;
padding: 10px;
}
.characters-nav-section {
display: grid;
gap: 5px;
}
.characters-nav-section h2 {
margin: 0;
color: var(--text-muted);
font-size: 12px;
font-weight: 800;
text-transform: uppercase;
}
.characters-nav-section a {
display: flex;
align-items: center;
min-height: 30px;
border: 1px solid transparent;
border-radius: 6px;
color: var(--accent-strong);
padding: 0 8px;
font-weight: 700;
text-decoration: none;
}
.characters-nav-section a:hover,
.characters-nav-section a.is-active {
border-color: var(--border-strong);
background: var(--surface-strong);
color: var(--text);
}
.characters-detail-content,
.characters-overview-stack,
.characters-edit-form {
display: grid;
gap: 14px;
min-width: 0;
}
.characters-section-card {
padding: 14px;
overflow-x: auto;
}
.characters-section-card h3 {
margin: 0 0 10px;
color: var(--text);
font-size: 16px;
line-height: 1.2;
}
.characters-section-heading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 10px;
}
.characters-section-heading h2 {
margin: 0;
color: var(--text);
font-size: 18px;
line-height: 1.2;
}
.characters-section-heading button,
.characters-form-actions button,
.characters-row-actions button {
min-height: 30px;
border: 1px solid var(--button-border);
border-radius: 6px;
background: var(--button-bg);
color: var(--button-text);
padding: 0 10px;
font-weight: 800;
}
.characters-form-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: flex-end;
}
.characters-field-grid {
display: grid;
grid-template-columns: repeat(3, minmax(160px, 1fr));
gap: 10px;
}
.characters-field-grid-dense {
grid-template-columns: repeat(4, minmax(130px, 1fr));
}
.characters-edit-field {
display: grid;
gap: 5px;
min-width: 0;
color: var(--text-muted);
font-size: 12px;
font-weight: 800;
}
.characters-edit-field-wide {
grid-column: span 2;
}
.characters-edit-field input,
.characters-edit-field select,
.characters-data-row input,
.characters-data-row select,
.characters-data-row textarea,
.characters-swap-form select {
box-sizing: border-box;
width: 100%;
min-height: 32px;
border: 1px solid var(--border-strong);
border-radius: 5px;
background: var(--surface-strong);
color: var(--text);
padding: 5px 8px;
}
.characters-edit-field input[readonly],
.characters-data-row input[readonly],
.characters-data-row textarea[readonly] {
border-style: dashed;
background: var(--readonly-bg);
color: var(--readonly-text);
}
.characters-check-line {
display: flex;
align-items: center;
gap: 8px;
min-height: 32px;
}
.characters-check-line input[type="checkbox"] {
width: 16px;
min-height: 16px;
accent-color: var(--accent);
}
body.eq2-shell[data-theme="night"] .characters-check-line input[type="checkbox"],
body.eq2-shell[data-theme="system"] .characters-check-line input[type="checkbox"] {
filter: invert(1) hue-rotate(180deg);
}
.characters-overview-tabs {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.characters-overview-tabs a {
display: inline-flex;
align-items: center;
min-height: 28px;
border: 1px solid var(--border);
border-radius: 999px;
background: var(--surface-muted);
color: var(--accent-strong);
padding: 0 10px;
font-size: 12px;
font-weight: 800;
text-decoration: none;
}
.characters-overview-tabs a.is-active {
background: var(--accent);
color: var(--button-text);
}
.characters-overview-grid {
display: grid;
grid-template-columns: minmax(260px, 0.85fr) minmax(340px, 1.15fr);
gap: 14px;
}
.characters-overview-identity,
.characters-overview-stats section,
.characters-equipment-item,
.characters-slot-item,
.characters-paperdoll-frame,
.characters-chip-list span,
.characters-chip-list a {
border: 1px solid var(--border);
border-radius: 7px;
background: var(--surface-muted);
}
.characters-overview-identity {
display: grid;
gap: 12px;
padding: 12px;
}
.characters-overview-identity h3 {
margin: 0;
color: var(--text);
font-size: 20px;
}
.characters-overview-identity p {
margin: 0;
color: var(--text-muted);
font-weight: 700;
}
.characters-overview-progress {
display: grid;
gap: 10px;
}
.characters-overview-progress label {
display: grid;
gap: 4px;
color: var(--text-muted);
font-weight: 800;
}
.characters-overview-progress progress {
width: 100%;
height: 12px;
accent-color: var(--accent);
}
.characters-overview-facts {
display: grid;
grid-template-columns: minmax(130px, 0.8fr) minmax(0, 1fr);
gap: 7px 10px;
align-items: center;
}
.characters-overview-facts span,
.characters-overview-stats span {
color: var(--text-muted);
font-size: 12px;
font-weight: 800;
text-transform: uppercase;
}
.characters-overview-facts strong,
.characters-overview-stats strong {
color: var(--text);
}
.characters-overview-stats {
display: grid;
grid-template-columns: repeat(2, minmax(180px, 1fr));
gap: 10px;
}
.characters-overview-stats section {
display: grid;
gap: 7px;
padding: 12px;
}
.characters-overview-stats section div {
display: flex;
justify-content: space-between;
gap: 12px;
}
.characters-equipment-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
gap: 8px;
}
.characters-equipment-item {
display: grid;
gap: 4px;
padding: 10px;
text-decoration: none;
}
.characters-equipment-item span,
.characters-equipment-item small {
color: var(--text-muted);
font-size: 12px;
font-weight: 800;
}
.characters-equipment-item strong {
color: var(--text);
}
.characters-equipment-window {
display: grid;
grid-template-columns: minmax(230px, 1fr) minmax(160px, 220px) minmax(230px, 1fr);
gap: 12px;
align-items: stretch;
overflow: visible;
}
.characters-slot-column {
display: grid;
gap: 7px;
align-content: start;
overflow: visible;
}
.characters-slot-item {
display: flex;
align-items: center;
gap: 8px;
min-height: 48px;
padding: 5px 8px;
color: var(--text);
text-decoration: none;
overflow: visible;
}
.characters-slot-column-right .characters-slot-item {
flex-direction: row-reverse;
text-align: right;
}
.characters-slot-item img {
width: 42px;
height: 42px;
flex: 0 0 42px;
border: 1px solid var(--border-strong);
border-radius: 5px;
background: var(--surface-strong);
object-fit: contain;
}
.characters-slot-copy {
display: grid;
gap: 2px;
min-width: 0;
color: inherit;
text-decoration: none;
}
.characters-slot-copy:hover strong,
.characters-slot-copy:focus strong {
color: var(--link-hover);
}
.characters-slot-copy span {
color: var(--text-muted);
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
}
.characters-slot-copy strong {
overflow: hidden;
color: var(--text);
font-size: 12px;
line-height: 1.25;
text-overflow: ellipsis;
white-space: nowrap;
}
.characters-slot-item.is-empty {
opacity: 0.78;
}
.characters-slot-item.is-empty .characters-slot-copy strong {
color: var(--text-soft);
}
.characters-equipment-card {
overflow: visible;
}
.characters-slot-hover,
.characters-table-item-hover {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 42px;
line-height: 0;
}
.characters-slot-hover .tooltip,
.characters-table-item-hover .tooltip {
border: 0;
line-height: normal;
}
.characters-slot-hover .tooltip .tooltiptextleft,
.characters-slot-hover .tooltip .tooltiptextright,
.characters-table-item-hover .tooltip .tooltiptext {
z-index: 50;
border: 1px solid rgba(147, 217, 255, 0.22);
box-shadow: var(--shadow-soft);
color: #ffffff;
text-align: left;
}
.characters-slot-hover .tooltip .tooltiptextleft {
top: 0;
bottom: auto;
left: 52px;
margin-left: 0;
}
.characters-slot-hover .tooltip .tooltiptextright {
top: 0;
right: 52px;
bottom: auto;
margin-right: 0;
}
.characters-table-item-hover {
margin-top: 5px;
}
.characters-house-page {
display: grid;
gap: 12px;
overflow: visible;
}
.characters-house-list {
display: grid;
gap: 12px;
}
.characters-house-card {
display: grid;
gap: 12px;
border: 1px solid var(--border);
border-radius: 7px;
background: var(--surface-muted);
padding: 12px;
color: var(--text);
}
.characters-house-card-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
.characters-house-card-header h3,
.characters-house-new-card h3 {
margin: 0;
color: var(--text);
font-size: 16px;
line-height: 1.2;
}
.characters-house-card-header p {
margin: 4px 0 0;
color: var(--text-muted);
font-weight: 700;
}
.characters-house-card-header a,
.characters-section-heading .eq2-action-button {
display: inline-flex;
align-items: center;
min-height: 30px;
border: 1px solid var(--button-border);
border-radius: 6px;
background: var(--button-bg);
color: var(--button-text);
padding: 0 10px;
font-weight: 800;
text-decoration: none;
white-space: nowrap;
}
.characters-house-grid {
display: grid;
grid-template-columns: repeat(4, minmax(120px, 1fr));
gap: 10px;
align-items: end;
}
.characters-house-grid label {
display: grid;
gap: 4px;
min-width: 0;
color: var(--text-muted);
font-size: 12px;
font-weight: 800;
text-transform: uppercase;
}
.characters-house-grid input,
.characters-house-grid select {
box-sizing: border-box;
width: 100%;
min-height: 30px;
border: 1px solid var(--border-strong);
border-radius: 6px;
background: var(--surface);
color: var(--text);
padding: 5px 7px;
}
.characters-house-grid input[readonly],
.characters-house-grid select:disabled {
background: var(--surface-strong);
color: var(--text-muted);
}
.characters-house-field-wide {
grid-column: span 2;
}
.characters-house-detail-grid {
display: grid;
grid-template-columns: repeat(3, minmax(160px, 1fr));
gap: 8px;
}
.characters-house-detail-grid > div {
display: grid;
gap: 3px;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--surface);
padding: 8px;
}
.characters-house-detail-grid span {
color: var(--text-muted);
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
}
.characters-house-detail-grid strong {
color: var(--text);
font-size: 12px;
line-height: 1.35;
}
.characters-paperdoll {
display: flex;
align-items: stretch;
justify-content: center;
min-height: 100%;
}
.characters-paperdoll-frame {
position: relative;
display: grid;
place-items: center;
align-content: center;
width: 100%;
min-height: 420px;
overflow: hidden;
padding: 14px;
text-align: center;
}
.characters-paperdoll-frame::before {
content: "";
position: absolute;
width: 78px;
height: 250px;
border-radius: 999px 999px 42px 42px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0)),
var(--surface-strong);
box-shadow:
0 -58px 0 -18px var(--surface-strong),
0 42px 0 22px rgba(0, 0, 0, 0.08);
opacity: 0.46;
}
.characters-paperdoll-frame strong,
.characters-paperdoll-frame span {
position: relative;
z-index: 1;
}
.characters-paperdoll-frame strong {
color: var(--text);
font-size: 18px;
}
.characters-paperdoll-frame span {
color: var(--text-muted);
font-size: 12px;
font-weight: 800;
}
.characters-chip-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.characters-chip-list span,
.characters-chip-list a {
display: inline-flex;
align-items: center;
min-height: 28px;
padding: 7px 10px;
color: var(--text);
font-weight: 700;
text-decoration: none;
}
.characters-card-grid {
display: grid;
gap: 10px;
}
.characters-card-grid-2 {
grid-template-columns: repeat(2, minmax(240px, 1fr));
}
.characters-card-grid-3 {
grid-template-columns: repeat(3, minmax(220px, 1fr));
}
.characters-summary-card {
display: grid;
align-content: start;
gap: 8px;
min-width: 0;
border: 1px solid var(--border);
border-radius: 7px;
background: var(--surface-muted);
padding: 12px;
}
.characters-summary-card h3 {
margin: 0;
overflow: hidden;
color: var(--text);
font-size: 15px;
text-overflow: ellipsis;
white-space: nowrap;
}
.characters-summary-card p {
margin: 0;
color: var(--text-muted);
font-size: 12px;
font-weight: 800;
}
.characters-subsection-heading {
margin: 14px 0 8px;
color: var(--text-muted);
font-size: 12px;
font-weight: 900;
text-transform: uppercase;
}
.characters-data-table {
display: grid;
gap: 6px;
min-width: 0;
}
.characters-data-scroll {
max-width: 100%;
overflow-x: auto;
padding-bottom: 2px;
}
.characters-data-row {
display: grid;
gap: 8px;
align-items: center;
min-width: 760px;
border: 1px solid var(--border);
border-radius: 7px;
background: var(--surface-muted);
padding: 8px;
}
.characters-data-heading {
background: var(--surface-strong);
color: var(--text-muted);
font-size: 12px;
font-weight: 800;
text-transform: uppercase;
}
.characters-colors-row {
grid-template-columns: 70px repeat(6, minmax(95px, 1fr)) minmax(150px, auto);
}
.characters-factions-row {
grid-template-columns: 70px 90px minmax(180px, 1fr) minmax(120px, 0.7fr) minmax(130px, 0.7fr) minmax(150px, auto);
}
.characters-spells-row {
grid-template-columns: 70px 90px 105px minmax(190px, 1fr) 80px 120px minmax(150px, auto);
}
.characters-skills-row {
grid-template-columns: 70px 110px minmax(210px, 1fr) 110px 110px minmax(150px, 0.9fr) minmax(150px, auto);
}
.characters-effects-row {
grid-template-columns: minmax(220px, 1.2fr) 100px 70px 90px 90px 90px minmax(120px, 0.8fr);
min-width: 920px;
}
.characters-data-row label {
display: grid;
gap: 4px;
min-width: 0;
}
.characters-data-row label > span {
display: none;
}
.characters-readonly-value {
color: var(--text-muted);
font-weight: 800;
}
.characters-data-display,
.characters-new-marker {
overflow: hidden;
color: var(--text);
font-weight: 800;
text-overflow: ellipsis;
white-space: nowrap;
}
.characters-new-marker {
color: var(--accent-strong);
text-transform: uppercase;
}
.characters-data-row textarea {
min-height: 58px;
resize: vertical;
}
.characters-skill-type-heading {
border: 1px solid var(--border);
border-radius: 7px;
background: var(--surface-strong);
color: var(--text-muted);
padding: 8px 10px;
font-size: 12px;
font-weight: 900;
text-transform: uppercase;
}
.characters-progress-line {
display: grid;
gap: 4px;
color: var(--text-muted);
font-size: 12px;
font-weight: 800;
}
.characters-progress-line progress {
width: 100%;
height: 11px;
accent-color: var(--accent);
}
.characters-swap-form {
display: grid;
grid-template-columns: minmax(220px, 1fr) auto minmax(190px, auto);
gap: 10px;
align-items: end;
margin-top: 12px;
border: 1px solid var(--border);
border-radius: 7px;
background: var(--surface-muted);
padding: 10px;
}
.characters-swap-form > label:not(.characters-check-line) {
display: grid;
gap: 5px;
color: var(--text-muted);
font-size: 12px;
font-weight: 800;
}
.characters-row-actions {
display: flex;
flex-wrap: wrap;
gap: 6px;
justify-content: flex-end;
}
.spawns-page {
display: grid;
gap: 14px;
}
.spawns-header,
.spawns-panel,
.spawns-results {
border: 1px solid var(--border);
border-radius: 7px;
background: var(--surface);
box-shadow: var(--shadow-soft);
}
.spawns-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
padding: 14px;
}
.spawns-header h1,
.spawns-section-header h2 {
margin: 0;
color: var(--text);
font-size: 22px;
line-height: 1.2;
letter-spacing: 0;
}
.spawns-section-header h2 {
font-size: 18px;
}
.spawns-header p,
.spawns-section-header p {
margin: 6px 0 0;
color: var(--text-muted);
}
.spawns-header-actions,
.spawns-filter-actions,
.spawns-results-toolbar {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
.spawns-results-toolbar {
justify-content: space-between;
padding: 10px 12px;
border-bottom: 1px solid var(--border);
color: var(--text);
}
.spawns-header-actions a,
.spawns-filter-actions a {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 30px;
border: 1px solid var(--border-strong);
border-radius: 6px;
background: var(--surface-strong);
color: var(--accent-strong);
padding: 0 10px;
font-weight: 700;
text-decoration: none;
}
.spawns-header-actions a.is-active,
.spawns-filter-actions a.is-active {
background: var(--accent);
color: var(--button-text);
}
body.eq2-shell .spawns-header-actions a.is-active,
body.eq2-shell .spawns-header-actions a.is-active:link,
body.eq2-shell .spawns-header-actions a.is-active:visited,
body.eq2-shell .spawns-filter-actions a.is-active,
body.eq2-shell .spawns-filter-actions a.is-active:link,
body.eq2-shell .spawns-filter-actions a.is-active:visited {
color: var(--button-text);
}
.spawns-filter-panel,
.spawns-create-panel {
display: grid;
gap: 12px;
padding: 14px;
}
.spawns-filter-grid,
.spawns-search-form,
.spawns-create-form {
display: grid;
gap: 10px;
align-items: end;
}
.spawns-filter-grid {
grid-template-columns: minmax(220px, 1fr) minmax(140px, 0.45fr) minmax(240px, 1fr) auto;
}
.spawns-search-form {
grid-template-columns: minmax(260px, 1fr) auto;
}
.spawns-create-form {
grid-template-columns: minmax(260px, 1fr) minmax(120px, 0.35fr) minmax(150px, 0.45fr) auto;
}
.spawns-field {
display: grid;
gap: 5px;
min-width: 0;
color: var(--text-muted);
font-size: 12px;
font-weight: 700;
}
.spawns-field input,
.spawns-field select {
box-sizing: border-box;
width: 100%;
min-height: 32px;
border: 1px solid var(--border-strong);
border-radius: 5px;
background: var(--surface-strong);
color: var(--text);
padding: 5px 8px;
}
.spawns-field select:disabled {
opacity: 0.72;
}
.spawns-field-wide {
position: relative;
}
.spawns-result-row {
grid-template-columns: minmax(150px, 0.75fr) 76px minmax(220px, 1fr) 112px 82px minmax(360px, 1.5fr);
min-width: 1100px;
}
.spawns-result-name {
display: grid;
gap: 2px;
min-width: 0;
}
.spawns-result-name a {
color: var(--text);
}
.spawns-result-name small {
color: var(--text-muted);
}
.spawns-row-controls,
.spawns-link-icons,
.spawns-delete-check {
display: inline-flex;
flex-wrap: wrap;
gap: 7px;
align-items: center;
}
.spawns-link-icons img {
display: block;
border: 0;
}
.spawns-inline-delete {
margin: 0;
}
.spawns-inline-delete button {
min-height: 24px;
padding: 2px 8px;
}
.spawns-delete-check {
color: var(--text-muted);
font-size: 12px;
font-weight: 700;
}
.spawns-type-pill {
display: inline-flex;
align-items: center;
min-height: 22px;
border: 1px solid var(--border);
border-radius: 999px;
background: var(--surface-muted);
color: var(--text);
padding: 0 8px;
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
}
.spawns-result-count,
.spawns-bulk-actions {
padding: 10px 12px;
border-top: 1px solid var(--border);
color: var(--text-muted);
font-weight: 700;
}
.spawns-bulk-actions {
display: flex;
justify-content: flex-end;
}
.spawns-detail-legacy {
margin-top: 14px;
padding: 14px;
border: 1px solid var(--border);
border-radius: 7px;
background: var(--surface);
box-shadow: var(--shadow-soft);
overflow-x: auto;
}
.spawns-detail-legacy > table#sub-menu1 {
display: none;
}
.spawns-detail-legacy table {
background: transparent !important;
color: var(--text);
border-color: var(--border);
}
.spawns-detail-legacy td,
.spawns-detail-legacy th {
background: transparent !important;
color: var(--text);
border-color: var(--border);
}
.spawns-detail-legacy fieldset {
box-sizing: border-box;
width: auto !important;
max-width: 100%;
height: auto !important;
min-height: 0 !important;
margin: 0 0 10px;
padding: 10px;
border: 1px solid var(--border);
border-radius: 7px;
background: var(--surface-strong);
overflow: visible;
}
.spawns-detail-legacy legend {
padding: 0 6px;
color: var(--text);
font-weight: 700;
}
.spawns-detail-legacy input[type="text"],
.spawns-detail-legacy select,
.spawns-detail-legacy textarea {
box-sizing: border-box;
min-height: 28px;
border: 1px solid var(--border-strong);
border-radius: 5px;
background: var(--surface-strong);
color: var(--text);
padding: 4px 6px;
}
.spawns-detail-legacy input[readonly],
.spawns-detail-legacy [style*="background-color:#ddd" i],
.spawns-detail-legacy [style*="background-color: #ddd" i],
.spawns-detail-legacy [style*="background:#ddd" i],
.spawns-detail-legacy [style*="background: #ddd" i] {
background: var(--legacy-row-even) !important;
color: var(--text-muted) !important;
}
.spawns-detail-legacy .heading {
display: inline-block;
margin-bottom: 6px;
color: var(--text);
}
.spawns-detail-legacy #mmtabs {
margin: 0 0 8px;
}
.spawns-detail-legacy #mmtabs + br {
display: none;
}
.spawns-detail-legacy form[name="snForm"] > table,
.spawns-detail-legacy form[name="SpawnForm"] > table {
background: transparent !important;
}
.spawns-modern-detail {
display: grid;
gap: 12px;
}
.spawns-modern-detail-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
.spawns-modern-detail-header h2 {
margin: 0;
color: var(--text);
font-size: 18px;
letter-spacing: 0;
}
.spawns-modern-detail-header p {
margin: 4px 0 0;
color: var(--text-muted);
}
.spawns-detail-form {
display: grid;
gap: 12px;
}
.spawns-card-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
align-items: start;
}
.spawns-card-grid-flags {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.spawns-section-card {
display: grid;
gap: 10px;
min-width: 0;
padding: 12px;
border: 1px solid var(--border);
border-radius: 7px;
background: var(--surface-strong);
box-shadow: var(--shadow-soft);
}
.spawns-section-card-wide {
grid-column: span 2;
}
.spawns-section-card h3,
.spawns-section-heading h3 {
margin: 0;
color: var(--text);
font-size: 14px;
letter-spacing: 0;
}
.spawns-section-heading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.spawns-section-note {
margin: 0;
color: var(--text-muted);
font-size: 12px;
}
.spawns-spawn-layout {
display: grid;
grid-template-columns: minmax(640px, 1.45fr) minmax(300px, 0.75fr);
gap: 12px;
align-items: start;
}
.spawns-spawn-main-column,
.spawns-spawn-flag-column {
display: grid;
gap: 10px;
min-width: 0;
}
.spawns-spawn-general-card,
.spawns-spawn-commands-card {
padding: 10px;
}
.spawns-spawn-general-table,
.spawns-command-table {
width: 100%;
border-collapse: separate;
border-spacing: 6px;
}
.spawns-spawn-general-table th,
.spawns-command-table th {
width: 1%;
color: var(--text-muted);
font-size: 12px;
font-weight: 800;
text-align: right;
white-space: nowrap;
}
.spawns-spawn-general-table td,
.spawns-command-table td {
min-width: 0;
vertical-align: middle;
}
.spawns-spawn-control-line {
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
min-width: 0;
}
.spawns-spawn-general-table input[type="text"],
.spawns-spawn-general-table select,
.spawns-command-search {
box-sizing: border-box;
min-height: 28px;
border: 1px solid var(--border-strong);
border-radius: 5px;
background: var(--surface-strong);
color: var(--text);
padding: 4px 7px;
}
.spawns-spawn-input-compact {
width: 70px;
}
.spawns-spawn-input-medium {
width: 132px;
}
.spawns-spawn-input-wide {
width: min(320px, 100%);
}
.spawns-lookup-button,
.spawns-inline-link {
display: inline-flex;
align-items: center;
min-height: 28px;
border: 1px solid var(--border-strong);
border-radius: 5px;
background: var(--surface-muted);
color: var(--accent-strong);
padding: 0 8px;
font-size: 12px;
font-weight: 800;
text-decoration: none;
}
.spawns-icon-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border: 1px solid var(--border-strong);
border-radius: 5px;
background: var(--surface-muted);
cursor: pointer;
}
.spawns-icon-button img {
width: 16px;
height: 16px;
}
.spawns-command-lookup {
position: relative;
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
min-width: 0;
}
.spawns-command-lookup strong {
color: var(--text);
font-weight: 800;
}
.spawns-command-suggest {
position: relative;
flex-basis: 100%;
}
.spawns-command-suggest.suggest_shadow {
left: 0;
top: 100%;
}
.spawns-detail-form-grid {
display: grid;
grid-template-columns: repeat(4, minmax(130px, 1fr));
gap: 10px;
align-items: end;
}
.spawns-detail-field {
display: grid;
gap: 5px;
min-width: 0;
color: var(--text-muted);
font-size: 12px;
font-weight: 700;
}
.spawns-detail-field-wide {
grid-column: span 2;
}
.spawns-detail-field input[type="text"],
.spawns-detail-field select,
.spawns-readonly-value {
box-sizing: border-box;
width: 100%;
min-height: 32px;
border: 1px solid var(--border-strong);
border-radius: 5px;
background: var(--surface-strong);
color: var(--text);
padding: 5px 8px;
}
.spawns-readonly-value {
display: flex;
align-items: center;
background: var(--surface-muted);
color: var(--text-muted);
}
.spawns-detail-field small {
color: var(--text-soft);
font-weight: 600;
line-height: 1.3;
}
.spawns-detail-check {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 32px;
color: var(--text);
}
.spawns-detail-check input[type="checkbox"] {
width: 16px;
height: 16px;
}
.spawns-check-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 6px 10px;
}
.spawns-detail-actions {
display: inline-flex;
justify-content: flex-end;
gap: 8px;
align-items: center;
}
.spawns-detail-actions span {
color: var(--text-muted);
font-weight: 700;
}
.spawns-detail-actions .button-like {
display: inline-flex;
align-items: center;
min-height: 32px;
padding: 5px 12px;
border: 1px solid var(--button-border);
border-radius: 5px;
background: var(--button-bg);
color: var(--button-text);
font-weight: 700;
text-decoration: none;
}
.spawns-row-actions .button-like {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 30px;
border: 1px solid var(--button-border);
border-radius: 5px;
background: var(--button-bg);
color: var(--button-text);
padding: 4px 10px;
font-weight: 700;
text-decoration: none;
}
.spawns-data-table {
display: grid;
gap: 8px;
overflow-x: auto;
}
.spawns-data-row {
display: grid;
gap: 8px;
align-items: end;
min-width: 0;
padding: 8px;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--surface);
}
.spawns-data-heading {
align-items: center;
background: var(--surface-muted);
color: var(--text-muted);
font-size: 12px;
font-weight: 800;
text-transform: uppercase;
}
.spawns-data-heading > span {
min-width: 0;
line-height: 1.15;
overflow-wrap: anywhere;
white-space: normal;
}
.spawns-data-row-new {
border-color: var(--accent-soft);
background: var(--surface-strong);
}
.spawns-data-row label {
display: grid;
gap: 4px;
min-width: 0;
color: var(--text-muted);
font-size: 11px;
font-weight: 700;
}
.spawns-data-row input[type="text"],
.spawns-data-row input[type="number"],
.spawns-data-row select {
box-sizing: border-box;
width: 100%;
min-height: 30px;
border: 1px solid var(--border-strong);
border-radius: 5px;
background: var(--surface-strong);
color: var(--text);
padding: 4px 7px;
}
.spawns-data-row small {
color: var(--text-soft);
font-weight: 600;
}
.spawns-row-actions,
.spawns-inline-actions {
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
justify-content: flex-end;
color: var(--text-muted);
font-size: 12px;
font-weight: 700;
}
.spawns-inline-actions {
justify-content: flex-start;
}
.spawns-bulk-delete-grid {
display: grid;
grid-template-columns: repeat(3, minmax(180px, 1fr));
gap: 6px 12px;
padding: 10px;
border: 1px dashed var(--border-strong);
border-radius: 7px;
background: var(--surface-muted);
}
.spawns-bulk-delete-grid .spawns-row-actions {
grid-column: 1 / -1;
justify-content: flex-start;
}
.spawns-appearance-row {
grid-template-columns: 70px 100px 90px minmax(150px, 1.2fr) 70px 70px 70px 145px;
min-width: 860px;
}
.spawns-equipment-appearance-row {
grid-template-columns: 60px 90px 120px 130px repeat(6, 70px) 145px;
min-width: 1120px;
}
.spawns-location-name-row {
grid-template-columns: 80px minmax(220px, 1fr) 145px;
min-width: 520px;
}
.spawns-location-entry-row {
grid-template-columns: 70px minmax(160px, 1fr) 100px 110px 95px repeat(4, 90px) 145px;
min-width: 1040px;
}
.spawns-placement-row {
grid-template-columns: 64px 90px 132px repeat(3, 70px) repeat(3, 88px) 90px 74px 74px 94px 132px 136px 124px 108px 86px 145px;
min-width: 2000px;
}
.spawns-overrides-row {
grid-template-columns: 64px 112px repeat(16, minmax(112px, 1fr)) 145px;
min-width: 2300px;
}
.spawns-group-row {
grid-template-columns: 70px minmax(220px, 1.2fr) 115px 130px 130px 96px 96px 145px;
min-width: 940px;
}
.spawns-group-association-row {
grid-template-columns: 70px 120px 120px minmax(190px, 1fr) 145px;
min-width: 760px;
}
.spawns-group-chance-row {
grid-template-columns: 70px 120px 120px 145px;
min-width: 520px;
}
.spawns-loot-row {
grid-template-columns: 130px minmax(240px, 1fr) 145px;
min-width: 560px;
}
.spawns-script-row {
grid-template-columns: 76px 96px minmax(190px, 1fr) minmax(190px, 1fr) minmax(270px, 1.4fr) 190px;
min-width: 1120px;
}
.spawns-merchant-row {
grid-template-columns: 80px 115px 120px minmax(260px, 1fr) 120px;
min-width: 760px;
}
.spawns-merchant-inventory-row {
grid-template-columns: 80px 120px minmax(260px, 1fr) 105px 145px;
min-width: 760px;
}
.spawns-merchant-multiplier-row {
grid-template-columns: 70px 105px repeat(7, minmax(108px, 1fr)) 145px;
min-width: 1160px;
}
.spawns-location-detail .spawns-section-card {
overflow: visible;
}
.spawns-location-detail .spawns-data-table {
max-width: 100%;
overflow-x: auto;
padding-bottom: 4px;
}
body.eq2-shell.density-compact #main-body {
padding: 12px;
}
body.eq2-shell.density-compact #main-body .eq2-page,
body.eq2-shell.density-compact #main-body .eq2-grid,
body.eq2-shell.density-compact #main-body .server-form-grid,
body.eq2-shell.density-compact #main-body .server-filter-form,
body.eq2-shell.density-compact #main-body .items-base-grid,
body.eq2-shell.density-compact #main-body .items-search-form-grid,
body.eq2-shell.density-compact #main-body .characters-detail-layout,
body.eq2-shell.density-compact #main-body .spawns-detail-form-grid,
body.eq2-shell.density-compact #main-body .zones-form-grid,
body.eq2-shell.density-compact #main-body .guilds-search-form,
body.eq2-shell.density-compact #main-body .quests-register-form {
gap: 8px;
}
body.eq2-shell.density-compact #main-body .eq2-panel,
body.eq2-shell.density-compact #main-body .eq2-card,
body.eq2-shell.density-compact #main-body .settings-panel,
body.eq2-shell.density-compact #main-body .server-form-section,
body.eq2-shell.density-compact #main-body .spawns-section-card,
body.eq2-shell.density-compact #main-body .characters-section-card {
padding: 9px;
}
body.eq2-shell.density-compact #main-body fieldset,
body.eq2-shell.density-compact #site-container fieldset,
body.eq2-shell.density-compact #Editor fieldset {
margin: 5px 0;
padding: 7px 8px;
}
body.eq2-shell.density-compact #main-body legend,
body.eq2-shell.density-compact #site-container legend,
body.eq2-shell.density-compact #Editor legend {
padding: 0 5px;
font-size: 12px;
}
body.eq2-shell.density-compact #site-container table.SubPanel > tbody > tr > td,
body.eq2-shell.density-compact #site-container table.SectionMain > tbody > tr > td,
body.eq2-shell.density-compact #site-container table.SectionMainFloat > tbody > tr > td,
body.eq2-shell.density-compact #site-container table.SectionToggles > tbody > tr > td,
body.eq2-shell.density-compact #site-container table.SectionMenuLeft > tbody > tr > td,
body.eq2-shell.density-compact #site-container table.ContrastTable th,
body.eq2-shell.density-compact #site-container table.ContrastTable td,
body.eq2-shell.density-compact #main-body table.SubPanel > tbody > tr > td,
body.eq2-shell.density-compact #main-body table.SectionMain > tbody > tr > td,
body.eq2-shell.density-compact #main-body table.SectionMainFloat > tbody > tr > td,
body.eq2-shell.density-compact #main-body table.SectionToggles > tbody > tr > td,
body.eq2-shell.density-compact #main-body table.SectionMenuLeft > tbody > tr > td,
body.eq2-shell.density-compact #main-body table.ContrastTable th,
body.eq2-shell.density-compact #main-body table.ContrastTable td,
body.eq2-shell.density-compact #Editor table.SubPanel > tbody > tr > td,
body.eq2-shell.density-compact #Editor table.SectionMain > tbody > tr > td,
body.eq2-shell.density-compact #Editor table.SectionMainFloat > tbody > tr > td,
body.eq2-shell.density-compact #Editor table.SectionToggles > tbody > tr > td,
body.eq2-shell.density-compact #Editor table.SectionMenuLeft > tbody > tr > td {
padding: 3px 5px;
}
body.eq2-shell.density-compact #site-container input[type="text"],
body.eq2-shell.density-compact #site-container input[type="password"],
body.eq2-shell.density-compact #site-container input[type="number"],
body.eq2-shell.density-compact #site-container select,
body.eq2-shell.density-compact #site-container textarea,
body.eq2-shell.density-compact #main-body input[type="text"],
body.eq2-shell.density-compact #main-body input[type="password"],
body.eq2-shell.density-compact #main-body input[type="number"],
body.eq2-shell.density-compact #main-body select,
body.eq2-shell.density-compact #main-body textarea {
min-height: 24px;
padding: 4px 6px;
font-size: 12px;
}
body.eq2-shell.density-compact #site-container input[type="submit"],
body.eq2-shell.density-compact #site-container input[type="button"],
body.eq2-shell.density-compact #site-container button,
body.eq2-shell.density-compact #site-container .eq2-button,
body.eq2-shell.density-compact #main-body input[type="submit"],
body.eq2-shell.density-compact #main-body input[type="button"],
body.eq2-shell.density-compact #main-body button,
body.eq2-shell.density-compact #main-body .eq2-button {
min-height: 24px;
padding: 4px 8px;
font-size: 12px;
}
body.eq2-shell.density-compact #main-body .eq2-page-header,
body.eq2-shell.density-compact #main-body .server-section-header,
body.eq2-shell.density-compact #main-body .items-detail-header,
body.eq2-shell.density-compact #main-body .spawns-modern-detail-header,
body.eq2-shell.density-compact #main-body .characters-detail-header {
margin-bottom: 8px;
padding: 8px 10px;
}
@media (max-width: 1480px) {
.items-base-grid {
grid-template-columns: repeat(6, minmax(0, 1fr));
grid-template-areas:
"general general general general slots slots"
"general general general general toggles toggles"
"adventure adventure tradeskill tradeskill adornments adornments";
}
}
@media (max-width: 1120px) {
.items-base-grid {
grid-template-columns: 1fr;
grid-template-areas:
"general"
"slots"
"toggles"
"adventure"
"tradeskill"
"adornments";
}
body.eq2-shell.density-compact #main-body .items-base-grid {
grid-template-columns: 1fr;
grid-template-areas:
"general"
"slots"
"toggles"
"adventure"
"tradeskill"
"adornments";
}
}
@media (max-width: 980px) {
body.eq2-shell #site-container {
display: block;
width: 100%;
}
body.eq2-shell #site-banner {
border-right: 0;
padding: 76px 14px 14px;
}
.shell-banner-tools {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
body.eq2-shell #top-menu {
position: static;
max-height: none;
overflow-x: auto;
overflow-y: hidden;
border-right: 0;
border-bottom: 1px solid var(--border);
}
body.eq2-shell #top-menu .top-menu-list {
flex-direction: row;
min-width: max-content;
padding: 8px;
}
body.eq2-shell #top-menu .top-menu-link {
min-width: 84px;
justify-content: center;
text-align: center;
}
body.eq2-shell #top-menu .top-menu-logout {
margin-top: 0;
border-top-color: transparent;
}
body.eq2-shell #main-body,
body.eq2-shell #login-box {
min-width: 0;
}
}
@media (max-width: 760px) {
.settings-overlay {
grid-template-columns: 1fr;
}
.settings-overlay-panel {
grid-column: 1;
margin: 8px;
}
body.eq2-shell #site-banner {
padding: 72px 12px 12px;
}
.shell-banner-tools {
grid-template-columns: 1fr;
}
body.eq2-shell #user-info,
body.eq2-shell #db-picker {
position: static;
max-width: none;
text-align: left;
}
body.eq2-shell #db-picker .world-picker {
justify-content: flex-start;
}
body.eq2-shell #main-body {
padding: 10px;
}
.settings-header,
.settings-grid,
.settings-preferences {
display: block;
}
.settings-header-actions {
justify-content: flex-start;
margin-top: 8px;
}
.settings-navigation-options {
grid-template-columns: 1fr;
}
body.eq2-shell #main-body :is(
.eq2-tabs,
.items-subnav,
.items-search-actions,
.guilds-tabs,
.quests-tabs,
.zones-tabs,
.characters-mode-tabs,
.characters-filter-actions,
.characters-overview-tabs,
.spawns-filter-actions,
.server-loot-mode-tabs,
.server-icons-tabs,
.server-misc-script-tabs,
.server-mode-tabs
),
body.eq2-shell #main-body #sub-menu1:not(table),
body.eq2-shell #main-body table#sub-menu1 tbody,
body.eq2-shell #main-body table#sub-menu1 tr {
overflow-x: visible;
gap: 5px;
}
body.eq2-shell #main-body :is(
.eq2-tabs,
.items-subnav,
.items-search-actions,
.guilds-tabs,
.quests-tabs,
.zones-tabs,
.characters-mode-tabs,
.characters-filter-actions,
.characters-overview-tabs,
.spawns-filter-actions,
.server-loot-mode-tabs,
.server-icons-tabs,
.server-misc-script-tabs,
.server-mode-tabs
) a,
body.eq2-shell #main-body #sub-menu1 a {
flex: 1 1 min(100%, 132px);
max-width: none;
min-width: 0;
min-height: 32px;
white-space: normal;
}
.settings-panel {
margin-bottom: 12px;
}
.settings-field {
display: block;
}
.settings-field label {
display: block;
margin-bottom: 4px;
text-align: left;
}
.items-search-form-grid {
grid-template-columns: 1fr;
}
.items-search-lookup {
max-width: none;
}
.items-history-filters {
grid-template-columns: 1fr;
}
.eq2-history-filters {
grid-template-columns: 1fr;
}
.items-effects-layout {
grid-template-columns: 1fr;
}
.items-base-grid,
.items-base-layout #itemClassesTable,
.items-base-layout #itemTSClassesGrid {
grid-template-columns: 1fr;
}
.server-recipes-header,
.server-recipes-search,
.server-recipes-create {
display: block;
}
.server-recipes-field,
.server-recipes-check,
.server-recipes-actions {
margin-top: 10px;
}
.server-recipe-detail-grid,
.server-recipe-product-header,
.server-recipe-product-row,
.server-recipe-details-form {
grid-template-columns: 1fr;
}
.server-recipe-products,
.server-recipe-details {
grid-column: auto;
}
.server-recipe-component-row {
grid-template-columns: 1fr;
}
.server-recipe-components-search,
.server-recipe-component-columns,
.server-recipe-component-item-header,
.server-recipe-component-item-row {
grid-template-columns: 1fr;
}
.server-loot-name-search,
.server-loot-select-grid {
grid-template-columns: 1fr;
}
.server-loot-edit-row,
.server-loot-primary-panel,
.server-loot-coin-panel,
.server-loot-actions-panel,
.server-loot-drop-row {
grid-template-columns: 1fr;
min-width: 0;
}
.server-loot-drop-header {
display: none;
}
.server-loot-drop-field span {
display: block;
}
.server-lua-form,
.server-lua-block-form,
.server-misc-script-layout,
.script-editor-workspace,
.server-filter-form,
.server-form-grid,
.server-table-row,
.server-groundspawn-create-grid,
.server-collection-form-grid,
.server-house-create-grid,
.server-house-identity-grid,
.server-house-cost-grid,
.server-house-exit-grid,
.server-faction-form-grid,
.server-faction-description-grid,
.server-faction-alliance-create-grid,
.server-starting-faction-create-grid,
.server-npc-spell-list-grid,
.server-entity-command-create-grid,
.server-revive-form-grid,
.server-revive-detail .server-revive-form-grid,
.server-flight-form-grid,
.server-transporter-create-grid,
.server-transporter-general-grid,
.server-transporter-location-grid,
.server-transporter-requirements-grid,
.server-transporter-map-grid,
.server-transporter-message-grid {
grid-template-columns: 1fr;
}
.server-panel-header {
display: grid;
}
.server-table-row {
min-width: 0;
}
.server-table-row.spells-data-row,
.server-table-row.spells-effects-row,
.server-table-row.spells-classes-row {
grid-template-columns: 1fr;
min-width: 0;
}
.spells-tier-grid,
.spells-tier-identity-grid,
.spells-tier-insert-grid,
.spells-main-meta-grid,
.spells-main-text-grid,
.spells-main-settings-grid,
.spells-main-appearance-grid,
.spells-main-toggle-grid,
.spells-main-side-layout,
.spells-search-filter-grid,
.spells-search-lookup-row,
.spells-action-choice-grid,
.spells-trait-grid,
.spells-aa-grid {
grid-template-columns: 1fr;
}
.server-table-row.spells-search-row {
grid-template-columns: 1fr;
min-width: 0;
}
.spells-main-field-wide,
.spells-main-script-field {
grid-column: auto;
}
.spells-aa-field-wide {
grid-column: auto;
}
.server-table-heading {
display: none;
}
.server-table-row label > span {
display: block;
}
.server-row-actions {
justify-content: flex-start;
}
.server-loot-all-toolbar,
.server-loot-list-actions,
.server-loot-page-size {
align-items: stretch;
display: grid;
width: 100%;
}
.server-loot-global-header {
display: none;
}
.server-loot-global-row {
grid-template-columns: 1fr;
min-width: 0;
}
.server-editor-list-form,
.server-editor-list-confirm {
grid-template-columns: 1fr;
}
.guilds-header,
.guilds-detail-header,
.guilds-section-header,
.accounts-header,
.accounts-section-heading,
.quests-header,
.quests-detail-header,
.quests-section-header,
.zones-header,
.zones-detail-header,
.zones-section-header,
.characters-detail-header,
.characters-section-heading {
display: grid;
}
.guilds-search-form,
.guilds-new-form,
.guilds-summary-form,
.guilds-event-create,
.guilds-event-flags,
.guilds-member-create,
.guilds-rank-create,
.guilds-recruiting-form,
.guilds-member-notes,
.accounts-stat-grid,
.accounts-search-form,
.accounts-field-grid,
.quests-filter-form,
.quests-search-form,
.quests-register-form,
.quests-detail-row,
.zones-filter-form,
.zones-search-form,
.zones-new-form,
.zones-main-form,
.zones-form-grid,
.zones-coord-grid,
.zones-settings-grid,
.zones-instance-grid,
.zones-toggle-row,
.characters-stat-grid,
.characters-search-form,
.characters-detail-layout,
.characters-field-grid,
.characters-field-grid-dense,
.characters-overview-grid,
.characters-overview-stats,
.characters-card-grid-2,
.characters-card-grid-3,
.characters-equipment-window,
.characters-house-grid,
.characters-house-detail-grid,
.characters-swap-form,
.spawns-filter-grid,
.spawns-search-form,
.spawns-create-form,
.spawns-card-grid,
.spawns-spawn-layout,
.spawns-detail-form-grid,
.spawns-check-grid,
.spawns-data-row,
.spawns-bulk-delete-grid,
.zones-location-row,
.zones-revive-row {
grid-template-columns: 1fr;
}
.guilds-field-wide,
.accounts-edit-field-wide,
.accounts-edit-field-full,
.quests-field-wide,
.zones-form-section,
.zones-form-actions,
.zones-script-meta,
.characters-edit-field-wide {
grid-column: auto;
}
.server-table-row.guilds-result-row,
.server-table-row.guilds-event-row,
.server-table-row.guilds-member-row,
.server-table-row.guilds-rank-row,
.server-table-row.accounts-result-row,
.server-table-row.accounts-character-row,
.server-table-row.quests-result-row,
.server-table-row.quests-zone-row,
.server-table-row.quests-detail-row,
.server-table-row.zones-result-row,
.server-table-row.zones-list-row,
.server-table-row.zones-location-row,
.server-table-row.zones-revive-row,
.server-table-row.characters-result-row,
.server-table-row.spawns-result-row {
grid-template-columns: 1fr;
min-width: 0;
}
.characters-header,
.accounts-header,
.spawns-header,
.spawns-modern-detail-header {
display: grid;
}
.characters-side-nav {
position: static;
}
.characters-data-row {
grid-template-columns: 1fr;
min-width: 0;
}
.characters-data-row[style] {
grid-template-columns: 1fr !important;
min-width: 0 !important;
}
.characters-data-heading {
display: none;
}
.characters-data-row label > span {
display: block;
color: var(--text-muted);
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
}
.characters-row-actions {
justify-content: flex-start;
}
.characters-house-card-header {
display: grid;
}
.characters-house-field-wide {
grid-column: auto;
}
.characters-slot-column-right .characters-slot-item {
flex-direction: row;
text-align: left;
}
.characters-paperdoll-frame {
min-height: 180px;
}
.spawns-detail-field-wide {
grid-column: auto;
}
.spawns-section-card-wide {
grid-column: auto;
}
.spawns-data-row {
min-width: 0;
}
.spawns-data-heading {
display: none;
}
.spawns-spawn-general-table,
.spawns-command-table {
display: block;
overflow-x: auto;
}
.quests-form-actions,
.quests-toggle-row,
.zones-form-actions,
.zones-toggle-row {
grid-column: auto;
justify-content: flex-start;
}
}
body.eq2-shell #main-body .home-news-header {
display: grid;
grid-template-columns: minmax(220px, 1fr) minmax(360px, 760px);
gap: 14px;
align-items: end;
margin-bottom: 10px;
padding: 12px;
border: 1px solid var(--border);
border-radius: 10px;
background: linear-gradient(135deg, var(--surface-strong), var(--surface-muted));
}
body.eq2-shell #main-body .home-news-title h1 {
margin: 0 0 4px;
font-size: 22px;
line-height: 1.1;
}
body.eq2-shell #main-body .home-news-title p {
margin: 0;
color: var(--text-muted);
font-weight: 700;
}
body.eq2-shell #main-body .news-filter-form {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 8px;
align-items: end;
}
body.eq2-shell #main-body .news-filter-form label {
display: grid;
gap: 4px;
color: var(--text-muted);
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
}
body.eq2-shell #main-body .news-filter-form select,
body.eq2-shell #main-body .news-filter-form input[type="search"],
body.eq2-shell #main-body .news-filter-form input[type="date"] {
box-sizing: border-box;
width: 100%;
min-height: 30px;
border: 1px solid var(--border-strong);
border-radius: 6px;
background: var(--surface-strong);
color: var(--text);
padding: 5px 8px;
}
body.eq2-shell #main-body .news-filter-search {
grid-column: span 2;
}
body.eq2-shell #main-body .news-filter-actions {
display: flex;
grid-column: span 6;
gap: 8px;
align-items: center;
justify-content: flex-end;
}
body.eq2-shell #main-body .news-filter-actions a {
font-weight: 800;
text-decoration: none;
}
body.eq2-shell #main-body .news-filter-status {
margin: 0 0 8px 2px;
color: var(--text-muted);
font-size: 12px;
font-weight: 700;
}
body.eq2-shell #main-body .news-card-meta {
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
color: var(--text-muted);
}
body.eq2-shell #main-body .news-source-pill {
display: inline-flex;
align-items: center;
min-height: 18px;
border: 1px solid var(--border-strong);
border-radius: 999px;
background: var(--surface-muted);
color: var(--accent-strong);
padding: 1px 8px;
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
}
body.eq2-shell #main-body .news-change-summary p {
margin: 0 0 8px;
font-weight: 700;
}
body.eq2-shell #main-body .news-change-summary ul {
margin: 0;
padding-left: 18px;
}
body.eq2-shell #main-body .news-change-summary li {
margin: 3px 0;
}
@media (max-width: 980px) {
body.eq2-shell #main-body .home-news-header,
body.eq2-shell #main-body .news-filter-form {
grid-template-columns: 1fr;
}
body.eq2-shell #main-body .news-filter-search,
body.eq2-shell #main-body .news-filter-actions {
grid-column: auto;
}
body.eq2-shell #main-body .news-filter-actions {
justify-content: flex-start;
}
}
body.eq2-shell #main-body .news-change-detail-list a {
font-weight: 800;
text-decoration: none;
}
body.eq2-shell #main-body .news-change-table {
color: var(--accent-strong);
font-weight: 800;
}
body.eq2-shell #main-body .news-change-more {
color: var(--text-muted);
font-weight: 700;
}
body.eq2-shell #main-body .news-change-more a {
font-weight: 800;
text-decoration: none;
}
body.eq2-shell #main-body .news-change-popup {
display: none;
position: fixed;
inset: 0;
z-index: 10000;
place-items: center;
padding: 24px;
}
body.eq2-shell #main-body .news-change-popup:target {
display: grid;
}
body.eq2-shell #main-body .news-change-popup-backdrop {
position: absolute;
inset: 0;
background: rgba(8, 12, 10, 0.58);
backdrop-filter: blur(2px);
}
body.eq2-shell #main-body .news-change-popup-panel {
position: relative;
z-index: 1;
box-sizing: border-box;
width: min(920px, 100%);
max-height: min(760px, calc(100vh - 48px));
overflow: auto;
border: 1px solid var(--border-strong);
border-radius: 12px;
background: var(--surface-strong);
box-shadow: var(--shadow);
padding: 14px;
}
body.eq2-shell #main-body .news-change-popup-header {
display: flex;
gap: 12px;
align-items: center;
justify-content: space-between;
position: sticky;
top: -14px;
z-index: 2;
margin: -14px -14px 10px;
border-bottom: 1px solid var(--border);
background: var(--surface-strong);
padding: 12px 14px;
}
body.eq2-shell #main-body .news-change-popup-header h2 {
margin: 0;
font-size: 18px;
}
body.eq2-shell #main-body .news-change-popup-close {
border: 1px solid var(--border-strong);
border-radius: 999px;
background: var(--surface-muted);
padding: 5px 10px;
font-weight: 800;
text-decoration: none;
white-space: nowrap;
}
body.eq2-shell #main-body .news-change-popup-list {
margin: 0;
padding-left: 22px;
}
body.eq2-shell #main-body .news-change-popup-list li {
margin: 7px 0;
line-height: 1.35;
}
@media (max-width: 760px) {
body.eq2-shell #main-body .news-change-popup {
padding: 10px;
}
body.eq2-shell #main-body .news-change-popup-panel {
max-height: calc(100vh - 20px);
}
body.eq2-shell #main-body .news-change-popup-header {
align-items: flex-start;
flex-direction: column;
}
}
body.eq2-shell #main-body .news-change-popup:target {
display: block;
}
body.eq2-shell #main-body .news-change-popup:target .news-change-popup-panel {
display: block;
}
body.eq2-shell #main-body .news-change-popup-panel {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10002;
}
body.eq2-shell #main-body .news-change-popup-backdrop {
z-index: 10001;
}
body.eq2-shell .news-change-popup {
display: none !important;
position: fixed;
inset: 0;
z-index: 10000;
padding: 24px;
}
body.eq2-shell .news-change-popup.is-open {
display: block !important;
}
body.eq2-shell .news-change-popup-backdrop {
position: fixed;
inset: 0;
z-index: 10001;
background: rgba(8, 12, 10, 0.58);
backdrop-filter: blur(2px);
}
body.eq2-shell .news-change-popup-panel {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10002;
box-sizing: border-box;
width: min(920px, calc(100vw - 48px));
max-height: min(760px, calc(100vh - 48px));
overflow: auto;
border: 1px solid var(--border-strong);
border-radius: 12px;
background: var(--surface-strong);
box-shadow: var(--shadow);
padding: 14px;
}
body.eq2-shell .news-change-popup-header {
display: flex;
gap: 12px;
align-items: center;
justify-content: space-between;
position: sticky;
top: -14px;
z-index: 2;
margin: -14px -14px 10px;
border-bottom: 1px solid var(--border);
background: var(--surface-strong);
padding: 12px 14px;
}
body.eq2-shell .news-change-popup-header h2 {
margin: 0;
font-size: 18px;
}
body.eq2-shell .news-change-popup-close {
border: 1px solid var(--border-strong);
border-radius: 999px;
background: var(--surface-muted);
padding: 5px 10px;
font-weight: 800;
text-decoration: none;
white-space: nowrap;
}
body.eq2-shell .news-change-popup-list {
margin: 0;
padding-left: 22px;
}
body.eq2-shell .news-change-popup-list li {
margin: 7px 0;
line-height: 1.35;
}
@media (max-width: 760px) {
body.eq2-shell .news-change-popup {
padding: 10px;
}
body.eq2-shell .news-change-popup-panel {
width: calc(100vw - 20px);
max-height: calc(100vh - 20px);
}
body.eq2-shell .news-change-popup-header {
align-items: flex-start;
flex-direction: column;
}
}