From 880d00237f77b95481bee70d31388e1ce2743e6f Mon Sep 17 00:00:00 2001 From: Neil Brommer Date: Wed, 8 Dec 2021 21:59:43 -0800 Subject: [PATCH] Use SCSS for styling --- .gitignore | 2 + Readme.md | 17 +- Start.sln | 1 + Start/Client/Sass/Spectre/_accordions.scss | 38 + Start/Client/Sass/Spectre/_animations.scss | 20 + Start/Client/Sass/Spectre/_asian.scss | 43 + Start/Client/Sass/Spectre/_autocomplete.scss | 47 + Start/Client/Sass/Spectre/_avatars.scss | 77 + Start/Client/Sass/Spectre/_badges.scss | 60 + Start/Client/Sass/Spectre/_bars.scss | 71 + Start/Client/Sass/Spectre/_base.scss | 44 + Start/Client/Sass/Spectre/_breadcrumbs.scss | 29 + Start/Client/Sass/Spectre/_buttons.scss | 193 + Start/Client/Sass/Spectre/_calendars.scss | 222 + Start/Client/Sass/Spectre/_cards.scss | 43 + Start/Client/Sass/Spectre/_carousels.scss | 136 + Start/Client/Sass/Spectre/_chips.scss | 33 + Start/Client/Sass/Spectre/_codes.scss | 31 + .../Sass/Spectre/_comparison-sliders.scss | 116 + Start/Client/Sass/Spectre/_dropdowns.scss | 36 + Start/Client/Sass/Spectre/_empty.scss | 21 + Start/Client/Sass/Spectre/_filters.scss | 37 + Start/Client/Sass/Spectre/_forms.scss | 555 +++ Start/Client/Sass/Spectre/_hero.scss | 22 + Start/Client/Sass/Spectre/_icons.scss | 5 + Start/Client/Sass/Spectre/_labels.scss | 34 + Start/Client/Sass/Spectre/_layout.scss | 446 ++ Start/Client/Sass/Spectre/_media.scss | 75 + Start/Client/Sass/Spectre/_menus.scss | 66 + Start/Client/Sass/Spectre/_meters.scss | 57 + Start/Client/Sass/Spectre/_mixins.scss | 10 + Start/Client/Sass/Spectre/_modals.scss | 87 + Start/Client/Sass/Spectre/_navbar.scss | 28 + Start/Client/Sass/Spectre/_navs.scss | 34 + Start/Client/Sass/Spectre/_normalize.scss | 446 ++ Start/Client/Sass/Spectre/_off-canvas.scss | 95 + Start/Client/Sass/Spectre/_pagination.scss | 60 + Start/Client/Sass/Spectre/_panels.scss | 23 + Start/Client/Sass/Spectre/_parallax.scss | 135 + Start/Client/Sass/Spectre/_popovers.scss | 65 + Start/Client/Sass/Spectre/_progress.scss | 45 + Start/Client/Sass/Spectre/_sliders.scss | 99 + Start/Client/Sass/Spectre/_steps.scss | 71 + Start/Client/Sass/Spectre/_tables.scss | 57 + Start/Client/Sass/Spectre/_tabs.scss | 66 + Start/Client/Sass/Spectre/_tiles.scss | 38 + Start/Client/Sass/Spectre/_timelines.scss | 56 + Start/Client/Sass/Spectre/_toasts.scss | 48 + Start/Client/Sass/Spectre/_tooltips.scss | 79 + Start/Client/Sass/Spectre/_typography.scss | 129 + Start/Client/Sass/Spectre/_utilities.scss | 8 + Start/Client/Sass/Spectre/_variables.scss | 117 + Start/Client/Sass/Spectre/_viewer-360.scss | 34 + .../Sass/Spectre/icons/_icons-action.scss | 315 ++ .../Sass/Spectre/icons/_icons-core.scss | 54 + .../Sass/Spectre/icons/_icons-navigation.scss | 127 + .../Sass/Spectre/icons/_icons-object.scss | 161 + Start/Client/Sass/Spectre/mixins/_avatar.scss | 6 + Start/Client/Sass/Spectre/mixins/_button.scss | 54 + .../Client/Sass/Spectre/mixins/_clearfix.scss | 8 + Start/Client/Sass/Spectre/mixins/_color.scss | 27 + Start/Client/Sass/Spectre/mixins/_label.scss | 11 + .../Client/Sass/Spectre/mixins/_position.scss | 65 + Start/Client/Sass/Spectre/mixins/_shadow.scss | 9 + Start/Client/Sass/Spectre/mixins/_text.scss | 6 + Start/Client/Sass/Spectre/mixins/_toast.scss | 5 + Start/Client/Sass/Spectre/spectre-exp.scss | 18 + Start/Client/Sass/Spectre/spectre-icons.scss | 10 + Start/Client/Sass/Spectre/spectre.scss | 49 + .../Sass/Spectre/utilities/_colors.scss | 31 + .../Sass/Spectre/utilities/_cursors.scss | 24 + .../Sass/Spectre/utilities/_display.scss | 44 + .../Sass/Spectre/utilities/_divider.scss | 50 + .../Sass/Spectre/utilities/_loading.scss | 37 + .../Sass/Spectre/utilities/_position.scss | 54 + .../Sass/Spectre/utilities/_shapes.scss | 8 + .../Client/Sass/Spectre/utilities/_text.scss | 76 + Start/Client/Sass/app.scss | 188 + Start/Client/Start.Client.csproj | 73 + Start/Client/wwwroot/css/app.css | 181 - .../wwwroot/css/spectre/spectre-exp.css | 1231 ------ .../wwwroot/css/spectre/spectre-exp.min.css | 1 - .../wwwroot/css/spectre/spectre-icons.css | 597 --- .../wwwroot/css/spectre/spectre-icons.min.css | 1 - Start/Client/wwwroot/css/spectre/spectre.css | 3760 ----------------- .../wwwroot/css/spectre/spectre.min.css | 1 - Start/Client/wwwroot/index.html | 4 +- 87 files changed, 5912 insertions(+), 5781 deletions(-) create mode 100644 Start/Client/Sass/Spectre/_accordions.scss create mode 100644 Start/Client/Sass/Spectre/_animations.scss create mode 100644 Start/Client/Sass/Spectre/_asian.scss create mode 100644 Start/Client/Sass/Spectre/_autocomplete.scss create mode 100644 Start/Client/Sass/Spectre/_avatars.scss create mode 100644 Start/Client/Sass/Spectre/_badges.scss create mode 100644 Start/Client/Sass/Spectre/_bars.scss create mode 100644 Start/Client/Sass/Spectre/_base.scss create mode 100644 Start/Client/Sass/Spectre/_breadcrumbs.scss create mode 100644 Start/Client/Sass/Spectre/_buttons.scss create mode 100644 Start/Client/Sass/Spectre/_calendars.scss create mode 100644 Start/Client/Sass/Spectre/_cards.scss create mode 100644 Start/Client/Sass/Spectre/_carousels.scss create mode 100644 Start/Client/Sass/Spectre/_chips.scss create mode 100644 Start/Client/Sass/Spectre/_codes.scss create mode 100644 Start/Client/Sass/Spectre/_comparison-sliders.scss create mode 100644 Start/Client/Sass/Spectre/_dropdowns.scss create mode 100644 Start/Client/Sass/Spectre/_empty.scss create mode 100644 Start/Client/Sass/Spectre/_filters.scss create mode 100644 Start/Client/Sass/Spectre/_forms.scss create mode 100644 Start/Client/Sass/Spectre/_hero.scss create mode 100644 Start/Client/Sass/Spectre/_icons.scss create mode 100644 Start/Client/Sass/Spectre/_labels.scss create mode 100644 Start/Client/Sass/Spectre/_layout.scss create mode 100644 Start/Client/Sass/Spectre/_media.scss create mode 100644 Start/Client/Sass/Spectre/_menus.scss create mode 100644 Start/Client/Sass/Spectre/_meters.scss create mode 100644 Start/Client/Sass/Spectre/_mixins.scss create mode 100644 Start/Client/Sass/Spectre/_modals.scss create mode 100755 Start/Client/Sass/Spectre/_navbar.scss create mode 100644 Start/Client/Sass/Spectre/_navs.scss create mode 100644 Start/Client/Sass/Spectre/_normalize.scss create mode 100644 Start/Client/Sass/Spectre/_off-canvas.scss create mode 100644 Start/Client/Sass/Spectre/_pagination.scss create mode 100644 Start/Client/Sass/Spectre/_panels.scss create mode 100644 Start/Client/Sass/Spectre/_parallax.scss create mode 100644 Start/Client/Sass/Spectre/_popovers.scss create mode 100644 Start/Client/Sass/Spectre/_progress.scss create mode 100644 Start/Client/Sass/Spectre/_sliders.scss create mode 100644 Start/Client/Sass/Spectre/_steps.scss create mode 100644 Start/Client/Sass/Spectre/_tables.scss create mode 100644 Start/Client/Sass/Spectre/_tabs.scss create mode 100644 Start/Client/Sass/Spectre/_tiles.scss create mode 100644 Start/Client/Sass/Spectre/_timelines.scss create mode 100644 Start/Client/Sass/Spectre/_toasts.scss create mode 100644 Start/Client/Sass/Spectre/_tooltips.scss create mode 100644 Start/Client/Sass/Spectre/_typography.scss create mode 100644 Start/Client/Sass/Spectre/_utilities.scss create mode 100644 Start/Client/Sass/Spectre/_variables.scss create mode 100644 Start/Client/Sass/Spectre/_viewer-360.scss create mode 100644 Start/Client/Sass/Spectre/icons/_icons-action.scss create mode 100644 Start/Client/Sass/Spectre/icons/_icons-core.scss create mode 100644 Start/Client/Sass/Spectre/icons/_icons-navigation.scss create mode 100644 Start/Client/Sass/Spectre/icons/_icons-object.scss create mode 100644 Start/Client/Sass/Spectre/mixins/_avatar.scss create mode 100644 Start/Client/Sass/Spectre/mixins/_button.scss create mode 100644 Start/Client/Sass/Spectre/mixins/_clearfix.scss create mode 100644 Start/Client/Sass/Spectre/mixins/_color.scss create mode 100644 Start/Client/Sass/Spectre/mixins/_label.scss create mode 100644 Start/Client/Sass/Spectre/mixins/_position.scss create mode 100644 Start/Client/Sass/Spectre/mixins/_shadow.scss create mode 100644 Start/Client/Sass/Spectre/mixins/_text.scss create mode 100644 Start/Client/Sass/Spectre/mixins/_toast.scss create mode 100644 Start/Client/Sass/Spectre/spectre-exp.scss create mode 100644 Start/Client/Sass/Spectre/spectre-icons.scss create mode 100644 Start/Client/Sass/Spectre/spectre.scss create mode 100644 Start/Client/Sass/Spectre/utilities/_colors.scss create mode 100644 Start/Client/Sass/Spectre/utilities/_cursors.scss create mode 100644 Start/Client/Sass/Spectre/utilities/_display.scss create mode 100644 Start/Client/Sass/Spectre/utilities/_divider.scss create mode 100644 Start/Client/Sass/Spectre/utilities/_loading.scss create mode 100644 Start/Client/Sass/Spectre/utilities/_position.scss create mode 100644 Start/Client/Sass/Spectre/utilities/_shapes.scss create mode 100644 Start/Client/Sass/Spectre/utilities/_text.scss create mode 100644 Start/Client/Sass/app.scss delete mode 100644 Start/Client/wwwroot/css/app.css delete mode 100644 Start/Client/wwwroot/css/spectre/spectre-exp.css delete mode 100644 Start/Client/wwwroot/css/spectre/spectre-exp.min.css delete mode 100644 Start/Client/wwwroot/css/spectre/spectre-icons.css delete mode 100644 Start/Client/wwwroot/css/spectre/spectre-icons.min.css delete mode 100644 Start/Client/wwwroot/css/spectre/spectre.css delete mode 100644 Start/Client/wwwroot/css/spectre/spectre.min.css diff --git a/.gitignore b/.gitignore index 1d0af41..761d773 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,7 @@ # Project specific Start/Server/app.db +# Compiled CSS files +Start/Client/wwwRoot/css/ # globs Makefile.in diff --git a/Readme.md b/Readme.md index 2bbbd33..0c18bf5 100644 --- a/Readme.md +++ b/Readme.md @@ -12,26 +12,29 @@ This is a rewrite of my [New Tab Page project](https://github.com/NeilBrommer/Ne ## To Do - [x] Backend data services -- [ ] API Controllers - - [ ] Bookmark containers - - [ ] Bookmark groups - - [ ] Bookmarks +- [x] API Controllers + - [x] Bookmark containers + - [x] Bookmark groups + - [x] Bookmarks - [ ] Manage bookmark containers - [x] Create - [x] Delete - [ ] Edit - [ ] Manage bookmark groups - - [ ] Create - - [ ] Delete + - [x] Create + - [x] Delete - [ ] Edit - [ ] Manage bookmarks - [ ] Create - [ ] Delete - [ ] Edit -- [ ] Use [Refit](https://github.com/reactiveui/refit) for strongly typed API calls +- [x] Use [Refit](https://github.com/reactiveui/refit) for strongly typed API calls - [ ] Support choosing between storing data on the server or in IndexedDB ## Dependancies +- [Dart SASS](https://sass-lang.com/) for compiling SCSS files - [Spectre.css](https://picturepan2.github.io/spectre/) - [Blazored LocalStorage](https://github.com/blazored/LocalStorage) +- [Refit](https://github.com/reactiveui/refit/) +- [Fluxor](https://github.com/mrpmorris/Fluxor/) diff --git a/Start.sln b/Start.sln index 0c2557c..01bb304 100644 --- a/Start.sln +++ b/Start.sln @@ -13,6 +13,7 @@ Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "Solution Items", "Solution ProjectSection(SolutionItems) = preProject .editorconfig = .editorconfig Readme.md = Readme.md + .gitignore = .gitignore EndProjectSection EndProject Global diff --git a/Start/Client/Sass/Spectre/_accordions.scss b/Start/Client/Sass/Spectre/_accordions.scss new file mode 100644 index 0000000..ee57ac0 --- /dev/null +++ b/Start/Client/Sass/Spectre/_accordions.scss @@ -0,0 +1,38 @@ +// Accordions +.accordion { + input:checked ~, + &[open] { + & .accordion-header > { + .icon:first-child { + transform: rotate(90deg); + } + } + + & .accordion-body { + max-height: 50rem; + } + } + + .accordion-header { + display: block; + padding: $unit-1 $unit-2; + + .icon { + transition: transform .25s; + } + } + + .accordion-body { + margin-bottom: $layout-spacing; + max-height: 0; + overflow: hidden; + transition: max-height .25s; + } +} + +// Remove default details marker in Webkit +summary.accordion-header { + &::-webkit-details-marker { + display: none; + } +} diff --git a/Start/Client/Sass/Spectre/_animations.scss b/Start/Client/Sass/Spectre/_animations.scss new file mode 100644 index 0000000..e7fde1a --- /dev/null +++ b/Start/Client/Sass/Spectre/_animations.scss @@ -0,0 +1,20 @@ +// Animations +@keyframes loading { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} + +@keyframes slide-down { + 0% { + opacity: 0; + transform: translateY(-$unit-8); + } + 100% { + opacity: 1; + transform: translateY(0); + } +} diff --git a/Start/Client/Sass/Spectre/_asian.scss b/Start/Client/Sass/Spectre/_asian.scss new file mode 100644 index 0000000..e426f39 --- /dev/null +++ b/Start/Client/Sass/Spectre/_asian.scss @@ -0,0 +1,43 @@ +// Optimized for East Asian CJK +html:lang(zh), +html:lang(zh-Hans), +.lang-zh, +.lang-zh-hans { + font-family: $cjk-zh-hans-font-family; +} + +html:lang(zh-Hant), +.lang-zh-hant { + font-family: $cjk-zh-hant-font-family; +} + +html:lang(ja), +.lang-ja { + font-family: $cjk-jp-font-family; +} + +html:lang(ko), +.lang-ko { + font-family: $cjk-ko-font-family; +} + +:lang(zh), +:lang(ja), +.lang-cjk { + ins, + u { + border-bottom: $border-width solid; + text-decoration: none; + } + + del + del, + del + s, + ins + ins, + ins + u, + s + del, + s + s, + u + ins, + u + u { + margin-left: .125em; + } +} diff --git a/Start/Client/Sass/Spectre/_autocomplete.scss b/Start/Client/Sass/Spectre/_autocomplete.scss new file mode 100644 index 0000000..279fa03 --- /dev/null +++ b/Start/Client/Sass/Spectre/_autocomplete.scss @@ -0,0 +1,47 @@ +// Autocomplete +.form-autocomplete { + position: relative; + + .form-autocomplete-input { + align-content: flex-start; + display: flex; + flex-wrap: wrap; + height: auto; + min-height: $unit-8; + padding: $unit-h; + + &.is-focused { + @include control-shadow(); + border-color: $primary-color; + } + + .form-input { + border-color: transparent; + box-shadow: none; + display: inline-block; + flex: 1 0 auto; + height: $unit-6; + line-height: $unit-4; + margin: $unit-h; + width: auto; + } + } + + .menu { + left: 0; + position: absolute; + top: 100%; + width: 100%; + } + + &.autocomplete-oneline { + .form-autocomplete-input { + flex-wrap: nowrap; + overflow-x: auto; + } + + .chip { + flex: 1 0 auto; + } + } +} diff --git a/Start/Client/Sass/Spectre/_avatars.scss b/Start/Client/Sass/Spectre/_avatars.scss new file mode 100644 index 0000000..b203aa2 --- /dev/null +++ b/Start/Client/Sass/Spectre/_avatars.scss @@ -0,0 +1,77 @@ +// Avatars +.avatar { + @include avatar-base(); + background: $primary-color; + border-radius: 50%; + color: rgba($light-color, .85); + display: inline-block; + font-weight: 300; + line-height: 1.25; + margin: 0; + position: relative; + vertical-align: middle; + + &.avatar-xs { + @include avatar-base($unit-4); + } + &.avatar-sm { + @include avatar-base($unit-6); + } + &.avatar-lg { + @include avatar-base($unit-12); + } + &.avatar-xl { + @include avatar-base($unit-16); + } + + img { + border-radius: 50%; + height: 100%; + position: relative; + width: 100%; + z-index: $zindex-0; + } + + .avatar-icon, + .avatar-presence { + background: $bg-color-light; + bottom: 14.64%; + height: 50%; + padding: $border-width-lg; + position: absolute; + right: 14.64%; + transform: translate(50%, 50%); + width: 50%; + z-index: $zindex-0 + 1; + } + + .avatar-presence { + background: $gray-color; + box-shadow: 0 0 0 $border-width-lg $light-color; + border-radius: 50%; + height: .5em; + width: .5em; + + &.online { + background: $success-color; + } + + &.busy { + background: $error-color; + } + + &.away { + background: $warning-color; + } + } + + &[data-initial]::before { + color: currentColor; + content: attr(data-initial); + left: 50%; + position: absolute; + top: 50%; + transform: translate(-50%, -50%); + z-index: $zindex-0; + } +} \ No newline at end of file diff --git a/Start/Client/Sass/Spectre/_badges.scss b/Start/Client/Sass/Spectre/_badges.scss new file mode 100644 index 0000000..d67f6d1 --- /dev/null +++ b/Start/Client/Sass/Spectre/_badges.scss @@ -0,0 +1,60 @@ +// Badges +.badge { + position: relative; + white-space: nowrap; + + &[data-badge], + &:not([data-badge]) { + &::after { + background: $primary-color; + background-clip: padding-box; + border-radius: .5rem; + box-shadow: 0 0 0 .1rem $bg-color-light; + color: $light-color; + content: attr(data-badge); + display: inline-block; + transform: translate(-.05rem, -.5rem); + } + } + &[data-badge] { + &::after { + font-size: $font-size-sm; + height: .9rem; + line-height: 1; + min-width: .9rem; + padding: .1rem .2rem; + text-align: center; + white-space: nowrap; + } + } + &:not([data-badge]), + &[data-badge=""] { + &::after { + height: 6px; + min-width: 6px; + padding: 0; + width: 6px; + } + } + + // Badges for Buttons + &.btn { + &::after { + position: absolute; + top: 0; + right: 0; + transform: translate(50%, -50%); + } + } + + // Badges for Avatars + &.avatar { + &::after { + position: absolute; + top: 14.64%; + right: 14.64%; + transform: translate(50%, -50%); + z-index: $zindex-1; + } + } +} diff --git a/Start/Client/Sass/Spectre/_bars.scss b/Start/Client/Sass/Spectre/_bars.scss new file mode 100644 index 0000000..47e21c9 --- /dev/null +++ b/Start/Client/Sass/Spectre/_bars.scss @@ -0,0 +1,71 @@ +// Bars +.bar { + background: $bg-color-dark; + border-radius: $border-radius; + display: flex; + flex-wrap: nowrap; + height: $unit-4; + width: 100%; + + &.bar-sm { + height: $unit-1; + } + + // TODO: attr() support + .bar-item { + background: $primary-color; + color: $light-color; + display: block; + font-size: $font-size-sm; + flex-shrink: 0; + line-height: $unit-4; + height: 100%; + position: relative; + text-align: center; + width: 0; + + &:first-child { + border-bottom-left-radius: $border-radius; + border-top-left-radius: $border-radius; + } + &:last-child { + border-bottom-right-radius: $border-radius; + border-top-right-radius: $border-radius; + flex-shrink: 1; + } + } +} + +// Slider bar +.bar-slider { + height: $border-width-lg; + margin: $layout-spacing 0; + position: relative; + + .bar-item { + left: 0; + padding: 0; + position: absolute; + &:not(:last-child):first-child { + background: $bg-color-dark; + z-index: $zindex-0; + } + } + + .bar-slider-btn { + background: $primary-color; + border: 0; + border-radius: 50%; + height: $unit-3; + padding: 0; + position: absolute; + right: 0; + top: 50%; + transform: translate(50%, -50%); + width: $unit-3; + + &:active { + box-shadow: 0 0 0 .1rem $primary-color; + } + } +} diff --git a/Start/Client/Sass/Spectre/_base.scss b/Start/Client/Sass/Spectre/_base.scss new file mode 100644 index 0000000..4e01b20 --- /dev/null +++ b/Start/Client/Sass/Spectre/_base.scss @@ -0,0 +1,44 @@ +// Base +*, +*::before, +*::after { + box-sizing: inherit; +} + +html { + box-sizing: border-box; + font-size: $html-font-size; + line-height: $html-line-height; + -webkit-tap-highlight-color: transparent; +} + +body { + background: $body-bg; + color: $body-font-color; + font-family: $body-font-family; + font-size: $font-size; + overflow-x: hidden; + text-rendering: optimizeLegibility; +} + +a { + color: $link-color; + outline: none; + text-decoration: none; + + &:focus { + @include control-shadow(); + } + + &:focus, + &:hover, + &:active, + &.active { + color: $link-color-dark; + text-decoration: underline; + } + + &:visited { + color: $link-color-light; + } +} diff --git a/Start/Client/Sass/Spectre/_breadcrumbs.scss b/Start/Client/Sass/Spectre/_breadcrumbs.scss new file mode 100644 index 0000000..6a5af31 --- /dev/null +++ b/Start/Client/Sass/Spectre/_breadcrumbs.scss @@ -0,0 +1,29 @@ +// Breadcrumbs +.breadcrumb { + list-style: none; + margin: $unit-1 0; + padding: $unit-1 0; + + .breadcrumb-item { + color: $gray-color-dark; + display: inline-block; + margin: 0; + padding: $unit-1 0; + + &:not(:last-child) { + margin-right: $unit-1; + + a { + color: $gray-color-dark; + } + } + + &:not(:first-child) { + &::before { + color: $gray-color-dark; + content: "/"; + padding-right: $unit-2; + } + } + } +} diff --git a/Start/Client/Sass/Spectre/_buttons.scss b/Start/Client/Sass/Spectre/_buttons.scss new file mode 100644 index 0000000..9158f0f --- /dev/null +++ b/Start/Client/Sass/Spectre/_buttons.scss @@ -0,0 +1,193 @@ +// Buttons +.btn { + appearance: none; + background: $bg-color-light; + border: $border-width solid $primary-color; + border-radius: $border-radius; + color: $primary-color; + cursor: pointer; + display: inline-block; + font-size: $font-size; + height: $control-size; + line-height: $line-height; + outline: none; + padding: $control-padding-y $control-padding-x; + text-align: center; + text-decoration: none; + transition: background .2s, border .2s, box-shadow .2s, color .2s; + user-select: none; + vertical-align: middle; + white-space: nowrap; + &:focus { + @include control-shadow(); + } + &:focus, + &:hover { + background: $secondary-color; + border-color: $primary-color-dark; + text-decoration: none; + } + &:active, + &.active { + background: $primary-color-dark; + border-color: darken($primary-color-dark, 5%); + color: $light-color; + text-decoration: none; + &.loading { + &::after { + border-bottom-color: $light-color; + border-left-color: $light-color; + } + } + } + &[disabled], + &:disabled, + &.disabled { + cursor: default; + opacity: .5; + pointer-events: none; + } + + // Button Primary + &.btn-primary { + background: $primary-color; + border-color: $primary-color-dark; + color: $light-color; + &:focus, + &:hover { + background: darken($primary-color-dark, 2%); + border-color: darken($primary-color-dark, 5%); + color: $light-color; + } + &:active, + &.active { + background: darken($primary-color-dark, 4%); + border-color: darken($primary-color-dark, 7%); + color: $light-color; + } + &.loading { + &::after { + border-bottom-color: $light-color; + border-left-color: $light-color; + } + } + } + + // Button Colors + &.btn-success { + @include button-variant($success-color); + } + + &.btn-error { + @include button-variant($error-color); + } + + // Button Link + &.btn-link { + background: transparent; + border-color: transparent; + color: $link-color; + &:focus, + &:hover, + &:active, + &.active { + color: $link-color-dark; + } + } + + // Button Sizes + &.btn-sm { + font-size: $font-size-sm; + height: $control-size-sm; + padding: $control-padding-y-sm $control-padding-x-sm; + } + + &.btn-lg { + font-size: $font-size-lg; + height: $control-size-lg; + padding: $control-padding-y-lg $control-padding-x-lg; + } + + // Button Block + &.btn-block { + display: block; + width: 100%; + } + + // Button Action + &.btn-action { + width: $control-size; + padding-left: 0; + padding-right: 0; + + &.btn-sm { + width: $control-size-sm; + } + + &.btn-lg { + width: $control-size-lg; + } + } + + // Button Clear + &.btn-clear { + background: transparent; + border: 0; + color: currentColor; + height: $unit-5; + line-height: $unit-4; + margin-left: $unit-1; + margin-right: -2px; + opacity: 1; + padding: $unit-h; + text-decoration: none; + width: $unit-5; + + &:focus, + &:hover { + background: rgba($bg-color, .5); + opacity: .95; + } + + &::before { + content: "\2715"; + } + } +} + +// Button groups +.btn-group { + display: inline-flex; + flex-wrap: wrap; + + .btn { + flex: 1 0 auto; + &:first-child:not(:last-child) { + border-bottom-right-radius: 0; + border-top-right-radius: 0; + } + &:not(:first-child):not(:last-child) { + border-radius: 0; + margin-left: -$border-width; + } + &:last-child:not(:first-child) { + border-bottom-left-radius: 0; + border-top-left-radius: 0; + margin-left: -$border-width; + } + &:focus, + &:hover, + &:active, + &.active { + z-index: $zindex-0; + } + } + + &.btn-group-block { + display: flex; + + .btn { + flex: 1 0 0; + } + } +} diff --git a/Start/Client/Sass/Spectre/_calendars.scss b/Start/Client/Sass/Spectre/_calendars.scss new file mode 100644 index 0000000..1e9fd15 --- /dev/null +++ b/Start/Client/Sass/Spectre/_calendars.scss @@ -0,0 +1,222 @@ +// Calendars +.calendar { + border: $border-width solid $border-color; + border-radius: $border-radius; + display: block; + min-width: 280px; + + .calendar-nav { + align-items: center; + background: $bg-color; + border-top-left-radius: $border-radius; + border-top-right-radius: $border-radius; + display: flex; + font-size: $font-size-lg; + padding: $layout-spacing; + } + + .calendar-header, + .calendar-body { + display: flex; + flex-wrap: wrap; + justify-content: center; + padding: $layout-spacing 0; + + .calendar-date { + flex: 0 0 14.28%; // 7 calendar-items each row + max-width: 14.28%; + } + } + + .calendar-header { + background: $bg-color; + border-bottom: $border-width solid $border-color; + color: $gray-color; + font-size: $font-size-sm; + text-align: center; + } + + .calendar-body { + color: $gray-color-dark; + } + + .calendar-date { + border: 0; + padding: $unit-1; + + .date-item { + appearance: none; + background: transparent; + border: $border-width solid transparent; + border-radius: 50%; + color: $gray-color-dark; + cursor: pointer; + font-size: $font-size-sm; + height: $unit-7; + line-height: $unit-5; + outline: none; + padding: $unit-h; + position: relative; + text-align: center; + text-decoration: none; + transition: background .2s, border .2s, box-shadow .2s, color .2s; + vertical-align: middle; + white-space: nowrap; + width: $unit-7; + + &.date-today { + border-color: $secondary-color-dark; + color: $primary-color; + } + + &:focus { + @include control-shadow(); + } + + &:focus, + &:hover { + background: $secondary-color-light; + border-color: $secondary-color-dark; + color: $primary-color; + text-decoration: none; + } + &:active, + &.active { + background: $primary-color-dark; + border-color: darken($primary-color-dark, 5%); + color: $light-color; + } + + // Calendar badge support + &.badge { + &::after { + position: absolute; + top: 3px; + right: 3px; + transform: translate(50%, -50%); + } + } + } + + .date-item, + .calendar-event { + &:disabled, + &.disabled { + cursor: default; + opacity: .25; + pointer-events: none; + } + } + + &.prev-month, + &.next-month { + .date-item, + .calendar-event { + opacity: .25; + } + } + } + + .calendar-range { + position: relative; + + &::before { + background: $secondary-color; + content: ""; + height: $unit-7; + left: 0; + position: absolute; + right: 0; + top: 50%; + transform: translateY(-50%); + } + &.range-start { + &::before { + left: 50%; + } + } + &.range-end { + &::before { + right: 50%; + } + } + + &.range-start, + &.range-end { + .date-item { + background: $primary-color-dark; + border-color: darken($primary-color-dark, 5%); + color: $light-color; + } + } + + .date-item { + color: $primary-color; + } + } + + // Calendars size + &.calendar-lg { + .calendar-body { + padding: 0; + + .calendar-date { + border-bottom: $border-width solid $border-color; + border-right: $border-width solid $border-color; + display: flex; + flex-direction: column; + height: 5.5rem; + padding: 0; + + &:nth-child(7n) { + border-right: 0; + } + &:nth-last-child(-n+7) { + border-bottom: 0; + } + } + } + + .date-item { + align-self: flex-end; + height: $unit-7; + margin-right: $layout-spacing-sm; + margin-top: $layout-spacing-sm; + } + + .calendar-range { + &::before { + top: 19px; + } + &.range-start { + &::before { + left: auto; + width: 19px; + } + } + &.range-end { + &::before { + right: 19px; + } + } + } + + .calendar-events { + flex-grow: 1; + line-height: 1; + overflow-y: auto; + padding: $layout-spacing-sm; + } + + .calendar-event { + border-radius: $border-radius; + font-size: $font-size-sm; + display: block; + margin: $unit-h auto; + overflow: hidden; + padding: 3px 4px; + text-overflow: ellipsis; + white-space: nowrap; + } + } +} diff --git a/Start/Client/Sass/Spectre/_cards.scss b/Start/Client/Sass/Spectre/_cards.scss new file mode 100644 index 0000000..6b712e1 --- /dev/null +++ b/Start/Client/Sass/Spectre/_cards.scss @@ -0,0 +1,43 @@ +// Cards +.card { + background: $bg-color-light; + border: $border-width solid $border-color; + border-radius: $border-radius; + display: flex; + flex-direction: column; + + .card-header, + .card-body, + .card-footer { + padding: $layout-spacing-lg; + padding-bottom: 0; + + &:last-child { + padding-bottom: $layout-spacing-lg; + } + } + + .card-body { + flex: 1 1 auto; + } + + .card-image { + padding-top: $layout-spacing-lg; + + &:first-child { + padding-top: 0; + + img { + border-top-left-radius: $border-radius; + border-top-right-radius: $border-radius; + } + } + + &:last-child { + img { + border-bottom-left-radius: $border-radius; + border-bottom-right-radius: $border-radius; + } + } + } +} diff --git a/Start/Client/Sass/Spectre/_carousels.scss b/Start/Client/Sass/Spectre/_carousels.scss new file mode 100644 index 0000000..66dc51b --- /dev/null +++ b/Start/Client/Sass/Spectre/_carousels.scss @@ -0,0 +1,136 @@ +// Carousels +// The number of carousel images +$carousel-number: 8; + +%carousel-image-checked { + animation: carousel-slidein .75s ease-in-out 1; + opacity: 1; + z-index: $zindex-1; +} + +%carousel-nav-checked { + color: $gray-color-light; +} + +.carousel { + background: $bg-color; + display: block; + overflow: hidden; + position: relative; + width: 100%; + -webkit-overflow-scrolling: touch; + z-index: $zindex-0; + + .carousel-container { + height: 100%; + left: 0; + position: relative; + &::before { + content: ""; + display: block; + padding-bottom: 56.25%; + } + + .carousel-item { + animation: carousel-slideout 1s ease-in-out 1; + height: 100%; + left: 0; + margin: 0; + opacity: 0; + position: absolute; + top: 0; + width: 100%; + + &:hover { + .item-prev, + .item-next { + opacity: 1; + } + } + } + + .item-prev, + .item-next { + background: rgba($gray-color-light, .25); + border-color: rgba($gray-color-light, .5); + color: $gray-color-light; + opacity: 0; + position: absolute; + top: 50%; + transition: all .4s; + transform: translateY(-50%); + z-index: $zindex-1; + } + .item-prev { + left: 1rem; + } + .item-next { + right: 1rem; + } + } + + .carousel-locator { + @for $i from 1 through ($carousel-number) { + &:nth-of-type(#{$i}):checked ~ .carousel-container .carousel-item:nth-of-type(#{$i}) { + @extend %carousel-image-checked; + } + } + + @for $i from 1 through ($carousel-number) { + &:nth-of-type(#{$i}):checked ~ .carousel-nav .nav-item:nth-of-type(#{$i}) { + @extend %carousel-nav-checked; + } + } + } + + .carousel-nav { + bottom: $layout-spacing; + display: flex; + justify-content: center; + left: 50%; + position: absolute; + transform: translateX(-50%); + width: 10rem; + z-index: $zindex-1; + + .nav-item { + color: rgba($gray-color-light, .5); + display: block; + flex: 1 0 auto; + height: $unit-8; + margin: $unit-1; + max-width: 2.5rem; + position: relative; + + &::before { + background: currentColor; + content: ""; + display: block; + height: $unit-h; + position: absolute; + top: .5rem; + width: 100%; + } + } + } +} + +@keyframes carousel-slidein { + 0% { + transform: translateX(100%); + } + 100% { + transform: translateX(0); + } +} + +@keyframes carousel-slideout { + 0% { + opacity: 1; + transform: translateX(0); + } + 100% { + opacity: 1; + transform: translateX(-50%); + } +} diff --git a/Start/Client/Sass/Spectre/_chips.scss b/Start/Client/Sass/Spectre/_chips.scss new file mode 100644 index 0000000..6729c56 --- /dev/null +++ b/Start/Client/Sass/Spectre/_chips.scss @@ -0,0 +1,33 @@ +// Chips +.chip { + align-items: center; + background: $bg-color-dark; + border-radius: 5rem; + display: inline-flex; + font-size: 90%; + height: $unit-6; + line-height: $unit-4; + margin: $unit-h; + max-width: $control-width-sm; + overflow: hidden; + padding: $unit-1 $unit-2; + text-decoration: none; + text-overflow: ellipsis; + vertical-align: middle; + white-space: nowrap; + + &.active { + background: $primary-color; + color: $light-color; + } + + .avatar { + margin-left: -$unit-2; + margin-right: $unit-1; + } + + .btn-clear { + border-radius: 50%; + transform: scale(.75); + } +} diff --git a/Start/Client/Sass/Spectre/_codes.scss b/Start/Client/Sass/Spectre/_codes.scss new file mode 100644 index 0000000..817452b --- /dev/null +++ b/Start/Client/Sass/Spectre/_codes.scss @@ -0,0 +1,31 @@ +// Codes +code { + @include label-base(); + @include label-variant($code-color, lighten($code-color, 42.5%)); + font-size: 85%; +} + +.code { + border-radius: $border-radius; + color: $body-font-color; + position: relative; + + &::before { + color: $gray-color; + content: attr(data-lang); + font-size: $font-size-sm; + position: absolute; + right: $layout-spacing; + top: $unit-h; + } + + code { + background: $bg-color; + color: inherit; + display: block; + line-height: 1.5; + overflow-x: auto; + padding: 1rem; + width: 100%; + } +} diff --git a/Start/Client/Sass/Spectre/_comparison-sliders.scss b/Start/Client/Sass/Spectre/_comparison-sliders.scss new file mode 100644 index 0000000..ec3609b --- /dev/null +++ b/Start/Client/Sass/Spectre/_comparison-sliders.scss @@ -0,0 +1,116 @@ +// Image comparison slider +// Credit: http://codepen.io/solipsistacp/pen/Gpmaq +.comparison-slider { + height: 50vh; + overflow: hidden; + position: relative; + width: 100%; + -webkit-overflow-scrolling: touch; + + .comparison-before, + .comparison-after { + height: 100%; + left: 0; + margin: 0; + overflow: hidden; + position: absolute; + top: 0; + + img { + height: 100%; + object-fit: cover; + object-position: left center; + position: absolute; + width: 100%; + } + } + + .comparison-before { + width: 100%; + z-index: 1; + + .comparison-label { + right: $unit-4; + } + } + + .comparison-after { + max-width: 100%; + min-width: 0; + z-index: 2; + + &::before { + background: transparent; + content: ""; + cursor: default; + height: 100%; + left: 0; + position: absolute; + right: $unit-4; + top: 0; + z-index: $zindex-0; + } + + &::after { + background: currentColor; + border-radius: 50%; + box-shadow: 0 -5px, 0 5px; + color: $light-color; + content: ""; + height: 3px; + pointer-events: none; + position: absolute; + right: $unit-2; + top: 50%; + transform: translate(50%, -50%); + width: 3px; + } + + .comparison-label { + left: $unit-4; + } + } + + .comparison-resizer { + animation: first-run 1.5s 1 ease-in-out; + cursor: ew-resize; + height: $unit-4; + left: 0; + max-width: 100%; + min-width: $unit-4; + opacity: 0; + outline: none; + position: relative; + resize: horizontal; + top: 50%; + transform: translateY(-50%) scaleY(30); + width: 0; + } + + .comparison-label { + background: rgba($dark-color, .5); + bottom: $unit-4; + color: $light-color; + padding: $unit-1 $unit-2; + position: absolute; + user-select: none; + } +} + +@keyframes first-run { + 0% { + width: 0; + } + 25% { + width: $unit-12; + } + 50% { + width: $unit-4; + } + 75% { + width: $unit-6; + } + 100% { + width: 0; + } +} diff --git a/Start/Client/Sass/Spectre/_dropdowns.scss b/Start/Client/Sass/Spectre/_dropdowns.scss new file mode 100644 index 0000000..324440b --- /dev/null +++ b/Start/Client/Sass/Spectre/_dropdowns.scss @@ -0,0 +1,36 @@ +// Dropdown +.dropdown { + display: inline-block; + position: relative; + + .menu { + animation: slide-down .15s ease 1; + display: none; + left: 0; + max-height: 50vh; + overflow-y: auto; + position: absolute; + top: 100%; + } + + &.dropdown-right { + .menu { + left: auto; + right: 0; + } + } + + &.active .menu, + .dropdown-toggle:focus + .menu, + .menu:hover { + display: block; + } + + // Fix dropdown-toggle border radius in button groups + .btn-group { + .dropdown-toggle:nth-last-child(2) { + border-bottom-right-radius: $border-radius; + border-top-right-radius: $border-radius; + } + } +} diff --git a/Start/Client/Sass/Spectre/_empty.scss b/Start/Client/Sass/Spectre/_empty.scss new file mode 100644 index 0000000..accba9c --- /dev/null +++ b/Start/Client/Sass/Spectre/_empty.scss @@ -0,0 +1,21 @@ +// Empty states (or Blank slates) +.empty { + background: $bg-color; + border-radius: $border-radius; + color: $gray-color-dark; + text-align: center; + padding: $unit-16 $unit-8; + + .empty-icon { + margin-bottom: $layout-spacing-lg; + } + + .empty-title, + .empty-subtitle { + margin: $layout-spacing auto; + } + + .empty-action { + margin-top: $layout-spacing-lg; + } +} diff --git a/Start/Client/Sass/Spectre/_filters.scss b/Start/Client/Sass/Spectre/_filters.scss new file mode 100644 index 0000000..37ccc89 --- /dev/null +++ b/Start/Client/Sass/Spectre/_filters.scss @@ -0,0 +1,37 @@ +// Filters +// The number of filter options +$filter-number: 8 !default; + +%filter-checked-nav { + background: $primary-color; + color: $light-color; +} + +%filter-checked-body { + display: none; +} + +.filter { + .filter-nav { + margin: $layout-spacing 0; + } + + .filter-body { + display: flex; + flex-wrap: wrap; + } + + .filter-tag { + @for $i from 0 through ($filter-number) { + &#tag-#{$i}:checked ~ .filter-nav .chip[for="tag-#{$i}"] { + @extend %filter-checked-nav; + } + } + + @for $i from 1 through ($filter-number) { + &#tag-#{$i}:checked ~ .filter-body .filter-item:not([data-tag~="tag-#{$i}"]) { + @extend %filter-checked-body; + } + } + } +} diff --git a/Start/Client/Sass/Spectre/_forms.scss b/Start/Client/Sass/Spectre/_forms.scss new file mode 100644 index 0000000..20a6b4f --- /dev/null +++ b/Start/Client/Sass/Spectre/_forms.scss @@ -0,0 +1,555 @@ +// Forms +.form-group { + &:not(:last-child) { + margin-bottom: $layout-spacing; + } +} + +fieldset { + margin-bottom: $layout-spacing-lg; +} + +legend { + font-size: $font-size-lg; + font-weight: 500; + margin-bottom: $layout-spacing-lg; +} + +// Form element: Label +.form-label { + display: block; + line-height: $line-height; + padding: $control-padding-y + $border-width 0; + + &.label-sm { + font-size: $font-size-sm; + padding: $control-padding-y-sm + $border-width 0; + } + + &.label-lg { + font-size: $font-size-lg; + padding: $control-padding-y-lg + $border-width 0; + } +} + +// Form element: Input +.form-input { + appearance: none; + background: $bg-color-light; + background-image: none; + border: $border-width solid $border-color-dark; + border-radius: $border-radius; + color: $body-font-color; + display: block; + font-size: $font-size; + height: $control-size; + line-height: $line-height; + max-width: 100%; + outline: none; + padding: $control-padding-y $control-padding-x; + position: relative; + transition: background .2s, border .2s, box-shadow .2s, color .2s; + width: 100%; + &:focus { + @include control-shadow(); + border-color: $primary-color; + } + &::placeholder { + color: $gray-color; + } + + // Input sizes + &.input-sm { + font-size: $font-size-sm; + height: $control-size-sm; + padding: $control-padding-y-sm $control-padding-x-sm; + } + + &.input-lg { + font-size: $font-size-lg; + height: $control-size-lg; + padding: $control-padding-y-lg $control-padding-x-lg; + } + + &.input-inline { + display: inline-block; + vertical-align: middle; + width: auto; + } + + // Input types + &[type="file"] { + height: auto; + } +} + +// Form element: Textarea +textarea.form-input { + &, + &.input-lg, + &.input-sm { + height: auto; + } +} + +// Form element: Input hint +.form-input-hint { + color: $gray-color; + font-size: $font-size-sm; + margin-top: $unit-1; + + .has-success &, + .is-success + & { + color: $success-color; + } + + .has-error &, + .is-error + & { + color: $error-color; + } +} + +// Form element: Select +.form-select { + appearance: none; + border: $border-width solid $border-color-dark; + border-radius: $border-radius; + color: inherit; + font-size: $font-size; + height: $control-size; + line-height: $line-height; + outline: none; + padding: $control-padding-y $control-padding-x; + vertical-align: middle; + width: 100%; + background: $bg-color-light; + &:focus { + @include control-shadow(); + border-color: $primary-color; + } + &::-ms-expand { + display: none; + } + + // Select sizes + &.select-sm { + font-size: $font-size-sm; + height: $control-size-sm; + padding: $control-padding-y-sm ($control-icon-size + $control-padding-x-sm) $control-padding-y-sm $control-padding-x-sm; + } + + &.select-lg { + font-size: $font-size-lg; + height: $control-size-lg; + padding: $control-padding-y-lg ($control-icon-size + $control-padding-x-lg) $control-padding-y-lg $control-padding-x-lg; + } + + // Multiple select + &[size], + &[multiple] { + height: auto; + padding: $control-padding-y $control-padding-x; + + option { + padding: $unit-h $unit-1; + } + } + &:not([multiple]):not([size]) { + background: $bg-color-light url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%204%205'%3E%3Cpath%20fill='%23667189'%20d='M2%200L0%202h4zm0%205L0%203h4z'/%3E%3C/svg%3E") no-repeat right .35rem center / .4rem .5rem; + padding-right: $control-icon-size + $control-padding-x; + } +} + +// Form Icons +.has-icon-left, +.has-icon-right { + position: relative; + + .form-icon { + height: $control-icon-size; + margin: 0 $control-padding-y; + position: absolute; + top: 50%; + transform: translateY(-50%); + width: $control-icon-size; + z-index: $zindex-0 + 1; + } +} + +.has-icon-left { + .form-icon { + left: $border-width; + } + + .form-input { + padding-left: $control-icon-size + $control-padding-y * 2; + } +} + +.has-icon-right { + .form-icon { + right: $border-width; + } + + .form-input { + padding-right: $control-icon-size + $control-padding-y * 2; + } +} + +// Form element: Checkbox and Radio +.form-checkbox, +.form-radio, +.form-switch { + display: block; + line-height: $line-height; + margin: ($control-size - $control-size-sm) / 2 0; + min-height: $control-size-sm; + padding: (($control-size-sm - $line-height) / 2) $control-padding-x (($control-size-sm - $line-height) / 2) ($control-icon-size + $control-padding-x); + position: relative; + + input { + clip: rect(0, 0, 0, 0); + height: 1px; + margin: -1px; + overflow: hidden; + position: absolute; + width: 1px; + &:focus + .form-icon { + @include control-shadow(); + border-color: $primary-color; + } + &:checked + .form-icon { + background: $primary-color; + border-color: $primary-color; + } + } + + .form-icon { + border: $border-width solid $border-color-dark; + cursor: pointer; + display: inline-block; + position: absolute; + transition: background .2s, border .2s, box-shadow .2s, color .2s; + } + + // Input checkbox, radio and switch sizes + &.input-sm { + font-size: $font-size-sm; + margin: 0; + } + + &.input-lg { + font-size: $font-size-lg; + margin: ($control-size-lg - $control-size-sm) / 2 0; + } +} + +.form-checkbox, +.form-radio { + .form-icon { + background: $bg-color-light; + height: $control-icon-size; + left: 0; + top: ($control-size-sm - $control-icon-size) / 2; + width: $control-icon-size; + } + + input { + &:active + .form-icon { + background: $bg-color-dark; + } + } +} +.form-checkbox { + .form-icon { + border-radius: $border-radius; + } + + input { + &:checked + .form-icon { + &::before { + background-clip: padding-box; + border: $border-width-lg solid $light-color; + border-left-width: 0; + border-top-width: 0; + content: ""; + height: 9px; + left: 50%; + margin-left: -3px; + margin-top: -6px; + position: absolute; + top: 50%; + transform: rotate(45deg); + width: 6px; + } + } + &:indeterminate + .form-icon { + background: $primary-color; + border-color: $primary-color; + &::before { + background: $bg-color-light; + content: ""; + height: 2px; + left: 50%; + margin-left: -5px; + margin-top: -1px; + position: absolute; + top: 50%; + width: 10px; + } + } + } +} +.form-radio { + .form-icon { + border-radius: 50%; + } + + input { + &:checked + .form-icon { + &::before { + background: $bg-color-light; + border-radius: 50%; + content: ""; + height: 6px; + left: 50%; + position: absolute; + top: 50%; + transform: translate(-50%, -50%); + width: 6px; + } + } + } +} + +// Form element: Switch +.form-switch { + padding-left: ($unit-8 + $control-padding-x); + + .form-icon { + background: $gray-color; + background-clip: padding-box; + border-radius: $unit-2 + $border-width; + height: $unit-4 + $border-width * 2; + left: 0; + top: ($control-size-sm - $unit-4) / 2 - $border-width; + width: $unit-8; + &::before { + background: $bg-color-light; + border-radius: 50%; + content: ""; + display: block; + height: $unit-4; + left: 0; + position: absolute; + top: 0; + transition: background .2s, border .2s, box-shadow .2s, color .2s, left .2s; + width: $unit-4; + } + } + + input { + &:checked + .form-icon { + &::before { + left: 14px; + } + } + &:active + .form-icon { + &::before { + background: $bg-color; + } + } + } +} + +// Form element: Input groups +.input-group { + display: flex; + + .input-group-addon { + background: $bg-color; + border: $border-width solid $border-color-dark; + border-radius: $border-radius; + line-height: $line-height; + padding: $control-padding-y $control-padding-x; + white-space: nowrap; + + &.addon-sm { + font-size: $font-size-sm; + padding: $control-padding-y-sm $control-padding-x-sm; + } + + &.addon-lg { + font-size: $font-size-lg; + padding: $control-padding-y-lg $control-padding-x-lg; + } + } + + .form-input, + .form-select { + flex: 1 1 auto; + width: 1%; + } + + .input-group-btn { + z-index: $zindex-0; + } + + .form-input, + .form-select, + .input-group-addon, + .input-group-btn { + &:first-child:not(:last-child) { + border-bottom-right-radius: 0; + border-top-right-radius: 0; + } + &:not(:first-child):not(:last-child) { + border-radius: 0; + margin-left: -$border-width; + } + &:last-child:not(:first-child) { + border-bottom-left-radius: 0; + border-top-left-radius: 0; + margin-left: -$border-width; + } + &:focus { + z-index: $zindex-0 + 1; + } + } + + .form-select { + width: auto; + } + + &.input-inline { + display: inline-flex; + } +} + +// Form validation states +.form-input, +.form-select { + .has-success &, + &.is-success { + background: lighten($success-color, 53%); + border-color: $success-color; + &:focus { + @include control-shadow($success-color); + } + } + + .has-error &, + &.is-error { + background: lighten($error-color, 53%); + border-color: $error-color; + &:focus { + @include control-shadow($error-color); + } + } +} + +.form-checkbox, +.form-radio, +.form-switch { + .has-error &, + &.is-error { + .form-icon { + border-color: $error-color; + } + + input { + &:checked + .form-icon { + background: $error-color; + border-color: $error-color; + } + + &:focus + .form-icon { + @include control-shadow($error-color); + border-color: $error-color; + } + } + } +} + +.form-checkbox { + .has-error &, + &.is-error { + input { + &:indeterminate + .form-icon { + background: $error-color; + border-color: $error-color; + } + } + } +} + +// validation based on :placeholder-shown (Edge doesn't support it yet) +.form-input { + &:not(:placeholder-shown) { + &:invalid { + border-color: $error-color; + &:focus { + @include control-shadow($error-color); + background: lighten($error-color, 53%); + } + + & + .form-input-hint { + color: $error-color; + } + } + } +} + +// Form disabled and readonly +.form-input, +.form-select { + &:disabled, + &.disabled { + background-color: $bg-color-dark; + cursor: not-allowed; + opacity: .5; + } +} + +.form-input { + &[readonly] { + background-color: $bg-color; + } +} + +input { + &:disabled, + &.disabled { + & + .form-icon { + background: $bg-color-dark; + cursor: not-allowed; + opacity: .5; + } + } +} + +.form-switch { + input { + &:disabled, + &.disabled { + & + .form-icon::before { + background: $bg-color-light; + } + } + } +} + +// Form horizontal +.form-horizontal { + padding: $layout-spacing 0; + + .form-group { + display: flex; + flex-wrap: wrap; + } +} + +// Form inline +.form-inline { + display: inline-block; +} diff --git a/Start/Client/Sass/Spectre/_hero.scss b/Start/Client/Sass/Spectre/_hero.scss new file mode 100644 index 0000000..0044461 --- /dev/null +++ b/Start/Client/Sass/Spectre/_hero.scss @@ -0,0 +1,22 @@ +// Hero +.hero { + display: flex; + flex-direction: column; + justify-content: space-between; + padding-bottom: 4rem; + padding-top: 4rem; + + &.hero-sm { + padding-bottom: 2rem; + padding-top: 2rem; + } + + &.hero-lg { + padding-bottom: 8rem; + padding-top: 8rem; + } + + .hero-body { + padding: $layout-spacing; + } +} \ No newline at end of file diff --git a/Start/Client/Sass/Spectre/_icons.scss b/Start/Client/Sass/Spectre/_icons.scss new file mode 100644 index 0000000..4f3c5ce --- /dev/null +++ b/Start/Client/Sass/Spectre/_icons.scss @@ -0,0 +1,5 @@ +// CSS Icons +@import "icons/icons-core"; +@import "icons/icons-navigation"; +@import "icons/icons-action"; +@import "icons/icons-object"; \ No newline at end of file diff --git a/Start/Client/Sass/Spectre/_labels.scss b/Start/Client/Sass/Spectre/_labels.scss new file mode 100644 index 0000000..ca693cd --- /dev/null +++ b/Start/Client/Sass/Spectre/_labels.scss @@ -0,0 +1,34 @@ +// Labels +.label { + @include label-base(); + @include label-variant(lighten($body-font-color, 5%), $bg-color-dark); + display: inline-block; + + // Label rounded + &.label-rounded { + border-radius: 5rem; + padding-left: .4rem; + padding-right: .4rem; + } + + // Label colors + &.label-primary { + @include label-variant($light-color, $primary-color); + } + + &.label-secondary { + @include label-variant($primary-color, $secondary-color); + } + + &.label-success { + @include label-variant($light-color, $success-color); + } + + &.label-warning { + @include label-variant($light-color, $warning-color); + } + + &.label-error { + @include label-variant($light-color, $error-color); + } +} diff --git a/Start/Client/Sass/Spectre/_layout.scss b/Start/Client/Sass/Spectre/_layout.scss new file mode 100644 index 0000000..e6bad9a --- /dev/null +++ b/Start/Client/Sass/Spectre/_layout.scss @@ -0,0 +1,446 @@ +// Layout +.container { + margin-left: auto; + margin-right: auto; + padding-left: $layout-spacing; + padding-right: $layout-spacing; + width: 100%; + + $grid-spacing: ($layout-spacing / ($layout-spacing * 0 + 1)) * $html-font-size; + + &.grid-xl { + max-width: $grid-spacing * 2 + $size-xl; + } + + &.grid-lg { + max-width: $grid-spacing * 2 + $size-lg; + } + + &.grid-md { + max-width: $grid-spacing * 2 + $size-md; + } + + &.grid-sm { + max-width: $grid-spacing * 2 + $size-sm; + } + + &.grid-xs { + max-width: $grid-spacing * 2 + $size-xs; + } +} + +// Responsive breakpoint system +.show-xs, +.show-sm, +.show-md, +.show-lg, +.show-xl { + display: none !important; +} + +// Responsive grid system +.cols, +.columns { + display: flex; + flex-wrap: wrap; + margin-left: -$layout-spacing; + margin-right: -$layout-spacing; + + &.col-gapless { + margin-left: 0; + margin-right: 0; + + & > .column { + padding-left: 0; + padding-right: 0; + } + } + &.col-oneline { + flex-wrap: nowrap; + overflow-x: auto; + } +} +[class~="col-"], +.column { + flex: 1; + max-width: 100%; + padding-left: $layout-spacing; + padding-right: $layout-spacing; + + &.col-12, + &.col-11, + &.col-10, + &.col-9, + &.col-8, + &.col-7, + &.col-6, + &.col-5, + &.col-4, + &.col-3, + &.col-2, + &.col-1, + &.col-auto { + flex: none; + } +} +.col-12 { + width: 100%; +} +.col-11 { + width: 91.66666667%; +} +.col-10 { + width: 83.33333333%; +} +.col-9 { + width: 75%; +} +.col-8 { + width: 66.66666667%; +} +.col-7 { + width: 58.33333333%; +} +.col-6 { + width: 50%; +} +.col-5 { + width: 41.66666667%; +} +.col-4 { + width: 33.33333333%; +} +.col-3 { + width: 25%; +} +.col-2 { + width: 16.66666667%; +} +.col-1 { + width: 8.33333333%; +} +.col-auto { + flex: 0 0 auto; + max-width: none; + width: auto; +} +.col-mx-auto { + margin-left: auto; + margin-right: auto; +} +.col-ml-auto { + margin-left: auto; +} +.col-mr-auto { + margin-right: auto; +} +@media (max-width: $size-xl) { + .col-xl-12, + .col-xl-11, + .col-xl-10, + .col-xl-9, + .col-xl-8, + .col-xl-7, + .col-xl-6, + .col-xl-5, + .col-xl-4, + .col-xl-3, + .col-xl-2, + .col-xl-1, + .col-xl-auto { + flex: none; + } + .col-xl-12 { + width: 100%; + } + .col-xl-11 { + width: 91.66666667%; + } + .col-xl-10 { + width: 83.33333333%; + } + .col-xl-9 { + width: 75%; + } + .col-xl-8 { + width: 66.66666667%; + } + .col-xl-7 { + width: 58.33333333%; + } + .col-xl-6 { + width: 50%; + } + .col-xl-5 { + width: 41.66666667%; + } + .col-xl-4 { + width: 33.33333333%; + } + .col-xl-3 { + width: 25%; + } + .col-xl-2 { + width: 16.66666667%; + } + .col-xl-1 { + width: 8.33333333%; + } + .col-xl-auto { + width: auto; + } + .hide-xl { + display: none !important; + } + .show-xl { + display: block !important; + } +} +@media (max-width: $size-lg) { + .col-lg-12, + .col-lg-11, + .col-lg-10, + .col-lg-9, + .col-lg-8, + .col-lg-7, + .col-lg-6, + .col-lg-5, + .col-lg-4, + .col-lg-3, + .col-lg-2, + .col-lg-1, + .col-lg-auto { + flex: none; + } + .col-lg-12 { + width: 100%; + } + .col-lg-11 { + width: 91.66666667%; + } + .col-lg-10 { + width: 83.33333333%; + } + .col-lg-9 { + width: 75%; + } + .col-lg-8 { + width: 66.66666667%; + } + .col-lg-7 { + width: 58.33333333%; + } + .col-lg-6 { + width: 50%; + } + .col-lg-5 { + width: 41.66666667%; + } + .col-lg-4 { + width: 33.33333333%; + } + .col-lg-3 { + width: 25%; + } + .col-lg-2 { + width: 16.66666667%; + } + .col-lg-1 { + width: 8.33333333%; + } + .col-lg-auto { + width: auto; + } + .hide-lg { + display: none !important; + } + .show-lg { + display: block !important; + } +} +@media (max-width: $size-md) { + .col-md-12, + .col-md-11, + .col-md-10, + .col-md-9, + .col-md-8, + .col-md-7, + .col-md-6, + .col-md-5, + .col-md-4, + .col-md-3, + .col-md-2, + .col-md-1, + .col-md-auto { + flex: none; + } + .col-md-12 { + width: 100%; + } + .col-md-11 { + width: 91.66666667%; + } + .col-md-10 { + width: 83.33333333%; + } + .col-md-9 { + width: 75%; + } + .col-md-8 { + width: 66.66666667%; + } + .col-md-7 { + width: 58.33333333%; + } + .col-md-6 { + width: 50%; + } + .col-md-5 { + width: 41.66666667%; + } + .col-md-4 { + width: 33.33333333%; + } + .col-md-3 { + width: 25%; + } + .col-md-2 { + width: 16.66666667%; + } + .col-md-1 { + width: 8.33333333%; + } + .col-md-auto { + width: auto; + } + .hide-md { + display: none !important; + } + .show-md { + display: block !important; + } +} +@media (max-width: $size-sm) { + .col-sm-12, + .col-sm-11, + .col-sm-10, + .col-sm-9, + .col-sm-8, + .col-sm-7, + .col-sm-6, + .col-sm-5, + .col-sm-4, + .col-sm-3, + .col-sm-2, + .col-sm-1, + .col-sm-auto { + flex: none; + } + .col-sm-12 { + width: 100%; + } + .col-sm-11 { + width: 91.66666667%; + } + .col-sm-10 { + width: 83.33333333%; + } + .col-sm-9 { + width: 75%; + } + .col-sm-8 { + width: 66.66666667%; + } + .col-sm-7 { + width: 58.33333333%; + } + .col-sm-6 { + width: 50%; + } + .col-sm-5 { + width: 41.66666667%; + } + .col-sm-4 { + width: 33.33333333%; + } + .col-sm-3 { + width: 25%; + } + .col-sm-2 { + width: 16.66666667%; + } + .col-sm-1 { + width: 8.33333333%; + } + .col-sm-auto { + width: auto; + } + .hide-sm { + display: none !important; + } + .show-sm { + display: block !important; + } +} +@media (max-width: $size-xs) { + .col-xs-12, + .col-xs-11, + .col-xs-10, + .col-xs-9, + .col-xs-8, + .col-xs-7, + .col-xs-6, + .col-xs-5, + .col-xs-4, + .col-xs-3, + .col-xs-2, + .col-xs-1, + .col-xs-auto { + flex: none; + } + .col-xs-12 { + width: 100%; + } + .col-xs-11 { + width: 91.66666667%; + } + .col-xs-10 { + width: 83.33333333%; + } + .col-xs-9 { + width: 75%; + } + .col-xs-8 { + width: 66.66666667%; + } + .col-xs-7 { + width: 58.33333333%; + } + .col-xs-6 { + width: 50%; + } + .col-xs-5 { + width: 41.66666667%; + } + .col-xs-4 { + width: 33.33333333%; + } + .col-xs-3 { + width: 25%; + } + .col-xs-2 { + width: 16.66666667%; + } + .col-xs-1 { + width: 8.33333333%; + } + .col-xs-auto { + width: auto; + } + .hide-xs { + display: none !important; + } + .show-xs { + display: block !important; + } +} diff --git a/Start/Client/Sass/Spectre/_media.scss b/Start/Client/Sass/Spectre/_media.scss new file mode 100644 index 0000000..4029e4c --- /dev/null +++ b/Start/Client/Sass/Spectre/_media.scss @@ -0,0 +1,75 @@ +// Media +// Image responsive +.img-responsive { + display: block; + height: auto; + max-width: 100%; +} + +// object-fit support is coming to Microsoft Edge +// https://developer.microsoft.com/en-us/microsoft-edge/platform/status/objectfitandobjectposition/ +.img-fit-cover { + object-fit: cover; +} + +.img-fit-contain { + object-fit: contain; +} + +// Video responsive +.video-responsive { + display: block; + overflow: hidden; + padding: 0; + position: relative; + width: 100%; + &::before { + content: ""; + display: block; + padding-bottom: 56.25%; // Default ratio 16:9, you can calculate this value by dividing 9 by 16 + } + + iframe, + object, + embed { + border: 0; + bottom: 0; + height: 100%; + left: 0; + position: absolute; + right: 0; + top: 0; + width: 100%; + } +} + +video.video-responsive { + height: auto; + max-width: 100%; + + &::before { + content: none; + } +} + +.video-responsive-4-3 { + &::before { + padding-bottom: 75%; // Ratio 4:3 + } +} + +.video-responsive-1-1 { + &::before { + padding-bottom: 100%; // Ratio 1:1 + } +} + +// Figure +.figure { + margin: 0 0 $layout-spacing 0; + + .figure-caption { + color: $gray-color-dark; + margin-top: $layout-spacing; + } +} diff --git a/Start/Client/Sass/Spectre/_menus.scss b/Start/Client/Sass/Spectre/_menus.scss new file mode 100644 index 0000000..411cada --- /dev/null +++ b/Start/Client/Sass/Spectre/_menus.scss @@ -0,0 +1,66 @@ +// Menus +.menu { + @include shadow-variant(.05rem); + background: $bg-color-light; + border-radius: $border-radius; + list-style: none; + margin: 0; + min-width: $control-width-xs; + padding: $unit-2; + transform: translateY($layout-spacing-sm); + z-index: $zindex-3; + + &.menu-nav { + background: transparent; + box-shadow: none; + } + + .menu-item { + margin-top: 0; + padding: 0 $unit-2; + position: relative; + text-decoration: none; + + & > a { + border-radius: $border-radius; + color: inherit; + display: block; + margin: 0 (-$unit-2); + padding: $unit-1 $unit-2; + text-decoration: none; + &:focus, + &:hover { + background: $secondary-color; + color: $primary-color; + } + &:active, + &.active { + background: $secondary-color; + color: $primary-color; + } + } + + .form-checkbox, + .form-radio, + .form-switch { + margin: $unit-h 0; + } + + & + .menu-item { + margin-top: $unit-1; + } + } + + .menu-badge { + align-items: center; + display: flex; + height: 100%; + position: absolute; + right: 0; + top: 0; + + .label { + margin-right: $unit-2; + } + } +} \ No newline at end of file diff --git a/Start/Client/Sass/Spectre/_meters.scss b/Start/Client/Sass/Spectre/_meters.scss new file mode 100644 index 0000000..9fd98b0 --- /dev/null +++ b/Start/Client/Sass/Spectre/_meters.scss @@ -0,0 +1,57 @@ +// Meters +// Credit: https://css-tricks.com/html5-meter-element/ +.meter { + appearance: none; + background: $bg-color; + border: 0; + border-radius: $border-radius; + display: block; + width: 100%; + height: $unit-4; + + &::-webkit-meter-inner-element { + display: block; + } + + &::-webkit-meter-bar, + &::-webkit-meter-optimum-value, + &::-webkit-meter-suboptimum-value, + &::-webkit-meter-even-less-good-value { + border-radius: $border-radius; + } + + &::-webkit-meter-bar { + background: $bg-color; + } + + &::-webkit-meter-optimum-value { + background: $success-color; + } + + &::-webkit-meter-suboptimum-value { + background: $warning-color; + } + + &::-webkit-meter-even-less-good-value { + background: $error-color; + } + + &::-moz-meter-bar, + &:-moz-meter-optimum, + &:-moz-meter-sub-optimum, + &:-moz-meter-sub-sub-optimum { + border-radius: $border-radius; + } + + &:-moz-meter-optimum::-moz-meter-bar { + background: $success-color; + } + + &:-moz-meter-sub-optimum::-moz-meter-bar { + background: $warning-color; + } + + &:-moz-meter-sub-sub-optimum::-moz-meter-bar { + background: $error-color; + } +} diff --git a/Start/Client/Sass/Spectre/_mixins.scss b/Start/Client/Sass/Spectre/_mixins.scss new file mode 100644 index 0000000..d3a28d5 --- /dev/null +++ b/Start/Client/Sass/Spectre/_mixins.scss @@ -0,0 +1,10 @@ +// Mixins +@import "mixins/avatar"; +@import "mixins/button"; +@import "mixins/clearfix"; +@import "mixins/color"; +@import "mixins/label"; +@import "mixins/position"; +@import "mixins/shadow"; +@import "mixins/text"; +@import "mixins/toast"; \ No newline at end of file diff --git a/Start/Client/Sass/Spectre/_modals.scss b/Start/Client/Sass/Spectre/_modals.scss new file mode 100644 index 0000000..a7b3f10 --- /dev/null +++ b/Start/Client/Sass/Spectre/_modals.scss @@ -0,0 +1,87 @@ +// Modals +.modal { + align-items: center; + bottom: 0; + display: none; + justify-content: center; + left: 0; + opacity: 0; + overflow: hidden; + padding: $layout-spacing; + position: fixed; + right: 0; + top: 0; + + &:target, + &.active { + display: flex; + opacity: 1; + z-index: $zindex-4; + + .modal-overlay { + background: rgba($bg-color, .75); + bottom: 0; + cursor: default; + display: block; + left: 0; + position: absolute; + right: 0; + top: 0; + } + + .modal-container { + animation: slide-down .2s ease 1; + z-index: $zindex-0; + } + } + + &.modal-sm { + .modal-container { + max-width: $control-width-sm; + padding: 0 $unit-2; + } + } + + &.modal-lg { + .modal-overlay { + background: $bg-color-light; + } + + .modal-container { + box-shadow: none; + max-width: $control-width-lg; + } + } +} + +.modal-container { + @include shadow-variant(.2rem); + background: $bg-color-light; + border-radius: $border-radius; + display: flex; + flex-direction: column; + max-height: 75vh; + max-width: $control-width-md; + padding: 0 $unit-4; + width: 100%; + + &.modal-fullheight { + max-height: 100vh; + } + + .modal-header { + color: $dark-color; + padding: $unit-4; + } + + .modal-body { + overflow-y: auto; + padding: $unit-4; + position: relative; + } + + .modal-footer { + padding: $unit-4; + text-align: right; + } +} diff --git a/Start/Client/Sass/Spectre/_navbar.scss b/Start/Client/Sass/Spectre/_navbar.scss new file mode 100755 index 0000000..1164296 --- /dev/null +++ b/Start/Client/Sass/Spectre/_navbar.scss @@ -0,0 +1,28 @@ +// Navbar +.navbar { + align-items: stretch; + display: flex; + flex-wrap: wrap; + justify-content: space-between; + + .navbar-section { + align-items: center; + display: flex; + flex: 1 0 0; + + &:not(:first-child):last-child { + justify-content: flex-end; + } + } + + .navbar-center { + align-items: center; + display: flex; + flex: 0 0 auto; + } + + .navbar-brand { + font-size: $font-size-lg; + text-decoration: none; + } +} diff --git a/Start/Client/Sass/Spectre/_navs.scss b/Start/Client/Sass/Spectre/_navs.scss new file mode 100644 index 0000000..4bedc27 --- /dev/null +++ b/Start/Client/Sass/Spectre/_navs.scss @@ -0,0 +1,34 @@ +// Navs +.nav { + display: flex; + flex-direction: column; + list-style: none; + margin: $unit-1 0; + + .nav-item { + a { + color: $gray-color-dark; + padding: $unit-1 $unit-2; + text-decoration: none; + &:focus, + &:hover { + color: $primary-color; + } + } + &.active { + & > a { + color: darken($gray-color-dark, 10%); + font-weight: bold; + &:focus, + &:hover { + color: $primary-color; + } + } + } + } + + & .nav { + margin-bottom: $unit-2; + margin-left: $unit-4; + } +} diff --git a/Start/Client/Sass/Spectre/_normalize.scss b/Start/Client/Sass/Spectre/_normalize.scss new file mode 100644 index 0000000..a098a84 --- /dev/null +++ b/Start/Client/Sass/Spectre/_normalize.scss @@ -0,0 +1,446 @@ +/* Manually forked from Normalize.css */ +/* normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */ + +/** + * 1. Change the default font family in all browsers (opinionated). + * 2. Correct the line height in all browsers. + * 3. Prevent adjustments of font size after orientation changes in + * IE on Windows Phone and in iOS. + */ + +/* Document + ========================================================================== */ + +html { + font-family: sans-serif; /* 1 */ + -ms-text-size-adjust: 100%; /* 3 */ + -webkit-text-size-adjust: 100%; /* 3 */ +} + +/* Sections + ========================================================================== */ + +/** + * Remove the margin in all browsers (opinionated). + */ + +body { + margin: 0; +} + +/** + * Add the correct display in IE 9-. + */ + +article, +aside, +footer, +header, +nav, +section { + display: block; +} + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/* Grouping content + ========================================================================== */ + +/** + * Add the correct display in IE 9-. + * 1. Add the correct display in IE. + */ + +figcaption, +figure, +main { /* 1 */ + display: block; +} + +/** + * Add the correct margin in IE 8 (removed). + */ + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + +hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. (removed) + * 2. Correct the odd `em` font sizing in all browsers. + */ + +/* Text-level semantics + ========================================================================== */ + +/** + * 1. Remove the gray background on active links in IE 10. + * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. + */ + +a { + background-color: transparent; /* 1 */ + -webkit-text-decoration-skip: objects; /* 2 */ +} + +/** + * Remove the outline on focused links when they are also active or hovered + * in all browsers (opinionated). + */ + +a:active, +a:hover { + outline-width: 0; +} + +/** + * Modify default styling of address. + */ + +address { + font-style: normal; +} + +/** + * 1. Remove the bottom border in Firefox 39-. + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. (removed) + */ + +/** + * Prevent the duplicate application of `bolder` by the next rule in Safari 6. + */ + +b, +strong { + font-weight: inherit; +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +b, +strong { + font-weight: bolder; +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +code, +kbd, +pre, +samp { + font-family: $mono-font-family; /* 1 (changed) */ + font-size: 1em; /* 2 */ +} + +/** + * Add the correct font style in Android 4.3-. + */ + +dfn { + font-style: italic; +} + +/** + * Add the correct background and color in IE 9-. (Removed) + */ + +/** + * Add the correct font size in all browsers. + */ + +small { + font-size: 80%; + font-weight: 400; /* (added) */ +} + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Add the correct display in IE 9-. + */ + +audio, +video { + display: inline-block; +} + +/** + * Add the correct display in iOS 4-7. + */ + +audio:not([controls]) { + display: none; + height: 0; +} + +/** + * Remove the border on images inside links in IE 10-. + */ + +img { + border-style: none; +} + +/** + * Hide the overflow in IE. + */ + +svg:not(:root) { + overflow: hidden; +} + +/* Forms + ========================================================================== */ + +/** + * 1. Change the font styles in all browsers (opinionated). + * 2. Remove the margin in Firefox and Safari. + */ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; /* 1 (changed) */ + font-size: inherit; /* 1 (changed) */ + line-height: inherit; /* 1 (changed) */ + margin: 0; /* 2 */ +} + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + +button, +input { /* 1 */ + overflow: visible; +} + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + +button, +select { /* 1 */ + text-transform: none; +} + +/** + * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` + * controls in Android 4. + * 2. Correct the inability to style clickable types in iOS and Safari. + */ + +button, +html [type="button"], /* 1 */ +[type="reset"], +[type="submit"] { + -webkit-appearance: button; /* 2 */ +} + +/** + * Remove the inner border and padding in Firefox. + */ + +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** + * Restore the focus styles unset by the previous rule (removed). + */ + + +/** + * Change the border, margin, and padding in all browsers (opinionated) (changed). + */ + +fieldset { + border: 0; + margin: 0; + padding: 0; +} + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + +legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ +} + +/** + * 1. Add the correct display in IE 9-. + * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + +progress { + display: inline-block; /* 1 */ + vertical-align: baseline; /* 2 */ +} + +/** + * Remove the default vertical scrollbar in IE. + */ + +textarea { + overflow: auto; +} + +/** + * 1. Add the correct box sizing in IE 10-. + * 2. Remove the padding in IE 10-. + */ + +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + +[type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} + +/** + * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. + */ + +[type="search"]::-webkit-search-cancel-button, +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} + +/* Interactive + ========================================================================== */ + +/* + * Add the correct display in IE 9-. + * 1. Add the correct display in Edge, IE, and Firefox. + */ + +details, /* 1 */ +menu { + display: block; +} + +/* + * Add the correct display in all browsers. + */ + +summary { + display: list-item; + outline: none; +} + +/* Scripting + ========================================================================== */ + +/** + * Add the correct display in IE 9-. + */ + +canvas { + display: inline-block; +} + +/** + * Add the correct display in IE. + */ + +template { + display: none; +} + +/* Hidden + ========================================================================== */ + +/** + * Add the correct display in IE 10-. + */ + +[hidden] { + display: none; +} diff --git a/Start/Client/Sass/Spectre/_off-canvas.scss b/Start/Client/Sass/Spectre/_off-canvas.scss new file mode 100644 index 0000000..f3b8b9f --- /dev/null +++ b/Start/Client/Sass/Spectre/_off-canvas.scss @@ -0,0 +1,95 @@ +// Off canvas menus +$off-canvas-breakpoint: $size-lg !default; + +.off-canvas { + display: flex; + flex-flow: nowrap; + height: 100%; + position: relative; + width: 100%; + + .off-canvas-toggle { + display: block; + position: absolute; + top: $layout-spacing; + transition: none; + z-index: $zindex-0; + @if $rtl == true { + right: $layout-spacing; + } @else { + left: $layout-spacing; + } + } + + .off-canvas-sidebar { + background: $bg-color; + bottom: 0; + min-width: 10rem; + overflow-y: auto; + position: fixed; + top: 0; + transition: transform .25s; + z-index: $zindex-2; + @if $rtl == true { + right: 0; + transform: translateX(100%); + } @else { + left: 0; + transform: translateX(-100%); + } + } + + .off-canvas-content { + flex: 1 1 auto; + height: 100%; + padding: $layout-spacing $layout-spacing $layout-spacing 4rem; + } + + .off-canvas-overlay { + background: rgba($dark-color, .1); + border-color: transparent; + border-radius: 0; + bottom: 0; + display: none; + height: 100%; + left: 0; + position: fixed; + right: 0; + top: 0; + width: 100%; + } + + .off-canvas-sidebar { + &:target, + &.active { + transform: translateX(0); + } + + &:target ~ .off-canvas-overlay, + &.active ~ .off-canvas-overlay { + display: block; + z-index: $zindex-1; + } + } +} + +// Responsive layout +@media (min-width: $off-canvas-breakpoint) { + .off-canvas { + &.off-canvas-sidebar-show { + .off-canvas-toggle { + display: none; + } + + .off-canvas-sidebar { + flex: 0 0 auto; + position: relative; + transform: none; + } + + .off-canvas-overlay { + display: none !important; + } + } + } +} diff --git a/Start/Client/Sass/Spectre/_pagination.scss b/Start/Client/Sass/Spectre/_pagination.scss new file mode 100644 index 0000000..4c0e011 --- /dev/null +++ b/Start/Client/Sass/Spectre/_pagination.scss @@ -0,0 +1,60 @@ +// Pagination +.pagination { + display: flex; + list-style: none; + margin: $unit-1 0; + padding: $unit-1 0; + + .page-item { + margin: $unit-1 $unit-o; + + span { + display: inline-block; + padding: $unit-1 $unit-1; + } + + a { + border-radius: $border-radius; + display: inline-block; + padding: $unit-1 $unit-2; + text-decoration: none; + &:focus, + &:hover { + color: $primary-color; + } + } + + &.disabled { + a { + cursor: default; + opacity: .5; + pointer-events: none; + } + } + + &.active { + a { + background: $primary-color; + color: $light-color; + } + } + + &.page-prev, + &.page-next { + flex: 1 0 50%; + } + + &.page-next { + text-align: right; + } + + .page-item-title { + margin: 0; + } + + .page-item-subtitle { + margin: 0; + opacity: .5; + } + } +} diff --git a/Start/Client/Sass/Spectre/_panels.scss b/Start/Client/Sass/Spectre/_panels.scss new file mode 100644 index 0000000..386f96e --- /dev/null +++ b/Start/Client/Sass/Spectre/_panels.scss @@ -0,0 +1,23 @@ +// Panels +.panel { + border: $border-width solid $border-color; + border-radius: $border-radius; + display: flex; + flex-direction: column; + + .panel-header, + .panel-footer { + flex: 0 0 auto; + padding: $layout-spacing-lg; + } + + .panel-nav { + flex: 0 0 auto; + } + + .panel-body { + flex: 1 1 auto; + overflow-y: auto; + padding: 0 $layout-spacing-lg; + } +} diff --git a/Start/Client/Sass/Spectre/_parallax.scss b/Start/Client/Sass/Spectre/_parallax.scss new file mode 100644 index 0000000..ea244e5 --- /dev/null +++ b/Start/Client/Sass/Spectre/_parallax.scss @@ -0,0 +1,135 @@ +// Parallax +$parallax-deg: 3deg !default; +$parallax-offset: 4.5px !default; +$parallax-offset-z: 50px !default; +$parallax-perspective: 1000px !default; +$parallax-scale: .95 !default; +$parallax-fade-color: rgba(255, 255, 255, .35) !default; + +// Mixin: Parallax direction +@mixin parallax-dir() { + height: 50%; + outline: none; + position: absolute; + width: 50%; + z-index: $zindex-1; +} + +.parallax { + display: block; + height: auto; + position: relative; + width: auto; + + .parallax-content { + @include shadow-variant(1rem); + height: auto; + transform: perspective($parallax-perspective); + transform-style: preserve-3d; + transition: all .4s ease; + width: 100%; + + &::before { + content: ""; + display: block; + height: 100%; + left: 0; + position: absolute; + top: 0; + width: 100%; + } + } + + .parallax-front { + align-items: center; + color: $light-color; + display: flex; + height: 100%; + justify-content: center; + left: 0; + position: absolute; + text-align: center; + text-shadow: 0 0 20px rgba($dark-color, .75); + top: 0; + transform: translateZ($parallax-offset-z) scale($parallax-scale); + transition: transform .4s; + width: 100%; + z-index: $zindex-0; + } + + .parallax-top-left { + @include parallax-dir(); + left: 0; + top: 0; + + &:focus ~ .parallax-content, + &:hover ~ .parallax-content { + transform: perspective($parallax-perspective) rotateX($parallax-deg) rotateY(-$parallax-deg); + + &::before { + background: linear-gradient(135deg, $parallax-fade-color 0%, transparent 50%); + } + + .parallax-front { + transform: translate3d($parallax-offset, $parallax-offset, $parallax-offset-z) scale($parallax-scale); + } + } + } + + .parallax-top-right { + @include parallax-dir(); + right: 0; + top: 0; + + &:focus ~ .parallax-content, + &:hover ~ .parallax-content { + transform: perspective($parallax-perspective) rotateX($parallax-deg) rotateY($parallax-deg); + + &::before { + background: linear-gradient(-135deg, $parallax-fade-color 0%, transparent 50%); + } + + .parallax-front { + transform: translate3d(-$parallax-offset, $parallax-offset, $parallax-offset-z) scale($parallax-scale); + } + } + } + + .parallax-bottom-left { + @include parallax-dir(); + bottom: 0; + left: 0; + + &:focus ~ .parallax-content, + &:hover ~ .parallax-content { + transform: perspective($parallax-perspective) rotateX(-$parallax-deg) rotateY(-$parallax-deg); + + &::before { + background: linear-gradient(45deg, $parallax-fade-color 0%, transparent 50%); + } + + .parallax-front { + transform: translate3d($parallax-offset, -$parallax-offset, $parallax-offset-z) scale($parallax-scale); + } + } + } + + .parallax-bottom-right { + @include parallax-dir(); + bottom: 0; + right: 0; + + &:focus ~ .parallax-content, + &:hover ~ .parallax-content { + transform: perspective($parallax-perspective) rotateX(-$parallax-deg) rotateY($parallax-deg); + + &::before { + background: linear-gradient(-45deg, $parallax-fade-color 0%, transparent 50%); + } + + .parallax-front { + transform: translate3d(-$parallax-offset, -$parallax-offset, $parallax-offset-z) scale($parallax-scale); + } + } + } +} diff --git a/Start/Client/Sass/Spectre/_popovers.scss b/Start/Client/Sass/Spectre/_popovers.scss new file mode 100644 index 0000000..35b6bcd --- /dev/null +++ b/Start/Client/Sass/Spectre/_popovers.scss @@ -0,0 +1,65 @@ +// Popovers +.popover { + display: inline-block; + position: relative; + + .popover-container { + left: 50%; + opacity: 0; + padding: $layout-spacing; + position: absolute; + top: 0; + transform: translate(-50%, -50%) scale(0); + transition: transform .2s; + width: $control-width-sm; + z-index: $zindex-3; + } + + *:focus + .popover-container, + &:hover .popover-container { + display: block; + opacity: 1; + transform: translate(-50%, -100%) scale(1); + } + + &.popover-right { + .popover-container { + left: 100%; + top: 50%; + } + + *:focus + .popover-container, + &:hover .popover-container { + transform: translate(0, -50%) scale(1); + } + } + + &.popover-bottom { + .popover-container { + left: 50%; + top: 100%; + } + + *:focus + .popover-container, + &:hover .popover-container { + transform: translate(-50%, 0) scale(1); + } + } + + &.popover-left { + .popover-container { + left: 0; + top: 50%; + } + + *:focus + .popover-container, + &:hover .popover-container { + transform: translate(-100%, -50%) scale(1); + } + } + + .card { + @include shadow-variant(.2rem); + border: 0; + } +} diff --git a/Start/Client/Sass/Spectre/_progress.scss b/Start/Client/Sass/Spectre/_progress.scss new file mode 100644 index 0000000..f173772 --- /dev/null +++ b/Start/Client/Sass/Spectre/_progress.scss @@ -0,0 +1,45 @@ +// Progress +// Credit: https://css-tricks.com/html5-progress-element/ +.progress { + appearance: none; + background: $bg-color-dark; + border: 0; + border-radius: $border-radius; + color: $primary-color; + height: $unit-1; + position: relative; + width: 100%; + + &::-webkit-progress-bar { + background: transparent; + border-radius: $border-radius; + } + + &::-webkit-progress-value { + background: $primary-color; + border-radius: $border-radius; + } + + &::-moz-progress-bar { + background: $primary-color; + border-radius: $border-radius; + } + + &:indeterminate { + animation: progress-indeterminate 1.5s linear infinite; + background: $bg-color-dark linear-gradient(to right, $primary-color 30%, $bg-color-dark 30%) top left / 150% 150% no-repeat; + + &::-moz-progress-bar { + background: transparent; + } + } +} + +@keyframes progress-indeterminate { + 0% { + background-position: 200% 0; + } + 100% { + background-position: -200% 0; + } +} diff --git a/Start/Client/Sass/Spectre/_sliders.scss b/Start/Client/Sass/Spectre/_sliders.scss new file mode 100644 index 0000000..3ff38e8 --- /dev/null +++ b/Start/Client/Sass/Spectre/_sliders.scss @@ -0,0 +1,99 @@ +// Sliders +// Credit: https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/ +.slider { + appearance: none; + background: transparent; + display: block; + width: 100%; + height: $unit-6; + + &:focus { + @include control-shadow(); + outline: none; + } + + &.tooltip:not([data-tooltip]) { + &::after { + content: attr(value); + } + } + + // Slider Thumb + &::-webkit-slider-thumb { + -webkit-appearance: none; + background: $primary-color; + border: 0; + border-radius: 50%; + height: $unit-3; + margin-top: -($unit-3 - $unit-h) / 2; + transition: transform .2s; + width: $unit-3; + } + &::-moz-range-thumb { + background: $primary-color; + border: 0; + border-radius: 50%; + height: $unit-3; + transition: transform .2s; + width: $unit-3; + } + &::-ms-thumb { + background: $primary-color; + border: 0; + border-radius: 50%; + height: $unit-3; + transition: transform .2s; + width: $unit-3; + } + + &:active { + &::-webkit-slider-thumb { + transform: scale(1.25); + } + &::-moz-range-thumb { + transform: scale(1.25); + } + &::-ms-thumb { + transform: scale(1.25); + } + } + + &:disabled, + &.disabled { + &::-webkit-slider-thumb { + background: $gray-color-light; + transform: scale(1); + } + &::-moz-range-thumb { + background: $gray-color-light; + transform: scale(1); + } + &::-ms-thumb { + background: $gray-color-light; + transform: scale(1); + } + } + + // Slider Track + &::-webkit-slider-runnable-track { + background: $bg-color-dark; + border-radius: $border-radius; + height: $unit-h; + width: 100%; + } + &::-moz-range-track { + background: $bg-color-dark; + border-radius: $border-radius; + height: $unit-h; + width: 100%; + } + &::-ms-track { + background: $bg-color-dark; + border-radius: $border-radius; + height: $unit-h; + width: 100%; + } + &::-ms-fill-lower { + background: $primary-color; + } +} diff --git a/Start/Client/Sass/Spectre/_steps.scss b/Start/Client/Sass/Spectre/_steps.scss new file mode 100644 index 0000000..f642ff8 --- /dev/null +++ b/Start/Client/Sass/Spectre/_steps.scss @@ -0,0 +1,71 @@ +// Steps +.step { + display: flex; + flex-wrap: nowrap; + list-style: none; + margin: $unit-1 0; + width: 100%; + + .step-item { + flex: 1 1 0; + margin-top: 0; + min-height: 1rem; + text-align: center; + position: relative; + + &:not(:first-child)::before { + background: $primary-color; + content: ""; + height: 2px; + left: -50%; + position: absolute; + top: 9px; + width: 100%; + } + + a { + color: $primary-color; + display: inline-block; + padding: 20px 10px 0; + text-decoration: none; + + &::before { + background: $primary-color; + border: $border-width-lg solid $light-color; + border-radius: 50%; + content: ""; + display: block; + height: $unit-3; + left: 50%; + position: absolute; + top: $unit-1; + transform: translateX(-50%); + width: $unit-3; + z-index: $zindex-0; + } + } + + &.active { + a { + &::before { + background: $light-color; + border: $border-width-lg solid $primary-color; + } + } + + & ~ .step-item { + &::before { + background: $border-color; + } + + a { + color: $gray-color; + + &::before { + background: $border-color; + } + } + } + } + } +} diff --git a/Start/Client/Sass/Spectre/_tables.scss b/Start/Client/Sass/Spectre/_tables.scss new file mode 100644 index 0000000..656c03e --- /dev/null +++ b/Start/Client/Sass/Spectre/_tables.scss @@ -0,0 +1,57 @@ +// Tables +.table { + border-collapse: collapse; + border-spacing: 0; + width: 100%; + @if $rtl == true { + text-align: right; + } @else { + text-align: left; + } + + &.table-striped { + tbody { + tr:nth-of-type(odd) { + background: $bg-color; + } + } + } + + &, + &.table-striped { + tbody { + tr { + &.active { + background: $bg-color-dark; + } + } + } + } + + &.table-hover { + tbody { + tr { + &:hover { + background: $bg-color-dark; + } + } + } + } + + // Scollable tables + &.table-scroll { + display: block; + overflow-x: auto; + padding-bottom: .75rem; + white-space: nowrap; + } + + td, + th { + border-bottom: $border-width solid $border-color; + padding: $unit-3 $unit-2; + } + th { + border-bottom-width: $border-width-lg; + } +} diff --git a/Start/Client/Sass/Spectre/_tabs.scss b/Start/Client/Sass/Spectre/_tabs.scss new file mode 100644 index 0000000..0dcbaf3 --- /dev/null +++ b/Start/Client/Sass/Spectre/_tabs.scss @@ -0,0 +1,66 @@ +// Tabs +.tab { + align-items: center; + border-bottom: $border-width solid $border-color; + display: flex; + flex-wrap: wrap; + list-style: none; + margin: $unit-1 0 ($unit-1 - $border-width) 0; + + .tab-item { + margin-top: 0; + + a { + border-bottom: $border-width-lg solid transparent; + color: inherit; + display: block; + margin: 0 $unit-2 0 0; + padding: $unit-2 $unit-1 $unit-2 - $border-width-lg $unit-1; + text-decoration: none; + &:focus, + &:hover { + color: $link-color; + } + } + &.active a, + a.active { + border-bottom-color: $primary-color; + color: $link-color; + } + + &.tab-action { + flex: 1 0 auto; + text-align: right; + } + + .btn-clear { + margin-top: -$unit-1; + } + } + + &.tab-block { + .tab-item { + flex: 1 0 0; + text-align: center; + + a { + margin: 0; + } + + .badge { + &[data-badge]::after { + position: absolute; + right: $unit-h; + top: $unit-h; + transform: translate(0, 0); + } + } + } + } + + &:not(.tab-block) { + .badge { + padding-right: 0; + } + } +} diff --git a/Start/Client/Sass/Spectre/_tiles.scss b/Start/Client/Sass/Spectre/_tiles.scss new file mode 100644 index 0000000..742bbae --- /dev/null +++ b/Start/Client/Sass/Spectre/_tiles.scss @@ -0,0 +1,38 @@ +// Tiles +.tile { + align-content: space-between; + align-items: flex-start; + display: flex; + + .tile-icon, + .tile-action { + flex: 0 0 auto; + } + .tile-content { + flex: 1 1 auto; + &:not(:first-child) { + padding-left: $unit-2; + } + &:not(:last-child) { + padding-right: $unit-2; + } + } + .tile-title, + .tile-subtitle { + line-height: $line-height; + } + + &.tile-centered { + align-items: center; + + .tile-content { + overflow: hidden; + } + + .tile-title, + .tile-subtitle { + @include text-ellipsis(); + margin-bottom: 0; + } + } +} diff --git a/Start/Client/Sass/Spectre/_timelines.scss b/Start/Client/Sass/Spectre/_timelines.scss new file mode 100644 index 0000000..c56746d --- /dev/null +++ b/Start/Client/Sass/Spectre/_timelines.scss @@ -0,0 +1,56 @@ +// Timelines +.timeline { + .timeline-item { + display: flex; + margin-bottom: $unit-6; + position: relative; + &::before { + background: $border-color; + content: ""; + height: 100%; + left: 11px; + position: absolute; + top: $unit-6; + width: 2px; + } + + .timeline-left { + flex: 0 0 auto; + } + + .timeline-content { + flex: 1 1 auto; + padding: 2px 0 2px $layout-spacing-lg; + } + + .timeline-icon { + align-items: center; + border-radius: 50%; + color: $light-color; + display: flex; + height: $unit-6; + justify-content: center; + text-align: center; + width: $unit-6; + &::before { + border: $border-width-lg solid $primary-color; + border-radius: 50%; + content: ""; + display: block; + height: $unit-2; + left: $unit-2; + position: absolute; + top: $unit-2; + width: $unit-2; + } + + &.icon-lg { + background: $primary-color; + line-height: $line-height; + &::before { + content: none; + } + } + } + } +} diff --git a/Start/Client/Sass/Spectre/_toasts.scss b/Start/Client/Sass/Spectre/_toasts.scss new file mode 100644 index 0000000..fef15f8 --- /dev/null +++ b/Start/Client/Sass/Spectre/_toasts.scss @@ -0,0 +1,48 @@ +// Toasts +.toast { + @include toast-variant($dark-color); + border: $border-width solid $dark-color; + border-radius: $border-radius; + color: $light-color; + display: block; + padding: $layout-spacing; + width: 100%; + + &.toast-primary { + @include toast-variant($primary-color); + } + + &.toast-success { + @include toast-variant($success-color); + } + + &.toast-warning { + @include toast-variant($warning-color); + } + + &.toast-error { + @include toast-variant($error-color); + } + + a { + color: $light-color; + text-decoration: underline; + + &:focus, + &:hover, + &:active, + &.active { + opacity: .75; + } + } + + .btn-clear { + margin: $unit-h; + } + + p { + &:last-child { + margin-bottom: 0; + } + } +} diff --git a/Start/Client/Sass/Spectre/_tooltips.scss b/Start/Client/Sass/Spectre/_tooltips.scss new file mode 100644 index 0000000..8693b67 --- /dev/null +++ b/Start/Client/Sass/Spectre/_tooltips.scss @@ -0,0 +1,79 @@ +// Tooltips +.tooltip { + position: relative; + &::after { + background: rgba($dark-color, .95); + border-radius: $border-radius; + bottom: 100%; + color: $light-color; + content: attr(data-tooltip); + display: block; + font-size: $font-size-sm; + left: 50%; + max-width: $control-width-sm; + opacity: 0; + overflow: hidden; + padding: $unit-1 $unit-2; + pointer-events: none; + position: absolute; + text-overflow: ellipsis; + transform: translate(-50%, $unit-2); + transition: opacity .2s, transform .2s; + white-space: pre; + z-index: $zindex-3; + } + &:focus, + &:hover { + &::after { + opacity: 1; + transform: translate(-50%, -$unit-1); + } + } + &[disabled], + &.disabled { + pointer-events: auto; + } + + &.tooltip-right { + &::after { + bottom: 50%; + left: 100%; + transform: translate(-$unit-1, 50%); + } + &:focus, + &:hover { + &::after { + transform: translate($unit-1, 50%); + } + } + } + + &.tooltip-bottom { + &::after { + bottom: auto; + top: 100%; + transform: translate(-50%, -$unit-2); + } + &:focus, + &:hover { + &::after { + transform: translate(-50%, $unit-1); + } + } + } + + &.tooltip-left { + &::after { + bottom: 50%; + left: auto; + right: 100%; + transform: translate($unit-2, 50%); + } + &:focus, + &:hover { + &::after { + transform: translate(-$unit-1, 50%); + } + } + } +} diff --git a/Start/Client/Sass/Spectre/_typography.scss b/Start/Client/Sass/Spectre/_typography.scss new file mode 100644 index 0000000..bbeb876 --- /dev/null +++ b/Start/Client/Sass/Spectre/_typography.scss @@ -0,0 +1,129 @@ +// Typography +// Headings +h1, +h2, +h3, +h4, +h5, +h6 { + color: inherit; + font-weight: 500; + line-height: 1.2; + margin-bottom: .5em; + margin-top: 0; +} +.h1, +.h2, +.h3, +.h4, +.h5, +.h6 { + font-weight: 500; +} +h1, +.h1 { + font-size: 2rem; +} +h2, +.h2 { + font-size: 1.6rem; +} +h3, +.h3 { + font-size: 1.4rem; +} +h4, +.h4 { + font-size: 1.2rem; +} +h5, +.h5 { + font-size: 1rem; +} +h6, +.h6 { + font-size: .8rem; +} + +// Paragraphs +p { + margin: 0 0 $line-height; +} + +// Semantic text elements +a, +ins, +u { + text-decoration-skip: ink edges; +} + +abbr[title] { + border-bottom: $border-width dotted; + cursor: help; + text-decoration: none; +} + +kbd { + @include label-base(); + @include label-variant($light-color, $dark-color); + font-size: $font-size-sm; +} + +mark { + @include label-variant($body-font-color, $highlight-color); + border-bottom: $unit-o solid darken($highlight-color, 15%); + border-radius: $border-radius; + padding: $unit-o $unit-h 0; +} + +// Blockquote +blockquote { + border-left: $border-width-lg solid $border-color; + margin-left: 0; + padding: $unit-2 $unit-4; + + p:last-child { + margin-bottom: 0; + } +} + +// Lists +ul, +ol { + margin: $unit-4 0 $unit-4 $unit-4; + padding: 0; + + ul, + ol { + margin: $unit-4 0 $unit-4 $unit-4; + } + + li { + margin-top: $unit-2; + } +} + +ul { + list-style: disc inside; + + ul { + list-style-type: circle; + } +} + +ol { + list-style: decimal inside; + + ol { + list-style-type: lower-alpha; + } +} + +dl { + dt { + font-weight: bold; + } + dd { + margin: $unit-2 0 $unit-4 0; + } +} diff --git a/Start/Client/Sass/Spectre/_utilities.scss b/Start/Client/Sass/Spectre/_utilities.scss new file mode 100644 index 0000000..80f1e0b --- /dev/null +++ b/Start/Client/Sass/Spectre/_utilities.scss @@ -0,0 +1,8 @@ +@import "utilities/colors"; +@import "utilities/cursors"; +@import "utilities/display"; +@import "utilities/divider"; +@import "utilities/loading"; +@import "utilities/position"; +@import "utilities/shapes"; +@import "utilities/text"; diff --git a/Start/Client/Sass/Spectre/_variables.scss b/Start/Client/Sass/Spectre/_variables.scss new file mode 100644 index 0000000..604c006 --- /dev/null +++ b/Start/Client/Sass/Spectre/_variables.scss @@ -0,0 +1,117 @@ +// Core variables +$version: "0.5.9"; + +// Core features +$rtl: false !default; + +// Core colors +$primary-color: #5755d9 !default; +$primary-color-dark: darken($primary-color, 3%) !default; +$primary-color-light: lighten($primary-color, 3%) !default; +$secondary-color: lighten($primary-color, 37.5%) !default; +$secondary-color-dark: darken($secondary-color, 3%) !default; +$secondary-color-light: lighten($secondary-color, 3%) !default; + +// Gray colors +$dark-color: #303742 !default; +$light-color: #fff !default; +$gray-color: lighten($dark-color, 55%) !default; +$gray-color-dark: darken($gray-color, 30%) !default; +$gray-color-light: lighten($gray-color, 20%) !default; + +$border-color: lighten($dark-color, 65%) !default; +$border-color-dark: darken($border-color, 10%) !default; +$border-color-light: lighten($border-color, 8%) !default; +$bg-color: lighten($dark-color, 75%) !default; +$bg-color-dark: darken($bg-color, 3%) !default; +$bg-color-light: $light-color !default; + +// Control colors +$success-color: #32b643 !default; +$warning-color: #ffb700 !default; +$error-color: #e85600 !default; + +// Other colors +$code-color: #d73e48 !default; +$highlight-color: #ffe9b3 !default; +$body-bg: $bg-color-light !default; +$body-font-color: lighten($dark-color, 5%) !default; +$link-color: $primary-color !default; +$link-color-dark: darken($link-color, 10%) !default; +$link-color-light: lighten($link-color, 10%) !default; + +// Fonts +// Credit: https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/ +$base-font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto !default; +$mono-font-family: "SF Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Courier, monospace !default; +$fallback-font-family: "Helvetica Neue", sans-serif !default; +$cjk-zh-hans-font-family: $base-font-family, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", $fallback-font-family !default; +$cjk-zh-hant-font-family: $base-font-family, "PingFang TC", "Hiragino Sans CNS", "Microsoft JhengHei", $fallback-font-family !default; +$cjk-jp-font-family: $base-font-family, "Hiragino Sans", "Hiragino Kaku Gothic Pro", "Yu Gothic", YuGothic, Meiryo, $fallback-font-family !default; +$cjk-ko-font-family: $base-font-family, "Malgun Gothic", $fallback-font-family !default; +$body-font-family: $base-font-family, $fallback-font-family !default; + +// Unit sizes +$unit-o: .05rem !default; +$unit-h: .1rem !default; +$unit-1: .2rem !default; +$unit-2: .4rem !default; +$unit-3: .6rem !default; +$unit-4: .8rem !default; +$unit-5: 1rem !default; +$unit-6: 1.2rem !default; +$unit-7: 1.4rem !default; +$unit-8: 1.6rem !default; +$unit-9: 1.8rem !default; +$unit-10: 2rem !default; +$unit-12: 2.4rem !default; +$unit-16: 3.2rem !default; + +// Font sizes +$html-font-size: 20px !default; +$html-line-height: 1.5 !default; +$font-size: .8rem !default; +$font-size-sm: .7rem !default; +$font-size-lg: .9rem !default; +$line-height: 1.2rem !default; + +// Sizes +$layout-spacing: $unit-2 !default; +$layout-spacing-sm: $unit-1 !default; +$layout-spacing-lg: $unit-4 !default; +$border-radius: $unit-h !default; +$border-width: $unit-o !default; +$border-width-lg: $unit-h !default; +$control-size: $unit-9 !default; +$control-size-sm: $unit-7 !default; +$control-size-lg: $unit-10 !default; +$control-padding-x: $unit-2 !default; +$control-padding-x-sm: $unit-2 * .75 !default; +$control-padding-x-lg: $unit-2 * 1.5 !default; +$control-padding-y: ($control-size - $line-height) / 2 - $border-width !default; +$control-padding-y-sm: ($control-size-sm - $line-height) / 2 - $border-width !default; +$control-padding-y-lg: ($control-size-lg - $line-height) / 2 - $border-width !default; +$control-icon-size: .8rem !default; + +$control-width-xs: 180px !default; +$control-width-sm: 320px !default; +$control-width-md: 640px !default; +$control-width-lg: 960px !default; +$control-width-xl: 1280px !default; + +// Responsive breakpoints +$size-xs: 480px !default; +$size-sm: 600px !default; +$size-md: 840px !default; +$size-lg: 960px !default; +$size-xl: 1280px !default; +$size-2x: 1440px !default; + +$responsive-breakpoint: $size-xs !default; + +// Z-index +$zindex-0: 1 !default; +$zindex-1: 100 !default; +$zindex-2: 200 !default; +$zindex-3: 300 !default; +$zindex-4: 400 !default; diff --git a/Start/Client/Sass/Spectre/_viewer-360.scss b/Start/Client/Sass/Spectre/_viewer-360.scss new file mode 100644 index 0000000..c1b8928 --- /dev/null +++ b/Start/Client/Sass/Spectre/_viewer-360.scss @@ -0,0 +1,34 @@ +// 360 Degree Viewer + +// Mixin: Viewer slider sizes +@mixin viewer-slider-size($image-number: 36) { + @for $s from 1 through ($image-number) { + .viewer-slider[max='#{$image-number}'][value='#{$s}'] + .viewer-image { + background-position-y: percentage((($s)-1) * 1/(($image-number)-1)); + } + } +} + +.viewer-360 { + align-items: center; + display: flex; + flex-direction: column; + + // Copy and add more numbers if you need + @include viewer-slider-size(36); + + .viewer-slider { + cursor: ew-resize; + margin: 1rem; + order: 2; + width: 60%; + } + + .viewer-image { + background-position-y: 0; + background-repeat: no-repeat; + background-size: 100%; + max-width: 100%; + order: 1; + } +} \ No newline at end of file diff --git a/Start/Client/Sass/Spectre/icons/_icons-action.scss b/Start/Client/Sass/Spectre/icons/_icons-action.scss new file mode 100644 index 0000000..1b952ea --- /dev/null +++ b/Start/Client/Sass/Spectre/icons/_icons-action.scss @@ -0,0 +1,315 @@ +// Icon resize +.icon-resize-horiz, +.icon-resize-vert { + &::before, + &::after { + border: $icon-border-width solid currentColor; + border-bottom: 0; + border-right: 0; + height: .45em; + width: .45em; + } + &::before { + transform: translate(-50%, -90%) rotate(45deg); + } + &::after { + transform: translate(-50%, -10%) rotate(225deg); + } +} + +.icon-resize-horiz { + &::before { + transform: translate(-90%, -50%) rotate(-45deg); + } + &::after { + transform: translate(-10%, -50%) rotate(135deg); + } +} + +// Icon more +.icon-more-horiz, +.icon-more-vert { + &::before { + background: currentColor; + box-shadow: -.4em 0, .4em 0; + border-radius: 50%; + height: 3px; + width: 3px; + } +} + +.icon-more-vert { + &::before { + box-shadow: 0 -.4em, 0 .4em; + } +} + +// Icon plus, minus, cross +.icon-plus, +.icon-minus, +.icon-cross { + &::before { + background: currentColor; + height: $icon-border-width; + width: 100%; + } +} + +.icon-plus, +.icon-cross { + &::after { + background: currentColor; + height: 100%; + width: $icon-border-width; + } +} + +.icon-cross { + &::before { + width: 100%; + } + &::after { + height: 100%; + } + &::before, + &::after { + transform: translate(-50%, -50%) rotate(45deg); + } +} + +// Icon check +.icon-check { + &::before { + border: $icon-border-width solid currentColor; + border-right: 0; + border-top: 0; + height: .5em; + width: .9em; + transform: translate(-50%, -75%) rotate(-45deg); + } +} + +// Icon stop +.icon-stop { + border: $icon-border-width solid currentColor; + border-radius: 50%; + &::before { + background: currentColor; + height: $icon-border-width; + transform: translate(-50%, -50%) rotate(45deg); + width: 1em; + } +} + +// Icon shutdown +.icon-shutdown { + border: $icon-border-width solid currentColor; + border-radius: 50%; + border-top-color: transparent; + &::before { + background: currentColor; + content: ""; + height: .5em; + top: .1em; + width: $icon-border-width; + } +} + +// Icon refresh +.icon-refresh { + &::before { + border: $icon-border-width solid currentColor; + border-radius: 50%; + border-right-color: transparent; + height: 1em; + width: 1em; + } + &::after { + border: .2em solid currentColor; + border-top-color: transparent; + border-left-color: transparent; + height: 0; + left: 80%; + top: 20%; + width: 0; + } +} + +// Icon search +.icon-search { + &::before { + border: $icon-border-width solid currentColor; + border-radius: 50%; + height: .75em; + left: 5%; + top: 5%; + transform: translate(0, 0) rotate(45deg); + width: .75em; + } + &::after { + background: currentColor; + height: $icon-border-width; + left: 80%; + top: 80%; + transform: translate(-50%, -50%) rotate(45deg); + width: .4em; + } +} + +// Icon edit +.icon-edit { + &::before { + border: $icon-border-width solid currentColor; + height: .4em; + transform: translate(-40%, -60%) rotate(-45deg); + width: .85em; + } + &::after { + border: .15em solid currentColor; + border-top-color: transparent; + border-right-color: transparent; + height: 0; + left: 5%; + top: 95%; + transform: translate(0, -100%); + width: 0; + } +} + +// Icon delete +.icon-delete { + &::before { + border: $icon-border-width solid currentColor; + border-bottom-left-radius: $border-radius; + border-bottom-right-radius: $border-radius; + border-top: 0; + height: .75em; + top: 60%; + width: .75em; + } + &::after { + background: currentColor; + box-shadow: -.25em .2em, .25em .2em; + height: $icon-border-width; + top: $icon-border-width/2; + width: .5em; + } +} + +// Icon share +.icon-share { + border: $icon-border-width solid currentColor; + border-radius: $border-radius; + border-right: 0; + border-top: 0; + &::before { + border: $icon-border-width solid currentColor; + border-left: 0; + border-top: 0; + height: .4em; + left: 100%; + top: .25em; + transform: translate(-125%, -50%) rotate(-45deg); + width: .4em; + } + &::after { + border: $icon-border-width solid currentColor; + border-bottom: 0; + border-right: 0; + border-radius: 75% 0; + height: .5em; + width: .6em; + } +} + +// Icon flag +.icon-flag { + &::before { + background: currentColor; + height: 1em; + left: 15%; + width: $icon-border-width; + } + &::after { + border: $icon-border-width solid currentColor; + border-bottom-right-radius: $border-radius; + border-left: 0; + border-top-right-radius: $border-radius; + height: .65em; + top: 35%; + left: 60%; + width: .8em; + } +} + +// Icon bookmark +.icon-bookmark { + &::before { + border: $icon-border-width solid currentColor; + border-bottom: 0; + border-top-left-radius: $border-radius; + border-top-right-radius: $border-radius; + height: .9em; + width: .8em; + } + &::after { + border: $icon-border-width solid currentColor; + border-bottom: 0; + border-left: 0; + border-radius: $border-radius; + height: .5em; + transform: translate(-50%, 35%) rotate(-45deg) skew(15deg, 15deg); + width: .5em; + } +} + +// Icon download & upload +.icon-download, +.icon-upload { + border-bottom: $icon-border-width solid currentColor; + &::before { + border: $icon-border-width solid currentColor; + border-bottom: 0; + border-right: 0; + height: .5em; + width: .5em; + transform: translate(-50%, -60%) rotate(-135deg); + } + &::after { + background: currentColor; + height: .6em; + top: 40%; + width: $icon-border-width; + } +} + +.icon-upload { + &::before { + transform: translate(-50%, -60%) rotate(45deg); + } + &::after { + top: 50%; + } +} + +// Icon copy +.icon-copy { + &::before { + border: $icon-border-width solid currentColor; + border-radius: $border-radius; + border-right: 0; + border-bottom: 0; + height: .8em; + left: 40%; + top: 35%; + width: .8em; + } + &::after { + border: $icon-border-width solid currentColor; + border-radius: $border-radius; + height: .8em; + left: 60%; + top: 60%; + width: .8em; + } +} \ No newline at end of file diff --git a/Start/Client/Sass/Spectre/icons/_icons-core.scss b/Start/Client/Sass/Spectre/icons/_icons-core.scss new file mode 100644 index 0000000..9a67ae4 --- /dev/null +++ b/Start/Client/Sass/Spectre/icons/_icons-core.scss @@ -0,0 +1,54 @@ +// Icon variables +$icon-border-width: $border-width-lg; +$icon-prefix: "icon"; + +// Icon base style +.#{$icon-prefix} { + box-sizing: border-box; + display: inline-block; + font-size: inherit; + font-style: normal; + height: 1em; + position: relative; + text-indent: -9999px; + vertical-align: middle; + width: 1em; + &::before, + &::after { + content: ""; + display: block; + left: 50%; + position: absolute; + top: 50%; + transform: translate(-50%, -50%); + } + + // Icon sizes + &.icon-2x { + font-size: 1.6rem; + } + + &.icon-3x { + font-size: 2.4rem; + } + + &.icon-4x { + font-size: 3.2rem; + } +} + +// Component icon support +.accordion, +.btn, +.toast, +.menu { + .#{$icon-prefix} { + vertical-align: -10%; + } +} + +.btn-lg { + .#{$icon-prefix} { + vertical-align: -15%; + } +} diff --git a/Start/Client/Sass/Spectre/icons/_icons-navigation.scss b/Start/Client/Sass/Spectre/icons/_icons-navigation.scss new file mode 100644 index 0000000..92ab231 --- /dev/null +++ b/Start/Client/Sass/Spectre/icons/_icons-navigation.scss @@ -0,0 +1,127 @@ +// Icon arrows +.icon-arrow-down, +.icon-arrow-left, +.icon-arrow-right, +.icon-arrow-up, +.icon-downward, +.icon-back, +.icon-forward, +.icon-upward { + &::before { + border: $icon-border-width solid currentColor; + border-bottom: 0; + border-right: 0; + height: .65em; + width: .65em; + } +} + +.icon-arrow-down { + &::before { + transform: translate(-50%, -75%) rotate(225deg); + } +} + +.icon-arrow-left { + &::before { + transform: translate(-25%, -50%) rotate(-45deg); + } +} + +.icon-arrow-right { + &::before { + transform: translate(-75%, -50%) rotate(135deg); + } +} + +.icon-arrow-up { + &::before { + transform: translate(-50%, -25%) rotate(45deg); + } +} + +.icon-back, +.icon-forward { + &::after { + background: currentColor; + height: $icon-border-width; + width: .8em; + } +} + +.icon-downward, +.icon-upward { + &::after { + background: currentColor; + height: .8em; + width: $icon-border-width; + } +} + +.icon-back { + &::after { + left: 55%; + } + &::before { + transform: translate(-50%, -50%) rotate(-45deg); + } +} + +.icon-downward { + &::after { + top: 45%; + } + &::before { + transform: translate(-50%, -50%) rotate(-135deg); + } +} + +.icon-forward { + &::after { + left: 45%; + } + &::before { + transform: translate(-50%, -50%) rotate(135deg); + } +} + +.icon-upward { + &::after { + top: 55%; + } + &::before { + transform: translate(-50%, -50%) rotate(45deg); + } +} + +// Icon caret +.icon-caret { + &::before { + border-top: .3em solid currentColor; + border-right: .3em solid transparent; + border-left: .3em solid transparent; + height: 0; + transform: translate(-50%, -25%); + width: 0; + } +} + +// Icon menu +.icon-menu { + &::before { + background: currentColor; + box-shadow: 0 -.35em, 0 .35em; + height: $icon-border-width; + width: 100%; + } +} + +// Icon apps +.icon-apps { + &::before { + background: currentColor; + box-shadow: -.35em -.35em, -.35em 0, -.35em .35em, 0 -.35em, 0 .35em, .35em -.35em, .35em 0, .35em .35em; + height: 3px; + width: 3px; + } +} diff --git a/Start/Client/Sass/Spectre/icons/_icons-object.scss b/Start/Client/Sass/Spectre/icons/_icons-object.scss new file mode 100644 index 0000000..00597d8 --- /dev/null +++ b/Start/Client/Sass/Spectre/icons/_icons-object.scss @@ -0,0 +1,161 @@ +// Icon time +.icon-time { + border: $icon-border-width solid currentColor; + border-radius: 50%; + &::before { + background: currentColor; + height: .4em; + transform: translate(-50%, -75%); + width: $icon-border-width; + } + &::after { + background: currentColor; + height: .3em; + transform: translate(-50%, -75%) rotate(90deg); + transform-origin: 50% 90%; + width: $icon-border-width; + } +} + +// Icon mail +.icon-mail { + &::before { + border: $icon-border-width solid currentColor; + border-radius: $border-radius; + height: .8em; + width: 1em; + } + &::after { + border: $icon-border-width solid currentColor; + border-right: 0; + border-top: 0; + height: .5em; + transform: translate(-50%, -90%) rotate(-45deg) skew(10deg, 10deg); + width: .5em; + } +} + +// Icon people +.icon-people { + &::before { + border: $icon-border-width solid currentColor; + border-radius: 50%; + height: .45em; + top: 25%; + width: .45em; + } + &::after { + border: $icon-border-width solid currentColor; + border-radius: 50% 50% 0 0; + height: .4em; + top: 75%; + width: .9em; + } +} + +// Icon message +.icon-message { + border: $icon-border-width solid currentColor; + border-bottom: 0; + border-radius: $border-radius; + border-right: 0; + &::before { + border: $icon-border-width solid currentColor; + border-bottom-right-radius: $border-radius; + border-left: 0; + border-top: 0; + height: .8em; + left: 65%; + top: 40%; + width: .7em; + } + &::after { + background: currentColor; + border-radius: $border-radius; + height: .3em; + left: 10%; + top: 100%; + transform: translate(0, -90%) rotate(45deg); + width: $icon-border-width; + } +} + +// Icon photo +.icon-photo { + border: $icon-border-width solid currentColor; + border-radius: $border-radius; + &::before { + border: $icon-border-width solid currentColor; + border-radius: 50%; + height: .25em; + left: 35%; + top: 35%; + width: .25em; + } + &::after { + border: $icon-border-width solid currentColor; + border-bottom: 0; + border-left: 0; + height: .5em; + left: 60%; + transform: translate(-50%, 25%) rotate(-45deg); + width: .5em; + } +} + +// Icon link +.icon-link { + &::before, + &::after { + border: $icon-border-width solid currentColor; + border-radius: 5em 0 0 5em; + border-right: 0; + height: .5em; + width: .75em; + } + &::before { + transform: translate(-70%, -45%) rotate(-45deg); + } + &::after { + transform: translate(-30%, -55%) rotate(135deg); + } +} + +// Icon location +.icon-location { + &::before { + border: $icon-border-width solid currentColor; + border-radius: 50% 50% 50% 0; + height: .8em; + transform: translate(-50%, -60%) rotate(-45deg); + width: .8em; + } + &::after { + border: $icon-border-width solid currentColor; + border-radius: 50%; + height: .2em; + transform: translate(-50%, -80%); + width: .2em; + } +} + +// Icon emoji +.icon-emoji { + border: $icon-border-width solid currentColor; + border-radius: 50%; + &::before { + border-radius: 50%; + box-shadow: -.17em -.1em, .17em -.1em; + height: .15em; + width: .15em; + } + &::after { + border: $icon-border-width solid currentColor; + border-bottom-color: transparent; + border-radius: 50%; + border-right-color: transparent; + height: .5em; + transform: translate(-50%, -40%) rotate(-135deg); + width: .5em; + } +} diff --git a/Start/Client/Sass/Spectre/mixins/_avatar.scss b/Start/Client/Sass/Spectre/mixins/_avatar.scss new file mode 100644 index 0000000..14617ad --- /dev/null +++ b/Start/Client/Sass/Spectre/mixins/_avatar.scss @@ -0,0 +1,6 @@ +// Avatar mixin +@mixin avatar-base($size: $unit-8) { + font-size: $size / 2; + height: $size; + width: $size; +} diff --git a/Start/Client/Sass/Spectre/mixins/_button.scss b/Start/Client/Sass/Spectre/mixins/_button.scss new file mode 100644 index 0000000..c90a94b --- /dev/null +++ b/Start/Client/Sass/Spectre/mixins/_button.scss @@ -0,0 +1,54 @@ +// Button variant mixin +@mixin button-variant($color: $primary-color) { + background: $color; + border-color: darken($color, 3%); + color: $light-color; + &:focus { + @include control-shadow($color); + } + &:focus, + &:hover { + background: darken($color, 2%); + border-color: darken($color, 5%); + color: $light-color; + } + &:active, + &.active { + background: darken($color, 7%); + border-color: darken($color, 10%); + color: $light-color; + } + &.loading { + &::after { + border-bottom-color: $light-color; + border-left-color: $light-color; + } + } +} + +@mixin button-outline-variant($color: $primary-color) { + background: $light-color; + border-color: $color; + color: $color; + &:focus { + @include control-shadow($color); + } + &:focus, + &:hover { + background: lighten($color, 50%); + border-color: darken($color, 2%); + color: $color; + } + &:active, + &.active { + background: $color; + border-color: darken($color, 5%); + color: $light-color; + } + &.loading { + &::after { + border-bottom-color: $color; + border-left-color: $color; + } + } +} diff --git a/Start/Client/Sass/Spectre/mixins/_clearfix.scss b/Start/Client/Sass/Spectre/mixins/_clearfix.scss new file mode 100644 index 0000000..db6895f --- /dev/null +++ b/Start/Client/Sass/Spectre/mixins/_clearfix.scss @@ -0,0 +1,8 @@ +// Clearfix mixin +@mixin clearfix() { + &::after { + clear: both; + content: ""; + display: table; + } +} diff --git a/Start/Client/Sass/Spectre/mixins/_color.scss b/Start/Client/Sass/Spectre/mixins/_color.scss new file mode 100644 index 0000000..697d0c3 --- /dev/null +++ b/Start/Client/Sass/Spectre/mixins/_color.scss @@ -0,0 +1,27 @@ +// Background color utility mixin +@mixin bg-color-variant($name: ".bg-primary", $color: $primary-color) { + #{$name} { + background: $color !important; + + @if (lightness($color) < 60) { + color: $light-color; + } + } +} + +// Text color utility mixin +@mixin text-color-variant($name: ".text-primary", $color: $primary-color) { + #{$name} { + color: $color !important; + } + + a#{$name} { + &:focus, + &:hover { + color: darken($color, 5%); + } + &:visited { + color: lighten($color, 5%); + } + } +} diff --git a/Start/Client/Sass/Spectre/mixins/_label.scss b/Start/Client/Sass/Spectre/mixins/_label.scss new file mode 100644 index 0000000..1574f02 --- /dev/null +++ b/Start/Client/Sass/Spectre/mixins/_label.scss @@ -0,0 +1,11 @@ +// Label base style +@mixin label-base() { + border-radius: $border-radius; + line-height: 1.25; + padding: .1rem .2rem; +} + +@mixin label-variant($color: $light-color, $bg-color: $primary-color) { + background: $bg-color; + color: $color; +} diff --git a/Start/Client/Sass/Spectre/mixins/_position.scss b/Start/Client/Sass/Spectre/mixins/_position.scss new file mode 100644 index 0000000..98b5cfc --- /dev/null +++ b/Start/Client/Sass/Spectre/mixins/_position.scss @@ -0,0 +1,65 @@ +// Margin utility mixin +@mixin margin-variant($id: 1, $size: $unit-1) { + .m-#{$id} { + margin: $size !important; + } + + .mb-#{$id} { + margin-bottom: $size !important; + } + + .ml-#{$id} { + margin-left: $size !important; + } + + .mr-#{$id} { + margin-right: $size !important; + } + + .mt-#{$id} { + margin-top: $size !important; + } + + .mx-#{$id} { + margin-left: $size !important; + margin-right: $size !important; + } + + .my-#{$id} { + margin-bottom: $size !important; + margin-top: $size !important; + } +} + +// Padding utility mixin +@mixin padding-variant($id: 1, $size: $unit-1) { + .p-#{$id} { + padding: $size !important; + } + + .pb-#{$id} { + padding-bottom: $size !important; + } + + .pl-#{$id} { + padding-left: $size !important; + } + + .pr-#{$id} { + padding-right: $size !important; + } + + .pt-#{$id} { + padding-top: $size !important; + } + + .px-#{$id} { + padding-left: $size !important; + padding-right: $size !important; + } + + .py-#{$id} { + padding-bottom: $size !important; + padding-top: $size !important; + } +} diff --git a/Start/Client/Sass/Spectre/mixins/_shadow.scss b/Start/Client/Sass/Spectre/mixins/_shadow.scss new file mode 100644 index 0000000..7984449 --- /dev/null +++ b/Start/Client/Sass/Spectre/mixins/_shadow.scss @@ -0,0 +1,9 @@ +// Component focus shadow +@mixin control-shadow($color: $primary-color) { + box-shadow: 0 0 0 .1rem rgba($color, .2); +} + +// Shadow mixin +@mixin shadow-variant($offset) { + box-shadow: 0 $offset ($offset + .05rem) * 2 rgba($dark-color, .3); +} diff --git a/Start/Client/Sass/Spectre/mixins/_text.scss b/Start/Client/Sass/Spectre/mixins/_text.scss new file mode 100644 index 0000000..97dc99d --- /dev/null +++ b/Start/Client/Sass/Spectre/mixins/_text.scss @@ -0,0 +1,6 @@ +// Text Ellipsis +@mixin text-ellipsis() { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} diff --git a/Start/Client/Sass/Spectre/mixins/_toast.scss b/Start/Client/Sass/Spectre/mixins/_toast.scss new file mode 100644 index 0000000..fa2bb13 --- /dev/null +++ b/Start/Client/Sass/Spectre/mixins/_toast.scss @@ -0,0 +1,5 @@ +// Toast variant mixin +@mixin toast-variant($color: $dark-color) { + background: rgba($color, .95); + border-color: $color; +} diff --git a/Start/Client/Sass/Spectre/spectre-exp.scss b/Start/Client/Sass/Spectre/spectre-exp.scss new file mode 100644 index 0000000..33ed3fe --- /dev/null +++ b/Start/Client/Sass/Spectre/spectre-exp.scss @@ -0,0 +1,18 @@ +// Variables and mixins +@import "variables"; +@import "mixins"; + +/*! Spectre.css Experimentals v#{$version} | MIT License | github.com/picturepan2/spectre */ +// Experimentals +@import "autocomplete"; +@import "calendars"; +@import "carousels"; +@import "comparison-sliders"; +@import "filters"; +@import "meters"; +@import "off-canvas"; +@import "parallax"; +@import "progress"; +@import "sliders"; +@import "timelines"; +@import "viewer-360"; diff --git a/Start/Client/Sass/Spectre/spectre-icons.scss b/Start/Client/Sass/Spectre/spectre-icons.scss new file mode 100644 index 0000000..383624e --- /dev/null +++ b/Start/Client/Sass/Spectre/spectre-icons.scss @@ -0,0 +1,10 @@ +// Variables and mixins +@import "variables"; +@import "mixins"; + +/*! Spectre.css Icons v#{$version} | MIT License | github.com/picturepan2/spectre */ +// Icons +@import "icons/icons-core"; +@import "icons/icons-navigation"; +@import "icons/icons-action"; +@import "icons/icons-object"; diff --git a/Start/Client/Sass/Spectre/spectre.scss b/Start/Client/Sass/Spectre/spectre.scss new file mode 100644 index 0000000..cff1fde --- /dev/null +++ b/Start/Client/Sass/Spectre/spectre.scss @@ -0,0 +1,49 @@ +// Variables and mixins +@import "variables"; +@import "mixins"; + +/*! Spectre.css v#{$version} | MIT License | github.com/picturepan2/spectre */ +// Reset and dependencies +@import "normalize"; +@import "base"; + +// Elements +@import "typography"; +@import "asian"; +@import "tables"; +@import "buttons"; +@import "forms"; +@import "labels"; +@import "codes"; +@import "media"; + +// Layout +@import "layout"; +@import "hero"; +@import "navbar"; + +// Components +@import "accordions"; +@import "avatars"; +@import "badges"; +@import "breadcrumbs"; +@import "bars"; +@import "cards"; +@import "chips"; +@import "dropdowns"; +@import "empty"; +@import "menus"; +@import "modals"; +@import "navs"; +@import "pagination"; +@import "panels"; +@import "popovers"; +@import "steps"; +@import "tabs"; +@import "tiles"; +@import "toasts"; +@import "tooltips"; + +// Utility classes +@import "animations"; +@import "utilities"; diff --git a/Start/Client/Sass/Spectre/utilities/_colors.scss b/Start/Client/Sass/Spectre/utilities/_colors.scss new file mode 100644 index 0000000..28dd221 --- /dev/null +++ b/Start/Client/Sass/Spectre/utilities/_colors.scss @@ -0,0 +1,31 @@ +// Text colors +@include text-color-variant(".text-primary", $primary-color); + +@include text-color-variant(".text-secondary", $secondary-color-dark); + +@include text-color-variant(".text-gray", $gray-color); + +@include text-color-variant(".text-light", $light-color); + +@include text-color-variant(".text-dark", $body-font-color); + +@include text-color-variant(".text-success", $success-color); + +@include text-color-variant(".text-warning", $warning-color); + +@include text-color-variant(".text-error", $error-color); + +// Background colors +@include bg-color-variant(".bg-primary", $primary-color); + +@include bg-color-variant(".bg-secondary", $secondary-color); + +@include bg-color-variant(".bg-dark", $dark-color); + +@include bg-color-variant(".bg-gray", $bg-color); + +@include bg-color-variant(".bg-success", $success-color); + +@include bg-color-variant(".bg-warning", $warning-color); + +@include bg-color-variant(".bg-error", $error-color); diff --git a/Start/Client/Sass/Spectre/utilities/_cursors.scss b/Start/Client/Sass/Spectre/utilities/_cursors.scss new file mode 100644 index 0000000..bd755c8 --- /dev/null +++ b/Start/Client/Sass/Spectre/utilities/_cursors.scss @@ -0,0 +1,24 @@ +// Cursors +.c-hand { + cursor: pointer; +} + +.c-move { + cursor: move; +} + +.c-zoom-in { + cursor: zoom-in; +} + +.c-zoom-out { + cursor: zoom-out; +} + +.c-not-allowed { + cursor: not-allowed; +} + +.c-auto { + cursor: auto; +} \ No newline at end of file diff --git a/Start/Client/Sass/Spectre/utilities/_display.scss b/Start/Client/Sass/Spectre/utilities/_display.scss new file mode 100644 index 0000000..c6248e0 --- /dev/null +++ b/Start/Client/Sass/Spectre/utilities/_display.scss @@ -0,0 +1,44 @@ +// Display +.d-block { + display: block; +} +.d-inline { + display: inline; +} +.d-inline-block { + display: inline-block; +} +.d-flex { + display: flex; +} +.d-inline-flex { + display: inline-flex; +} +.d-none, +.d-hide { + display: none !important; +} +.d-visible { + visibility: visible; +} +.d-invisible { + visibility: hidden; +} +.text-hide { + background: transparent; + border: 0; + color: transparent; + font-size: 0; + line-height: 0; + text-shadow: none; +} +.text-assistive { + border: 0; + clip: rect(0,0,0,0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; +} diff --git a/Start/Client/Sass/Spectre/utilities/_divider.scss b/Start/Client/Sass/Spectre/utilities/_divider.scss new file mode 100644 index 0000000..e6c09d2 --- /dev/null +++ b/Start/Client/Sass/Spectre/utilities/_divider.scss @@ -0,0 +1,50 @@ +// Divider +.divider, +.divider-vert { + display: block; + position: relative; + + &[data-content]::after { + background: $bg-color-light; + color: $gray-color; + content: attr(data-content); + display: inline-block; + font-size: $font-size-sm; + padding: 0 $unit-2; + transform: translateY(-$font-size-sm + $border-width); + } +} + +.divider { + border-top: $border-width solid $border-color-light; + height: $border-width; + margin: $unit-2 0; + + &[data-content] { + margin: $unit-4 0; + } +} + +.divider-vert { + display: block; + padding: $unit-4; + + &::before { + border-left: $border-width solid $border-color; + bottom: $unit-2; + content: ""; + display: block; + left: 50%; + position: absolute; + top: $unit-2; + transform: translateX(-50%); + } + + &[data-content]::after { + left: 50%; + padding: $unit-1 0; + position: absolute; + top: 50%; + transform: translate(-50%, -50%); + } +} diff --git a/Start/Client/Sass/Spectre/utilities/_loading.scss b/Start/Client/Sass/Spectre/utilities/_loading.scss new file mode 100644 index 0000000..2cfdefa --- /dev/null +++ b/Start/Client/Sass/Spectre/utilities/_loading.scss @@ -0,0 +1,37 @@ +// Loading +.loading { + color: transparent !important; + min-height: $unit-4; + pointer-events: none; + position: relative; + &::after { + animation: loading 500ms infinite linear; + background: transparent; + border: $border-width-lg solid $primary-color; + border-radius: 50%; + border-right-color: transparent; + border-top-color: transparent; + content: ""; + display: block; + height: $unit-4; + left: 50%; + margin-left: -$unit-2; + margin-top: -$unit-2; + opacity: 1; + padding: 0; + position: absolute; + top: 50%; + width: $unit-4; + z-index: $zindex-0; + } + + &.loading-lg { + min-height: $unit-10; + &::after { + height: $unit-8; + margin-left: -$unit-4; + margin-top: -$unit-4; + width: $unit-8; + } + } +} diff --git a/Start/Client/Sass/Spectre/utilities/_position.scss b/Start/Client/Sass/Spectre/utilities/_position.scss new file mode 100644 index 0000000..c1a7f75 --- /dev/null +++ b/Start/Client/Sass/Spectre/utilities/_position.scss @@ -0,0 +1,54 @@ +// Position +.clearfix { + @include clearfix(); +} + +.float-left { + float: left !important; +} + +.float-right { + float: right !important; +} + +.p-relative { + position: relative !important; +} + +.p-absolute { + position: absolute !important; +} + +.p-fixed { + position: fixed !important; +} + +.p-sticky { + position: sticky !important; +} + +.p-centered { + display: block; + float: none; + margin-left: auto; + margin-right: auto; +} + +.flex-centered { + align-items: center; + display: flex; + justify-content: center; +} + +// Spacing +@include margin-variant(0, 0); + +@include margin-variant(1, $unit-1); + +@include margin-variant(2, $unit-2); + +@include padding-variant(0, 0); + +@include padding-variant(1, $unit-1); + +@include padding-variant(2, $unit-2); diff --git a/Start/Client/Sass/Spectre/utilities/_shapes.scss b/Start/Client/Sass/Spectre/utilities/_shapes.scss new file mode 100644 index 0000000..23e131e --- /dev/null +++ b/Start/Client/Sass/Spectre/utilities/_shapes.scss @@ -0,0 +1,8 @@ +// Shapes +.s-rounded { + border-radius: $border-radius; +} + +.s-circle { + border-radius: 50%; +} \ No newline at end of file diff --git a/Start/Client/Sass/Spectre/utilities/_text.scss b/Start/Client/Sass/Spectre/utilities/_text.scss new file mode 100644 index 0000000..5796905 --- /dev/null +++ b/Start/Client/Sass/Spectre/utilities/_text.scss @@ -0,0 +1,76 @@ +// Text +// Text alignment utilities +.text-left { + text-align: left; +} + +.text-right { + text-align: right; +} + +.text-center { + text-align: center; +} + +.text-justify { + text-align: justify; +} + +// Text transform utilities +.text-lowercase { + text-transform: lowercase; +} + +.text-uppercase { + text-transform: uppercase; +} + +.text-capitalize { + text-transform: capitalize; +} + +// Text style utilities +.text-normal { + font-weight: normal; +} + +.text-bold { + font-weight: bold; +} + +.text-italic { + font-style: italic; +} + +.text-large { + font-size: 1.2em; +} + +.text-small { + font-size: .9em; +} + +.text-tiny { + font-size: .8em; +} + +.text-muted { + opacity: .8; +} + +// Text overflow utilities +.text-ellipsis { + @include text-ellipsis(); +} + +.text-clip { + overflow: hidden; + text-overflow: clip; + white-space: nowrap; +} + +.text-break { + hyphens: auto; + word-break: break-word; + word-wrap: break-word; +} diff --git a/Start/Client/Sass/app.scss b/Start/Client/Sass/app.scss new file mode 100644 index 0000000..07df8bd --- /dev/null +++ b/Start/Client/Sass/app.scss @@ -0,0 +1,188 @@ +/* Validation */ +.valid.modified:not([type=checkbox]) { + outline: 1px solid #26b050; +} + +.invalid { + outline: 1px solid red; +} + +.validation-message { + color: red; +} + + +/* Blazor */ +#blazor-error-ui { + background: lightyellow; + bottom: 0; + box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); + display: none; + left: 0; + padding: 0.6rem 1.25rem 0.7rem 1.25rem; + position: fixed; + width: 100%; + z-index: 1000; +} + +#blazor-error-ui .dismiss { + cursor: pointer; + position: absolute; + right: 0.75rem; + top: 0.5rem; +} + + +/* Spectre's default is no padding */ +.container { + padding: 0.4rem; +} + +/* The splash screen */ +.appLoadingContainer { + height: 100vh; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + + +#sidebar { + display: flex; + flex-direction: column; +} + +#sidebar #sidebarHeading { + padding: 0.5rem 1.5rem; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; +} + +#sidebar #sidebarHeading h1 { + margin: 0; +} + +#sidebar .nav { + padding: 0.5rem 1.5rem; +} + +#sidebar #sidebarItems { + flex: 1; /* Fill remaining space */ + overflow-y: auto; +} + +#sidebar .accountActions { + border-top: solid 1px #dadee4; +} + +#sidebar .accountActions .accountName { + font-weight: bold; + margin-bottom: 1em; +} + +.off-canvas .off-canvas-content { + padding: 0; +} + +#menuButton .icon { + transform: scale(1.2); +} + +#containerTabStrip { + width: 100%; + display: flex; + align-items: center; +} + +#containerTabStrip #menuButton { + flex: 0 0 auto; + margin-right: 1em; + margin-left: 1em; +} + +#containerTabStrip .containerList { + flex: 1 0 0; +} + +#containerTabStrip .containerList .tab-item a { + padding: .6rem .4rem .6rem .4rem; +} + +#bookmarkGroups { + margin-top: 1em; + margin-left: auto; + margin-right: auto; + max-width: 1280px; + display: grid; + grid-column-gap: 1.25rem; + grid-row-gap: 1.25rem; +} + +@media screen and (max-width: 960px) { + #bookmarkGroups { + grid-template-columns: repeat(1, 1fr); + padding: 1em; + } +} + +@media screen and (min-width: 960px) { + #bookmarkGroups { + grid-template-columns: repeat(2, 1fr); + width: 60%; + } +} + +@media screen and (min-width: 1440) { + #bookmarkGroups { + grid-template-columns: repeat(3, 1fr); + width: 60%; + } +} + +.bookmarkGroup { + width: 100%; +} + +.bookmarkGroup .card-header { + padding-top: 0; +} + +.bookmarkGroup .card-title { + margin-top: 0.5em; +} + +.bookmarkGroup .card-body { + padding: 0; +} + +.bookmarkGroup .card-body:last-child { + padding: 0; +} + +ul.bookmarks { + list-style: none; + margin: 0; +} + +li.noBookmarksItem { + margin-top: 0; +} + +.addBookmarkGroupButton button { + width: 100%; + margin-top: 0.5em; +} + +button.addBookmarkButton { + width: 100%; +} + +@media screen and (prefers-color-scheme: dark) { + body { + color: #fafafa; + background-color: #111111; + } +} diff --git a/Start/Client/Start.Client.csproj b/Start/Client/Start.Client.csproj index 2e961b1..32fbad9 100644 --- a/Start/Client/Start.Client.csproj +++ b/Start/Client/Start.Client.csproj @@ -7,9 +7,78 @@ Nullable + + + + + BeforeBuild + sass ${ProjectDir}/Sass/Spectre/spectre.scss ${ProjectDir}/wwwroot/css/spectre/spectre.css + ${ProjectDir} + + + BeforeBuild + sass ${ProjectDir}/Sass/Spectre/spectre-exp.scss ${ProjectDir}/wwwroot/css/spectre/spectre-exp.css + ${ProjectDir} + + + BeforeBuild + sass ${ProjectDir}/Sass/Spectre/spectre-icons.scss ${ProjectDir}/wwwroot/css/spectre/spectre-icons.css + ${ProjectDir} + + + BeforeBuild + sass ${ProjectDir}/Sass/app.scss ${ProjectDir}/wwwroot/css/app.css + ${ProjectDir} + + + + + + + + + BeforeBuild + sass --style=compressed ${ProjectDir}/Sass/Spectre/spectre.scss ${ProjectDir}/wwwroot/css/spectre/spectre.css + ${ProjectDir} + + + BeforeBuild + sass --style=compressed ${ProjectDir}/Sass/Spectre/spectre-exp.scss ${ProjectDir}/wwwroot/css/spectre/spectre-exp.css + ${ProjectDir} + + + BeforeBuild + sass --style=compressed ${ProjectDir}/Sass/Spectre/spectre-icons.scss ${ProjectDir}/wwwroot/css/spectre/spectre-icons.css + ${ProjectDir} + + + BeforeBuild + sass --style=compressed ${ProjectDir}/Sass/app.scss ${ProjectDir}/wwwroot/css/app.css + ${ProjectDir} + + + + + true + + + + + + + + + + + + + + + + @@ -48,6 +117,8 @@ + + @@ -62,5 +133,7 @@ + + diff --git a/Start/Client/wwwroot/css/app.css b/Start/Client/wwwroot/css/app.css deleted file mode 100644 index bb80552..0000000 --- a/Start/Client/wwwroot/css/app.css +++ /dev/null @@ -1,181 +0,0 @@ -/* Validation */ -.valid.modified:not([type=checkbox]) { - outline: 1px solid #26b050; -} - -.invalid { - outline: 1px solid red; -} - -.validation-message { - color: red; -} - - -/* Blazor */ -#blazor-error-ui { - background: lightyellow; - bottom: 0; - box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); - display: none; - left: 0; - padding: 0.6rem 1.25rem 0.7rem 1.25rem; - position: fixed; - width: 100%; - z-index: 1000; -} - - #blazor-error-ui .dismiss { - cursor: pointer; - position: absolute; - right: 0.75rem; - top: 0.5rem; - } - - -/* Spectre's default is no padding */ -.container { - padding: 0.4rem; -} - -/* The splash screen */ -.appLoadingContainer { - height: 100vh; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; -} - - -#sidebar { - display: flex; - flex-direction: column; -} - - #sidebar #sidebarHeading { - padding: 0.5rem 1.5rem; - display: flex; - flex-direction: row; - align-items: center; - justify-content: space-between; - } - - #sidebar #sidebarHeading h1 { - margin: 0; - } - - #sidebar .nav { - padding: 0.5rem 1.5rem; - } - - #sidebar #sidebarItems { - flex: 1; /* Fill remaining space */ - overflow-y: auto; - } - - #sidebar .accountActions { - border-top: solid 1px #dadee4; - } - - #sidebar .accountActions .accountName { - font-weight: bold; - margin-bottom: 1em; - } - -.off-canvas .off-canvas-content { - padding: 0; -} - -#menuButton .icon { - transform: scale(1.2); -} - -#containerTabStrip { - width: 100%; - display: flex; - align-items: center; -} - - #containerTabStrip #menuButton { - flex: 0 0 auto; - margin-right: 1em; - margin-left: 1em; - } - - #containerTabStrip .containerList { - flex: 1 0 0; - } - - #containerTabStrip .containerList .tab-item a { - padding: .6rem .4rem .6rem .4rem; - } - -#bookmarkGroups { - margin-top: 1em; - margin-left: auto; - margin-right: auto; - max-width: 1280px; - display: grid; - grid-column-gap: 1.25rem; - grid-row-gap: 1.25rem; -} - -@media screen and (max-width: 960px) { - #bookmarkGroups { - grid-template-columns: repeat(1, 1fr); - padding: 1em; - } -} - -@media screen and (min-width: 960px) { - #bookmarkGroups { - grid-template-columns: repeat(2, 1fr); - width: 60%; - } -} - -@media screen and (min-width: 1440) { - #bookmarkGroups { - grid-template-columns: repeat(3, 1fr); - width: 60%; - } -} - -.bookmarkGroup { - width: 100%; -} - - .bookmarkGroup .card-header { - padding-top: 0; - } - - .bookmarkGroup .card-title { - margin-top: 0.5em; - } - - .bookmarkGroup .card-body { - padding: 0; - } - - .bookmarkGroup .card-body:last-child { - padding: 0; - } - -ul.bookmarks { - list-style: none; - margin: 0; -} - -li.noBookmarksItem { - margin-top: 0; -} - -.addBookmarkGroupButton button { - width: 100%; - margin-top: 0.5em; -} - -button.addBookmarkButton { - width: 100%; -} diff --git a/Start/Client/wwwroot/css/spectre/spectre-exp.css b/Start/Client/wwwroot/css/spectre/spectre-exp.css deleted file mode 100644 index 446b277..0000000 --- a/Start/Client/wwwroot/css/spectre/spectre-exp.css +++ /dev/null @@ -1,1231 +0,0 @@ -/*! Spectre.css Experimentals v0.5.9 | MIT License | github.com/picturepan2/spectre */ -.form-autocomplete { - position: relative; -} - -.form-autocomplete .form-autocomplete-input { - align-content: flex-start; - display: -ms-flexbox; - display: flex; - -ms-flex-line-pack: start; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - height: auto; - min-height: 1.6rem; - padding: .1rem; -} - -.form-autocomplete .form-autocomplete-input.is-focused { - border-color: #5755d9; - box-shadow: 0 0 0 .1rem rgba(87, 85, 217, .2); -} - -.form-autocomplete .form-autocomplete-input .form-input { - border-color: transparent; - box-shadow: none; - display: inline-block; - -ms-flex: 1 0 auto; - flex: 1 0 auto; - height: 1.2rem; - line-height: .8rem; - margin: .1rem; - width: auto; -} - -.form-autocomplete .menu { - left: 0; - position: absolute; - top: 100%; - width: 100%; -} - -.form-autocomplete.autocomplete-oneline .form-autocomplete-input { - -ms-flex-wrap: nowrap; - flex-wrap: nowrap; - overflow-x: auto; -} - -.form-autocomplete.autocomplete-oneline .chip { - -ms-flex: 1 0 auto; - flex: 1 0 auto; -} - -.calendar { - border: .05rem solid #dadee4; - border-radius: .1rem; - display: block; - min-width: 280px; -} - -.calendar .calendar-nav { - align-items: center; - background: #f7f8f9; - border-top-left-radius: .1rem; - border-top-right-radius: .1rem; - display: -ms-flexbox; - display: flex; - -ms-flex-align: center; - font-size: .9rem; - padding: .4rem; -} - -.calendar .calendar-header, -.calendar .calendar-body { - display: -ms-flexbox; - display: flex; - -ms-flex-pack: center; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - justify-content: center; - padding: .4rem 0; -} - -.calendar .calendar-header .calendar-date, -.calendar .calendar-body .calendar-date { - -ms-flex: 0 0 14.28%; - flex: 0 0 14.28%; - max-width: 14.28%; -} - -.calendar .calendar-header { - background: #f7f8f9; - border-bottom: .05rem solid #dadee4; - color: #bcc3ce; - font-size: .7rem; - text-align: center; -} - -.calendar .calendar-body { - color: #66758c; -} - -.calendar .calendar-date { - border: 0; - padding: .2rem; -} - -.calendar .calendar-date .date-item { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background: transparent; - border: .05rem solid transparent; - border-radius: 50%; - color: #66758c; - cursor: pointer; - font-size: .7rem; - height: 1.4rem; - line-height: 1rem; - outline: none; - padding: .1rem; - position: relative; - text-align: center; - text-decoration: none; - transition: background .2s, border .2s, box-shadow .2s, color .2s; - vertical-align: middle; - white-space: nowrap; - width: 1.4rem; -} - -.calendar .calendar-date .date-item.date-today { - border-color: #e5e5f9; - color: #5755d9; -} - -.calendar .calendar-date .date-item:focus { - box-shadow: 0 0 0 .1rem rgba(87, 85, 217, .2); -} - -.calendar .calendar-date .date-item:focus, -.calendar .calendar-date .date-item:hover { - background: #fefeff; - border-color: #e5e5f9; - color: #5755d9; - text-decoration: none; -} - -.calendar .calendar-date .date-item:active, -.calendar .calendar-date .date-item.active { - background: #4b48d6; - border-color: #3634d2; - color: #fff; -} - -.calendar .calendar-date .date-item.badge::after { - position: absolute; - right: 3px; - top: 3px; - transform: translate(50%, -50%); -} - -.calendar .calendar-date .date-item:disabled, -.calendar .calendar-date .date-item.disabled, -.calendar .calendar-date .calendar-event:disabled, -.calendar .calendar-date .calendar-event.disabled { - cursor: default; - opacity: .25; - pointer-events: none; -} - -.calendar .calendar-date.prev-month .date-item, -.calendar .calendar-date.prev-month .calendar-event, -.calendar .calendar-date.next-month .date-item, -.calendar .calendar-date.next-month .calendar-event { - opacity: .25; -} - -.calendar .calendar-range { - position: relative; -} - -.calendar .calendar-range::before { - background: #f1f1fc; - content: ""; - height: 1.4rem; - left: 0; - position: absolute; - right: 0; - top: 50%; - transform: translateY(-50%); -} - -.calendar .calendar-range.range-start::before { - left: 50%; -} - -.calendar .calendar-range.range-end::before { - right: 50%; -} - -.calendar .calendar-range.range-start .date-item, -.calendar .calendar-range.range-end .date-item { - background: #4b48d6; - border-color: #3634d2; - color: #fff; -} - -.calendar .calendar-range .date-item { - color: #5755d9; -} - -.calendar.calendar-lg .calendar-body { - padding: 0; -} - -.calendar.calendar-lg .calendar-body .calendar-date { - border-bottom: .05rem solid #dadee4; - border-right: .05rem solid #dadee4; - display: -ms-flexbox; - display: flex; - -ms-flex-direction: column; - flex-direction: column; - height: 5.5rem; - padding: 0; -} - -.calendar.calendar-lg .calendar-body .calendar-date:nth-child(7n) { - border-right: 0; -} - -.calendar.calendar-lg .calendar-body .calendar-date:nth-last-child(-n+7) { - border-bottom: 0; -} - -.calendar.calendar-lg .date-item { - align-self: flex-end; - -ms-flex-item-align: end; - height: 1.4rem; - margin-right: .2rem; - margin-top: .2rem; -} - -.calendar.calendar-lg .calendar-range::before { - top: 19px; -} - -.calendar.calendar-lg .calendar-range.range-start::before { - left: auto; - width: 19px; -} - -.calendar.calendar-lg .calendar-range.range-end::before { - right: 19px; -} - -.calendar.calendar-lg .calendar-events { - flex-grow: 1; - -ms-flex-positive: 1; - line-height: 1; - overflow-y: auto; - padding: .2rem; -} - -.calendar.calendar-lg .calendar-event { - border-radius: .1rem; - display: block; - font-size: .7rem; - margin: .1rem auto; - overflow: hidden; - padding: 3px 4px; - text-overflow: ellipsis; - white-space: nowrap; -} - -.carousel .carousel-locator:nth-of-type(1):checked ~ .carousel-container .carousel-item:nth-of-type(1), -.carousel .carousel-locator:nth-of-type(2):checked ~ .carousel-container .carousel-item:nth-of-type(2), -.carousel .carousel-locator:nth-of-type(3):checked ~ .carousel-container .carousel-item:nth-of-type(3), -.carousel .carousel-locator:nth-of-type(4):checked ~ .carousel-container .carousel-item:nth-of-type(4), -.carousel .carousel-locator:nth-of-type(5):checked ~ .carousel-container .carousel-item:nth-of-type(5), -.carousel .carousel-locator:nth-of-type(6):checked ~ .carousel-container .carousel-item:nth-of-type(6), -.carousel .carousel-locator:nth-of-type(7):checked ~ .carousel-container .carousel-item:nth-of-type(7), -.carousel .carousel-locator:nth-of-type(8):checked ~ .carousel-container .carousel-item:nth-of-type(8) { - animation: carousel-slidein .75s ease-in-out 1; - opacity: 1; - z-index: 100; -} - -.carousel .carousel-locator:nth-of-type(1):checked ~ .carousel-nav .nav-item:nth-of-type(1), -.carousel .carousel-locator:nth-of-type(2):checked ~ .carousel-nav .nav-item:nth-of-type(2), -.carousel .carousel-locator:nth-of-type(3):checked ~ .carousel-nav .nav-item:nth-of-type(3), -.carousel .carousel-locator:nth-of-type(4):checked ~ .carousel-nav .nav-item:nth-of-type(4), -.carousel .carousel-locator:nth-of-type(5):checked ~ .carousel-nav .nav-item:nth-of-type(5), -.carousel .carousel-locator:nth-of-type(6):checked ~ .carousel-nav .nav-item:nth-of-type(6), -.carousel .carousel-locator:nth-of-type(7):checked ~ .carousel-nav .nav-item:nth-of-type(7), -.carousel .carousel-locator:nth-of-type(8):checked ~ .carousel-nav .nav-item:nth-of-type(8) { - color: #f7f8f9; -} - -.carousel { - background: #f7f8f9; - display: block; - overflow: hidden; - -webkit-overflow-scrolling: touch; - position: relative; - width: 100%; - z-index: 1; -} - -.carousel .carousel-container { - height: 100%; - left: 0; - position: relative; -} - -.carousel .carousel-container::before { - content: ""; - display: block; - padding-bottom: 56.25%; -} - -.carousel .carousel-container .carousel-item { - animation: carousel-slideout 1s ease-in-out 1; - height: 100%; - left: 0; - margin: 0; - opacity: 0; - position: absolute; - top: 0; - width: 100%; -} - -.carousel .carousel-container .carousel-item:hover .item-prev, -.carousel .carousel-container .carousel-item:hover .item-next { - opacity: 1; -} - -.carousel .carousel-container .item-prev, -.carousel .carousel-container .item-next { - background: rgba(247, 248, 249, .25); - border-color: rgba(247, 248, 249, .5); - color: #f7f8f9; - opacity: 0; - position: absolute; - top: 50%; - transform: translateY(-50%); - transition: all .4s; - z-index: 100; -} - -.carousel .carousel-container .item-prev { - left: 1rem; -} - -.carousel .carousel-container .item-next { - right: 1rem; -} - -.carousel .carousel-nav { - bottom: .4rem; - display: -ms-flexbox; - display: flex; - -ms-flex-pack: center; - justify-content: center; - left: 50%; - position: absolute; - transform: translateX(-50%); - width: 10rem; - z-index: 100; -} - -.carousel .carousel-nav .nav-item { - color: rgba(247, 248, 249, .5); - display: block; - -ms-flex: 1 0 auto; - flex: 1 0 auto; - height: 1.6rem; - margin: .2rem; - max-width: 2.5rem; - position: relative; -} - -.carousel .carousel-nav .nav-item::before { - background: currentColor; - content: ""; - display: block; - height: .1rem; - position: absolute; - top: .5rem; - width: 100%; -} - -@keyframes carousel-slidein { - 0% { - transform: translateX(100%); - } - 100% { - transform: translateX(0); - } -} - -@keyframes carousel-slideout { - 0% { - opacity: 1; - transform: translateX(0); - } - 100% { - opacity: 1; - transform: translateX(-50%); - } -} - -.comparison-slider { - height: 50vh; - overflow: hidden; - -webkit-overflow-scrolling: touch; - position: relative; - width: 100%; -} - -.comparison-slider .comparison-before, -.comparison-slider .comparison-after { - height: 100%; - left: 0; - margin: 0; - overflow: hidden; - position: absolute; - top: 0; -} - -.comparison-slider .comparison-before img, -.comparison-slider .comparison-after img { - height: 100%; - object-fit: cover; - object-position: left center; - position: absolute; - width: 100%; -} - -.comparison-slider .comparison-before { - width: 100%; - z-index: 1; -} - -.comparison-slider .comparison-before .comparison-label { - right: .8rem; -} - -.comparison-slider .comparison-after { - max-width: 100%; - min-width: 0; - z-index: 2; -} - -.comparison-slider .comparison-after::before { - background: transparent; - content: ""; - cursor: default; - height: 100%; - left: 0; - position: absolute; - right: .8rem; - top: 0; - z-index: 1; -} - -.comparison-slider .comparison-after::after { - background: currentColor; - border-radius: 50%; - box-shadow: 0 -5px, 0 5px; - color: #fff; - content: ""; - height: 3px; - pointer-events: none; - position: absolute; - right: .4rem; - top: 50%; - transform: translate(50%, -50%); - width: 3px; -} - -.comparison-slider .comparison-after .comparison-label { - left: .8rem; -} - -.comparison-slider .comparison-resizer { - animation: first-run 1.5s 1 ease-in-out; - cursor: ew-resize; - height: .8rem; - left: 0; - max-width: 100%; - min-width: .8rem; - opacity: 0; - outline: none; - position: relative; - resize: horizontal; - top: 50%; - transform: translateY(-50%) scaleY(30); - width: 0; -} - -.comparison-slider .comparison-label { - background: rgba(48, 55, 66, .5); - bottom: .8rem; - color: #fff; - padding: .2rem .4rem; - position: absolute; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -@keyframes first-run { - 0% { - width: 0; - } - 25% { - width: 2.4rem; - } - 50% { - width: .8rem; - } - 75% { - width: 1.2rem; - } - 100% { - width: 0; - } -} - -.filter .filter-tag#tag-0:checked ~ .filter-nav .chip[for="tag-0"], -.filter .filter-tag#tag-1:checked ~ .filter-nav .chip[for="tag-1"], -.filter .filter-tag#tag-2:checked ~ .filter-nav .chip[for="tag-2"], -.filter .filter-tag#tag-3:checked ~ .filter-nav .chip[for="tag-3"], -.filter .filter-tag#tag-4:checked ~ .filter-nav .chip[for="tag-4"], -.filter .filter-tag#tag-5:checked ~ .filter-nav .chip[for="tag-5"], -.filter .filter-tag#tag-6:checked ~ .filter-nav .chip[for="tag-6"], -.filter .filter-tag#tag-7:checked ~ .filter-nav .chip[for="tag-7"], -.filter .filter-tag#tag-8:checked ~ .filter-nav .chip[for="tag-8"] { - background: #5755d9; - color: #fff; -} - -.filter .filter-tag#tag-1:checked ~ .filter-body .filter-item:not([data-tag~="tag-1"]), -.filter .filter-tag#tag-2:checked ~ .filter-body .filter-item:not([data-tag~="tag-2"]), -.filter .filter-tag#tag-3:checked ~ .filter-body .filter-item:not([data-tag~="tag-3"]), -.filter .filter-tag#tag-4:checked ~ .filter-body .filter-item:not([data-tag~="tag-4"]), -.filter .filter-tag#tag-5:checked ~ .filter-body .filter-item:not([data-tag~="tag-5"]), -.filter .filter-tag#tag-6:checked ~ .filter-body .filter-item:not([data-tag~="tag-6"]), -.filter .filter-tag#tag-7:checked ~ .filter-body .filter-item:not([data-tag~="tag-7"]), -.filter .filter-tag#tag-8:checked ~ .filter-body .filter-item:not([data-tag~="tag-8"]) { - display: none; -} - -.filter .filter-nav { - margin: .4rem 0; -} - -.filter .filter-body { - display: -ms-flexbox; - display: flex; - -ms-flex-wrap: wrap; - flex-wrap: wrap; -} - -.meter { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background: #f7f8f9; - border: 0; - border-radius: .1rem; - display: block; - height: .8rem; - width: 100%; -} - -.meter::-webkit-meter-inner-element { - display: block; -} - -.meter::-webkit-meter-bar, -.meter::-webkit-meter-optimum-value, -.meter::-webkit-meter-suboptimum-value, -.meter::-webkit-meter-even-less-good-value { - border-radius: .1rem; -} - -.meter::-webkit-meter-bar { - background: #f7f8f9; -} - -.meter::-webkit-meter-optimum-value { - background: #32b643; -} - -.meter::-webkit-meter-suboptimum-value { - background: #ffb700; -} - -.meter::-webkit-meter-even-less-good-value { - background: #e85600; -} - -.meter::-moz-meter-bar, -.meter:-moz-meter-optimum, -.meter:-moz-meter-sub-optimum, -.meter:-moz-meter-sub-sub-optimum { - border-radius: .1rem; -} - -.meter:-moz-meter-optimum::-moz-meter-bar { - background: #32b643; -} - -.meter:-moz-meter-sub-optimum::-moz-meter-bar { - background: #ffb700; -} - -.meter:-moz-meter-sub-sub-optimum::-moz-meter-bar { - background: #e85600; -} - -.off-canvas { - display: -ms-flexbox; - display: flex; - -ms-flex-flow: nowrap; - flex-flow: nowrap; - height: 100%; - position: relative; - width: 100%; -} - -.off-canvas .off-canvas-toggle { - display: block; - left: .4rem; - position: absolute; - top: .4rem; - transition: none; - z-index: 1; -} - -.off-canvas .off-canvas-sidebar { - background: #f7f8f9; - bottom: 0; - left: 0; - min-width: 10rem; - overflow-y: auto; - position: fixed; - top: 0; - transform: translateX(-100%); - transition: transform .25s; - z-index: 200; -} - -.off-canvas .off-canvas-content { - -ms-flex: 1 1 auto; - flex: 1 1 auto; - height: 100%; - padding: .4rem .4rem .4rem 4rem; -} - -.off-canvas .off-canvas-overlay { - background: rgba(48, 55, 66, .1); - border-color: transparent; - border-radius: 0; - bottom: 0; - display: none; - height: 100%; - left: 0; - position: fixed; - right: 0; - top: 0; - width: 100%; -} - -.off-canvas .off-canvas-sidebar:target, -.off-canvas .off-canvas-sidebar.active { - transform: translateX(0); -} - -.off-canvas .off-canvas-sidebar:target ~ .off-canvas-overlay, -.off-canvas .off-canvas-sidebar.active ~ .off-canvas-overlay { - display: block; - z-index: 100; -} - -@media (min-width: 960px) { - .off-canvas.off-canvas-sidebar-show .off-canvas-toggle { - display: none; - } - .off-canvas.off-canvas-sidebar-show .off-canvas-sidebar { - -ms-flex: 0 0 auto; - flex: 0 0 auto; - position: relative; - transform: none; - } - .off-canvas.off-canvas-sidebar-show .off-canvas-overlay { - display: none !important; - } -} - -.parallax { - display: block; - height: auto; - position: relative; - width: auto; -} - -.parallax .parallax-content { - box-shadow: 0 1rem 2.1rem rgba(48, 55, 66, .3); - height: auto; - transform: perspective(1000px); - transform-style: preserve-3d; - transition: all .4s ease; - width: 100%; -} - -.parallax .parallax-content::before { - content: ""; - display: block; - height: 100%; - left: 0; - position: absolute; - top: 0; - width: 100%; -} - -.parallax .parallax-front { - align-items: center; - color: #fff; - display: -ms-flexbox; - display: flex; - -ms-flex-align: center; - -ms-flex-pack: center; - height: 100%; - justify-content: center; - left: 0; - position: absolute; - text-align: center; - text-shadow: 0 0 20px rgba(48, 55, 66, .75); - top: 0; - transform: translateZ(50px) scale(.95); - transition: transform .4s; - width: 100%; - z-index: 1; -} - -.parallax .parallax-top-left { - height: 50%; - left: 0; - outline: none; - position: absolute; - top: 0; - width: 50%; - z-index: 100; -} - -.parallax .parallax-top-left:focus ~ .parallax-content, -.parallax .parallax-top-left:hover ~ .parallax-content { - transform: perspective(1000px) rotateX(3deg) rotateY(-3deg); -} - -.parallax .parallax-top-left:focus ~ .parallax-content::before, -.parallax .parallax-top-left:hover ~ .parallax-content::before { - background: linear-gradient(135deg, rgba(255, 255, 255, .35) 0%, transparent 50%); -} - -.parallax .parallax-top-left:focus ~ .parallax-content .parallax-front, -.parallax .parallax-top-left:hover ~ .parallax-content .parallax-front { - transform: translate3d(4.5px, 4.5px, 50px) scale(.95); -} - -.parallax .parallax-top-right { - height: 50%; - outline: none; - position: absolute; - right: 0; - top: 0; - width: 50%; - z-index: 100; -} - -.parallax .parallax-top-right:focus ~ .parallax-content, -.parallax .parallax-top-right:hover ~ .parallax-content { - transform: perspective(1000px) rotateX(3deg) rotateY(3deg); -} - -.parallax .parallax-top-right:focus ~ .parallax-content::before, -.parallax .parallax-top-right:hover ~ .parallax-content::before { - background: linear-gradient(-135deg, rgba(255, 255, 255, .35) 0%, transparent 50%); -} - -.parallax .parallax-top-right:focus ~ .parallax-content .parallax-front, -.parallax .parallax-top-right:hover ~ .parallax-content .parallax-front { - transform: translate3d(-4.5px, 4.5px, 50px) scale(.95); -} - -.parallax .parallax-bottom-left { - bottom: 0; - height: 50%; - left: 0; - outline: none; - position: absolute; - width: 50%; - z-index: 100; -} - -.parallax .parallax-bottom-left:focus ~ .parallax-content, -.parallax .parallax-bottom-left:hover ~ .parallax-content { - transform: perspective(1000px) rotateX(-3deg) rotateY(-3deg); -} - -.parallax .parallax-bottom-left:focus ~ .parallax-content::before, -.parallax .parallax-bottom-left:hover ~ .parallax-content::before { - background: linear-gradient(45deg, rgba(255, 255, 255, .35) 0%, transparent 50%); -} - -.parallax .parallax-bottom-left:focus ~ .parallax-content .parallax-front, -.parallax .parallax-bottom-left:hover ~ .parallax-content .parallax-front { - transform: translate3d(4.5px, -4.5px, 50px) scale(.95); -} - -.parallax .parallax-bottom-right { - bottom: 0; - height: 50%; - outline: none; - position: absolute; - right: 0; - width: 50%; - z-index: 100; -} - -.parallax .parallax-bottom-right:focus ~ .parallax-content, -.parallax .parallax-bottom-right:hover ~ .parallax-content { - transform: perspective(1000px) rotateX(-3deg) rotateY(3deg); -} - -.parallax .parallax-bottom-right:focus ~ .parallax-content::before, -.parallax .parallax-bottom-right:hover ~ .parallax-content::before { - background: linear-gradient(-45deg, rgba(255, 255, 255, .35) 0%, transparent 50%); -} - -.parallax .parallax-bottom-right:focus ~ .parallax-content .parallax-front, -.parallax .parallax-bottom-right:hover ~ .parallax-content .parallax-front { - transform: translate3d(-4.5px, -4.5px, 50px) scale(.95); -} - -.progress { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background: #eef0f3; - border: 0; - border-radius: .1rem; - color: #5755d9; - height: .2rem; - position: relative; - width: 100%; -} - -.progress::-webkit-progress-bar { - background: transparent; - border-radius: .1rem; -} - -.progress::-webkit-progress-value { - background: #5755d9; - border-radius: .1rem; -} - -.progress::-moz-progress-bar { - background: #5755d9; - border-radius: .1rem; -} - -.progress:indeterminate { - animation: progress-indeterminate 1.5s linear infinite; - background: #eef0f3 linear-gradient(to right, #5755d9 30%, #eef0f3 30%) top left/150% 150% no-repeat; -} - -.progress:indeterminate::-moz-progress-bar { - background: transparent; -} - -@keyframes progress-indeterminate { - 0% { - background-position: 200% 0; - } - 100% { - background-position: -200% 0; - } -} - -.slider { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background: transparent; - display: block; - height: 1.2rem; - width: 100%; -} - -.slider:focus { - box-shadow: 0 0 0 .1rem rgba(87, 85, 217, .2); - outline: none; -} - -.slider.tooltip:not([data-tooltip])::after { - content: attr(value); -} - -.slider::-webkit-slider-thumb { - -webkit-appearance: none; - background: #5755d9; - border: 0; - border-radius: 50%; - height: .6rem; - margin-top: -.25rem; - -webkit-transition: transform .2s; - transition: transform .2s; - width: .6rem; -} - -.slider::-moz-range-thumb { - background: #5755d9; - border: 0; - border-radius: 50%; - height: .6rem; - -moz-transition: transform .2s; - transition: transform .2s; - width: .6rem; -} - -.slider::-ms-thumb { - background: #5755d9; - border: 0; - border-radius: 50%; - height: .6rem; - -ms-transition: transform .2s; - transition: transform .2s; - width: .6rem; -} - -.slider:active::-webkit-slider-thumb { - transform: scale(1.25); -} - -.slider:active::-moz-range-thumb { - transform: scale(1.25); -} - -.slider:active::-ms-thumb { - transform: scale(1.25); -} - -.slider:disabled::-webkit-slider-thumb, -.slider.disabled::-webkit-slider-thumb { - background: #f7f8f9; - transform: scale(1); -} - -.slider:disabled::-moz-range-thumb, -.slider.disabled::-moz-range-thumb { - background: #f7f8f9; - transform: scale(1); -} - -.slider:disabled::-ms-thumb, -.slider.disabled::-ms-thumb { - background: #f7f8f9; - transform: scale(1); -} - -.slider::-webkit-slider-runnable-track { - background: #eef0f3; - border-radius: .1rem; - height: .1rem; - width: 100%; -} - -.slider::-moz-range-track { - background: #eef0f3; - border-radius: .1rem; - height: .1rem; - width: 100%; -} - -.slider::-ms-track { - background: #eef0f3; - border-radius: .1rem; - height: .1rem; - width: 100%; -} - -.slider::-ms-fill-lower { - background: #5755d9; -} - -.timeline .timeline-item { - display: -ms-flexbox; - display: flex; - margin-bottom: 1.2rem; - position: relative; -} - -.timeline .timeline-item::before { - background: #dadee4; - content: ""; - height: 100%; - left: 11px; - position: absolute; - top: 1.2rem; - width: 2px; -} - -.timeline .timeline-item .timeline-left { - -ms-flex: 0 0 auto; - flex: 0 0 auto; -} - -.timeline .timeline-item .timeline-content { - -ms-flex: 1 1 auto; - flex: 1 1 auto; - padding: 2px 0 2px .8rem; -} - -.timeline .timeline-item .timeline-icon { - align-items: center; - border-radius: 50%; - color: #fff; - display: -ms-flexbox; - display: flex; - -ms-flex-align: center; - -ms-flex-pack: center; - height: 1.2rem; - justify-content: center; - text-align: center; - width: 1.2rem; -} - -.timeline .timeline-item .timeline-icon::before { - border: .1rem solid #5755d9; - border-radius: 50%; - content: ""; - display: block; - height: .4rem; - left: .4rem; - position: absolute; - top: .4rem; - width: .4rem; -} - -.timeline .timeline-item .timeline-icon.icon-lg { - background: #5755d9; - line-height: 1.2rem; -} - -.timeline .timeline-item .timeline-icon.icon-lg::before { - content: none; -} - -.viewer-360 { - align-items: center; - display: -ms-flexbox; - display: flex; - -ms-flex-align: center; - -ms-flex-direction: column; - flex-direction: column; -} - -.viewer-360 .viewer-slider[max="36"][value="1"] + .viewer-image { - background-position-y: 0; -} - -.viewer-360 .viewer-slider[max="36"][value="2"] + .viewer-image { - background-position-y: 2.8571428571%; -} - -.viewer-360 .viewer-slider[max="36"][value="3"] + .viewer-image { - background-position-y: 5.7142857143%; -} - -.viewer-360 .viewer-slider[max="36"][value="4"] + .viewer-image { - background-position-y: 8.5714285714%; -} - -.viewer-360 .viewer-slider[max="36"][value="5"] + .viewer-image { - background-position-y: 11.4285714286%; -} - -.viewer-360 .viewer-slider[max="36"][value="6"] + .viewer-image { - background-position-y: 14.2857142857%; -} - -.viewer-360 .viewer-slider[max="36"][value="7"] + .viewer-image { - background-position-y: 17.1428571429%; -} - -.viewer-360 .viewer-slider[max="36"][value="8"] + .viewer-image { - background-position-y: 20%; -} - -.viewer-360 .viewer-slider[max="36"][value="9"] + .viewer-image { - background-position-y: 22.8571428571%; -} - -.viewer-360 .viewer-slider[max="36"][value="10"] + .viewer-image { - background-position-y: 25.7142857143%; -} - -.viewer-360 .viewer-slider[max="36"][value="11"] + .viewer-image { - background-position-y: 28.5714285714%; -} - -.viewer-360 .viewer-slider[max="36"][value="12"] + .viewer-image { - background-position-y: 31.4285714286%; -} - -.viewer-360 .viewer-slider[max="36"][value="13"] + .viewer-image { - background-position-y: 34.2857142857%; -} - -.viewer-360 .viewer-slider[max="36"][value="14"] + .viewer-image { - background-position-y: 37.1428571429%; -} - -.viewer-360 .viewer-slider[max="36"][value="15"] + .viewer-image { - background-position-y: 40%; -} - -.viewer-360 .viewer-slider[max="36"][value="16"] + .viewer-image { - background-position-y: 42.8571428571%; -} - -.viewer-360 .viewer-slider[max="36"][value="17"] + .viewer-image { - background-position-y: 45.7142857143%; -} - -.viewer-360 .viewer-slider[max="36"][value="18"] + .viewer-image { - background-position-y: 48.5714285714%; -} - -.viewer-360 .viewer-slider[max="36"][value="19"] + .viewer-image { - background-position-y: 51.4285714286%; -} - -.viewer-360 .viewer-slider[max="36"][value="20"] + .viewer-image { - background-position-y: 54.2857142857%; -} - -.viewer-360 .viewer-slider[max="36"][value="21"] + .viewer-image { - background-position-y: 57.1428571429%; -} - -.viewer-360 .viewer-slider[max="36"][value="22"] + .viewer-image { - background-position-y: 60%; -} - -.viewer-360 .viewer-slider[max="36"][value="23"] + .viewer-image { - background-position-y: 62.8571428571%; -} - -.viewer-360 .viewer-slider[max="36"][value="24"] + .viewer-image { - background-position-y: 65.7142857143%; -} - -.viewer-360 .viewer-slider[max="36"][value="25"] + .viewer-image { - background-position-y: 68.5714285714%; -} - -.viewer-360 .viewer-slider[max="36"][value="26"] + .viewer-image { - background-position-y: 71.4285714286%; -} - -.viewer-360 .viewer-slider[max="36"][value="27"] + .viewer-image { - background-position-y: 74.2857142857%; -} - -.viewer-360 .viewer-slider[max="36"][value="28"] + .viewer-image { - background-position-y: 77.1428571429%; -} - -.viewer-360 .viewer-slider[max="36"][value="29"] + .viewer-image { - background-position-y: 80%; -} - -.viewer-360 .viewer-slider[max="36"][value="30"] + .viewer-image { - background-position-y: 82.8571428571%; -} - -.viewer-360 .viewer-slider[max="36"][value="31"] + .viewer-image { - background-position-y: 85.7142857143%; -} - -.viewer-360 .viewer-slider[max="36"][value="32"] + .viewer-image { - background-position-y: 88.5714285714%; -} - -.viewer-360 .viewer-slider[max="36"][value="33"] + .viewer-image { - background-position-y: 91.4285714286%; -} - -.viewer-360 .viewer-slider[max="36"][value="34"] + .viewer-image { - background-position-y: 94.2857142857%; -} - -.viewer-360 .viewer-slider[max="36"][value="35"] + .viewer-image { - background-position-y: 97.1428571429%; -} - -.viewer-360 .viewer-slider[max="36"][value="36"] + .viewer-image { - background-position-y: 100%; -} - -.viewer-360 .viewer-slider { - cursor: ew-resize; - -ms-flex-order: 2; - margin: 1rem; - order: 2; - width: 60%; -} - -.viewer-360 .viewer-image { - background-position-y: 0; - background-repeat: no-repeat; - background-size: 100%; - -ms-flex-order: 1; - max-width: 100%; - order: 1; -} \ No newline at end of file diff --git a/Start/Client/wwwroot/css/spectre/spectre-exp.min.css b/Start/Client/wwwroot/css/spectre/spectre-exp.min.css deleted file mode 100644 index d313774..0000000 --- a/Start/Client/wwwroot/css/spectre/spectre-exp.min.css +++ /dev/null @@ -1 +0,0 @@ -/*! Spectre.css Experimentals v0.5.9 | MIT License | github.com/picturepan2/spectre */.form-autocomplete{position:relative}.form-autocomplete .form-autocomplete-input{align-content:flex-start;display:-ms-flexbox;display:flex;-ms-flex-line-pack:start;-ms-flex-wrap:wrap;flex-wrap:wrap;height:auto;min-height:1.6rem;padding:.1rem}.form-autocomplete .form-autocomplete-input.is-focused{border-color:#5755d9;box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.form-autocomplete .form-autocomplete-input .form-input{border-color:transparent;box-shadow:none;display:inline-block;-ms-flex:1 0 auto;flex:1 0 auto;height:1.2rem;line-height:.8rem;margin:.1rem;width:auto}.form-autocomplete .menu{left:0;position:absolute;top:100%;width:100%}.form-autocomplete.autocomplete-oneline .form-autocomplete-input{-ms-flex-wrap:nowrap;flex-wrap:nowrap;overflow-x:auto}.form-autocomplete.autocomplete-oneline .chip{-ms-flex:1 0 auto;flex:1 0 auto}.calendar{border:.05rem solid #dadee4;border-radius:.1rem;display:block;min-width:280px}.calendar .calendar-nav{align-items:center;background:#f7f8f9;border-top-left-radius:.1rem;border-top-right-radius:.1rem;display:-ms-flexbox;display:flex;-ms-flex-align:center;font-size:.9rem;padding:.4rem}.calendar .calendar-body,.calendar .calendar-header{display:-ms-flexbox;display:flex;-ms-flex-pack:center;-ms-flex-wrap:wrap;flex-wrap:wrap;justify-content:center;padding:.4rem 0}.calendar .calendar-body .calendar-date,.calendar .calendar-header .calendar-date{-ms-flex:0 0 14.28%;flex:0 0 14.28%;max-width:14.28%}.calendar .calendar-header{background:#f7f8f9;border-bottom:.05rem solid #dadee4;color:#bcc3ce;font-size:.7rem;text-align:center}.calendar .calendar-body{color:#66758c}.calendar .calendar-date{border:0;padding:.2rem}.calendar .calendar-date .date-item{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;border:.05rem solid transparent;border-radius:50%;color:#66758c;cursor:pointer;font-size:.7rem;height:1.4rem;line-height:1rem;outline:0;padding:.1rem;position:relative;text-align:center;text-decoration:none;transition:background .2s,border .2s,box-shadow .2s,color .2s;vertical-align:middle;white-space:nowrap;width:1.4rem}.calendar .calendar-date .date-item.date-today{border-color:#e5e5f9;color:#5755d9}.calendar .calendar-date .date-item:focus{box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.calendar .calendar-date .date-item:focus,.calendar .calendar-date .date-item:hover{background:#fefeff;border-color:#e5e5f9;color:#5755d9;text-decoration:none}.calendar .calendar-date .date-item.active,.calendar .calendar-date .date-item:active{background:#4b48d6;border-color:#3634d2;color:#fff}.calendar .calendar-date .date-item.badge::after{position:absolute;right:3px;top:3px;transform:translate(50%,-50%)}.calendar .calendar-date .calendar-event.disabled,.calendar .calendar-date .calendar-event:disabled,.calendar .calendar-date .date-item.disabled,.calendar .calendar-date .date-item:disabled{cursor:default;opacity:.25;pointer-events:none}.calendar .calendar-date.next-month .calendar-event,.calendar .calendar-date.next-month .date-item,.calendar .calendar-date.prev-month .calendar-event,.calendar .calendar-date.prev-month .date-item{opacity:.25}.calendar .calendar-range{position:relative}.calendar .calendar-range::before{background:#f1f1fc;content:"";height:1.4rem;left:0;position:absolute;right:0;top:50%;transform:translateY(-50%)}.calendar .calendar-range.range-start::before{left:50%}.calendar .calendar-range.range-end::before{right:50%}.calendar .calendar-range.range-end .date-item,.calendar .calendar-range.range-start .date-item{background:#4b48d6;border-color:#3634d2;color:#fff}.calendar .calendar-range .date-item{color:#5755d9}.calendar.calendar-lg .calendar-body{padding:0}.calendar.calendar-lg .calendar-body .calendar-date{border-bottom:.05rem solid #dadee4;border-right:.05rem solid #dadee4;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:5.5rem;padding:0}.calendar.calendar-lg .calendar-body .calendar-date:nth-child(7n){border-right:0}.calendar.calendar-lg .calendar-body .calendar-date:nth-last-child(-n+7){border-bottom:0}.calendar.calendar-lg .date-item{align-self:flex-end;-ms-flex-item-align:end;height:1.4rem;margin-right:.2rem;margin-top:.2rem}.calendar.calendar-lg .calendar-range::before{top:19px}.calendar.calendar-lg .calendar-range.range-start::before{left:auto;width:19px}.calendar.calendar-lg .calendar-range.range-end::before{right:19px}.calendar.calendar-lg .calendar-events{flex-grow:1;-ms-flex-positive:1;line-height:1;overflow-y:auto;padding:.2rem}.calendar.calendar-lg .calendar-event{border-radius:.1rem;display:block;font-size:.7rem;margin:.1rem auto;overflow:hidden;padding:3px 4px;text-overflow:ellipsis;white-space:nowrap}.carousel .carousel-locator:nth-of-type(1):checked~.carousel-container .carousel-item:nth-of-type(1),.carousel .carousel-locator:nth-of-type(2):checked~.carousel-container .carousel-item:nth-of-type(2),.carousel .carousel-locator:nth-of-type(3):checked~.carousel-container .carousel-item:nth-of-type(3),.carousel .carousel-locator:nth-of-type(4):checked~.carousel-container .carousel-item:nth-of-type(4),.carousel .carousel-locator:nth-of-type(5):checked~.carousel-container .carousel-item:nth-of-type(5),.carousel .carousel-locator:nth-of-type(6):checked~.carousel-container .carousel-item:nth-of-type(6),.carousel .carousel-locator:nth-of-type(7):checked~.carousel-container .carousel-item:nth-of-type(7),.carousel .carousel-locator:nth-of-type(8):checked~.carousel-container .carousel-item:nth-of-type(8){animation:carousel-slidein .75s ease-in-out 1;opacity:1;z-index:100}.carousel .carousel-locator:nth-of-type(1):checked~.carousel-nav .nav-item:nth-of-type(1),.carousel .carousel-locator:nth-of-type(2):checked~.carousel-nav .nav-item:nth-of-type(2),.carousel .carousel-locator:nth-of-type(3):checked~.carousel-nav .nav-item:nth-of-type(3),.carousel .carousel-locator:nth-of-type(4):checked~.carousel-nav .nav-item:nth-of-type(4),.carousel .carousel-locator:nth-of-type(5):checked~.carousel-nav .nav-item:nth-of-type(5),.carousel .carousel-locator:nth-of-type(6):checked~.carousel-nav .nav-item:nth-of-type(6),.carousel .carousel-locator:nth-of-type(7):checked~.carousel-nav .nav-item:nth-of-type(7),.carousel .carousel-locator:nth-of-type(8):checked~.carousel-nav .nav-item:nth-of-type(8){color:#f7f8f9}.carousel{background:#f7f8f9;display:block;overflow:hidden;-webkit-overflow-scrolling:touch;position:relative;width:100%;z-index:1}.carousel .carousel-container{height:100%;left:0;position:relative}.carousel .carousel-container::before{content:"";display:block;padding-bottom:56.25%}.carousel .carousel-container .carousel-item{animation:carousel-slideout 1s ease-in-out 1;height:100%;left:0;margin:0;opacity:0;position:absolute;top:0;width:100%}.carousel .carousel-container .carousel-item:hover .item-next,.carousel .carousel-container .carousel-item:hover .item-prev{opacity:1}.carousel .carousel-container .item-next,.carousel .carousel-container .item-prev{background:rgba(247,248,249,.25);border-color:rgba(247,248,249,.5);color:#f7f8f9;opacity:0;position:absolute;top:50%;transform:translateY(-50%);transition:all .4s;z-index:100}.carousel .carousel-container .item-prev{left:1rem}.carousel .carousel-container .item-next{right:1rem}.carousel .carousel-nav{bottom:.4rem;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;left:50%;position:absolute;transform:translateX(-50%);width:10rem;z-index:100}.carousel .carousel-nav .nav-item{color:rgba(247,248,249,.5);display:block;-ms-flex:1 0 auto;flex:1 0 auto;height:1.6rem;margin:.2rem;max-width:2.5rem;position:relative}.carousel .carousel-nav .nav-item::before{background:currentColor;content:"";display:block;height:.1rem;position:absolute;top:.5rem;width:100%}@keyframes carousel-slidein{0%{transform:translateX(100%)}100%{transform:translateX(0)}}@keyframes carousel-slideout{0%{opacity:1;transform:translateX(0)}100%{opacity:1;transform:translateX(-50%)}}.comparison-slider{height:50vh;overflow:hidden;-webkit-overflow-scrolling:touch;position:relative;width:100%}.comparison-slider .comparison-after,.comparison-slider .comparison-before{height:100%;left:0;margin:0;overflow:hidden;position:absolute;top:0}.comparison-slider .comparison-after img,.comparison-slider .comparison-before img{height:100%;object-fit:cover;object-position:left center;position:absolute;width:100%}.comparison-slider .comparison-before{width:100%;z-index:1}.comparison-slider .comparison-before .comparison-label{right:.8rem}.comparison-slider .comparison-after{max-width:100%;min-width:0;z-index:2}.comparison-slider .comparison-after::before{background:0 0;content:"";cursor:default;height:100%;left:0;position:absolute;right:.8rem;top:0;z-index:1}.comparison-slider .comparison-after::after{background:currentColor;border-radius:50%;box-shadow:0 -5px,0 5px;color:#fff;content:"";height:3px;pointer-events:none;position:absolute;right:.4rem;top:50%;transform:translate(50%,-50%);width:3px}.comparison-slider .comparison-after .comparison-label{left:.8rem}.comparison-slider .comparison-resizer{animation:first-run 1.5s 1 ease-in-out;cursor:ew-resize;height:.8rem;left:0;max-width:100%;min-width:.8rem;opacity:0;outline:0;position:relative;resize:horizontal;top:50%;transform:translateY(-50%) scaleY(30);width:0}.comparison-slider .comparison-label{background:rgba(48,55,66,.5);bottom:.8rem;color:#fff;padding:.2rem .4rem;position:absolute;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}@keyframes first-run{0%{width:0}25%{width:2.4rem}50%{width:.8rem}75%{width:1.2rem}100%{width:0}}.filter .filter-tag#tag-0:checked~.filter-nav .chip[for=tag-0],.filter .filter-tag#tag-1:checked~.filter-nav .chip[for=tag-1],.filter .filter-tag#tag-2:checked~.filter-nav .chip[for=tag-2],.filter .filter-tag#tag-3:checked~.filter-nav .chip[for=tag-3],.filter .filter-tag#tag-4:checked~.filter-nav .chip[for=tag-4],.filter .filter-tag#tag-5:checked~.filter-nav .chip[for=tag-5],.filter .filter-tag#tag-6:checked~.filter-nav .chip[for=tag-6],.filter .filter-tag#tag-7:checked~.filter-nav .chip[for=tag-7],.filter .filter-tag#tag-8:checked~.filter-nav .chip[for=tag-8]{background:#5755d9;color:#fff}.filter .filter-tag#tag-1:checked~.filter-body .filter-item:not([data-tag~=tag-1]),.filter .filter-tag#tag-2:checked~.filter-body .filter-item:not([data-tag~=tag-2]),.filter .filter-tag#tag-3:checked~.filter-body .filter-item:not([data-tag~=tag-3]),.filter .filter-tag#tag-4:checked~.filter-body .filter-item:not([data-tag~=tag-4]),.filter .filter-tag#tag-5:checked~.filter-body .filter-item:not([data-tag~=tag-5]),.filter .filter-tag#tag-6:checked~.filter-body .filter-item:not([data-tag~=tag-6]),.filter .filter-tag#tag-7:checked~.filter-body .filter-item:not([data-tag~=tag-7]),.filter .filter-tag#tag-8:checked~.filter-body .filter-item:not([data-tag~=tag-8]){display:none}.filter .filter-nav{margin:.4rem 0}.filter .filter-body{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.meter{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#f7f8f9;border:0;border-radius:.1rem;display:block;height:.8rem;width:100%}.meter::-webkit-meter-inner-element{display:block}.meter::-webkit-meter-bar,.meter::-webkit-meter-even-less-good-value,.meter::-webkit-meter-optimum-value,.meter::-webkit-meter-suboptimum-value{border-radius:.1rem}.meter::-webkit-meter-bar{background:#f7f8f9}.meter::-webkit-meter-optimum-value{background:#32b643}.meter::-webkit-meter-suboptimum-value{background:#ffb700}.meter::-webkit-meter-even-less-good-value{background:#e85600}.meter:-moz-meter-optimum,.meter:-moz-meter-sub-optimum,.meter:-moz-meter-sub-sub-optimum,.meter::-moz-meter-bar{border-radius:.1rem}.meter:-moz-meter-optimum::-moz-meter-bar{background:#32b643}.meter:-moz-meter-sub-optimum::-moz-meter-bar{background:#ffb700}.meter:-moz-meter-sub-sub-optimum::-moz-meter-bar{background:#e85600}.off-canvas{display:-ms-flexbox;display:flex;-ms-flex-flow:nowrap;flex-flow:nowrap;height:100%;position:relative;width:100%}.off-canvas .off-canvas-toggle{display:block;left:.4rem;position:absolute;top:.4rem;transition:none;z-index:1}.off-canvas .off-canvas-sidebar{background:#f7f8f9;bottom:0;left:0;min-width:10rem;overflow-y:auto;position:fixed;top:0;transform:translateX(-100%);transition:transform .25s;z-index:200}.off-canvas .off-canvas-content{-ms-flex:1 1 auto;flex:1 1 auto;height:100%;padding:.4rem .4rem .4rem 4rem}.off-canvas .off-canvas-overlay{background:rgba(48,55,66,.1);border-color:transparent;border-radius:0;bottom:0;display:none;height:100%;left:0;position:fixed;right:0;top:0;width:100%}.off-canvas .off-canvas-sidebar.active,.off-canvas .off-canvas-sidebar:target{transform:translateX(0)}.off-canvas .off-canvas-sidebar.active~.off-canvas-overlay,.off-canvas .off-canvas-sidebar:target~.off-canvas-overlay{display:block;z-index:100}@media (min-width:960px){.off-canvas.off-canvas-sidebar-show .off-canvas-toggle{display:none}.off-canvas.off-canvas-sidebar-show .off-canvas-sidebar{-ms-flex:0 0 auto;flex:0 0 auto;position:relative;transform:none}.off-canvas.off-canvas-sidebar-show .off-canvas-overlay{display:none!important}}.parallax{display:block;height:auto;position:relative;width:auto}.parallax .parallax-content{box-shadow:0 1rem 2.1rem rgba(48,55,66,.3);height:auto;transform:perspective(1000px);transform-style:preserve-3d;transition:all .4s ease;width:100%}.parallax .parallax-content::before{content:"";display:block;height:100%;left:0;position:absolute;top:0;width:100%}.parallax .parallax-front{align-items:center;color:#fff;display:-ms-flexbox;display:flex;-ms-flex-align:center;-ms-flex-pack:center;height:100%;justify-content:center;left:0;position:absolute;text-align:center;text-shadow:0 0 20px rgba(48,55,66,.75);top:0;transform:translateZ(50px) scale(.95);transition:transform .4s;width:100%;z-index:1}.parallax .parallax-top-left{height:50%;left:0;outline:0;position:absolute;top:0;width:50%;z-index:100}.parallax .parallax-top-left:focus~.parallax-content,.parallax .parallax-top-left:hover~.parallax-content{transform:perspective(1000px) rotateX(3deg) rotateY(-3deg)}.parallax .parallax-top-left:focus~.parallax-content::before,.parallax .parallax-top-left:hover~.parallax-content::before{background:linear-gradient(135deg,rgba(255,255,255,.35) 0,transparent 50%)}.parallax .parallax-top-left:focus~.parallax-content .parallax-front,.parallax .parallax-top-left:hover~.parallax-content .parallax-front{transform:translate3d(4.5px,4.5px,50px) scale(.95)}.parallax .parallax-top-right{height:50%;outline:0;position:absolute;right:0;top:0;width:50%;z-index:100}.parallax .parallax-top-right:focus~.parallax-content,.parallax .parallax-top-right:hover~.parallax-content{transform:perspective(1000px) rotateX(3deg) rotateY(3deg)}.parallax .parallax-top-right:focus~.parallax-content::before,.parallax .parallax-top-right:hover~.parallax-content::before{background:linear-gradient(-135deg,rgba(255,255,255,.35) 0,transparent 50%)}.parallax .parallax-top-right:focus~.parallax-content .parallax-front,.parallax .parallax-top-right:hover~.parallax-content .parallax-front{transform:translate3d(-4.5px,4.5px,50px) scale(.95)}.parallax .parallax-bottom-left{bottom:0;height:50%;left:0;outline:0;position:absolute;width:50%;z-index:100}.parallax .parallax-bottom-left:focus~.parallax-content,.parallax .parallax-bottom-left:hover~.parallax-content{transform:perspective(1000px) rotateX(-3deg) rotateY(-3deg)}.parallax .parallax-bottom-left:focus~.parallax-content::before,.parallax .parallax-bottom-left:hover~.parallax-content::before{background:linear-gradient(45deg,rgba(255,255,255,.35) 0,transparent 50%)}.parallax .parallax-bottom-left:focus~.parallax-content .parallax-front,.parallax .parallax-bottom-left:hover~.parallax-content .parallax-front{transform:translate3d(4.5px,-4.5px,50px) scale(.95)}.parallax .parallax-bottom-right{bottom:0;height:50%;outline:0;position:absolute;right:0;width:50%;z-index:100}.parallax .parallax-bottom-right:focus~.parallax-content,.parallax .parallax-bottom-right:hover~.parallax-content{transform:perspective(1000px) rotateX(-3deg) rotateY(3deg)}.parallax .parallax-bottom-right:focus~.parallax-content::before,.parallax .parallax-bottom-right:hover~.parallax-content::before{background:linear-gradient(-45deg,rgba(255,255,255,.35) 0,transparent 50%)}.parallax .parallax-bottom-right:focus~.parallax-content .parallax-front,.parallax .parallax-bottom-right:hover~.parallax-content .parallax-front{transform:translate3d(-4.5px,-4.5px,50px) scale(.95)}.progress{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#eef0f3;border:0;border-radius:.1rem;color:#5755d9;height:.2rem;position:relative;width:100%}.progress::-webkit-progress-bar{background:0 0;border-radius:.1rem}.progress::-webkit-progress-value{background:#5755d9;border-radius:.1rem}.progress::-moz-progress-bar{background:#5755d9;border-radius:.1rem}.progress:indeterminate{animation:progress-indeterminate 1.5s linear infinite;background:#eef0f3 linear-gradient(to right,#5755d9 30%,#eef0f3 30%) top left/150% 150% no-repeat}.progress:indeterminate::-moz-progress-bar{background:0 0}@keyframes progress-indeterminate{0%{background-position:200% 0}100%{background-position:-200% 0}}.slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;display:block;height:1.2rem;width:100%}.slider:focus{box-shadow:0 0 0 .1rem rgba(87,85,217,.2);outline:0}.slider.tooltip:not([data-tooltip])::after{content:attr(value)}.slider::-webkit-slider-thumb{-webkit-appearance:none;background:#5755d9;border:0;border-radius:50%;height:.6rem;margin-top:-.25rem;-webkit-transition:transform .2s;transition:transform .2s;width:.6rem}.slider::-moz-range-thumb{background:#5755d9;border:0;border-radius:50%;height:.6rem;-moz-transition:transform .2s;transition:transform .2s;width:.6rem}.slider::-ms-thumb{background:#5755d9;border:0;border-radius:50%;height:.6rem;-ms-transition:transform .2s;transition:transform .2s;width:.6rem}.slider:active::-webkit-slider-thumb{transform:scale(1.25)}.slider:active::-moz-range-thumb{transform:scale(1.25)}.slider:active::-ms-thumb{transform:scale(1.25)}.slider.disabled::-webkit-slider-thumb,.slider:disabled::-webkit-slider-thumb{background:#f7f8f9;transform:scale(1)}.slider.disabled::-moz-range-thumb,.slider:disabled::-moz-range-thumb{background:#f7f8f9;transform:scale(1)}.slider.disabled::-ms-thumb,.slider:disabled::-ms-thumb{background:#f7f8f9;transform:scale(1)}.slider::-webkit-slider-runnable-track{background:#eef0f3;border-radius:.1rem;height:.1rem;width:100%}.slider::-moz-range-track{background:#eef0f3;border-radius:.1rem;height:.1rem;width:100%}.slider::-ms-track{background:#eef0f3;border-radius:.1rem;height:.1rem;width:100%}.slider::-ms-fill-lower{background:#5755d9}.timeline .timeline-item{display:-ms-flexbox;display:flex;margin-bottom:1.2rem;position:relative}.timeline .timeline-item::before{background:#dadee4;content:"";height:100%;left:11px;position:absolute;top:1.2rem;width:2px}.timeline .timeline-item .timeline-left{-ms-flex:0 0 auto;flex:0 0 auto}.timeline .timeline-item .timeline-content{-ms-flex:1 1 auto;flex:1 1 auto;padding:2px 0 2px .8rem}.timeline .timeline-item .timeline-icon{align-items:center;border-radius:50%;color:#fff;display:-ms-flexbox;display:flex;-ms-flex-align:center;-ms-flex-pack:center;height:1.2rem;justify-content:center;text-align:center;width:1.2rem}.timeline .timeline-item .timeline-icon::before{border:.1rem solid #5755d9;border-radius:50%;content:"";display:block;height:.4rem;left:.4rem;position:absolute;top:.4rem;width:.4rem}.timeline .timeline-item .timeline-icon.icon-lg{background:#5755d9;line-height:1.2rem}.timeline .timeline-item .timeline-icon.icon-lg::before{content:none}.viewer-360{align-items:center;display:-ms-flexbox;display:flex;-ms-flex-align:center;-ms-flex-direction:column;flex-direction:column}.viewer-360 .viewer-slider[max="36"][value="1"]+.viewer-image{background-position-y:0}.viewer-360 .viewer-slider[max="36"][value="2"]+.viewer-image{background-position-y:2.8571428571%}.viewer-360 .viewer-slider[max="36"][value="3"]+.viewer-image{background-position-y:5.7142857143%}.viewer-360 .viewer-slider[max="36"][value="4"]+.viewer-image{background-position-y:8.5714285714%}.viewer-360 .viewer-slider[max="36"][value="5"]+.viewer-image{background-position-y:11.4285714286%}.viewer-360 .viewer-slider[max="36"][value="6"]+.viewer-image{background-position-y:14.2857142857%}.viewer-360 .viewer-slider[max="36"][value="7"]+.viewer-image{background-position-y:17.1428571429%}.viewer-360 .viewer-slider[max="36"][value="8"]+.viewer-image{background-position-y:20%}.viewer-360 .viewer-slider[max="36"][value="9"]+.viewer-image{background-position-y:22.8571428571%}.viewer-360 .viewer-slider[max="36"][value="10"]+.viewer-image{background-position-y:25.7142857143%}.viewer-360 .viewer-slider[max="36"][value="11"]+.viewer-image{background-position-y:28.5714285714%}.viewer-360 .viewer-slider[max="36"][value="12"]+.viewer-image{background-position-y:31.4285714286%}.viewer-360 .viewer-slider[max="36"][value="13"]+.viewer-image{background-position-y:34.2857142857%}.viewer-360 .viewer-slider[max="36"][value="14"]+.viewer-image{background-position-y:37.1428571429%}.viewer-360 .viewer-slider[max="36"][value="15"]+.viewer-image{background-position-y:40%}.viewer-360 .viewer-slider[max="36"][value="16"]+.viewer-image{background-position-y:42.8571428571%}.viewer-360 .viewer-slider[max="36"][value="17"]+.viewer-image{background-position-y:45.7142857143%}.viewer-360 .viewer-slider[max="36"][value="18"]+.viewer-image{background-position-y:48.5714285714%}.viewer-360 .viewer-slider[max="36"][value="19"]+.viewer-image{background-position-y:51.4285714286%}.viewer-360 .viewer-slider[max="36"][value="20"]+.viewer-image{background-position-y:54.2857142857%}.viewer-360 .viewer-slider[max="36"][value="21"]+.viewer-image{background-position-y:57.1428571429%}.viewer-360 .viewer-slider[max="36"][value="22"]+.viewer-image{background-position-y:60%}.viewer-360 .viewer-slider[max="36"][value="23"]+.viewer-image{background-position-y:62.8571428571%}.viewer-360 .viewer-slider[max="36"][value="24"]+.viewer-image{background-position-y:65.7142857143%}.viewer-360 .viewer-slider[max="36"][value="25"]+.viewer-image{background-position-y:68.5714285714%}.viewer-360 .viewer-slider[max="36"][value="26"]+.viewer-image{background-position-y:71.4285714286%}.viewer-360 .viewer-slider[max="36"][value="27"]+.viewer-image{background-position-y:74.2857142857%}.viewer-360 .viewer-slider[max="36"][value="28"]+.viewer-image{background-position-y:77.1428571429%}.viewer-360 .viewer-slider[max="36"][value="29"]+.viewer-image{background-position-y:80%}.viewer-360 .viewer-slider[max="36"][value="30"]+.viewer-image{background-position-y:82.8571428571%}.viewer-360 .viewer-slider[max="36"][value="31"]+.viewer-image{background-position-y:85.7142857143%}.viewer-360 .viewer-slider[max="36"][value="32"]+.viewer-image{background-position-y:88.5714285714%}.viewer-360 .viewer-slider[max="36"][value="33"]+.viewer-image{background-position-y:91.4285714286%}.viewer-360 .viewer-slider[max="36"][value="34"]+.viewer-image{background-position-y:94.2857142857%}.viewer-360 .viewer-slider[max="36"][value="35"]+.viewer-image{background-position-y:97.1428571429%}.viewer-360 .viewer-slider[max="36"][value="36"]+.viewer-image{background-position-y:100%}.viewer-360 .viewer-slider{cursor:ew-resize;-ms-flex-order:2;margin:1rem;order:2;width:60%}.viewer-360 .viewer-image{background-position-y:0;background-repeat:no-repeat;background-size:100%;-ms-flex-order:1;max-width:100%;order:1} \ No newline at end of file diff --git a/Start/Client/wwwroot/css/spectre/spectre-icons.css b/Start/Client/wwwroot/css/spectre/spectre-icons.css deleted file mode 100644 index fd881f1..0000000 --- a/Start/Client/wwwroot/css/spectre/spectre-icons.css +++ /dev/null @@ -1,597 +0,0 @@ -/*! Spectre.css Icons v0.5.9 | MIT License | github.com/picturepan2/spectre */ -.icon { - box-sizing: border-box; - display: inline-block; - font-size: inherit; - font-style: normal; - height: 1em; - position: relative; - text-indent: -9999px; - vertical-align: middle; - width: 1em; -} - -.icon::before, -.icon::after { - content: ""; - display: block; - left: 50%; - position: absolute; - top: 50%; - transform: translate(-50%, -50%); -} - -.icon.icon-2x { - font-size: 1.6rem; -} - -.icon.icon-3x { - font-size: 2.4rem; -} - -.icon.icon-4x { - font-size: 3.2rem; -} - -.accordion .icon, -.btn .icon, -.toast .icon, -.menu .icon { - vertical-align: -10%; -} - -.btn-lg .icon { - vertical-align: -15%; -} - -.icon-arrow-down::before, -.icon-arrow-left::before, -.icon-arrow-right::before, -.icon-arrow-up::before, -.icon-downward::before, -.icon-back::before, -.icon-forward::before, -.icon-upward::before { - border: .1rem solid currentColor; - border-bottom: 0; - border-right: 0; - height: .65em; - width: .65em; -} - -.icon-arrow-down::before { - transform: translate(-50%, -75%) rotate(225deg); -} - -.icon-arrow-left::before { - transform: translate(-25%, -50%) rotate(-45deg); -} - -.icon-arrow-right::before { - transform: translate(-75%, -50%) rotate(135deg); -} - -.icon-arrow-up::before { - transform: translate(-50%, -25%) rotate(45deg); -} - -.icon-back::after, -.icon-forward::after { - background: currentColor; - height: .1rem; - width: .8em; -} - -.icon-downward::after, -.icon-upward::after { - background: currentColor; - height: .8em; - width: .1rem; -} - -.icon-back::after { - left: 55%; -} - -.icon-back::before { - transform: translate(-50%, -50%) rotate(-45deg); -} - -.icon-downward::after { - top: 45%; -} - -.icon-downward::before { - transform: translate(-50%, -50%) rotate(-135deg); -} - -.icon-forward::after { - left: 45%; -} - -.icon-forward::before { - transform: translate(-50%, -50%) rotate(135deg); -} - -.icon-upward::after { - top: 55%; -} - -.icon-upward::before { - transform: translate(-50%, -50%) rotate(45deg); -} - -.icon-caret::before { - border-left: .3em solid transparent; - border-right: .3em solid transparent; - border-top: .3em solid currentColor; - height: 0; - transform: translate(-50%, -25%); - width: 0; -} - -.icon-menu::before { - background: currentColor; - box-shadow: 0 -.35em, 0 .35em; - height: .1rem; - width: 100%; -} - -.icon-apps::before { - background: currentColor; - box-shadow: -.35em -.35em, -.35em 0, -.35em .35em, 0 -.35em, 0 .35em, .35em -.35em, .35em 0, .35em .35em; - height: 3px; - width: 3px; -} - -.icon-resize-horiz::before, -.icon-resize-horiz::after, -.icon-resize-vert::before, -.icon-resize-vert::after { - border: .1rem solid currentColor; - border-bottom: 0; - border-right: 0; - height: .45em; - width: .45em; -} - -.icon-resize-horiz::before, -.icon-resize-vert::before { - transform: translate(-50%, -90%) rotate(45deg); -} - -.icon-resize-horiz::after, -.icon-resize-vert::after { - transform: translate(-50%, -10%) rotate(225deg); -} - -.icon-resize-horiz::before { - transform: translate(-90%, -50%) rotate(-45deg); -} - -.icon-resize-horiz::after { - transform: translate(-10%, -50%) rotate(135deg); -} - -.icon-more-horiz::before, -.icon-more-vert::before { - background: currentColor; - border-radius: 50%; - box-shadow: -.4em 0, .4em 0; - height: 3px; - width: 3px; -} - -.icon-more-vert::before { - box-shadow: 0 -.4em, 0 .4em; -} - -.icon-plus::before, -.icon-minus::before, -.icon-cross::before { - background: currentColor; - height: .1rem; - width: 100%; -} - -.icon-plus::after, -.icon-cross::after { - background: currentColor; - height: 100%; - width: .1rem; -} - -.icon-cross::before { - width: 100%; -} - -.icon-cross::after { - height: 100%; -} - -.icon-cross::before, -.icon-cross::after { - transform: translate(-50%, -50%) rotate(45deg); -} - -.icon-check::before { - border: .1rem solid currentColor; - border-right: 0; - border-top: 0; - height: .5em; - transform: translate(-50%, -75%) rotate(-45deg); - width: .9em; -} - -.icon-stop { - border: .1rem solid currentColor; - border-radius: 50%; -} - -.icon-stop::before { - background: currentColor; - height: .1rem; - transform: translate(-50%, -50%) rotate(45deg); - width: 1em; -} - -.icon-shutdown { - border: .1rem solid currentColor; - border-radius: 50%; - border-top-color: transparent; -} - -.icon-shutdown::before { - background: currentColor; - content: ""; - height: .5em; - top: .1em; - width: .1rem; -} - -.icon-refresh::before { - border: .1rem solid currentColor; - border-radius: 50%; - border-right-color: transparent; - height: 1em; - width: 1em; -} - -.icon-refresh::after { - border: .2em solid currentColor; - border-left-color: transparent; - border-top-color: transparent; - height: 0; - left: 80%; - top: 20%; - width: 0; -} - -.icon-search::before { - border: .1rem solid currentColor; - border-radius: 50%; - height: .75em; - left: 5%; - top: 5%; - transform: translate(0, 0) rotate(45deg); - width: .75em; -} - -.icon-search::after { - background: currentColor; - height: .1rem; - left: 80%; - top: 80%; - transform: translate(-50%, -50%) rotate(45deg); - width: .4em; -} - -.icon-edit::before { - border: .1rem solid currentColor; - height: .4em; - transform: translate(-40%, -60%) rotate(-45deg); - width: .85em; -} - -.icon-edit::after { - border: .15em solid currentColor; - border-right-color: transparent; - border-top-color: transparent; - height: 0; - left: 5%; - top: 95%; - transform: translate(0, -100%); - width: 0; -} - -.icon-delete::before { - border: .1rem solid currentColor; - border-bottom-left-radius: .1rem; - border-bottom-right-radius: .1rem; - border-top: 0; - height: .75em; - top: 60%; - width: .75em; -} - -.icon-delete::after { - background: currentColor; - box-shadow: -.25em .2em, .25em .2em; - height: .1rem; - top: .05rem; - width: .5em; -} - -.icon-share { - border: .1rem solid currentColor; - border-radius: .1rem; - border-right: 0; - border-top: 0; -} - -.icon-share::before { - border: .1rem solid currentColor; - border-left: 0; - border-top: 0; - height: .4em; - left: 100%; - top: .25em; - transform: translate(-125%, -50%) rotate(-45deg); - width: .4em; -} - -.icon-share::after { - border: .1rem solid currentColor; - border-bottom: 0; - border-radius: 75% 0; - border-right: 0; - height: .5em; - width: .6em; -} - -.icon-flag::before { - background: currentColor; - height: 1em; - left: 15%; - width: .1rem; -} - -.icon-flag::after { - border: .1rem solid currentColor; - border-bottom-right-radius: .1rem; - border-left: 0; - border-top-right-radius: .1rem; - height: .65em; - left: 60%; - top: 35%; - width: .8em; -} - -.icon-bookmark::before { - border: .1rem solid currentColor; - border-bottom: 0; - border-top-left-radius: .1rem; - border-top-right-radius: .1rem; - height: .9em; - width: .8em; -} - -.icon-bookmark::after { - border: .1rem solid currentColor; - border-bottom: 0; - border-left: 0; - border-radius: .1rem; - height: .5em; - transform: translate(-50%, 35%) rotate(-45deg) skew(15deg, 15deg); - width: .5em; -} - -.icon-download, -.icon-upload { - border-bottom: .1rem solid currentColor; -} - -.icon-download::before, -.icon-upload::before { - border: .1rem solid currentColor; - border-bottom: 0; - border-right: 0; - height: .5em; - transform: translate(-50%, -60%) rotate(-135deg); - width: .5em; -} - -.icon-download::after, -.icon-upload::after { - background: currentColor; - height: .6em; - top: 40%; - width: .1rem; -} - -.icon-upload::before { - transform: translate(-50%, -60%) rotate(45deg); -} - -.icon-upload::after { - top: 50%; -} - -.icon-copy::before { - border: .1rem solid currentColor; - border-bottom: 0; - border-radius: .1rem; - border-right: 0; - height: .8em; - left: 40%; - top: 35%; - width: .8em; -} - -.icon-copy::after { - border: .1rem solid currentColor; - border-radius: .1rem; - height: .8em; - left: 60%; - top: 60%; - width: .8em; -} - -.icon-time { - border: .1rem solid currentColor; - border-radius: 50%; -} - -.icon-time::before { - background: currentColor; - height: .4em; - transform: translate(-50%, -75%); - width: .1rem; -} - -.icon-time::after { - background: currentColor; - height: .3em; - transform: translate(-50%, -75%) rotate(90deg); - transform-origin: 50% 90%; - width: .1rem; -} - -.icon-mail::before { - border: .1rem solid currentColor; - border-radius: .1rem; - height: .8em; - width: 1em; -} - -.icon-mail::after { - border: .1rem solid currentColor; - border-right: 0; - border-top: 0; - height: .5em; - transform: translate(-50%, -90%) rotate(-45deg) skew(10deg, 10deg); - width: .5em; -} - -.icon-people::before { - border: .1rem solid currentColor; - border-radius: 50%; - height: .45em; - top: 25%; - width: .45em; -} - -.icon-people::after { - border: .1rem solid currentColor; - border-radius: 50% 50% 0 0; - height: .4em; - top: 75%; - width: .9em; -} - -.icon-message { - border: .1rem solid currentColor; - border-bottom: 0; - border-radius: .1rem; - border-right: 0; -} - -.icon-message::before { - border: .1rem solid currentColor; - border-bottom-right-radius: .1rem; - border-left: 0; - border-top: 0; - height: .8em; - left: 65%; - top: 40%; - width: .7em; -} - -.icon-message::after { - background: currentColor; - border-radius: .1rem; - height: .3em; - left: 10%; - top: 100%; - transform: translate(0, -90%) rotate(45deg); - width: .1rem; -} - -.icon-photo { - border: .1rem solid currentColor; - border-radius: .1rem; -} - -.icon-photo::before { - border: .1rem solid currentColor; - border-radius: 50%; - height: .25em; - left: 35%; - top: 35%; - width: .25em; -} - -.icon-photo::after { - border: .1rem solid currentColor; - border-bottom: 0; - border-left: 0; - height: .5em; - left: 60%; - transform: translate(-50%, 25%) rotate(-45deg); - width: .5em; -} - -.icon-link::before, -.icon-link::after { - border: .1rem solid currentColor; - border-radius: 5em 0 0 5em; - border-right: 0; - height: .5em; - width: .75em; -} - -.icon-link::before { - transform: translate(-70%, -45%) rotate(-45deg); -} - -.icon-link::after { - transform: translate(-30%, -55%) rotate(135deg); -} - -.icon-location::before { - border: .1rem solid currentColor; - border-radius: 50% 50% 50% 0; - height: .8em; - transform: translate(-50%, -60%) rotate(-45deg); - width: .8em; -} - -.icon-location::after { - border: .1rem solid currentColor; - border-radius: 50%; - height: .2em; - transform: translate(-50%, -80%); - width: .2em; -} - -.icon-emoji { - border: .1rem solid currentColor; - border-radius: 50%; -} - -.icon-emoji::before { - border-radius: 50%; - box-shadow: -.17em -.1em, .17em -.1em; - height: .15em; - width: .15em; -} - -.icon-emoji::after { - border: .1rem solid currentColor; - border-bottom-color: transparent; - border-radius: 50%; - border-right-color: transparent; - height: .5em; - transform: translate(-50%, -40%) rotate(-135deg); - width: .5em; -} \ No newline at end of file diff --git a/Start/Client/wwwroot/css/spectre/spectre-icons.min.css b/Start/Client/wwwroot/css/spectre/spectre-icons.min.css deleted file mode 100644 index 0276f7b..0000000 --- a/Start/Client/wwwroot/css/spectre/spectre-icons.min.css +++ /dev/null @@ -1 +0,0 @@ -/*! Spectre.css Icons v0.5.9 | MIT License | github.com/picturepan2/spectre */.icon{box-sizing:border-box;display:inline-block;font-size:inherit;font-style:normal;height:1em;position:relative;text-indent:-9999px;vertical-align:middle;width:1em}.icon::after,.icon::before{content:"";display:block;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.icon.icon-2x{font-size:1.6rem}.icon.icon-3x{font-size:2.4rem}.icon.icon-4x{font-size:3.2rem}.accordion .icon,.btn .icon,.menu .icon,.toast .icon{vertical-align:-10%}.btn-lg .icon{vertical-align:-15%}.icon-arrow-down::before,.icon-arrow-left::before,.icon-arrow-right::before,.icon-arrow-up::before,.icon-back::before,.icon-downward::before,.icon-forward::before,.icon-upward::before{border:.1rem solid currentColor;border-bottom:0;border-right:0;height:.65em;width:.65em}.icon-arrow-down::before{transform:translate(-50%,-75%) rotate(225deg)}.icon-arrow-left::before{transform:translate(-25%,-50%) rotate(-45deg)}.icon-arrow-right::before{transform:translate(-75%,-50%) rotate(135deg)}.icon-arrow-up::before{transform:translate(-50%,-25%) rotate(45deg)}.icon-back::after,.icon-forward::after{background:currentColor;height:.1rem;width:.8em}.icon-downward::after,.icon-upward::after{background:currentColor;height:.8em;width:.1rem}.icon-back::after{left:55%}.icon-back::before{transform:translate(-50%,-50%) rotate(-45deg)}.icon-downward::after{top:45%}.icon-downward::before{transform:translate(-50%,-50%) rotate(-135deg)}.icon-forward::after{left:45%}.icon-forward::before{transform:translate(-50%,-50%) rotate(135deg)}.icon-upward::after{top:55%}.icon-upward::before{transform:translate(-50%,-50%) rotate(45deg)}.icon-caret::before{border-left:.3em solid transparent;border-right:.3em solid transparent;border-top:.3em solid currentColor;height:0;transform:translate(-50%,-25%);width:0}.icon-menu::before{background:currentColor;box-shadow:0 -.35em,0 .35em;height:.1rem;width:100%}.icon-apps::before{background:currentColor;box-shadow:-.35em -.35em,-.35em 0,-.35em .35em,0 -.35em,0 .35em,.35em -.35em,.35em 0,.35em .35em;height:3px;width:3px}.icon-resize-horiz::after,.icon-resize-horiz::before,.icon-resize-vert::after,.icon-resize-vert::before{border:.1rem solid currentColor;border-bottom:0;border-right:0;height:.45em;width:.45em}.icon-resize-horiz::before,.icon-resize-vert::before{transform:translate(-50%,-90%) rotate(45deg)}.icon-resize-horiz::after,.icon-resize-vert::after{transform:translate(-50%,-10%) rotate(225deg)}.icon-resize-horiz::before{transform:translate(-90%,-50%) rotate(-45deg)}.icon-resize-horiz::after{transform:translate(-10%,-50%) rotate(135deg)}.icon-more-horiz::before,.icon-more-vert::before{background:currentColor;border-radius:50%;box-shadow:-.4em 0,.4em 0;height:3px;width:3px}.icon-more-vert::before{box-shadow:0 -.4em,0 .4em}.icon-cross::before,.icon-minus::before,.icon-plus::before{background:currentColor;height:.1rem;width:100%}.icon-cross::after,.icon-plus::after{background:currentColor;height:100%;width:.1rem}.icon-cross::before{width:100%}.icon-cross::after{height:100%}.icon-cross::after,.icon-cross::before{transform:translate(-50%,-50%) rotate(45deg)}.icon-check::before{border:.1rem solid currentColor;border-right:0;border-top:0;height:.5em;transform:translate(-50%,-75%) rotate(-45deg);width:.9em}.icon-stop{border:.1rem solid currentColor;border-radius:50%}.icon-stop::before{background:currentColor;height:.1rem;transform:translate(-50%,-50%) rotate(45deg);width:1em}.icon-shutdown{border:.1rem solid currentColor;border-radius:50%;border-top-color:transparent}.icon-shutdown::before{background:currentColor;content:"";height:.5em;top:.1em;width:.1rem}.icon-refresh::before{border:.1rem solid currentColor;border-radius:50%;border-right-color:transparent;height:1em;width:1em}.icon-refresh::after{border:.2em solid currentColor;border-left-color:transparent;border-top-color:transparent;height:0;left:80%;top:20%;width:0}.icon-search::before{border:.1rem solid currentColor;border-radius:50%;height:.75em;left:5%;top:5%;transform:translate(0,0) rotate(45deg);width:.75em}.icon-search::after{background:currentColor;height:.1rem;left:80%;top:80%;transform:translate(-50%,-50%) rotate(45deg);width:.4em}.icon-edit::before{border:.1rem solid currentColor;height:.4em;transform:translate(-40%,-60%) rotate(-45deg);width:.85em}.icon-edit::after{border:.15em solid currentColor;border-right-color:transparent;border-top-color:transparent;height:0;left:5%;top:95%;transform:translate(0,-100%);width:0}.icon-delete::before{border:.1rem solid currentColor;border-bottom-left-radius:.1rem;border-bottom-right-radius:.1rem;border-top:0;height:.75em;top:60%;width:.75em}.icon-delete::after{background:currentColor;box-shadow:-.25em .2em,.25em .2em;height:.1rem;top:.05rem;width:.5em}.icon-share{border:.1rem solid currentColor;border-radius:.1rem;border-right:0;border-top:0}.icon-share::before{border:.1rem solid currentColor;border-left:0;border-top:0;height:.4em;left:100%;top:.25em;transform:translate(-125%,-50%) rotate(-45deg);width:.4em}.icon-share::after{border:.1rem solid currentColor;border-bottom:0;border-radius:75% 0;border-right:0;height:.5em;width:.6em}.icon-flag::before{background:currentColor;height:1em;left:15%;width:.1rem}.icon-flag::after{border:.1rem solid currentColor;border-bottom-right-radius:.1rem;border-left:0;border-top-right-radius:.1rem;height:.65em;left:60%;top:35%;width:.8em}.icon-bookmark::before{border:.1rem solid currentColor;border-bottom:0;border-top-left-radius:.1rem;border-top-right-radius:.1rem;height:.9em;width:.8em}.icon-bookmark::after{border:.1rem solid currentColor;border-bottom:0;border-left:0;border-radius:.1rem;height:.5em;transform:translate(-50%,35%) rotate(-45deg) skew(15deg,15deg);width:.5em}.icon-download,.icon-upload{border-bottom:.1rem solid currentColor}.icon-download::before,.icon-upload::before{border:.1rem solid currentColor;border-bottom:0;border-right:0;height:.5em;transform:translate(-50%,-60%) rotate(-135deg);width:.5em}.icon-download::after,.icon-upload::after{background:currentColor;height:.6em;top:40%;width:.1rem}.icon-upload::before{transform:translate(-50%,-60%) rotate(45deg)}.icon-upload::after{top:50%}.icon-copy::before{border:.1rem solid currentColor;border-bottom:0;border-radius:.1rem;border-right:0;height:.8em;left:40%;top:35%;width:.8em}.icon-copy::after{border:.1rem solid currentColor;border-radius:.1rem;height:.8em;left:60%;top:60%;width:.8em}.icon-time{border:.1rem solid currentColor;border-radius:50%}.icon-time::before{background:currentColor;height:.4em;transform:translate(-50%,-75%);width:.1rem}.icon-time::after{background:currentColor;height:.3em;transform:translate(-50%,-75%) rotate(90deg);transform-origin:50% 90%;width:.1rem}.icon-mail::before{border:.1rem solid currentColor;border-radius:.1rem;height:.8em;width:1em}.icon-mail::after{border:.1rem solid currentColor;border-right:0;border-top:0;height:.5em;transform:translate(-50%,-90%) rotate(-45deg) skew(10deg,10deg);width:.5em}.icon-people::before{border:.1rem solid currentColor;border-radius:50%;height:.45em;top:25%;width:.45em}.icon-people::after{border:.1rem solid currentColor;border-radius:50% 50% 0 0;height:.4em;top:75%;width:.9em}.icon-message{border:.1rem solid currentColor;border-bottom:0;border-radius:.1rem;border-right:0}.icon-message::before{border:.1rem solid currentColor;border-bottom-right-radius:.1rem;border-left:0;border-top:0;height:.8em;left:65%;top:40%;width:.7em}.icon-message::after{background:currentColor;border-radius:.1rem;height:.3em;left:10%;top:100%;transform:translate(0,-90%) rotate(45deg);width:.1rem}.icon-photo{border:.1rem solid currentColor;border-radius:.1rem}.icon-photo::before{border:.1rem solid currentColor;border-radius:50%;height:.25em;left:35%;top:35%;width:.25em}.icon-photo::after{border:.1rem solid currentColor;border-bottom:0;border-left:0;height:.5em;left:60%;transform:translate(-50%,25%) rotate(-45deg);width:.5em}.icon-link::after,.icon-link::before{border:.1rem solid currentColor;border-radius:5em 0 0 5em;border-right:0;height:.5em;width:.75em}.icon-link::before{transform:translate(-70%,-45%) rotate(-45deg)}.icon-link::after{transform:translate(-30%,-55%) rotate(135deg)}.icon-location::before{border:.1rem solid currentColor;border-radius:50% 50% 50% 0;height:.8em;transform:translate(-50%,-60%) rotate(-45deg);width:.8em}.icon-location::after{border:.1rem solid currentColor;border-radius:50%;height:.2em;transform:translate(-50%,-80%);width:.2em}.icon-emoji{border:.1rem solid currentColor;border-radius:50%}.icon-emoji::before{border-radius:50%;box-shadow:-.17em -.1em,.17em -.1em;height:.15em;width:.15em}.icon-emoji::after{border:.1rem solid currentColor;border-bottom-color:transparent;border-radius:50%;border-right-color:transparent;height:.5em;transform:translate(-50%,-40%) rotate(-135deg);width:.5em} \ No newline at end of file diff --git a/Start/Client/wwwroot/css/spectre/spectre.css b/Start/Client/wwwroot/css/spectre/spectre.css deleted file mode 100644 index 1499dcc..0000000 --- a/Start/Client/wwwroot/css/spectre/spectre.css +++ /dev/null @@ -1,3760 +0,0 @@ -/*! Spectre.css v0.5.9 | MIT License | github.com/picturepan2/spectre */ -/* Manually forked from Normalize.css */ -/* normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */ -/** 1. Change the default font family in all browsers (opinionated). 2. Correct the line height in all browsers. 3. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS. */ -/* Document ========================================================================== */ -html { - font-family: sans-serif; /* 1 */ - -webkit-text-size-adjust: 100%; /* 3 */ - -ms-text-size-adjust: 100%; /* 3 */ -} - -/* Sections ========================================================================== */ -/** Remove the margin in all browsers (opinionated). */ -body { - margin: 0; -} - -/** Add the correct display in IE 9-. */ -article, -aside, -footer, -header, -nav, -section { - display: block; -} - -/** Correct the font size and margin on `h1` elements within `section` and `article` contexts in Chrome, Firefox, and Safari. */ -h1 { - font-size: 2em; - margin: .67em 0; -} - -/* Grouping content ========================================================================== */ -/** Add the correct display in IE 9-. 1. Add the correct display in IE. */ -figcaption, -figure, -main { - /* 1 */ display: block; -} - -/** Add the correct margin in IE 8 (removed). */ -/** 1. Add the correct box sizing in Firefox. 2. Show the overflow in Edge and IE. */ -hr { - box-sizing: content-box; /* 1 */ - height: 0; /* 1 */ - overflow: visible; /* 2 */ -} - -/** 1. Correct the inheritance and scaling of font size in all browsers. (removed) 2. Correct the odd `em` font sizing in all browsers. */ -/* Text-level semantics ========================================================================== */ -/** 1. Remove the gray background on active links in IE 10. 2. Remove gaps in links underline in iOS 8+ and Safari 8+. */ -a { - background-color: transparent; /* 1 */ - -webkit-text-decoration-skip: objects; /* 2 */ -} - -/** Remove the outline on focused links when they are also active or hovered in all browsers (opinionated). */ -a:active, -a:hover { - outline-width: 0; -} - -/** Modify default styling of address. */ -address { - font-style: normal; -} - -/** 1. Remove the bottom border in Firefox 39-. 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. (removed) */ -/** Prevent the duplicate application of `bolder` by the next rule in Safari 6. */ -b, -strong { - font-weight: inherit; -} - -/** Add the correct font weight in Chrome, Edge, and Safari. */ -b, -strong { - font-weight: bolder; -} - -/** 1. Correct the inheritance and scaling of font size in all browsers. 2. Correct the odd `em` font sizing in all browsers. */ -code, -kbd, -pre, -samp { - font-family: "SF Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Courier, monospace; /* 1 (changed) */ - font-size: 1em; /* 2 */ -} - -/** Add the correct font style in Android 4.3-. */ -dfn { - font-style: italic; -} - -/** Add the correct background and color in IE 9-. (Removed) */ -/** Add the correct font size in all browsers. */ -small { - font-size: 80%; - font-weight: 400; /* (added) */ -} - -/** Prevent `sub` and `sup` elements from affecting the line height in all browsers. */ -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sub { - bottom: -.25em; -} - -sup { - top: -.5em; -} - -/* Embedded content ========================================================================== */ -/** Add the correct display in IE 9-. */ -audio, -video { - display: inline-block; -} - -/** Add the correct display in iOS 4-7. */ -audio:not([controls]) { - display: none; - height: 0; -} - -/** Remove the border on images inside links in IE 10-. */ -img { - border-style: none; -} - -/** Hide the overflow in IE. */ -svg:not(:root) { - overflow: hidden; -} - -/* Forms ========================================================================== */ -/** 1. Change the font styles in all browsers (opinionated). 2. Remove the margin in Firefox and Safari. */ -button, -input, -optgroup, -select, -textarea { - font-family: inherit; /* 1 (changed) */ - font-size: inherit; /* 1 (changed) */ - line-height: inherit; /* 1 (changed) */ - margin: 0; /* 2 */ -} - -/** Show the overflow in IE. 1. Show the overflow in Edge. */ -button, -input { - /* 1 */ overflow: visible; -} - -/** Remove the inheritance of text transform in Edge, Firefox, and IE. 1. Remove the inheritance of text transform in Firefox. */ -button, -select { - /* 1 */ text-transform: none; -} - -/** 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` controls in Android 4. 2. Correct the inability to style clickable types in iOS and Safari. */ -button, -html [type="button"], -[type="reset"], -[type="submit"] { - -webkit-appearance: button; /* 2 */ -} - -/** Remove the inner border and padding in Firefox. */ -button::-moz-focus-inner, -[type="button"]::-moz-focus-inner, -[type="reset"]::-moz-focus-inner, -[type="submit"]::-moz-focus-inner { - border-style: none; - padding: 0; -} - -/** Restore the focus styles unset by the previous rule (removed). */ -/** Change the border, margin, and padding in all browsers (opinionated) (changed). */ -fieldset { - border: 0; - margin: 0; - padding: 0; -} - -/** 1. Correct the text wrapping in Edge and IE. 2. Correct the color inheritance from `fieldset` elements in IE. 3. Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers. */ -legend { - box-sizing: border-box; /* 1 */ - color: inherit; /* 2 */ - display: table; /* 1 */ - max-width: 100%; /* 1 */ - padding: 0; /* 3 */ - white-space: normal; /* 1 */ -} - -/** 1. Add the correct display in IE 9-. 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. */ -progress { - display: inline-block; /* 1 */ - vertical-align: baseline; /* 2 */ -} - -/** Remove the default vertical scrollbar in IE. */ -textarea { - overflow: auto; -} - -/** 1. Add the correct box sizing in IE 10-. 2. Remove the padding in IE 10-. */ -[type="checkbox"], -[type="radio"] { - box-sizing: border-box; /* 1 */ - padding: 0; /* 2 */ -} - -/** Correct the cursor style of increment and decrement buttons in Chrome. */ -[type="number"]::-webkit-inner-spin-button, -[type="number"]::-webkit-outer-spin-button { - height: auto; -} - -/** 1. Correct the odd appearance in Chrome and Safari. 2. Correct the outline style in Safari. */ -[type="search"] { - -webkit-appearance: textfield; /* 1 */ - outline-offset: -2px; /* 2 */ -} - -/** Remove the inner padding and cancel buttons in Chrome and Safari on macOS. */ -[type="search"]::-webkit-search-cancel-button, -[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; -} - -/** 1. Correct the inability to style clickable types in iOS and Safari. 2. Change font properties to `inherit` in Safari. */ -::-webkit-file-upload-button { - -webkit-appearance: button; /* 1 */ - font: inherit; /* 2 */ -} - -/* Interactive ========================================================================== */ -/* Add the correct display in IE 9-. 1. Add the correct display in Edge, IE, and Firefox. */ -details, -menu { - display: block; -} - -/* Add the correct display in all browsers. */ -summary { - display: list-item; - outline: none; -} - -/* Scripting ========================================================================== */ -/** Add the correct display in IE 9-. */ -canvas { - display: inline-block; -} - -/** Add the correct display in IE. */ -template { - display: none; -} - -/* Hidden ========================================================================== */ -/** Add the correct display in IE 10-. */ -[hidden] { - display: none; -} - -*, -*::before, -*::after { - box-sizing: inherit; -} - -html { - box-sizing: border-box; - font-size: 20px; - line-height: 1.5; - -webkit-tap-highlight-color: transparent; -} - -body { - background: #fff; - color: #3b4351; - font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; - font-size: .8rem; - overflow-x: hidden; - text-rendering: optimizeLegibility; -} - -a { - color: #5755d9; - outline: none; - text-decoration: none; -} - -a:focus { - box-shadow: 0 0 0 .1rem rgba(87, 85, 217, .2); -} - -a:focus, -a:hover, -a:active, -a.active { - color: #302ecd; - text-decoration: underline; -} - -a:visited { - color: #807fe2; -} - -h1, -h2, -h3, -h4, -h5, -h6 { - color: inherit; - font-weight: 500; - line-height: 1.2; - margin-bottom: .5em; - margin-top: 0; -} - -.h1, -.h2, -.h3, -.h4, -.h5, -.h6 { - font-weight: 500; -} - -h1, -.h1 { - font-size: 2rem; -} - -h2, -.h2 { - font-size: 1.6rem; -} - -h3, -.h3 { - font-size: 1.4rem; -} - -h4, -.h4 { - font-size: 1.2rem; -} - -h5, -.h5 { - font-size: 1rem; -} - -h6, -.h6 { - font-size: .8rem; -} - -p { - margin: 0 0 1.2rem; -} - -a, -ins, -u { - -webkit-text-decoration-skip: ink edges; - text-decoration-skip: ink edges; -} - -abbr[title] { - border-bottom: .05rem dotted; - cursor: help; - text-decoration: none; -} - -kbd { - background: #303742; - border-radius: .1rem; - color: #fff; - font-size: .7rem; - line-height: 1.25; - padding: .1rem .2rem; -} - -mark { - background: #ffe9b3; - border-bottom: .05rem solid #ffd367; - border-radius: .1rem; - color: #3b4351; - padding: .05rem .1rem 0; -} - -blockquote { - border-left: .1rem solid #dadee4; - margin-left: 0; - padding: .4rem .8rem; -} - -blockquote p:last-child { - margin-bottom: 0; -} - -ul, -ol { - margin: .8rem 0 .8rem .8rem; - padding: 0; -} - -ul ul, -ul ol, -ol ul, -ol ol { - margin: .8rem 0 .8rem .8rem; -} - -ul li, -ol li { - margin-top: .4rem; -} - -ul { - list-style: disc inside; -} - -ul ul { - list-style-type: circle; -} - -ol { - list-style: decimal inside; -} - -ol ol { - list-style-type: lower-alpha; -} - -dl dt { - font-weight: bold; -} - -dl dd { - margin: .4rem 0 .8rem 0; -} - -html:lang(zh), -html:lang(zh-Hans), -.lang-zh, -.lang-zh-hans { - font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", sans-serif; -} - -html:lang(zh-Hant), -.lang-zh-hant { - font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang TC", "Hiragino Sans CNS", "Microsoft JhengHei", "Helvetica Neue", sans-serif; -} - -html:lang(ja), -.lang-ja { - font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Sans", "Hiragino Kaku Gothic Pro", "Yu Gothic", YuGothic, Meiryo, "Helvetica Neue", sans-serif; -} - -html:lang(ko), -.lang-ko { - font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Malgun Gothic", "Helvetica Neue", sans-serif; -} - -:lang(zh) ins, -:lang(zh) u, -:lang(ja) ins, -:lang(ja) u, -.lang-cjk ins, -.lang-cjk u { - border-bottom: .05rem solid; - text-decoration: none; -} - -:lang(zh) del + del, -:lang(zh) del + s, -:lang(zh) ins + ins, -:lang(zh) ins + u, -:lang(zh) s + del, -:lang(zh) s + s, -:lang(zh) u + ins, -:lang(zh) u + u, -:lang(ja) del + del, -:lang(ja) del + s, -:lang(ja) ins + ins, -:lang(ja) ins + u, -:lang(ja) s + del, -:lang(ja) s + s, -:lang(ja) u + ins, -:lang(ja) u + u, -.lang-cjk del + del, -.lang-cjk del + s, -.lang-cjk ins + ins, -.lang-cjk ins + u, -.lang-cjk s + del, -.lang-cjk s + s, -.lang-cjk u + ins, -.lang-cjk u + u { - margin-left: .125em; -} - -.table { - border-collapse: collapse; - border-spacing: 0; - text-align: left; - width: 100%; -} - -.table.table-striped tbody tr:nth-of-type(odd) { - background: #f7f8f9; -} - -.table tbody tr.active, -.table.table-striped tbody tr.active { - background: #eef0f3; -} - -.table.table-hover tbody tr:hover { - background: #eef0f3; -} - -.table.table-scroll { - display: block; - overflow-x: auto; - padding-bottom: .75rem; - white-space: nowrap; -} - -.table td, -.table th { - border-bottom: .05rem solid #dadee4; - padding: .6rem .4rem; -} - -.table th { - border-bottom-width: .1rem; -} - -.btn { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background: #fff; - border: .05rem solid #5755d9; - border-radius: .1rem; - color: #5755d9; - cursor: pointer; - display: inline-block; - font-size: .8rem; - height: 1.8rem; - line-height: 1.2rem; - outline: none; - padding: .25rem .4rem; - text-align: center; - text-decoration: none; - transition: background .2s, border .2s, box-shadow .2s, color .2s; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - vertical-align: middle; - white-space: nowrap; -} - -.btn:focus { - box-shadow: 0 0 0 .1rem rgba(87, 85, 217, .2); -} - -.btn:focus, -.btn:hover { - background: #f1f1fc; - border-color: #4b48d6; - text-decoration: none; -} - -.btn:active, -.btn.active { - background: #4b48d6; - border-color: #3634d2; - color: #fff; - text-decoration: none; -} - -.btn:active.loading::after, -.btn.active.loading::after { - border-bottom-color: #fff; - border-left-color: #fff; -} - -.btn[disabled], -.btn:disabled, -.btn.disabled { - cursor: default; - opacity: .5; - pointer-events: none; -} - -.btn.btn-primary { - background: #5755d9; - border-color: #4b48d6; - color: #fff; -} - -.btn.btn-primary:focus, -.btn.btn-primary:hover { - background: #4240d4; - border-color: #3634d2; - color: #fff; -} - -.btn.btn-primary:active, -.btn.btn-primary.active { - background: #3a38d2; - border-color: #302ecd; - color: #fff; -} - -.btn.btn-primary.loading::after { - border-bottom-color: #fff; - border-left-color: #fff; -} - -.btn.btn-success { - background: #32b643; - border-color: #2faa3f; - color: #fff; -} - -.btn.btn-success:focus { - box-shadow: 0 0 0 .1rem rgba(50, 182, 67, .2); -} - -.btn.btn-success:focus, -.btn.btn-success:hover { - background: #30ae40; - border-color: #2da23c; - color: #fff; -} - -.btn.btn-success:active, -.btn.btn-success.active { - background: #2a9a39; - border-color: #278e34; - color: #fff; -} - -.btn.btn-success.loading::after { - border-bottom-color: #fff; - border-left-color: #fff; -} - -.btn.btn-error { - background: #e85600; - border-color: #d95000; - color: #fff; -} - -.btn.btn-error:focus { - box-shadow: 0 0 0 .1rem rgba(232, 86, 0, .2); -} - -.btn.btn-error:focus, -.btn.btn-error:hover { - background: #de5200; - border-color: #cf4d00; - color: #fff; -} - -.btn.btn-error:active, -.btn.btn-error.active { - background: #c44900; - border-color: #b54300; - color: #fff; -} - -.btn.btn-error.loading::after { - border-bottom-color: #fff; - border-left-color: #fff; -} - -.btn.btn-link { - background: transparent; - border-color: transparent; - color: #5755d9; -} - -.btn.btn-link:focus, -.btn.btn-link:hover, -.btn.btn-link:active, -.btn.btn-link.active { - color: #302ecd; -} - -.btn.btn-sm { - font-size: .7rem; - height: 1.4rem; - padding: .05rem .3rem; -} - -.btn.btn-lg { - font-size: .9rem; - height: 2rem; - padding: .35rem .6rem; -} - -.btn.btn-block { - display: block; - width: 100%; -} - -.btn.btn-action { - padding-left: 0; - padding-right: 0; - width: 1.8rem; -} - -.btn.btn-action.btn-sm { - width: 1.4rem; -} - -.btn.btn-action.btn-lg { - width: 2rem; -} - -.btn.btn-clear { - background: transparent; - border: 0; - color: currentColor; - height: 1rem; - line-height: .8rem; - margin-left: .2rem; - margin-right: -2px; - opacity: 1; - padding: .1rem; - text-decoration: none; - width: 1rem; -} - -.btn.btn-clear:focus, -.btn.btn-clear:hover { - background: rgba(247, 248, 249, .5); - opacity: .95; -} - -.btn.btn-clear::before { - content: "\2715"; -} - -.btn-group { - display: -ms-inline-flexbox; - display: inline-flex; - -ms-flex-wrap: wrap; - flex-wrap: wrap; -} - -.btn-group .btn { - -ms-flex: 1 0 auto; - flex: 1 0 auto; -} - -.btn-group .btn:first-child:not(:last-child) { - border-bottom-right-radius: 0; - border-top-right-radius: 0; -} - -.btn-group .btn:not(:first-child):not(:last-child) { - border-radius: 0; - margin-left: -.05rem; -} - -.btn-group .btn:last-child:not(:first-child) { - border-bottom-left-radius: 0; - border-top-left-radius: 0; - margin-left: -.05rem; -} - -.btn-group .btn:focus, -.btn-group .btn:hover, -.btn-group .btn:active, -.btn-group .btn.active { - z-index: 1; -} - -.btn-group.btn-group-block { - display: -ms-flexbox; - display: flex; -} - -.btn-group.btn-group-block .btn { - -ms-flex: 1 0 0; - flex: 1 0 0; -} - -.form-group:not(:last-child) { - margin-bottom: .4rem; -} - -fieldset { - margin-bottom: .8rem; -} - -legend { - font-size: .9rem; - font-weight: 500; - margin-bottom: .8rem; -} - -.form-label { - display: block; - line-height: 1.2rem; - padding: .3rem 0; -} - -.form-label.label-sm { - font-size: .7rem; - padding: .1rem 0; -} - -.form-label.label-lg { - font-size: .9rem; - padding: .4rem 0; -} - -.form-input { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background: #fff; - background-image: none; - border: .05rem solid #bcc3ce; - border-radius: .1rem; - color: #3b4351; - display: block; - font-size: .8rem; - height: 1.8rem; - line-height: 1.2rem; - max-width: 100%; - outline: none; - padding: .25rem .4rem; - position: relative; - transition: background .2s, border .2s, box-shadow .2s, color .2s; - width: 100%; -} - -.form-input:focus { - border-color: #5755d9; - box-shadow: 0 0 0 .1rem rgba(87, 85, 217, .2); -} - -.form-input:-ms-input-placeholder { - color: #bcc3ce; -} - -.form-input::-ms-input-placeholder { - color: #bcc3ce; -} - -.form-input::placeholder { - color: #bcc3ce; -} - -.form-input.input-sm { - font-size: .7rem; - height: 1.4rem; - padding: .05rem .3rem; -} - -.form-input.input-lg { - font-size: .9rem; - height: 2rem; - padding: .35rem .6rem; -} - -.form-input.input-inline { - display: inline-block; - vertical-align: middle; - width: auto; -} - -.form-input[type="file"] { - height: auto; -} - -textarea.form-input, -textarea.form-input.input-lg, -textarea.form-input.input-sm { - height: auto; -} - -.form-input-hint { - color: #bcc3ce; - font-size: .7rem; - margin-top: .2rem; -} - -.has-success .form-input-hint, -.is-success + .form-input-hint { - color: #32b643; -} - -.has-error .form-input-hint, -.is-error + .form-input-hint { - color: #e85600; -} - -.form-select { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background: #fff; - border: .05rem solid #bcc3ce; - border-radius: .1rem; - color: inherit; - font-size: .8rem; - height: 1.8rem; - line-height: 1.2rem; - outline: none; - padding: .25rem .4rem; - vertical-align: middle; - width: 100%; -} - -.form-select:focus { - border-color: #5755d9; - box-shadow: 0 0 0 .1rem rgba(87, 85, 217, .2); -} - -.form-select::-ms-expand { - display: none; -} - -.form-select.select-sm { - font-size: .7rem; - height: 1.4rem; - padding: .05rem 1.1rem .05rem .3rem; -} - -.form-select.select-lg { - font-size: .9rem; - height: 2rem; - padding: .35rem 1.4rem .35rem .6rem; -} - -.form-select[size], -.form-select[multiple] { - height: auto; - padding: .25rem .4rem; -} - -.form-select[size] option, -.form-select[multiple] option { - padding: .1rem .2rem; -} - -.form-select:not([multiple]):not([size]) { - background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%204%205'%3E%3Cpath%20fill='%23667189'%20d='M2%200L0%202h4zm0%205L0%203h4z'/%3E%3C/svg%3E") no-repeat right .35rem center/.4rem .5rem; - padding-right: 1.2rem; -} - -.has-icon-left, -.has-icon-right { - position: relative; -} - -.has-icon-left .form-icon, -.has-icon-right .form-icon { - height: .8rem; - margin: 0 .25rem; - position: absolute; - top: 50%; - transform: translateY(-50%); - width: .8rem; - z-index: 2; -} - -.has-icon-left .form-icon { - left: .05rem; -} - -.has-icon-left .form-input { - padding-left: 1.3rem; -} - -.has-icon-right .form-icon { - right: .05rem; -} - -.has-icon-right .form-input { - padding-right: 1.3rem; -} - -.form-checkbox, -.form-radio, -.form-switch { - display: block; - line-height: 1.2rem; - margin: .2rem 0; - min-height: 1.4rem; - padding: .1rem .4rem .1rem 1.2rem; - position: relative; -} - -.form-checkbox input, -.form-radio input, -.form-switch input { - clip: rect(0, 0, 0, 0); - height: 1px; - margin: -1px; - overflow: hidden; - position: absolute; - width: 1px; -} - -.form-checkbox input:focus + .form-icon, -.form-radio input:focus + .form-icon, -.form-switch input:focus + .form-icon { - border-color: #5755d9; - box-shadow: 0 0 0 .1rem rgba(87, 85, 217, .2); -} - -.form-checkbox input:checked + .form-icon, -.form-radio input:checked + .form-icon, -.form-switch input:checked + .form-icon { - background: #5755d9; - border-color: #5755d9; -} - -.form-checkbox .form-icon, -.form-radio .form-icon, -.form-switch .form-icon { - border: .05rem solid #bcc3ce; - cursor: pointer; - display: inline-block; - position: absolute; - transition: background .2s, border .2s, box-shadow .2s, color .2s; -} - -.form-checkbox.input-sm, -.form-radio.input-sm, -.form-switch.input-sm { - font-size: .7rem; - margin: 0; -} - -.form-checkbox.input-lg, -.form-radio.input-lg, -.form-switch.input-lg { - font-size: .9rem; - margin: .3rem 0; -} - -.form-checkbox .form-icon, -.form-radio .form-icon { - background: #fff; - height: .8rem; - left: 0; - top: .3rem; - width: .8rem; -} - -.form-checkbox input:active + .form-icon, -.form-radio input:active + .form-icon { - background: #eef0f3; -} - -.form-checkbox .form-icon { - border-radius: .1rem; -} - -.form-checkbox input:checked + .form-icon::before { - background-clip: padding-box; - border: .1rem solid #fff; - border-left-width: 0; - border-top-width: 0; - content: ""; - height: 9px; - left: 50%; - margin-left: -3px; - margin-top: -6px; - position: absolute; - top: 50%; - transform: rotate(45deg); - width: 6px; -} - -.form-checkbox input:indeterminate + .form-icon { - background: #5755d9; - border-color: #5755d9; -} - -.form-checkbox input:indeterminate + .form-icon::before { - background: #fff; - content: ""; - height: 2px; - left: 50%; - margin-left: -5px; - margin-top: -1px; - position: absolute; - top: 50%; - width: 10px; -} - -.form-radio .form-icon { - border-radius: 50%; -} - -.form-radio input:checked + .form-icon::before { - background: #fff; - border-radius: 50%; - content: ""; - height: 6px; - left: 50%; - position: absolute; - top: 50%; - transform: translate(-50%, -50%); - width: 6px; -} - -.form-switch { - padding-left: 2rem; -} - -.form-switch .form-icon { - background: #bcc3ce; - background-clip: padding-box; - border-radius: .45rem; - height: .9rem; - left: 0; - top: .25rem; - width: 1.6rem; -} - -.form-switch .form-icon::before { - background: #fff; - border-radius: 50%; - content: ""; - display: block; - height: .8rem; - left: 0; - position: absolute; - top: 0; - transition: background .2s, border .2s, box-shadow .2s, color .2s, left .2s; - width: .8rem; -} - -.form-switch input:checked + .form-icon::before { - left: 14px; -} - -.form-switch input:active + .form-icon::before { - background: #f7f8f9; -} - -.input-group { - display: -ms-flexbox; - display: flex; -} - -.input-group .input-group-addon { - background: #f7f8f9; - border: .05rem solid #bcc3ce; - border-radius: .1rem; - line-height: 1.2rem; - padding: .25rem .4rem; - white-space: nowrap; -} - -.input-group .input-group-addon.addon-sm { - font-size: .7rem; - padding: .05rem .3rem; -} - -.input-group .input-group-addon.addon-lg { - font-size: .9rem; - padding: .35rem .6rem; -} - -.input-group .form-input, -.input-group .form-select { - -ms-flex: 1 1 auto; - flex: 1 1 auto; - width: 1%; -} - -.input-group .input-group-btn { - z-index: 1; -} - -.input-group .form-input:first-child:not(:last-child), -.input-group .form-select:first-child:not(:last-child), -.input-group .input-group-addon:first-child:not(:last-child), -.input-group .input-group-btn:first-child:not(:last-child) { - border-bottom-right-radius: 0; - border-top-right-radius: 0; -} - -.input-group .form-input:not(:first-child):not(:last-child), -.input-group .form-select:not(:first-child):not(:last-child), -.input-group .input-group-addon:not(:first-child):not(:last-child), -.input-group .input-group-btn:not(:first-child):not(:last-child) { - border-radius: 0; - margin-left: -.05rem; -} - -.input-group .form-input:last-child:not(:first-child), -.input-group .form-select:last-child:not(:first-child), -.input-group .input-group-addon:last-child:not(:first-child), -.input-group .input-group-btn:last-child:not(:first-child) { - border-bottom-left-radius: 0; - border-top-left-radius: 0; - margin-left: -.05rem; -} - -.input-group .form-input:focus, -.input-group .form-select:focus, -.input-group .input-group-addon:focus, -.input-group .input-group-btn:focus { - z-index: 2; -} - -.input-group .form-select { - width: auto; -} - -.input-group.input-inline { - display: -ms-inline-flexbox; - display: inline-flex; -} - -.has-success .form-input, -.form-input.is-success, -.has-success .form-select, -.form-select.is-success { - background: #f9fdfa; - border-color: #32b643; -} - -.has-success .form-input:focus, -.form-input.is-success:focus, -.has-success .form-select:focus, -.form-select.is-success:focus { - box-shadow: 0 0 0 .1rem rgba(50, 182, 67, .2); -} - -.has-error .form-input, -.form-input.is-error, -.has-error .form-select, -.form-select.is-error { - background: #fffaf7; - border-color: #e85600; -} - -.has-error .form-input:focus, -.form-input.is-error:focus, -.has-error .form-select:focus, -.form-select.is-error:focus { - box-shadow: 0 0 0 .1rem rgba(232, 86, 0, .2); -} - -.has-error .form-checkbox .form-icon, -.form-checkbox.is-error .form-icon, -.has-error .form-radio .form-icon, -.form-radio.is-error .form-icon, -.has-error .form-switch .form-icon, -.form-switch.is-error .form-icon { - border-color: #e85600; -} - -.has-error .form-checkbox input:checked + .form-icon, -.form-checkbox.is-error input:checked + .form-icon, -.has-error .form-radio input:checked + .form-icon, -.form-radio.is-error input:checked + .form-icon, -.has-error .form-switch input:checked + .form-icon, -.form-switch.is-error input:checked + .form-icon { - background: #e85600; - border-color: #e85600; -} - -.has-error .form-checkbox input:focus + .form-icon, -.form-checkbox.is-error input:focus + .form-icon, -.has-error .form-radio input:focus + .form-icon, -.form-radio.is-error input:focus + .form-icon, -.has-error .form-switch input:focus + .form-icon, -.form-switch.is-error input:focus + .form-icon { - border-color: #e85600; - box-shadow: 0 0 0 .1rem rgba(232, 86, 0, .2); -} - -.has-error .form-checkbox input:indeterminate + .form-icon, -.form-checkbox.is-error input:indeterminate + .form-icon { - background: #e85600; - border-color: #e85600; -} - -.form-input:not(:-ms-input-placeholder):invalid { - border-color: #e85600; -} - -.form-input:not(:placeholder-shown):invalid { - border-color: #e85600; -} - -.form-input:not(:-ms-input-placeholder):invalid:focus { - background: #fffaf7; - box-shadow: 0 0 0 .1rem rgba(232, 86, 0, .2); -} - -.form-input:not(:placeholder-shown):invalid:focus { - background: #fffaf7; - box-shadow: 0 0 0 .1rem rgba(232, 86, 0, .2); -} - -.form-input:not(:-ms-input-placeholder):invalid + .form-input-hint { - color: #e85600; -} - -.form-input:not(:placeholder-shown):invalid + .form-input-hint { - color: #e85600; -} - -.form-input:disabled, -.form-input.disabled, -.form-select:disabled, -.form-select.disabled { - background-color: #eef0f3; - cursor: not-allowed; - opacity: .5; -} - -.form-input[readonly] { - background-color: #f7f8f9; -} - -input:disabled + .form-icon, -input.disabled + .form-icon { - background: #eef0f3; - cursor: not-allowed; - opacity: .5; -} - -.form-switch input:disabled + .form-icon::before, -.form-switch input.disabled + .form-icon::before { - background: #fff; -} - -.form-horizontal { - padding: .4rem 0; -} - -.form-horizontal .form-group { - display: -ms-flexbox; - display: flex; - -ms-flex-wrap: wrap; - flex-wrap: wrap; -} - -.form-inline { - display: inline-block; -} - -.label { - background: #eef0f3; - border-radius: .1rem; - color: #455060; - display: inline-block; - line-height: 1.25; - padding: .1rem .2rem; -} - -.label.label-rounded { - border-radius: 5rem; - padding-left: .4rem; - padding-right: .4rem; -} - -.label.label-primary { - background: #5755d9; - color: #fff; -} - -.label.label-secondary { - background: #f1f1fc; - color: #5755d9; -} - -.label.label-success { - background: #32b643; - color: #fff; -} - -.label.label-warning { - background: #ffb700; - color: #fff; -} - -.label.label-error { - background: #e85600; - color: #fff; -} - -code { - background: #fcf2f2; - border-radius: .1rem; - color: #d73e48; - font-size: 85%; - line-height: 1.25; - padding: .1rem .2rem; -} - -.code { - border-radius: .1rem; - color: #3b4351; - position: relative; -} - -.code::before { - color: #bcc3ce; - content: attr(data-lang); - font-size: .7rem; - position: absolute; - right: .4rem; - top: .1rem; -} - -.code code { - background: #f7f8f9; - color: inherit; - display: block; - line-height: 1.5; - overflow-x: auto; - padding: 1rem; - width: 100%; -} - -.img-responsive { - display: block; - height: auto; - max-width: 100%; -} - -.img-fit-cover { - object-fit: cover; -} - -.img-fit-contain { - object-fit: contain; -} - -.video-responsive { - display: block; - overflow: hidden; - padding: 0; - position: relative; - width: 100%; -} - -.video-responsive::before { - content: ""; - display: block; - padding-bottom: 56.25%; -} - -.video-responsive iframe, -.video-responsive object, -.video-responsive embed { - border: 0; - bottom: 0; - height: 100%; - left: 0; - position: absolute; - right: 0; - top: 0; - width: 100%; -} - -video.video-responsive { - height: auto; - max-width: 100%; -} - -video.video-responsive::before { - content: none; -} - -.video-responsive-4-3::before { - padding-bottom: 75%; -} - -.video-responsive-1-1::before { - padding-bottom: 100%; -} - -.figure { - margin: 0 0 .4rem 0; -} - -.figure .figure-caption { - color: #66758c; - margin-top: .4rem; -} - -.container { - margin-left: auto; - margin-right: auto; - padding-left: .4rem; - padding-right: .4rem; - width: 100%; -} - -.container.grid-xl { - max-width: 1296px; -} - -.container.grid-lg { - max-width: 976px; -} - -.container.grid-md { - max-width: 856px; -} - -.container.grid-sm { - max-width: 616px; -} - -.container.grid-xs { - max-width: 496px; -} - -.show-xs, -.show-sm, -.show-md, -.show-lg, -.show-xl { - display: none !important; -} - -.cols, -.columns { - display: -ms-flexbox; - display: flex; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - margin-left: -.4rem; - margin-right: -.4rem; -} - -.cols.col-gapless, -.columns.col-gapless { - margin-left: 0; - margin-right: 0; -} - -.cols.col-gapless > .column, -.columns.col-gapless > .column { - padding-left: 0; - padding-right: 0; -} - -.cols.col-oneline, -.columns.col-oneline { - -ms-flex-wrap: nowrap; - flex-wrap: nowrap; - overflow-x: auto; -} - -[class~="col-"], -.column { - -ms-flex: 1; - flex: 1; - max-width: 100%; - padding-left: .4rem; - padding-right: .4rem; -} - -[class~="col-"].col-12, -[class~="col-"].col-11, -[class~="col-"].col-10, -[class~="col-"].col-9, -[class~="col-"].col-8, -[class~="col-"].col-7, -[class~="col-"].col-6, -[class~="col-"].col-5, -[class~="col-"].col-4, -[class~="col-"].col-3, -[class~="col-"].col-2, -[class~="col-"].col-1, -[class~="col-"].col-auto, -.column.col-12, -.column.col-11, -.column.col-10, -.column.col-9, -.column.col-8, -.column.col-7, -.column.col-6, -.column.col-5, -.column.col-4, -.column.col-3, -.column.col-2, -.column.col-1, -.column.col-auto { - -ms-flex: none; - flex: none; -} - -.col-12 { - width: 100%; -} - -.col-11 { - width: 91.66666667%; -} - -.col-10 { - width: 83.33333333%; -} - -.col-9 { - width: 75%; -} - -.col-8 { - width: 66.66666667%; -} - -.col-7 { - width: 58.33333333%; -} - -.col-6 { - width: 50%; -} - -.col-5 { - width: 41.66666667%; -} - -.col-4 { - width: 33.33333333%; -} - -.col-3 { - width: 25%; -} - -.col-2 { - width: 16.66666667%; -} - -.col-1 { - width: 8.33333333%; -} - -.col-auto { - -ms-flex: 0 0 auto; - flex: 0 0 auto; - max-width: none; - width: auto; -} - -.col-mx-auto { - margin-left: auto; - margin-right: auto; -} - -.col-ml-auto { - margin-left: auto; -} - -.col-mr-auto { - margin-right: auto; -} - -@media (max-width: 1280px) { - .col-xl-12, - .col-xl-11, - .col-xl-10, - .col-xl-9, - .col-xl-8, - .col-xl-7, - .col-xl-6, - .col-xl-5, - .col-xl-4, - .col-xl-3, - .col-xl-2, - .col-xl-1, - .col-xl-auto { - -ms-flex: none; - flex: none; - } - .col-xl-12 { - width: 100%; - } - .col-xl-11 { - width: 91.66666667%; - } - .col-xl-10 { - width: 83.33333333%; - } - .col-xl-9 { - width: 75%; - } - .col-xl-8 { - width: 66.66666667%; - } - .col-xl-7 { - width: 58.33333333%; - } - .col-xl-6 { - width: 50%; - } - .col-xl-5 { - width: 41.66666667%; - } - .col-xl-4 { - width: 33.33333333%; - } - .col-xl-3 { - width: 25%; - } - .col-xl-2 { - width: 16.66666667%; - } - .col-xl-1 { - width: 8.33333333%; - } - .col-xl-auto { - width: auto; - } - .hide-xl { - display: none !important; - } - .show-xl { - display: block !important; - } -} - -@media (max-width: 960px) { - .col-lg-12, - .col-lg-11, - .col-lg-10, - .col-lg-9, - .col-lg-8, - .col-lg-7, - .col-lg-6, - .col-lg-5, - .col-lg-4, - .col-lg-3, - .col-lg-2, - .col-lg-1, - .col-lg-auto { - -ms-flex: none; - flex: none; - } - .col-lg-12 { - width: 100%; - } - .col-lg-11 { - width: 91.66666667%; - } - .col-lg-10 { - width: 83.33333333%; - } - .col-lg-9 { - width: 75%; - } - .col-lg-8 { - width: 66.66666667%; - } - .col-lg-7 { - width: 58.33333333%; - } - .col-lg-6 { - width: 50%; - } - .col-lg-5 { - width: 41.66666667%; - } - .col-lg-4 { - width: 33.33333333%; - } - .col-lg-3 { - width: 25%; - } - .col-lg-2 { - width: 16.66666667%; - } - .col-lg-1 { - width: 8.33333333%; - } - .col-lg-auto { - width: auto; - } - .hide-lg { - display: none !important; - } - .show-lg { - display: block !important; - } -} - -@media (max-width: 840px) { - .col-md-12, - .col-md-11, - .col-md-10, - .col-md-9, - .col-md-8, - .col-md-7, - .col-md-6, - .col-md-5, - .col-md-4, - .col-md-3, - .col-md-2, - .col-md-1, - .col-md-auto { - -ms-flex: none; - flex: none; - } - .col-md-12 { - width: 100%; - } - .col-md-11 { - width: 91.66666667%; - } - .col-md-10 { - width: 83.33333333%; - } - .col-md-9 { - width: 75%; - } - .col-md-8 { - width: 66.66666667%; - } - .col-md-7 { - width: 58.33333333%; - } - .col-md-6 { - width: 50%; - } - .col-md-5 { - width: 41.66666667%; - } - .col-md-4 { - width: 33.33333333%; - } - .col-md-3 { - width: 25%; - } - .col-md-2 { - width: 16.66666667%; - } - .col-md-1 { - width: 8.33333333%; - } - .col-md-auto { - width: auto; - } - .hide-md { - display: none !important; - } - .show-md { - display: block !important; - } -} - -@media (max-width: 600px) { - .col-sm-12, - .col-sm-11, - .col-sm-10, - .col-sm-9, - .col-sm-8, - .col-sm-7, - .col-sm-6, - .col-sm-5, - .col-sm-4, - .col-sm-3, - .col-sm-2, - .col-sm-1, - .col-sm-auto { - -ms-flex: none; - flex: none; - } - .col-sm-12 { - width: 100%; - } - .col-sm-11 { - width: 91.66666667%; - } - .col-sm-10 { - width: 83.33333333%; - } - .col-sm-9 { - width: 75%; - } - .col-sm-8 { - width: 66.66666667%; - } - .col-sm-7 { - width: 58.33333333%; - } - .col-sm-6 { - width: 50%; - } - .col-sm-5 { - width: 41.66666667%; - } - .col-sm-4 { - width: 33.33333333%; - } - .col-sm-3 { - width: 25%; - } - .col-sm-2 { - width: 16.66666667%; - } - .col-sm-1 { - width: 8.33333333%; - } - .col-sm-auto { - width: auto; - } - .hide-sm { - display: none !important; - } - .show-sm { - display: block !important; - } -} - -@media (max-width: 480px) { - .col-xs-12, - .col-xs-11, - .col-xs-10, - .col-xs-9, - .col-xs-8, - .col-xs-7, - .col-xs-6, - .col-xs-5, - .col-xs-4, - .col-xs-3, - .col-xs-2, - .col-xs-1, - .col-xs-auto { - -ms-flex: none; - flex: none; - } - .col-xs-12 { - width: 100%; - } - .col-xs-11 { - width: 91.66666667%; - } - .col-xs-10 { - width: 83.33333333%; - } - .col-xs-9 { - width: 75%; - } - .col-xs-8 { - width: 66.66666667%; - } - .col-xs-7 { - width: 58.33333333%; - } - .col-xs-6 { - width: 50%; - } - .col-xs-5 { - width: 41.66666667%; - } - .col-xs-4 { - width: 33.33333333%; - } - .col-xs-3 { - width: 25%; - } - .col-xs-2 { - width: 16.66666667%; - } - .col-xs-1 { - width: 8.33333333%; - } - .col-xs-auto { - width: auto; - } - .hide-xs { - display: none !important; - } - .show-xs { - display: block !important; - } -} - -.hero { - display: -ms-flexbox; - display: flex; - -ms-flex-direction: column; - flex-direction: column; - -ms-flex-pack: justify; - justify-content: space-between; - padding-bottom: 4rem; - padding-top: 4rem; -} - -.hero.hero-sm { - padding-bottom: 2rem; - padding-top: 2rem; -} - -.hero.hero-lg { - padding-bottom: 8rem; - padding-top: 8rem; -} - -.hero .hero-body { - padding: .4rem; -} - -.navbar { - align-items: stretch; - display: -ms-flexbox; - display: flex; - -ms-flex-align: stretch; - -ms-flex-pack: justify; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - justify-content: space-between; -} - -.navbar .navbar-section { - align-items: center; - display: -ms-flexbox; - display: flex; - -ms-flex: 1 0 0; - flex: 1 0 0; - -ms-flex-align: center; -} - -.navbar .navbar-section:not(:first-child):last-child { - -ms-flex-pack: end; - justify-content: flex-end; -} - -.navbar .navbar-center { - align-items: center; - display: -ms-flexbox; - display: flex; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - -ms-flex-align: center; -} - -.navbar .navbar-brand { - font-size: .9rem; - text-decoration: none; -} - -.accordion input:checked ~ .accordion-header > .icon:first-child, -.accordion[open] .accordion-header > .icon:first-child { - transform: rotate(90deg); -} - -.accordion input:checked ~ .accordion-body, -.accordion[open] .accordion-body { - max-height: 50rem; -} - -.accordion .accordion-header { - display: block; - padding: .2rem .4rem; -} - -.accordion .accordion-header .icon { - transition: transform .25s; -} - -.accordion .accordion-body { - margin-bottom: .4rem; - max-height: 0; - overflow: hidden; - transition: max-height .25s; -} - -summary.accordion-header::-webkit-details-marker { - display: none; -} - -.avatar { - background: #5755d9; - border-radius: 50%; - color: rgba(255, 255, 255, .85); - display: inline-block; - font-size: .8rem; - font-weight: 300; - height: 1.6rem; - line-height: 1.25; - margin: 0; - position: relative; - vertical-align: middle; - width: 1.6rem; -} - -.avatar.avatar-xs { - font-size: .4rem; - height: .8rem; - width: .8rem; -} - -.avatar.avatar-sm { - font-size: .6rem; - height: 1.2rem; - width: 1.2rem; -} - -.avatar.avatar-lg { - font-size: 1.2rem; - height: 2.4rem; - width: 2.4rem; -} - -.avatar.avatar-xl { - font-size: 1.6rem; - height: 3.2rem; - width: 3.2rem; -} - -.avatar img { - border-radius: 50%; - height: 100%; - position: relative; - width: 100%; - z-index: 1; -} - -.avatar .avatar-icon, -.avatar .avatar-presence { - background: #fff; - bottom: 14.64%; - height: 50%; - padding: .1rem; - position: absolute; - right: 14.64%; - transform: translate(50%, 50%); - width: 50%; - z-index: 2; -} - -.avatar .avatar-presence { - background: #bcc3ce; - border-radius: 50%; - box-shadow: 0 0 0 .1rem #fff; - height: .5em; - width: .5em; -} - -.avatar .avatar-presence.online { - background: #32b643; -} - -.avatar .avatar-presence.busy { - background: #e85600; -} - -.avatar .avatar-presence.away { - background: #ffb700; -} - -.avatar[data-initial]::before { - color: currentColor; - content: attr(data-initial); - left: 50%; - position: absolute; - top: 50%; - transform: translate(-50%, -50%); - z-index: 1; -} - -.badge { - position: relative; - white-space: nowrap; -} - -.badge[data-badge]::after, -.badge:not([data-badge])::after { - background: #5755d9; - background-clip: padding-box; - border-radius: .5rem; - box-shadow: 0 0 0 .1rem #fff; - color: #fff; - content: attr(data-badge); - display: inline-block; - transform: translate(-.05rem, -.5rem); -} - -.badge[data-badge]::after { - font-size: .7rem; - height: .9rem; - line-height: 1; - min-width: .9rem; - padding: .1rem .2rem; - text-align: center; - white-space: nowrap; -} - -.badge:not([data-badge])::after, -.badge[data-badge=""]::after { - height: 6px; - min-width: 6px; - padding: 0; - width: 6px; -} - -.badge.btn::after { - position: absolute; - right: 0; - top: 0; - transform: translate(50%, -50%); -} - -.badge.avatar::after { - position: absolute; - right: 14.64%; - top: 14.64%; - transform: translate(50%, -50%); - z-index: 100; -} - -.breadcrumb { - list-style: none; - margin: .2rem 0; - padding: .2rem 0; -} - -.breadcrumb .breadcrumb-item { - color: #66758c; - display: inline-block; - margin: 0; - padding: .2rem 0; -} - -.breadcrumb .breadcrumb-item:not(:last-child) { - margin-right: .2rem; -} - -.breadcrumb .breadcrumb-item:not(:last-child) a { - color: #66758c; -} - -.breadcrumb .breadcrumb-item:not(:first-child)::before { - color: #66758c; - content: "/"; - padding-right: .4rem; -} - -.bar { - background: #eef0f3; - border-radius: .1rem; - display: -ms-flexbox; - display: flex; - -ms-flex-wrap: nowrap; - flex-wrap: nowrap; - height: .8rem; - width: 100%; -} - -.bar.bar-sm { - height: .2rem; -} - -.bar .bar-item { - background: #5755d9; - color: #fff; - display: block; - -ms-flex-negative: 0; - flex-shrink: 0; - font-size: .7rem; - height: 100%; - line-height: .8rem; - position: relative; - text-align: center; - width: 0; -} - -.bar .bar-item:first-child { - border-bottom-left-radius: .1rem; - border-top-left-radius: .1rem; -} - -.bar .bar-item:last-child { - border-bottom-right-radius: .1rem; - border-top-right-radius: .1rem; - -ms-flex-negative: 1; - flex-shrink: 1; -} - -.bar-slider { - height: .1rem; - margin: .4rem 0; - position: relative; -} - -.bar-slider .bar-item { - left: 0; - padding: 0; - position: absolute; -} - -.bar-slider .bar-item:not(:last-child):first-child { - background: #eef0f3; - z-index: 1; -} - -.bar-slider .bar-slider-btn { - background: #5755d9; - border: 0; - border-radius: 50%; - height: .6rem; - padding: 0; - position: absolute; - right: 0; - top: 50%; - transform: translate(50%, -50%); - width: .6rem; -} - -.bar-slider .bar-slider-btn:active { - box-shadow: 0 0 0 .1rem #5755d9; -} - -.card { - background: #fff; - border: .05rem solid #dadee4; - border-radius: .1rem; - display: -ms-flexbox; - display: flex; - -ms-flex-direction: column; - flex-direction: column; -} - -.card .card-header, -.card .card-body, -.card .card-footer { - padding: .8rem; - padding-bottom: 0; -} - -.card .card-header:last-child, -.card .card-body:last-child, -.card .card-footer:last-child { - padding-bottom: .8rem; -} - -.card .card-body { - -ms-flex: 1 1 auto; - flex: 1 1 auto; -} - -.card .card-image { - padding-top: .8rem; -} - -.card .card-image:first-child { - padding-top: 0; -} - -.card .card-image:first-child img { - border-top-left-radius: .1rem; - border-top-right-radius: .1rem; -} - -.card .card-image:last-child img { - border-bottom-left-radius: .1rem; - border-bottom-right-radius: .1rem; -} - -.chip { - align-items: center; - background: #eef0f3; - border-radius: 5rem; - display: -ms-inline-flexbox; - display: inline-flex; - -ms-flex-align: center; - font-size: 90%; - height: 1.2rem; - line-height: .8rem; - margin: .1rem; - max-width: 320px; - overflow: hidden; - padding: .2rem .4rem; - text-decoration: none; - text-overflow: ellipsis; - vertical-align: middle; - white-space: nowrap; -} - -.chip.active { - background: #5755d9; - color: #fff; -} - -.chip .avatar { - margin-left: -.4rem; - margin-right: .2rem; -} - -.chip .btn-clear { - border-radius: 50%; - transform: scale(.75); -} - -.dropdown { - display: inline-block; - position: relative; -} - -.dropdown .menu { - animation: slide-down .15s ease 1; - display: none; - left: 0; - max-height: 50vh; - overflow-y: auto; - position: absolute; - top: 100%; -} - -.dropdown.dropdown-right .menu { - left: auto; - right: 0; -} - -.dropdown.active .menu, -.dropdown .dropdown-toggle:focus + .menu, -.dropdown .menu:hover { - display: block; -} - -.dropdown .btn-group .dropdown-toggle:nth-last-child(2) { - border-bottom-right-radius: .1rem; - border-top-right-radius: .1rem; -} - -.empty { - background: #f7f8f9; - border-radius: .1rem; - color: #66758c; - padding: 3.2rem 1.6rem; - text-align: center; -} - -.empty .empty-icon { - margin-bottom: .8rem; -} - -.empty .empty-title, -.empty .empty-subtitle { - margin: .4rem auto; -} - -.empty .empty-action { - margin-top: .8rem; -} - -.menu { - background: #fff; - border-radius: .1rem; - box-shadow: 0 .05rem .2rem rgba(48, 55, 66, .3); - list-style: none; - margin: 0; - min-width: 180px; - padding: .4rem; - transform: translateY(.2rem); - z-index: 300; -} - -.menu.menu-nav { - background: transparent; - box-shadow: none; -} - -.menu .menu-item { - margin-top: 0; - padding: 0 .4rem; - position: relative; - text-decoration: none; -} - -.menu .menu-item > a { - border-radius: .1rem; - color: inherit; - display: block; - margin: 0 -.4rem; - padding: .2rem .4rem; - text-decoration: none; -} - -.menu .menu-item > a:focus, -.menu .menu-item > a:hover { - background: #f1f1fc; - color: #5755d9; -} - -.menu .menu-item > a:active, -.menu .menu-item > a.active { - background: #f1f1fc; - color: #5755d9; -} - -.menu .menu-item .form-checkbox, -.menu .menu-item .form-radio, -.menu .menu-item .form-switch { - margin: .1rem 0; -} - -.menu .menu-item + .menu-item { - margin-top: .2rem; -} - -.menu .menu-badge { - align-items: center; - display: -ms-flexbox; - display: flex; - -ms-flex-align: center; - height: 100%; - position: absolute; - right: 0; - top: 0; -} - -.menu .menu-badge .label { - margin-right: .4rem; -} - -.modal { - align-items: center; - bottom: 0; - display: none; - -ms-flex-align: center; - -ms-flex-pack: center; - justify-content: center; - left: 0; - opacity: 0; - overflow: hidden; - padding: .4rem; - position: fixed; - right: 0; - top: 0; -} - -.modal:target, -.modal.active { - display: -ms-flexbox; - display: flex; - opacity: 1; - z-index: 400; -} - -.modal:target .modal-overlay, -.modal.active .modal-overlay { - background: rgba(247, 248, 249, .75); - bottom: 0; - cursor: default; - display: block; - left: 0; - position: absolute; - right: 0; - top: 0; -} - -.modal:target .modal-container, -.modal.active .modal-container { - animation: slide-down .2s ease 1; - z-index: 1; -} - -.modal.modal-sm .modal-container { - max-width: 320px; - padding: 0 .4rem; -} - -.modal.modal-lg .modal-overlay { - background: #fff; -} - -.modal.modal-lg .modal-container { - box-shadow: none; - max-width: 960px; -} - -.modal-container { - background: #fff; - border-radius: .1rem; - box-shadow: 0 .2rem .5rem rgba(48, 55, 66, .3); - display: -ms-flexbox; - display: flex; - -ms-flex-direction: column; - flex-direction: column; - max-height: 75vh; - max-width: 640px; - padding: 0 .8rem; - width: 100%; -} - -.modal-container.modal-fullheight { - max-height: 100vh; -} - -.modal-container .modal-header { - color: #303742; - padding: .8rem; -} - -.modal-container .modal-body { - overflow-y: auto; - padding: .8rem; - position: relative; -} - -.modal-container .modal-footer { - padding: .8rem; - text-align: right; -} - -.nav { - display: -ms-flexbox; - display: flex; - -ms-flex-direction: column; - flex-direction: column; - list-style: none; - margin: .2rem 0; -} - -.nav .nav-item a { - color: #66758c; - padding: .2rem .4rem; - text-decoration: none; -} - -.nav .nav-item a:focus, -.nav .nav-item a:hover { - color: #5755d9; -} - -.nav .nav-item.active > a { - color: #505c6e; - font-weight: bold; -} - -.nav .nav-item.active > a:focus, -.nav .nav-item.active > a:hover { - color: #5755d9; -} - -.nav .nav { - margin-bottom: .4rem; - margin-left: .8rem; -} - -.pagination { - display: -ms-flexbox; - display: flex; - list-style: none; - margin: .2rem 0; - padding: .2rem 0; -} - -.pagination .page-item { - margin: .2rem .05rem; -} - -.pagination .page-item span { - display: inline-block; - padding: .2rem .2rem; -} - -.pagination .page-item a { - border-radius: .1rem; - display: inline-block; - padding: .2rem .4rem; - text-decoration: none; -} - -.pagination .page-item a:focus, -.pagination .page-item a:hover { - color: #5755d9; -} - -.pagination .page-item.disabled a { - cursor: default; - opacity: .5; - pointer-events: none; -} - -.pagination .page-item.active a { - background: #5755d9; - color: #fff; -} - -.pagination .page-item.page-prev, -.pagination .page-item.page-next { - -ms-flex: 1 0 50%; - flex: 1 0 50%; -} - -.pagination .page-item.page-next { - text-align: right; -} - -.pagination .page-item .page-item-title { - margin: 0; -} - -.pagination .page-item .page-item-subtitle { - margin: 0; - opacity: .5; -} - -.panel { - border: .05rem solid #dadee4; - border-radius: .1rem; - display: -ms-flexbox; - display: flex; - -ms-flex-direction: column; - flex-direction: column; -} - -.panel .panel-header, -.panel .panel-footer { - -ms-flex: 0 0 auto; - flex: 0 0 auto; - padding: .8rem; -} - -.panel .panel-nav { - -ms-flex: 0 0 auto; - flex: 0 0 auto; -} - -.panel .panel-body { - -ms-flex: 1 1 auto; - flex: 1 1 auto; - overflow-y: auto; - padding: 0 .8rem; -} - -.popover { - display: inline-block; - position: relative; -} - -.popover .popover-container { - left: 50%; - opacity: 0; - padding: .4rem; - position: absolute; - top: 0; - transform: translate(-50%, -50%) scale(0); - transition: transform .2s; - width: 320px; - z-index: 300; -} - -.popover *:focus + .popover-container, -.popover:hover .popover-container { - display: block; - opacity: 1; - transform: translate(-50%, -100%) scale(1); -} - -.popover.popover-right .popover-container { - left: 100%; - top: 50%; -} - -.popover.popover-right *:focus + .popover-container, -.popover.popover-right:hover .popover-container { - transform: translate(0, -50%) scale(1); -} - -.popover.popover-bottom .popover-container { - left: 50%; - top: 100%; -} - -.popover.popover-bottom *:focus + .popover-container, -.popover.popover-bottom:hover .popover-container { - transform: translate(-50%, 0) scale(1); -} - -.popover.popover-left .popover-container { - left: 0; - top: 50%; -} - -.popover.popover-left *:focus + .popover-container, -.popover.popover-left:hover .popover-container { - transform: translate(-100%, -50%) scale(1); -} - -.popover .card { - border: 0; - box-shadow: 0 .2rem .5rem rgba(48, 55, 66, .3); -} - -.step { - display: -ms-flexbox; - display: flex; - -ms-flex-wrap: nowrap; - flex-wrap: nowrap; - list-style: none; - margin: .2rem 0; - width: 100%; -} - -.step .step-item { - -ms-flex: 1 1 0; - flex: 1 1 0; - margin-top: 0; - min-height: 1rem; - position: relative; - text-align: center; -} - -.step .step-item:not(:first-child)::before { - background: #5755d9; - content: ""; - height: 2px; - left: -50%; - position: absolute; - top: 9px; - width: 100%; -} - -.step .step-item a { - color: #5755d9; - display: inline-block; - padding: 20px 10px 0; - text-decoration: none; -} - -.step .step-item a::before { - background: #5755d9; - border: .1rem solid #fff; - border-radius: 50%; - content: ""; - display: block; - height: .6rem; - left: 50%; - position: absolute; - top: .2rem; - transform: translateX(-50%); - width: .6rem; - z-index: 1; -} - -.step .step-item.active a::before { - background: #fff; - border: .1rem solid #5755d9; -} - -.step .step-item.active ~ .step-item::before { - background: #dadee4; -} - -.step .step-item.active ~ .step-item a { - color: #bcc3ce; -} - -.step .step-item.active ~ .step-item a::before { - background: #dadee4; -} - -.tab { - align-items: center; - border-bottom: .05rem solid #dadee4; - display: -ms-flexbox; - display: flex; - -ms-flex-align: center; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - list-style: none; - margin: .2rem 0 .15rem 0; -} - -.tab .tab-item { - margin-top: 0; -} - -.tab .tab-item a { - border-bottom: .1rem solid transparent; - color: inherit; - display: block; - margin: 0 .4rem 0 0; - padding: .4rem .2rem .3rem .2rem; - text-decoration: none; -} - -.tab .tab-item a:focus, -.tab .tab-item a:hover { - color: #5755d9; -} - -.tab .tab-item.active a, -.tab .tab-item a.active { - border-bottom-color: #5755d9; - color: #5755d9; -} - -.tab .tab-item.tab-action { - -ms-flex: 1 0 auto; - flex: 1 0 auto; - text-align: right; -} - -.tab .tab-item .btn-clear { - margin-top: -.2rem; -} - -.tab.tab-block .tab-item { - -ms-flex: 1 0 0; - flex: 1 0 0; - text-align: center; -} - -.tab.tab-block .tab-item a { - margin: 0; -} - -.tab.tab-block .tab-item .badge[data-badge]::after { - position: absolute; - right: .1rem; - top: .1rem; - transform: translate(0, 0); -} - -.tab:not(.tab-block) .badge { - padding-right: 0; -} - -.tile { - align-content: space-between; - align-items: flex-start; - display: -ms-flexbox; - display: flex; - -ms-flex-align: start; - -ms-flex-line-pack: justify; -} - -.tile .tile-icon, -.tile .tile-action { - -ms-flex: 0 0 auto; - flex: 0 0 auto; -} - -.tile .tile-content { - -ms-flex: 1 1 auto; - flex: 1 1 auto; -} - -.tile .tile-content:not(:first-child) { - padding-left: .4rem; -} - -.tile .tile-content:not(:last-child) { - padding-right: .4rem; -} - -.tile .tile-title, -.tile .tile-subtitle { - line-height: 1.2rem; -} - -.tile.tile-centered { - align-items: center; - -ms-flex-align: center; -} - -.tile.tile-centered .tile-content { - overflow: hidden; -} - -.tile.tile-centered .tile-title, -.tile.tile-centered .tile-subtitle { - margin-bottom: 0; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.toast { - background: rgba(48, 55, 66, .95); - border: .05rem solid #303742; - border-color: #303742; - border-radius: .1rem; - color: #fff; - display: block; - padding: .4rem; - width: 100%; -} - -.toast.toast-primary { - background: rgba(87, 85, 217, .95); - border-color: #5755d9; -} - -.toast.toast-success { - background: rgba(50, 182, 67, .95); - border-color: #32b643; -} - -.toast.toast-warning { - background: rgba(255, 183, 0, .95); - border-color: #ffb700; -} - -.toast.toast-error { - background: rgba(232, 86, 0, .95); - border-color: #e85600; -} - -.toast a { - color: #fff; - text-decoration: underline; -} - -.toast a:focus, -.toast a:hover, -.toast a:active, -.toast a.active { - opacity: .75; -} - -.toast .btn-clear { - margin: .1rem; -} - -.toast p:last-child { - margin-bottom: 0; -} - -.tooltip { - position: relative; -} - -.tooltip::after { - background: rgba(48, 55, 66, .95); - border-radius: .1rem; - bottom: 100%; - color: #fff; - content: attr(data-tooltip); - display: block; - font-size: .7rem; - left: 50%; - max-width: 320px; - opacity: 0; - overflow: hidden; - padding: .2rem .4rem; - pointer-events: none; - position: absolute; - text-overflow: ellipsis; - transform: translate(-50%, .4rem); - transition: opacity .2s, transform .2s; - white-space: pre; - z-index: 300; -} - -.tooltip:focus::after, -.tooltip:hover::after { - opacity: 1; - transform: translate(-50%, -.2rem); -} - -.tooltip[disabled], -.tooltip.disabled { - pointer-events: auto; -} - -.tooltip.tooltip-right::after { - bottom: 50%; - left: 100%; - transform: translate(-.2rem, 50%); -} - -.tooltip.tooltip-right:focus::after, -.tooltip.tooltip-right:hover::after { - transform: translate(.2rem, 50%); -} - -.tooltip.tooltip-bottom::after { - bottom: auto; - top: 100%; - transform: translate(-50%, -.4rem); -} - -.tooltip.tooltip-bottom:focus::after, -.tooltip.tooltip-bottom:hover::after { - transform: translate(-50%, .2rem); -} - -.tooltip.tooltip-left::after { - bottom: 50%; - left: auto; - right: 100%; - transform: translate(.4rem, 50%); -} - -.tooltip.tooltip-left:focus::after, -.tooltip.tooltip-left:hover::after { - transform: translate(-.2rem, 50%); -} - -@keyframes loading { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(360deg); - } -} - -@keyframes slide-down { - 0% { - opacity: 0; - transform: translateY(-1.6rem); - } - 100% { - opacity: 1; - transform: translateY(0); - } -} - -.text-primary { - color: #5755d9 !important; -} - -a.text-primary:focus, -a.text-primary:hover { - color: #4240d4; -} - -a.text-primary:visited { - color: #6c6ade; -} - -.text-secondary { - color: #e5e5f9 !important; -} - -a.text-secondary:focus, -a.text-secondary:hover { - color: #d1d0f4; -} - -a.text-secondary:visited { - color: #fafafe; -} - -.text-gray { - color: #bcc3ce !important; -} - -a.text-gray:focus, -a.text-gray:hover { - color: #adb6c4; -} - -a.text-gray:visited { - color: #cbd0d9; -} - -.text-light { - color: #fff !important; -} - -a.text-light:focus, -a.text-light:hover { - color: #f2f2f2; -} - -a.text-light:visited { - color: white; -} - -.text-dark { - color: #3b4351 !important; -} - -a.text-dark:focus, -a.text-dark:hover { - color: #303742; -} - -a.text-dark:visited { - color: #455060; -} - -.text-success { - color: #32b643 !important; -} - -a.text-success:focus, -a.text-success:hover { - color: #2da23c; -} - -a.text-success:visited { - color: #39c94b; -} - -.text-warning { - color: #ffb700 !important; -} - -a.text-warning:focus, -a.text-warning:hover { - color: #e6a500; -} - -a.text-warning:visited { - color: #ffbe1a; -} - -.text-error { - color: #e85600 !important; -} - -a.text-error:focus, -a.text-error:hover { - color: #cf4d00; -} - -a.text-error:visited { - color: #ff6003; -} - -.bg-primary { - background: #5755d9 !important; - color: #fff; -} - -.bg-secondary { - background: #f1f1fc !important; -} - -.bg-dark { - background: #303742 !important; - color: #fff; -} - -.bg-gray { - background: #f7f8f9 !important; -} - -.bg-success { - background: #32b643 !important; - color: #fff; -} - -.bg-warning { - background: #ffb700 !important; - color: #fff; -} - -.bg-error { - background: #e85600 !important; - color: #fff; -} - -.c-hand { - cursor: pointer; -} - -.c-move { - cursor: move; -} - -.c-zoom-in { - cursor: zoom-in; -} - -.c-zoom-out { - cursor: zoom-out; -} - -.c-not-allowed { - cursor: not-allowed; -} - -.c-auto { - cursor: auto; -} - -.d-block { - display: block; -} - -.d-inline { - display: inline; -} - -.d-inline-block { - display: inline-block; -} - -.d-flex { - display: -ms-flexbox; - display: flex; -} - -.d-inline-flex { - display: -ms-inline-flexbox; - display: inline-flex; -} - -.d-none, -.d-hide { - display: none !important; -} - -.d-visible { - visibility: visible; -} - -.d-invisible { - visibility: hidden; -} - -.text-hide { - background: transparent; - border: 0; - color: transparent; - font-size: 0; - line-height: 0; - text-shadow: none; -} - -.text-assistive { - border: 0; - clip: rect(0, 0, 0, 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px; -} - -.divider, -.divider-vert { - display: block; - position: relative; -} - -.divider[data-content]::after, -.divider-vert[data-content]::after { - background: #fff; - color: #bcc3ce; - content: attr(data-content); - display: inline-block; - font-size: .7rem; - padding: 0 .4rem; - transform: translateY(-.65rem); -} - -.divider { - border-top: .05rem solid #f1f3f5; - height: .05rem; - margin: .4rem 0; -} - -.divider[data-content] { - margin: .8rem 0; -} - -.divider-vert { - display: block; - padding: .8rem; -} - -.divider-vert::before { - border-left: .05rem solid #dadee4; - bottom: .4rem; - content: ""; - display: block; - left: 50%; - position: absolute; - top: .4rem; - transform: translateX(-50%); -} - -.divider-vert[data-content]::after { - left: 50%; - padding: .2rem 0; - position: absolute; - top: 50%; - transform: translate(-50%, -50%); -} - -.loading { - color: transparent !important; - min-height: .8rem; - pointer-events: none; - position: relative; -} - -.loading::after { - animation: loading 500ms infinite linear; - background: transparent; - border: .1rem solid #5755d9; - border-radius: 50%; - border-right-color: transparent; - border-top-color: transparent; - content: ""; - display: block; - height: .8rem; - left: 50%; - margin-left: -.4rem; - margin-top: -.4rem; - opacity: 1; - padding: 0; - position: absolute; - top: 50%; - width: .8rem; - z-index: 1; -} - -.loading.loading-lg { - min-height: 2rem; -} - -.loading.loading-lg::after { - height: 1.6rem; - margin-left: -.8rem; - margin-top: -.8rem; - width: 1.6rem; -} - -.clearfix::after { - clear: both; - content: ""; - display: table; -} - -.float-left { - float: left !important; -} - -.float-right { - float: right !important; -} - -.p-relative { - position: relative !important; -} - -.p-absolute { - position: absolute !important; -} - -.p-fixed { - position: fixed !important; -} - -.p-sticky { - position: -webkit-sticky !important; - position: sticky !important; -} - -.p-centered { - display: block; - float: none; - margin-left: auto; - margin-right: auto; -} - -.flex-centered { - align-items: center; - display: -ms-flexbox; - display: flex; - -ms-flex-align: center; - -ms-flex-pack: center; - justify-content: center; -} - -.m-0 { - margin: 0 !important; -} - -.mb-0 { - margin-bottom: 0 !important; -} - -.ml-0 { - margin-left: 0 !important; -} - -.mr-0 { - margin-right: 0 !important; -} - -.mt-0 { - margin-top: 0 !important; -} - -.mx-0 { - margin-left: 0 !important; - margin-right: 0 !important; -} - -.my-0 { - margin-bottom: 0 !important; - margin-top: 0 !important; -} - -.m-1 { - margin: .2rem !important; -} - -.mb-1 { - margin-bottom: .2rem !important; -} - -.ml-1 { - margin-left: .2rem !important; -} - -.mr-1 { - margin-right: .2rem !important; -} - -.mt-1 { - margin-top: .2rem !important; -} - -.mx-1 { - margin-left: .2rem !important; - margin-right: .2rem !important; -} - -.my-1 { - margin-bottom: .2rem !important; - margin-top: .2rem !important; -} - -.m-2 { - margin: .4rem !important; -} - -.mb-2 { - margin-bottom: .4rem !important; -} - -.ml-2 { - margin-left: .4rem !important; -} - -.mr-2 { - margin-right: .4rem !important; -} - -.mt-2 { - margin-top: .4rem !important; -} - -.mx-2 { - margin-left: .4rem !important; - margin-right: .4rem !important; -} - -.my-2 { - margin-bottom: .4rem !important; - margin-top: .4rem !important; -} - -.p-0 { - padding: 0 !important; -} - -.pb-0 { - padding-bottom: 0 !important; -} - -.pl-0 { - padding-left: 0 !important; -} - -.pr-0 { - padding-right: 0 !important; -} - -.pt-0 { - padding-top: 0 !important; -} - -.px-0 { - padding-left: 0 !important; - padding-right: 0 !important; -} - -.py-0 { - padding-bottom: 0 !important; - padding-top: 0 !important; -} - -.p-1 { - padding: .2rem !important; -} - -.pb-1 { - padding-bottom: .2rem !important; -} - -.pl-1 { - padding-left: .2rem !important; -} - -.pr-1 { - padding-right: .2rem !important; -} - -.pt-1 { - padding-top: .2rem !important; -} - -.px-1 { - padding-left: .2rem !important; - padding-right: .2rem !important; -} - -.py-1 { - padding-bottom: .2rem !important; - padding-top: .2rem !important; -} - -.p-2 { - padding: .4rem !important; -} - -.pb-2 { - padding-bottom: .4rem !important; -} - -.pl-2 { - padding-left: .4rem !important; -} - -.pr-2 { - padding-right: .4rem !important; -} - -.pt-2 { - padding-top: .4rem !important; -} - -.px-2 { - padding-left: .4rem !important; - padding-right: .4rem !important; -} - -.py-2 { - padding-bottom: .4rem !important; - padding-top: .4rem !important; -} - -.s-rounded { - border-radius: .1rem; -} - -.s-circle { - border-radius: 50%; -} - -.text-left { - text-align: left; -} - -.text-right { - text-align: right; -} - -.text-center { - text-align: center; -} - -.text-justify { - text-align: justify; -} - -.text-lowercase { - text-transform: lowercase; -} - -.text-uppercase { - text-transform: uppercase; -} - -.text-capitalize { - text-transform: capitalize; -} - -.text-normal { - font-weight: normal; -} - -.text-bold { - font-weight: bold; -} - -.text-italic { - font-style: italic; -} - -.text-large { - font-size: 1.2em; -} - -.text-small { - font-size: .9em; -} - -.text-tiny { - font-size: .8em; -} - -.text-muted { - opacity: .8; -} - -.text-ellipsis { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.text-clip { - overflow: hidden; - text-overflow: clip; - white-space: nowrap; -} - -.text-break { - -webkit-hyphens: auto; - -ms-hyphens: auto; - hyphens: auto; - word-break: break-word; - word-wrap: break-word; -} \ No newline at end of file diff --git a/Start/Client/wwwroot/css/spectre/spectre.min.css b/Start/Client/wwwroot/css/spectre/spectre.min.css deleted file mode 100644 index 0fe23d9..0000000 --- a/Start/Client/wwwroot/css/spectre/spectre.min.css +++ /dev/null @@ -1 +0,0 @@ -/*! Spectre.css v0.5.9 | MIT License | github.com/picturepan2/spectre */html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}hr{box-sizing:content-box;height:0;overflow:visible}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}address{font-style:normal}b,strong{font-weight:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:"SF Mono","Segoe UI Mono","Roboto Mono",Menlo,Courier,monospace;font-size:1em}dfn{font-style:italic}small{font-size:80%;font-weight:400}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}fieldset{border:0;margin:0;padding:0}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item;outline:0}canvas{display:inline-block}template{display:none}[hidden]{display:none}*,::after,::before{box-sizing:inherit}html{box-sizing:border-box;font-size:20px;line-height:1.5;-webkit-tap-highlight-color:transparent}body{background:#fff;color:#3b4351;font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;font-size:.8rem;overflow-x:hidden;text-rendering:optimizeLegibility}a{color:#5755d9;outline:0;text-decoration:none}a:focus{box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}a.active,a:active,a:focus,a:hover{color:#302ecd;text-decoration:underline}a:visited{color:#807fe2}h1,h2,h3,h4,h5,h6{color:inherit;font-weight:500;line-height:1.2;margin-bottom:.5em;margin-top:0}.h1,.h2,.h3,.h4,.h5,.h6{font-weight:500}.h1,h1{font-size:2rem}.h2,h2{font-size:1.6rem}.h3,h3{font-size:1.4rem}.h4,h4{font-size:1.2rem}.h5,h5{font-size:1rem}.h6,h6{font-size:.8rem}p{margin:0 0 1.2rem}a,ins,u{-webkit-text-decoration-skip:ink edges;text-decoration-skip:ink edges}abbr[title]{border-bottom:.05rem dotted;cursor:help;text-decoration:none}kbd{background:#303742;border-radius:.1rem;color:#fff;font-size:.7rem;line-height:1.25;padding:.1rem .2rem}mark{background:#ffe9b3;border-bottom:.05rem solid #ffd367;border-radius:.1rem;color:#3b4351;padding:.05rem .1rem 0}blockquote{border-left:.1rem solid #dadee4;margin-left:0;padding:.4rem .8rem}blockquote p:last-child{margin-bottom:0}ol,ul{margin:.8rem 0 .8rem .8rem;padding:0}ol ol,ol ul,ul ol,ul ul{margin:.8rem 0 .8rem .8rem}ol li,ul li{margin-top:.4rem}ul{list-style:disc inside}ul ul{list-style-type:circle}ol{list-style:decimal inside}ol ol{list-style-type:lower-alpha}dl dt{font-weight:700}dl dd{margin:.4rem 0 .8rem 0}.lang-zh,.lang-zh-hans,html:lang(zh),html:lang(zh-Hans){font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",sans-serif}.lang-zh-hant,html:lang(zh-Hant){font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang TC","Hiragino Sans CNS","Microsoft JhengHei","Helvetica Neue",sans-serif}.lang-ja,html:lang(ja){font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Hiragino Sans","Hiragino Kaku Gothic Pro","Yu Gothic",YuGothic,Meiryo,"Helvetica Neue",sans-serif}.lang-ko,html:lang(ko){font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Malgun Gothic","Helvetica Neue",sans-serif}.lang-cjk ins,.lang-cjk u,:lang(ja) ins,:lang(ja) u,:lang(zh) ins,:lang(zh) u{border-bottom:.05rem solid;text-decoration:none}.lang-cjk del+del,.lang-cjk del+s,.lang-cjk ins+ins,.lang-cjk ins+u,.lang-cjk s+del,.lang-cjk s+s,.lang-cjk u+ins,.lang-cjk u+u,:lang(ja) del+del,:lang(ja) del+s,:lang(ja) ins+ins,:lang(ja) ins+u,:lang(ja) s+del,:lang(ja) s+s,:lang(ja) u+ins,:lang(ja) u+u,:lang(zh) del+del,:lang(zh) del+s,:lang(zh) ins+ins,:lang(zh) ins+u,:lang(zh) s+del,:lang(zh) s+s,:lang(zh) u+ins,:lang(zh) u+u{margin-left:.125em}.table{border-collapse:collapse;border-spacing:0;text-align:left;width:100%}.table.table-striped tbody tr:nth-of-type(odd){background:#f7f8f9}.table tbody tr.active,.table.table-striped tbody tr.active{background:#eef0f3}.table.table-hover tbody tr:hover{background:#eef0f3}.table.table-scroll{display:block;overflow-x:auto;padding-bottom:.75rem;white-space:nowrap}.table td,.table th{border-bottom:.05rem solid #dadee4;padding:.6rem .4rem}.table th{border-bottom-width:.1rem}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#fff;border:.05rem solid #5755d9;border-radius:.1rem;color:#5755d9;cursor:pointer;display:inline-block;font-size:.8rem;height:1.8rem;line-height:1.2rem;outline:0;padding:.25rem .4rem;text-align:center;text-decoration:none;transition:background .2s,border .2s,box-shadow .2s,color .2s;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap}.btn:focus{box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.btn:focus,.btn:hover{background:#f1f1fc;border-color:#4b48d6;text-decoration:none}.btn.active,.btn:active{background:#4b48d6;border-color:#3634d2;color:#fff;text-decoration:none}.btn.active.loading::after,.btn:active.loading::after{border-bottom-color:#fff;border-left-color:#fff}.btn.disabled,.btn:disabled,.btn[disabled]{cursor:default;opacity:.5;pointer-events:none}.btn.btn-primary{background:#5755d9;border-color:#4b48d6;color:#fff}.btn.btn-primary:focus,.btn.btn-primary:hover{background:#4240d4;border-color:#3634d2;color:#fff}.btn.btn-primary.active,.btn.btn-primary:active{background:#3a38d2;border-color:#302ecd;color:#fff}.btn.btn-primary.loading::after{border-bottom-color:#fff;border-left-color:#fff}.btn.btn-success{background:#32b643;border-color:#2faa3f;color:#fff}.btn.btn-success:focus{box-shadow:0 0 0 .1rem rgba(50,182,67,.2)}.btn.btn-success:focus,.btn.btn-success:hover{background:#30ae40;border-color:#2da23c;color:#fff}.btn.btn-success.active,.btn.btn-success:active{background:#2a9a39;border-color:#278e34;color:#fff}.btn.btn-success.loading::after{border-bottom-color:#fff;border-left-color:#fff}.btn.btn-error{background:#e85600;border-color:#d95000;color:#fff}.btn.btn-error:focus{box-shadow:0 0 0 .1rem rgba(232,86,0,.2)}.btn.btn-error:focus,.btn.btn-error:hover{background:#de5200;border-color:#cf4d00;color:#fff}.btn.btn-error.active,.btn.btn-error:active{background:#c44900;border-color:#b54300;color:#fff}.btn.btn-error.loading::after{border-bottom-color:#fff;border-left-color:#fff}.btn.btn-link{background:0 0;border-color:transparent;color:#5755d9}.btn.btn-link.active,.btn.btn-link:active,.btn.btn-link:focus,.btn.btn-link:hover{color:#302ecd}.btn.btn-sm{font-size:.7rem;height:1.4rem;padding:.05rem .3rem}.btn.btn-lg{font-size:.9rem;height:2rem;padding:.35rem .6rem}.btn.btn-block{display:block;width:100%}.btn.btn-action{padding-left:0;padding-right:0;width:1.8rem}.btn.btn-action.btn-sm{width:1.4rem}.btn.btn-action.btn-lg{width:2rem}.btn.btn-clear{background:0 0;border:0;color:currentColor;height:1rem;line-height:.8rem;margin-left:.2rem;margin-right:-2px;opacity:1;padding:.1rem;text-decoration:none;width:1rem}.btn.btn-clear:focus,.btn.btn-clear:hover{background:rgba(247,248,249,.5);opacity:.95}.btn.btn-clear::before{content:"\2715"}.btn-group{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.btn-group .btn{-ms-flex:1 0 auto;flex:1 0 auto}.btn-group .btn:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.btn-group .btn:not(:first-child):not(:last-child){border-radius:0;margin-left:-.05rem}.btn-group .btn:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0;margin-left:-.05rem}.btn-group .btn.active,.btn-group .btn:active,.btn-group .btn:focus,.btn-group .btn:hover{z-index:1}.btn-group.btn-group-block{display:-ms-flexbox;display:flex}.btn-group.btn-group-block .btn{-ms-flex:1 0 0;flex:1 0 0}.form-group:not(:last-child){margin-bottom:.4rem}fieldset{margin-bottom:.8rem}legend{font-size:.9rem;font-weight:500;margin-bottom:.8rem}.form-label{display:block;line-height:1.2rem;padding:.3rem 0}.form-label.label-sm{font-size:.7rem;padding:.1rem 0}.form-label.label-lg{font-size:.9rem;padding:.4rem 0}.form-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#fff;background-image:none;border:.05rem solid #bcc3ce;border-radius:.1rem;color:#3b4351;display:block;font-size:.8rem;height:1.8rem;line-height:1.2rem;max-width:100%;outline:0;padding:.25rem .4rem;position:relative;transition:background .2s,border .2s,box-shadow .2s,color .2s;width:100%}.form-input:focus{border-color:#5755d9;box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.form-input:-ms-input-placeholder{color:#bcc3ce}.form-input::-ms-input-placeholder{color:#bcc3ce}.form-input::placeholder{color:#bcc3ce}.form-input.input-sm{font-size:.7rem;height:1.4rem;padding:.05rem .3rem}.form-input.input-lg{font-size:.9rem;height:2rem;padding:.35rem .6rem}.form-input.input-inline{display:inline-block;vertical-align:middle;width:auto}.form-input[type=file]{height:auto}textarea.form-input,textarea.form-input.input-lg,textarea.form-input.input-sm{height:auto}.form-input-hint{color:#bcc3ce;font-size:.7rem;margin-top:.2rem}.has-success .form-input-hint,.is-success+.form-input-hint{color:#32b643}.has-error .form-input-hint,.is-error+.form-input-hint{color:#e85600}.form-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#fff;border:.05rem solid #bcc3ce;border-radius:.1rem;color:inherit;font-size:.8rem;height:1.8rem;line-height:1.2rem;outline:0;padding:.25rem .4rem;vertical-align:middle;width:100%}.form-select:focus{border-color:#5755d9;box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.form-select::-ms-expand{display:none}.form-select.select-sm{font-size:.7rem;height:1.4rem;padding:.05rem 1.1rem .05rem .3rem}.form-select.select-lg{font-size:.9rem;height:2rem;padding:.35rem 1.4rem .35rem .6rem}.form-select[multiple],.form-select[size]{height:auto;padding:.25rem .4rem}.form-select[multiple] option,.form-select[size] option{padding:.1rem .2rem}.form-select:not([multiple]):not([size]){background:#fff url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%204%205'%3E%3Cpath%20fill='%23667189'%20d='M2%200L0%202h4zm0%205L0%203h4z'/%3E%3C/svg%3E") no-repeat right .35rem center/.4rem .5rem;padding-right:1.2rem}.has-icon-left,.has-icon-right{position:relative}.has-icon-left .form-icon,.has-icon-right .form-icon{height:.8rem;margin:0 .25rem;position:absolute;top:50%;transform:translateY(-50%);width:.8rem;z-index:2}.has-icon-left .form-icon{left:.05rem}.has-icon-left .form-input{padding-left:1.3rem}.has-icon-right .form-icon{right:.05rem}.has-icon-right .form-input{padding-right:1.3rem}.form-checkbox,.form-radio,.form-switch{display:block;line-height:1.2rem;margin:.2rem 0;min-height:1.4rem;padding:.1rem .4rem .1rem 1.2rem;position:relative}.form-checkbox input,.form-radio input,.form-switch input{clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;position:absolute;width:1px}.form-checkbox input:focus+.form-icon,.form-radio input:focus+.form-icon,.form-switch input:focus+.form-icon{border-color:#5755d9;box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.form-checkbox input:checked+.form-icon,.form-radio input:checked+.form-icon,.form-switch input:checked+.form-icon{background:#5755d9;border-color:#5755d9}.form-checkbox .form-icon,.form-radio .form-icon,.form-switch .form-icon{border:.05rem solid #bcc3ce;cursor:pointer;display:inline-block;position:absolute;transition:background .2s,border .2s,box-shadow .2s,color .2s}.form-checkbox.input-sm,.form-radio.input-sm,.form-switch.input-sm{font-size:.7rem;margin:0}.form-checkbox.input-lg,.form-radio.input-lg,.form-switch.input-lg{font-size:.9rem;margin:.3rem 0}.form-checkbox .form-icon,.form-radio .form-icon{background:#fff;height:.8rem;left:0;top:.3rem;width:.8rem}.form-checkbox input:active+.form-icon,.form-radio input:active+.form-icon{background:#eef0f3}.form-checkbox .form-icon{border-radius:.1rem}.form-checkbox input:checked+.form-icon::before{background-clip:padding-box;border:.1rem solid #fff;border-left-width:0;border-top-width:0;content:"";height:9px;left:50%;margin-left:-3px;margin-top:-6px;position:absolute;top:50%;transform:rotate(45deg);width:6px}.form-checkbox input:indeterminate+.form-icon{background:#5755d9;border-color:#5755d9}.form-checkbox input:indeterminate+.form-icon::before{background:#fff;content:"";height:2px;left:50%;margin-left:-5px;margin-top:-1px;position:absolute;top:50%;width:10px}.form-radio .form-icon{border-radius:50%}.form-radio input:checked+.form-icon::before{background:#fff;border-radius:50%;content:"";height:6px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:6px}.form-switch{padding-left:2rem}.form-switch .form-icon{background:#bcc3ce;background-clip:padding-box;border-radius:.45rem;height:.9rem;left:0;top:.25rem;width:1.6rem}.form-switch .form-icon::before{background:#fff;border-radius:50%;content:"";display:block;height:.8rem;left:0;position:absolute;top:0;transition:background .2s,border .2s,box-shadow .2s,color .2s,left .2s;width:.8rem}.form-switch input:checked+.form-icon::before{left:14px}.form-switch input:active+.form-icon::before{background:#f7f8f9}.input-group{display:-ms-flexbox;display:flex}.input-group .input-group-addon{background:#f7f8f9;border:.05rem solid #bcc3ce;border-radius:.1rem;line-height:1.2rem;padding:.25rem .4rem;white-space:nowrap}.input-group .input-group-addon.addon-sm{font-size:.7rem;padding:.05rem .3rem}.input-group .input-group-addon.addon-lg{font-size:.9rem;padding:.35rem .6rem}.input-group .form-input,.input-group .form-select{-ms-flex:1 1 auto;flex:1 1 auto;width:1%}.input-group .input-group-btn{z-index:1}.input-group .form-input:first-child:not(:last-child),.input-group .form-select:first-child:not(:last-child),.input-group .input-group-addon:first-child:not(:last-child),.input-group .input-group-btn:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.input-group .form-input:not(:first-child):not(:last-child),.input-group .form-select:not(:first-child):not(:last-child),.input-group .input-group-addon:not(:first-child):not(:last-child),.input-group .input-group-btn:not(:first-child):not(:last-child){border-radius:0;margin-left:-.05rem}.input-group .form-input:last-child:not(:first-child),.input-group .form-select:last-child:not(:first-child),.input-group .input-group-addon:last-child:not(:first-child),.input-group .input-group-btn:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0;margin-left:-.05rem}.input-group .form-input:focus,.input-group .form-select:focus,.input-group .input-group-addon:focus,.input-group .input-group-btn:focus{z-index:2}.input-group .form-select{width:auto}.input-group.input-inline{display:-ms-inline-flexbox;display:inline-flex}.form-input.is-success,.form-select.is-success,.has-success .form-input,.has-success .form-select{background:#f9fdfa;border-color:#32b643}.form-input.is-success:focus,.form-select.is-success:focus,.has-success .form-input:focus,.has-success .form-select:focus{box-shadow:0 0 0 .1rem rgba(50,182,67,.2)}.form-input.is-error,.form-select.is-error,.has-error .form-input,.has-error .form-select{background:#fffaf7;border-color:#e85600}.form-input.is-error:focus,.form-select.is-error:focus,.has-error .form-input:focus,.has-error .form-select:focus{box-shadow:0 0 0 .1rem rgba(232,86,0,.2)}.form-checkbox.is-error .form-icon,.form-radio.is-error .form-icon,.form-switch.is-error .form-icon,.has-error .form-checkbox .form-icon,.has-error .form-radio .form-icon,.has-error .form-switch .form-icon{border-color:#e85600}.form-checkbox.is-error input:checked+.form-icon,.form-radio.is-error input:checked+.form-icon,.form-switch.is-error input:checked+.form-icon,.has-error .form-checkbox input:checked+.form-icon,.has-error .form-radio input:checked+.form-icon,.has-error .form-switch input:checked+.form-icon{background:#e85600;border-color:#e85600}.form-checkbox.is-error input:focus+.form-icon,.form-radio.is-error input:focus+.form-icon,.form-switch.is-error input:focus+.form-icon,.has-error .form-checkbox input:focus+.form-icon,.has-error .form-radio input:focus+.form-icon,.has-error .form-switch input:focus+.form-icon{border-color:#e85600;box-shadow:0 0 0 .1rem rgba(232,86,0,.2)}.form-checkbox.is-error input:indeterminate+.form-icon,.has-error .form-checkbox input:indeterminate+.form-icon{background:#e85600;border-color:#e85600}.form-input:not(:-ms-input-placeholder):invalid{border-color:#e85600}.form-input:not(:placeholder-shown):invalid{border-color:#e85600}.form-input:not(:-ms-input-placeholder):invalid:focus{background:#fffaf7;box-shadow:0 0 0 .1rem rgba(232,86,0,.2)}.form-input:not(:placeholder-shown):invalid:focus{background:#fffaf7;box-shadow:0 0 0 .1rem rgba(232,86,0,.2)}.form-input:not(:-ms-input-placeholder):invalid+.form-input-hint{color:#e85600}.form-input:not(:placeholder-shown):invalid+.form-input-hint{color:#e85600}.form-input.disabled,.form-input:disabled,.form-select.disabled,.form-select:disabled{background-color:#eef0f3;cursor:not-allowed;opacity:.5}.form-input[readonly]{background-color:#f7f8f9}input.disabled+.form-icon,input:disabled+.form-icon{background:#eef0f3;cursor:not-allowed;opacity:.5}.form-switch input.disabled+.form-icon::before,.form-switch input:disabled+.form-icon::before{background:#fff}.form-horizontal{padding:.4rem 0}.form-horizontal .form-group{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.form-inline{display:inline-block}.label{background:#eef0f3;border-radius:.1rem;color:#455060;display:inline-block;line-height:1.25;padding:.1rem .2rem}.label.label-rounded{border-radius:5rem;padding-left:.4rem;padding-right:.4rem}.label.label-primary{background:#5755d9;color:#fff}.label.label-secondary{background:#f1f1fc;color:#5755d9}.label.label-success{background:#32b643;color:#fff}.label.label-warning{background:#ffb700;color:#fff}.label.label-error{background:#e85600;color:#fff}code{background:#fcf2f2;border-radius:.1rem;color:#d73e48;font-size:85%;line-height:1.25;padding:.1rem .2rem}.code{border-radius:.1rem;color:#3b4351;position:relative}.code::before{color:#bcc3ce;content:attr(data-lang);font-size:.7rem;position:absolute;right:.4rem;top:.1rem}.code code{background:#f7f8f9;color:inherit;display:block;line-height:1.5;overflow-x:auto;padding:1rem;width:100%}.img-responsive{display:block;height:auto;max-width:100%}.img-fit-cover{object-fit:cover}.img-fit-contain{object-fit:contain}.video-responsive{display:block;overflow:hidden;padding:0;position:relative;width:100%}.video-responsive::before{content:"";display:block;padding-bottom:56.25%}.video-responsive embed,.video-responsive iframe,.video-responsive object{border:0;bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%}video.video-responsive{height:auto;max-width:100%}video.video-responsive::before{content:none}.video-responsive-4-3::before{padding-bottom:75%}.video-responsive-1-1::before{padding-bottom:100%}.figure{margin:0 0 .4rem 0}.figure .figure-caption{color:#66758c;margin-top:.4rem}.container{margin-left:auto;margin-right:auto;padding-left:.4rem;padding-right:.4rem;width:100%}.container.grid-xl{max-width:1296px}.container.grid-lg{max-width:976px}.container.grid-md{max-width:856px}.container.grid-sm{max-width:616px}.container.grid-xs{max-width:496px}.show-lg,.show-md,.show-sm,.show-xl,.show-xs{display:none!important}.cols,.columns{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-left:-.4rem;margin-right:-.4rem}.cols.col-gapless,.columns.col-gapless{margin-left:0;margin-right:0}.cols.col-gapless>.column,.columns.col-gapless>.column{padding-left:0;padding-right:0}.cols.col-oneline,.columns.col-oneline{-ms-flex-wrap:nowrap;flex-wrap:nowrap;overflow-x:auto}.column,[class~=col-]{-ms-flex:1;flex:1;max-width:100%;padding-left:.4rem;padding-right:.4rem}.column.col-1,.column.col-10,.column.col-11,.column.col-12,.column.col-2,.column.col-3,.column.col-4,.column.col-5,.column.col-6,.column.col-7,.column.col-8,.column.col-9,.column.col-auto,[class~=col-].col-1,[class~=col-].col-10,[class~=col-].col-11,[class~=col-].col-12,[class~=col-].col-2,[class~=col-].col-3,[class~=col-].col-4,[class~=col-].col-5,[class~=col-].col-6,[class~=col-].col-7,[class~=col-].col-8,[class~=col-].col-9,[class~=col-].col-auto{-ms-flex:none;flex:none}.col-12{width:100%}.col-11{width:91.66666667%}.col-10{width:83.33333333%}.col-9{width:75%}.col-8{width:66.66666667%}.col-7{width:58.33333333%}.col-6{width:50%}.col-5{width:41.66666667%}.col-4{width:33.33333333%}.col-3{width:25%}.col-2{width:16.66666667%}.col-1{width:8.33333333%}.col-auto{-ms-flex:0 0 auto;flex:0 0 auto;max-width:none;width:auto}.col-mx-auto{margin-left:auto;margin-right:auto}.col-ml-auto{margin-left:auto}.col-mr-auto{margin-right:auto}@media (max-width:1280px){.col-xl-1,.col-xl-10,.col-xl-11,.col-xl-12,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9,.col-xl-auto{-ms-flex:none;flex:none}.col-xl-12{width:100%}.col-xl-11{width:91.66666667%}.col-xl-10{width:83.33333333%}.col-xl-9{width:75%}.col-xl-8{width:66.66666667%}.col-xl-7{width:58.33333333%}.col-xl-6{width:50%}.col-xl-5{width:41.66666667%}.col-xl-4{width:33.33333333%}.col-xl-3{width:25%}.col-xl-2{width:16.66666667%}.col-xl-1{width:8.33333333%}.col-xl-auto{width:auto}.hide-xl{display:none!important}.show-xl{display:block!important}}@media (max-width:960px){.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-auto{-ms-flex:none;flex:none}.col-lg-12{width:100%}.col-lg-11{width:91.66666667%}.col-lg-10{width:83.33333333%}.col-lg-9{width:75%}.col-lg-8{width:66.66666667%}.col-lg-7{width:58.33333333%}.col-lg-6{width:50%}.col-lg-5{width:41.66666667%}.col-lg-4{width:33.33333333%}.col-lg-3{width:25%}.col-lg-2{width:16.66666667%}.col-lg-1{width:8.33333333%}.col-lg-auto{width:auto}.hide-lg{display:none!important}.show-lg{display:block!important}}@media (max-width:840px){.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-auto{-ms-flex:none;flex:none}.col-md-12{width:100%}.col-md-11{width:91.66666667%}.col-md-10{width:83.33333333%}.col-md-9{width:75%}.col-md-8{width:66.66666667%}.col-md-7{width:58.33333333%}.col-md-6{width:50%}.col-md-5{width:41.66666667%}.col-md-4{width:33.33333333%}.col-md-3{width:25%}.col-md-2{width:16.66666667%}.col-md-1{width:8.33333333%}.col-md-auto{width:auto}.hide-md{display:none!important}.show-md{display:block!important}}@media (max-width:600px){.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-auto{-ms-flex:none;flex:none}.col-sm-12{width:100%}.col-sm-11{width:91.66666667%}.col-sm-10{width:83.33333333%}.col-sm-9{width:75%}.col-sm-8{width:66.66666667%}.col-sm-7{width:58.33333333%}.col-sm-6{width:50%}.col-sm-5{width:41.66666667%}.col-sm-4{width:33.33333333%}.col-sm-3{width:25%}.col-sm-2{width:16.66666667%}.col-sm-1{width:8.33333333%}.col-sm-auto{width:auto}.hide-sm{display:none!important}.show-sm{display:block!important}}@media (max-width:480px){.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9,.col-xs-auto{-ms-flex:none;flex:none}.col-xs-12{width:100%}.col-xs-11{width:91.66666667%}.col-xs-10{width:83.33333333%}.col-xs-9{width:75%}.col-xs-8{width:66.66666667%}.col-xs-7{width:58.33333333%}.col-xs-6{width:50%}.col-xs-5{width:41.66666667%}.col-xs-4{width:33.33333333%}.col-xs-3{width:25%}.col-xs-2{width:16.66666667%}.col-xs-1{width:8.33333333%}.col-xs-auto{width:auto}.hide-xs{display:none!important}.show-xs{display:block!important}}.hero{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between;padding-bottom:4rem;padding-top:4rem}.hero.hero-sm{padding-bottom:2rem;padding-top:2rem}.hero.hero-lg{padding-bottom:8rem;padding-top:8rem}.hero .hero-body{padding:.4rem}.navbar{align-items:stretch;display:-ms-flexbox;display:flex;-ms-flex-align:stretch;-ms-flex-pack:justify;-ms-flex-wrap:wrap;flex-wrap:wrap;justify-content:space-between}.navbar .navbar-section{align-items:center;display:-ms-flexbox;display:flex;-ms-flex:1 0 0;flex:1 0 0;-ms-flex-align:center}.navbar .navbar-section:not(:first-child):last-child{-ms-flex-pack:end;justify-content:flex-end}.navbar .navbar-center{align-items:center;display:-ms-flexbox;display:flex;-ms-flex:0 0 auto;flex:0 0 auto;-ms-flex-align:center}.navbar .navbar-brand{font-size:.9rem;text-decoration:none}.accordion input:checked~.accordion-header>.icon:first-child,.accordion[open] .accordion-header>.icon:first-child{transform:rotate(90deg)}.accordion input:checked~.accordion-body,.accordion[open] .accordion-body{max-height:50rem}.accordion .accordion-header{display:block;padding:.2rem .4rem}.accordion .accordion-header .icon{transition:transform .25s}.accordion .accordion-body{margin-bottom:.4rem;max-height:0;overflow:hidden;transition:max-height .25s}summary.accordion-header::-webkit-details-marker{display:none}.avatar{background:#5755d9;border-radius:50%;color:rgba(255,255,255,.85);display:inline-block;font-size:.8rem;font-weight:300;height:1.6rem;line-height:1.25;margin:0;position:relative;vertical-align:middle;width:1.6rem}.avatar.avatar-xs{font-size:.4rem;height:.8rem;width:.8rem}.avatar.avatar-sm{font-size:.6rem;height:1.2rem;width:1.2rem}.avatar.avatar-lg{font-size:1.2rem;height:2.4rem;width:2.4rem}.avatar.avatar-xl{font-size:1.6rem;height:3.2rem;width:3.2rem}.avatar img{border-radius:50%;height:100%;position:relative;width:100%;z-index:1}.avatar .avatar-icon,.avatar .avatar-presence{background:#fff;bottom:14.64%;height:50%;padding:.1rem;position:absolute;right:14.64%;transform:translate(50%,50%);width:50%;z-index:2}.avatar .avatar-presence{background:#bcc3ce;border-radius:50%;box-shadow:0 0 0 .1rem #fff;height:.5em;width:.5em}.avatar .avatar-presence.online{background:#32b643}.avatar .avatar-presence.busy{background:#e85600}.avatar .avatar-presence.away{background:#ffb700}.avatar[data-initial]::before{color:currentColor;content:attr(data-initial);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);z-index:1}.badge{position:relative;white-space:nowrap}.badge:not([data-badge])::after,.badge[data-badge]::after{background:#5755d9;background-clip:padding-box;border-radius:.5rem;box-shadow:0 0 0 .1rem #fff;color:#fff;content:attr(data-badge);display:inline-block;transform:translate(-.05rem,-.5rem)}.badge[data-badge]::after{font-size:.7rem;height:.9rem;line-height:1;min-width:.9rem;padding:.1rem .2rem;text-align:center;white-space:nowrap}.badge:not([data-badge])::after,.badge[data-badge=""]::after{height:6px;min-width:6px;padding:0;width:6px}.badge.btn::after{position:absolute;right:0;top:0;transform:translate(50%,-50%)}.badge.avatar::after{position:absolute;right:14.64%;top:14.64%;transform:translate(50%,-50%);z-index:100}.breadcrumb{list-style:none;margin:.2rem 0;padding:.2rem 0}.breadcrumb .breadcrumb-item{color:#66758c;display:inline-block;margin:0;padding:.2rem 0}.breadcrumb .breadcrumb-item:not(:last-child){margin-right:.2rem}.breadcrumb .breadcrumb-item:not(:last-child) a{color:#66758c}.breadcrumb .breadcrumb-item:not(:first-child)::before{color:#66758c;content:"/";padding-right:.4rem}.bar{background:#eef0f3;border-radius:.1rem;display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap;height:.8rem;width:100%}.bar.bar-sm{height:.2rem}.bar .bar-item{background:#5755d9;color:#fff;display:block;-ms-flex-negative:0;flex-shrink:0;font-size:.7rem;height:100%;line-height:.8rem;position:relative;text-align:center;width:0}.bar .bar-item:first-child{border-bottom-left-radius:.1rem;border-top-left-radius:.1rem}.bar .bar-item:last-child{border-bottom-right-radius:.1rem;border-top-right-radius:.1rem;-ms-flex-negative:1;flex-shrink:1}.bar-slider{height:.1rem;margin:.4rem 0;position:relative}.bar-slider .bar-item{left:0;padding:0;position:absolute}.bar-slider .bar-item:not(:last-child):first-child{background:#eef0f3;z-index:1}.bar-slider .bar-slider-btn{background:#5755d9;border:0;border-radius:50%;height:.6rem;padding:0;position:absolute;right:0;top:50%;transform:translate(50%,-50%);width:.6rem}.bar-slider .bar-slider-btn:active{box-shadow:0 0 0 .1rem #5755d9}.card{background:#fff;border:.05rem solid #dadee4;border-radius:.1rem;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.card .card-body,.card .card-footer,.card .card-header{padding:.8rem;padding-bottom:0}.card .card-body:last-child,.card .card-footer:last-child,.card .card-header:last-child{padding-bottom:.8rem}.card .card-body{-ms-flex:1 1 auto;flex:1 1 auto}.card .card-image{padding-top:.8rem}.card .card-image:first-child{padding-top:0}.card .card-image:first-child img{border-top-left-radius:.1rem;border-top-right-radius:.1rem}.card .card-image:last-child img{border-bottom-left-radius:.1rem;border-bottom-right-radius:.1rem}.chip{align-items:center;background:#eef0f3;border-radius:5rem;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;font-size:90%;height:1.2rem;line-height:.8rem;margin:.1rem;max-width:320px;overflow:hidden;padding:.2rem .4rem;text-decoration:none;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}.chip.active{background:#5755d9;color:#fff}.chip .avatar{margin-left:-.4rem;margin-right:.2rem}.chip .btn-clear{border-radius:50%;transform:scale(.75)}.dropdown{display:inline-block;position:relative}.dropdown .menu{animation:slide-down .15s ease 1;display:none;left:0;max-height:50vh;overflow-y:auto;position:absolute;top:100%}.dropdown.dropdown-right .menu{left:auto;right:0}.dropdown .dropdown-toggle:focus+.menu,.dropdown .menu:hover,.dropdown.active .menu{display:block}.dropdown .btn-group .dropdown-toggle:nth-last-child(2){border-bottom-right-radius:.1rem;border-top-right-radius:.1rem}.empty{background:#f7f8f9;border-radius:.1rem;color:#66758c;padding:3.2rem 1.6rem;text-align:center}.empty .empty-icon{margin-bottom:.8rem}.empty .empty-subtitle,.empty .empty-title{margin:.4rem auto}.empty .empty-action{margin-top:.8rem}.menu{background:#fff;border-radius:.1rem;box-shadow:0 .05rem .2rem rgba(48,55,66,.3);list-style:none;margin:0;min-width:180px;padding:.4rem;transform:translateY(.2rem);z-index:300}.menu.menu-nav{background:0 0;box-shadow:none}.menu .menu-item{margin-top:0;padding:0 .4rem;position:relative;text-decoration:none}.menu .menu-item>a{border-radius:.1rem;color:inherit;display:block;margin:0 -.4rem;padding:.2rem .4rem;text-decoration:none}.menu .menu-item>a:focus,.menu .menu-item>a:hover{background:#f1f1fc;color:#5755d9}.menu .menu-item>a.active,.menu .menu-item>a:active{background:#f1f1fc;color:#5755d9}.menu .menu-item .form-checkbox,.menu .menu-item .form-radio,.menu .menu-item .form-switch{margin:.1rem 0}.menu .menu-item+.menu-item{margin-top:.2rem}.menu .menu-badge{align-items:center;display:-ms-flexbox;display:flex;-ms-flex-align:center;height:100%;position:absolute;right:0;top:0}.menu .menu-badge .label{margin-right:.4rem}.modal{align-items:center;bottom:0;display:none;-ms-flex-align:center;-ms-flex-pack:center;justify-content:center;left:0;opacity:0;overflow:hidden;padding:.4rem;position:fixed;right:0;top:0}.modal.active,.modal:target{display:-ms-flexbox;display:flex;opacity:1;z-index:400}.modal.active .modal-overlay,.modal:target .modal-overlay{background:rgba(247,248,249,.75);bottom:0;cursor:default;display:block;left:0;position:absolute;right:0;top:0}.modal.active .modal-container,.modal:target .modal-container{animation:slide-down .2s ease 1;z-index:1}.modal.modal-sm .modal-container{max-width:320px;padding:0 .4rem}.modal.modal-lg .modal-overlay{background:#fff}.modal.modal-lg .modal-container{box-shadow:none;max-width:960px}.modal-container{background:#fff;border-radius:.1rem;box-shadow:0 .2rem .5rem rgba(48,55,66,.3);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;max-height:75vh;max-width:640px;padding:0 .8rem;width:100%}.modal-container.modal-fullheight{max-height:100vh}.modal-container .modal-header{color:#303742;padding:.8rem}.modal-container .modal-body{overflow-y:auto;padding:.8rem;position:relative}.modal-container .modal-footer{padding:.8rem;text-align:right}.nav{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;list-style:none;margin:.2rem 0}.nav .nav-item a{color:#66758c;padding:.2rem .4rem;text-decoration:none}.nav .nav-item a:focus,.nav .nav-item a:hover{color:#5755d9}.nav .nav-item.active>a{color:#505c6e;font-weight:700}.nav .nav-item.active>a:focus,.nav .nav-item.active>a:hover{color:#5755d9}.nav .nav{margin-bottom:.4rem;margin-left:.8rem}.pagination{display:-ms-flexbox;display:flex;list-style:none;margin:.2rem 0;padding:.2rem 0}.pagination .page-item{margin:.2rem .05rem}.pagination .page-item span{display:inline-block;padding:.2rem .2rem}.pagination .page-item a{border-radius:.1rem;display:inline-block;padding:.2rem .4rem;text-decoration:none}.pagination .page-item a:focus,.pagination .page-item a:hover{color:#5755d9}.pagination .page-item.disabled a{cursor:default;opacity:.5;pointer-events:none}.pagination .page-item.active a{background:#5755d9;color:#fff}.pagination .page-item.page-next,.pagination .page-item.page-prev{-ms-flex:1 0 50%;flex:1 0 50%}.pagination .page-item.page-next{text-align:right}.pagination .page-item .page-item-title{margin:0}.pagination .page-item .page-item-subtitle{margin:0;opacity:.5}.panel{border:.05rem solid #dadee4;border-radius:.1rem;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.panel .panel-footer,.panel .panel-header{-ms-flex:0 0 auto;flex:0 0 auto;padding:.8rem}.panel .panel-nav{-ms-flex:0 0 auto;flex:0 0 auto}.panel .panel-body{-ms-flex:1 1 auto;flex:1 1 auto;overflow-y:auto;padding:0 .8rem}.popover{display:inline-block;position:relative}.popover .popover-container{left:50%;opacity:0;padding:.4rem;position:absolute;top:0;transform:translate(-50%,-50%) scale(0);transition:transform .2s;width:320px;z-index:300}.popover :focus+.popover-container,.popover:hover .popover-container{display:block;opacity:1;transform:translate(-50%,-100%) scale(1)}.popover.popover-right .popover-container{left:100%;top:50%}.popover.popover-right :focus+.popover-container,.popover.popover-right:hover .popover-container{transform:translate(0,-50%) scale(1)}.popover.popover-bottom .popover-container{left:50%;top:100%}.popover.popover-bottom :focus+.popover-container,.popover.popover-bottom:hover .popover-container{transform:translate(-50%,0) scale(1)}.popover.popover-left .popover-container{left:0;top:50%}.popover.popover-left :focus+.popover-container,.popover.popover-left:hover .popover-container{transform:translate(-100%,-50%) scale(1)}.popover .card{border:0;box-shadow:0 .2rem .5rem rgba(48,55,66,.3)}.step{display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap;list-style:none;margin:.2rem 0;width:100%}.step .step-item{-ms-flex:1 1 0;flex:1 1 0;margin-top:0;min-height:1rem;position:relative;text-align:center}.step .step-item:not(:first-child)::before{background:#5755d9;content:"";height:2px;left:-50%;position:absolute;top:9px;width:100%}.step .step-item a{color:#5755d9;display:inline-block;padding:20px 10px 0;text-decoration:none}.step .step-item a::before{background:#5755d9;border:.1rem solid #fff;border-radius:50%;content:"";display:block;height:.6rem;left:50%;position:absolute;top:.2rem;transform:translateX(-50%);width:.6rem;z-index:1}.step .step-item.active a::before{background:#fff;border:.1rem solid #5755d9}.step .step-item.active~.step-item::before{background:#dadee4}.step .step-item.active~.step-item a{color:#bcc3ce}.step .step-item.active~.step-item a::before{background:#dadee4}.tab{align-items:center;border-bottom:.05rem solid #dadee4;display:-ms-flexbox;display:flex;-ms-flex-align:center;-ms-flex-wrap:wrap;flex-wrap:wrap;list-style:none;margin:.2rem 0 .15rem 0}.tab .tab-item{margin-top:0}.tab .tab-item a{border-bottom:.1rem solid transparent;color:inherit;display:block;margin:0 .4rem 0 0;padding:.4rem .2rem .3rem .2rem;text-decoration:none}.tab .tab-item a:focus,.tab .tab-item a:hover{color:#5755d9}.tab .tab-item a.active,.tab .tab-item.active a{border-bottom-color:#5755d9;color:#5755d9}.tab .tab-item.tab-action{-ms-flex:1 0 auto;flex:1 0 auto;text-align:right}.tab .tab-item .btn-clear{margin-top:-.2rem}.tab.tab-block .tab-item{-ms-flex:1 0 0;flex:1 0 0;text-align:center}.tab.tab-block .tab-item a{margin:0}.tab.tab-block .tab-item .badge[data-badge]::after{position:absolute;right:.1rem;top:.1rem;transform:translate(0,0)}.tab:not(.tab-block) .badge{padding-right:0}.tile{align-content:space-between;align-items:flex-start;display:-ms-flexbox;display:flex;-ms-flex-align:start;-ms-flex-line-pack:justify}.tile .tile-action,.tile .tile-icon{-ms-flex:0 0 auto;flex:0 0 auto}.tile .tile-content{-ms-flex:1 1 auto;flex:1 1 auto}.tile .tile-content:not(:first-child){padding-left:.4rem}.tile .tile-content:not(:last-child){padding-right:.4rem}.tile .tile-subtitle,.tile .tile-title{line-height:1.2rem}.tile.tile-centered{align-items:center;-ms-flex-align:center}.tile.tile-centered .tile-content{overflow:hidden}.tile.tile-centered .tile-subtitle,.tile.tile-centered .tile-title{margin-bottom:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.toast{background:rgba(48,55,66,.95);border:.05rem solid #303742;border-color:#303742;border-radius:.1rem;color:#fff;display:block;padding:.4rem;width:100%}.toast.toast-primary{background:rgba(87,85,217,.95);border-color:#5755d9}.toast.toast-success{background:rgba(50,182,67,.95);border-color:#32b643}.toast.toast-warning{background:rgba(255,183,0,.95);border-color:#ffb700}.toast.toast-error{background:rgba(232,86,0,.95);border-color:#e85600}.toast a{color:#fff;text-decoration:underline}.toast a.active,.toast a:active,.toast a:focus,.toast a:hover{opacity:.75}.toast .btn-clear{margin:.1rem}.toast p:last-child{margin-bottom:0}.tooltip{position:relative}.tooltip::after{background:rgba(48,55,66,.95);border-radius:.1rem;bottom:100%;color:#fff;content:attr(data-tooltip);display:block;font-size:.7rem;left:50%;max-width:320px;opacity:0;overflow:hidden;padding:.2rem .4rem;pointer-events:none;position:absolute;text-overflow:ellipsis;transform:translate(-50%,.4rem);transition:opacity .2s,transform .2s;white-space:pre;z-index:300}.tooltip:focus::after,.tooltip:hover::after{opacity:1;transform:translate(-50%,-.2rem)}.tooltip.disabled,.tooltip[disabled]{pointer-events:auto}.tooltip.tooltip-right::after{bottom:50%;left:100%;transform:translate(-.2rem,50%)}.tooltip.tooltip-right:focus::after,.tooltip.tooltip-right:hover::after{transform:translate(.2rem,50%)}.tooltip.tooltip-bottom::after{bottom:auto;top:100%;transform:translate(-50%,-.4rem)}.tooltip.tooltip-bottom:focus::after,.tooltip.tooltip-bottom:hover::after{transform:translate(-50%,.2rem)}.tooltip.tooltip-left::after{bottom:50%;left:auto;right:100%;transform:translate(.4rem,50%)}.tooltip.tooltip-left:focus::after,.tooltip.tooltip-left:hover::after{transform:translate(-.2rem,50%)}@keyframes loading{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes slide-down{0%{opacity:0;transform:translateY(-1.6rem)}100%{opacity:1;transform:translateY(0)}}.text-primary{color:#5755d9!important}a.text-primary:focus,a.text-primary:hover{color:#4240d4}a.text-primary:visited{color:#6c6ade}.text-secondary{color:#e5e5f9!important}a.text-secondary:focus,a.text-secondary:hover{color:#d1d0f4}a.text-secondary:visited{color:#fafafe}.text-gray{color:#bcc3ce!important}a.text-gray:focus,a.text-gray:hover{color:#adb6c4}a.text-gray:visited{color:#cbd0d9}.text-light{color:#fff!important}a.text-light:focus,a.text-light:hover{color:#f2f2f2}a.text-light:visited{color:#fff}.text-dark{color:#3b4351!important}a.text-dark:focus,a.text-dark:hover{color:#303742}a.text-dark:visited{color:#455060}.text-success{color:#32b643!important}a.text-success:focus,a.text-success:hover{color:#2da23c}a.text-success:visited{color:#39c94b}.text-warning{color:#ffb700!important}a.text-warning:focus,a.text-warning:hover{color:#e6a500}a.text-warning:visited{color:#ffbe1a}.text-error{color:#e85600!important}a.text-error:focus,a.text-error:hover{color:#cf4d00}a.text-error:visited{color:#ff6003}.bg-primary{background:#5755d9!important;color:#fff}.bg-secondary{background:#f1f1fc!important}.bg-dark{background:#303742!important;color:#fff}.bg-gray{background:#f7f8f9!important}.bg-success{background:#32b643!important;color:#fff}.bg-warning{background:#ffb700!important;color:#fff}.bg-error{background:#e85600!important;color:#fff}.c-hand{cursor:pointer}.c-move{cursor:move}.c-zoom-in{cursor:zoom-in}.c-zoom-out{cursor:zoom-out}.c-not-allowed{cursor:not-allowed}.c-auto{cursor:auto}.d-block{display:block}.d-inline{display:inline}.d-inline-block{display:inline-block}.d-flex{display:-ms-flexbox;display:flex}.d-inline-flex{display:-ms-inline-flexbox;display:inline-flex}.d-hide,.d-none{display:none!important}.d-visible{visibility:visible}.d-invisible{visibility:hidden}.text-hide{background:0 0;border:0;color:transparent;font-size:0;line-height:0;text-shadow:none}.text-assistive{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.divider,.divider-vert{display:block;position:relative}.divider-vert[data-content]::after,.divider[data-content]::after{background:#fff;color:#bcc3ce;content:attr(data-content);display:inline-block;font-size:.7rem;padding:0 .4rem;transform:translateY(-.65rem)}.divider{border-top:.05rem solid #f1f3f5;height:.05rem;margin:.4rem 0}.divider[data-content]{margin:.8rem 0}.divider-vert{display:block;padding:.8rem}.divider-vert::before{border-left:.05rem solid #dadee4;bottom:.4rem;content:"";display:block;left:50%;position:absolute;top:.4rem;transform:translateX(-50%)}.divider-vert[data-content]::after{left:50%;padding:.2rem 0;position:absolute;top:50%;transform:translate(-50%,-50%)}.loading{color:transparent!important;min-height:.8rem;pointer-events:none;position:relative}.loading::after{animation:loading .5s infinite linear;background:0 0;border:.1rem solid #5755d9;border-radius:50%;border-right-color:transparent;border-top-color:transparent;content:"";display:block;height:.8rem;left:50%;margin-left:-.4rem;margin-top:-.4rem;opacity:1;padding:0;position:absolute;top:50%;width:.8rem;z-index:1}.loading.loading-lg{min-height:2rem}.loading.loading-lg::after{height:1.6rem;margin-left:-.8rem;margin-top:-.8rem;width:1.6rem}.clearfix::after{clear:both;content:"";display:table}.float-left{float:left!important}.float-right{float:right!important}.p-relative{position:relative!important}.p-absolute{position:absolute!important}.p-fixed{position:fixed!important}.p-sticky{position:-webkit-sticky!important;position:sticky!important}.p-centered{display:block;float:none;margin-left:auto;margin-right:auto}.flex-centered{align-items:center;display:-ms-flexbox;display:flex;-ms-flex-align:center;-ms-flex-pack:center;justify-content:center}.m-0{margin:0!important}.mb-0{margin-bottom:0!important}.ml-0{margin-left:0!important}.mr-0{margin-right:0!important}.mt-0{margin-top:0!important}.mx-0{margin-left:0!important;margin-right:0!important}.my-0{margin-bottom:0!important;margin-top:0!important}.m-1{margin:.2rem!important}.mb-1{margin-bottom:.2rem!important}.ml-1{margin-left:.2rem!important}.mr-1{margin-right:.2rem!important}.mt-1{margin-top:.2rem!important}.mx-1{margin-left:.2rem!important;margin-right:.2rem!important}.my-1{margin-bottom:.2rem!important;margin-top:.2rem!important}.m-2{margin:.4rem!important}.mb-2{margin-bottom:.4rem!important}.ml-2{margin-left:.4rem!important}.mr-2{margin-right:.4rem!important}.mt-2{margin-top:.4rem!important}.mx-2{margin-left:.4rem!important;margin-right:.4rem!important}.my-2{margin-bottom:.4rem!important;margin-top:.4rem!important}.p-0{padding:0!important}.pb-0{padding-bottom:0!important}.pl-0{padding-left:0!important}.pr-0{padding-right:0!important}.pt-0{padding-top:0!important}.px-0{padding-left:0!important;padding-right:0!important}.py-0{padding-bottom:0!important;padding-top:0!important}.p-1{padding:.2rem!important}.pb-1{padding-bottom:.2rem!important}.pl-1{padding-left:.2rem!important}.pr-1{padding-right:.2rem!important}.pt-1{padding-top:.2rem!important}.px-1{padding-left:.2rem!important;padding-right:.2rem!important}.py-1{padding-bottom:.2rem!important;padding-top:.2rem!important}.p-2{padding:.4rem!important}.pb-2{padding-bottom:.4rem!important}.pl-2{padding-left:.4rem!important}.pr-2{padding-right:.4rem!important}.pt-2{padding-top:.4rem!important}.px-2{padding-left:.4rem!important;padding-right:.4rem!important}.py-2{padding-bottom:.4rem!important;padding-top:.4rem!important}.s-rounded{border-radius:.1rem}.s-circle{border-radius:50%}.text-left{text-align:left}.text-right{text-align:right}.text-center{text-align:center}.text-justify{text-align:justify}.text-lowercase{text-transform:lowercase}.text-uppercase{text-transform:uppercase}.text-capitalize{text-transform:capitalize}.text-normal{font-weight:400}.text-bold{font-weight:700}.text-italic{font-style:italic}.text-large{font-size:1.2em}.text-small{font-size:.9em}.text-tiny{font-size:.8em}.text-muted{opacity:.8}.text-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text-clip{overflow:hidden;text-overflow:clip;white-space:nowrap}.text-break{-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;word-break:break-word;word-wrap:break-word} \ No newline at end of file diff --git a/Start/Client/wwwroot/index.html b/Start/Client/wwwroot/index.html index c81bd2a..f3261c0 100644 --- a/Start/Client/wwwroot/index.html +++ b/Start/Client/wwwroot/index.html @@ -9,8 +9,8 @@ - - + +