-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path_variables.scss
118 lines (100 loc) · 3.89 KB
/
_variables.scss
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
// sass/base/_variables.scss
$breakpoints: (
mobile: 600px,
tablet: 900px,
desktop: 1200px
);
// Thème par défaut (light)
:root {
/*--background-body: linear-gradient(to right, #9796f0, #fbc7d4);*/
/*--background-body: url('/static/img/mountain_light.png') no-repeat center center/cover;*/
--background-body:
linear-gradient(
to right,
rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0)
),
url('/static/img/mountain_light.png') no-repeat center center/cover;
--primary-color: #395886;
--secondary-color: #8AAEE0;
--tertiary-color: #9796f0;
--quaternary-color: #e0e0ee;
--danger-color: #bb2d3b;
--danger-border-color: #b02a37;
--text-light: #f8fbff;
--text-dark: #151426;
--text-secondary: #c3c2c8;
--text-muted: #f0f0f0;
--text-hover: #f3f8fe;
--background-body-start: rgba(3, 32, 48, 1);
--background-body-middle: rgba(2, 43, 66, 1);
--background-body-end: rgba(0, 53, 84, 1);
--background-calendar-header: var(--primary-color);
--background-calendar-weekdays: var(--quaternary-color);
--background-calendar-days-hover: var(--quaternary-color);
--background-month-list: var(--tertiary-color);
--background-month-list-hover: var(--primary-color);
--background-todo-item-hover: var(--quaternary-color);
--btn-bg: var(--primary-color);
--btn-hover-bg: var(--primary-color);
--btn-border-color: var(--secondary-color);
--btn-hover-border-color: var(--primary-color);
--btn-color: var(--secondary-color);
--btn-hover-color: var(--text-light);
--btn-active-bg: var(--primary-color);
--btn-active-border-color: var(--primary-color);
--custom-border: 1px solid var(--tertiary-color);
--border-radius: 4px;
--shadow: rgba(100, 100, 111, 0.2) 5px 1px 20px 5px;
--color-toggle-light: #fff;
--color-toggle-dark: #000;
--font-family-primary: 'Manrope', sans-serif;
--font-family-primary-extra-bold: 'Manrope', sans-serif;
--font-family-secondary: 'Outfit', sans-serif;
--font-family-secondary-black: 'Outfit', sans-serif;
}
// Thème sombre (dark)
body.dark {
/*--background-body: linear-gradient(90deg, rgba(26,29,41,1) 0%, rgba(61,63,74,1) 25%, rgba(125,132,145,1) 75%, rgba(177,178,181,1) 100%);*/
/*--background-body: url('/static/img/mountain_dark.png') no-repeat center center/cover;*/
--background-body:
linear-gradient(
to right,
rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0)
),
url('/static/img/mountain_dark.png') no-repeat center center/cover;
--primary-color: #1A1D29;
--secondary-color: #3D3F4A;
--tertiary-color: #7D8491;
--quaternary-color: #B1B2B5;
--danger-color: #bb2d3b;
--danger-border-color: #b02a37;
--text-light: #f8fbff;
--text-dark: #151426;
--text-secondary: #c3c2c8;
--text-muted: #f0f0f0;
--text-hover: #f3f8fe;
--background-body-start: rgba(3, 32, 48, 1);
--background-body-middle: rgba(2, 43, 66, 1);
--background-body-end: rgba(0, 53, 84, 1);
--background-calendar-header: var(--primary-color);
--background-calendar-weekdays: var(--quaternary-color);
--background-calendar-days-hover: var(--quaternary-color);
--background-month-list: var(--tertiary-color);
--background-month-list-hover: var(--primary-color);
--background-todo-item-hover: var(--quaternary-color);
--btn-bg: var(--primary-color);
--btn-hover-bg: var(--primary-color);
--btn-border-color: var(--secondary-color);
--btn-hover-border-color: var(--primary-color);
--btn-color: var(--secondary-color);
--btn-hover-color: var(--text-light);
--btn-active-bg: var(--primary-color);
--btn-active-border-color: var(--primary-color);
--custom-border: 1px solid var(--tertiary-color);
--border-radius: 4px;
--shadow: rgba(100, 100, 111, 0.2) 5px 1px 20px 5px;
--color-toggle-light: #eee;
--color-toggle-dark: #000;
}