naive-ui/styles/theme/default.scss

@import './mixins/config.scss';

$body-background-color: #1a2033;

/**
 * genaral
 */
$tiny-height: 22px;
$small-height: 28px;
$default-height: 34px;
$medium-height: 34px;
$large-height: 40px;

$main-color: #63E2B7;

$fast-in-cubic-bezier: cubic-bezier(0.0, 0.0, 0.2, 1);
$slow-out-cubic-bezier: cubic-bezier(0.4, 0.0, 1, 1);

/**
 * n-input
 */
$small-input-font-size: 13px;
$default-input-font-size: 14px;
$large-input-font-size: 15px;
$input-background-color: rgba(255, 255, 255, 0.12);
$disabled-input-background-color:rgba(255,255,255,0.06);
$disabled-input-text-color: rgba(255, 255, 255, .2);
$disabled-input-placeholder-color: rgba(255, 255, 255, .2);
$input-caret-color: $main-color;
$input-placeholder-color: rgba(255, 255, 255, .4);
$focus-input-background-color: rgba(99, 226, 183, 0.1);
$input-border-radius: 6px;
$input-icon-color: rgba(255,255,255,0.2);

/**
 * n-button
 */
$button-margin: 0 12px 8px 0;
$button-border-radius: 6px;
$button-tiny-font-size: 12px;
$button-small-font-size: 14px;
$button-default-font-size: 16px;
$button-large-font-size: 16px;
$button-default-text-color: $main-color;
$button-default-border-color: $main-color;
$button-default-background-color: transparent;
$button-default-background-color--hover: rgba(99, 226, 183, .3);
$button-default-background-color--active: rgba(99, 226, 183, .2);
$button-primary-background-color: $main-color;
$button-primary-background-color--hover: rgb(103, 235, 190);
$button-primary-background-color--active: rgb(97, 218, 177);

/**
 * n-select
 */
$select-text-color: #ffffff;
$select-font-size--small: 14px;
$select-font-size--medium: 14px;
$select-font-size--large: 14px;
$select-background-color: rgba(255, 255, 255, 0.12);
$select-background-color--disabled:rgba(255,255,255,0.06);
$select-text-color--disabled: rgba(255, 255, 255, .2);
$select-placeholder-color--disabled: rgba(255, 255, 255, .2);
$select-placeholder-color: rgba(255, 255, 255, .4);
$select-background-color--active: rgba(99, 226, 183, 0.1);
$select-item-background-color--active: rgba(96, 220, 178, 0.3);
$select-border-radius: 8px;
$select-border-color--active: $main-color;

/**
 * n-pagination
 */
$pagination-color--disabled: rgba(255,255,255,.2);
$pagination-color: rgba(255,255,255,.6); 
$pagination-border-radius: 4px;
$pagination-color--active: $main-color;
$pagination-bagkround-color--active: rgba(99,226,183,0.3);

/**
 * n-table
 */
$table-font-size: 13px;

/**
 * n-checkbox
 */
$checkbox-background: transparent;
$checkbox-background--active: $main-color;
$checkbox-border-color: rgba(255, 255, 255, .4);
$checkbox-border-color--active: $main-color;

/**
 * n-input-number
 */
$input-number-border-radius: $input-border-radius;
$input-number-background-color: rgba(238, 238, 238, .1);
$input-number-color: #e9e9ec;
$input-number-button-background-color: rgba(238, 238, 238, .1);

$amazing-font-size: 20px;
$huge-font-size: 18px;
$large-font-size: 16px;
$regular-font-size: 14px;
$small-font-size: 12px;
$normal-font-size: $regular-font-size;
$meta-font-size: $small-font-size;

$primary-text-color: rgba(255, 255, 255, .8);
$regular-text-color: rgba(255, 255, 255, .6);
$secondary-text-color: rgba(255, 255, 255, .4);

$table-header-background-color: rgb(43,49,71);
$table-body-background-color: #1f263e;
$table-box-shadow: 0 3px 20px 6px rgba(0, 0, 0, .2);

$default-button-gradient: linear-gradient(14deg, rgba(120,205,104,1) 0%, rgba(20,166,165,1) 100%);
$default-text-gradient: linear-gradient(14deg, rgba(120,205,104,1) 0%, rgba(20,166,165,1) 100%);
$default-text-gradient-warning: linear-gradient(252deg, rgba(247,181,0,1) 0%, rgba(237,255,0,1) 100%);
$default-text-gradient-success: linear-gradient(14deg, rgba(120,205,104,1) 0%, rgba(20,166,165,1) 100%);
$default-text-gradient-danger: linear-gradient(214deg, rgba(224,32,32,1) 0%, rgba(250,100,0,1) 100%);

$default-cubic-bezier: cubic-bezier(.4, 0, .2, 1);

$default-font-family: 'Lato';

$scrollbar-color: rgba(255,255,255,0.2);
$scrollbar-color--hover: rgba(255,255,255,0.3);

@mixin scrollbar {
  &::-webkit-scrollbar {
    width: 5px;
  }
  &::-webkit-scrollbar-track {
    background: transparent;
  }
  &::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.2);
    border-radius: 2.5px;
  }
  &::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.3);
  }
}

@mixin input-border {
  &:focus:hover {
    box-shadow: inset 0 0 0px 1px $main-color, 0px 0px 10px 1px #366555;
  }
  &:hover {
    box-shadow: inset 0 0 0px 1px $main-color;
  }
  &:focus {
    box-shadow: inset 0 0 0px 1px $main-color;
    background-color: $focus-input-background-color;
  }
}

@mixin fade-up-transition($block) {
  .#{$namespace}-#{$block}--transition-enter, .#{$namespace}-#{$block}--transition-leave-to {
    opacity: 0;
    transform: translateY(4px);
  }
  .#{$namespace}-#{$block}--transition-leave-active {
    transition: opacity .3s $slow-out-cubic-bezier, transform .3s $slow-out-cubic-bezier;
  }
  .#{$namespace}-#{$block}--transition-enter-active {
    transition: opacity .3s $fast-in-cubic-bezier, transform .3s $fast-in-cubic-bezier;
  }
}

@mixin fade-in-scale-up-transition($block, $origin: inherit, $duration: .2s) {
  &.#{$namespace}-#{$block}--transition-enter-active,
  &.#{$namespace}-#{$block}--transition-leave-active {
    transform: scale(1);
    opacity: $duration;
  }
  &.#{$namespace}-#{$block}--transition-enter-active {
    transform-origin: $origin;
    transition: opacity $duration $fast-in-cubic-bezier, transform $duration $fast-in-cubic-bezier;
  }
  &.#{$namespace}-#{$block}--transition-enter, &.#{$namespace}-#{$block}--transition-leave-to {
    opacity: 0;
    transform-origin: $origin;
    transform: scale(.9);
  }
  &.#{$namespace}-#{$block}--transition-leave-to {
    transition: opacity $duration $slow-out-cubic-bezier, transform $duration $slow-out-cubic-bezier;
  }
}

@mixin fade-in-transition($block, $duration: .2s) {
  &.#{$namespace}-#{$block}--transition-enter-active,
  &.#{$namespace}-#{$block}--transition-leave-active {
    opacity: 1;
  }
  &.#{$namespace}-#{$block}--transition-enter-active {
    transition: opacity $duration $fast-in-cubic-bezier;
  }
  &.#{$namespace}-#{$block}--transition-enter, &.#{$namespace}-#{$block}--transition-leave-to {
    opacity: 0;
  }
  &.#{$namespace}-#{$block}--transition-leave-to {
    transition: opacity $duration $slow-out-cubic-bezier;
  }
}

@mixin fade-in-transition-ease-in-out($block, $duration: .2s) {
  &.#{$namespace}-#{$block}--transition-enter-active,
  &.#{$namespace}-#{$block}--transition-leave-active {
    opacity: 1;
  }
  &.#{$namespace}-#{$block}--transition-enter-active {
    transition: opacity $duration $default-cubic-bezier;
  }
  &.#{$namespace}-#{$block}--transition-enter, &.#{$namespace}-#{$block}--transition-leave-to {
    opacity: 0;
  }
  &.#{$namespace}-#{$block}--transition-leave-to {
    transition: opacity $duration $default-cubic-bezier;
  }
}