Open Dorako opened 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
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;
}``
Also, the font I tried to put in was Audiowide
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
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)
Please post picture/examples/good ideas etc in the comments.