aboutsummaryrefslogtreecommitdiffstats
path: root/code/ui/mainmenu
diff options
context:
space:
mode:
Diffstat (limited to 'code/ui/mainmenu')
-rw-r--r--code/ui/mainmenu/LoadingScreen.razor19
-rw-r--r--code/ui/mainmenu/LoadingScreen.razor.scss161
-rw-r--r--code/ui/mainmenu/MainMenu.razor9
-rw-r--r--code/ui/mainmenu/MainMenu.razor.scss361
4 files changed, 249 insertions, 301 deletions
diff --git a/code/ui/mainmenu/LoadingScreen.razor b/code/ui/mainmenu/LoadingScreen.razor
index 9e3e5ae..5954065 100644
--- a/code/ui/mainmenu/LoadingScreen.razor
+++ b/code/ui/mainmenu/LoadingScreen.razor
@@ -1,11 +1,10 @@
-@using System
-@using Sandbox;
-@using Sandbox.UI;
-@using Sandbox.Menu;
@attribute [StyleSheet]
-@inherits RootPanel
+@inherits Sandbox.UI.RootPanel
@namespace DmMenu
-@implements Sandbox.Menu.ILoadingScreenPanel
+@using Sandbox
+@using Sandbox.Menu
+@using Sandbox.UI
+@implements ILoadingScreenPanel
<root class="loadingpanel">
@@ -16,8 +15,10 @@
{
<div class="progress">
<div class="bar" style="width: @(Progress.Percent)%;"></div>
- <div class="text-left">@(Progress.Percent.ToString("0") )%</div>
- <div class="text-right"><span>@(Progress.Mbps.ToString("0"))</span><span class="unit">Mbps</span></div>
+ <div class="text-left">@(Progress.Percent.ToString("0"))%</div>
+ <div class="text-right">
+ <span>@(Progress.Mbps.ToString("0"))</span><span class="unit">Mbps</span>
+ </div>
</div>
}
@@ -33,7 +34,7 @@
{
public LoadingProgress Progress;
- public void OnLoadingProgress( LoadingProgress progress )
+ public void OnLoadingProgress(LoadingProgress progress)
{
Progress = progress;
StateHasChanged();
diff --git a/code/ui/mainmenu/LoadingScreen.razor.scss b/code/ui/mainmenu/LoadingScreen.razor.scss
index 894d259..026bafa 100644
--- a/code/ui/mainmenu/LoadingScreen.razor.scss
+++ b/code/ui/mainmenu/LoadingScreen.razor.scss
@@ -1,101 +1,88 @@
-.loadingpanel
-{
- background-image: url( "menu/boxes.webm" );
- background-position: center;
- background-size: cover;
- background-tint: #555;
- width: 100%;
- height: 100%;
- color: white;
- padding: 100px;
- justify-content: center;
- align-items: center;
- flex-direction: column;
- font-family: Poppins;
- pointer-events: all;
- color: #ccc;
+.loadingpanel {
+ background-image: url("menu/boxes.webm");
+ background-position: center;
+ background-size: cover;
+ background-tint: #555;
+ width: 100%;
+ height: 100%;
+ color: white;
+ padding: 100px;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+ font-family: Poppins;
+ pointer-events: all;
+ color: #ccc;
- > .title
- {
- font-size: 80px;
- font-weight: bolder;
- }
+ > .title {
+ font-size: 80px;
+ font-weight: bolder;
+ }
- > .subtitle
- {
- font-size: 30px;
- color: #aaa;
- font-weight: 200;
- }
+ > .subtitle {
+ font-size: 30px;
+ color: #aaa;
+ font-weight: 200;
+ }
- > .controls
- {
- position: absolute;
- bottom: 100px;
- right: 200px;
+ > .controls {
+ position: absolute;
+ bottom: 100px;
+ right: 200px;
- .button
- {
- font-size: 20px;
- padding: 10px 50px;
- background-color: #666;
- color: #111;
- font-weight: bold;
- cursor: pointer;
+ .button {
+ font-size: 20px;
+ padding: 10px 50px;
+ background-color: #666;
+ color: #111;
+ font-weight: bold;
+ cursor: pointer;
- &:hover
- {
- background-color: #888;
- }
- }
- }
+ &:hover {
+ background-color: #888;
+ }
+ }
+ }
- > .progress
- {
- margin: 50px 0px;
- background-color: #0003;
- width: 500px;
- border-radius: 5px;
- overflow: hidden;
+ > .progress {
+ margin: 50px 0px;
+ background-color: #0003;
+ width: 500px;
+ border-radius: 5px;
+ overflow: hidden;
- .bar
- {
- background-color: #fff1;
- position: absolute;
- height: 100%;
- }
+ .bar {
+ background-color: #fff1;
+ position: absolute;
+ height: 100%;
+ }
- .text-left
- {
- flex-grow: 1;
- flex-shrink: 0;
- }
+ .text-left {
+ flex-grow: 1;
+ flex-shrink: 0;
+ }
- .text-right
- {
- flex-shrink: 0;
- }
+ .text-right {
+ flex-shrink: 0;
+ }
- .text-left, .text-right
- {
- padding: 5px 20px;
- white-space: nowrap;
- font-weight: bold;
- opacity: 0.2;
- font-size: 20px;
- align-items: flex-end;
+ .text-left, .text-right {
+ padding: 5px 20px;
+ white-space: nowrap;
+ font-weight: bold;
+ opacity: 0.2;
+ font-size: 20px;
+ align-items: flex-end;
- .unit
- {
- font-size: 15px;
- opacity: 0.5;
- }
- }
- }
+ .unit {
+ font-size: 15px;
+ opacity: 0.5;
+ }
+ }
+ }
}
-choosemappage.navigator-body
-{
- margin: 0;
- padding: 0;
+choosemappage.navigator-body {
+ margin: 0;
+ padding: 0;
} \ No newline at end of file
diff --git a/code/ui/mainmenu/MainMenu.razor b/code/ui/mainmenu/MainMenu.razor
index ccdf17a..a19cf56 100644
--- a/code/ui/mainmenu/MainMenu.razor
+++ b/code/ui/mainmenu/MainMenu.razor
@@ -1,8 +1,5 @@
-@using System
-@using Sandbox;
-@using Sandbox.MenuSystem;
-@using Sandbox.UI;
-@attribute [StyleSheet]
+@attribute [StyleSheet]
+@using Sandbox.UI
@inherits Sandbox.UI.GameMenu.DefaultGameMenu
<style>
@@ -27,4 +24,4 @@
<div class="navigator-canvas" slot="navigator-canvas"></div>
-</root>
+</root> \ No newline at end of file
diff --git a/code/ui/mainmenu/MainMenu.razor.scss b/code/ui/mainmenu/MainMenu.razor.scss
index cbedff5..4cd97f8 100644
--- a/code/ui/mainmenu/MainMenu.razor.scss
+++ b/code/ui/mainmenu/MainMenu.razor.scss
@@ -1,257 +1,220 @@
-.gamemainmenu
-{
- background-image: url( "menu/boxes.webm" );
- background-position: center;
- background-size: cover;
- opacity: 1;
- flex-direction: column;
- font-size: 25px;
- width: 100%;
- height: 100%;
- position: absolute;
- transition: all 0.3s ease-out;
- color: white;
+.gamemainmenu {
+ background-image: url("menu/boxes.webm");
+ background-position: center;
+ background-size: cover;
+ opacity: 1;
+ flex-direction: column;
+ font-size: 25px;
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ transition: all 0.3s ease-out;
+ color: white;
- &:intro
- {
- opacity: 0;
- transform: scaleX( 1.1 );
- }
+ &:intro {
+ opacity: 0;
+ transform: scaleX(1.1);
+ }
- &.ingame
- {
- background-color: #151313ee;
- background-image: none;
- }
+ &.ingame {
+ background-color: #151313ee;
+ background-image: none;
+ }
}
-.button, .block
-{
- padding: 4px 16px;
+.button, .block {
+ padding: 4px 16px;
- opacity: 0.8;
+ opacity: 0.8;
- font-size: 28px;
- font-family: Poppins;
- font-weight: 700;
- flex-shrink: 0;
+ font-size: 28px;
+ font-family: Poppins;
+ font-weight: 700;
+ flex-shrink: 0;
}
-.button
-{
- background-color: #000a;
- cursor: pointer;
+.button {
+ background-color: #000a;
+ cursor: pointer;
- &:hover
- {
- opacity: 1;
- }
+ &:hover {
+ opacity: 1;
+ }
- &:active
- {
- left: 2px;
- top: 3px;
- }
+ &:active {
+ left: 2px;
+ top: 3px;
+ }
}
-.gamemainmenu .navigator-canvas
-{
- height: 100%;
- flex-grow: 1;
- flex-shrink: 0;
- backdrop-filter: blur( 20px );
- padding: 0px 100px;
+.gamemainmenu .navigator-canvas {
+ height: 100%;
+ flex-grow: 1;
+ flex-shrink: 0;
+ backdrop-filter: blur(20px);
+ padding: 0px 100px;
- .navigator-body
- {
- width: 100%;
- height: 100%;
- flex-direction: column;
- padding: 100px 0px;
- }
+ .navigator-body {
+ width: 100%;
+ height: 100%;
+ flex-direction: column;
+ padding: 100px 0px;
+ }
}
-section
-{
- flex-direction: column;
- flex-grow: 1;
- flex-shrink: 0;
+section {
+ flex-direction: column;
+ flex-grow: 1;
+ flex-shrink: 0;
- &.nogrow
- {
- flex-grow: 0;
- }
+ &.nogrow {
+ flex-grow: 0;
+ }
- &.box
- {
- background-color: rgba( black, 0.5 );
-
- }
-}
+ &.box {
+ background-color: rgba(black, 0.5);
-.scroll
-{
- overflow-y: scroll;
- flex-shrink: 1;
- flex-grow: 0;
+ }
}
-h2
-{
- font-family: poppins;
- font-weight: 400;
- opacity: 0.2;
- margin-bottom: 16px;
- flex-shrink: 0;
+.scroll {
+ overflow-y: scroll;
+ flex-shrink: 1;
+ flex-grow: 0;
}
-.member-list
-{
- overflow-x: scroll;
- padding: 20px;
- gap: 8px;
+h2 {
+ font-family: poppins;
+ font-weight: 400;
+ opacity: 0.2;
+ margin-bottom: 16px;
+ flex-shrink: 0;
}
+.member-list {
+ overflow-x: scroll;
+ padding: 20px;
+ gap: 8px;
+}
-.hidden
-{
- display: none;
+.hidden {
+ display: none;
}
-.inset
-{
- overflow: hidden;
+.inset {
+ overflow: hidden;
}
-.layout
-{
- flex-direction: column;
+.layout {
+ flex-direction: column;
- > *
- {
- flex-shrink: 0;
- }
+ > * {
+ flex-shrink: 0;
+ }
- > .body
- {
- flex-grow: 1;
- flex-shrink: 0;
- flex-direction: column;
+ > .body {
+ flex-grow: 1;
+ flex-shrink: 0;
+ flex-direction: column;
- &.columned
- {
- flex-direction: row;
- flex-grow: 1;
- flex-shrink: 1;
- justify-content: space-around;
- align-items: center;
+ &.columned {
+ flex-direction: row;
+ flex-grow: 1;
+ flex-shrink: 1;
+ justify-content: space-around;
+ align-items: center;
- > .left
- {
- flex-grow: 0;
- flex-shrink: 0;
- overflow-y: scroll;
- flex-direction: column;
- }
+ > .left {
+ flex-grow: 0;
+ flex-shrink: 0;
+ overflow-y: scroll;
+ flex-direction: column;
+ }
- > .right
- {
- flex-grow: 0;
- flex-shrink: 0;
- flex-direction: column;
- }
- }
- }
+ > .right {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-direction: column;
+ }
+ }
+ }
}
-.navbar
-{
- padding: 32px 0;
- flex-shrink: 0;
+.navbar {
+ padding: 32px 0;
+ flex-shrink: 0;
- .right, .left
- {
- flex-grow: 0;
- flex-shrink: 0;
- gap: 10px;
- }
+ .right, .left {
+ flex-grow: 0;
+ flex-shrink: 0;
+ gap: 10px;
+ }
- .left
- {
- flex-grow: 1;
- }
+ .left {
+ flex-grow: 1;
+ }
}
$form-row-height: 48px;
-.form
-{
- flex-direction: column;
- flex-shrink: 0;
- flex-grow: 0;
- gap: 2px;
- margin-bottom: 50px;
+.form {
+ flex-direction: column;
+ flex-shrink: 0;
+ flex-grow: 0;
+ gap: 2px;
+ margin-bottom: 50px;
- > .form-group
- {
- flex-direction: column;
- flex-shrink: 0;
- margin-bottom: 20px;
+ > .form-group {
+ flex-direction: column;
+ flex-shrink: 0;
+ margin-bottom: 20px;
- > .form-label
- {
- opacity: 0.5;
- height: $form-row-height;
- font-size: 20px;
- white-space: nowrap;
- }
- }
+ > .form-label {
+ opacity: 0.5;
+ height: $form-row-height;
+ font-size: 20px;
+ white-space: nowrap;
+ }
+ }
}
-.form .form-control
-{
- flex-grow: 1;
+.form .form-control {
+ flex-grow: 1;
+
+ SliderControl, > DropDown, > textentry, SliderControl textentry {
+ flex-grow: 1;
+ font-size: 20px;
+ height: $form-row-height;
+ }
- SliderControl, > DropDown, > textentry, SliderControl textentry
- {
- flex-grow: 1;
- font-size: 20px;
- height: $form-row-height;
- }
+ > textentry, SliderControl textentry {
+ flex-grow: 1;
+ background-color: #ffffff05;
+ height: $form-row-height;
+ color: #aaa;
+ width: 600px;
+ border-radius: 0;
+ padding: 5px;
- > textentry, SliderControl textentry
- {
- flex-grow: 1;
- background-color: #ffffff05;
- height: $form-row-height;
- color: #aaa;
- width: 600px;
- border-radius: 0;
- padding: 5px;
+ &:hover {
+ background-color: #ffffff11;
+ }
- &:hover
- {
- background-color: #ffffff11;
- }
+ &:focus {
+ background-color: #ffffff22;
+ color: #fff;
+ }
+ }
- &:focus
- {
- background-color: #ffffff22;
- color: #fff;
- }
- }
+ SliderControl {
- SliderControl
- {
-
- }
+ }
}
-choosemappage.navigator-body
-{
- padding: 0;
+choosemappage.navigator-body {
+ padding: 0;
} \ No newline at end of file
generated by cgit v1.2.3-70-g09d2 (git 2.51.2) at 2025-11-25 06:42:32 +0000