Catppuccin userstyle for tangled.sh
feat(tangled): profile page, generic buttons styles
+61
+61
catppuccin.user.less
+61
catppuccin.user.less
···
95
95
background-color: @accent;
96
96
border-color: @accent;
97
97
}
98
+
.btn-create:hover::before {
99
+
background-color: fade(@accent, 60%);
100
+
border-color: fade(@accent, 20%);
101
+
}
98
102
.btn-create {
99
103
color: @crust;
100
104
}
···
109
113
color: @subtext0;
110
114
}
111
115
116
+
/* generic button */
117
+
.btn::before {
118
+
background-color: @surface1;
119
+
border-color: @overlay0;
120
+
}
121
+
.btn:hover::before {
122
+
background-color: @surface2;
123
+
}
124
+
112
125
/* timeline page list item */
113
126
.bg-white.dark\:bg-gray-800 {
114
127
background-color: @surface0;
115
128
}
129
+
130
+
/* profile punchcard component - reduce by 16.5% (ish) each step */
131
+
/* 100% */
132
+
.bg-green-500.dark\:bg-green-600 {
133
+
background-color: @accent
134
+
}
135
+
/* 84% */
136
+
.bg-green-400.dark\:bg-green-700 {
137
+
background-color: fade(@accent, 84%);
138
+
}
139
+
/* 67% */
140
+
.bg-green-300.dark\:bg-green-800 {
141
+
background-color: fade(@accent, 67%);
142
+
}
143
+
/* 50% */
144
+
.bg-green-200.dark\:bg-green-900 {
145
+
background-color: fade(@accent, 50%);
146
+
}
147
+
/* none */
148
+
.bg-gray-200.dark\:bg-gray-700 {
149
+
background-color: @surface2;
150
+
}
151
+
/* future */
152
+
.border.border-gray-200.dark\:border-gray-700 {
153
+
border-color: @surface1;
154
+
}
155
+
156
+
/* profile activity list statuses (e.g. 3 open, 16 merged, 5 closed, etc.)
157
+
/* open PRs */
158
+
.bg-green-600.dark\:bg-green-700.text-white {
159
+
background-color: @green;
160
+
color: @crust;
161
+
}
162
+
/* merged PRs */
163
+
.bg-purple-600.dark\:bg-purple-700.text-white {
164
+
background-color: @mauve;
165
+
color: @crust;
166
+
}
167
+
/* closed PRs */
168
+
.bg-gray-800.dark\:bg-gray-700 {
169
+
background-color: @mantle;
170
+
color: @text;
171
+
}
172
+
/* "No activity for this month" text */
173
+
.text-gray-500.dark\:text-gray-400 {
174
+
color: @overlay1;
175
+
}
176
+
116
177
117
178
118
179
}