Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

StyleNano removal: Palette system and Sheetlets #29903

Open
wants to merge 81 commits into
base: master
Choose a base branch
from

Conversation

aspiringLich
Copy link
Contributor

@aspiringLich aspiringLich commented Jul 11, 2024

This PR is a continuation of a derelict PR, #28356.

About the PR

Summary

  • StyleNano is GONE
  • Minimize hardcoding, colors are now much more consistent
  • Centralized locations to define colors / resource paths / hardcoding goodness
  • Actual documentation for UI dev, so people (like me) don't have to stare at UI code for 14 hours before doing anything (WIP).

PROOF THE PR ACTUALLY WORKS: link

This won't break the game I pinky promise

Why / Balance

// STLYE SHEETS WERE A MISTAKE. KILL ALL OF THIS WITH FIRE
public sealed class StyleNano : StyleBase
{
public const string StyleClassBorderedWindowPanel = "BorderedWindowPanel";
public const string StyleClassInventorySlotBackground = "InventorySlotBackground";
public const string StyleClassHandSlotHighlight = "HandSlotHighlight";
public const string StyleClassChatPanel = "ChatPanel";
public const string StyleClassChatSubPanel = "ChatSubPanel";
public const string StyleClassTransparentBorderedWindowPanel = "TransparentBorderedWindowPanel";
public const string StyleClassHotbarPanel = "HotbarPanel";
public const string StyleClassTooltipPanel = "tooltipBox";
public const string StyleClassTooltipAlertTitle = "tooltipAlertTitle";
public const string StyleClassTooltipAlertDescription = "tooltipAlertDesc";
public const string StyleClassTooltipAlertCooldown = "tooltipAlertCooldown";
public const string StyleClassTooltipActionTitle = "tooltipActionTitle";
public const string StyleClassTooltipActionDescription = "tooltipActionDesc";
public const string StyleClassTooltipActionCooldown = "tooltipActionCooldown";
public const string StyleClassTooltipActionRequirements = "tooltipActionCooldown";
public const string StyleClassTooltipActionCharges = "tooltipActionCharges";
public const string StyleClassHotbarSlotNumber = "hotbarSlotNumber";
public const string StyleClassActionSearchBox = "actionSearchBox";
public const string StyleClassActionMenuItemRevoked = "actionMenuItemRevoked";
public const string StyleClassChatLineEdit = "chatLineEdit";
public const string StyleClassChatChannelSelectorButton = "chatSelectorOptionButton";
public const string StyleClassChatFilterOptionButton = "chatFilterOptionButton";
public const string StyleClassStorageButton = "storageButton";
public const string StyleClassSliderRed = "Red";
public const string StyleClassSliderGreen = "Green";
public const string StyleClassSliderBlue = "Blue";
public const string StyleClassSliderWhite = "White";
public const string StyleClassLabelHeadingBigger = "LabelHeadingBigger";
public const string StyleClassLabelKeyText = "LabelKeyText";
public const string StyleClassLabelSecondaryColor = "LabelSecondaryColor";
public const string StyleClassLabelBig = "LabelBig";
public const string StyleClassLabelSmall = "LabelSmall";
public const string StyleClassButtonBig = "ButtonBig";
public const string StyleClassButtonHelp = "HelpButton";
public const string StyleClassPopupMessageSmall = "PopupMessageSmall";
public const string StyleClassPopupMessageSmallCaution = "PopupMessageSmallCaution";
public const string StyleClassPopupMessageMedium = "PopupMessageMedium";
public const string StyleClassPopupMessageMediumCaution = "PopupMessageMediumCaution";
public const string StyleClassPopupMessageLarge = "PopupMessageLarge";
public const string StyleClassPopupMessageLargeCaution = "PopupMessageLargeCaution";
public static readonly Color PanelDark = Color.FromHex("#1E1E22");
public static readonly Color NanoGold = Color.FromHex("#A88B5E");
public static readonly Color GoodGreenFore = Color.FromHex("#31843E");
public static readonly Color ConcerningOrangeFore = Color.FromHex("#A5762F");
public static readonly Color DangerousRedFore = Color.FromHex("#BB3232");
public static readonly Color DisabledFore = Color.FromHex("#5A5A5A");
public static readonly Color ButtonColorDefault = Color.FromHex("#464966");
public static readonly Color ButtonColorDefaultRed = Color.FromHex("#D43B3B");
public static readonly Color ButtonColorHovered = Color.FromHex("#575b7f");
public static readonly Color ButtonColorHoveredRed = Color.FromHex("#DF6B6B");
public static readonly Color ButtonColorPressed = Color.FromHex("#3e6c45");
public static readonly Color ButtonColorDisabled = Color.FromHex("#30313c");
public static readonly Color ButtonColorCautionDefault = Color.FromHex("#ab3232");
public static readonly Color ButtonColorCautionHovered = Color.FromHex("#cf2f2f");
public static readonly Color ButtonColorCautionPressed = Color.FromHex("#3e6c45");
public static readonly Color ButtonColorCautionDisabled = Color.FromHex("#602a2a");
public static readonly Color ButtonColorGoodDefault = Color.FromHex("#3E6C45");
public static readonly Color ButtonColorGoodHovered = Color.FromHex("#31843E");
//NavMap
public static readonly Color PointRed = Color.FromHex("#B02E26");
public static readonly Color PointGreen = Color.FromHex("#38b026");
public static readonly Color PointMagenta = Color.FromHex("#FF00FF");
// Context menu button colors
public static readonly Color ButtonColorContext = Color.FromHex("#1119");
public static readonly Color ButtonColorContextHover = Color.DarkSlateGray;
public static readonly Color ButtonColorContextPressed = Color.LightSlateGray;
public static readonly Color ButtonColorContextDisabled = Color.Black;
// Examine button colors
public static readonly Color ExamineButtonColorContext = Color.Transparent;
public static readonly Color ExamineButtonColorContextHover = Color.DarkSlateGray;
public static readonly Color ExamineButtonColorContextPressed = Color.LightSlateGray;
public static readonly Color ExamineButtonColorContextDisabled = Color.FromHex("#5A5A5A");
// Fancy Tree elements
public static readonly Color FancyTreeEvenRowColor = Color.FromHex("#25252A");
public static readonly Color FancyTreeOddRowColor = FancyTreeEvenRowColor * new Color(0.8f, 0.8f, 0.8f);
public static readonly Color FancyTreeSelectedRowColor = new Color(55, 55, 68);
//Used by the APC and SMES menus
public const string StyleClassPowerStateNone = "PowerStateNone";
public const string StyleClassPowerStateLow = "PowerStateLow";
public const string StyleClassPowerStateGood = "PowerStateGood";
public const string StyleClassItemStatus = "ItemStatus";
public const string StyleClassItemStatusNotHeld = "ItemStatusNotHeld";
public static readonly Color ItemStatusNotHeldColor = Color.Gray;
//Background
public const string StyleClassBackgroundBaseDark = "PanelBackgroundBaseDark";
//Buttons
public const string StyleClassCrossButtonRed = "CrossButtonRed";
public const string StyleClassButtonColorRed = "ButtonColorRed";
public const string StyleClassButtonColorGreen = "ButtonColorGreen";
public static readonly Color ChatBackgroundColor = Color.FromHex("#25252ADD");
public override Stylesheet Stylesheet { get; }
public StyleNano(IResourceCache resCache) : base(resCache)
{
var notoSans8 = resCache.NotoStack(size: 8);
var notoSans10 = resCache.NotoStack(size: 10);
var notoSansItalic10 = resCache.NotoStack(variation: "Italic", size: 10);
var notoSans12 = resCache.NotoStack(size: 12);
var notoSansItalic12 = resCache.NotoStack(variation: "Italic", size: 12);
var notoSansBold12 = resCache.NotoStack(variation: "Bold", size: 12);
var notoSansBoldItalic12 = resCache.NotoStack(variation: "BoldItalic", size: 12);
var notoSansBoldItalic14 = resCache.NotoStack(variation: "BoldItalic", size: 14);
var notoSansBoldItalic16 = resCache.NotoStack(variation: "BoldItalic", size: 16);
var notoSansDisplayBold14 = resCache.NotoStack(variation: "Bold", display: true, size: 14);
var notoSansDisplayBold16 = resCache.NotoStack(variation: "Bold", display: true, size: 16);
var notoSans15 = resCache.NotoStack(variation: "Regular", size: 15);
var notoSans16 = resCache.NotoStack(variation: "Regular", size: 16);
var notoSansBold16 = resCache.NotoStack(variation: "Bold", size: 16);
var notoSansBold18 = resCache.NotoStack(variation: "Bold", size: 18);
var notoSansBold20 = resCache.NotoStack(variation: "Bold", size: 20);
var notoSansMono = resCache.GetFont("/EngineFonts/NotoSans/NotoSansMono-Regular.ttf", size: 12);
var windowHeaderTex = resCache.GetTexture("/Textures/Interface/Nano/window_header.png");
var windowHeader = new StyleBoxTexture
{
Texture = windowHeaderTex,
PatchMarginBottom = 3,
ExpandMarginBottom = 3,
ContentMarginBottomOverride = 0
};
var windowHeaderAlertTex = resCache.GetTexture("/Textures/Interface/Nano/window_header_alert.png");
var windowHeaderAlert = new StyleBoxTexture
{
Texture = windowHeaderAlertTex,
PatchMarginBottom = 3,
ExpandMarginBottom = 3,
ContentMarginBottomOverride = 0
};
var windowBackgroundTex = resCache.GetTexture("/Textures/Interface/Nano/window_background.png");
var windowBackground = new StyleBoxTexture
{
Texture = windowBackgroundTex,
};
windowBackground.SetPatchMargin(StyleBox.Margin.Horizontal | StyleBox.Margin.Bottom, 2);
windowBackground.SetExpandMargin(StyleBox.Margin.Horizontal | StyleBox.Margin.Bottom, 2);
var borderedWindowBackgroundTex = resCache.GetTexture("/Textures/Interface/Nano/window_background_bordered.png");
var borderedWindowBackground = new StyleBoxTexture
{
Texture = borderedWindowBackgroundTex,
};
borderedWindowBackground.SetPatchMargin(StyleBox.Margin.All, 2);
var contextMenuBackground = new StyleBoxTexture
{
Texture = borderedWindowBackgroundTex,
};
contextMenuBackground.SetPatchMargin(StyleBox.Margin.All, ContextMenuElement.ElementMargin);
var invSlotBgTex = resCache.GetTexture("/Textures/Interface/Inventory/inv_slot_background.png");
var invSlotBg = new StyleBoxTexture
{
Texture = invSlotBgTex,
};
invSlotBg.SetPatchMargin(StyleBox.Margin.All, 2);
invSlotBg.SetContentMarginOverride(StyleBox.Margin.All, 0);
var handSlotHighlightTex = resCache.GetTexture("/Textures/Interface/Inventory/hand_slot_highlight.png");
var handSlotHighlight = new StyleBoxTexture
{
Texture = handSlotHighlightTex,
};
handSlotHighlight.SetPatchMargin(StyleBox.Margin.All, 2);
var borderedTransparentWindowBackgroundTex = resCache.GetTexture("/Textures/Interface/Nano/transparent_window_background_bordered.png");
var borderedTransparentWindowBackground = new StyleBoxTexture
{
Texture = borderedTransparentWindowBackgroundTex,
};
borderedTransparentWindowBackground.SetPatchMargin(StyleBox.Margin.All, 2);
var hotbarBackground = new StyleBoxTexture
{
Texture = borderedWindowBackgroundTex,
};
hotbarBackground.SetPatchMargin(StyleBox.Margin.All, 2);
hotbarBackground.SetExpandMargin(StyleBox.Margin.All, 4);
var buttonStorage = new StyleBoxTexture(BaseButton);
buttonStorage.SetPatchMargin(StyleBox.Margin.All, 10);
buttonStorage.SetPadding(StyleBox.Margin.All, 0);
buttonStorage.SetContentMarginOverride(StyleBox.Margin.Vertical, 0);
buttonStorage.SetContentMarginOverride(StyleBox.Margin.Horizontal, 4);
var buttonContext = new StyleBoxTexture { Texture = Texture.White };
var buttonRectTex = resCache.GetTexture("/Textures/Interface/Nano/light_panel_background_bordered.png");
var buttonRect = new StyleBoxTexture(BaseButton)
{
Texture = buttonRectTex
};
buttonRect.SetPatchMargin(StyleBox.Margin.All, 2);
buttonRect.SetPadding(StyleBox.Margin.All, 2);
buttonRect.SetContentMarginOverride(StyleBox.Margin.Vertical, 2);
buttonRect.SetContentMarginOverride(StyleBox.Margin.Horizontal, 2);
var buttonRectHover = new StyleBoxTexture(buttonRect)
{
Modulate = ButtonColorHovered
};
var buttonRectPressed = new StyleBoxTexture(buttonRect)
{
Modulate = ButtonColorPressed
};
var buttonRectDisabled = new StyleBoxTexture(buttonRect)
{
Modulate = ButtonColorDisabled
};
var buttonRectActionMenuItemTex = resCache.GetTexture("/Textures/Interface/Nano/black_panel_light_thin_border.png");
var buttonRectActionMenuRevokedItemTex = resCache.GetTexture("/Textures/Interface/Nano/black_panel_red_thin_border.png");
var buttonRectActionMenuItem = new StyleBoxTexture(BaseButton)
{
Texture = buttonRectActionMenuItemTex
};
buttonRectActionMenuItem.SetPatchMargin(StyleBox.Margin.All, 2);
buttonRectActionMenuItem.SetPadding(StyleBox.Margin.All, 2);
buttonRectActionMenuItem.SetContentMarginOverride(StyleBox.Margin.Vertical, 2);
buttonRectActionMenuItem.SetContentMarginOverride(StyleBox.Margin.Horizontal, 2);
var buttonRectActionMenuItemRevoked = new StyleBoxTexture(buttonRectActionMenuItem)
{
Texture = buttonRectActionMenuRevokedItemTex
};
var buttonRectActionMenuItemHover = new StyleBoxTexture(buttonRectActionMenuItem)
{
Modulate = ButtonColorHovered
};
var buttonRectActionMenuItemPressed = new StyleBoxTexture(buttonRectActionMenuItem)
{
Modulate = ButtonColorPressed
};
var buttonTex = resCache.GetTexture("/Textures/Interface/Nano/button.svg.96dpi.png");
var topButtonBase = new StyleBoxTexture
{
Texture = buttonTex,
};
topButtonBase.SetPatchMargin(StyleBox.Margin.All, 10);
topButtonBase.SetPadding(StyleBox.Margin.All, 0);
topButtonBase.SetContentMarginOverride(StyleBox.Margin.All, 0);
var topButtonOpenRight = new StyleBoxTexture(topButtonBase)
{
Texture = new AtlasTexture(buttonTex, UIBox2.FromDimensions(new Vector2(0, 0), new Vector2(14, 24))),
};
topButtonOpenRight.SetPatchMargin(StyleBox.Margin.Right, 0);
var topButtonOpenLeft = new StyleBoxTexture(topButtonBase)
{
Texture = new AtlasTexture(buttonTex, UIBox2.FromDimensions(new Vector2(10, 0), new Vector2(14, 24))),
};
topButtonOpenLeft.SetPatchMargin(StyleBox.Margin.Left, 0);
var topButtonSquare = new StyleBoxTexture(topButtonBase)
{
Texture = new AtlasTexture(buttonTex, UIBox2.FromDimensions(new Vector2(10, 0), new Vector2(3, 24))),
};
topButtonSquare.SetPatchMargin(StyleBox.Margin.Horizontal, 0);
var chatChannelButtonTex = resCache.GetTexture("/Textures/Interface/Nano/rounded_button.svg.96dpi.png");
var chatChannelButton = new StyleBoxTexture
{
Texture = chatChannelButtonTex,
};
chatChannelButton.SetPatchMargin(StyleBox.Margin.All, 5);
chatChannelButton.SetPadding(StyleBox.Margin.All, 2);
var chatFilterButtonTex = resCache.GetTexture("/Textures/Interface/Nano/rounded_button_bordered.svg.96dpi.png");
var chatFilterButton = new StyleBoxTexture
{
Texture = chatFilterButtonTex,
};
chatFilterButton.SetPatchMargin(StyleBox.Margin.All, 5);
chatFilterButton.SetPadding(StyleBox.Margin.All, 2);
var smallButtonTex = resCache.GetTexture("/Textures/Interface/Nano/button_small.svg.96dpi.png");
var smallButtonBase = new StyleBoxTexture
{
Texture = smallButtonTex,
};
var textureInvertedTriangle = resCache.GetTexture("/Textures/Interface/Nano/inverted_triangle.svg.png");
var lineEditTex = resCache.GetTexture("/Textures/Interface/Nano/lineedit.png");
var lineEdit = new StyleBoxTexture
{
Texture = lineEditTex,
};
lineEdit.SetPatchMargin(StyleBox.Margin.All, 3);
lineEdit.SetContentMarginOverride(StyleBox.Margin.Horizontal, 5);
var chatBg = new StyleBoxFlat
{
BackgroundColor = ChatBackgroundColor
};
var chatSubBg = new StyleBoxFlat
{
BackgroundColor = ChatBackgroundColor,
};
chatSubBg.SetContentMarginOverride(StyleBox.Margin.All, 2);
var actionSearchBoxTex = resCache.GetTexture("/Textures/Interface/Nano/black_panel_dark_thin_border.png");
var actionSearchBox = new StyleBoxTexture
{
Texture = actionSearchBoxTex,
};
actionSearchBox.SetPatchMargin(StyleBox.Margin.All, 3);
actionSearchBox.SetContentMarginOverride(StyleBox.Margin.Horizontal, 5);
var tabContainerPanelTex = resCache.GetTexture("/Textures/Interface/Nano/tabcontainer_panel.png");
var tabContainerPanel = new StyleBoxTexture
{
Texture = tabContainerPanelTex,
};
tabContainerPanel.SetPatchMargin(StyleBox.Margin.All, 2);
var tabContainerBoxActive = new StyleBoxFlat { BackgroundColor = new Color(64, 64, 64) };
tabContainerBoxActive.SetContentMarginOverride(StyleBox.Margin.Horizontal, 5);
var tabContainerBoxInactive = new StyleBoxFlat { BackgroundColor = new Color(32, 32, 32) };
tabContainerBoxInactive.SetContentMarginOverride(StyleBox.Margin.Horizontal, 5);
var progressBarBackground = new StyleBoxFlat
{
BackgroundColor = new Color(0.25f, 0.25f, 0.25f)
};
progressBarBackground.SetContentMarginOverride(StyleBox.Margin.Vertical, 14.5f);
var progressBarForeground = new StyleBoxFlat
{
BackgroundColor = new Color(0.25f, 0.50f, 0.25f)
};
progressBarForeground.SetContentMarginOverride(StyleBox.Margin.Vertical, 14.5f);
// CheckBox
var checkBoxTextureChecked = resCache.GetTexture("/Textures/Interface/Nano/checkbox_checked.svg.96dpi.png");
var checkBoxTextureUnchecked = resCache.GetTexture("/Textures/Interface/Nano/checkbox_unchecked.svg.96dpi.png");
// Tooltip box
var tooltipTexture = resCache.GetTexture("/Textures/Interface/Nano/tooltip.png");
var tooltipBox = new StyleBoxTexture
{
Texture = tooltipTexture,
};
tooltipBox.SetPatchMargin(StyleBox.Margin.All, 2);
tooltipBox.SetContentMarginOverride(StyleBox.Margin.Horizontal, 7);
// Whisper box
var whisperTexture = resCache.GetTexture("/Textures/Interface/Nano/whisper.png");
var whisperBox = new StyleBoxTexture
{
Texture = whisperTexture,
};
whisperBox.SetPatchMargin(StyleBox.Margin.All, 2);
whisperBox.SetContentMarginOverride(StyleBox.Margin.Horizontal, 7);
// Placeholder
var placeholderTexture = resCache.GetTexture("/Textures/Interface/Nano/placeholder.png");
var placeholder = new StyleBoxTexture { Texture = placeholderTexture };
placeholder.SetPatchMargin(StyleBox.Margin.All, 19);
placeholder.SetExpandMargin(StyleBox.Margin.All, -5);
placeholder.Mode = StyleBoxTexture.StretchMode.Tile;
var itemListBackgroundSelected = new StyleBoxFlat { BackgroundColor = new Color(75, 75, 86) };
itemListBackgroundSelected.SetContentMarginOverride(StyleBox.Margin.Vertical, 2);
itemListBackgroundSelected.SetContentMarginOverride(StyleBox.Margin.Horizontal, 4);
var itemListItemBackgroundDisabled = new StyleBoxFlat { BackgroundColor = new Color(10, 10, 12) };
itemListItemBackgroundDisabled.SetContentMarginOverride(StyleBox.Margin.Vertical, 2);
itemListItemBackgroundDisabled.SetContentMarginOverride(StyleBox.Margin.Horizontal, 4);
var itemListItemBackground = new StyleBoxFlat { BackgroundColor = new Color(55, 55, 68) };
itemListItemBackground.SetContentMarginOverride(StyleBox.Margin.Vertical, 2);
itemListItemBackground.SetContentMarginOverride(StyleBox.Margin.Horizontal, 4);
var itemListItemBackgroundTransparent = new StyleBoxFlat { BackgroundColor = Color.Transparent };
itemListItemBackgroundTransparent.SetContentMarginOverride(StyleBox.Margin.Vertical, 2);
itemListItemBackgroundTransparent.SetContentMarginOverride(StyleBox.Margin.Horizontal, 4);
var squareTex = resCache.GetTexture("/Textures/Interface/Nano/square.png");
var listContainerButton = new StyleBoxTexture
{
Texture = squareTex,
ContentMarginLeftOverride = 10
};
// NanoHeading
var nanoHeadingTex = resCache.GetTexture("/Textures/Interface/Nano/nanoheading.svg.96dpi.png");
var nanoHeadingBox = new StyleBoxTexture
{
Texture = nanoHeadingTex,
PatchMarginRight = 10,
PatchMarginTop = 10,
ContentMarginTopOverride = 2,
ContentMarginLeftOverride = 10,
PaddingTop = 4
};
nanoHeadingBox.SetPatchMargin(StyleBox.Margin.Left | StyleBox.Margin.Bottom, 2);
// Stripe background
var stripeBackTex = resCache.GetTexture("/Textures/Interface/Nano/stripeback.svg.96dpi.png");
var stripeBack = new StyleBoxTexture
{
Texture = stripeBackTex,
Mode = StyleBoxTexture.StretchMode.Tile
};
// Slider
var sliderOutlineTex = resCache.GetTexture("/Textures/Interface/Nano/slider_outline.svg.96dpi.png");
var sliderFillTex = resCache.GetTexture("/Textures/Interface/Nano/slider_fill.svg.96dpi.png");
var sliderGrabTex = resCache.GetTexture("/Textures/Interface/Nano/slider_grabber.svg.96dpi.png");
var sliderFillBox = new StyleBoxTexture
{
Texture = sliderFillTex,
Modulate = Color.FromHex("#3E6C45")
};
var sliderBackBox = new StyleBoxTexture
{
Texture = sliderFillTex,
Modulate = PanelDark,
};
var sliderForeBox = new StyleBoxTexture
{
Texture = sliderOutlineTex,
Modulate = Color.FromHex("#494949")
};
var sliderGrabBox = new StyleBoxTexture
{
Texture = sliderGrabTex,
};
sliderFillBox.SetPatchMargin(StyleBox.Margin.All, 12);
sliderBackBox.SetPatchMargin(StyleBox.Margin.All, 12);
sliderForeBox.SetPatchMargin(StyleBox.Margin.All, 12);
sliderGrabBox.SetPatchMargin(StyleBox.Margin.All, 12);
var sliderFillGreen = new StyleBoxTexture(sliderFillBox) { Modulate = Color.LimeGreen };
var sliderFillRed = new StyleBoxTexture(sliderFillBox) { Modulate = Color.Red };
var sliderFillBlue = new StyleBoxTexture(sliderFillBox) { Modulate = Color.Blue };
var sliderFillWhite = new StyleBoxTexture(sliderFillBox) { Modulate = Color.White };
var boxFont13 = resCache.GetFont("/Fonts/Boxfont-round/Boxfont Round.ttf", 13);
var insetBack = new StyleBoxTexture
{
Texture = buttonTex,
Modulate = Color.FromHex("#202023"),
};
insetBack.SetPatchMargin(StyleBox.Margin.All, 10);
// Default paper background:
var paperBackground = new StyleBoxTexture
{
Texture = resCache.GetTexture("/Textures/Interface/Paper/paper_background_default.svg.96dpi.png"),
Modulate = Color.FromHex("#eaedde"), // A light cream
};
paperBackground.SetPatchMargin(StyleBox.Margin.All, 16.0f);
var contextMenuExpansionTexture = resCache.GetTexture("/Textures/Interface/VerbIcons/group.svg.192dpi.png");
var verbMenuConfirmationTexture = resCache.GetTexture("/Textures/Interface/VerbIcons/group.svg.192dpi.png");
// south-facing arrow:
var directionIconArrowTex = resCache.GetTexture("/Textures/Interface/VerbIcons/drop.svg.192dpi.png");
var directionIconQuestionTex = resCache.GetTexture("/Textures/Interface/VerbIcons/information.svg.192dpi.png");
var directionIconHereTex = resCache.GetTexture("/Textures/Interface/VerbIcons/dot.svg.192dpi.png");
Stylesheet = new Stylesheet(BaseRules.Concat(new[]
{
Element().Class("monospace")
.Prop("font", notoSansMono),
// Window title.
new StyleRule(
new SelectorElement(typeof(Label), new[] {DefaultWindow.StyleClassWindowTitle}, null, null),
new[]
{
new StyleProperty(Label.StylePropertyFontColor, NanoGold),
new StyleProperty(Label.StylePropertyFont, notoSansDisplayBold14),
}),
// Alert (white) window title.
new StyleRule(
new SelectorElement(typeof(Label), new[] {"windowTitleAlert"}, null, null),
new[]
{
new StyleProperty(Label.StylePropertyFontColor, Color.White),
new StyleProperty(Label.StylePropertyFont, notoSansDisplayBold14),
}),
// Window background.
new StyleRule(
new SelectorElement(null, new[] {DefaultWindow.StyleClassWindowPanel}, null, null),
new[]
{
new StyleProperty(PanelContainer.StylePropertyPanel, windowBackground),
}),
// bordered window background
new StyleRule(
new SelectorElement(null, new[] {StyleClassBorderedWindowPanel}, null, null),
new[]
{
new StyleProperty(PanelContainer.StylePropertyPanel, borderedWindowBackground),
}),
new StyleRule(
new SelectorElement(null, new[] {StyleClassTransparentBorderedWindowPanel}, null, null),
new[]
{
new StyleProperty(PanelContainer.StylePropertyPanel, borderedTransparentWindowBackground),
}),
// inventory slot background
new StyleRule(
new SelectorElement(null, new[] {StyleClassInventorySlotBackground}, null, null),
new[]
{
new StyleProperty(PanelContainer.StylePropertyPanel, invSlotBg),
}),
// hand slot highlight
new StyleRule(
new SelectorElement(null, new[] {StyleClassHandSlotHighlight}, null, null),
new[]
{
new StyleProperty(PanelContainer.StylePropertyPanel, handSlotHighlight),
}),
// Hotbar background
new StyleRule(new SelectorElement(typeof(PanelContainer), new[] {StyleClassHotbarPanel}, null, null),
new[]
{
new StyleProperty(PanelContainer.StylePropertyPanel, hotbarBackground),
}),
// Window header.
new StyleRule(
new SelectorElement(typeof(PanelContainer), new[] {DefaultWindow.StyleClassWindowHeader}, null, null),
new[]
{
new StyleProperty(PanelContainer.StylePropertyPanel, windowHeader),
}),
// Alert (red) window header.
new StyleRule(
new SelectorElement(typeof(PanelContainer), new[] {"windowHeaderAlert"}, null, null),
new[]
{
new StyleProperty(PanelContainer.StylePropertyPanel, windowHeaderAlert),
}),
// Shapes for the buttons.
Element<ContainerButton>().Class(ContainerButton.StyleClassButton)
.Prop(ContainerButton.StylePropertyStyleBox, BaseButton),
Element<ContainerButton>().Class(ContainerButton.StyleClassButton)
.Class(ButtonOpenRight)
.Prop(ContainerButton.StylePropertyStyleBox, BaseButtonOpenRight),
Element<ContainerButton>().Class(ContainerButton.StyleClassButton)
.Class(ButtonOpenLeft)
.Prop(ContainerButton.StylePropertyStyleBox, BaseButtonOpenLeft),
Element<ContainerButton>().Class(ContainerButton.StyleClassButton)
.Class(ButtonOpenBoth)
.Prop(ContainerButton.StylePropertyStyleBox, BaseButtonOpenBoth),
Element<ContainerButton>().Class(ContainerButton.StyleClassButton)
.Class(ButtonSquare)
.Prop(ContainerButton.StylePropertyStyleBox, BaseButtonSquare),
new StyleRule(new SelectorElement(typeof(Label), new[] { Button.StyleClassButton }, null, null), new[]
{
new StyleProperty(Label.StylePropertyAlignMode, Label.AlignMode.Center),
}),
// Colors for the buttons.
Element<ContainerButton>().Class(ContainerButton.StyleClassButton)
.Pseudo(ContainerButton.StylePseudoClassNormal)
.Prop(Control.StylePropertyModulateSelf, ButtonColorDefault),
Element<ContainerButton>().Class(ContainerButton.StyleClassButton)
.Pseudo(ContainerButton.StylePseudoClassHover)
.Prop(Control.StylePropertyModulateSelf, ButtonColorHovered),
Element<ContainerButton>().Class(ContainerButton.StyleClassButton)
.Pseudo(ContainerButton.StylePseudoClassPressed)
.Prop(Control.StylePropertyModulateSelf, ButtonColorPressed),
Element<ContainerButton>().Class(ContainerButton.StyleClassButton)
.Pseudo(ContainerButton.StylePseudoClassDisabled)
.Prop(Control.StylePropertyModulateSelf, ButtonColorDisabled),
// Colors for the caution buttons.
Element<ContainerButton>().Class(ContainerButton.StyleClassButton).Class(ButtonCaution)
.Pseudo(ContainerButton.StylePseudoClassNormal)
.Prop(Control.StylePropertyModulateSelf, ButtonColorCautionDefault),
Element<ContainerButton>().Class(ContainerButton.StyleClassButton).Class(ButtonCaution)
.Pseudo(ContainerButton.StylePseudoClassHover)
.Prop(Control.StylePropertyModulateSelf, ButtonColorCautionHovered),
Element<ContainerButton>().Class(ContainerButton.StyleClassButton).Class(ButtonCaution)
.Pseudo(ContainerButton.StylePseudoClassPressed)
.Prop(Control.StylePropertyModulateSelf, ButtonColorCautionPressed),
Element<ContainerButton>().Class(ContainerButton.StyleClassButton).Class(ButtonCaution)
.Pseudo(ContainerButton.StylePseudoClassDisabled)
.Prop(Control.StylePropertyModulateSelf, ButtonColorCautionDisabled),
// Colors for confirm buttons confirm states.
Element<ConfirmButton>()
.Pseudo(ConfirmButton.ConfirmPrefix + ContainerButton.StylePseudoClassNormal)
.Prop(Control.StylePropertyModulateSelf, ButtonColorCautionDefault),
Element<ConfirmButton>()
.Pseudo(ConfirmButton.ConfirmPrefix + ContainerButton.StylePseudoClassHover)
.Prop(Control.StylePropertyModulateSelf, ButtonColorCautionHovered),
Element<ConfirmButton>()
.Pseudo(ConfirmButton.ConfirmPrefix + ContainerButton.StylePseudoClassPressed)
.Prop(Control.StylePropertyModulateSelf, ButtonColorCautionPressed),
Element<ConfirmButton>()
.Pseudo(ConfirmButton.ConfirmPrefix + ContainerButton.StylePseudoClassDisabled)
.Prop(Control.StylePropertyModulateSelf, ButtonColorCautionDisabled),
new StyleRule(new SelectorChild(
new SelectorElement(typeof(Button), null, null, new[] {ContainerButton.StylePseudoClassDisabled}),
new SelectorElement(typeof(Label), null, null, null)),
new[]
{
new StyleProperty("font-color", Color.FromHex("#E5E5E581")),
}),
// Context Menu window
Element<PanelContainer>().Class(ContextMenuPopup.StyleClassContextMenuPopup)
.Prop(PanelContainer.StylePropertyPanel, contextMenuBackground),
// Context menu buttons
Element<ContextMenuElement>().Class(ContextMenuElement.StyleClassContextMenuButton)
.Prop(ContainerButton.StylePropertyStyleBox, buttonContext),
Element<ContextMenuElement>().Class(ContextMenuElement.StyleClassContextMenuButton)
.Pseudo(ContainerButton.StylePseudoClassNormal)
.Prop(Control.StylePropertyModulateSelf, ButtonColorContext),
Element<ContextMenuElement>().Class(ContextMenuElement.StyleClassContextMenuButton)
.Pseudo(ContainerButton.StylePseudoClassHover)
.Prop(Control.StylePropertyModulateSelf, ButtonColorContextHover),
Element<ContextMenuElement>().Class(ContextMenuElement.StyleClassContextMenuButton)
.Pseudo(ContainerButton.StylePseudoClassPressed)
.Prop(Control.StylePropertyModulateSelf, ButtonColorContextPressed),
Element<ContextMenuElement>().Class(ContextMenuElement.StyleClassContextMenuButton)
.Pseudo(ContainerButton.StylePseudoClassDisabled)
.Prop(Control.StylePropertyModulateSelf, ButtonColorContextDisabled),
// Context Menu Labels
Element<RichTextLabel>().Class(InteractionVerb.DefaultTextStyleClass)
.Prop(Label.StylePropertyFont, notoSansBoldItalic12),
Element<RichTextLabel>().Class(ActivationVerb.DefaultTextStyleClass)
.Prop(Label.StylePropertyFont, notoSansBold12),
Element<RichTextLabel>().Class(AlternativeVerb.DefaultTextStyleClass)
.Prop(Label.StylePropertyFont, notoSansItalic12),
Element<RichTextLabel>().Class(Verb.DefaultTextStyleClass)
.Prop(Label.StylePropertyFont, notoSans12),
Element<TextureRect>().Class(ContextMenuElement.StyleClassContextMenuExpansionTexture)
.Prop(TextureRect.StylePropertyTexture, contextMenuExpansionTexture),
Element<TextureRect>().Class(VerbMenuElement.StyleClassVerbMenuConfirmationTexture)
.Prop(TextureRect.StylePropertyTexture, verbMenuConfirmationTexture),
// Context menu confirm buttons
Element<ContextMenuElement>().Class(ConfirmationMenuElement.StyleClassConfirmationContextMenuButton)
.Prop(ContainerButton.StylePropertyStyleBox, buttonContext),
Element<ContextMenuElement>().Class(ConfirmationMenuElement.StyleClassConfirmationContextMenuButton)
.Pseudo(ContainerButton.StylePseudoClassNormal)
.Prop(Control.StylePropertyModulateSelf, ButtonColorCautionDefault),
Element<ContextMenuElement>().Class(ConfirmationMenuElement.StyleClassConfirmationContextMenuButton)
.Pseudo(ContainerButton.StylePseudoClassHover)
.Prop(Control.StylePropertyModulateSelf, ButtonColorCautionHovered),
Element<ContextMenuElement>().Class(ConfirmationMenuElement.StyleClassConfirmationContextMenuButton)
.Pseudo(ContainerButton.StylePseudoClassPressed)
.Prop(Control.StylePropertyModulateSelf, ButtonColorCautionPressed),
Element<ContextMenuElement>().Class(ConfirmationMenuElement.StyleClassConfirmationContextMenuButton)
.Pseudo(ContainerButton.StylePseudoClassDisabled)
.Prop(Control.StylePropertyModulateSelf, ButtonColorCautionDisabled),
// Examine buttons
Element<ExamineButton>().Class(ExamineButton.StyleClassExamineButton)
.Prop(ContainerButton.StylePropertyStyleBox, buttonContext),
Element<ExamineButton>().Class(ExamineButton.StyleClassExamineButton)
.Pseudo(ContainerButton.StylePseudoClassNormal)
.Prop(Control.StylePropertyModulateSelf, ExamineButtonColorContext),
Element<ExamineButton>().Class(ExamineButton.StyleClassExamineButton)
.Pseudo(ContainerButton.StylePseudoClassHover)
.Prop(Control.StylePropertyModulateSelf, ExamineButtonColorContextHover),
Element<ExamineButton>().Class(ExamineButton.StyleClassExamineButton)
.Pseudo(ContainerButton.StylePseudoClassPressed)
.Prop(Control.StylePropertyModulateSelf, ExamineButtonColorContextPressed),
Element<ExamineButton>().Class(ExamineButton.StyleClassExamineButton)
.Pseudo(ContainerButton.StylePseudoClassDisabled)
.Prop(Control.StylePropertyModulateSelf, ExamineButtonColorContextDisabled),
// Direction / arrow icon
Element<DirectionIcon>().Class(DirectionIcon.StyleClassDirectionIconArrow)
.Prop(TextureRect.StylePropertyTexture, directionIconArrowTex),
Element<DirectionIcon>().Class(DirectionIcon.StyleClassDirectionIconUnknown)
.Prop(TextureRect.StylePropertyTexture, directionIconQuestionTex),
Element<DirectionIcon>().Class(DirectionIcon.StyleClassDirectionIconHere)
.Prop(TextureRect.StylePropertyTexture, directionIconHereTex),
// Thin buttons (No padding nor vertical margin)
Element<ContainerButton>().Class(StyleClassStorageButton)
.Prop(ContainerButton.StylePropertyStyleBox, buttonStorage),
Element<ContainerButton>().Class(StyleClassStorageButton)
.Pseudo(ContainerButton.StylePseudoClassNormal)
.Prop(Control.StylePropertyModulateSelf, ButtonColorDefault),
Element<ContainerButton>().Class(StyleClassStorageButton)
.Pseudo(ContainerButton.StylePseudoClassHover)
.Prop(Control.StylePropertyModulateSelf, ButtonColorHovered),
Element<ContainerButton>().Class(StyleClassStorageButton)
.Pseudo(ContainerButton.StylePseudoClassPressed)
.Prop(Control.StylePropertyModulateSelf, ButtonColorPressed),
Element<ContainerButton>().Class(StyleClassStorageButton)
.Pseudo(ContainerButton.StylePseudoClassDisabled)
.Prop(Control.StylePropertyModulateSelf, ButtonColorDisabled),
// ListContainer
Element<ContainerButton>().Class(ListContainer.StyleClassListContainerButton)
.Prop(ContainerButton.StylePropertyStyleBox, listContainerButton),
Element<ContainerButton>().Class(ListContainer.StyleClassListContainerButton)
.Pseudo(ContainerButton.StylePseudoClassNormal)
.Prop(Control.StylePropertyModulateSelf, new Color(55, 55, 68)),
Element<ContainerButton>().Class(ListContainer.StyleClassListContainerButton)
.Pseudo(ContainerButton.StylePseudoClassHover)
.Prop(Control.StylePropertyModulateSelf, new Color(75, 75, 86)),
Element<ContainerButton>().Class(ListContainer.StyleClassListContainerButton)
.Pseudo(ContainerButton.StylePseudoClassPressed)
.Prop(Control.StylePropertyModulateSelf, new Color(75, 75, 86)),
Element<ContainerButton>().Class(ListContainer.StyleClassListContainerButton)
.Pseudo(ContainerButton.StylePseudoClassDisabled)
.Prop(Control.StylePropertyModulateSelf, new Color(10, 10, 12)),
// Main menu: Make those buttons bigger.
new StyleRule(new SelectorChild(
new SelectorElement(typeof(Button), null, "mainMenu", null),
new SelectorElement(typeof(Label), null, null, null)),
new[]
{
new StyleProperty("font", notoSansBold16),
}),
// Main menu: also make those buttons slightly more separated.
new StyleRule(new SelectorElement(typeof(BoxContainer), null, "mainMenuVBox", null),
new[]
{
new StyleProperty(BoxContainer.StylePropertySeparation, 2),
}),
// Fancy LineEdit
new StyleRule(new SelectorElement(typeof(LineEdit), null, null, null),
new[]
{
new StyleProperty(LineEdit.StylePropertyStyleBox, lineEdit),
}),
new StyleRule(
new SelectorElement(typeof(LineEdit), new[] {LineEdit.StyleClassLineEditNotEditable}, null, null),
new[]
{
new StyleProperty("font-color", new Color(192, 192, 192)),
}),
new StyleRule(
new SelectorElement(typeof(LineEdit), null, null, new[] {LineEdit.StylePseudoClassPlaceholder}),
new[]
{
new StyleProperty("font-color", Color.Gray),
}),
Element<TextEdit>().Pseudo(TextEdit.StylePseudoClassPlaceholder)
.Prop("font-color", Color.Gray),
// chat subpanels (chat lineedit backing, popup backings)
new StyleRule(new SelectorElement(typeof(PanelContainer), new[] {StyleClassChatPanel}, null, null),
new[]
{
new StyleProperty(PanelContainer.StylePropertyPanel, chatBg),
}),
// Chat lineedit - we don't actually draw a stylebox around the lineedit itself, we put it around the
// input + other buttons, so we must clear the default stylebox
new StyleRule(new SelectorElement(typeof(LineEdit), new[] {StyleClassChatLineEdit}, null, null),
new[]
{
new StyleProperty(LineEdit.StylePropertyStyleBox, new StyleBoxEmpty()),
}),
// Action searchbox lineedit
new StyleRule(new SelectorElement(typeof(LineEdit), new[] {StyleClassActionSearchBox}, null, null),
new[]
{
new StyleProperty(LineEdit.StylePropertyStyleBox, actionSearchBox),
}),
// TabContainer
new StyleRule(new SelectorElement(typeof(TabContainer), null, null, null),
new[]
{
new StyleProperty(TabContainer.StylePropertyPanelStyleBox, tabContainerPanel),
new StyleProperty(TabContainer.StylePropertyTabStyleBox, tabContainerBoxActive),
new StyleProperty(TabContainer.StylePropertyTabStyleBoxInactive, tabContainerBoxInactive),
}),
// ProgressBar
new StyleRule(new SelectorElement(typeof(ProgressBar), null, null, null),
new[]
{
new StyleProperty(ProgressBar.StylePropertyBackground, progressBarBackground),
new StyleProperty(ProgressBar.StylePropertyForeground, progressBarForeground)
}),
// CheckBox
new StyleRule(new SelectorElement(typeof(TextureRect), new [] { CheckBox.StyleClassCheckBox }, null, null), new[]
{
new StyleProperty(TextureRect.StylePropertyTexture, checkBoxTextureUnchecked),
}),
new StyleRule(new SelectorElement(typeof(TextureRect), new [] { CheckBox.StyleClassCheckBox, CheckBox.StyleClassCheckBoxChecked }, null, null), new[]
{
new StyleProperty(TextureRect.StylePropertyTexture, checkBoxTextureChecked),
}),
new StyleRule(new SelectorElement(typeof(BoxContainer), new [] { CheckBox.StyleClassCheckBox }, null, null), new[]
{
new StyleProperty(BoxContainer.StylePropertySeparation, 10),
}),
// Tooltip
new StyleRule(new SelectorElement(typeof(Tooltip), null, null, null), new[]
{
new StyleProperty(PanelContainer.StylePropertyPanel, tooltipBox)
}),
new StyleRule(new SelectorElement(typeof(PanelContainer), new [] { StyleClassTooltipPanel }, null, null), new[]
{
new StyleProperty(PanelContainer.StylePropertyPanel, tooltipBox)
}),
new StyleRule(new SelectorElement(typeof(PanelContainer), new[] {"speechBox", "sayBox"}, null, null), new[]
{
new StyleProperty(PanelContainer.StylePropertyPanel, tooltipBox)
}),
new StyleRule(new SelectorElement(typeof(PanelContainer), new[] {"speechBox", "whisperBox"}, null, null), new[]
{
new StyleProperty(PanelContainer.StylePropertyPanel, whisperBox)
}),
new StyleRule(new SelectorChild(
new SelectorElement(typeof(PanelContainer), new[] {"speechBox", "whisperBox"}, null, null),
new SelectorElement(typeof(RichTextLabel), new[] {"bubbleContent"}, null, null)),
new[]
{
new StyleProperty("font", notoSansItalic12),
}),
new StyleRule(new SelectorChild(
new SelectorElement(typeof(PanelContainer), new[] {"speechBox", "emoteBox"}, null, null),
new SelectorElement(typeof(RichTextLabel), null, null, null)),
new[]
{
new StyleProperty("font", notoSansItalic12),
}),
new StyleRule(new SelectorElement(typeof(RichTextLabel), new[] {StyleClassLabelKeyText}, null, null), new[]
{
new StyleProperty(Label.StylePropertyFont, notoSansBold12),
new StyleProperty( Control.StylePropertyModulateSelf, NanoGold)
}),
// alert tooltip
new StyleRule(new SelectorElement(typeof(RichTextLabel), new[] {StyleClassTooltipAlertTitle}, null, null), new[]
{
new StyleProperty("font", notoSansBold18)
}),
new StyleRule(new SelectorElement(typeof(RichTextLabel), new[] {StyleClassTooltipAlertDescription}, null, null), new[]
{
new StyleProperty("font", notoSans16)
}),
new StyleRule(new SelectorElement(typeof(RichTextLabel), new[] {StyleClassTooltipAlertCooldown}, null, null), new[]
{
new StyleProperty("font", notoSans16)
}),
// action tooltip
new StyleRule(new SelectorElement(typeof(RichTextLabel), new[] {StyleClassTooltipActionTitle}, null, null), new[]
{
new StyleProperty("font", notoSansBold16)
}),
new StyleRule(new SelectorElement(typeof(RichTextLabel), new[] {StyleClassTooltipActionDescription}, null, null), new[]
{
new StyleProperty("font", notoSans15)
}),
new StyleRule(new SelectorElement(typeof(RichTextLabel), new[] {StyleClassTooltipActionCooldown}, null, null), new[]
{
new StyleProperty("font", notoSans15)
}),
new StyleRule(new SelectorElement(typeof(RichTextLabel), new[] {StyleClassTooltipActionRequirements}, null, null), new[]
{
new StyleProperty("font", notoSans15)
}),
new StyleRule(new SelectorElement(typeof(RichTextLabel), new[] {StyleClassTooltipActionCharges}, null, null), new[]
{
new StyleProperty("font", notoSans15)
}),
// small number for the entity counter in the entity menu
new StyleRule(new SelectorElement(typeof(Label), new[] {ContextMenuElement.StyleClassEntityMenuIconLabel}, null, null), new[]
{
new StyleProperty("font", notoSans10),
new StyleProperty(Label.StylePropertyAlignMode, Label.AlignMode.Right),
}),
// hotbar slot
new StyleRule(new SelectorElement(typeof(RichTextLabel), new[] {StyleClassHotbarSlotNumber}, null, null), new[]
{
new StyleProperty("font", notoSansDisplayBold16)
}),
// Entity tooltip
new StyleRule(
new SelectorElement(typeof(PanelContainer), new[] {ExamineSystem.StyleClassEntityTooltip}, null,
null), new[]
{
new StyleProperty(PanelContainer.StylePropertyPanel, tooltipBox)
}),
// ItemList
new StyleRule(new SelectorElement(typeof(ItemList), null, null, null), new[]
{
new StyleProperty(ItemList.StylePropertyBackground,
new StyleBoxFlat {BackgroundColor = new Color(32, 32, 40)}),
new StyleProperty(ItemList.StylePropertyItemBackground,
itemListItemBackground),
new StyleProperty(ItemList.StylePropertyDisabledItemBackground,
itemListItemBackgroundDisabled),
new StyleProperty(ItemList.StylePropertySelectedItemBackground,
itemListBackgroundSelected)
}),
new StyleRule(new SelectorElement(typeof(ItemList), new[] {"transparentItemList"}, null, null), new[]
{
new StyleProperty(ItemList.StylePropertyBackground,
new StyleBoxFlat {BackgroundColor = Color.Transparent}),
new StyleProperty(ItemList.StylePropertyItemBackground,
itemListItemBackgroundTransparent),
new StyleProperty(ItemList.StylePropertyDisabledItemBackground,
itemListItemBackgroundDisabled),
new StyleProperty(ItemList.StylePropertySelectedItemBackground,
itemListBackgroundSelected)
}),
new StyleRule(new SelectorElement(typeof(ItemList), new[] {"transparentBackgroundItemList"}, null, null), new[]
{
new StyleProperty(ItemList.StylePropertyBackground,
new StyleBoxFlat {BackgroundColor = Color.Transparent}),
new StyleProperty(ItemList.StylePropertyItemBackground,
itemListItemBackground),
new StyleProperty(ItemList.StylePropertyDisabledItemBackground,
itemListItemBackgroundDisabled),
new StyleProperty(ItemList.StylePropertySelectedItemBackground,
itemListBackgroundSelected)
}),
// Tree
new StyleRule(new SelectorElement(typeof(Tree), null, null, null), new[]
{
new StyleProperty(Tree.StylePropertyBackground,
new StyleBoxFlat {BackgroundColor = new Color(32, 32, 40)}),
new StyleProperty(Tree.StylePropertyItemBoxSelected, new StyleBoxFlat
{
BackgroundColor = new Color(55, 55, 68),
ContentMarginLeftOverride = 4
})
}),
// Placeholder
new StyleRule(new SelectorElement(typeof(Placeholder), null, null, null), new[]
{
new StyleProperty(PanelContainer.StylePropertyPanel, placeholder),
}),
new StyleRule(
new SelectorElement(typeof(Label), new[] {Placeholder.StyleClassPlaceholderText}, null, null), new[]
{
new StyleProperty(Label.StylePropertyFont, notoSans16),
new StyleProperty(Label.StylePropertyFontColor, new Color(103, 103, 103, 128)),
}),
// Big Label
new StyleRule(new SelectorElement(typeof(Label), new[] {StyleClassLabelHeading}, null, null), new[]
{
new StyleProperty(Label.StylePropertyFont, notoSansBold16),
new StyleProperty(Label.StylePropertyFontColor, NanoGold),
}),
// Bigger Label
new StyleRule(new SelectorElement(typeof(Label), new[] {StyleClassLabelHeadingBigger}, null, null),
new[]
{
new StyleProperty(Label.StylePropertyFont, notoSansBold20),
new StyleProperty(Label.StylePropertyFontColor, NanoGold),
}),
// Small Label
new StyleRule(new SelectorElement(typeof(Label), new[] {StyleClassLabelSubText}, null, null), new[]
{
new StyleProperty(Label.StylePropertyFont, notoSans10),
new StyleProperty(Label.StylePropertyFontColor, Color.DarkGray),
}),
// Label Key
new StyleRule(new SelectorElement(typeof(Label), new[] {StyleClassLabelKeyText}, null, null), new[]
{
new StyleProperty(Label.StylePropertyFont, notoSansBold12),
new StyleProperty(Label.StylePropertyFontColor, NanoGold)
}),
new StyleRule(new SelectorElement(typeof(Label), new[] {StyleClassLabelSecondaryColor}, null, null),
new[]
{
new StyleProperty(Label.StylePropertyFont, notoSans12),
new StyleProperty(Label.StylePropertyFontColor, Color.DarkGray),
}),
// Big Button
new StyleRule(new SelectorChild(
new SelectorElement(typeof(Button), new[] {StyleClassButtonBig}, null, null),
new SelectorElement(typeof(Label), null, null, null)),
new[]
{
new StyleProperty("font", notoSans16)
}),
//APC and SMES power state label colors
new StyleRule(new SelectorElement(typeof(Label), new[] {StyleClassPowerStateNone}, null, null), new[]
{
new StyleProperty(Label.StylePropertyFontColor, new Color(0.8f, 0.0f, 0.0f))
}),
new StyleRule(new SelectorElement(typeof(Label), new[] {StyleClassPowerStateLow}, null, null), new[]
{
new StyleProperty(Label.StylePropertyFontColor, new Color(0.9f, 0.36f, 0.0f))
}),
new StyleRule(new SelectorElement(typeof(Label), new[] {StyleClassPowerStateGood}, null, null), new[]
{
new StyleProperty(Label.StylePropertyFontColor, new Color(0.024f, 0.8f, 0.0f))
}),
// Those top menu buttons.
// these use slight variations on the various BaseButton styles so that the content within them appears centered,
// which is NOT the case for the default BaseButton styles (OpenLeft/OpenRight adds extra padding on one of the sides
// which makes the TopButton icons appear off-center, which we don't want).
new StyleRule(
new SelectorElement(typeof(MenuButton), new[] {ButtonSquare}, null, null),
new[]
{
new StyleProperty(Button.StylePropertyStyleBox, topButtonSquare),
}),
new StyleRule(
new SelectorElement(typeof(MenuButton), new[] {ButtonOpenLeft}, null, null),
new[]
{
new StyleProperty(Button.StylePropertyStyleBox, topButtonOpenLeft),
}),
new StyleRule(
new SelectorElement(typeof(MenuButton), new[] {ButtonOpenRight}, null, null),
new[]
{
new StyleProperty(Button.StylePropertyStyleBox, topButtonOpenRight),
}),
new StyleRule(
new SelectorElement(typeof(MenuButton), null, null, new[] {Button.StylePseudoClassNormal}),
new[]
{
new StyleProperty(Button.StylePropertyModulateSelf, ButtonColorDefault),
}),
new StyleRule(
new SelectorElement(typeof(MenuButton), new[] {MenuButton.StyleClassRedTopButton}, null, new[] {Button.StylePseudoClassNormal}),
new[]
{
new StyleProperty(Button.StylePropertyModulateSelf, ButtonColorDefaultRed),
}),
new StyleRule(
new SelectorElement(typeof(MenuButton), null, null, new[] {Button.StylePseudoClassNormal}),
new[]
{
new StyleProperty(Button.StylePropertyModulateSelf, ButtonColorDefault),
}),
new StyleRule(
new SelectorElement(typeof(MenuButton), null, null, new[] {Button.StylePseudoClassPressed}),
new[]
{
new StyleProperty(Button.StylePropertyModulateSelf, ButtonColorPressed),
}),
new StyleRule(
new SelectorElement(typeof(MenuButton), null, null, new[] {Button.StylePseudoClassHover}),
new[]
{
new StyleProperty(Button.StylePropertyModulateSelf, ButtonColorHovered),
}),
new StyleRule(
new SelectorElement(typeof(MenuButton), new[] {MenuButton.StyleClassRedTopButton}, null, new[] {Button.StylePseudoClassHover}),
new[]
{
new StyleProperty(Button.StylePropertyModulateSelf, ButtonColorHoveredRed),
}),
new StyleRule(
new SelectorElement(typeof(Label), new[] {MenuButton.StyleClassLabelTopButton}, null, null),
new[]
{
new StyleProperty(Label.StylePropertyFont, notoSansDisplayBold14),
}),
// NanoHeading
new StyleRule(
new SelectorChild(
SelectorElement.Type(typeof(NanoHeading)),
SelectorElement.Type(typeof(PanelContainer))),
new[]
{
new StyleProperty(PanelContainer.StylePropertyPanel, nanoHeadingBox),
}),
// StripeBack
new StyleRule(
SelectorElement.Type(typeof(StripeBack)),
new[]
{
new StyleProperty(StripeBack.StylePropertyBackground, stripeBack),
}),
// StyleClassItemStatus
new StyleRule(SelectorElement.Class(StyleClassItemStatus), new[]
{
new StyleProperty("font", notoSans10),
}),
Element()
.Class(StyleClassItemStatusNotHeld)
.Prop("font", notoSansItalic10)
.Prop("font-color", ItemStatusNotHeldColor),
Element<RichTextLabel>()
.Class(StyleClassItemStatus)
.Prop(nameof(RichTextLabel.LineHeightScale), 0.7f)
.Prop(nameof(Control.Margin), new Thickness(0, 0, 0, -6)),
// Slider
new StyleRule(SelectorElement.Type(typeof(Slider)), new []
{
new StyleProperty(Slider.StylePropertyBackground, sliderBackBox),
new StyleProperty(Slider.StylePropertyForeground, sliderForeBox),
new StyleProperty(Slider.StylePropertyGrabber, sliderGrabBox),
new StyleProperty(Slider.StylePropertyFill, sliderFillBox),
}),
new StyleRule(SelectorElement.Type(typeof(ColorableSlider)), new []
{
new StyleProperty(ColorableSlider.StylePropertyFillWhite, sliderFillWhite),
new StyleProperty(ColorableSlider.StylePropertyBackgroundWhite, sliderFillWhite),
}),
new StyleRule(new SelectorElement(typeof(Slider), new []{StyleClassSliderRed}, null, null), new []
{
new StyleProperty(Slider.StylePropertyFill, sliderFillRed),
}),
new StyleRule(new SelectorElement(typeof(Slider), new []{StyleClassSliderGreen}, null, null), new []
{
new StyleProperty(Slider.StylePropertyFill, sliderFillGreen),
}),
new StyleRule(new SelectorElement(typeof(Slider), new []{StyleClassSliderBlue}, null, null), new []
{
new StyleProperty(Slider.StylePropertyFill, sliderFillBlue),
}),
new StyleRule(new SelectorElement(typeof(Slider), new []{StyleClassSliderWhite}, null, null), new []
{
new StyleProperty(Slider.StylePropertyFill, sliderFillWhite),
}),
// chat channel option selector
new StyleRule(new SelectorElement(typeof(Button), new[] {StyleClassChatChannelSelectorButton}, null, null), new[]
{
new StyleProperty(Button.StylePropertyStyleBox, chatChannelButton),
}),
// chat filter button
new StyleRule(new SelectorElement(typeof(ContainerButton), new[] {StyleClassChatFilterOptionButton}, null, null), new[]
{
new StyleProperty(ContainerButton.StylePropertyStyleBox, chatFilterButton),
}),
new StyleRule(new SelectorElement(typeof(ContainerButton), new[] {StyleClassChatFilterOptionButton}, null, new[] {ContainerButton.StylePseudoClassNormal}), new[]
{
new StyleProperty(Control.StylePropertyModulateSelf, ButtonColorDefault),
}),
new StyleRule(new SelectorElement(typeof(ContainerButton), new[] {StyleClassChatFilterOptionButton}, null, new[] {ContainerButton.StylePseudoClassHover}), new[]
{
new StyleProperty(Control.StylePropertyModulateSelf, ButtonColorHovered),
}),
new StyleRule(new SelectorElement(typeof(ContainerButton), new[] {StyleClassChatFilterOptionButton}, null, new[] {ContainerButton.StylePseudoClassPressed}), new[]
{
new StyleProperty(Control.StylePropertyModulateSelf, ButtonColorPressed),
}),
new StyleRule(new SelectorElement(typeof(ContainerButton), new[] {StyleClassChatFilterOptionButton}, null, new[] {ContainerButton.StylePseudoClassDisabled}), new[]
{
new StyleProperty(Control.StylePropertyModulateSelf, ButtonColorDisabled),
}),
// OptionButton
new StyleRule(new SelectorElement(typeof(OptionButton), null, null, null), new[]
{
new StyleProperty(ContainerButton.StylePropertyStyleBox, BaseButton),
}),
new StyleRule(new SelectorElement(typeof(OptionButton), null, null, new[] {ContainerButton.StylePseudoClassNormal}), new[]
{
new StyleProperty(Control.StylePropertyModulateSelf, ButtonColorDefault),
}),
new StyleRule(new SelectorElement(typeof(OptionButton), null, null, new[] {ContainerButton.StylePseudoClassHover}), new[]
{
new StyleProperty(Control.StylePropertyModulateSelf, ButtonColorHovered),
}),
new StyleRule(new SelectorElement(typeof(OptionButton), null, null, new[] {ContainerButton.StylePseudoClassPressed}), new[]
{
new StyleProperty(Control.StylePropertyModulateSelf, ButtonColorPressed),
}),
new StyleRule(new SelectorElement(typeof(OptionButton), null, null, new[] {ContainerButton.StylePseudoClassDisabled}), new[]
{
new StyleProperty(Control.StylePropertyModulateSelf, ButtonColorDisabled),
}),
new StyleRule(new SelectorElement(typeof(TextureRect), new[] {OptionButton.StyleClassOptionTriangle}, null, null), new[]
{
new StyleProperty(TextureRect.StylePropertyTexture, textureInvertedTriangle),
//new StyleProperty(Control.StylePropertyModulateSelf, Color.FromHex("#FFFFFF")),
}),
new StyleRule(new SelectorElement(typeof(Label), new[] { OptionButton.StyleClassOptionButton }, null, null), new[]
{
new StyleProperty(Label.StylePropertyAlignMode, Label.AlignMode.Center),
}),
new StyleRule(new SelectorElement(typeof(PanelContainer), new []{ ClassHighDivider}, null, null), new []
{
new StyleProperty(PanelContainer.StylePropertyPanel, new StyleBoxFlat { BackgroundColor = NanoGold, ContentMarginBottomOverride = 2, ContentMarginLeftOverride = 2}),
}),
Element<TextureButton>()
.Class(StyleClassButtonHelp)
.Prop(TextureButton.StylePropertyTexture, resCache.GetTexture("/Textures/Interface/VerbIcons/information.svg.192dpi.png")),
// Labels ---
Element<Label>().Class(StyleClassLabelBig)
.Prop(Label.StylePropertyFont, notoSans16),
Element<Label>().Class(StyleClassLabelSmall)
.Prop(Label.StylePropertyFont, notoSans10),
// ---
// Different Background shapes ---
Element<PanelContainer>().Class(ClassAngleRect)
.Prop(PanelContainer.StylePropertyPanel, BaseAngleRect)
.Prop(Control.StylePropertyModulateSelf, Color.FromHex("#25252A")),
Element<PanelContainer>().Class("BackgroundOpenRight")
.Prop(PanelContainer.StylePropertyPanel, BaseButtonOpenRight)
.Prop(Control.StylePropertyModulateSelf, Color.FromHex("#25252A")),
Element<PanelContainer>().Class("BackgroundOpenLeft")
.Prop(PanelContainer.StylePropertyPanel, BaseButtonOpenLeft)
.Prop(Control.StylePropertyModulateSelf, Color.FromHex("#25252A")),
// ---
// Dividers
Element<PanelContainer>().Class(ClassLowDivider)
.Prop(PanelContainer.StylePropertyPanel, new StyleBoxFlat
{
BackgroundColor = Color.FromHex("#444"),
ContentMarginLeftOverride = 2,
ContentMarginBottomOverride = 2
}),
// Window Headers
Element<Label>().Class("FancyWindowTitle")
.Prop("font", boxFont13)
.Prop("font-color", NanoGold),
Element<PanelContainer>().Class("WindowHeadingBackground")
.Prop("panel", new StyleBoxTexture(BaseButtonOpenLeft) { Padding = default })
.Prop(Control.StylePropertyModulateSelf, Color.FromHex("#1F1F23")),
Element<PanelContainer>().Class("WindowHeadingBackgroundLight")
.Prop("panel", new StyleBoxTexture(BaseButtonOpenLeft) { Padding = default }),
// Window Header Help Button
Element<TextureButton>().Class(FancyWindow.StyleClassWindowHelpButton)
.Prop(TextureButton.StylePropertyTexture, resCache.GetTexture("/Textures/Interface/Nano/help.png"))
.Prop(Control.StylePropertyModulateSelf, Color.FromHex("#4B596A")),
Element<TextureButton>().Class(FancyWindow.StyleClassWindowHelpButton).Pseudo(ContainerButton.StylePseudoClassHover)
.Prop(Control.StylePropertyModulateSelf, Color.FromHex("#7F3636")),
Element<TextureButton>().Class(FancyWindow.StyleClassWindowHelpButton).Pseudo(ContainerButton.StylePseudoClassPressed)
.Prop(Control.StylePropertyModulateSelf, Color.FromHex("#753131")),
//The lengths you have to go through to change a background color smh
Element<PanelContainer>().Class("PanelBackgroundBaseDark")
.Prop("panel", new StyleBoxTexture(BaseButtonOpenBoth) { Padding = default })
.Prop(Control.StylePropertyModulateSelf, Color.FromHex("#1F1F23")),
Element<PanelContainer>().Class("PanelBackgroundLight")
.Prop("panel", new StyleBoxTexture(BaseButtonOpenBoth) { Padding = default })
.Prop(Control.StylePropertyModulateSelf, Color.FromHex("#2F2F3B")),
// Window Footer
Element<TextureRect>().Class("NTLogoDark")
.Prop(TextureRect.StylePropertyTexture, resCache.GetTexture("/Textures/Interface/Nano/ntlogo.svg.png"))
.Prop(Control.StylePropertyModulateSelf, Color.FromHex("#757575")),
Element<Label>().Class("WindowFooterText")
.Prop(Label.StylePropertyFont, notoSans8)
.Prop(Label.StylePropertyFontColor, Color.FromHex("#757575")),
// X Texture button ---
Element<TextureButton>().Class("CrossButtonRed")
.Prop(TextureButton.StylePropertyTexture, resCache.GetTexture("/Textures/Interface/Nano/cross.svg.png"))
.Prop(Control.StylePropertyModulateSelf, DangerousRedFore),
Element<TextureButton>().Class("CrossButtonRed").Pseudo(TextureButton.StylePseudoClassHover)
.Prop(Control.StylePropertyModulateSelf, Color.FromHex("#7F3636")),
Element<TextureButton>().Class("CrossButtonRed").Pseudo(TextureButton.StylePseudoClassHover)
.Prop(Control.StylePropertyModulateSelf, Color.FromHex("#753131")),
// ---
// Profile Editor
Element<TextureButton>().Class("SpeciesInfoDefault")
.Prop(TextureButton.StylePropertyTexture, resCache.GetTexture("/Textures/Interface/VerbIcons/information.svg.192dpi.png")),
Element<TextureButton>().Class("SpeciesInfoWarning")
.Prop(TextureButton.StylePropertyTexture, resCache.GetTexture("/Textures/Interface/info.svg.192dpi.png"))
.Prop(Control.StylePropertyModulateSelf, Color.FromHex("#eeee11")),
// The default look of paper in UIs. Pages can have components which override this
Element<PanelContainer>().Class("PaperDefaultBorder")
.Prop(PanelContainer.StylePropertyPanel, paperBackground),
Element<RichTextLabel>().Class("PaperWrittenText")
.Prop(Label.StylePropertyFont, notoSans12)
.Prop(Control.StylePropertyModulateSelf, Color.FromHex("#111111")),
Element<RichTextLabel>().Class("LabelSubText")
.Prop(Label.StylePropertyFont, notoSans10)
.Prop(Label.StylePropertyFontColor, Color.DarkGray),
Element<LineEdit>().Class("PaperLineEdit")
.Prop(LineEdit.StylePropertyStyleBox, new StyleBoxEmpty()),
// Red Button ---
Element<Button>().Class("ButtonColorRed")
.Prop(Control.StylePropertyModulateSelf, ButtonColorDefaultRed),
Element<Button>().Class("ButtonColorRed").Pseudo(ContainerButton.StylePseudoClassNormal)
.Prop(Control.StylePropertyModulateSelf, ButtonColorDefaultRed),
Element<Button>().Class("ButtonColorRed").Pseudo(ContainerButton.StylePseudoClassHover)
.Prop(Control.StylePropertyModulateSelf, ButtonColorHoveredRed),
// ---
// Green Button ---
Element<Button>().Class("ButtonColorGreen")
.Prop(Control.StylePropertyModulateSelf, ButtonColorGoodDefault),
Element<Button>().Class("ButtonColorGreen").Pseudo(ContainerButton.StylePseudoClassNormal)
.Prop(Control.StylePropertyModulateSelf, ButtonColorGoodDefault),
Element<Button>().Class("ButtonColorGreen").Pseudo(ContainerButton.StylePseudoClassHover)
.Prop(Control.StylePropertyModulateSelf, ButtonColorGoodHovered),
// ---
// Small Button ---
Element<Button>().Class("ButtonSmall")
.Prop(ContainerButton.StylePropertyStyleBox, smallButtonBase),
Child().Parent(Element<Button>().Class("ButtonSmall"))
.Child(Element<Label>())
.Prop(Label.StylePropertyFont, notoSans8),
// ---
Element<Label>().Class("StatusFieldTitle")
.Prop("font-color", NanoGold),
Element<Label>().Class("Good")
.Prop("font-color", GoodGreenFore),
Element<Label>().Class("Caution")
.Prop("font-color", ConcerningOrangeFore),
Element<Label>().Class("Danger")
.Prop("font-color", DangerousRedFore),
Element<Label>().Class("Disabled")
.Prop("font-color", DisabledFore),
// Radial menu buttons
Element<TextureButton>().Class("RadialMenuButton")
.Prop(TextureButton.StylePropertyTexture, resCache.GetTexture("/Textures/Interface/Radial/button_normal.png")),
Element<TextureButton>().Class("RadialMenuButton")
.Pseudo(TextureButton.StylePseudoClassHover)
.Prop(TextureButton.StylePropertyTexture, resCache.GetTexture("/Textures/Interface/Radial/button_hover.png")),
Element<TextureButton>().Class("RadialMenuCloseButton")
.Prop(TextureButton.StylePropertyTexture, resCache.GetTexture("/Textures/Interface/Radial/close_normal.png")),
Element<TextureButton>().Class("RadialMenuCloseButton")
.Pseudo(TextureButton.StylePseudoClassHover)
.Prop(TextureButton.StylePropertyTexture, resCache.GetTexture("/Textures/Interface/Radial/close_hover.png")),
Element<TextureButton>().Class("RadialMenuBackButton")
.Prop(TextureButton.StylePropertyTexture, resCache.GetTexture("/Textures/Interface/Radial/back_normal.png")),
Element<TextureButton>().Class("RadialMenuBackButton")
.Pseudo(TextureButton.StylePseudoClassHover)
.Prop(TextureButton.StylePropertyTexture, resCache.GetTexture("/Textures/Interface/Radial/back_hover.png")),
//PDA - Backgrounds
Element<PanelContainer>().Class("PdaContentBackground")
.Prop(PanelContainer.StylePropertyPanel, BaseButtonOpenBoth)
.Prop(Control.StylePropertyModulateSelf, Color.FromHex("#25252a")),
Element<PanelContainer>().Class("PdaBackground")
.Prop(PanelContainer.StylePropertyPanel, BaseButtonOpenBoth)
.Prop(Control.StylePropertyModulateSelf, Color.FromHex("#000000")),
Element<PanelContainer>().Class("PdaBackgroundRect")
.Prop(PanelContainer.StylePropertyPanel, BaseAngleRect)
.Prop(Control.StylePropertyModulateSelf, Color.FromHex("#717059")),
Element<PanelContainer>().Class("PdaBorderRect")
.Prop(PanelContainer.StylePropertyPanel, AngleBorderRect),
Element<PanelContainer>().Class("BackgroundDark")
.Prop(PanelContainer.StylePropertyPanel, new StyleBoxFlat(Color.FromHex("#25252A"))),
//PDA - Buttons
Element<PdaSettingsButton>().Pseudo(ContainerButton.StylePseudoClassNormal)
.Prop(PdaSettingsButton.StylePropertyBgColor, Color.FromHex(PdaSettingsButton.NormalBgColor))
.Prop(PdaSettingsButton.StylePropertyFgColor, Color.FromHex(PdaSettingsButton.EnabledFgColor)),
Element<PdaSettingsButton>().Pseudo(ContainerButton.StylePseudoClassHover)
.Prop(PdaSettingsButton.StylePropertyBgColor, Color.FromHex(PdaSettingsButton.HoverColor))
.Prop(PdaSettingsButton.StylePropertyFgColor, Color.FromHex(PdaSettingsButton.EnabledFgColor)),
Element<PdaSettingsButton>().Pseudo(ContainerButton.StylePseudoClassPressed)
.Prop(PdaSettingsButton.StylePropertyBgColor, Color.FromHex(PdaSettingsButton.PressedColor))
.Prop(PdaSettingsButton.StylePropertyFgColor, Color.FromHex(PdaSettingsButton.EnabledFgColor)),
Element<PdaSettingsButton>().Pseudo(ContainerButton.StylePseudoClassDisabled)
.Prop(PdaSettingsButton.StylePropertyBgColor, Color.FromHex(PdaSettingsButton.NormalBgColor))
.Prop(PdaSettingsButton.StylePropertyFgColor, Color.FromHex(PdaSettingsButton.DisabledFgColor)),
Element<PdaProgramItem>().Pseudo(ContainerButton.StylePseudoClassNormal)
.Prop(PdaProgramItem.StylePropertyBgColor, Color.FromHex(PdaProgramItem.NormalBgColor)),
Element<PdaProgramItem>().Pseudo(ContainerButton.StylePseudoClassHover)
.Prop(PdaProgramItem.StylePropertyBgColor, Color.FromHex(PdaProgramItem.HoverColor)),
Element<PdaProgramItem>().Pseudo(ContainerButton.StylePseudoClassPressed)
.Prop(PdaProgramItem.StylePropertyBgColor, Color.FromHex(PdaProgramItem.HoverColor)),
//PDA - Text
Element<Label>().Class("PdaContentFooterText")
.Prop(Label.StylePropertyFont, notoSans10)
.Prop(Label.StylePropertyFontColor, Color.FromHex("#757575")),
Element<Label>().Class("PdaWindowFooterText")
.Prop(Label.StylePropertyFont, notoSans10)
.Prop(Label.StylePropertyFontColor, Color.FromHex("#333d3b")),
// Fancy Tree
Element<ContainerButton>().Identifier(TreeItem.StyleIdentifierTreeButton)
.Class(TreeItem.StyleClassEvenRow)
.Prop(ContainerButton.StylePropertyStyleBox, new StyleBoxFlat
{
BackgroundColor = FancyTreeEvenRowColor,
}),
Element<ContainerButton>().Identifier(TreeItem.StyleIdentifierTreeButton)
.Class(TreeItem.StyleClassOddRow)
.Prop(ContainerButton.StylePropertyStyleBox, new StyleBoxFlat
{
BackgroundColor = FancyTreeOddRowColor,
}),
Element<ContainerButton>().Identifier(TreeItem.StyleIdentifierTreeButton)
.Class(TreeItem.StyleClassSelected)
.Prop(ContainerButton.StylePropertyStyleBox, new StyleBoxFlat
{
BackgroundColor = FancyTreeSelectedRowColor,
}),
Element<ContainerButton>().Identifier(TreeItem.StyleIdentifierTreeButton)
.Pseudo(ContainerButton.StylePseudoClassHover)
.Prop(ContainerButton.StylePropertyStyleBox, new StyleBoxFlat
{
BackgroundColor = FancyTreeSelectedRowColor,
}),
}).ToList());
}
}
}

Technical details

This literally just rewrites content-side stylesheets from the ground up.

One thing I feel is important to note if you are going back through my commits, is that I first got the sheetlets working as quick as possible (which was mot quick), and then dis multiple refactor passes to make the code better. The current code is pretty good but probably still a refactor or two away from where I'll be completely happy with it.

Design Decisions

This is really long so uh, click to expand


As anyone who's had the misfortune of editing StyleNano is probably painfully aware of, the main problem with StyleNano is how difficult it is to find anything. Maybe the style classes you want are sitting somewhere in that gargantuan tangle of code, or maybe not. Maybe it;s just easier to hardcode everything in the UI code instead (WHICH IS THE ROUTE LOT OF PEOPLE HAVE (rightfully) TAKEN (stylenano was a complete fucking mess)). With this new iteration, I tried to maximize the readability of the structure of the code. Want to know what style classes are available for you to use? Look in StyleClass. Want to know the styles applicable to labels? LabelSheetlet or TextSheetlet. Buttons? ButtonSheetlet.

But what are Sheetlets? Good question person-who-didnt-read-the-original-PR! Basically how styles used to work is every single style rule would be agglomerated in one unholy massive fucking list. This is still how it works, but now the responsibility of chipping in styles to this massive list is spread out among all the sheetlets. They have one method, StyleRule[] GetRules, and all these rules from all the sheetlets are collected up to do in like 30-40ish files what used to be one 1600 line file.

ISheetletConfig is intended to cut down on repeated code by providing shared functionality between the stylesheets. Its literally only used for buttons. Its also used (in my crusade against anything hardcoded) to store resource paths, because it's easier to reference if it's all centralized.

Deviations from Original PR's Direction

The class holding all the style classes, StyleClass was originally named Styleclasses. I think this was a better name. Unfortunately, Controls have a field with the exact same name, meaning to reference Styleclasses, you would have to type out Stylesheets.Redux.Styleclasses.<whatever>. This syntax would be shortened after everything is moved out of Redux but still, annoying. The shorter syntax is nicer. Also as an extra bonus, it's closer to the syntax of something like StyleClassLabelHeading. Just add a dot! That's kinda neat.

class stopped sounding like a real word. Class class class class class. Blegh.

Instead of an array of colors, I made a custom ColorPalette class. This is because when transferring all the styles into Sheetlets, I noticed I basically used the palette in one of three ways, foreground elements (Buttons etc.), background elements, (Panels, etc.), and text. So I represented that in the palette! Just makes code a bit more readable / robust. Also, I just kinda hated that [0] was the brightest and [4] the darkest. It should be the other way around! and what if I want to add more colors? There are more than five shades of any given color!

This does not compromise customizability because any colors can be curly-brace initialized after the fact if you are really motivated.

Also I made a cool shitty codepen to help me pick colors.

What moony originally did in their PR was they had resources scoped / access-locked (which I have kept), and, as a consequence, sheetlets that used a resource would have to be sheet-specific. This included buttons, panels, windows, etc.; things that basically every stylesheet would want, and which would have to be duplicated for every stylesheet. I think the intention behind this is to prevent resources intended for one stylesheet being used unintentionally in another, but honestly, the organization of the resources folder is a mess (a lot of style-generic resources are sitting in Textures/Interface/Nano), and this would lead to a lot of copying resources, which is definitely a maintenance hazard. I could clean it up, but then it could be a NIGHTMARE to merge for downstream forks (probably idk) (also touching the resource folder scares me). The resource-scoping system does allow you to specify multiple scopes to try in order, but that's kinda icky. So! I propose (and have already implemented) the following solution:

GetResourceOr

(and GetTextureOr)

It gets the scoped resource like normal, but if it doesn't exist, falls back to an absolute root. Is it a generic resource that has no business being is Textures/Interface/Nano? I don't care! It can stay there! I really can't be bothered to move it! Now the sheetlet will work with any stylesheet. If the scope happens to exist, it'll use that instead.

This method is kinda clunky but that's good (maybe?) because you want to use it where it counts. If there's a resource that, ideally, every theme should have a unique implementation of, then you would just use GetResource.

Significant Interface Changes

  • Colors are different (duh)
  • Tooltips on action menu now is slightly transparent for consistency w/ examine popup
  • Everything else should pretty much be the same. I'm like 80% sure I transferred everything from StyleNano correctly, as I was pretty methodical with it, but its also entirely possible I forgot something. If anybody notices UI that looks worse than they remember, double check it actually is different (this happened to me several times, some of the UIs are just kinda bad), and pretty please PR the changes (or ask me, and I'll probably do it).
  • I definitely like messed a couple colors up but whatever
  • Also anything that previously used StyleSpace now uses SheetSystem which is like StyleSpace but the colors are slightly different

Breaking Changes

StyleNano is gone!!

  • Style classes defined in StyleNano have been moved either to Content.Client.Stylesheets.Redux.StyleClass or their associated Control.
  • Any StyleRule additions to StyleNano must be rewritten to conform to the new format (See guide (TODO: LINK GUIDE))
  • Some unused / redundant style classes were removed. If you happened to be relying on them, either substitute in the appropriate style classes defined in Content.Client.Stylesheets.Redux.StyleClass or create a new Sheetlet (Again, see guide)
  • If you are planning on creating a new UI, there are new conventions you should follow (Yet again, see guide)
  • StyleSpace is gone too, but that probably doesn't affect you

Also

square.png has been deleted from Textures/Interface/Nano. This shouldn't have even been used in the first place; StyleBoxFlat exists.

Future work

  • Allow the user to change the colors
  • Allow the user to change the primary font.
  • Syndicate/domain specific stylesheets (because they're no longer a major maintenance hazard)
  • Reorganization; At this time all new tools, sheets, code, etc. are in Content.Client/Stylesheets/Redux for ease of review / merging
  • There's still a lot of TODOs left scattered around for hardcoding and stuff
  • Also palletize margins and stuff?
  • kill DefaultWindow
  • Change all admin / sandbox windows to the new theme

Changelog

🆑

  • tweak: UI colors have been changed (new palette system)

Signed-off-by: Brandon Li <[email protected]>
… methods to `ButtonSheetlet`

Signed-off-by: Brandon Li <[email protected]>
Signed-off-by: Brandon Li <[email protected]>
Signed-off-by: Brandon Li <[email protected]>
Signed-off-by: Brandon Li <[email protected]>
Signed-off-by: Brandon Li <[email protected]>
Signed-off-by: Brandon Li <[email protected]>
Signed-off-by: Brandon Li <[email protected]>
Signed-off-by: Brandon Li <[email protected]>
Signed-off-by: Brandon Li <[email protected]>
Signed-off-by: Brandon Li <[email protected]>
@github-actions github-actions bot added the Merge Conflict This PR currently has conflicts that need to be addressed. label Jul 21, 2024
Copy link
Contributor

This pull request has conflicts, please resolve those before we can evaluate the pull request.

@aspiringLich
Copy link
Contributor Author

image

@github-actions github-actions bot added Changes: Map Can be reviewed or fixed by people who are knowledgeable with mapping. Changes: Sprites Should be reviewed or fixed by people who are knowledgeable with spriting or visual design. labels Jul 21, 2024
@aspiringLich
Copy link
Contributor Author

aspiringLich commented Jul 21, 2024

Sorry to the two people I just requested a review from, just a side effect of my epic git skills.

Okay, I may need some help to help give Moony commmit credit. I'm decently familiar with git, but I'm not a wizard and this is tricky.

I tried checking out the commit in question, amending it with git commit --amend --author to change the author to moony, and rebasing it back onto the original commit, but that messed everything up because now this PR suddenly had like 1000 commits as github didnt realize those commits werent mine I guess.

Not sure what to do now, that was the one idea I had.

@aspiringLich
Copy link
Contributor Author

aspiringLich commented Jul 21, 2024

I'll resolve the merge conflicts once someone gives me the go ahead because insert Sisyphus image

Also, to be clear, this PR does NOT change maps or sprites. again, side effect of my epic git skills.

Copy link
Member

@PJB3005 PJB3005 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

didn't do a whole review but this should be the core of the actual system + half of the rest.

public const string LabelKeyText = "LabelKeyText";
public const string LabelWeak = "LabelWeak"; // replaces `StyleClassLabelSecondaryColor`

public const string BackgroundPanel = "AngleRect";
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Intentional?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

holdover from ass naming conventions in StyleNano. I'll rename it for consistency after resolve merge conflicts.

Content.Client/Administration/UI/AdminUIHelpers.cs Outdated Show resolved Hide resolved
Content.Client/Ame/UI/AmeWindow.xaml.cs Outdated Show resolved Hide resolved
Content.Client/Atmos/Monitor/UI/AirAlarmWindow.xaml.cs Outdated Show resolved Hide resolved
Content.Client/ContextMenu/UI/ContextMenuElement.xaml Outdated Show resolved Hide resolved
Content.Client/Stylesheets/Redux/PalettedStylesheet.cs Outdated Show resolved Hide resolved
public ColorPalette PositiveButtonPalette { get; }
public ColorPalette NegativeButtonPalette { get; }

public StyleBox ConfigureBaseButton(IStyleResources sheet)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah this really is not a good use of DIMs. I would rather these be extension methods or something.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These should be on ButtonSheetlet anyway probably

@aspiringLich
Copy link
Contributor Author

aspiringLich commented Sep 24, 2024

Most of the trivial changes have been dealt with, waiting on replies to my comments. Also updated the docs PR.

I'll finish this up and merge upstream changes tomorrow.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Changes: Map Can be reviewed or fixed by people who are knowledgeable with mapping. Changes: Sprites Should be reviewed or fixed by people who are knowledgeable with spriting or visual design. Changes: UI Can be reviewed or fixed by people who are knowledgeable with UI design Holy Shit This is real important!! Merge Conflict This PR currently has conflicts that need to be addressed. Status: Needs Review This PR requires new reviews before it can be merged.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

8 participants