lee/wanderer
1
0
Fork 0
mirror of https://github.com/wanderer-industries/wanderer synced 2025-12-12 10:45:54 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

theme cleanup

Browse Source
This commit is contained in:
Gustav
2025-01-08 23:45:27 -05:00
parent bf9c4cda02
commit d76079d4c7
6 changed files with 96 additions and 202 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
assets/js/hooks/Mapper/components/map/Map.module.scss
View File

@@ -1,8 +1,11 @@
.MapRoot {
width: 100%;
height: 100%;
}
.BackgroundAlternateColor {
background-color: var(--rf-soft-bg-color, #2f2f2f);
background-color: var(--rf-bg-color, #000000);
&.BackgroundAlternateColor {
background-color: var(--rf-soft-bg-color, #171717);
--rf-node-bg-color: var(--rf-node-soft-bg-color, #2b2b2b);
}
}

85
assets/js/hooks/Mapper/components/map/components/SolarSystemNode/SolarSystemNode.module.scss
View File

@@ -1,12 +1,16 @@
@import '@/hooks/Mapper/components/map/styles/eve-common-variables';
.RootCustomNode {
background-color: var(--rf-node-bg-color, #202020) !important;
position: relative;
z-index: 1;
overflow: hidden;
font-weight: var(--rf-node-font-weight, bold);
color: var(--rf-text-color, #ffffff);
font-family: var(--rf-node-font, inherit);
}
/* Region backgrounds */
/* Region backgrounds for optional tinted headers, etc. */
.Mataria,
.Amarria,
.Gallente,
@@ -47,23 +51,29 @@
background-position-y: 0;
}
/* Node selected styling */
.selected {
border-color: var(--pastel-pink);
border-color: var(--pastel-pink, #d291bc);
box-shadow: 0 0 10px #9a1af1c2;
}
/* Eve system status backgrounds, etc. */
.eve-system-status-home {
border: 1px solid var(--eve-solar-system-status-color-home-dark30);
background-image: linear-gradient(275deg, var(--eve-solar-system-status-friendly), transparent);
background-image: linear-gradient(
275deg,
var(--eve-solar-system-status-friendly),
transparent
);
&.selected {
border-color: var(--eve-solar-system-status-color-home);
}
}
.eve-system-status-friendly {
border: 1px solid var(--eve-solar-system-status-color-friendly-dark20);
background-image: linear-gradient(275deg, var(--eve-solar-system-status-friendly-dark30), transparent);
background-image: linear-gradient(
275deg,
var(--eve-solar-system-status-friendly-dark30),
transparent
);
&.selected {
border-color: var(--eve-solar-system-status-color-friendly-dark5);
}
@@ -72,20 +82,31 @@
border: 1px solid var(--eve-solar-system-status-color-lookingFor-dark15);
background-image: linear-gradient(275deg, #45ff8f2f, #457fff2f);
&.selected {
border-color: var(--pastel-pink);
border-color: var(--pastel-pink, #d291bc);
}
}
.eve-system-status-warning {
background-image: linear-gradient(275deg, var(--eve-solar-system-status-warning), transparent);
background-image: linear-gradient(
275deg,
var(--eve-solar-system-status-warning),
transparent
);
}
.eve-system-status-dangerous {
background-image: linear-gradient(275deg, var(--eve-solar-system-status-dangerous), transparent);
background-image: linear-gradient(
275deg,
var(--eve-solar-system-status-dangerous),
transparent
);
}
.eve-system-status-target {
background-image: linear-gradient(275deg, var(--eve-solar-system-status-target), transparent);
background-image: linear-gradient(
275deg,
var(--eve-solar-system-status-target),
transparent
);
}
/* Bookmarks row */
.Bookmarks {
position: absolute;
width: 100%;
@@ -128,33 +149,28 @@
}
}
/* Slight shadow for text */
.textShadowThin {
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}
.tagSkyFontMedium {
color: #38bdf8;
font-weight: 500;
.TagTitle {
font-size: 11px;
font-weight: bold;
text-shadow: 0 0 2px rgba(231, 146, 52, 0.73);
color: var(--rf-tag-color, #ffb01d);
}
/* HeadRow near the top, possibly ~19px tall. */
/* The top row (HeadRow). */
.HeadRow {
position: relative;
top: 1px;
.classTitle {
font-weight: bold;
text-shadow: 0 0 2px rgba(0, 0, 0, 0.73);
font-size: 11px;
}
.TagTitle {
font-size: 11px;
font-weight: bold;
text-shadow: 0 0 2px rgba(231, 146, 52, 0.73);
color: #ffb01d;
}
@-moz-document url-prefix() {
.classSystemName {
font-family: inherit !important;
font-family: var(--rf-node-font, inherit);
font-weight: bold;
}
}
@@ -163,16 +179,17 @@
/* Usually ~19px tall for bottom row. */
.BottomRow {
height: 19px;
.localCounter {
display: flex;
gap: 2px;
}
.hasUserCharacters {
color: #fbbf24;
color: var(--rf-has-user-characters, #fbbf24);
}
}
/* Overflows, effect icons, etc. */
/* The systemName overflow + effect icon, etc. */
.systemNameOverflow {
flex-grow: 1;
overflow: hidden;
@@ -194,7 +211,7 @@
}
}
/* The node handlers / double-click area */
/* The node's invisible handles/double-click overlay. */
.Handlers {
position: absolute;
z-index: 2;
@@ -203,13 +220,17 @@
width: 100%;
height: 100%;
}
/* The little React Flow handles on each edge. */
.Handle {
border: 1px solid var(--pastel-blue);
border: 1px solid var(--pastel-blue, #5a7d9a);
width: 5px;
height: 5px;
&.selected {
border-color: var(--pastel-pink);
border-color: var(--pastel-pink, #d291bc);
}
&.HandleTop {
top: -2px;
}
@@ -242,7 +263,7 @@
}
}
/* Unsplashed signature containers */
/* Unsplashed signature containers. */
.Unsplashed {
position: absolute;
width: calc(50% - 4px);

14
assets/js/hooks/Mapper/components/map/components/SolarSystemNode/SolarSystemNode.tsx
View File

@@ -163,7 +163,7 @@ export const SolarSystemNode = memo(({ data, selected }: WrapNodeProps<MapSolarS
<div className={classes.Bookmarks}>
{labelCustom !== '' && (
<div className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES.custom)}>
<span className={classes.textShadowThin}>{labelCustom}</span>
<span className="[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)]">{labelCustom}</span>
</div>
)}
@@ -199,19 +199,19 @@ export const SolarSystemNode = memo(({ data, selected }: WrapNodeProps<MapSolarS
'flex flex-col w-[130px] h-[34px]',
'px-[6px] pt-[2px] pb-[3px] text-[10px]',
'leading-[1] space-y-[1px]',
'bg-[var(--tooltip-bg)] shadow-[0_0_5px_rgba(45,45,45,0.5)]',
'shadow-[0_0_5px_rgba(45,45,45,0.5)]',
'border border-[var(--pastel-blue-darken10)] rounded-[5px]'
)}
>
{visible && (
<>
<div className={clsx(classes.HeadRow, 'flex items-center gap-[3px]')}>
<div className={clsx(classes.classTitle, classTitleColor, classes.textShadowThin)}>
<div className={clsx(classes.classTitle, classTitleColor, '[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)]')}>
{class_title ?? '-'}
</div>
{tag != null && tag !== '' && (
<div className={clsx(classes.TagTitle, classes.tagSkyFontMedium)}>
<div className={clsx(classes.TagTitle, "color: #38bdf8; font-weight: 500;")}>
{tag}
</div>
)}
@@ -219,9 +219,7 @@ export const SolarSystemNode = memo(({ data, selected }: WrapNodeProps<MapSolarS
<div
className={clsx(
classes.classSystemName,
classes.textShadowThin,
classes.systemNameOverflow,
'overflow-hidden'
'flex-grow overflow-hidden text-ellipsis whitespace-nowrap font-sans',
)}
>
{systemName}
@@ -265,7 +263,7 @@ export const SolarSystemNode = memo(({ data, selected }: WrapNodeProps<MapSolarS
)}
>
<i className="pi pi-users text-[0.50rem]" />
<span className="font-sans text-[0.65rem]">{charactersInSystem.length}</span>
<span className="text-[0.65rem]">{charactersInSystem.length}</span>
</div>
)}
</div>

2
assets/js/hooks/Mapper/components/map/hooks/useBackgroundVars.ts
View File

@@ -26,7 +26,7 @@ export function useBackgroundVars(themeName?: string) {
const cssVarGap = style.getPropertyValue('--rf-bg-gap');
const cssVarSize = style.getPropertyValue('--rf-bg-size');
const cssColor = style.getPropertyValue('--rf-bg-color');
const cssColor = style.getPropertyValue('--rf-bg-pattern-color');
const gapNum = parseInt(cssVarGap, 10) || 16;
const sizeNum = parseInt(cssVarSize, 10) || 1;

17
assets/js/hooks/Mapper/components/map/styles/neon-theme.scss
View File

@@ -2,17 +2,28 @@
@import './eve-common';
.neon-theme {
--rf-bg-color: #000000;
--rf-soft-bg-color: #171717;
--rf-node-bg-color: #202020;
--rf-node-soft-bg-color: #2b2b2b;
--rf-text-color: #ffffff;
--rf-bg-variant: "dots";
--rf-bg-gap: 16;
--rf-bg-size: 1;
--rf-bg-pattern-color: #81818a;
--pastel-blue: #5a7d9a;
--pastel-pink: #d291bc;
--pastel-green: #88b04b;
--pastel-yellow: #ffdd59;
--dark-bg: #2d2d2d;
--text-color: #ffffff;
--tooltip-bg: #202020;
--rf-bg-variant: "dots";
--rf-bg-gap: 16;
.react-flow {
color: var(--text-color);

171
assets/js/hooks/Mapper/components/map/styles/pathfinder-theme.scss
View File

@@ -4,19 +4,21 @@
@import url('https://fonts.googleapis.com/css2?family=Oxygen:wght@300;400;700&display=swap');
.pathfinder-theme {
--rf-bg-color: #000000;
--rf-soft-bg-color: #282828;
--rf-bg-variant: "lines";
--rf-bg-gap: 32;
--rf-bg-color: #353535;
--rf-soft-bg-color: #282829;
--rf-node-bg-color: #202020;
--rf-node-soft-bg-color: #313335;
--rf-node-font-weight: bold;
--rf-text-color: #adadad;
--tooltip-bg: #202020;
--pf-text-color: #adadad;
--pf-dark-bg: #2d2d2d;
--pf-tooltip-bg: #202020;
--rf-bg-variant: "lines";
--rf-bg-gap: 32;
--rf-bg-size: 1;
--rf-bg-color: #313131;
--rf-bg-pattern-color: #313131;
--eve-effect-pulsar: #428bca;
--eve-effect-magnetar: #e06fdf;
--eve-effect-wolfRayet: #e28a0d;
@@ -36,153 +38,12 @@
--eve-wh-type-color-c13: #7986cb;
--eve-wh-type-color-drifter: #44aa82;
.MapRoot {
background-color: var(--rf-bg-color);
&.isSoftBackground {
background-color: var(--rf-soft-bg-color);
}
&.soft-bg {
--rf-bg-color: var(--rf-soft-bg-color);
}
}
--rf-node-font-weight: bold;
--rf-node-line-height: normal;
--rf-node-font-family: 'Oxygen', sans-serif;
--rf-node-text-color: var(--pf-text-color);
.RootCustomNode {
background-color: #313335 !important;
font-weight: 600;
line-height: normal;
color: var(--pf-text-color);
font-family: 'Oxygen', sans-serif !important;
}
.HeadRow {
position: relative;
top: 1px;
.classTitle {
font-size: 11px;
font-weight: bold;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.7);
}
@-moz-document url-prefix() {
.classSystemName {
font-family: inherit !important;
font-weight: bold;
mix-blend-mode: screen;
}
}
.classSystemName {
font-family: inherit !important;
font-weight: bold;
color: var(--pf-text-color);
mix-blend-mode: screen;
text-shadow: rgba(0, 0, 0, 0.4) 1px 1px;
}
.textEllipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.fontSans {
font-family: inherit !important;
}
}
.BottomRow {
.localCounter {
display: flex;
& > i {
position: relative;
top: 1px;
}
& > span {
font-size: 9px;
line-height: 9px;
font-weight: 700;
mix-blend-mode: screen;
color: #5cb85c;
}
}
.customName {
font-family: inherit !important;
font-weight: bold;
color: var(--pf-text-color);
mix-blend-mode: screen;
text-shadow: rgba(0, 0, 0, 0.4) 1px 1px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
flex-shrink: 1;
}
.tagTitle {
font-size: 9px;
font-family: inherit !important;
font-weight: bold;
color: #fbbf24 !important;
mix-blend-mode: screen;
}
}
.Handlers {
position: absolute;
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.Handle {
min-width: initial;
min-height: initial;
border: 1px solid var(--pastel-blue, #5a7d9a);
width: 5px;
height: 5px;
&.selected {
border-color: var(--pastel-pink, #d291bc);
}
&.HandleTop {
top: -2px;
}
&.HandleRight {
right: -2px;
}
&.HandleBottom {
bottom: -2px;
}
&.HandleLeft {
left: -2px;
}
&.Tick {
width: 7px;
height: 7px;
&.HandleTop {
top: -3px;
}
&.HandleRight {
right: -3px;
}
&.HandleBottom {
bottom: -3px;
}
&.HandleLeft {
left: -3px;
}
}
}
.react-flow {
color: var(--pf-text-color);
}
--rf-tag-color: #fbbf24;
--rf-has-user-characters: #5cb85c;
}