No customization, no bullsh*t.
The simplest, laziest, bare-bones crosshair you could ever make.
Making this because i gave up learning razor UI and spent 3 hours searching for a simple implementation online (don't judge). and figured other people don't want to waste those same 3 hours.

Special Thanks to DarkRP for this implementation!

1-In your game's scene:
Rght-click the scene panel -> Create Child -> UI -> Screen
2-In the new Screen Component's Inspector: Add Component -> New Component -> Razor Component -> name it "Hud.razor" or something else of your choice, and save somewhere (remember where you saved it!)
3-Open the folder where you saved it

In the new folder you opened there will be 2 new files. one with ".razor" extention and the ther with ".scss" extention.

Open the one with the .razor extention, delete all of its content, and add the following code:

@using Sandbox;
@using Sandbox.UI;
@inherits PanelComponent

<root>
<div class="crosshair"/>
</root>

@code
{

[Property, TextArea] public string MyStringValue { get; set; } = "Hello World!";

/// <summary>
/// the hash determines if the system should be rebuilt. If it changes, it will be rebuilt
/// </summary>
protected override int BuildHash() => System.HashCode.Combine( MyStringValue );
}

now open the file with the ".scss" extention, delete all of its content, and add the following code:
Note: the word "Hud" should be changed to your component's name if you changed it


Hud {

.crosshair {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 0.3vw;
height: 0.3vw;
background-color: rgb(255, 255, 0);
border-radius: 50%;
pointer-events: none;
}
}

can't believe this crosshair's implementation took me 3 hours (to steal from someone else)

either i'm stupid or