index.css

@import "./fonts.css";
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {

    /* Global Styles */
    html {
      /* @apply overflow-x-hidden; */
      scroll-behavior: smooth;
      scroll-padding-top: 65px;
    }
  
    body {
      @apply m-0 p-0 overflow-x-hidden font-Nunito h-full min-w-[500px]  
      transition-all duration-300 ease-linear
      dark:text-whitePF 
           text-blueGrayPF  
      dark:bg-darkPF
           bg-whitePF;
      background: url('./assets/bg/green.png') no-repeat; 
      background-size: cover;
      background-position: -200px 0;
      
    }
  
    img{
      @apply max-w-full select-none;
      -webkit-user-drag: none;
      user-drag: none;
      -webkit-touch-callout: none;
    }

    button, input{
      @apply focus:outline-none;
    }

    ol, ul{
      list-style: initial;
    }

    input[type="search"]::-webkit-search-cancel-button {
      display: none;
    }

    select{
      @apply outline-none focus:outline-none appearance-none;
      -moz-appearance: none;
      -webkit-appearance: none;
    }


    /* Headings & Subtitles */
    h1{
      @apply font-Nunito font-black text-5xl;
    }

    h2{
      @apply font-Nunito font-black text-[2.5rem] leading-[3rem];
    }

    h3{
      @apply font-Nunito font-black text-[2rem] leading-[2.375rem];
    }
    
    h4{
      @apply font-Nunito font-black text-2xl;
    }
    
    h5{
      @apply font-Nunito font-black text-xl;
    }
    
    h6{
      @apply font-Nunito font-black text-base;
    }

    .subtitle1{
      @apply font-Nunito font-black text-2xl;
    }
    
    .subtitle2{
      @apply font-Nunito font-black text-xl;
    }


    /* Remove Input Arrows */
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }

    input[type=number] {
      -moz-appearance: textfield;
    }

    /* Selection Color */
    ::selection {
      @apply bg-green3PF;
    }

    ::-moz-selection {
      @apply bg-green3PF;
    }

}


@layer components {

  /* ----------------------------------------------------------------------------------------- */
  /* Buttons */

  .button-global{
    @apply font-Nunito font-bold cursor-pointer rounded-full;
  }

  .button-filled{
    @apply button-global 
    py-2 pl-8 pr-4 
    w-28 h-8 
    text-white leading-4;
    background: url( './assets/icons/buttons/button-white.svg' ) 17% 50% no-repeat, linear-gradient(214.8deg, #35DCB3 5.04%, #10C7A2 76.98%);
  }

  .button-filled-big{
    @apply button-global 
    py-3 px-6 
    w-32 h-12 
    text-white text-2xl leading-4 
    bg-greenLG;
  }

  .button-unfilled{
    @apply button-global 
    border border-green2PF 
    py-2 pl-8 pr-4 
    w-28 h-8 
    text-green3PF leading-3 
    bg-[url('./assets/icons/buttons/button-green.svg')] bg-no-repeat bg-[left_16px_center];
  }

  .button-icon{
    @apply button-global 
    rounded-lg border border-green2PF 
    p-2 w-8 h-8 
    text-green3PF 
    bg-[url('./assets/icons/buttons/button-green.svg')] bg-no-repeat bg-center;
  }

  .button-timeframe{
    @apply w-10 h-6 pr-1.5
    flex justify-center items-center
    cursor-pointer font-bold text-xs
    backdrop-blur-sm rounded-lg border
    dark:bg-[rgba(41,54,83,0.5)] 
         bg-white2PF 
  dark:border-borderColor 
       border-grayPF
    dark:bg-[url('./assets/icons/arrow-dropdown-right.svg')]
         bg-[url('./assets/icons/arrow-dropdown-right-dark.svg')]
    bg-no-repeat bg-[right_5px_center];
  }

  /* ----------------------------------------------------------------------------------------- */


  /* ----------------------------------------------------------------------------------------- */
  /* Inputs */

  input[type='text'], .input-global{
    @apply text-sm 
    border rounded-lg 
    w-96 h-[3.19rem] p-4
    dark:bg-darkBlueBG 
         bg-white 
    dark:border-borderColor 
         border-grayPF 
    dark:text-grayTextDark
         text-grayTextWhite;
  }

  input[type='search']{
    @apply input-global
    dark:bg-[url('./assets/icons/search.svg')] 
         bg-[url('./assets/icons/search-dark.svg')]
    bg-no-repeat bg-[right_16px_center] bg-[length:16px];
  }
  /* ----------------------------------------------------------------------------------------- */


  /* ----------------------------------------------------------------------------------------- */
  /* Select */
  
  select{
      @apply border rounded-lg
      w-40 h-[3.19rem] p-4
      text-sm font-extrabold 
      dark:bg-darkBlueBG 
           bg-white  
      dark:border-borderColor 
           border-grayPF 
        dark:bg-[url('./assets/icons/arrow-dropdown.svg')]
             bg-[url('./assets/icons/arrow-dropdown-dark.svg')]
        bg-no-repeat bg-[right_8px_center];
    }
    /* ----------------------------------------------------------------------------------------- */


    /* ----------------------------------------------------------------------------------------- */
    /* Checkbox */

    .checkbox {
      @apply relative;
    }

    .checkbox label {
      @apply bg-grayPF rounded-lg cursor-pointer absolute
      w-6 h-6
      left-0 top-0 pl-6;
    }
    
    .checkbox label:after {
      @apply opacity-0 absolute 
      w-3 h-1.5 
      left-1.5 top-2 
      border-2 border-white border-t-0 border-r-0 
      content-['']
      transform rotate-[-45deg];
    }
    
    .checkbox input[type="checkbox"] {
      @apply invisible;
    }
    
    .checkbox input[type="checkbox"]:checked + label {
      @apply bg-green2LG;
    }
    
    .checkbox input[type="checkbox"]:checked + label:after {
      @apply opacity-100;
    }
    /* ----------------------------------------------------------------------------------------- */


    /* ----------------------------------------------------------------------------------------- */
    /* Header Elements */
    
    .gas{
      @apply px-8 w-fit cursor-pointer font-extrabold 
        dark:bg-[url('./assets/icons/gas.svg'),url('./assets/icons/arrow-down.svg')] 
             bg-[url('./assets/icons/gas-dark.svg'),url('./assets/icons/arrow-down-dark.svg')]
        bg-no-repeat;
      background-position: left 4px center, right 4px center;
    }

    .currency{
      @apply w-fit cursor-pointer font-extrabold
      pl-2 pr-7
      dark:bg-[url('./assets/icons/arrow-down.svg')]
            bg-[url('./assets/icons/arrow-down-dark.svg')]
      bg-no-repeat bg-[right_4px_center];
    }

    .help{
      @apply cursor-pointer font-extrabold 
      w-fit h-6 px-7
      dark:bg-[url('./assets/icons/help.svg'),url('./assets/icons/arrow-down.svg')]
           bg-[url('./assets/icons/help-dark.svg'),url('./assets/icons/arrow-down-dark.svg')]
      bg-no-repeat;
      background-position: left 4px center, right 4px center; 
    }

    /* Light/Dark Theme Toggle */
    .toggle {
      @apply relative cursor-pointer bg-green3PF 
      h-7 w-12 p-1 
      border border-borderColor rounded-[2.5rem]
      transition duration-300 ease-linear;
    }

    .toggle.enabled {
      @apply bg-[#F7FFFB] border border-[#D0FAE4];
    }
    
    .toggle::before {
      @apply content-[''] absolute block z-20 
      w-4 h-4 mt-px 
      rounded-[1.875rem] bg-[rgba(255,255,255,0.73)] 
      translate-x-0 transition-all duration-300 ease-linear;
    }
    
    .toggle.enabled::before {
      @apply translate-x-[1.438rem] bg-[#A7F3CF];
    }
    
    .toggle input {
      @apply opacity-0 absolute top-0;
    }
    
    .toggle .icons {
      @apply flex justify-between items-center h-full;
    }
    
    .toggle .icons svg {
      @apply w-5 h-5 z-0;
    }
    /* ----------------------------------------------------------------------------------------- */
    
    /* Sidebar */
    .address{
      @apply cursor-pointer
      dark:bg-[url('./assets/icons/arrow-dropdown.svg')] 
           bg-[url('./assets/icons/arrow-dropdown-dark.svg')]
      bg-no-repeat bg-[right_52px_center];
    }

    .dashboard{
      @apply cursor-pointer pl-[3.375rem]
      dark:bg-[url('./assets/icons/home.svg')] 
           bg-[url('./assets/icons/home-dark.svg')]
      bg-no-repeat bg-[left_20px_center];
    }

    .settings{
      @apply cursor-pointer pl-[3.375rem]
      dark:bg-[url('./assets/icons/settings.svg')] 
           bg-[url('./assets/icons/settings-dark.svg')]
      bg-no-repeat bg-[left_20px_center];
    }

    /* Sidebar Links */
    .polywrap-link{
      @apply cursor-pointer pl-[2.125rem] h-10 flex items-center
      dark:bg-[url('./assets/icons/sidebar/polywrap.svg')] 
           bg-[url('./assets/icons/sidebar/polywrap-dark.svg')]
      bg-no-repeat bg-[left_center];
    }

    .docs-link{
      @apply cursor-pointer pl-[2.125rem] h-10 flex items-center
      dark:bg-[url('./assets/icons/sidebar/docs.svg')] 
           bg-[url('./assets/icons/sidebar/docs-dark.svg')]
      bg-no-repeat bg-[left_center];
    }

    .support-link{
      @apply cursor-pointer pl-[2.125rem] h-10 flex items-center
      dark:bg-[url('./assets/icons/sidebar/support.svg')] 
           bg-[url('./assets/icons/sidebar/support-dark.svg')]
      bg-no-repeat bg-[left_center];
    }

    /* Sidebar Socials */
    .twitter{
      @apply cursor-pointer h-6 w-6
      dark:bg-[url('./assets/icons/sidebar/twitter.svg')] 
           bg-[url('./assets/icons/sidebar/twitter-dark.svg')]
      bg-no-repeat bg-[left_center];
    }

    .github{
      @apply cursor-pointer h-6 w-6
      dark:bg-[url('./assets/icons/sidebar/github.svg')] 
           bg-[url('./assets/icons/sidebar/github-dark.svg')]
      bg-no-repeat bg-[left_center];
    }

    .discord{
      @apply cursor-pointer h-6 w-6
      dark:bg-[url('./assets/icons/sidebar/discord.svg')] 
           bg-[url('./assets/icons/sidebar/discord-dark.svg')]
      bg-no-repeat bg-[left_center];
    }

    /* Container */
    .container{
      @apply p-6 rounded-2xl border
      dark:shadow-[0_12px_24px_rgba(0,0,0,0.1)]
           shadow-[0_12px_24px_rgba(0,0,0,0.04)]
      dark:bg-[rgba(41,54,83,0.5)]
           bg-[rgba(249,250,252,0.9)] 
      dark:border-borderColor 
           border-grayPF;
    }

    .row{
      @apply h-[4.5rem] border flex items-center px-6
      dark:border-borderColor 
           border-grayPF;
    }

    /* Assets Icons */
    .assets-fields{
      @apply cursor-pointer w-6 h-6
      dark:bg-[url('./assets/icons/tune.svg')]
           bg-[url('./assets/icons/tune-dark.svg')]
      bg-no-repeat;
    }

    .unfold{
      @apply cursor-pointer w-6 h-6
      dark:bg-[url('./assets/icons/unfold.svg')]
           bg-[url('./assets/icons/unfold-dark.svg')]
      bg-no-repeat;
    }

    .arrow-right{
      @apply cursor-pointer w-4 h-4
      dark:bg-[url('./assets/icons/arrow-right.svg')]
           bg-[url('./assets/icons/arrow-right-dark.svg')]
      bg-no-repeat bg-[center];
    }
}


@layer utilities{
  /* .required:after {
    content:" *";
    color: #FE1D1D;
    font-size: 0.625rem;
    vertical-align: text-bottom;
  } */

  /* .ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  } */

}