UI improvements (no more beige boxes!) (#77)

* Fix PanelContainer backgrounds

* Make all windows transparent

* Make all panels transparent by default

* Premultiply alpha in labels on transparent BG in currency window

* Add outline to various text controls that can't have a custom material

* Apply premultiplied alpha to more windows

* More subtle focus for ItemList

* Add outline to tooltip text

* Style ItemList

* Style LineEdit

LICENSE.md

@@ -117,6 +117,8 @@ As mentioned before, the one stipulation is that these images aren’t to be use
 - menu_button
 - target_overlay
 - selected_galaxy_node
+- item_list
+- line_edit
 
 [Asteroids](https://gargore.itch.io/asteroids) created by [Gargore](https://www.gargore.com/), purchased for use in this project:
 - asteroids

galaxy/map/galaxy_map_window.tscn

@@ -8,9 +8,11 @@
 
 [node name="GalaxyMapWindow" type="Window" node_paths=PackedStringArray("galaxy_map_3d", "camera")]
 own_world_3d = true
+transparent_bg = true
 title = "Galaxy Map"
 initial_position = 2
 size = Vector2i(800, 800)
+transparent = true
 script = ExtResource("1_ksqdq")
 galaxy_map_3d = NodePath("PanelContainer/MarginContainer/SubViewportContainer/SubViewport/GalaxyMap3D")
 galaxy = ExtResource("2_okeml")

screens/game/currency_trading/currency_trading_window.tscn

@@ -1,11 +1,14 @@
-[gd_scene load_steps=2 format=3 uid="uid://b1yvdsvgyesj5"]
+[gd_scene load_steps=3 format=3 uid="uid://b1yvdsvgyesj5"]
 
 [ext_resource type="Script" path="res://screens/game/currency_trading/currency_trading_window.gd" id="1_a2pkb"]
+[ext_resource type="Material" uid="uid://cs5s3tb7vagsi" path="res://screens/shared_ui/premultiplied_canvas_material.tres" id="2_27a6a"]
 
 [node name="CurrencyTradingWindow" type="Window" node_paths=PackedStringArray("buy_spin_box", "buy_option_button", "buy_balance_label", "trade_button", "sell_spin_box", "sell_option_button", "sell_balance_label")]
+transparent_bg = true
 title = "Currency Exchange"
 initial_position = 2
 size = Vector2i(600, 200)
+transparent = true
 script = ExtResource("1_a2pkb")
 buy_spin_box = NodePath("PanelContainer/GridContainer/BuyContainer/BuySpinBox")
 buy_option_button = NodePath("PanelContainer/GridContainer/BuyContainer/BuyOptionButton")
@@ -31,6 +34,7 @@ size_flags_vertical = 4
 columns = 4
 
 [node name="BuyLabel" type="Label" parent="PanelContainer/GridContainer"]
+material = ExtResource("2_27a6a")
 layout_mode = 2
 text = "BUY "
 
@@ -45,6 +49,7 @@ custom_arrow_step = 1.0
 layout_mode = 2
 
 [node name="SellLabel" type="Label" parent="PanelContainer/GridContainer"]
+material = ExtResource("2_27a6a")
 layout_mode = 2
 text = " FOR "
 
@@ -66,13 +71,15 @@ text = "TRADE"
 layout_mode = 2
 
 [node name="BuyBalanceLabel" type="Label" parent="PanelContainer/GridContainer"]
+material = ExtResource("2_27a6a")
 layout_mode = 2
 text = "Balance: 123 credits"
 
 [node name="Empty2" type="Control" parent="PanelContainer/GridContainer"]
 layout_mode = 2
 
 [node name="SellBalanceLabel" type="Label" parent="PanelContainer/GridContainer"]
+material = ExtResource("2_27a6a")
 layout_mode = 2
 text = "Balance: 123 lumins"
 

screens/game/exit_dialog/exit_dialog.tscn

@@ -4,10 +4,12 @@
 [ext_resource type="PackedScene" uid="uid://btc568gwt7fuc" path="res://screens/main_menu/main_menu.tscn" id="2_dfrt5"]
 
 [node name="ExitDialog" type="ConfirmationDialog"]
+transparent_bg = true
 scaling_3d_scale = 2.0
 title = "EXIT GAME?"
 initial_position = 2
 size = Vector2i(400, 150)
+transparent = true
 ok_button_text = "EXIT TO MAIN MENU"
 dialog_text = "Do you wish to end the game in progress?"
 dialog_hide_on_ok = false

screens/game/game.tscn

@@ -99,7 +99,7 @@ script = ExtResource("11_ag0i7")
 max_volume = 10.0
 commodities = {}
 
-[sub_resource type="Resource" id="Resource_v8hi4"]
+[sub_resource type="Resource" id="Resource_4f4h7"]
 resource_local_to_scene = true
 script = ExtResource("13_q2g24")
 max_fuel = 6.0
@@ -180,7 +180,7 @@ hull = SubResource("Resource_ffax2")
 shield = SubResource("Resource_75c8j")
 battery = SubResource("Resource_xpwk4")
 cargo_hold = SubResource("Resource_bsv1l")
-hyperdrive = SubResource("Resource_v8hi4")
+hyperdrive = SubResource("Resource_4f4h7")
 
 [node name="HyperdriveSystem" type="Node3D" parent="HyperspaceSceneSwitcher/Sol/PlayerCorvette"]
 script = ExtResource("16_6olqp")

screens/game/game_over/game_over.tscn

@@ -4,11 +4,13 @@
 [ext_resource type="PackedScene" uid="uid://btc568gwt7fuc" path="res://screens/main_menu/main_menu.tscn" id="2_pxfub"]
 
 [node name="GameOverDialog" type="AcceptDialog"]
+transparent_bg = true
 scaling_3d_scale = 2.0
 title = "GAME OVER"
 initial_position = 2
 size = Vector2i(400, 150)
 visible = true
+transparent = true
 ok_button_text = "EXIT TO MAIN MENU"
 dialog_text = "Your ship has been destroyed, and you along with it."
 dialog_hide_on_ok = false

screens/game/mission_log/mission_log_window.gd

@@ -6,6 +6,7 @@ class_name MissionLogWindow
 @export var cost_label: Label
 @export var reward_label: Label
 @export var forfeit_button: Button
+@export var premultiplied_canvas_material: CanvasItemMaterial
 
 var mission_controller: MissionController
 

screens/game/mission_log/mission_log_window.tscn

@@ -1,17 +1,21 @@
-[gd_scene load_steps=2 format=3 uid="uid://b0oavecy2l8p5"]
+[gd_scene load_steps=3 format=3 uid="uid://b0oavecy2l8p5"]
 
 [ext_resource type="Script" path="res://screens/game/mission_log/mission_log_window.gd" id="1_5is5j"]
+[ext_resource type="Material" uid="uid://cs5s3tb7vagsi" path="res://screens/shared_ui/premultiplied_canvas_material.tres" id="2_8vnsw"]
 
 [node name="MissionLogWindow" type="Window" node_paths=PackedStringArray("mission_list", "description_label", "cost_label", "reward_label", "forfeit_button")]
+transparent_bg = true
 title = "Mission Log"
 initial_position = 2
 size = Vector2i(700, 400)
+transparent = true
 script = ExtResource("1_5is5j")
 mission_list = NodePath("PanelContainer/VSplitContainer/Missions/ItemList")
 description_label = NodePath("PanelContainer/VSplitContainer/MarginContainer/HBoxContainer/DescriptionLabel")
 cost_label = NodePath("PanelContainer/VSplitContainer/MarginContainer/HBoxContainer/VBoxContainer/CostLabel")
 reward_label = NodePath("PanelContainer/VSplitContainer/MarginContainer/HBoxContainer/VBoxContainer/RewardLabel")
 forfeit_button = NodePath("PanelContainer/VSplitContainer/MarginContainer/HBoxContainer/VBoxContainer/ForfeitButton")
+premultiplied_canvas_material = ExtResource("2_8vnsw")
 
 [node name="PanelContainer" type="PanelContainer" parent="."]
 anchors_preset = 15
@@ -49,6 +53,7 @@ layout_mode = 2
 size_flags_vertical = 3
 
 [node name="DescriptionLabel" type="RichTextLabel" parent="PanelContainer/VSplitContainer/MarginContainer/HBoxContainer"]
+material = ExtResource("2_8vnsw")
 layout_mode = 2
 size_flags_horizontal = 3
 bbcode_enabled = true
@@ -59,11 +64,13 @@ layout_mode = 2
 size_flags_horizontal = 8
 
 [node name="CostHeading" type="Label" parent="PanelContainer/VSplitContainer/MarginContainer/HBoxContainer/VBoxContainer"]
+material = ExtResource("2_8vnsw")
 layout_mode = 2
 text = "Deposit"
 uppercase = true
 
 [node name="CostLabel" type="Label" parent="PanelContainer/VSplitContainer/MarginContainer/HBoxContainer/VBoxContainer"]
+material = ExtResource("2_8vnsw")
 layout_mode = 2
 text = "1235 "
 
@@ -72,11 +79,13 @@ custom_minimum_size = Vector2(2.08165e-12, 8)
 layout_mode = 2
 
 [node name="RewardHeading" type="Label" parent="PanelContainer/VSplitContainer/MarginContainer/HBoxContainer/VBoxContainer"]
+material = ExtResource("2_8vnsw")
 layout_mode = 2
 text = "Reward"
 uppercase = true
 
 [node name="RewardLabel" type="Label" parent="PanelContainer/VSplitContainer/MarginContainer/HBoxContainer/VBoxContainer"]
+material = ExtResource("2_8vnsw")
 layout_mode = 2
 text = "123 credits
 1234 lumins"

screens/landing/landing.tscn

@@ -1,10 +1,11 @@
-[gd_scene load_steps=8 format=3 uid="uid://d1kbmfvjs6nrv"]
+[gd_scene load_steps=9 format=3 uid="uid://d1kbmfvjs6nrv"]
 
 [ext_resource type="Script" path="res://screens/landing/landing.gd" id="1_h6plc"]
 [ext_resource type="AudioStream" uid="uid://bbxl7rk2jq5qi" path="res://screens/landing/audio/HangarDoors.ogg" id="2_g2uae"]
 [ext_resource type="Script" path="res://screens/landing/spaceport_bar.gd" id="2_k5nxq"]
 [ext_resource type="PackedScene" uid="uid://hos1wawl1u68" path="res://screens/landing/mission_computer_window.tscn" id="3_3kp6r"]
 [ext_resource type="PackedScene" uid="uid://dpihtkm0u6kmb" path="res://screens/landing/trading_window.tscn" id="4_ci831"]
+[ext_resource type="Material" uid="uid://cs5s3tb7vagsi" path="res://screens/shared_ui/premultiplied_canvas_material.tres" id="5_3nwnl"]
 
 [sub_resource type="Resource" id="Resource_4dtn6"]
 resource_local_to_scene = true
@@ -14,9 +15,11 @@ script = ExtResource("2_k5nxq")
 size = Vector2(1024, 1024)
 
 [node name="Landing" type="Window" node_paths=PackedStringArray("bar_button", "trading_button", "missions_button", "outfitter_button", "shipyard_button", "refuel_button", "landscape_image", "description_label", "bar_dialog")]
+transparent_bg = true
 title = "Mars"
 initial_position = 2
 size = Vector2i(900, 600)
+transparent = true
 content_scale_mode = 1
 script = ExtResource("1_h6plc")
 bar_button = NodePath("PanelContainer/VBoxContainer/HFlowContainer/BarButton")
@@ -64,6 +67,7 @@ theme_override_constants/margin_right = 0
 theme_override_constants/margin_bottom = 0
 
 [node name="DescriptionLabel" type="RichTextLabel" parent="PanelContainer/VBoxContainer/HBoxContainer/MarginContainer"]
+material = ExtResource("5_3nwnl")
 layout_mode = 2
 bbcode_enabled = true
 text = "As your ship descends through the atmosphere, a vast desert terrain unfolds before you. Towering red cliffs rise sharply from the barren plains, their jagged peaks reaching toward the sky. The ground is a mix of rusty red sand and scattered boulders, suggesting a harsh and unforgiving environment.

screens/landing/mission_computer_window.gd

@@ -6,6 +6,7 @@ class_name MissionComputerWindow
 @export var cost_label: Label
 @export var reward_label: Label
 @export var start_button: Button
+@export var premultiplied_canvas_material: CanvasItemMaterial
 
 var available_missions: Array[Mission]
 var mission_controller: MissionController

screens/landing/mission_computer_window.tscn

@@ -1,18 +1,22 @@
-[gd_scene load_steps=2 format=3 uid="uid://hos1wawl1u68"]
+[gd_scene load_steps=3 format=3 uid="uid://hos1wawl1u68"]
 
 [ext_resource type="Script" path="res://screens/landing/mission_computer_window.gd" id="1_m0je2"]
+[ext_resource type="Material" uid="uid://cs5s3tb7vagsi" path="res://screens/shared_ui/premultiplied_canvas_material.tres" id="2_pnrxm"]
 
 [node name="MissionComputerWindow" type="Window" node_paths=PackedStringArray("mission_list", "description_label", "cost_label", "reward_label", "start_button")]
+transparent_bg = true
 title = "Mission Computer"
 initial_position = 1
 size = Vector2i(700, 400)
 transient = true
+transparent = true
 script = ExtResource("1_m0je2")
 mission_list = NodePath("PanelContainer/VSplitContainer/Missions/ItemList")
 description_label = NodePath("PanelContainer/VSplitContainer/MarginContainer/HBoxContainer/DescriptionLabel")
 cost_label = NodePath("PanelContainer/VSplitContainer/MarginContainer/HBoxContainer/VBoxContainer/CostLabel")
 reward_label = NodePath("PanelContainer/VSplitContainer/MarginContainer/HBoxContainer/VBoxContainer/RewardLabel")
 start_button = NodePath("PanelContainer/VSplitContainer/MarginContainer/HBoxContainer/VBoxContainer/StartButton")
+premultiplied_canvas_material = ExtResource("2_pnrxm")
 
 [node name="PanelContainer" type="PanelContainer" parent="."]
 anchors_preset = 15
@@ -50,6 +54,7 @@ layout_mode = 2
 size_flags_vertical = 3
 
 [node name="DescriptionLabel" type="RichTextLabel" parent="PanelContainer/VSplitContainer/MarginContainer/HBoxContainer"]
+material = ExtResource("2_pnrxm")
 layout_mode = 2
 size_flags_horizontal = 3
 bbcode_enabled = true
@@ -60,11 +65,13 @@ layout_mode = 2
 size_flags_horizontal = 8
 
 [node name="CostHeading" type="Label" parent="PanelContainer/VSplitContainer/MarginContainer/HBoxContainer/VBoxContainer"]
+material = ExtResource("2_pnrxm")
 layout_mode = 2
 text = "Deposit"
 uppercase = true
 
 [node name="CostLabel" type="Label" parent="PanelContainer/VSplitContainer/MarginContainer/HBoxContainer/VBoxContainer"]
+material = ExtResource("2_pnrxm")
 layout_mode = 2
 text = "1235 "
 
@@ -73,11 +80,13 @@ custom_minimum_size = Vector2(2.08165e-12, 8)
 layout_mode = 2
 
 [node name="RewardHeading" type="Label" parent="PanelContainer/VSplitContainer/MarginContainer/HBoxContainer/VBoxContainer"]
+material = ExtResource("2_pnrxm")
 layout_mode = 2
 text = "Reward"
 uppercase = true
 
 [node name="RewardLabel" type="Label" parent="PanelContainer/VSplitContainer/MarginContainer/HBoxContainer/VBoxContainer"]
+material = ExtResource("2_pnrxm")
 layout_mode = 2
 text = "123 credits
 1234 lumins"

screens/landing/trading_window.gd

@@ -1,11 +1,11 @@
 extends Window
 class_name TradingWindow
 
-@export var market: Market
-
 @export var commodities_container: GridContainer
 @export var trade_buttons_scene: PackedScene
+@export var premultiplied_canvas_material: CanvasItemMaterial
 
+var market: Market
 var cargo_hold: CargoHold
 var bank_account: BankAccount
 
@@ -20,21 +20,25 @@ func _ready() -> void:
         var price := self.market.price(commodity)
 
         var name_label := Label.new()
+        name_label.material = self.premultiplied_canvas_material
         name_label.text = commodity.name
         name_label.size_flags_horizontal = Control.SIZE_EXPAND_FILL
         self.commodities_container.add_child(name_label)
 
         var price_label := Label.new()
+        price_label.material = self.premultiplied_canvas_material
         price_label.text = market.money.amount_as_string(price)
         price_label.horizontal_alignment = HORIZONTAL_ALIGNMENT_RIGHT
         self.commodities_container.add_child(price_label)
 
         var volume_label := Label.new()
+        volume_label.material = self.premultiplied_canvas_material
         volume_label.text = "%s m³" % commodity.volume
         volume_label.horizontal_alignment = HORIZONTAL_ALIGNMENT_RIGHT
         self.commodities_container.add_child(volume_label)
 
         var quantity_label := Label.new()
+        quantity_label.material = self.premultiplied_canvas_material
         self._quantity_labels[commodity] = quantity_label
         self.commodities_container.add_child(quantity_label)
 

screens/landing/trading_window.tscn

@@ -1,16 +1,20 @@
-[gd_scene load_steps=3 format=3 uid="uid://dpihtkm0u6kmb"]
+[gd_scene load_steps=4 format=3 uid="uid://dpihtkm0u6kmb"]
 
 [ext_resource type="Script" path="res://screens/landing/trading_window.gd" id="1_b1kwq"]
+[ext_resource type="Material" uid="uid://cs5s3tb7vagsi" path="res://screens/shared_ui/premultiplied_canvas_material.tres" id="3_13cst"]
 [ext_resource type="PackedScene" uid="uid://b04gt254vhyra" path="res://screens/landing/trade_buttons.tscn" id="17_j3rf1"]
 
 [node name="TradingWindow" type="Window" node_paths=PackedStringArray("commodities_container")]
+transparent_bg = true
 title = "Trade Computer"
 initial_position = 1
 size = Vector2i(600, 300)
 transient = true
+transparent = true
 script = ExtResource("1_b1kwq")
 commodities_container = NodePath("PanelContainer/Commodities/MarginContainer/ScrollContainer/GridContainer")
 trade_buttons_scene = ExtResource("17_j3rf1")
+premultiplied_canvas_material = ExtResource("3_13cst")
 
 [node name="PanelContainer" type="PanelContainer" parent="."]
 anchors_preset = 15
@@ -42,20 +46,24 @@ theme_override_constants/v_separation = 0
 columns = 5
 
 [node name="CommodityHeader" type="Label" parent="PanelContainer/Commodities/MarginContainer/ScrollContainer/GridContainer"]
+material = ExtResource("3_13cst")
 layout_mode = 2
 text = "Commodity"
 uppercase = true
 
 [node name="PriceHeader" type="Label" parent="PanelContainer/Commodities/MarginContainer/ScrollContainer/GridContainer"]
+material = ExtResource("3_13cst")
 layout_mode = 2
 text = "Price"
 uppercase = true
 
 [node name="VolumeHeader" type="Label" parent="PanelContainer/Commodities/MarginContainer/ScrollContainer/GridContainer"]
+material = ExtResource("3_13cst")
 layout_mode = 2
 text = "VOL"
 
 [node name="CargoHoldHeader" type="Label" parent="PanelContainer/Commodities/MarginContainer/ScrollContainer/GridContainer"]
+material = ExtResource("3_13cst")
 layout_mode = 2
 text = "Cargo"
 uppercase = true