YesPlayMusic/packages/web/styles/global.css

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .app-region-drag {
    -webkit-app-region: drag;
  }

  .app-region-no-drag {
    -webkit-app-region: no-drag;
  }

  .no-drag {
    -webkit-user-drag: none;
  }

  .btn-pressed-animation {
    @apply transition-transform duration-300;
  }
  .btn-pressed-animation:active {
    @apply scale-95;
  }

  .btn-hover-animation {
    @apply relative transform;
  }
  .btn-hover-animation:after {
    @apply absolute top-0 left-0 z-[-1] h-full w-full scale-[.92] rounded-lg opacity-0 transition-all duration-300;
    content: '';
  }
  .btn-hover-animation:hover::after {
    @apply scale-100 opacity-100;
  }

  .line-clamp-1 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-all;
    -webkit-line-clamp: 1;
  }

  .line-clamp-2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-all;
    -webkit-line-clamp: 2;
  }

  .line-clamp-3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-all;
    -webkit-line-clamp: 3;
  }
}

@font-face {
  font-family: Barlow;
  font-weight: normal;
  src: url('@/web/assets/fonts/Barlow-Regular.woff2') format('woff2'),
    url('@/web/assets/fonts/Barlow-Regular.ttf') format('truetype');
}
@font-face {
  font-family: Barlow;
  font-weight: medium;
  src: url('@/web/assets/fonts/Barlow-Medium.woff2') format('woff2'),
    url('@/web/assets/fonts/Barlow-Medium.ttf') format('truetype');
}
@font-face {
  font-family: Barlow;
  font-weight: 600;
  src: url('@/web/assets/fonts/Barlow-SemiBold.woff2') format('woff2'),
    url('@/web/assets/fonts/Barlow-SemiBold.ttf') format('truetype');
}
@font-face {
  font-family: Barlow;
  font-weight: bold;
  src: url('@/web/assets/fonts/Barlow-Bold.woff2') format('woff2'),
    url('@/web/assets/fonts/Barlow-Bold.ttf') format('truetype');
}
@font-face {
  font-family: Barlow;
  font-weight: 800;
  src: url('@/web/assets/fonts/Barlow-ExtraBold.woff2') format('woff2'),
    url('@/web/assets/fonts/Barlow-ExtraBold.ttf') format('truetype');
}
@font-face {
  font-family: Barlow;
  font-weight: 900;
  src: url('@/web/assets/fonts/Barlow-Black.woff2') format('woff2'),
    url('@/web/assets/fonts/Barlow-Black.ttf') format('truetype');
}

body,
input {
  font-family: Roboto, ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei,
    Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, microsoft uighur,
    sans-serif;
}

body {
}

html {
}

button,
input {
  @apply outline-none;
}

a,
button {
  cursor: default;
}

img,
a {
  -webkit-user-drag: none;
}

* {
  -webkit-font-smoothing: antialiased;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}