From 71db52c5443a7bf82d9a23a770994a42b043be04 Mon Sep 17 00:00:00 2001 From: Leonardo Bishop Date: Thu, 27 Jul 2023 22:11:31 +0100 Subject: Initial commit --- code/ui/mainmenu/LoadingScreen.razor | 41 +++++ code/ui/mainmenu/LoadingScreen.razor.scss | 101 ++++++++++++ code/ui/mainmenu/MainMenu.razor | 30 ++++ code/ui/mainmenu/MainMenu.razor.scss | 257 ++++++++++++++++++++++++++++++ 4 files changed, 429 insertions(+) create mode 100644 code/ui/mainmenu/LoadingScreen.razor create mode 100644 code/ui/mainmenu/LoadingScreen.razor.scss create mode 100644 code/ui/mainmenu/MainMenu.razor create mode 100644 code/ui/mainmenu/MainMenu.razor.scss (limited to 'code/ui/mainmenu') diff --git a/code/ui/mainmenu/LoadingScreen.razor b/code/ui/mainmenu/LoadingScreen.razor new file mode 100644 index 0000000..9e3e5ae --- /dev/null +++ b/code/ui/mainmenu/LoadingScreen.razor @@ -0,0 +1,41 @@ +@using System +@using Sandbox; +@using Sandbox.UI; +@using Sandbox.Menu; +@attribute [StyleSheet] +@inherits RootPanel +@namespace DmMenu +@implements Sandbox.Menu.ILoadingScreenPanel + + + +
LOADING
+
@Progress.Title
+ + @if (Progress.Fraction > 0) + { +
+
+
@(Progress.Percent.ToString("0") )%
+
@(Progress.Mbps.ToString("0"))Mbps
+
+ } + +
+
+ Cancel +
+
+ + + +@code +{ + public LoadingProgress Progress; + + public void OnLoadingProgress( LoadingProgress progress ) + { + Progress = progress; + StateHasChanged(); + } +} \ No newline at end of file diff --git a/code/ui/mainmenu/LoadingScreen.razor.scss b/code/ui/mainmenu/LoadingScreen.razor.scss new file mode 100644 index 0000000..894d259 --- /dev/null +++ b/code/ui/mainmenu/LoadingScreen.razor.scss @@ -0,0 +1,101 @@ +.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; + } + + > .subtitle + { + font-size: 30px; + color: #aaa; + font-weight: 200; + } + + > .controls + { + position: absolute; + bottom: 100px; + right: 200px; + + .button + { + font-size: 20px; + padding: 10px 50px; + background-color: #666; + color: #111; + font-weight: bold; + cursor: pointer; + + &:hover + { + background-color: #888; + } + } + } + + > .progress + { + margin: 50px 0px; + background-color: #0003; + width: 500px; + border-radius: 5px; + overflow: hidden; + + .bar + { + background-color: #fff1; + position: absolute; + height: 100%; + } + + .text-left + { + flex-grow: 1; + 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; + + .unit + { + font-size: 15px; + opacity: 0.5; + } + } + } +} + +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 new file mode 100644 index 0000000..ffca318 --- /dev/null +++ b/code/ui/mainmenu/MainMenu.razor @@ -0,0 +1,30 @@ +@using System +@using Sandbox; +@using Sandbox.MenuSystem; +@using Sandbox.UI; +@attribute [StyleSheet] +@inherits Sandbox.UI.GameMenu.DefaultGameMenu + + + + + +
Work in progress! Expect bugs, missing features, and general weird-ness. Things *will* break.
+ +
+ + + diff --git a/code/ui/mainmenu/MainMenu.razor.scss b/code/ui/mainmenu/MainMenu.razor.scss new file mode 100644 index 0000000..cbedff5 --- /dev/null +++ b/code/ui/mainmenu/MainMenu.razor.scss @@ -0,0 +1,257 @@ + +.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 ); + } + + &.ingame + { + background-color: #151313ee; + background-image: none; + } + +} + +.button, .block +{ + padding: 4px 16px; + + opacity: 0.8; + + font-size: 28px; + font-family: Poppins; + font-weight: 700; + flex-shrink: 0; +} + +.button +{ + background-color: #000a; + cursor: pointer; + + &:hover + { + opacity: 1; + } + + &:active + { + left: 2px; + top: 3px; + } +} + + +.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; + } +} + +section +{ + flex-direction: column; + flex-grow: 1; + flex-shrink: 0; + + &.nogrow + { + flex-grow: 0; + } + + &.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; +} + +.member-list +{ + overflow-x: scroll; + padding: 20px; + gap: 8px; +} + + + +.hidden +{ + display: none; +} + +.inset +{ + overflow: hidden; +} + +.layout +{ + flex-direction: column; + + > * + { + flex-shrink: 0; + } + + > .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; + + > .left + { + flex-grow: 0; + flex-shrink: 0; + overflow-y: scroll; + flex-direction: column; + } + + > .right + { + flex-grow: 0; + flex-shrink: 0; + flex-direction: column; + } + } + } +} + +.navbar +{ + padding: 32px 0; + flex-shrink: 0; + + .right, .left + { + flex-grow: 0; + flex-shrink: 0; + gap: 10px; + } + + .left + { + flex-grow: 1; + } +} + +$form-row-height: 48px; + +.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-label + { + opacity: 0.5; + height: $form-row-height; + font-size: 20px; + white-space: nowrap; + } + } +} + +.form .form-control +{ + flex-grow: 1; + + 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; + + &:hover + { + background-color: #ffffff11; + } + + &:focus + { + background-color: #ffffff22; + color: #fff; + } + } + + SliderControl + { + + } +} + +choosemappage.navigator-body +{ + padding: 0; +} \ No newline at end of file -- cgit v1.2.3-70-g09d2