Skip to content

Commit 282324f

Browse files
Elfi0KuhndorfElfi0Kuhndorf
committed
fix: cleaning up UI USS, creating general USS for reusability and adding hover state for menuButtons
1 parent 90d7176 commit 282324f

File tree

4 files changed

+66
-69
lines changed

4 files changed

+66
-69
lines changed

‎Assets/Prefabs/UI/UIToolkit/USS/GeneralUI.uss‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
.menuButton {
2+
background-image: url("project://database/Assets/Textures/UI/ui_btn_blank.png?fileID=2800000&guid=41948b4cc6087644b983dce55b466d50&type=3#ui_btn_blank");
3+
background-size: 435px 75px;
4+
-unity-font-definition: url("project://database/Assets/TextMesh%20Pro/Fonts/Bungee-Regular.ttf?fileID=12800000&guid=b8a509d3b3ce60847bbafb5a38462ecf&type=3#Bungee-Regular");
5+
color: rgb(247, 213, 32);
6+
width: 320px;
7+
height: 65px;
8+
align-self: center;
9+
font-size: 44px;
10+
margin-top: 10px;
11+
}
12+
13+
.menuButton:hover {
14+
background-image: url("project://database/Assets/Textures/UI/ui_btn_blank.png?fileID=2800000&guid=41948b4cc6087644b983dce55b466d50&type=3#ui_btn_blank");
15+
background-size: 435px 75px;
16+
-unity-font-definition: url("project://database/Assets/TextMesh%20Pro/Fonts/Bungee-Regular.ttf?fileID=12800000&guid=b8a509d3b3ce60847bbafb5a38462ecf&type=3#Bungee-Regular");
17+
color: rgb(247, 213, 32);
18+
width: 320px;
19+
height: 65px;
20+
align-self: center;
21+
font-size: 44px;
22+
margin-top: 10px;
23+
background-color: rgb(208, 232, 255);
24+
-unity-background-image-tint-color: rgba(255, 255, 255, 0.42);
25+
}
26+
27+
.exitButton {
28+
background-color: rgba(188, 188, 188, 0);
29+
background-image: url("project://database/Assets/Textures/UI/ui_btn_exit.png?fileID=2800000&guid=60ca69669387e034393c7f486bf3ae19&type=3#ui_btn_exit");
30+
width: 100px;
31+
height: 100px;
32+
border-top-width: 0;
33+
border-right-width: 0;
34+
border-bottom-width: 0;
35+
border-left-width: 0;
36+
}
37+
38+
.settingsButton {
39+
background-image: url("project://database/Assets/Textures/UI/ui_sound_settings.png?fileID=2800000&guid=66a470aa734e32040b424353a0f0de39&type=3#ui_sound_settings");
40+
width: 100px;
41+
height: 100px;
42+
background-size: 100% 100%;
43+
border-top-width: 0;
44+
border-right-width: 0;
45+
border-bottom-width: 0;
46+
border-left-width: 0;
47+
background-color: rgba(0, 0, 0, 0);
48+
}

‎Assets/Prefabs/UI/UIToolkit/USS/GeneralUI.uss.meta‎

Lines changed: 11 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎Assets/Prefabs/UI/UIToolkit/USS/SettingsPanelCanvas.uss‎

Lines changed: 1 addition & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,6 @@
1-
.simpleButton {
2-
width: 100px;
3-
height: 100px;
4-
margin-top: 8px;
5-
margin-right: 8px;
6-
margin-bottom: 8px;
7-
margin-left: 8px;
8-
border-top-width: 0;
9-
border-right-width: 0;
10-
border-bottom-width: 0;
11-
border-left-width: 0;
12-
background-color: rgba(0, 0, 0, 0);
13-
}
14-
15-
.settingsButton {
16-
background-image: url("project://database/Assets/Textures/UI/ui_sound_settings.png?fileID=2800000&guid=66a470aa734e32040b424353a0f0de39&type=3#ui_sound_settings");
17-
}
18-
19-
.ExitButton {
20-
background-color: rgba(188, 188, 188, 0);
21-
border-top-width: 0;
22-
border-right-width: 0;
23-
border-bottom-width: 0;
24-
border-left-width: 0;
25-
background-image: url("project://database/Assets/Textures/UI/ui_btn_exit.png?fileID=2800000&guid=60ca69669387e034393c7f486bf3ae19&type=3#ui_btn_exit");
26-
width: 100px;
27-
height: 100px;
28-
}
29-
301
.slider .unity-base-slider__dragger {
312
background-color: rgb(253, 247, 2);
323
border-radius: 6px;
33-
border-width: 0;
344
height: 70%;
355
top: 20px;
366
}
@@ -40,7 +10,6 @@
4010
border-radius: 5px;
4111
height: 14px;
4212
border-color: transparent;
43-
-unity-text-outline-color: rgb(0, 0, 0);
4413
border-top-left-radius: 8px;
4514
border-top-right-radius: 8px;
4615
border-bottom-right-radius: 8px;
@@ -77,45 +46,13 @@
7746
border-top-left-radius: 4px;
7847
}
7948

80-
.menuButton {
81-
background-image: url("project://database/Assets/Textures/UI/ui_btn_blank.png?fileID=2800000&guid=41948b4cc6087644b983dce55b466d50&type=3#ui_btn_blank");
82-
background-size: 408px 90px;
83-
-unity-font-definition: url("project://database/Assets/TextMesh%20Pro/Fonts/Bungee-Regular.ttf?fileID=12800000&guid=b8a509d3b3ce60847bbafb5a38462ecf&type=3#Bungee-Regular");
84-
color: rgb(247, 213, 32);
85-
width: 374px;
86-
height: 90px;
87-
align-self: center;
88-
font-size: 44px;
89-
border-top-width: 0;
90-
border-right-width: 0;
91-
border-bottom-width: 0;
92-
border-left-width: 0;
93-
margin-bottom: 30px;
94-
}
95-
9649
.panel {
9750
background-image: url("project://database/Assets/Textures/UI/ui_dialog.png?fileID=2800000&guid=222f76e9081efb6428be38c0e10f7bde&type=3#ui_dialog");
9851
-unity-background-image-tint-color: rgba(255, 255, 255, 0.75);
9952
background-size: 100% 100%;
100-
width: 420px;
53+
width: 415px;
10154
height: 376px;
10255
position: absolute;
10356
top: -156px;
10457
right: 111px;
10558
}
106-
107-
.menuButton {
108-
background-image: url("project://database/Assets/Textures/UI/ui_btn_blank.png?fileID=2800000&guid=41948b4cc6087644b983dce55b466d50&type=3#ui_btn_blank");
109-
background-size: 435px 75px;
110-
-unity-font-definition: url("project://database/Assets/TextMesh%20Pro/Fonts/Bungee-Regular.ttf?fileID=12800000&guid=b8a509d3b3ce60847bbafb5a38462ecf&type=3#Bungee-Regular");
111-
color: rgb(247, 213, 32);
112-
width: 320px;
113-
height: 65px;
114-
align-self: center;
115-
font-size: 44px;
116-
margin-top: 10px;
117-
border-top-width: 0;
118-
border-right-width: 0;
119-
border-bottom-width: 0;
120-
border-left-width: 0;
121-
}

‎Assets/Prefabs/UI/UIToolkit/UXML/SettingsPanelCanvas.uxml‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,21 @@
11
<engine:UXML xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:engine="UnityEngine.UIElements" xmlns:editor="UnityEditor.UIElements" noNamespaceSchemaLocation="../../../UIElementsSchema/UIElements.xsd" editor-extension-mode="False">
22
<Style src="project://database/Assets/Prefabs/UI/UIToolkit/USS/SettingsPanelCanvas.uss?fileID=7433441132597879392&amp;guid=d5e6eac383531594b983eb9318a78a8a&amp;type=3#SettingsPanelCanvas" />
3+
<Style src="project://database/Assets/Prefabs/UI/UIToolkit/USS/GeneralUI.uss?fileID=7433441132597879392&amp;guid=36bef7d47f6ca284f8a33439946d6dfe&amp;type=3#GeneralUI" />
34
<engine:VisualElement name="buttonRoot" style="height: 161px; width: 118px; align-items: center; transform-origin: right top; right: -90%; top: 0;">
4-
<engine:Button name="quitButton" class="simpleButton ExitButton" style="background-size: 70% 70%; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0;" />
5-
<engine:Button name="settingsButton" class="simpleButton settingsButton" style="background-size: 70% 70%; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0;" />
5+
<engine:Button name="quitButton" class="simpleButton ExitButton exitButton" style="background-size: 70% 70%; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0;" />
6+
<engine:Button name="settingsButton" class="settingsButton" style="background-size: 70% 70%; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0;" />
67
</engine:VisualElement>
78
<engine:VisualElement name="root" style="flex-grow: 1;">
8-
<engine:VisualElement name="settingsPanelRoot" class="panel" style="translate: -472px 0;">
9-
<engine:Button name="closeButton" class="ExitButton" style="position: absolute; top: -10px; right: -64px; background-size: 90% 90%; visibility: visible; overflow: visible;" />
9+
<engine:VisualElement name="settingsPanelRoot" class="panel" style="scale: 0.8 0.8;">
10+
<engine:Button name="closeButton" class="ExitButton exitButton" style="position: absolute; top: -10px; right: -64px; background-size: 90% 90%; visibility: visible; overflow: visible;" />
1011
<engine:Label text="Settings" name="settingsLabel" class="settingsLabel label" style="margin-bottom: 8px;" />
1112
<engine:Label text="Overall Volume" name="masterVolumeLabel" class="slider" style="translate: 7.5% 50%; transform-origin: center 40%;" />
1213
<engine:Slider high-value="1" name="masterVolume" fill="true" show-input-field="false" enabled="true" inverted="false" value="0.8" class="slider" style="-unity-background-image-tint-color: rgba(255, 4, 4, 0.96); width: 85%; translate: 7.5% 0; border-top-left-radius: 8px; border-top-right-radius: 8px; border-bottom-right-radius: 8px; border-bottom-left-radius: 8px;" />
1314
<engine:Label text="Music Volume" name="musicVolumeLabel" class="slider" style="translate: 7.5% 50%; transform-origin: center 40%;" />
1415
<engine:Slider high-value="1" name="musicVolume" enabled="true" show-input-field="false" fill="true" low-value="0" value="0.5" class="slider" style="width: 85%; translate: 7.5% 0;" />
1516
<engine:Button text="Low" name="qualityButton" class="menuButton" style="margin-top: 25px; background-size: 321px 65px;" />
1617
</engine:VisualElement>
17-
<engine:VisualElement name="quitPanelRoot" class="panel" style="flex-grow: 1; transform-origin: center;">
18+
<engine:VisualElement name="quitPanelRoot" class="panel" style="flex-grow: 1; transform-origin: center; scale: 0.8 0.8;">
1819
<engine:Label text="Return To Menu?" name="returnLabel" class="settingsLabel label" />
1920
<engine:Button text="Confirm" name="confirmButton" class="menuButton" style="margin-top: 30px; background-size: 321px 65px;" />
2021
<engine:Button text="Cancel" name="cancelButton" class="menuButton" style="background-size: 321px 65px;" />

0 commit comments

Comments
 (0)