diff --git a/app/src/index.html b/app/src/index.html
index fb163b6..9ffda91 100644
--- a/app/src/index.html
+++ b/app/src/index.html
@@ -11,7 +11,7 @@
-
+
diff --git a/app/src/styles/_buttons.scss b/app/src/styles/_buttons.scss
new file mode 100644
index 0000000..908f0ad
--- /dev/null
+++ b/app/src/styles/_buttons.scss
@@ -0,0 +1,62 @@
+.btn
+{
+ border-radius: 2rem;
+ line-height: 1.2;
+ font-family: "Mukta", sans-serif;
+ text-transform: uppercase;
+ font-weight: 400;
+
+ &.btn-info, &.btn-outline-info, &.text-info
+ {
+ &:focus
+ {
+ box-shadow: 0 0 .75rem -.1rem #00e7ff, 0 0 0.25rem #00e7ff, 0 0 3rem -1.25rem #00e7ff inset;
+ /*border-color: #00e7ff;*/
+ }
+ }
+}
+
+.btn:not(.btn-lg):not(.btn-sm)
+{
+ font-size: 1.15rem;
+ padding: .375rem .5rem .3rem;
+}
+
+.btn-group-sm .btn:not(.btn-lg):not(.btn-sm)
+{
+ padding: 0 .25rem;
+
+ &:active, &:focus
+ {
+ box-shadow: none;
+ }
+}
+
+.btn.btn-lg
+{
+ font-size: 1.15rem;
+ padding-bottom: .35rem;
+ line-height: 1;
+ font-weight: 600;
+}
+
+.btn-primary
+{
+ background: linear-gradient(135deg, #4488c7 0%, #006ee4 100%);
+ color: #FFF;
+ text-shadow: 0px 0px 5px rgba(3,51,103,.75);
+}
+
+.btn-success
+{
+ background: linear-gradient(135deg, #44bb53 0%,#169833 100%);
+ color: #FFF;
+ text-shadow: 0px 0px 5px #19752e;
+}
+
+.btn-info
+{
+ color: #000;
+ background: linear-gradient( 135deg, #1fd1f5 0%, #00c3ea 100%);
+ border-color: transparent;
+}
diff --git a/app/src/styles/_forms.scss b/app/src/styles/_forms.scss
new file mode 100644
index 0000000..31bc9e0
--- /dev/null
+++ b/app/src/styles/_forms.scss
@@ -0,0 +1,105 @@
+.form-check-label
+{
+ text-transform: uppercase;
+ color: #0dcaf0;
+ font-family: "Varta", sans-serif;
+ font-size: 1.2rem;
+ vertical-align: middle;
+}
+
+.form-switch .form-check-input
+{
+ background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'-4%20-4%208%208'%3E%3Ccircle%20r%3D'3'%20fill%3D'%230dcaf0'%2F%3E%3C%2Fsvg%3E");
+ background-color: transparent;
+ border-color: #0dcaf0;
+ margin-top: 0;
+ transition: all .15s cubic-bezier(0, .8, .2, 1);
+
+ &:focus
+ {
+ background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'-4%20-4%208%208'%3E%3Ccircle%20r%3D'3'%20fill%3D'%230dcaf0'%2F%3E%3C%2Fsvg%3E");
+ }
+
+ &:checked
+ {
+ background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'-4%20-4%208%208'%3E%3Ccircle%20r%3D'3'%20fill%3D'%2310182b'%2F%3E%3C%2Fsvg%3E");
+ background-color: #0dcaf0;
+ box-shadow: 0 0 0 1px #10182b inset;
+
+ &:focus
+ {
+ box-shadow: 0 0 0 1px #10182b inset, 0 0 0 0.25rem rgba(13, 110, 253, .25);
+ }
+ }
+}
+
+.form-switch
+{
+ min-height: auto;
+}
+
+:-webkit-autofill,
+:-webkit-autofill:hover,
+:-webkit-autofill:focus
+{
+ -webkit-text-fill-color: #ff9c07 !important; // Hack because color cannot be overridden
+ -webkit-box-shadow: 0 0 0px 1000px #0f1626 inset; // Hack because background-color cannot be overridden
+}
+
+.form-control, .form-select
+{
+ border-color: rgb(0 231 255 / 75%);
+ background-color: transparent;
+ color: #ff9c07;
+ border-radius: 3rem;
+
+ &:focus, &:active
+ {
+ background-color: transparent;
+ color: #ff9c07;
+ }
+
+ &:focus
+ {
+ border-color: #00e7ff;
+ box-shadow: 0 0 .75rem -.1rem #00e7ff, 0 0 0.25rem #00e7ff, 0 0 .5rem -.25rem #00e7ff inset;
+ }
+
+ &:disabled, &[readonly]
+ {
+ background-color: transparent;
+ color: rgba(255, 156, 7, .5);
+ border-color: rgba(0, 231, 255, .25);
+ }
+
+ &::placeholder
+ {
+ color: rgba(13, 202, 240, .35);
+ }
+
+ &:-ms-input-placeholder
+ {
+ color: rgba(13, 202, 240, .35);
+ }
+
+ &::-ms-input-placeholder
+ {
+ color: rgba(13, 202, 240, .35);
+ }
+}
+
+.form-select
+{
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%230596b2' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
+
+ option
+ {
+ background: #11182b;
+ }
+}
+
+.form-floating > label
+{
+ padding: 1.25rem .75rem;
+ opacity: .65;
+}
diff --git a/app/src/styles/_modal.scss b/app/src/styles/_modal.scss
new file mode 100644
index 0000000..f44a862
--- /dev/null
+++ b/app/src/styles/_modal.scss
@@ -0,0 +1,58 @@
+.modal
+{
+ backdrop-filter: blur(6px);
+ z-index: 1040;
+}
+
+.modal-backdrop
+{
+ background-color: rgb(1, 10, 14);
+}
+
+.modal-content
+{
+ background: linear-gradient( 135deg, #00e7ff 0%, #00e7ff 100%);
+ box-shadow: 0rem 0rem 3rem -2rem #00e7ff;
+ border: none;
+ border-radius: .5rem;
+ overflow: hidden;
+
+ .content
+ {
+ height: calc(100% - 4px);
+ margin: 2px;
+ padding: 1rem;
+ background: linear-gradient( 135deg, #10182b 0%, #0d1321 100%);
+ color: #00dcff;
+ border-radius: 0.35rem;
+
+ h4
+ {
+ color: #3d5e8e;
+ font-family: "Varta", sans-serif;
+ }
+ }
+}
+
+@media (min-width: 576px) and (max-width: 992px)
+{
+ .modal-dialog.modal-xl
+ {
+ max-width: 762px;
+ }
+}
+
+.close
+{
+ position: absolute;
+ right: .25rem;
+ top: 0;
+ padding: .75rem 1rem;
+ font-weight: bold;
+ z-index: 1;
+ outline: none;
+ border: none;
+ background: none;
+ font-size: 2rem;
+ color: #3d5e8e;
+}
\ No newline at end of file
diff --git a/app/src/styles/_virtualScroll.scss b/app/src/styles/_virtualScroll.scss
new file mode 100644
index 0000000..8bc7f68
--- /dev/null
+++ b/app/src/styles/_virtualScroll.scss
@@ -0,0 +1,45 @@
+virtual-scroller
+{
+ flex-grow: 1;
+
+ &.instances .scrollable-content
+ {
+ max-width: 100%;
+ width: auto;
+ height: auto;
+ padding-bottom: 1rem;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: start;
+ margin-top: -1rem;
+ --bs-gutter-y: 2rem;
+ position: relative;
+
+ > *
+ {
+ flex-shrink: 0;
+ max-width: 100%;
+ padding-right: calc(var(--bs-gutter-x)/ 2);
+ padding-left: calc(var(--bs-gutter-x)/ 2);
+ padding-bottom: calc(var(--bs-gutter-y) / 2);
+ margin-top: calc(var(--bs-gutter-y) / 2);
+ }
+ }
+}
+
+@media (min-width: 576px)
+{
+ virtual-scroller.instances .scrollable-content
+ {
+ --bs-gutter-x: 1.5rem;
+ }
+}
+
+@media (max-width: 576px)
+{
+ virtual-scroller.instances .scrollable-content
+ {
+ --bs-gutter-y: 1.5rem;
+ }
+}
+
diff --git a/app/src/styles/styles.scss b/app/src/styles/styles.scss
index 5c64b02..70a01bc 100644
--- a/app/src/styles/styles.scss
+++ b/app/src/styles/styles.scss
@@ -1,4 +1,8 @@
@import "_variables.scss";
+@import "_buttons.scss";
+@import "_modal.scss";
+@import "_forms.scss";
+@import "_virtualScroll.scss";
html, body
{
@@ -39,272 +43,11 @@ body, div, virtual-scroller
{
}
-.btn
-{
- border-radius: 2rem;
- line-height: 1.2;
- font-family: "Bebas Neue", sans-serif;
-
- &.btn-info, &.btn-outline-info, &.text-info
- {
- &:focus
- {
- box-shadow: 0 0 .75rem -.1rem #00e7ff, 0 0 0.25rem #00e7ff, 0 0 3rem -1.25rem #00e7ff inset;
- /*border-color: #00e7ff;*/
- }
- }
-}
-
-.btn:not(.btn-lg):not(.btn-sm)
-{
- font-size: 1.2rem;
- padding: .375rem .5rem .3rem;
-}
-
-.btn-group-sm .btn:not(.btn-lg):not(.btn-sm)
-{
- padding: 0 .25rem;
-
- &:active, &:focus
- {
- box-shadow: none;
- }
-}
-
-.btn.btn-lg
-{
- font-size: 1.45rem;
- padding-bottom: .35rem;
- line-height: 1;
-}
-
-.btn-primary
-{
- background: linear-gradient(135deg, #4488c7 0%, #006ee4 100%);
- color: #FFF;
- text-shadow: 0px 0px 5px rgba(3,51,103,.75);
-}
-
-.btn-success
-{
- background: linear-gradient(135deg, #44bb53 0%,#169833 100%);
- color: #FFF;
- text-shadow: 0px 0px 5px #19752e;
-}
-
-.btn-info
-{
- color: #000;
- background: linear-gradient( 135deg, #1fd1f5 0%, #00c3ea 100%);
- border-color: transparent;
-}
-
-.modal
-{
- backdrop-filter: blur(6px);
- z-index: 1040;
-}
-
-.modal-backdrop
-{
- background-color: rgb(1, 10, 14);
-}
-
-.modal-content
-{
- background: linear-gradient( 135deg, #00e7ff 0%, #00e7ff 100%);
- box-shadow: 0rem 0rem 3rem -2rem #00e7ff;
- border: none;
- border-radius: .5rem;
- overflow: hidden;
-
- .content
- {
- height: calc(100% - 4px);
- margin: 2px;
- padding: 1rem;
- background: linear-gradient( 135deg, #10182b 0%, #0d1321 100%);
- color: #00dcff;
- border-radius: 0.35rem;
-
- h4
- {
- color: #3d5e8e;
- font-family: "Bebas Neue", sans-serif;
- }
- }
-}
-
-.close
-{
- position: absolute;
- right: .25rem;
- top: 0;
- padding: .75rem 1rem;
- font-weight: bold;
- z-index: 1;
- outline: none;
- border: none;
- background: none;
- font-size: 2rem;
- color: #3d5e8e;
-}
-
-.ngx-datatable
-{
- height: calc(100% - 1rem);
- box-shadow: 0 0 0 1px #0d101d;
- background-color: rgba(16, 21, 39, .5);
-
- .datatable-header, .datatable-body-cell
- {
- padding: 0 .75rem;
- }
-
- .datatable-body
- {
- padding: .75rem 0;
- }
-
- .datatable-header, .datatable-footer
- {
- font-family: "Bebas Neue", sans-serif;
- font-variant: small-caps;
- text-transform: lowercase;
- font-size: 1.75rem;
- color: #A3A4B8;
- background-color: rgba(16, 21, 39, .5);
- }
-
- .datatable-footer
- {
- padding: 0 0 0 .75rem;
-
- .datatable-pager
- {
- flex: 1 1 80%;
- text-align: right;
- margin: 0 10px;
-
- li a
- {
- color: #A3A4B8;
- cursor: pointer;
- display: inline-block;
- font-family: "Bebas Neue", sans-serif;
- height: 22px;
- min-width: 24px;
- line-height: 22px;
- padding: 0 6px;
- border-radius: 3px;
- margin: 6px 3px;
- text-align: center;
- vertical-align: top;
- text-decoration: none;
- vertical-align: bottom;
- }
-
- li.active a
- {
- color: #0e2744;
- background-color: #ff9c07;
- font-weight: bold;
- line-height: 1;
- }
-
- li, a
- {
- outline: none;
- font-size: 1.5rem;
- }
-
- .pager, li
- {
- padding: 0;
- margin: 0;
- display: inline-block;
- list-style: none;
- }
- }
- }
-
- .text-right
- {
- .datatable-header-cell-template-wrap,
- .datatable-body-cell-label
- {
- text-align: right;
- }
-
- .datatable-header-cell-template-wrap
- {
- padding-right: 1.5rem;
- }
- }
-
- .datatable-header-cell.sort-active
- {
- color: #ff9c07;
- }
-
- .datatable-header .datatable-header-cell .sort-btn
- {
- vertical-align: sub !important;
- }
-
- .empty-row
- {
- padding: 0 1rem;
- font-variant: all-small-caps;
- }
-}
-
-.os
-{
- background: url('../assets/images/os.png') no-repeat;
- height: 16px;
- width: 16px;
- display: inline-block;
- line-height: 1;
- vertical-align: middle;
-
- > span
- {
- margin-left: 19px;
- }
-
- &.smartos
- {
- background-position: 0 0;
- }
-
- &.windows
- {
- background-position: -16px 0;
- }
-
- &.linux
- {
- background-position: -32px 0;
- }
-
- &.bsd
- {
- background-position: -48px 0;
- }
-}
-
.tooltip-wrap .tooltip-inner
{
white-space: pre-line;
}
-.form-floating > label
-{
- padding: 1.25rem .75rem;
- opacity: .65;
-}
-
.navbar-nav .nav-link
{
padding-right: .5rem;
@@ -373,7 +116,7 @@ body, div, virtual-scroller
background: none;
border-radius: 0;
border: none;
- font-family: "Bebas Neue", sans-serif;
+ font-family: "Varta", sans-serif;
text-align: center;
color: #0dcaf0;
width: 100%;
@@ -484,154 +227,8 @@ body, div, virtual-scroller
opacity: .75;
}
-.form-check-label
-{
- text-transform: uppercase;
- color: #0dcaf0;
- font-family: "Bebas Neue", sans-serif;
- font-size: 1.2rem;
- vertical-align: middle;
-}
-
-.form-switch .form-check-input
-{
- background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'-4%20-4%208%208'%3E%3Ccircle%20r%3D'3'%20fill%3D'%230dcaf0'%2F%3E%3C%2Fsvg%3E");
- background-color: transparent;
- border-color: #0dcaf0;
- margin-top: 0;
- transition: all .15s cubic-bezier(0, .8, .2, 1);
-
- &:focus
- {
- background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'-4%20-4%208%208'%3E%3Ccircle%20r%3D'3'%20fill%3D'%230dcaf0'%2F%3E%3C%2Fsvg%3E");
- }
-
- &:checked
- {
- background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'-4%20-4%208%208'%3E%3Ccircle%20r%3D'3'%20fill%3D'%2310182b'%2F%3E%3C%2Fsvg%3E");
- background-color: #0dcaf0;
- box-shadow: 0 0 0 1px #10182b inset;
-
- &:focus
- {
- box-shadow: 0 0 0 1px #10182b inset, 0 0 0 0.25rem rgba(13, 110, 253, .25);
- }
- }
-}
-
-.form-switch
-{
- min-height: auto;
-}
-
-:-webkit-autofill,
-:-webkit-autofill:hover,
-:-webkit-autofill:focus
-{
- -webkit-text-fill-color: #ff9c07 !important; // Hack because color cannot be overridden
- -webkit-box-shadow: 0 0 0px 1000px #0f1626 inset; // Hack because background-color cannot be overridden
-}
-
-.form-control, .form-select
-{
- border-color: rgb(0 231 255 / 75%);
- background-color: transparent;
- color: #ff9c07;
- border-radius: 3rem;
-
- &:focus, &:active
- {
- background-color: transparent;
- color: #ff9c07;
- }
-
- &:focus
- {
- border-color: #00e7ff;
- box-shadow: 0 0 .75rem -.1rem #00e7ff, 0 0 0.25rem #00e7ff, 0 0 .5rem -.25rem #00e7ff inset;
- }
-
- &:disabled, &[readonly]
- {
- background-color: transparent;
- color: rgba(255, 156, 7, .5);
- border-color: rgba(0, 231, 255, .25);
- }
-
- &::placeholder
- {
- color: rgba(13, 202, 240, .35);
- }
-
- &:-ms-input-placeholder
- {
- color: rgba(13, 202, 240, .35);
- }
-
- &::-ms-input-placeholder
- {
- color: rgba(13, 202, 240, .35);
- }
-}
-
-.form-select
-{
- background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%230596b2' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
-
- option
- {
- background: #11182b;
- }
-}
-
-@media (min-width: 576px) and (max-width: 992px)
-{
- .modal-dialog.modal-xl
- {
- max-width: 762px;
- }
-}
-
-virtual-scroller
-{
- flex-grow: 1;
-
- .scrollable-content
- {
- }
-
- &.instances .scrollable-content
- {
- max-width: 100%;
- width: auto;
- height: auto;
- padding-bottom: 1rem;
- display: flex;
- flex-wrap: wrap;
- justify-content: start;
- margin-top: -1rem;
- --bs-gutter-y: 2rem;
- position: relative;
-
- > *
- {
- flex-shrink: 0;
- max-width: 100%;
- padding-right: calc(var(--bs-gutter-x)/ 2);
- padding-left: calc(var(--bs-gutter-x)/ 2);
- padding-bottom: calc(var(--bs-gutter-y) / 2);
- margin-top: calc(var(--bs-gutter-y) / 2);
- }
- }
-}
-
@media (min-width: 576px)
{
- virtual-scroller.instances .scrollable-content
- {
- --bs-gutter-x: 1.5rem;
- }
-
.flex-grow-sm-0
{
flex-grow: 0 !important;
@@ -643,14 +240,6 @@ virtual-scroller
}
}
-@media (max-width: 576px)
-{
- virtual-scroller.instances .scrollable-content
- {
- --bs-gutter-y: 1.5rem;
- }
-}
-
@media (min-width: 992px)
{
.w-lg-auto
@@ -677,7 +266,7 @@ accordion
.dropdown-menu, .menu-popover, .menu-dropdown
{
background: linear-gradient(135deg, #1fd1f5 0%, #00c3ea 100%);
- font-family: "Bebas Neue", sans-serif;
+ font-family: "Varta", sans-serif;
font-size: 1.2rem;
z-index: 1020;
max-height: 60vh;
@@ -883,7 +472,7 @@ accordion
{
thead
{
- font-family: "Bebas Neue", sans-serif;
+ font-family: "Varta", sans-serif;
font-size: 1.2rem;
color: #A3A4B8;
}