Dorako / pf2e-dorako-ui

MIT License
18 stars 17 forks source link

Starfinder theme #330

Open Dorako opened 1 month ago

Dorako commented 1 month ago

Please post picture/examples/good ideas etc in the comments.

Icarus-the-phoenix commented 1 month ago

It'd be cool to have the theme match what the starfinder2e playtest styling. You can find several screencaps of the pdf in The Rules Lawyer's Video https://www.youtube.com/watch?v=uE42wH3mmPo image image

SoilentBrad commented 1 month ago

This .css is the custom one you helped me implement. I used colours as close to the ones in the playtest book as possible (a few extras in order to get gradients). It's based on the bg3 code to get the gradient on the chat messages, though I don't know where the yellow at the top of the gradient is coming from. I've also noticed that a few of the headings are a little dark. I tried to lighten the common spell/feat names on the character sheet, but not sure how successful I was.

``/ ----------------------------------------- / / Theme colors / / ----------------------------------------- / :root { --sf2-middle-brown: #0d4d96; --sf2-border-color: #0c417f; --sf2-background-1: #0b3668; --sf2-background-2: #0b2a52; --sf2-background-3: #0a1f3b; --sf2-background-4: #091324; --sf2-text-1: #fafafa; --sf2-text-2: #b7b7b7; --sf2-text-3: #747474; --sf2-text-4: #d9d9d9; --sf2-text-5: #969696; --sf2-accent-color-light: #df9ebd; --sf2-accent-color: #c473b3; --sf2-accent-color-dark: #a9599b; --sf2-color-scrollbar-highlight: #cc9bb4; --sf2-scrollbar-thumb-background: #c774ad; --sf2-scrollbar-thumb-border-color: #85448b; --sf2-blue-light: #0c93bd; --sf2-blue: #183541; --sf2-blue-dark: #1b2a30; --sf2-ba-orange: #ccc4dc; --sf2-action-green: #9cacbc; --sf2-pactslot-pink: #bc59a1; --sf2-spellslot-blue: #9cdce4; --sf2-bardic-yellow: #745ca4; --sf2-icon-green-stroke: #95aaa5; --sf2-icon-green-light: #1c4137; --sf2-icon-green-dark: #1d3733; --sf2-attention: #fe265d;

--sf2-alliance-ally-yellow: #c09e05; --sf2-alliance-opposition-red: #de1847; --sf2-alliance-companion-blue: #08c6e4; --sf2-alliance-ally-green: #52fead;

--sf2-rarity-legendary: #814399; --sf2-rarity-very-rare: #814399; --sf2-rarity-quest: #cd5f21; --sf2-rarity-rare: #5362ff; --sf2-rarity-uncommon: #98513d; --sf2-rarity-common: #737065;

--sf2-info-overlay-light: rgba(255, 255, 255, 0.25); --sf2-info-overlay-dark: rgba(0, 0, 0, 0.25);

/ Blue variant / --sf2-bg-inner: #182830; --sf2-bg-outer: #151e29; --sf2-border-inner: #2c4e69; --sf2-border-outer: #1b1c1d; --sf2-ui-purple: #4e3061; / Purple variant / // --sf2-border-inner: #7137a1; // --sf2-border-outer: #31184a; // --sf2-border-internal: #3b3048; // --sf2-bg-inner: #221830; // --sf2-bg-outer: #1c1529;

--sf2-inspect-background: #44647c; --sf2-inspect-border-color: #9cacbb;

--sf2-healing: #49cbc1;

--sf2-border-background: linear-gradient( to right, var(--sf2-border-outer) 0%, var(--sf2-border-inner) 50%, var(--sf2-border-outer) 100% ); --sf2-tooltip-window-background: linear-gradient( to right, var(--sf2-bg-outer) 0, var(--sf2-bg-inner) 50%, var(--sf2-bg-outer) 100% ); --sf2-ui-purple-background: linear-gradient( to top, color-mix(in srgb, var(--sf2-ui-purple) 50%, transparent) 0, transparent 15% );
--top-color: transparent; }``

SoilentBrad commented 1 month ago

Also, the font I tried to put in was Audiowide

TangledLion commented 1 month ago

I have a few sci fi elements I've whipped up for the sidebar. Some of em are crap, but they're all my original assts so feel free to use/take inspiration. I'm probably most proud of Sidebar Top and bottom. SF-AssetStuff.zip

ASpadedAce commented 1 month ago

blue-sidebar-replacement Something like this to mimic the sidebar of the rulebook could be cool. Was working on a mod myself but I'd rather you do it officially. (Like under the hp section)