-
Notifications
You must be signed in to change notification settings - Fork 20
/
index.css
192 lines (161 loc) · 5.86 KB
/
index.css
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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
.chevron {
background-size: 16px;
background-repeat: no-repeat;
}
.chevron-down {
@apply chevron;
/* Refactoring UI Inc, https://github.com/tailwindlabs/heroicons/blob/master/LICENSE */
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="white"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" /></svg>');
}
.chevron-right {
@apply chevron;
/* Refactoring UI Inc, https://github.com/tailwindlabs/heroicons/blob/master/LICENSE */
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="white"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" /></svg>');
}
}
/* Themes */
:root {
--bg: theme("colors.me3.bg");
--tab: theme("colors.me3.tab");
--active: theme("colors.me3.active");
--hover: theme("colors.me3.hover");
}
.mass-effect-1 {
--bg: theme("colors.me1.bg");
--tab: theme("colors.me1.tab");
--active: theme("colors.me1.active");
--hover: theme("colors.me1.hover");
}
.mass-effect-2 {
--bg: theme("colors.me2.bg");
--tab: theme("colors.me2.tab");
--active: theme("colors.me2.active");
--hover: theme("colors.me2.hover");
}
.mass-effect-3 {
--bg: theme("colors.me3.bg");
--tab: theme("colors.me3.tab");
--active: theme("colors.me3.active");
--hover: theme("colors.me3.hover");
}
/* Scrollbar */
:root {
scrollbar-color: theme("colors.scroll-bar.fg") theme("colors.scroll-bar.bg");
}
::-webkit-scrollbar {
width: 11px;
height: 11px;
}
::-webkit-scrollbar-track {
background-color: theme("colors.scroll-bar.bg");
}
::-webkit-scrollbar-thumb {
@apply rounded-full;
background-color: theme("colors.scroll-bar.fg");
}
/* Title bar */
title-bar > button {
@apply rounded-none hover:bg-theme-hover cursor-auto select-none h-full w-[46px];
}
#minimize {
/* Microsoft, https://github.com/microsoft/vscode-codicons/blob/main/LICENSE */
background-image: url('data:image/svg+xml,<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="white"><path d="M14 8v1H3V8h11z"/></svg>');
background-repeat: no-repeat;
background-position: center;
background-size: 16px;
}
#maximize {
/* Microsoft, https://github.com/microsoft/vscode-codicons/blob/main/LICENSE */
background-image: url('data:image/svg+xml,<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="white"><path d="M3 3v10h10V3H3zm9 9H4V4h8v8z"/></svg>');
background-repeat: no-repeat;
background-position: center;
background-size: 16px;
}
#maximize.maximized {
/* Microsoft, https://github.com/microsoft/vscode-codicons/blob/main/LICENSE */
background-image: url('data:image/svg+xml,<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="white"><path d="M3 5v9h9V5H3zm8 8H4V6h7v7z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M5 5h1V4h7v7h-1v1h2V3H5v2z"/></svg>') !important;
}
#close {
@apply hover:bg-title-bar-close;
/* Microsoft, https://github.com/microsoft/vscode-codicons/blob/main/LICENSE */
background-image: url('data:image/svg+xml,<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="white"><path fill-rule="evenodd" clip-rule="evenodd" d="M7.116 8l-4.558 4.558.884.884L8 8.884l4.558 4.558.884-.884L8.884 8l4.558-4.558-.884-.884L8 7.116 3.442 2.558l-.884.884L7.116 8z"/></svg>');
background-repeat: no-repeat;
background-position: center;
background-size: 16px;
}
/* NavBar */
.navbar-chevron {
@apply chevron-right;
background-position: right 0.05rem center;
}
/* Select */
.select-chevron {
@apply !pr-5 chevron-down;
background-position: right 0.05rem center;
}
/* Table */
.table-chevron-down {
@apply chevron-down;
background-position: left 0.2rem center;
}
.table-chevron-right {
@apply chevron-right;
background-position: left 0.2rem center;
}
.table-row {
@apply flex-1 odd:bg-table-odd even:bg-table-even p-[1.5px] px-1;
}
/* Clipper */
.raw-plot-bg {
background: linear-gradient(0, theme("colors.table.even") 50%, theme("colors.table.odd") 50%);
background-size: 100% 46px;
background-repeat: repeat;
}
.raw-plot-row {
@apply p-[1.5px] px-1 w-full h-[23px];
}
.link {
@apply !pr-6;
/* Icons8, https://github.com/icons8/line-awesome/blob/master/LICENSE.md */
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="white"><path d="M18 5v2h5.563L11.28 19.281l1.438 1.438L25 8.437V14h2V5zM5 9v18h18V14l-2 2v9H7V11h9l2-2z"/></svg>');
background-repeat: no-repeat;
background-size: 18px;
background-position: right 0.05rem center;
}
/* Button */
.button {
@apply rounded-none bg-theme-bg hover:bg-theme-hover active:bg-theme-active cursor-pointer select-none px-1;
}
/* Inputs */
.input {
@apply rounded-none outline-none bg-theme-bg px-1;
}
.checkbox {
@apply appearance-none select-none rounded-none bg-origin-border bg-theme-bg hover:bg-theme-hover active:bg-theme-active;
width: 1.125rem;
height: 1.125rem;
}
.checkbox:checked {
/* Refactoring UI Inc, https://github.com/tailwindlabs/heroicons/blob/master/LICENSE */
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="white"><path d="M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z"/></svg>');
background-repeat: no-repeat;
background-position: center;
}
/* Notification */
.notification-animation {
@apply origin-left;
animation: notification 1500ms linear;
animation-fill-mode: forwards;
}
@keyframes notification {
from {
transform: scale3d(1, 1, 1);
}
to {
transform: scale3d(0, 1, 1);
}
}