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
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
|
/* AGPLv3 License
Notion-Styled Kanban
Author: AnubisNekhet
Note: If you decide to implement it in your theme or redistribute it, please keep this comment (Especially for *certain* individuals who may try to rebrand it as their own :))
Support me: https://buymeacoffee.com/AnubisNekhet
*/
body.theme-light {
--notion-kanban-card: var(--background-primary);
--notion-kanban-card-hover: var(--background-primary-alt);
--notion-kanban-darken: var(--background-primary);
--notion-kanban-darken-hover: var(--background-primary-alt);
}
body.theme-dark {
--notion-kanban-card: var(--color-base-30);
--notion-kanban-card-hover: var(--color-base-35);
--notion-kanban-darken: rgba(var(--ctp-crust, 0, 0, 0), 0.3);
--notion-kanban-darken-hover: rgba(var(--ctp-crust, 0, 0, 0), 0.2);
}
body {
--kanban-transition: 100ms ease-out 0s;
}
body .kanban-plugin__lane {
background-color: transparent;
border: none;
border-radius: 0;
}
body .kanban-plugin__lane .kanban-plugin__lane-header-wrapper {
border-bottom: none;
}
body .kanban-plugin__lane .kanban-plugin__lane-header-wrapper .kanban-plugin__lane-grip {
color: var(--text-muted);
}
body .kanban-plugin__lane .kanban-plugin__lane-header-wrapper .kanban-plugin__lane-grip:hover {
color: var(--text-normal);
background-color: var(--background-modifier-hover);
border-radius: var(--radius-s);
}
body .kanban-plugin__lane .kanban-plugin__lane-header-wrapper .kanban-plugin__lane-title {
flex-grow: 0;
width: auto;
}
body .kanban-plugin__lane .kanban-plugin__lane-header-wrapper .kanban-plugin__lane-title .kanban-plugin__lane-title-text {
flex-grow: 0;
}
body .kanban-plugin__lane .kanban-plugin__lane-header-wrapper .kanban-plugin__lane-settings-button-wrapper {
opacity: 0;
transition: opacity var(--kanban-transition);
}
body .kanban-plugin__lane .kanban-plugin__lane-header-wrapper .kanban-plugin__lane-settings-button-wrapper .kanban-plugin__lane-settings-button .kanban-plugin__icon {
rotate: 90deg;
}
body .kanban-plugin__lane:has(.kanban-plugin__placeholder:only-child):not(:has(.kanban-plugin__item)) .kanban-plugin__item-button-wrapper {
padding: 0;
}
body .kanban-plugin__lane:has(.kanban-plugin__placeholder:only-child):not(:has(.kanban-plugin__item)) .kanban-plugin__item-button-wrapper .kanban-plugin__new-item-button {
padding: 0 10px;
}
body .kanban-plugin__lane .kanban-plugin__lane-items.kanban-plugin__scroll-container.kanban-plugin__vertical {
background-color: transparent;
}
body .kanban-plugin__lane .kanban-plugin__lane-items .kanban-plugin__placeholder {
border: none;
height: 5px;
margin-bottom: 0;
margin-top: 0;
}
body .kanban-plugin__lane .kanban-plugin__lane-items .kanban-plugin__item-wrapper .kanban-plugin__item {
border: none;
box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 2px 4px;
transition: background var(--kanban-transition) !important;
}
body .kanban-plugin__lane .kanban-plugin__lane-items .kanban-plugin__item-wrapper .kanban-plugin__item.is-complete .kanban-plugin__item-markdown {
text-decoration: line-through;
color: var(--text-faint);
}
body .kanban-plugin__lane .kanban-plugin__lane-items .kanban-plugin__item-wrapper .kanban-plugin__item .kanban-plugin__item-content-wrapper {
background: var(--notion-kanban-card);
transition: background var(--kanban-transition) !important;
}
body .kanban-plugin__lane .kanban-plugin__lane-items .kanban-plugin__item-wrapper .kanban-plugin__item .kanban-plugin__item-content-wrapper .kanban-plugin__item-title-wrapper {
background: var(--notion-kanban-darken);
transition: background var(--kanban-transition) !important;
}
body .kanban-plugin__lane .kanban-plugin__lane-items .kanban-plugin__item-wrapper .kanban-plugin__item .kanban-plugin__item-content-wrapper .kanban-plugin__item-title-wrapper .kanban-plugin__item-prefix-button-wrapper {
margin-right: 6px;
box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 2px 4px;
border-radius: 3px;
background: var(--notion-kanban-card);
transition: background var(--kanban-transition) !important;
}
body .kanban-plugin__lane .kanban-plugin__lane-items .kanban-plugin__item-wrapper .kanban-plugin__item .kanban-plugin__item-content-wrapper .kanban-plugin__item-title-wrapper .kanban-plugin__item-prefix-button-wrapper:hover {
transition: background var(--kanban-transition) !important;
background: var(--notion-kanban-card-hover);
}
body .kanban-plugin__lane .kanban-plugin__lane-items .kanban-plugin__item-wrapper .kanban-plugin__item .kanban-plugin__item-content-wrapper .kanban-plugin__item-title-wrapper .kanban-plugin__item-prefix-button-wrapper:hover .kanban-plugin__item-prefix-button {
background-color: transparent;
}
body .kanban-plugin__lane .kanban-plugin__lane-items .kanban-plugin__item-wrapper .kanban-plugin__item .kanban-plugin__item-content-wrapper .kanban-plugin__item-title-wrapper .kanban-plugin__item-prefix-button-wrapper .kanban-plugin__item-prefix-button {
left: 0;
background-color: var(--background-primary);
padding: var(--size-2-3);
}
body .kanban-plugin__lane .kanban-plugin__lane-items .kanban-plugin__item-wrapper .kanban-plugin__item .kanban-plugin__item-content-wrapper .kanban-plugin__item-postfix-button-wrapper {
box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 2px 4px;
border-radius: 3px;
background-color: var(--notion-kanban-card);
opacity: 0;
transition: opacity var(--kanban-transition), background-color var(--kanban-transition);
}
body .kanban-plugin__lane .kanban-plugin__lane-items .kanban-plugin__item-wrapper .kanban-plugin__item .kanban-plugin__item-content-wrapper .kanban-plugin__item-postfix-button-wrapper:hover {
background-color: var(--notion-kanban-card-hover);
transition: background-color var(--kanban-transition);
}
body .kanban-plugin__lane .kanban-plugin__lane-items .kanban-plugin__item-wrapper .kanban-plugin__item .kanban-plugin__item-content-wrapper .kanban-plugin__item-postfix-button-wrapper:hover .kanban-plugin__item-postfix-button {
background-color: transparent;
}
body .kanban-plugin__lane .kanban-plugin__lane-items .kanban-plugin__item-wrapper .kanban-plugin__item .kanban-plugin__item-content-wrapper .kanban-plugin__item-postfix-button-wrapper .kanban-plugin__item-postfix-button {
right: 0;
padding: var(--size-2-3);
background-color: var(--background-primary);
}
body .kanban-plugin__lane .kanban-plugin__lane-items .kanban-plugin__item-wrapper .kanban-plugin__item .kanban-plugin__item-content-wrapper .kanban-plugin__item-postfix-button-wrapper .kanban-plugin__item-postfix-button .kanban-plugin__icon {
rotate: 90deg;
}
body .kanban-plugin__lane .kanban-plugin__lane-items .kanban-plugin__item-wrapper .kanban-plugin__item:hover {
transition: background var(--kanban-transition) !important;
}
body .kanban-plugin__lane .kanban-plugin__lane-items .kanban-plugin__item-wrapper .kanban-plugin__item:hover .kanban-plugin__item-content-wrapper {
transition: background var(--kanban-transition) !important;
background-color: var(--notion-kanban-card-hover);
}
body .kanban-plugin__lane .kanban-plugin__lane-items .kanban-plugin__item-wrapper .kanban-plugin__item:hover .kanban-plugin__item-content-wrapper .kanban-plugin__item-title-wrapper {
transition: background var(--kanban-transition) !important;
background-color: var(--notion-kanban-darken-hover);
}
body .kanban-plugin__lane .kanban-plugin__lane-items .kanban-plugin__item-wrapper .kanban-plugin__item:hover .kanban-plugin__item-content-wrapper .kanban-plugin__item-postfix-button-wrapper {
opacity: 1;
transition: opacity var(--kanban-transition), background-color var(--kanban-transition);
}
body .kanban-plugin__lane .kanban-plugin__item-button-wrapper {
border-top: none;
padding: 0;
}
body .kanban-plugin__lane .kanban-plugin__item-button-wrapper .kanban-plugin__new-item-button {
justify-content: flex-start;
color: transparent;
box-shadow: none;
border: none;
background: transparent;
}
body .kanban-plugin__lane .kanban-plugin__item-button-wrapper .kanban-plugin__new-item-button:hover {
background: var(--background-modifier-hover);
}
body .kanban-plugin__lane .kanban-plugin__item-button-wrapper .kanban-plugin__new-item-button:hover .kanban-plugin__item-button-plus {
color: var(--text-normal);
}
body .kanban-plugin__lane .kanban-plugin__item-button-wrapper .kanban-plugin__new-item-button .kanban-plugin__item-button-plus {
color: var(--text-muted);
}
body .kanban-plugin__lane .kanban-plugin__item-button-wrapper .kanban-plugin__new-item-button .kanban-plugin__item-button-plus::after {
content: " New";
}
body .kanban-plugin__lane .kanban-plugin__item-form {
border-top: none;
}
body .kanban-plugin__lane:hover .kanban-plugin__lane-header-wrapper .kanban-plugin__lane-grip {
opacity: 1;
transition: opacity var(--kanban-transition);
}
body .kanban-plugin__lane:hover .kanban-plugin__lane-header-wrapper .kanban-plugin__lane-settings-button-wrapper {
opacity: 1;
transition: opacity var(--kanban-transition);
}
body .kanban-plugin__drag-container .kanban-plugin__item-wrapper .kanban-plugin__item {
border: none;
box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 2px 4px;
}
body .kanban-plugin__item-input {
background-color: transparent;
}
|
