split css file
This commit is contained in:
parent
2c61988074
commit
2ad93f00f6
@ -11,7 +11,7 @@
|
|||||||
<link rel="icon" type="image/x-icon" href="favicon.ico" />
|
<link rel="icon" type="image/x-icon" href="favicon.ico" />
|
||||||
<style type="text/css">.spinner{font-size:10px;text-indent:-9999em;width:10em;height:10em;border-radius:50%;background:#0dcaf0;background:linear-gradient(to right,#0dcaf0 10%,rgba(17,124,238,0) 42%);position:relative;animation:load3 1.4s infinite linear;transform:translateZ(0) translate(-50%,-50%);transform-origin:0 0;position:absolute;left:50%;top:50%}.spinner:before{width:50%;height:50%;background:#0dcaf0;border-radius:100% 0 0 0;position:absolute;top:0;left:0;content:''}.spinner:after{background:#090b17;width:75%;height:75%;border-radius:50%;content:'';margin:auto;position:absolute;top:0;left:0;bottom:0;right:0}@keyframes load3{0%{transform:rotate(0) translateZ(0) translate(-50%,-50%)}100%{transform:rotate(360deg) translateZ(0) translate(-50%,-50%)}}</style>
|
<style type="text/css">.spinner{font-size:10px;text-indent:-9999em;width:10em;height:10em;border-radius:50%;background:#0dcaf0;background:linear-gradient(to right,#0dcaf0 10%,rgba(17,124,238,0) 42%);position:relative;animation:load3 1.4s infinite linear;transform:translateZ(0) translate(-50%,-50%);transform-origin:0 0;position:absolute;left:50%;top:50%}.spinner:before{width:50%;height:50%;background:#0dcaf0;border-radius:100% 0 0 0;position:absolute;top:0;left:0;content:''}.spinner:after{background:#090b17;width:75%;height:75%;border-radius:50%;content:'';margin:auto;position:absolute;top:0;left:0;bottom:0;right:0}@keyframes load3{0%{transform:rotate(0) translateZ(0) translate(-50%,-50%)}100%{transform:rotate(360deg) translateZ(0) translate(-50%,-50%)}}</style>
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com">
|
<link rel="preconnect" href="https://fonts.gstatic.com">
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Mukta&display=swap" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Mukta&family=Mukta:wght@200;400&family=Quicksand:wght@300;400;500;700&display=swap" rel="stylesheet">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<app-root>
|
<app-root>
|
||||||
|
|||||||
62
app/src/styles/_buttons.scss
Normal file
62
app/src/styles/_buttons.scss
Normal file
@ -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;
|
||||||
|
}
|
||||||
105
app/src/styles/_forms.scss
Normal file
105
app/src/styles/_forms.scss
Normal file
@ -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;
|
||||||
|
}
|
||||||
58
app/src/styles/_modal.scss
Normal file
58
app/src/styles/_modal.scss
Normal file
@ -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;
|
||||||
|
}
|
||||||
45
app/src/styles/_virtualScroll.scss
Normal file
45
app/src/styles/_virtualScroll.scss
Normal file
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@ -1,4 +1,8 @@
|
|||||||
@import "_variables.scss";
|
@import "_variables.scss";
|
||||||
|
@import "_buttons.scss";
|
||||||
|
@import "_modal.scss";
|
||||||
|
@import "_forms.scss";
|
||||||
|
@import "_virtualScroll.scss";
|
||||||
|
|
||||||
html, body
|
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
|
.tooltip-wrap .tooltip-inner
|
||||||
{
|
{
|
||||||
white-space: pre-line;
|
white-space: pre-line;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-floating > label
|
|
||||||
{
|
|
||||||
padding: 1.25rem .75rem;
|
|
||||||
opacity: .65;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-nav .nav-link
|
.navbar-nav .nav-link
|
||||||
{
|
{
|
||||||
padding-right: .5rem;
|
padding-right: .5rem;
|
||||||
@ -373,7 +116,7 @@ body, div, virtual-scroller
|
|||||||
background: none;
|
background: none;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
border: none;
|
border: none;
|
||||||
font-family: "Bebas Neue", sans-serif;
|
font-family: "Varta", sans-serif;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #0dcaf0;
|
color: #0dcaf0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@ -484,154 +227,8 @@ body, div, virtual-scroller
|
|||||||
opacity: .75;
|
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)
|
@media (min-width: 576px)
|
||||||
{
|
{
|
||||||
virtual-scroller.instances .scrollable-content
|
|
||||||
{
|
|
||||||
--bs-gutter-x: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flex-grow-sm-0
|
.flex-grow-sm-0
|
||||||
{
|
{
|
||||||
flex-grow: 0 !important;
|
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)
|
@media (min-width: 992px)
|
||||||
{
|
{
|
||||||
.w-lg-auto
|
.w-lg-auto
|
||||||
@ -677,7 +266,7 @@ accordion
|
|||||||
.dropdown-menu, .menu-popover, .menu-dropdown
|
.dropdown-menu, .menu-popover, .menu-dropdown
|
||||||
{
|
{
|
||||||
background: linear-gradient(135deg, #1fd1f5 0%, #00c3ea 100%);
|
background: linear-gradient(135deg, #1fd1f5 0%, #00c3ea 100%);
|
||||||
font-family: "Bebas Neue", sans-serif;
|
font-family: "Varta", sans-serif;
|
||||||
font-size: 1.2rem;
|
font-size: 1.2rem;
|
||||||
z-index: 1020;
|
z-index: 1020;
|
||||||
max-height: 60vh;
|
max-height: 60vh;
|
||||||
@ -883,7 +472,7 @@ accordion
|
|||||||
{
|
{
|
||||||
thead
|
thead
|
||||||
{
|
{
|
||||||
font-family: "Bebas Neue", sans-serif;
|
font-family: "Varta", sans-serif;
|
||||||
font-size: 1.2rem;
|
font-size: 1.2rem;
|
||||||
color: #A3A4B8;
|
color: #A3A4B8;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user