File size: 2,524 Bytes
4279593
 
 
 
 
 
 
 
 
85a4a41
 
4279593
 
 
 
 
 
 
85a4a41
4279593
 
 
 
85a4a41
 
 
 
 
4279593
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
85a4a41
 
4279593
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
85a4a41
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
:root {
  /* Dark theme variables */
  --sidebar-background: #2b2b2b;
  --text-light: #eee;
  --border-dark: #333;
}

/* Main sidebar container */
.right-side-bar {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  background-color: var(--sidebar-background);  /* Keep background uniform */
  color: var(--text-light);
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.5);
  transition: width 0.4s ease;
  overflow-y: auto;
  z-index: 1000;
}

/* Sidebar resizing */
.right-side-bar.resizing {
  transition: none;
}

/* When the sidebar is closed */
.right-side-bar.closed {
  width: 0;
  overflow: hidden;
}

/* Sidebar header styling */
.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 3px solid var(--border-dark);
}

.sidebar-header h3 {
  margin: 0;
  font-size: 1.2rem;
}

/* Close button styling */
.close-btn {
  background: none;
  border: none;
  padding: 6px;
  color: var(--text-color);
  font-size: 1.2rem;
  cursor: pointer;
  transition: color var(--transition-speed);
}

.close-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: white;
}

/* Ensure the sidebar background remains uniform */
.sidebar-content {
  padding: 16px;
  background: transparent;
  overflow-x: hidden;
  overflow-y: auto;
}

/* Also clear any default marker via the pseudo-element */
.nav-links.no-bullets li::marker {
  content: "";
}

/* Lay out each task item using flex so that the icon and text align */
.task-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 1rem;
}

/* Icon span: fixed width and margin for spacing */
.task-icon {
  flex-shrink: 0;
  margin-right: 1rem;
}

/* Task list text */
.task-text {
  white-space: pre-wrap;
}

/* Resizer for sidebar width adjustment */
.resizer {
  position: absolute;
  left: 0;
  top: 0;
  width: 5px;
  height: 100%;
  cursor: ew-resize;
}

/* Toggle button (when sidebar is closed) */
.toggle-btn.right-toggle {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  background-color: var(--dark-surface);
  color: var(--text-light);
  border: none;
  padding: 8px;
  cursor: pointer;
  z-index: 1001;
  box-shadow: -2px 0 4px rgba(0, 0, 0, 0.5);
}

.spin {
  animation: spin 1s linear infinite;
  color: #328bff;
}

.checkmark {
  color: #03c203;
}

.x {
  color: #d10808;
}

/* Keyframes for the spinner animation */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}