yaak/src-web/main.css at main · littlezo/yaak · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html,
  body,
  #root {
    @apply w-full h-full overflow-hidden text-text bg-surface;
  }

  :root {
    /* Must default these variables or the default will break */
    --font-family-interface: '';
    --font-family-editor: '';
  }

  /* Never show ligatures */
  :root {
    font-variant-ligatures: none;
  }

  /* The following fixes weird font rendering issues on Linux */
  html[data-platform="linux"] {
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
  }

  ::selection {
    @apply bg-selection;
  }

  /* Disable user selection to make it more "app-like" */
  :not(a),
  :not(input):not(textarea),
  :not(input):not(textarea)::after,
  :not(input):not(textarea)::before {
    @apply select-none cursor-default;
  }

  input,
  textarea {
    &::placeholder {
      @apply text-placeholder;
    }
  }

  a,
  a[href] * {
    @apply cursor-pointer !important;
  }

  table th {
    @apply text-left;
  }

  :not(iframe) {
    &::-webkit-scrollbar,
    &::-webkit-scrollbar-corner {
      @apply w-[8px] h-[8px] bg-transparent;
    }

    &::-webkit-scrollbar-track {
      @apply bg-transparent;
    }

    &::-webkit-scrollbar-thumb {
      @apply bg-text-subtlest rounded-[4px] opacity-20;
    }

    &::-webkit-scrollbar-thumb:hover {
      @apply opacity-40 !important;
    }
  }

  .hide-scrollbars {
    &::-webkit-scrollbar-corner,
    &::-webkit-scrollbar {
      @apply hidden !important;
    }
  }

  .rtl {
    direction: rtl;
  }

  :root {
    color-scheme: light dark;
    --transition-duration: 100ms ease-in-out;
    --color-white: 255 100% 100%;
    --color-black: 255 0% 0%;
  }
}