sposchedule

1
@import 'primeicons/primeicons.css';
2

3
/* @import url("https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap"); */
4

5
@font-face {
6
  font-family: 'Rubik';
7
  src: url('../fonts/Rubik/Rubik-Regular.ttf') format('truetype');
8
  font-weight: 400;
9
  font-style: normal;
10
}
11

12
@font-face {
13
  font-family: 'Rubik Medium';
14
  src: url('../fonts/Rubik/Rubik-Medium.ttf') format('truetype');
15
  font-weight: 500;
16
  font-style: normal;
17
}
18

19
@font-face {
20
  font-family: 'Rubik SemiBold';
21
  src: url('../fonts/Rubik/Rubik-SemiBold.ttf') format('truetype');
22
  font-weight: 600;
23
  font-style: normal;
24
}
25

26
@font-face {
27
  font-family: 'Rubik Bold';
28
  src: url('../fonts/Rubik/Rubik-Bold.ttf') format('truetype');
29
  font-weight: 700;
30
  font-style: normal;
31
}
32

33
@font-face {
34
  font-family: 'Rubik Black';
35
  src: url('../fonts/Rubik/Rubik-Black.ttf') format('truetype');
36
  font-weight: 800;
37
  font-style: normal;
38
}
39

40
/* @layer tailwind-base, primevue, tailwind-utilities; */
41

42
/* @layer tailwind-base { */
43
/* } */
44
@tailwind base;
45
@tailwind components;
46
@tailwind utilities;
47

48
/* Primary and Surface Palettes */
49
:root {
50
  --p-primary-50: #eff6ff; /* blue-50 */
51
  --p-primary-100: #dbeafe; /* blue-100 */
52
  --p-primary-200: #bfdbfe; /* blue-200 */
53
  --p-primary-300: #93c5fd; /* blue-300 */
54
  --p-primary-400: #60a5fa; /* blue-400 */
55
  --p-primary-500: #3b82f6; /* blue-500 */
56
  --p-primary-600: #2563eb; /* blue-600 */
57
  --p-primary-700: #1d4ed8; /* blue-700 */
58
  --p-primary-800: #1e40af; /* blue-800 */
59
  --p-primary-900: #1e3a8a; /* blue-900 */
60
  --p-primary-950: #172554;
61
  --p-surface-0: #ffffff;
62
  --p-surface-50: #fafafa;
63
  --p-surface-100: #f4f4f5;
64
  --p-surface-200: #e4e4e7;
65
  --p-surface-300: #d4d4d8;
66
  --p-surface-400: #a1a1aa;
67
  --p-surface-500: #71717a;
68
  --p-surface-600: #52525b;
69
  --p-surface-700: #3f3f46;
70
  --p-surface-800: #27272a;
71
  --p-surface-900: #18181b;
72
  --p-surface-950: #09090b;
73
  --p-content-border-radius: 6px;
74
}
75

76
/* Light Mode */
77
:root {
78
  --p-primary-color: var(--p-primary-500);
79
  --p-primary-contrast-color: var(--p-surface-0);
80
  --p-primary-hover-color: var(--p-primary-600);
81
  --p-primary-active-color: var(--p-primary-700);
82
  --p-content-border-color: var(--p-surface-200);
83
  --p-content-hover-background: var(--p-surface-100);
84
  --p-content-hover-color: var(--p-surface-800);
85
  --p-highlight-background: var(--p-primary-50);
86
  --p-highlight-color: var(--p-primary-700);
87
  --p-highlight-focus-background: var(--p-primary-100);
88
  --p-highlight-focus-color: var(--p-primary-800);
89
  --p-text-color: var(--p-surface-700);
90
  --p-text-hover-color: var(--p-surface-800);
91
  --p-text-muted-color: var(--p-surface-500);
92
  --p-text-hover-muted-color: var(--p-surface-600);
93
}
94

95
/* 
96
* Dark Mode
97
* Change the .p-dark to match the darkMode in tailwind.config.
98
* For example; 
99
*  darkMode: ['selector', '[class*="app-dark"]'] 
100
*  should match;
101
* :root.app-dark
102
*/
103
:root.p-dark {
104
  --p-primary-color: var(--p-primary-400);
105
  --p-primary-contrast-color: var(--p-surface-900);
106
  --p-primary-hover-color: var(--p-primary-300);
107
  --p-primary-active-color: var(--p-primary-200);
108
  --p-content-border-color: var(--p-surface-700);
109
  --p-content-hover-background: var(--p-surface-800);
110
  --p-content-hover-color: var(--p-surface-0);
111
  --p-highlight-background: color-mix(
112
    in srgb,
113
    var(--p-primary-400),
114
    transparent 84%
115
  );
116
  --p-highlight-color: rgba(255, 255, 255, 0.87);
117
  --p-highlight-focus-background: color-mix(
118
    in srgb,
119
    var(--p-primary-400),
120
    transparent 76%
121
  );
122
  --p-highlight-focus-color: rgba(255, 255, 255, 0.87);
123
  --p-text-color: var(--p-surface-0);
124
  --p-text-hover-color: var(--p-surface-0);
125
  --p-text-muted-color: var(--p-surface-400);
126
  --p-text-hover-muted-color: var(--p-surface-300);
127
}
128