plugins/helpers/react/DynamicDialog/CalendarPicker.css at 9acddccebe5c6aa6cca357307fe771d268156262 · NotePlan/plugins · 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
/* TODO: have not figured out how to set the size of the calendar itself yet */
/* changing the cell size here helps but i don't know how to set the whole container size */


/* -------------- COLORS */

@layer shared {
.container {
  border: '1px solid #ccc';
  margin-top: '0px';
  padding-top: '0px';
}

.caption {
  color: 'var(--tint-color)';
}

.navButtonPrev {
  color: 'var(--tint-color)';
}

.navButtonNext {
  color: 'var(--tint-color)';
}

.weekdays {
  background-color: 'var(--bg-main-color)';
}

.weekday {
  font-weight: 'bold';
}

.weekend {
  background-color: 'var(--bg-alt-color)';
}

.week {
  color: '#333';
}

.day {
  color: 'var(--fg-main-color)';
}

.today {
  color: 'var(--hashtag-color)';
  background-color: 'var(--bg-alt-color)';
}

.selected {
  color: 'var(--tint-color)';
  background-color: 'var(--bg-alt-color)';
}

/* -------------- */
/* NOTE: GENERALLY YOU HAVE TO SET !IMPORTANT TO GET THESE CALENDAR STYLES TO OVERRIDE THE SETTINGS */


.rdp {
  --rdp-cell-size: '30px';
  --rdp-caption-font-size: unset !important;
  --rdp-caption-label-font-size: unset !important;
  box-shadow: none;
}

.rdp button {
  border: none;
}

/* NP theme has border default for tables but we don't want it for buttons in the calendar picker */
.rdp-button_reset {
  border: unset !important;
  box-shadow: unset !important;
}

.dayPicker-container .dialogBody button {
  margin-left: 0.2rem !important;
}

.calendarPickerCustom {
  margin-top: 0px;
  padding-top: 0px;
}

.rdp-day {
  box-shadow: none;
  display: inline-grid;
  width: 1.4rem;
}

.rdp-months,
.rdp-month {
  margin-top: 0px !important;
  padding-top: 0px !important;
}

.rdp-months { /* align the tops of the month calendars when > 1 month is shown */
  display: flex;
  justify-content: flex-start;
  align-items: baseline;
}

.rdp-nav {
  scale: 75%;
  margin-bottom: 5px;
  padding-bottom: 10px;
  top: 40%;
  left: 0%;
  z-index: 10;
}

.dayPicker-container {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  /* margin-top: 20px; */
}

/* reduce padding at the top of the calendar */
.dayPicker-container .buttonGrid div:nth-child(1) {
  padding-block-start: 0px;
}

/* change the color of the today button */
.rdp-day_selected {
  background-color: var(--tint-color);
  color: var(--fg-main-color);
}

/* make sure the months top-align (the left one was lower by default) */
.rdp-month.rdp-caption_start,
.rdp-month.rdp-caption_end {
  margin-top: 0px !important;
  padding-top: 0px !important;
}

/* move the forward/back month arrows down a little to align with the month name */
/*
.rdp-nav_button_next,
.rdp-nav_button_previous {
  margin-top: 12px !important;
} */

/* .calendar-picker-button-text {
  margin-left: 5px;
} */
}