diff --git a/LANCommander.Server/Styles/_button.scss b/LANCommander.Server/Styles/_button.scss
new file mode 100644
index 00000000..56e59ec7
--- /dev/null
+++ b/LANCommander.Server/Styles/_button.scss
@@ -0,0 +1,5 @@
+label.ant-btn-icon-only {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+}
\ No newline at end of file
diff --git a/LANCommander.Server/Styles/_card.scss b/LANCommander.Server/Styles/_card.scss
new file mode 100644
index 00000000..d8a396c9
--- /dev/null
+++ b/LANCommander.Server/Styles/_card.scss
@@ -0,0 +1,3 @@
+.ant-card .ant-form > .ant-form-item:last-child {
+ margin-bottom: 0;
+}
\ No newline at end of file
diff --git a/LANCommander.Server/Styles/_dashboard.scss b/LANCommander.Server/Styles/_dashboard.scss
new file mode 100644
index 00000000..cbdf5c14
--- /dev/null
+++ b/LANCommander.Server/Styles/_dashboard.scss
@@ -0,0 +1,3 @@
+.dashboard-chart > div {
+ background: none !important;
+}
\ No newline at end of file
diff --git a/LANCommander.Server/Styles/_file-picker.scss b/LANCommander.Server/Styles/_file-picker.scss
new file mode 100644
index 00000000..b187cf5c
--- /dev/null
+++ b/LANCommander.Server/Styles/_file-picker.scss
@@ -0,0 +1,11 @@
+.file-picker-dialog .ant-modal-body {
+ padding: 0;
+}
+
+.file-picker-dialog .file-manager {
+ height: calc(100vh - 55px - 53px);
+}
+
+.file-manager-selector-hidden .ant-radio-wrapper {
+ display: none;
+}
\ No newline at end of file
diff --git a/LANCommander.Server/Styles/_game-metadata-lookup.scss b/LANCommander.Server/Styles/_game-metadata-lookup.scss
new file mode 100644
index 00000000..cb09146f
--- /dev/null
+++ b/LANCommander.Server/Styles/_game-metadata-lookup.scss
@@ -0,0 +1,7 @@
+.game-metadata-lookup-modal .ant-modal-body {
+ padding: 0;
+}
+
+.game-metadata-lookup-modal tbody tr {
+ cursor: pointer;
+}
\ No newline at end of file
diff --git a/LANCommander.Server/Styles/_image-picker.scss b/LANCommander.Server/Styles/_image-picker.scss
new file mode 100644
index 00000000..7818cf99
--- /dev/null
+++ b/LANCommander.Server/Styles/_image-picker.scss
@@ -0,0 +1,37 @@
+.image-picker-images {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 16px;
+}
+
+.image-picker-image {
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.image-picker-image img {
+ border: 4px solid transparent;
+ border-radius: 2px;
+ max-height: 100%;
+ max-width: 100%;
+}
+
+.image-picker-image input {
+ display: none;
+}
+
+.image-picker-image input + label {
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ cursor: pointer;
+}
+
+.image-picker-image input:checked ~ img {
+ border-color: #1890ff;
+}
\ No newline at end of file
diff --git a/LANCommander.Server/Styles/_launcher.scss b/LANCommander.Server/Styles/_launcher.scss
new file mode 100644
index 00000000..a3f78cd9
--- /dev/null
+++ b/LANCommander.Server/Styles/_launcher.scss
@@ -0,0 +1,18 @@
+.launcher-download {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 20px;
+ flex-grow: 1;
+ justify-content: center;
+}
+
+.launcher-download img {
+ max-width: 500px;
+ width: 75vw;
+}
+
+.launcher-download h1 {
+ font-size: 32px;
+ margin-bottom: 0;
+}
\ No newline at end of file
diff --git a/LANCommander.Server/Styles/_layout.scss b/LANCommander.Server/Styles/_layout.scss
index 27d8317b..f5491b1c 100644
--- a/LANCommander.Server/Styles/_layout.scss
+++ b/LANCommander.Server/Styles/_layout.scss
@@ -1,10 +1,20 @@
-.ant-layout-has-sider > .ant-flex {
+.layout {
+ min-height: 100vh;
+}
+
+.ant-header {
+ display: flex;
+}
+
+.ant-layout-has-sider > .ant-flex {
flex-grow: 1;
}
-.site-layout-background {
+.ant-layout-content {
background: #141414;
padding-bottom: 24px;
+ display: flex;
+ flex-direction: column;
& > .ant-table-wrapper {
.ant-table-pagination {
diff --git a/LANCommander.Server/Styles/_media-editor.scss b/LANCommander.Server/Styles/_media-editor.scss
new file mode 100644
index 00000000..d64997ff
--- /dev/null
+++ b/LANCommander.Server/Styles/_media-editor.scss
@@ -0,0 +1,5 @@
+.media-editor img {
+ max-width: 100px;
+ max-height: 100px;
+ width: auto;
+}
\ No newline at end of file
diff --git a/LANCommander.Server/Styles/_media-grabber.scss b/LANCommander.Server/Styles/_media-grabber.scss
new file mode 100644
index 00000000..d7145cb0
--- /dev/null
+++ b/LANCommander.Server/Styles/_media-grabber.scss
@@ -0,0 +1,12 @@
+.media-grabber-group {
+ margin-top: 18px;
+}
+
+.media-grabber-group + .media-grabber-group {
+ padding-top: 16px;
+ border-top: 1px solid rgba(0, 0, 0, 0.85);
+}
+
+[data-theme="Dark"] .media-grabber-group + .media-grabber-group {
+ border-top: 1px solid rgba(255, 255, 255, 0.12);
+}
\ No newline at end of file
diff --git a/LANCommander.Server/Styles/_menu.scss b/LANCommander.Server/Styles/_menu.scss
index 785686f8..4788cd92 100644
--- a/LANCommander.Server/Styles/_menu.scss
+++ b/LANCommander.Server/Styles/_menu.scss
@@ -1,3 +1,41 @@
.ant-menu-title-content > .anticon + span {
margin-left: 6px;
+}
+
+.menu-drawer {
+ margin-top: 63px;
+}
+
+.menu-drawer .ant-drawer-content {
+ background: #001529;
+}
+
+.menu-drawer .ant-drawer-header-no-title {
+ display: none;
+}
+
+.menu-drawer .ant-drawer-body {
+ padding: 0;
+}
+
+.menu-drawer .ant-drawer-wrapper,
+.menu-drawer .ant-drawer-content {
+ height: auto;
+}
+
+.menu-drawer .ant-drawer-content-wrapper {
+ height: auto !important;
+}
+
+.ant-menu-left {
+ flex-grow: 1;
+}
+
+.ant-menu-right .ant-menu-title-content {
+ display: inline-block;
+ font-size: 24px;
+}
+
+.ant-menu-right .ant-menu-title-content .anticon {
+ font-size: 24px;
}
\ No newline at end of file
diff --git a/LANCommander.Server/Styles/_mobile.scss b/LANCommander.Server/Styles/_mobile.scss
new file mode 100644
index 00000000..c92d8f62
--- /dev/null
+++ b/LANCommander.Server/Styles/_mobile.scss
@@ -0,0 +1,74 @@
+.mobile-header .ant-btn {
+ color: #fff;
+ position: absolute;
+ right: 16px;
+}
+
+@media screen and (min-width: 768px) {
+ .mobile-menu {
+ display: none;
+ }
+}
+
+@media screen and (max-width: 767px) {
+ .mobile-header {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ z-index: 2000;
+ }
+
+ .ant-header:not(.mobile-header) {
+ display: none;
+ }
+
+ .ant-header .logo {
+ margin-right: 0 !important;
+ float: none;
+ }
+
+ .ant-layout-content {
+ margin-top: 63px;
+ }
+}
+
+@media (max-width: 960px) {
+ .ant-scrolling-effect {
+ overflow: visible !important;
+ width: 100% !important;
+ }
+
+ .ant-table-responsive .ant-table-tbody .ant-table-row > .ant-table-cell:first-child {
+ padding-top: 16px;
+ }
+
+ .ant-table-responsive .ant-table-tbody .ant-table-row > .ant-table-cell:last-child {
+ padding-bottom: 16px;
+ }
+
+ .ant-table-responsive .ant-table-tbody .ant-table-cell {
+ padding-top: 8px;
+ padding-bottom: 8px;
+ }
+
+ .ant-table-responsive .ant-table-tbody .ant-table-cell:before {
+ flex-grow: 1;
+ }
+
+ .ant-layout.ant-layout-has-sider {
+ flex-direction: column
+ }
+
+ .ant-layout-sider {
+ max-width: 100% !important;
+ width: 100% !important;
+ }
+
+ .ant-layout.ant-layout-has-sider > .ant-layout, .ant-layout.ant-layout-has-sider > .ant-layout-content {
+ width: 100%
+ }
+}
\ No newline at end of file
diff --git a/LANCommander.Server/Styles/_page-editor.scss b/LANCommander.Server/Styles/_page-editor.scss
new file mode 100644
index 00000000..11446069
--- /dev/null
+++ b/LANCommander.Server/Styles/_page-editor.scss
@@ -0,0 +1,11 @@
+.page-editor-body {
+ flex-grow: 1;
+}
+
+.page-editor-tree-pane {
+
+}
+
+.page-editor-markdown-pane {
+ padding: 0 16px;
+}
\ No newline at end of file
diff --git a/LANCommander.Server/Styles/_page-header.scss b/LANCommander.Server/Styles/_page-header.scss
new file mode 100644
index 00000000..80fe984c
--- /dev/null
+++ b/LANCommander.Server/Styles/_page-header.scss
@@ -0,0 +1,4 @@
+.ant-page-header-heading-title {
+ padding-bottom: 4px;
+ line-height: 26px;
+}
\ No newline at end of file
diff --git a/LANCommander.Server/Styles/_select.scss b/LANCommander.Server/Styles/_select.scss
new file mode 100644
index 00000000..90387270
--- /dev/null
+++ b/LANCommander.Server/Styles/_select.scss
@@ -0,0 +1,7 @@
+.ant-select-selector {
+ line-height: 30px;
+}
+
+.ant-select-item-option-content .ant-image {
+ margin-right: 8px;
+}
\ No newline at end of file
diff --git a/LANCommander.Server/Styles/_steps.scss b/LANCommander.Server/Styles/_steps.scss
new file mode 100644
index 00000000..d20da511
--- /dev/null
+++ b/LANCommander.Server/Styles/_steps.scss
@@ -0,0 +1,3 @@
+.ant-steps {
+ margin-bottom: 16px;
+}
\ No newline at end of file
diff --git a/LANCommander.Server/Styles/_table.scss b/LANCommander.Server/Styles/_table.scss
new file mode 100644
index 00000000..7683a609
--- /dev/null
+++ b/LANCommander.Server/Styles/_table.scss
@@ -0,0 +1,11 @@
+.ant-table-cell-with-append {
+ padding-left: 8px !important;
+}
+
+.ant-table-row-indent + .ant-table-row-expand-icon {
+ margin-right: 16px;
+}
+
+.ant-table-row-level-1 {
+ background: #0a0a0a;
+}
\ No newline at end of file
diff --git a/LANCommander.Server/Styles/_uploader.scss b/LANCommander.Server/Styles/_uploader.scss
new file mode 100644
index 00000000..f335c462
--- /dev/null
+++ b/LANCommander.Server/Styles/_uploader.scss
@@ -0,0 +1,8 @@
+.uploader-progress .ant-progress-outer {
+ padding-right: 0;
+ margin-right: 0;
+}
+
+.uploader-progress .ant-progress-bg {
+ transition: none;
+}
\ No newline at end of file
diff --git a/LANCommander.Server/Styles/app.scss b/LANCommander.Server/Styles/app.scss
index ea1f8af7..6a33131d 100644
--- a/LANCommander.Server/Styles/app.scss
+++ b/LANCommander.Server/Styles/app.scss
@@ -2,4 +2,19 @@
@use '_sidebar';
@use '_menu';
@use '_layout';
-@use '_social';
\ No newline at end of file
+@use '_social';
+@use '_dashboard';
+@use '_launcher';
+@use '_select';
+@use '_steps';
+@use '_table';
+@use '_page-header';
+@use '_button';
+@use '_card';
+@use '_media-editor';
+@use '_media-grabber';
+@use '_image-picker';
+@use '_game-metadata-lookup';
+@use '_page-editor';
+@use '_uploader';
+@use '_mobile';
\ No newline at end of file
diff --git a/LANCommander.Server/UI/App.razor b/LANCommander.Server/UI/App.razor
index fbe48fb3..936620ad 100644
--- a/LANCommander.Server/UI/App.razor
+++ b/LANCommander.Server/UI/App.razor
@@ -33,7 +33,6 @@
-
diff --git a/LANCommander.Server/wwwroot/css/site.css b/LANCommander.Server/wwwroot/css/site.css
deleted file mode 100644
index e09f6323..00000000
--- a/LANCommander.Server/wwwroot/css/site.css
+++ /dev/null
@@ -1,285 +0,0 @@
-.layout {
- min-height: 100vh;
-}
-
-.ant-layout-content {
- display: flex;
- flex-direction: column;
-}
-
-.ant-header {
- display: flex;
-}
-
-.ant-menu-left {
- flex-grow: 1;
-}
-
-.ant-menu-right .ant-menu-title-content {
- display: inline-block;
- font-size: 24px;
-}
-
-.ant-menu-right .ant-menu-title-content .anticon {
- font-size: 24px;
-}
-
-.ant-page-header-heading-title {
- padding-bottom: 4px;
- line-height: 26px;
-}
-
-label.ant-btn-icon-only {
- display: inline-flex;
- align-items: center;
- justify-content: center;
-}
-
-.ant-select-selector {
- line-height: 30px;
-}
-
-.ant-card .ant-form > .ant-form-item:last-child {
- margin-bottom: 0;
-}
-
-.uploader-progress .ant-progress-outer {
- padding-right: 0;
- margin-right: 0;
-}
-
-.uploader-progress .ant-progress-bg {
- transition: none;
-}
-
-.menu-drawer {
- margin-top: 63px;
-}
-
-.menu-drawer .ant-drawer-content {
- background: #001529;
-}
-
-.menu-drawer .ant-drawer-header-no-title {
- display: none;
-}
-
-.menu-drawer .ant-drawer-body {
- padding: 0;
-}
-
-.menu-drawer .ant-drawer-wrapper,
-.menu-drawer .ant-drawer-content {
- height: auto;
-}
-
-.menu-drawer .ant-drawer-content-wrapper {
- height: auto !important;
-}
-
-.mobile-header .ant-btn {
- color: #fff;
- position: absolute;
- right: 16px;
-}
-
-.ant-select-item-option-content .ant-image {
- margin-right: 8px;
-}
-
-.file-picker-dialog .ant-modal-body {
- padding: 0;
-}
-
-.file-picker-dialog .file-manager {
- height: calc(100vh - 55px - 53px);
-}
-
-.file-manager-selector-hidden .ant-radio-wrapper {
- display: none;
-}
-
-.game-metadata-lookup-modal .ant-modal-body {
- padding: 0;
-}
-
-.game-metadata-lookup-modal tbody tr {
- cursor: pointer;
-}
-
-.image-picker-images {
- display: flex;
- flex-wrap: wrap;
- gap: 16px;
-}
-
-.image-picker-image {
- position: relative;
- display: flex;
- align-items: center;
- justify-content: center;
-}
-
-.image-picker-image img {
- border: 4px solid transparent;
- border-radius: 2px;
- max-height: 100%;
- max-width: 100%;
-}
-
-.image-picker-image input {
- display: none;
-}
-
-.image-picker-image input + label {
- display: block;
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- cursor: pointer;
-}
-
-.image-picker-image input:checked ~ img {
- border-color: #1890ff;
-}
-
-.media-editor img {
- max-width: 100px;
- max-height: 100px;
- width: auto;
-}
-
-.media-grabber-group {
- margin-top: 18px;
-}
-
-.media-grabber-group + .media-grabber-group {
- padding-top: 16px;
- border-top: 1px solid rgba(0, 0, 0, 0.85);
-}
-
-[data-theme="Dark"] .media-grabber-group + .media-grabber-group {
- border-top: 1px solid rgba(255, 255, 255, 0.12);
-}
-
-.launcher-download {
- display: flex;
- flex-direction: column;
- align-items: center;
- gap: 20px;
- flex-grow: 1;
- justify-content: center;
-}
-
-.launcher-download img {
- max-width: 500px;
- width: 75vw;
-}
-
-.launcher-download h1 {
- font-size: 32px;
- margin-bottom: 0;
-}
-
-.page-editor-body {
- flex-grow: 1;
-}
-
-.page-editor-tree-pane {
-
-}
-
-.page-editor-markdown-pane {
- padding: 0 16px;
-}
-
-.ant-table-cell-with-append {
- padding-left: 8px !important;
-}
-
-.ant-table-row-indent + .ant-table-row-expand-icon {
- margin-right: 16px;
-}
-
-.ant-table-row-level-1 {
- background: #0a0a0a;
-}
-
-.dashboard-chart > div {
- background: none !important;
-}
-
-.ant-steps {
- margin-bottom: 16px;
-}
-
-@media screen and (min-width: 768px) {
- .mobile-menu {
- display: none;
- }
-}
-
-@media screen and (max-width: 767px) {
- .mobile-header {
- display: flex;
- align-items: center;
- justify-content: center;
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- z-index: 2000;
- }
-
- .ant-header:not(.mobile-header) {
- display: none;
- }
-
- .ant-header .logo {
- margin-right: 0 !important;
- float: none;
- }
-
- .ant-layout-content {
- margin-top: 63px;
- }
-}
-
-@media (max-width: 960px) {
- .ant-scrolling-effect {
- overflow: visible !important;
- width: 100% !important;
- }
-
- .ant-table-responsive .ant-table-tbody .ant-table-row > .ant-table-cell:first-child {
- padding-top: 16px;
- }
-
- .ant-table-responsive .ant-table-tbody .ant-table-row > .ant-table-cell:last-child {
- padding-bottom: 16px;
- }
-
- .ant-table-responsive .ant-table-tbody .ant-table-cell {
- padding-top: 8px;
- padding-bottom: 8px;
- }
-
- .ant-table-responsive .ant-table-tbody .ant-table-cell:before {
- flex-grow: 1;
- }
-
- .ant-layout.ant-layout-has-sider {
- flex-direction: column
- }
-
- .ant-layout-sider {
- max-width: 100% !important;
- width: 100% !important;
- }
-
- .ant-layout.ant-layout-has-sider > .ant-layout, .ant-layout.ant-layout-has-sider > .ant-layout-content {
- width: 100%
- }
-}
\ No newline at end of file