File size: 2,194 Bytes
4d70170
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
html, body, #app {
  @apply dark:!bg-gray-800;
}

.vue-ui-high-contrast {
  #app {
    @apply !bg-black;
  }
}

/* Poppers */

.v-popper__popper.v-popper--theme-tooltip code {
  @apply bg-gray-500/50 rounded px-1 text-[11px] font-mono;
}

.v-popper--theme-dropdown {
  .vue-ui-dark-mode & {
    .v-popper__inner,
    .v-popper__arrow-outer {
      @apply border-gray-900;
    }

    .v-popper__inner {
      @apply bg-gray-800;
    }

    .v-popper__arrow-inner {
      @apply border-gray-800;
    }
  }
}

/* Scrollbars */

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

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

::-webkit-scrollbar-track:hover {
  @apply bg-gray-600/5 dark:bg-gray-600/10;
}

::-webkit-scrollbar-thumb {
  @apply bg-gray-300 hover:bg-gray-600 border-[3px] border-transparent bg-clip-padding rounded dark:bg-gray-700 dark:hover:bg-gray-500;
}

.vue-ui-dark-mode {
  scrollbar-color: theme('colors.gray.800') theme('colors.black');

  .selectable-item {
    @apply bg-gray-800 hover:bg-gray-900;

    &.selected {
      @apply hover:bg-green-600;
    }
  }
}

/* Buttons */

.vue-ui-button:not(.flat):not(.vue-ui-dropdown-button):not(.primary):not(.secondary):not(.danger) {
  @apply dark:bg-gray-700 dark:hover:!bg-gray-600;
}

.vue-ui-button.flat,
.vue-ui-dropdown-button {
  @apply hover:!bg-green-500/30;
}

.vue-ui-dark-mode {
  .vue-ui-group {
    .vue-ui-button:not(.flat) {
      @apply !bg-gray-700 hover:!bg-gray-600;

      &.selected {
        @apply !bg-green-700;
      }
    }
  }
}

/* Switch */

.vue-ui-dark-mode {
  .vue-ui-switch {
    > .content > .wrapper {
      @apply bg-gray-700;
    }
    &.selected {
      > .content > .wrapper {
        @apply bg-green-600;
      }
    }
  }
}

/* Tab */

.vue-ui-dark-mode {
  .vue-ui-group {
    .indicator .content {
      @apply !border-b-green-500;
    }
    .vue-ui-button.selected {
      @apply text-green-500;
    }
  }
}

/* Arrows */

.arrow {
  @apply inline-block w-0 h-0 transition-transform duration-150 ease-out text-gray-500;

  &.right {
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 6px solid currentColor;
  }
}