corekit-ui/src/lib/styles/layout.css at main · Villy-P/corekit-ui · 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
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
@import 'tailwindcss';

@utility flex-center {
    @apply flex items-center justify-center;
}

@custom-variant dark (&:where(.dark, .dark *));

@theme {
    --color-main-background: var(--vpcui-main-background);
    --color-sub-background: var(--vpcui-sub-background);
    --color-sub-background-hover: var(--vpcui-sub-background-hover);
    --color-sub-background-border: var(--vpcui-sub-background-border);
    --color-sub-background-accent: var(--vpcui-sub-background-accent);
    --color-main-text: var(--vpcui-main-text);
    --color-sub-text: var(--vpcui-sub-text);
    --color-contrast-text: var(--vpcui-contrast-text);
    --color-form-background: var(--vpcui-form-background);
    --color-form-hover: var(--vpcui-form-hover);
    --color-form-border: var(--vpcui-form-border);
    --color-sub-background-border-hover: var(--vpcui-sub-background-border-hover);
    --color-link: var(--vpcui-link);

    --color-primary: var(--vpcui-primary);
    --color-secondary: var(--vpcui-secondary);
    --color-accent: var(--vpcui-accent);

    --color-loader-btn-color: var(--vpcui-loader-btn-color);

    --color-primary-50: #eef2ff;
    --color-primary-100: #e0e7ff;
    --color-primary-200: #c7d2fe;
    --color-primary-300: #818cf8;
    --color-primary-400: #6366f1;
    --color-primary-500: #4f46e5;
    --color-primary-600: #4338ca;
    --color-primary-700: #3730a3;
    --color-primary-800: #312e81;
    --color-primary-900: #1e1b55;
    --color-primary-950: #12113a;

    --color-secondary-50: #f5f3ff;
    --color-secondary-100: #ede9fe;
    --color-secondary-200: #ddd6fe;
    --color-secondary-300: #a78bfa;
    --color-secondary-400: #8b5cf6;
    --color-secondary-500: #7c3aed;
    --color-secondary-600: #6d28d9;
    --color-secondary-700: #5b21b6;
    --color-secondary-800: #4c1d95;
    --color-secondary-900: #2e125c;
    --color-secondary-950: #1a0a3a;

    --color-accent-50: #ecfeff;
    --color-accent-100: #cffafe;
    --color-accent-200: #a5f3fc;
    --color-accent-300: #22d3ee;
    --color-accent-400: #06b6d4;
    --color-accent-500: #0891b2;
    --color-accent-600: #0e7490;
    --color-accent-700: #155e75;
    --color-accent-800: #164e63;
    --color-accent-900: #0c2f3d;
    --color-accent-950: #061e28;

    --font-display: var(--vpcui-font-display);
    --font-body: var(--vpcui-font-body);
    --font-mono: var(--vpcui-font-mono);
}

:root {
    --vpcui-light-50: #FFFFFF;
    --vpcui-light-100: #F5F5F5;
    --vpcui-light-150: #EEEEEE;
    --vpcui-light-200: #D4D4D4;
    --vpcui-light-250: #C4C4C4;
    --vpcui-light-300: #6B6B6B;

    --vpcui-light-950: #111;

    --vpcui-main-background: var(--vpcui-light-50);
    --vpcui-sub-background: var(--vpcui-light-100);
    --vpcui-sub-background-hover: var(--vpcui-light-150);
    --vpcui-sub-background-border: var(--vpcui-light-200);
    --vpcui-sub-background-accent: var(--vpcui-light-50);
    --vpcui-sub-background-border-hover: var(--vpcui-light-250);
    --vpcui-main-text: var(--vpcui-light-950);
    --vpcui-sub-text: var(--vpcui-light-300);
    --vpcui-contrast-text: var(--vpcui-light-950);
    --vpcui-form-background: var(--vpcui-light-50);
    --vpcui-form-hover: var(--vpcui-light-200);
    --vpcui-form-border: var(--vpcui-light-250);

    --vpcui-loader-btn-color: rgba(255, 255, 255, 0.25);

    --vpcui-font-display: ui-serif, Georgia, serif;
    --vpcui-font-body: ui-sans-serif, system-ui, sans-serif;
    --vpcui-font-mono: ui-monospace, monospace;

    --vpcui-link: #2673f1;
}

html.dark {
    --vpcui-dark-50: #121212;
    --vpcui-dark-100: #1E1E1E;
    --vpcui-dark-125: #212121;
    --vpcui-dark-150: #2A2A2A;
    --vpcui-dark-200: #3A3A3A;
    --vpcui-dark-250: #4A4A4A;
    --vpcui-dark-300: #A0A0A0;

    --vpcui-dark-950: #F5F5F5;

    --vpcui-main-background: var(--vpcui-dark-50);
    --vpcui-sub-background: var(--vpcui-dark-100);
    --vpcui-sub-background-hover: var(--vpcui-dark-150);
    --vpcui-sub-background-border: var(--vpcui-dark-200);
    --vpcui-sub-background-accent: var(--vpcui-dark-150);
    --vpcui-sub-background-border-hover: var(--vpcui-dark-250);
    --vpcui-main-text: var(--vpcui-dark-950);
    --vpcui-sub-text: var(--vpcui-dark-300);
    --vpcui-contrast-text: var(--vpcui-dark-50);
    --vpcui-form-background: var(--vpcui-dark-150);
    --vpcui-form-border: var(--vpcui-dark-250);
    --vpcui-form-hover: var(--vpcui-dark-200);

    --vpcui-loader-btn-color: rgba(0, 0, 0, 0.25);

    --vpcui-link: #4a90e2;
}

html {
    background-color: var(--color-main-background);
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--color-sub-background-hover) transparent;
}

*::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background-color: var(--color-sub-background-hover);
    border-radius: 999px;
}

*::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-main-text);
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

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