diff --git a/client/src/_style/_variables.bootstrap.scss b/client/src/_style/_variables.bootstrap.scss deleted file mode 100644 index 50cade22d..000000000 --- a/client/src/_style/_variables.bootstrap.scss +++ /dev/null @@ -1,928 +0,0 @@ -$black: #000000 !default; - -$white: #ffffff !default; - -$gray-100: #f3f6f9 !default; -$gray-200: #ebedf3 !default; -$gray-300: #e4e6ef !default; -$gray-400: #d1d3e0 !default; -$gray-500: #b5b5c3 !default; -$gray-600: #7e8299 !default; -$gray-700: #5e6278 !default; -$gray-800: #3f4254 !default; -$gray-900: #181c32 !default; - -// THESE ARE INVERTED BECAUSE THAT'S HOW WE NEED IT -$dark: $gray-200 !default; -$dark-75: $gray-300 !default; -$dark-65: $gray-400 !default; -$dark-50: $gray-500 !default; -$dark-25: $gray-600 !default; - -$text-muted: $gray-500 !default; - -$grays: ( - "100": $gray-100, - "200": $gray-200, - "300": $gray-300, - "400": $gray-400, - "500": $gray-500, - "600": $gray-600, - "700": $gray-700, - "800": $gray-800, - "900": $gray-900, -) !default; - -// Bootstrap standard & extended colors -// Dark colors -$dark: $dark !default; -$dark-hover: darken($dark, 3%) !default; -$dark-light: $gray-400 !default; -$dark-inverse: $white !default; - -// Primary colors -$primary: #3699ff !default; -$primary-hover: #187de4 !default; -$primary-light: #e1f0ff !default; -$primary-inverse: $white !default; - -// Secondary colors -$secondary: $gray-300 !default; -$secondary-hover: darken($gray-300, 4%) !default; -$secondary-light: $gray-200 !default; -$secondary-inverse: $dark-75 !default; - -// Success colors -$success: #1bc5bd !default; -$success-hover: #0bb7af !default; -$success-light: #c9f7f5 !default; -$success-inverse: $white !default; - -// Inco colors -$info: #8950fc !default; -$info-hover: #7337ee !default; -$info-light: #eee5ff !default; -$info-inverse: $white !default; - -// Warning colors -$warning: #ffa800 !default; -$warning-hover: #ee9d01 !default; -$warning-light: #fff4de !default; -$warning-inverse: $white !default; - -// Danger colors -$danger: #f64e60 !default; -$danger-hover: #ee2d41 !default; -$danger-light: #ffe2e5 !default; -$danger-inverse: $white !default; - -// Light colors -$light: $gray-100 !default; -$light-hover: $gray-300 !default; -$light-light: $gray-100 !default; -$light-inverse: $gray-600 !default; - -// White colors -$white: $white !default; -$white-hover: $gray-100 !default; -$white-light: $white !default; -$white-inverse: $dark-75 !default; - -// Bootstrap theme colors -$theme-colors: ( - "white": $white, - // custom color type - "primary": $primary, - "secondary": $secondary, - "success": $success, - "info": $info, - "warning": $warning, - "danger": $danger, - "light": $light, - "dark": $dark, -) !default; - -// Extended hover colors for Bootstrap theme colors -$theme-hover-colors: ( - "white": $white-hover, - // custom color type - "primary": $primary-hover, - "secondary": $secondary-hover, - "success": $success-hover, - "info": $info-hover, - "warning": $warning-hover, - "danger": $danger-hover, - "light": $light-hover, - "dark": $dark-hover, -) !default; - -// Extended inverse colors for Bootstrap theme colors -$theme-inverse-colors: ( - "white": $white-inverse, - "primary": $primary-inverse, - "secondary": $secondary-inverse, - "success": $success-inverse, - "info": $info-inverse, - "warning": $warning-inverse, - "danger": $danger-inverse, - "light": $light-inverse, - "dark": $dark-inverse, -) !default; - -// Extended outline colors for Bootstrap theme colors -$theme-outline-inverse-colors: ( - "white": $white, - "primary": $primary, - "secondary": $dark-75, - "success": $success, - "info": $info, - "warning": $warning, - "danger": $danger, - "light": $dark-75, - "dark": $dark, -) !default; - -// Extended light colors for Bootstrap theme colors -$theme-light-colors: ( - "white": $white-light, - "primary": $primary-light, - "secondary": $secondary-light, - "success": $success-light, - "info": $info-light, - "warning": $warning-light, - "danger": $danger-light, - "light": $light-light, - "dark": $dark-light, -) !default; - -// Extended shadow colors for Bootstrap theme colors -$theme-shadow-colors: ( - "white": $dark, - "primary": $primary, - "secondary": $dark, - "success": $success, - "info": $info, - "warning": $warning, - "danger": $danger, - "light": $dark, - "dark": $dark, -) !default; - -// Extended theme text colors -$theme-text-colors: ( - "white": $white, - "primary": $primary, - "secondary": $dark, - "success": $success, - "info": $info, - "warning": $warning, - "danger": $danger, - "light": $light, - "dark": $dark, - "dark-75": $dark-75, - "dark-65": $dark-65, - "dark-50": $dark-50, - "dark-25": $dark-25, - "muted": $text-muted, -) !default; - -// Social Network Colors Used With Bootstrap Buttons(see: https://primarycolors.net/) -$social-colors: ( - facebook: ( - base: #3b5998, - inverse: #ffffff, - light: rgba(#3b5998, 0.1), - hover: darken(#3b5998, 7.5%), - ), - google: ( - base: #dd4b39, - inverse: #ffffff, - light: rgba(#dd4b39, 0.1), - hover: darken(#dd4b39, 7.5%), - ), - twitter: ( - base: #1da1f2, - inverse: #ffffff, - light: rgba(#1da1f2, 0.1), - hover: darken(#1da1f2, 7.5%), - ), - instagram: ( - base: #e1306c, - inverse: #ffffff, - light: rgba(#e1306c, 0.1), - hover: darken(#e1306c, 7.5%), - ), - youtube: ( - base: #ff0000, - inverse: #ffffff, - light: rgba(#ff0000, 0.1), - hover: darken(#ff0000, 7.5%), - ), - linkedin: ( - base: #0077b5, - inverse: #ffffff, - light: rgba(#0077b5, 0.1), - hover: darken(#0077b5, 7.5%), - ), - skype: ( - base: #00aff0, - inverse: #ffffff, - light: rgba(#00aff0, 0.1), - hover: darken(#00aff0, 7.5%), - ), -) !default; - -// Extended custom spacing for Bootstrap -// -// Control the default styling of most Bootstrap elements by modifying these -// variables. Mostly focused on spacing. -// You can add more entries to the $spacers map, should you need more variation. -$spacer: 1rem !default; -// stylelint-disable-next-line scss/dollar-variable-default -$spacers: ( - 0: 0, - 1: ( - $spacer * 0.25, - ), - // 3.5px - 2: - ( - $spacer * 0.5, - ), - // 7px; - 3: - ( - $spacer * 0.75, - ), - // 10.5px - 4: - ( - $spacer * 1, - ), - // 14px - 5: - ( - $spacer * 1.25, - ), - // 17.5px - 6: - ( - $spacer * 1.5, - ), - // 21px - 7: - ( - $spacer * 1.75, - ), - // 24.5px - 8: - ( - $spacer * 2, - ), - // 28px - 9: - ( - $spacer * 2.25, - ), - // 31.5px - 10: - ( - $spacer * 2.5, - ), - // 35px - 11: - ( - $spacer * 2.75, - ), - // 38.5px - 12: - ( - $spacer * 3, - ), - // 42px - 13: - ( - $spacer * 3.25, - ), - // 45.5px - 14: - ( - $spacer * 3.5, - ), - // 49px - 15: - ( - $spacer * 3.75, - ), - // 52.5px - 16: - ( - $spacer * 4, - ), - // 55px - 17: - ( - $spacer * 4.25, - ), - // 58.5px - 18: - ( - $spacer * 4.5, - ), - // 62px - 19: - ( - $spacer * 4.75, - ), - // 65.5px - 20: - ( - $spacer * 5, - ), - // 69px - 21: - ( - $spacer * 5.25, - ), - // 73.5px - 22: - ( - $spacer * 5.5, - ), - // 77px - 23: - ( - $spacer * 5.75, - ), - // 80.5px - 24: - ( - $spacer * 6, - ), - // 84px - 25: - ( - $spacer * 6.25, - ), - // 87.5px - 26: - ( - $spacer * 6.5, - ), - // 91px - 27: - ( - $spacer * 6.75, - ), - // 94.5px - 28: - ( - $spacer * 7, - ), - // 99px - 29: - ( - $spacer * 7.25, - ), - // 102.5px - 30: - ( - $spacer * 7.5, - ), - // 106px - 31: - ( - $spacer * 7.75, - ), - // 109.5px - 32: - ( - $spacer * 8, - ), - // 113px - 33: - ( - $spacer * 8.25, - ), - // 116.5px - 34: - ( - $spacer * 8.5, - ), - // 120px - 35: - ( - $spacer * 8.75, - ), - // 123.5px - 36: - ( - $spacer * 9, - ), - // 127px - 37: - ( - $spacer * 9.25, - ), - // 130.5px - 48: - ( - $spacer * 9.5, - ), - // 134px - 39: - ( - $spacer * 9.75, - ), - // 137.5px - 40: - ( - $spacer * 10, - ), - // 140px -); - -// Components -// -// Define common padding and border radius sizes and more. -$line-height-xl: 1.8 !default; -$line-height-lg: 1.5 !default; -$line-height-sm: 1.35 !default; - -$component-light-style-opacity: 0.1 !default; -$component-active-color: $white !default; -$component-active-bg: $primary !default; - -// Box shadow -$box-shadow-xs: 0 0.25rem 0.5rem 0 rgba($black, 0.05); -$box-shadow-sm: 0 0.1rem 1rem 0.25rem rgba($black, 0.05) !default; -$box-shadow: 0 0.5rem 1.5rem 0.5rem rgba($black, 0.075) !default; -$box-shadow-lg: 0 1rem 2rem 1rem rgba($black, 0.1) !default; - -// Border Radiues -$border-radius-sm: 0.28rem !default; -$border-radius: 0.42rem !default; -$border-radius-lg: 0.85rem !default; -$border-radius-xl: 1.25rem !default; - -// Border settings -$border-color: $gray-200 !default; -$border-width: 1px !default; - -// Hover background color -$hover-bg: $gray-100 !default; - -// Activebackground color -$active-bg: darken($gray-100, 1%) !default; - -// Options -// -// Quickly modify global styling by enabling or disabling optional features. -$enable-rounded: true !default; -$enable-shadows: true !default; - -// Grid breakpoints -// -// Define the minimum dimensions at which your layout will change, -// adapting to different screen sizes, for use in media queries. -$grid-breakpoints: ( - xs: 0, - sm: 576px, - md: 768px, - lg: 992px, - xl: 1200px, - xxl: 1400px // custom breakpoint,, -) !default; - -// Grid containers -// -// Define the maximum width of `.container` for different screen sizes. -$container-max-widths: ( - sm: 540px, - md: 720px, - lg: 960px, - xl: 1140px, - xxl: 1340px, -) !default; - -// Grid columns -// -// Set the number of columns and specify the width of the gutters. -$grid-columns: 12 !default; -$grid-gutter-width: 25px !default; -$grid-divider-bg: $gray-200 !default; - -// Body -// Settings for the `` element. -$body-bg: $tachi-backestground !default; -$body-color: $gray-200 !default; - -// Typography -// -// Font, line-height, and color for body text, headings, and more. - -// Font family -$font-family-base: Poppins, Helvetica, "sans-serif" !default; - -$font-size-base: 1rem !default; // Assumes the browser default, typically `13px` -$font-size-lg: $font-size-base * 1.08 !default; // 14.04px -$font-size-sm: $font-size-base * 0.925 !default; // 12.025px -$font-size-xs: $font-size-base * 0.8 !default; // 10.4px - -$h1-font-size: $font-size-base * 2 !default; // 26px -$h2-font-size: $font-size-base * 1.75 !default; // 22.75px -$h3-font-size: $font-size-base * 1.5 !default; // 19.5px -$h4-font-size: $font-size-base * 1.35 !default; // 17.55px -$h5-font-size: $font-size-base * 1.25 !default; // 16.25px -$h6-font-size: $font-size-base * 1.175 !default; // 15.275px - -$headings-margin-bottom: $spacer / 2 !default; -$headings-font-family: null !default; -$headings-font-weight: 500 !default; -$headings-line-height: 1.2 !default; -$headings-color: null !default; - -$display1-size: 5.5rem !default; // 71.5px -$display2-size: 4.5rem !default; // 58.5px -$display3-size: 3.5rem !default; // 45.5px -$display4-size: 2.5rem !default; // 32.5px -$display5-size: 2.25rem !default; // 29.5px - -// Font Sizes -$font-sizes: ( - font-size-h1: $h1-font-size, - font-size-h2: $h2-font-size, - font-size-h3: $h3-font-size, - font-size-h4: $h4-font-size, - font-size-h5: $h5-font-size, - font-size-h6: $h6-font-size, - display1: $display1-size, - display2: $display2-size, - display3: $display3-size, - display4: $display4-size, - display5: $display5-size, -) !default; - -$display1-weight: 300 !default; -$display2-weight: 300 !default; -$display3-weight: 300 !default; -$display4-weight: 300 !default; -$display-line-height: $headings-line-height !default; - -$lead-font-size: $font-size-base * 1.25 !default; -$lead-font-weight: 300 !default; -$small-font-size: 80% !default; - -// Font Weight -$font-weight-lighter: lighter !default; -$font-weight-light: 300 !default; -$font-weight-normal: 400 !default; -$font-weight-bold: 500 !default; -$font-weight-bolder: 600 !default; -$font-weight-boldest: 700 !default; - -$line-height-base: 1.5 !default; - -// Transition -$transition: all 0.15s ease !default; -$transition-link: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease !default; -$transition-input: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease !default; - -// Links -// -// Style anchor elements. -$link-color: $primary !default; -$link-decoration: none !default; -$link-hover-color: darken($primary, 15%) !default; -$link-hover-decoration: underline !default; -// Darken percentage for links with `.text-*` class (e.g. `.text-success`) -$emphasized-link-hover-darken-percentage: 15% !default; - -// Buttons + Forms -// -// Shared variables that are reassigned to `$input-` and `$btn-` specific variables. -$input-btn-padding-y: 0.65rem !default; -$input-btn-padding-x: 1rem !default; -$input-btn-font-family: null !default; -$input-btn-font-size: $font-size-base !default; -$input-btn-line-height: $line-height-base !default; - -$input-btn-focus-width: 0.2rem !default; -$input-btn-focus-color: rgba($component-active-bg, 0.25) !default; -$input-btn-focus-box-shadow: none !default; - -$input-btn-padding-y-sm: 0.55rem !default; -$input-btn-padding-x-sm: 0.75rem !default; -$input-btn-font-size-sm: $font-size-sm !default; -$input-btn-line-height-sm: $line-height-sm !default; - -$input-btn-padding-y-lg: 0.825rem !default; -$input-btn-padding-x-lg: 1.42rem !default; -$input-btn-font-size-lg: $font-size-lg !default; -$input-btn-line-height-lg: $line-height-lg !default; - -$input-btn-border-width: $border-width !default; - -// Buttons -// -// For each of Bootstrap's buttons, define text, background, and border color. -$btn-disabled-opacity: 0.6 !default; -$btn-transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out, border-color 0.3s ease-in-out, - box-shadow 0.3s ease-in-out !default; -$btn-box-shadow: none !default; -$btn-focus-box-shadow: none !default; -$btn-active-box-shadow: none !default; -$btn-font-weight: normal !default; -$btn-secondary-color: $tachi-lightground !default; -$btn-secondary-hover-bg-color: $tachi-background !default; -$btn-icon-size-xs: 24px !default; //custom parameter - -// Allows for customizing button radius independently from global border radius -$btn-border-radius: $border-radius !default; -$btn-border-radius-lg: $border-radius !default; -$btn-border-radius-sm: $border-radius !default; - -$input-plaintext-color: $dark-75 !default; -$input-placeholder-color: $text-muted !default; -$input-color: $dark-75 !default; -$input-border-color: $gray-300 !default; -$input-border-width: $input-btn-border-width !default; -$input-box-shadow: none !default; -$input-focus-border-color: lighten($primary, 10%); -$input-focus-box-shadow: none !default; -$input-height-border: $input-border-width * 2 !default; - -$input-bg: $white !default; -$input-disabled-bg: $gray-100 !default; -$input-readonly-bg: $white !default; -$input-group-icon-color: $dark-75 !default; -$input-group-addon-color: $dark-75 !default; -$input-group-addon-bg: $gray-100 !default; - -$input-border-radius: $border-radius !default; -$input-border-radius-lg: $border-radius !default; -$input-border-radius-sm: $border-radius-sm !default; - -$input-solid-bg: $gray-100; -$input-solid-bg-focus: $gray-200; -$input-solid-placeholder-color: $input-placeholder-color; -$input-solid-color: $dark-75; - -$custom-control-indicator-checked-box-shadow: none !default; -$custom-control-indicator-active-box-shadow: none !default; - -// Forms -$form-group-margin-bottom: 1.75rem !default; -$form-label-font-size: 1rem !default; -$form-label-font-weight: 400 !default; -$form-feedback-font-size: 0.9rem !default; -$form-feedback-font-weight: 400 !default; -$form-text-font-size: 0.9rem !default; -$form-text-font-weight: 400 !default; -$form-validation-input-shadow: false; - -// Table -$table-bg: $tachi-background !default; -$table-accent-bg: #1c1c1c !default; -$table-hover-bg: #7e7678 !default; -$table-active-bg: $table-hover-bg !default; - -$table-border-color: #383f45 !default; -$table-head-bg: $gray-100 !default; -$table-head-color: $dark-75 !default; -$table-head-font-size: 1rem !default; -$table-head-font-weight: 600 !default; - -$table-dark-color: $white !default; -$table-dark-bg: $dark !default; -$table-dark-accent-bg: rgba($white, 0.05) !default; -$table-dark-hover-color: $table-dark-color !default; -$table-dark-hover-bg: rgba($white, 0.075) !default; -$table-dark-border-color: lighten($table-dark-bg, 7.5%) !default; - -$table-head-bg: $gray-100 !default; -$table-compact-head-font-size: 0.9rem !default; -$table-compact-head-color: $text-muted !default; -$table-compact-head-text-transform: uppercase !default; -$table-compact-head-font-weight: 600 !default; -$table-compact-head-font-weight: 600 !default; -$table-compact-head-letter-spacing: 0.1rem !default; - -// Card -$card-box-shadow: 0px 0px 30px 0px rgba(82, 63, 105, 0.05) !default; // card custom shadow -$card-border-color: $black !default; -$card-cap-bg: $white !default; -$card-spacer-y: 2rem !default; -$card-spacer-x: 2.25rem !default; -$card-border-radius: $border-radius !default; - -$card-header-spacer-y: 1rem !default; -$card-header-height: 70px !default; -$card-sticky-header-bg: $tachi-lightground !default; -$card-sticky-header-height: 70px !default; -$card-sticky-zindex: 101 !default; -$card-sticky-shadow: 0px 1px 15px 1px rgba(69, 65, 78, 0.1) !default; - -// List group -$list-group-border-color: $gray-200 !default; -$list-group-hover-bg: $gray-200 !default; - -// Modals - -// Padding applied to the modal body -$modal-inner-padding: 1.75rem !default; - -// Margin between elements in footer, must be lower than or equal to 2 * $modal-inner-padding -$modal-footer-margin-between: 0.5rem !default; - -$modal-dialog-margin: 0.5rem !default; -$modal-dialog-margin-y-sm-up: 1.75rem !default; - -$modal-content-color: null !default; -$modal-content-bg: $white !default; -$modal-content-border-color: rgba($black, 0.2) !default; -$modal-content-border-width: 0 !default; -$modal-content-border-radius: $border-radius !default; -$modal-content-inner-border-radius: $border-radius !default; - -$modal-content-box-shadow: 0 0.25rem 0.5rem rgba($black, 0.05) !default; -$modal-content-box-shadow-xs: 0 0.25rem 0.5rem rgba($black, 0.1) !default; -$modal-content-box-shadow-sm-up: 0 0.5rem 1rem rgba($black, 0.1) !default; - -$zindex-modal: 1050 !default; -$modal-backdrop-bg: $black !default; -$modal-backdrop-opacity: 0.6 !default; -$modal-header-border-color: $border-color !default; -$modal-footer-border-color: $border-color !default; -$modal-header-border-width: 1px !default; -$modal-footer-border-width: 1px !default; -$modal-header-padding-y: 1.5rem !default; -$modal-header-padding-x: 1.75rem !default; -$modal-header-padding: $modal-header-padding-y $modal-header-padding-x !default; // Keep this for backwards compatibility - -$modal-xl: 1140px !default; -$modal-lg: 800px !default; -$modal-md: 500px !default; -$modal-sm: 300px !default; - -// Pagination -$pagination-color: $primary !default; -$pagination-border-color: $gray-300 !default; -$pagination-hover-bg: $gray-200 !default; -$pagination-hover-border-color: $gray-300 !default; -$pagination-disabled-border-color: $gray-200 !default; - -// Dropdowns -// Dropdown menu container and contents. -$dropdown-box-shadow: 0px 0px 50px 0px rgba(82, 63, 105, 0.15) !default; -$zindex-dropdown: 96 !default; -$dropdown-border-radius: $border-radius !default; -$dropdown-border-width: 0 !default; -$dropdown-item-padding-y: 0.75rem !default; -$dropdown-item-padding-x: 1.25rem !default; -$dropdown-divider-bg: $gray-200 !default; -$dropdown-menu-widths: ( - sm: 175px, - md: 250px, - lg: 350px, - xl: 400px, - xxl: 600px, -); - -// Popovers -$popover-font-size: 0.9rem !default; -$popover-max-width: 276px !default; -$popover-border-width: 1px !default; -$popover-border-color: #ffffff !default; -$popover-border-radius: $border-radius !default; -$popover-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15) !default; -$popover-header-bg: #ffffff !default; -$popover-header-color: $dark !default; -$popover-header-font-weight: 500 !default; -$popover-header-font-size: 1rem !default; -$popover-header-padding-y: 1rem !default; -$popover-header-padding-x: 1.25rem !default; -$popover-header-border-color: $black !default; -$popover-body-color: $body-color !default; - -// Tooltips -$tooltip-font-size: 0.9rem !default; -$tooltip-max-width: 200px !default; -$tooltip-color: $dark-75 !default; -$tooltip-bg: #ffffff !default; -$tooltip-border-radius: 3px !default; -$tooltip-opacity: 1 !default; -$tooltip-box-shadow: $popover-box-shadow !default; -$tooltip-padding-y: 0.75rem !default; -$tooltip-padding-x: 1rem !default; -$tooltip-margin: 0 !default; - -// Custom Toasts -$toast-zindex: $zindex-dropdown + 100 !default; -$toast-spacing: 2rem !default; -$toast-width: 350px !default; -$toast-box-shadow: $dropdown-box-shadow !default; -$toast-header-color: $dark-75 !default; -$toast-header-background-color: $tachi-lightground !default; -$toast-header-border-color: $gray-200 !default; - -// Progress bars -$progress-height: 1rem !default; -$progress-height-xs: 0.5rem !default; -$progress-height-sm: 0.75rem !default; -$progress-height-lg: 1.5rem !default; -$progress-bg: $gray-200 !default; -$progress-border-radius: $border-radius !default; -$progress-box-shadow: none !default; -$progress-bar-color: $white !default; -$progress-bar-bg: $primary !default; -$progress-bar-animation-timing: 1s linear infinite !default; -$progress-bar-transition: width 0.6s ease !default; - -// Badges -$badge-padding-y: 0.5em !default; -$badge-padding-x: 0.75em !default; -$badge-font-size: 85% !default; - -// Code -$code-bg: #101010 !default; -$code-padding: 0.15rem 0.5rem !default; - -// Modals -// Padding applied to the modal body -$modal-inner-padding: 1rem !default; -$modal-dialog-margin: 0.5rem !default; -$modal-dialog-margin-y-sm-up: 1.75rem !default; -$modal-title-color: $dark !default; -$modal-title-font-weight: 500 !default; -$modal-title-font-size: 1.3rem !default; -$modal-title-small-color: $text-muted !default; -$modal-title-small-font-weight: 400 !default; -$modal-title-small-font-size: 0.9rem !default; -$modal-title-close-font-size: 1rem !default; -$modal-title-close-color: $text-muted !default; -$modal-title-close-hover-color: $primary !default; - -$modal-content-color: null !default; -$modal-content-bg: $white !default; -$modal-content-border-color: rgba($black, 0.2) !default; -$modal-content-border-radius: $border-radius-lg !default; -$modal-content-box-shadow-xs: 0 0.25rem 0.5rem rgba($black, 0.5) !default; -$modal-content-box-shadow-sm-up: 0 0.5rem 1rem rgba($black, 0.5) !default; - -$modal-backdrop-bg: $black !default; -$modal-backdrop-opacity: 0.5 !default; -$modal-header-border-color: $border-color !default; -$modal-footer-border-color: $modal-header-border-color !default; - -$modal-xl: 1140px !default; -$modal-lg: 800px !default; -$modal-md: 500px !default; -$modal-sm: 300px !default; - -// Pagination -$pagination-padding-y: 0.5rem !default; -$pagination-padding-x: 0.75rem !default; -$pagination-padding-y-sm: 0.25rem !default; -$pagination-padding-x-sm: 0.5rem !default; -$pagination-padding-y-lg: 0.75rem !default; -$pagination-padding-x-lg: 1.5rem !default; -$pagination-line-height: 1.25 !default; - -$pagination-color: $link-color !default; -$pagination-bg: $white !default; -$pagination-border-color: $gray-300 !default; - -$pagination-focus-box-shadow: none !default; -$pagination-focus-outline: 0 !default; - -$pagination-hover-color: $link-hover-color !default; -$pagination-hover-bg: $gray-200 !default; -$pagination-hover-border-color: $gray-300 !default; - -$pagination-disabled-color: $gray-600 !default; -$pagination-disabled-bg: $white !default; -$pagination-disabled-border-color: $gray-300 !default; - -// Alerts -// -// Define alert colors, border radius, and padding. -$alert-box-shadow: $card-box-shadow !default; - -// Navs - -$nav-link-px: 1.5rem; -$nav-link-py: 0.75rem; -$nav-btn-px: 1rem; -$nav-section-py: 0.5rem; -$nav-elem-space: 0.25rem; - -$nav-link-bg-hover: $gray-100; -$nav-link-bg-active: $gray-200; - -$nav-header-py: 1rem; -$nav-footer-py: 1rem; - -$nav-font-size: 1rem; -$nav-icon-size: 1.25rem; -$nav-icon-width: 2rem; diff --git a/client/src/_style/_variables.demo.scss b/client/src/_style/_variables.demo.scss deleted file mode 100644 index 0ec216a2c..000000000 --- a/client/src/_style/_variables.demo.scss +++ /dev/null @@ -1,12 +0,0 @@ -// Theme colors -$primary: $tachi-primary; -$primary-hover: $tachi-primary-hover; -$primary-light: #e888af; - -$secondary: #605a5c; -$secondary-hover: #7e7678; -$secondary-light: #c3b9bb; - -$info: $tachi-info; -$info-hover: $tachi-info-hover; -$info-light: #A4B9D2; \ No newline at end of file diff --git a/client/src/_style/base.scss b/client/src/_style/base.scss deleted file mode 100644 index 8783a55b4..000000000 --- a/client/src/_style/base.scss +++ /dev/null @@ -1,158 +0,0 @@ -// Bootstrap -@import "bootstrap-scss/_mixins.scss"; -@import "variables.demo"; -@import "variables.bootstrap"; - -.example-highlight > pre { - background: none transparent !important; - margin: 0 !important; - padding-top: 0.5rem; - code { - overflow-y: auto; - display: block; - - span { - background: none transparent !important; - } - } -} - -.json > pre { - background: none #fff !important; -} - -.example-code > .json { - background: none #fff !important; -} - -.symbol.symbol-45 > svg { - width: 100%; - max-width: 45px; - height: 45px; -} - -.react-bootstrap-table { - overflow-x: auto; -} - -.react-bootstrap-table { - th { - outline: none; - - &.sortable { - .svg-icon-sort { - opacity: 0; - } - - &:hover { - cursor: pointer; - - .svg-icon-sort { - opacity: 1; - } - } - } - } - - .table.table-head-custom thead tr { - .sortable-active { - color: #6993ff !important; - } - } -} - -.cursor-default { - cursor: default !important; -} - -.display-block { - display: block; -} - -.d-grid{ - display: grid; -} - -.fading-image-td-left { - position: relative; - z-index: 1; - - &:before { - content: ""; - display: block; - background-image: var(--image-url); - mask-image: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2) 30%, rgba(0, 0, 0, 0)); - -webkit-mask-image: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2) 30%, rgba(0, 0, 0, 0)); - background-size: cover; - background-repeat: no-repeat; - background-position: inherit; - position: absolute; - left: 0; - top: 0; - width: 100%; - height: 100%; - z-index: -1; - } -} - -.fading-image-td-right { - position: relative; - z-index: 1; - - &:before { - content: ''; - display: block; - background-image: var(--image-url); - mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)); - -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)); - background-size: cover; - background-repeat: no-repeat; - background-position: inherit; - position: absolute; - left: 0; - top: 0; - width: 100%; - height: 100%; - z-index: -1; - } -} - -.quest-anchor { - scroll-margin-top: 100px; -} - -.tooltip-max > .tooltip-inner { - width: 100%; - max-width: unset !important; -} - -@include media-breakpoint-up(lg) { - .MuiTabs-flexContainer { - width: 100%; - justify-content: space-around - } -} - -.topbar { - justify-content: end; -} - -@include media-breakpoint-up(lg) { - .session-raise-container { - width: 100%; - display: flex; - } -} -@include media-breakpoint-down(md) { - .session-raise-container { - width: 100%; - display: flex; - flex-direction: column; - } -} - -.MuiTabs-scrollButtons.Mui-disabled { - opacity: 0.3; -} - -@import "tachi-custom/custom", "tachi-custom/hero", "tachi-custom/splash-screen"; \ No newline at end of file diff --git a/client/src/_style/stub.scss b/client/src/_style/stub.scss deleted file mode 100644 index c4f67193d..000000000 --- a/client/src/_style/stub.scss +++ /dev/null @@ -1,7 +0,0 @@ -// This is an empty scss file. -// You might wonder why we import it. -// Well, our "entry point" to our scss is dynamic -// and depends on additionalData (see vite.config.js). -// However, the SCSS loader will not bother with that additionalData -// if it finds no SCSS files to load. This 'empty' file actually -// determines whether we render any CSS at all. Fun! \ No newline at end of file diff --git a/client/src/_style/tachi-custom/_custom.scss b/client/src/_style/tachi-custom/_custom.scss deleted file mode 100644 index a91321ec7..000000000 --- a/client/src/_style/tachi-custom/_custom.scss +++ /dev/null @@ -1,178 +0,0 @@ -.card-nav-icon { - color: #999; - transition: 100ms; - - &:hover { - color: $tachi-primary !important; - } -} - -.stat-overview-card { - box-shadow: black 0px 0px 2px 1px !important; -} - -.card-dark { - background-color: #1c1c1c !important; - - > .card-header { - background-color: #1c1c1c !important; - } - > .card-footer { - background-color: #1c1c1c !important; - } -} - -.fake-row { - td { - padding: 0 !important; - border-top: none; - } -} - -.tr-dropdown-container { - padding: 4px; - border-top: 1px solid $table-border-color; - background-color: $tachi-background; - - &.collapsing { - border-bottom: 1px solid $table-border-color; - } -} - -.gentle-link { - color: white; - - &:hover { - color: $tachi-primary; - } -} - -@include media-breakpoint-down(sm) { - #kt_content { - padding-top: 55px; - } - - .background-image { - top: 55px; - } -} - -@include media-breakpoint-up(md) { - #kt_content { - padding-top: 80px; - } - - .background-image { - top: 80px; - } -} - -.highlighted-row { - td { - background-color: rgba($color: $tachi-primary, $alpha: 0.1); - } -} - -.nav-link { - &:hover { - background-color: unset !important; - } -} - -.text-monospace { - font-family: monospace; -} - -.modal { - .form-control { - background-color: $tachi-overground; - } -} - -.ladder-header { - background-color: #2b292b; - font-size: x-large; - vertical-align: middle; - padding-top: 0.25rem; - padding-bottom: 0.5rem; - font-weight: bold; - outline: solid 1px black; - margin-top: 2rem; -} - -.ladder-element { - background-color: #1c1c1c; - vertical-align: middle; - padding-top: 0.5rem; - padding-bottom: 0.5rem; - outline: solid 1px black; -} - -.ladder-element-dark { - background-color: #131313; -} - -.ladder-element-achieved { - background-color: rgba(50, 205, 50, 0.2); -} - -.ladder-element-unachieved { - background-color: rgba(170, 85, 85, 0.2); -} - -.timeline-element { - background-color: #1c1c1c; - border-radius: 1rem; - padding: 1rem; - margin-top: 1rem; -} - -.custom-switch { - padding: 0 !important; -} - -.instructions-list { - font-size: 1.2rem; -} - -.instructions-list > li { - padding-top: 0.25rem; - padding-bottom: 0.25rem; -} - -.scoreinfo-grid-minimap { - display: grid; - grid-template-columns: repeat(auto-fill, 30px); - row-gap: 5px; - column-gap: 2px; - justify-items: center; -} - -.scoreinfo-grid-minimap-element { - width: 20px; - height: 20px; - outline: 1px black solid; - display: flex; - justify-content: center; - align-content: center; - text-align: center; - color: white; - font-weight: 900; -} - -.scoreinfo-grid-minimap-element-recent { - box-shadow: inset 0px 0px 5px goldenrod; -} - -.privacy-policy > h2 { - margin-top: 1rem; -} - -.breakdown-hover-row:hover .breakdown-hover-highlight-button { - opacity: 1; -} - -.breakdown-hover-highlight-button { - transition: opacity 0.3s; - opacity: 0; -} diff --git a/client/src/_style/tachi-custom/_hero.scss b/client/src/_style/tachi-custom/_hero.scss deleted file mode 100644 index e532a6c34..000000000 --- a/client/src/_style/tachi-custom/_hero.scss +++ /dev/null @@ -1,43 +0,0 @@ -.landing-page { - .hero { - width: 100vw; - height: 100vh; - - .hero-bg-image { - width: 100vw; - height: 100vh; - z-index: 1; - background-repeat: no-repeat; - background-position: center center; - background-size: cover; - position: absolute; - } - - .hero-bg-fader { - width: 100vw; - height: 100vh; - z-index: 2; - opacity: 0.75; - position: absolute; - } - - .hero-content-wrapper { - width: 100vw; - height: 100vh; - z-index: 3; - position: absolute; - } - - .hero-content-wrapper > .row { - height: calc(100vh - 150px); - } - - @media only screen and (max-width: 600px) { - .hero-content-wrapper > .row { - height: calc(100vh - 80px); - } - } - - - } -} diff --git a/client/src/_style/tachi-custom/_splash-screen.scss b/client/src/_style/tachi-custom/_splash-screen.scss deleted file mode 100644 index b4d949fc9..000000000 --- a/client/src/_style/tachi-custom/_splash-screen.scss +++ /dev/null @@ -1,60 +0,0 @@ -body { - margin: 0; - padding: 0; -} - -#splash-screen { - position: absolute; - z-index: 1000; - width: 100%; - height: 100%; - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; - background-color: #131313; -} - -#splash-screen img { - margin-left: calc(100vw - 100%); - margin-bottom: 30px; -} - -#splash-screen.hidden { - opacity: 0; - visibility: hidden; -} - -.splash-spinner { - animation: rotate 2s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite; - margin-left: calc(100vw - 100%); - width: 50px; - height: 50px; -} - -.splash-spinner .path { - stroke: #e61c6e; - stroke-linecap: round; - animation: dash 1.5s ease-in-out infinite; -} - -@keyframes rotate { - 100% { - transform: rotate(360deg); - } -} - -@keyframes dash { - 0% { - stroke-dasharray: 1, 150; - stroke-dashoffset: 0; - } - 50% { - stroke-dasharray: 90, 150; - stroke-dashoffset: -35; - } - 100% { - stroke-dasharray: 90, 150; - stroke-dashoffset: -124; - } -} diff --git a/client/src/app/pages/dashboard/DashboardPage.tsx b/client/src/app/pages/dashboard/DashboardPage.tsx index 0135fb552..2821ac5e0 100644 --- a/client/src/app/pages/dashboard/DashboardPage.tsx +++ b/client/src/app/pages/dashboard/DashboardPage.tsx @@ -1,5 +1,4 @@ import { APIFetchV1 } from "util/api"; -import { ChangeOpacity } from "util/color-opacity"; import { CreateGoalMap } from "util/data"; import { RFA } from "util/misc"; import { NumericSOV } from "util/sorts"; @@ -18,11 +17,13 @@ import Loading from "components/util/Loading"; import useApiQuery from "components/util/query/useApiQuery"; import { UserContext } from "context/UserContext"; import { UserSettingsContext } from "context/UserSettingsContext"; -import { ColourConfig, TachiConfig } from "lib/config"; +import { TachiConfig } from "lib/config"; import React, { useContext, useMemo } from "react"; -import { Alert, Stack } from "react-bootstrap"; +import Alert from "react-bootstrap/Alert"; +import Stack from "react-bootstrap/Stack"; +import Row from "react-bootstrap/Row"; import { Link, Route, Switch } from "react-router-dom"; -import { COLOUR_SET, GetGameConfig, UserDocument } from "tachi-common"; +import { GetGameConfig, UserDocument } from "tachi-common"; import { UGSWithRankingData, UserRecentSummary } from "types/api-returns"; import SessionCalendar from "components/sessions/SessionCalendar"; import { WindowContext } from "context/WindowContext"; @@ -101,39 +102,32 @@ function RecentInfo({ user }: { user: UserDocument }) { <> {data.recentSessions.length !== 0 && ( <> - +

Today's Summary

You've gotten {data.recentPlaycount} new score {data.recentPlaycount !== 1 ? "s" : ""} today!
- -

New Sessions

- You've had {data.recentSessions.length} session - {data.recentSessions.length !== 1 ? "s" : ""} today! - +
+
+

New Sessions

+ You've had {data.recentSessions.length} session + {data.recentSessions.length !== 1 ? "s" : ""} today! +
+
{data.recentSessions.sort(NumericSOV((x) => x.timeEnded, true)).map((e) => ( <> - +
))} )} {data.recentAchievedGoals.length !== 0 && ( <> - -
+ +

{RFA([ "Sweet!", @@ -149,8 +143,8 @@ function RecentInfo({ user }: { user: UserDocument }) { You've achieved {data.recentAchievedGoals.length} new goal {data.recentAchievedGoals.length !== 1 ? "s" : ""} today!

- -
+
+
    {data.recentAchievedGoals.map((e) => { const goal = goalMap.get(e.goalID); @@ -196,7 +190,7 @@ function RecentInfo({ user }: { user: UserDocument }) { function UserGameStatsInfo({ user }: { user: UserDocument }) { return ( -
    + { const res = await APIFetchV1( @@ -230,7 +224,7 @@ function UserGameStatsInfo({ user }: { user: UserDocument }) { )) } -
    + ); } diff --git a/client/src/app/pages/dashboard/import/ImportPage.tsx b/client/src/app/pages/dashboard/import/ImportPage.tsx index 83b060bea..76be6377a 100644 --- a/client/src/app/pages/dashboard/import/ImportPage.tsx +++ b/client/src/app/pages/dashboard/import/ImportPage.tsx @@ -22,6 +22,7 @@ import { integer, UserDocument, } from "tachi-common"; +import Col from "react-bootstrap/Col"; export default function ImportPage({ user }: { user: UserDocument }) { useSetSubheader(["Import Scores"]); @@ -37,7 +38,7 @@ export default function ImportPage({ user }: { user: UserDocument }) { }, [queryGame]); return ( -
    + <>

    Here, you can import score files, Synchronise with existing services, or set up @@ -47,15 +48,21 @@ export default function ImportPage({ user }: { user: UserDocument }) { Discord.
    Know how to program, and want to write a script yourself? Check out{" "} - + Batch Manual .
    Want to manage or revert an import? Go to{" "} - Import Management. + + Import Management + + .

    - +
    setGame(e.target.value === "" ? null : (e.target.value as Game))} value={game ?? ""} @@ -67,10 +74,10 @@ export default function ImportPage({ user }: { user: UserDocument }) { ))} - +
    {game ? : } -
    + ); } @@ -306,7 +313,9 @@ function ImportInfoDisplayer({ game }: { game: Game }) {

    {gameConfig.name}

    -
    {Content}
    + + {Content} + ); } @@ -565,8 +574,9 @@ function ImportInfoCard({ moreInfo?: React.ReactChild; }) { return ( -
    + @@ -582,6 +592,6 @@ function ImportInfoCard({ )} -
    + ); } diff --git a/client/src/app/pages/dashboard/users/UserGamesPage.tsx b/client/src/app/pages/dashboard/users/UserGamesPage.tsx index d823ad7d3..9e56b6be2 100644 --- a/client/src/app/pages/dashboard/users/UserGamesPage.tsx +++ b/client/src/app/pages/dashboard/users/UserGamesPage.tsx @@ -11,6 +11,8 @@ import ReferToUser from "components/util/ReferToUser"; import React from "react"; import { FormatGame, UserDocument, UserGameStats } from "tachi-common"; import { UGSWithRankingData } from "types/api-returns"; +import Col from "react-bootstrap/Col"; +import Row from "react-bootstrap/Row"; interface Props { reqUser: UserDocument; @@ -24,7 +26,7 @@ export default function UserGamesPage({ reqUser }: Props) { ); return ( -
    + { const res = await APIFetchV1( @@ -50,7 +52,7 @@ export default function UserGamesPage({ reqUser }: Props) { ) } -
    + ); } @@ -80,9 +82,9 @@ function GamesInfo({ ugs, reqUser }: { ugs: UserGameStats[]; reqUser: UserDocume export function GameStatContainer({ ugs, reqUser }: { ugs: UGSWithRankingData } & Props) { return ( -
    + @@ -100,6 +102,6 @@ export function GameStatContainer({ ugs, reqUser }: { ugs: UGSWithRankingData } userID={ugs.userID} /> -
    + ); } diff --git a/client/src/app/pages/dashboard/users/games/_game/_playtype/SpecificSessionPage.tsx b/client/src/app/pages/dashboard/users/games/_game/_playtype/SpecificSessionPage.tsx index 630665284..f694cbadd 100644 --- a/client/src/app/pages/dashboard/users/games/_game/_playtype/SpecificSessionPage.tsx +++ b/client/src/app/pages/dashboard/users/games/_game/_playtype/SpecificSessionPage.tsx @@ -50,6 +50,7 @@ export default function SpecificSessionPage({ reqUser, game, playtype }: UGPT) { function SessionPage({ data, game, playtype }: UGPT & { data: SessionReturns }) { const { settings } = useContext(UserSettingsContext); + const [sessionData, setSessionData] = useState(data); const { session, user, charts, scores, songs } = sessionData; @@ -108,6 +109,9 @@ function SessionPage({ data, game, playtype }: UGPT & { data: SessionReturns }) const [highlight, setHighlight] = useState(session.highlight); + const isAuthorised = + loggedInUser && (loggedInUser.authLevel === 3 || loggedInUser.id === user.id); + const updateSession = (sessionData: SessionReturns) => { APIFetchV1( `/sessions/${sessionData.session.sessionID}`, @@ -130,13 +134,12 @@ function SessionPage({ data, game, playtype }: UGPT & { data: SessionReturns }) return ( -
    +
    { + onSubmit={(name) => { const newSession: SessionReturns = { ...sessionData, session: { @@ -149,20 +152,13 @@ function SessionPage({ data, game, playtype }: UGPT & { data: SessionReturns }) updateSession(newSession); }} - > - {(text) => ( -
    - {text} - - - -
    - )} -     + authorised={isAuthorised || false} + /> { + className="fs-5" + onSubmit={(desc) => { const newSession: SessionReturns = { ...sessionData, session: { @@ -175,17 +171,8 @@ function SessionPage({ data, game, playtype }: UGPT & { data: SessionReturns }) updateSession(newSession); }} - > - {(text) => ( -
    - {text} - - - - -
    - )} -     + authorised={isAuthorised || false} + />
    {session.highlight && ( - Un-Highlight Session + Un-Highlight Session ) : ( )} diff --git a/client/src/app/pages/dashboard/users/games/_game/_playtype/folders/SpecificFolderPage.tsx b/client/src/app/pages/dashboard/users/games/_game/_playtype/folders/SpecificFolderPage.tsx index 59949949a..481c2e107 100644 --- a/client/src/app/pages/dashboard/users/games/_game/_playtype/folders/SpecificFolderPage.tsx +++ b/client/src/app/pages/dashboard/users/games/_game/_playtype/folders/SpecificFolderPage.tsx @@ -610,7 +610,7 @@ function TierlistBucket({ } return ( -
    +
    {bucket.map((tierlistInfo, i) => ( You'll get a profile for that game, and a position on the leaderboards! - + Import some scores!
    diff --git a/client/src/components/layout/header/AllGames.tsx b/client/src/components/layout/header/GlobalInfoDropdown.tsx similarity index 95% rename from client/src/components/layout/header/AllGames.tsx rename to client/src/components/layout/header/GlobalInfoDropdown.tsx index 71545355b..2c373191a 100644 --- a/client/src/components/layout/header/AllGames.tsx +++ b/client/src/components/layout/header/GlobalInfoDropdown.tsx @@ -5,7 +5,7 @@ import QuickDropdown from "components/ui/QuickDropdown"; import DropdownNavLink from "components/ui/DropdownNavLink"; import { SetState } from "types/react"; -export default function AllGames({ +export default function GlobalInfoDropdown({ className, menuClassName, style, diff --git a/client/src/components/layout/header/Header.tsx b/client/src/components/layout/header/Header.tsx index 9a589b2dd..54b7a2c1e 100644 --- a/client/src/components/layout/header/Header.tsx +++ b/client/src/components/layout/header/Header.tsx @@ -39,8 +39,8 @@ export default function Header({ styles }: { styles: LayoutStyles }) { setShowMobileMenu(false)} > @@ -50,7 +50,7 @@ export default function Header({ styles }: { styles: LayoutStyles }) { to="/" className="mx-auto p-2 focus-ring focus-ring-light" > - + diff --git a/client/src/components/layout/header/HeaderMenu.tsx b/client/src/components/layout/header/HeaderMenu.tsx index 45f9bc1fb..99a3eb891 100644 --- a/client/src/components/layout/header/HeaderMenu.tsx +++ b/client/src/components/layout/header/HeaderMenu.tsx @@ -5,13 +5,13 @@ import { UserDocument, UserGameStats } from "tachi-common"; import useApiQuery from "components/util/query/useApiQuery"; import Nav from "react-bootstrap/Nav"; import { SetState } from "types/react"; -import AllGames from "./AllGames"; -import ImportScoresLink from "./ImportScoresLink"; +import GlobalInfoDropdown from "./GlobalInfoDropdown"; +import ImportScoresDropdown from "./ImportScoresDropdown"; import UtilsDropdown from "./UtilsDropdown"; -import UserProfileLinks from "./UserProfileLinks"; +import UGPTDropdown from "./UGPTDropdown"; const toggleClassNames = "w-100 justify-content-between"; -const menuClassNames = "shadow-none shadow-lg-md"; +const menuClassNames = "shadow-none shadow-lg-lg"; export function HeaderMenu({ user, @@ -41,9 +41,9 @@ export function HeaderMenu({ }, [error, data]); return ( -