styles.scss

// Copyright (C) 2024 Storj Labs, Inc.
// See LICENSE for copying information.

@import './variables';

html {
  overflow-y: auto !important;
}

body {
  text-rendering: optimizeLegibility;
  letter-spacing: -0.01em;
}

// Global theme
.v-theme {
  --v-medium-emphasis-opacity: 0.7;
}

// Light Theme
.v-theme--light {
  --v-border-color: 0, 0, 0;
  --v-theme-overlay-multiplier: 0.75 !important;
  --v-border-opacity: 0.09 !important;
  --v-theme-on-background: var(--v-theme-secondary) !important;
  --v-theme-on-surface: var(--v-theme-secondary) !important;
  --v-theme-surface-variant: var(--v-theme-secondary) !important;
}

// Dark Theme
.v-theme--dark {
  --v-theme-overlay-multiplier: 0.75 !important;
  --v-border-opacity: 0.09 !important;
  --v-theme-on-surface-variant: 70,70,70 !important;
}

h1,h2,h3,h4,h5,h6 {
  font-weight: 800 !important;
}

.v-theme--light p {
  color: var(--v-theme-paragraph) !important;
}

.font-weight-bold {
  font-weight: 800 !important;
}

// Nav
.v-app-bar.v-toolbar {
  border-bottom: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
}

// Toggle visibility class
.show {
  display: block;
}

// Custom rounded class
.rounded-xlg {
  border-radius: 12px !important;
}

// Success button text
.v-btn.v-theme--light.bg-success {
  color: #fff;
}

// Button Shadow
.v-btn--elevated,
.v-btn--variant-flat {
  box-shadow: rgba(31, 35, 40, 0.04) 0 1px 0 0, rgba(255, 255, 255, 0.25) 0 1px 0 0 inset;
}
.v-btn--variant-outlined {
  box-shadow: rgba(31, 35, 40, 0.04) 0 1px 0 0;
}
.v-btn--elevated:hover,
.v-btn--variant-flat:hover,
.v-btn--variant-outlined {
  box-shadow: rgba(31, 35, 40, 0.04) 0 1px 0 0;
}

// Button Outlines
.v-btn.v-theme--light.text-default.v-btn--variant-outlined {
  border-color: rgba(var(--v-border-color), 0.2);
  background: rgb(var(--v-theme-surface));
}
.v-btn.v-theme--light.text-default.v-btn--variant-outlined:hover {
  border-color: #9da3a7;
  border-color: rgba(var(--v-border-color), 0.5);
}
.v-btn.v-theme--dark.text-default.v-btn--variant-outlined {
  border-color: #a9b0b949;
}
.v-btn.v-theme--dark.text-default.v-btn--variant-outlined:hover {
  border-color: #a9b0b979;
}


// Button focus style
.v-btn:focus:active {
  box-shadow: currentColor 0 0 0 1px, currentColor 0 0 0 1px !important;
}
// Button focus style for tabs and toggles
.v-tabs .v-btn:focus:active, .v-btn-group .v-btn:focus:active {
  box-shadow: none !important;
}

// Button sizes
.v-btn--size-default {
  --v-btn-size: 0.8rem;
  --v-btn-height: 44px;
}

.v-btn--size-large {
  --v-btn-size: 0.875rem;
  --v-btn-height: 48px;
}

// Menu
.v-menu > .v-overlay__content > .v-card, .v-menu > .v-overlay__content > .v-sheet, .v-menu > .v-overlay__content > .v-list {
  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity)) !important;
  box-shadow: rgba(0, 0, 0, 0.07) 0 1px 10px 10px !important;
}
.v-navigation-drawer--temporary {
  box-shadow: rgba(0, 0, 0, 0.07) 0 1px 10px 10px !important;
}
.v-navigation-drawer__scrim {
  opacity: 0.3;
}

// Menu list item
.v-list-item--active .v-list-item-title {
  font-weight: 800 !important;
}
.v-list-item-subtitle {
  opacity: 1 !important;
}

// Select Input Menu
.v-select__content {
  box-shadow: rgba(0, 0, 0, 0.07) 0 1px 10px 10px !important;
  border-radius: 8px !important;
}
.v-select__content .v-list {
  padding: 4px;
}

// List
.v-list {
  padding: 4px;
}

// Card Light Theme
.v-card.v-theme--light {
  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity)) !important;
  // box-shadow: rgba(88, 102, 126, 0.07) 0px 4px 20px;
  box-shadow: none;
}

// Card Dark Theme
.v-card.v-theme--dark {
  background: --v-theme-surface;
  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity)) !important;
  // box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  box-shadow: none;
}
.v-card--variant-flat {
  box-shadow: none !important;
}

// Cards Padding
.v-card-item__prepend {
  padding-inline-end: 0.8rem !important;
}

// Cards Title
.v-card-item .v-card-title {
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: 0;
}

.v-card-subtitle {
  opacity: 1;
}

// Cards Hover
.v-card--hover:hover {
  box-shadow: 0 5px 5px -3px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, .1)), 0 8px 10px 1px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, .07)), 0 3px 14px 2px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, .05));
}


// Overlay behind modals/dialogs opacity and color
.v-overlay__scrim {
  background: #000;
  opacity: 0.75;
}

// Align the checkboxes in the tables
.v-selection-control {
  contain: inherit;
}

// Make the checkbox selection square instead of rounded
.v-selection-control__input {
  border-radius: 8px !important;
}
.v-selection-control__input::before {
  border-radius: 8px !important;
}

// High contrast labels
.v-label {
  opacity: var(--v-high-emphasis-opacity) !important;
}

// Ensure that the compact checkbox isn't too close to its label
.v-selection-control--density-compact .v-label {
  margin-left: 8px;
}


// Sorting icon
.mdi-arrow-up::before, .mdi-arrow-down::before {
  font-size: 14px;
}

// Breadcrumbs
.v-breadcrumbs {
  min-height: 24px;
}
.v-breadcrumbs-item {
  padding: 0 !important;
}

// Snackbar
.v-snackbar__content {
  width: 100%;
}

.snackbar-multiple .v-snackbar__wrapper {
  border: 1px solid #a9b0b939;
}

// Table Headers
.v-data-table-header__content {
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 1px;
}

// Table Fonts
table {
  font-size: 14px;
}

// Table content
.v-list-item__content {
  white-space: nowrap;
  overflow: visible;
}

// Table Footer
.v-data-table-footer {
  font-size: 14px;
  justify-content: space-between !important;
  padding: 12px 18px !important;
  border-top: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
}
.v-data-table-footer .v-field__input {
  font-size: 14px;
}
.v-data-table-footer .v-field__outline__start, .v-data-table-footer .v-field__outline__end {
  border-color: rgba(var(--v-theme-on-background),0.1) !important;
}
.v-data-table-footer__pagination .v-btn {
  width: 2rem;
  height: 2rem;
  color: rgb(var(--v-theme-on-background)) !important;
}
.v-data-table-footer__items-per-page {
  padding-inline-end: 8px !important;
}
.v-data-table-footer__items-per-page>span {
  color: rgba(var(--v-theme-on-background),0.5);
  padding-inline-end: 12px !important;
  font-size: 13px;
}
.v-data-table-footer__info {
  display: flex;
  background: rgba(var(--v-theme-on-background),0.02);
  color: rgba(var(--v-theme-on-background),0.5);
  padding: 4px 16px !important;
  border-radius: 40px;
  font-size: 12px;
}

// Search styles
.v-field.v-field--prepended {
  --v-field-padding-start: 8px;
  padding-left: 16px;
}

// Links
.link {
  text-decoration: none;
  background-image: linear-gradient(currentColor,currentColor);
  background-size: 0 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size .15s ease;
}
.link:hover {
  background-size: 100% 1px;
  cursor: pointer;
}
.v-theme--light .link {
  color: rgb(var(--v-theme-primary));
}
.v-theme--light .link:hover {
  color: rgb(var(--v-theme-secondary));
}
.v-theme--dark .link {
  color: rgb(var(--v-theme-secondary));
}
.v-theme--dark .link:hover {
  color: rgb(var(--v-theme-on-background));
}


// Tooltips
.v-tooltip>.v-overlay__content {
  background: rgba(var(--v-theme-surface),0.9) !important;
  color: rgba(var(--v-theme-on-surface),0.9) !important;
  border: 1px solid rgba(var(--v-theme-on-surface),0.2);
  box-shadow: rgba(0, 0, 0, 0.03) 0 1px 10px 10px !important;
  font-weight: 500;
  border-radius: 20px !important;
  padding: 6px 14px;
  backdrop-filter: blur(12px);
  pointer-events: all !important;
}

// Upload Snackbar
.upload-snackbar .v-snackbar__content {
  padding: 2px;
}

// Scrollbar
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
::-webkit-scrollbar-track {
  background-color: rgb(var(--v-theme-background));
}
::-webkit-scrollbar-thumb {
  background-color: rgba(var(--v-theme-on-background), 0.33);
  border-radius: 2px;
  min-height: 5px;
}
::-webkit-scrollbar-corner {
  background-color: transparent;
}

// Alerts
.v-alert-title {
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}
.v-alert__prepend {
  margin-top: 4px;
  margin-inline-end: 12px;
}
.v-alert__content {
  font-size: 14px;
}
// Make Alert Close icon same color as alert
.v-alert__close .v-btn {
  color: currentColor !important;
}


.bg-on-surface-variant {
  background-color: rgb(var(--v-theme-on-surface-variant)) !important;
  color: rgb(var(--v-theme-surface-variant)) !important;
}

// Positions
.pos-relative {
  position: relative !important;
}

// Sizing
.max-h-100 {
  max-height: 100%;
}

// Sizing
.max-h-100 {
  max-height: 100%;
}

// Text styles
.text-cursor-pointer {
  cursor: pointer;
}

.break-word {
  word-break: break-word;
}

// Vuetify has a bug where any element with the attribute "disabled" forces the default cursor
// even if the value of this attribute is "false".
// This causes text in window items to appear to be unselectable.
[disabled=false] {
  cursor: unset;
}

// Opacity
.opacity-100 {
  opacity: 1 !important;
}

// Light background
.bg-light {
  background-color: rgba(var(--v-theme-on-background), 0.02);
}

// Preview Dialog
.preview-card {
  background: rgb(9 9 9) !important;
}

// Preview Slider Buttons
.v-window__controls .v-btn {
  border: 1px solid rgba(var(--v-border-color), 0.1);
  transition: all 0.1s ease-in-out;
  background: transparent;
}
.v-window__controls .v-btn:hover {
  border: 1px solid rgba(var(--v-border-color), 0.3);
}

// Card Preview Img
.card-preview-img {
  transition: transform 0.15s ease-in-out;
  border-bottom: 1px solid rgba(var(--v-theme-on-background), 0.02);
}
.card-preview-img:hover {
  transform: scale(1.02);
}

// Card Preview Icon
.card-preview-icon {
  min-height: 240px;
  border-bottom: 1px solid rgba(var(--v-theme-on-background), 0.02);
}
.card-preview-icon img {
  border-radius: 10%;
}
.card-preview-icon, .card-preview-icon img {
  transition: all 0.15s ease-in-out;
}
.card-preview-icon:hover {
  background: none;
  border-bottom-color: rgba(var(--v-theme-on-background), 0.04);
}
.card-preview-icon:hover img {
  transform: scale(1.3);
  border-radius: 50%;
}
.v-theme--light .card-preview-icon:hover img {
  background-color: rgb(var(--v-theme-blue6));
}
.v-theme--dark .card-preview-icon:hover img {
  background-color: rgb(var(--v-theme-on-background));
}

// Fix label position on fields
.v-field--variant-outlined .v-field__outline .v-field__outline__start {
  flex-basis: calc(var(--v-field-padding-start) - 4px) !important;
}

.no-pointer-events {
  pointer-events: none;
}

.white-link {
  color: #fff;

  &:visited {
    color: #fff;
  }
}

// Login and Signup Background
.signup-background::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  opacity: 0.15;
  pointer-events: none; /* This will allow mouse events to pass through the pseudo-element */
}

.v-theme--dark .signup-background::before {
  opacity: 0.05;
}

.loader {
  background: rgb(var(--v-theme-background));
}

.v-field .v-field-label:has(~ .v-field__input:required)::after,
.v-field .v-field-label:has(~ .v-field__input > input:required)::after {
  content: "*";
}

// fix for the table footer info width being too big for its small content
// a huge min-width was added in Vuetify 3.4.11
// https://github.com/vuetifyjs/vuetify/commit/a5254a2bada424c0bbdbc9d86fcea2afb6a86dc2
.v-data-table-footer__info {
  min-width: unset !important;
}

@media (min-width: 600px) {
  .signup-background::before {
    background-image: url('../assets/icon-bg.svg');
    background-position: 40% center;
  }
}

@media (max-width: 959px) {
  .no-position {
    position: unset !important;
  }
}

@media (min-width: 960px) {
  .signup-background::before {
    background-position: 35% center;
  }
}

@media (min-width: 1264px) {
  .signup-background::before {
    background-position: 30% center;
  }
}

@media (min-width: 1400px) {
  .signup-background::before {
    background-position: 15% center;
  }
}

@media (min-width: 1600px) {
  .signup-background::before {
    background-position: 10% center;
  }
}

@media (min-width: 1904px) {
  .signup-background::before {
    background-position: 5% center;
  }
}

// Improve container width for wide displays
@media (min-width: 2560px) {
  .v-container {
      max-width: 1800px !important;
  }
}