[READ-ONLY] Mirror of https://github.com/probablykasper/taskler. Simple text editor for your New Tab page
taskler.kasper.space
browser-extension
chrome
chrome-extension
editor
extension
firefox
firefox-addon
firefox-extension
notes
Improved transitions
+34
-23
-4
src/index.js
-4
src/index.js
···
168
168
}
169
169
})
170
170
toolbarCheckbox.addEventListener('change', (e) => {
171
-
console.log(e)
172
171
if (toolbarCheckbox.checked) toolbarSetting.set(true).update()
173
172
else toolbarSetting.set(false).update()
174
173
})
···
177
176
const settingsIcon = document.querySelector('.settings')
178
177
const dialog = document.querySelector('.settings-dialog')
179
178
settingsIcon.addEventListener('click', () => {
180
-
// document.activeElement && document.activeElement.blur()
181
-
dialog.click()
182
179
dialog.classList.add('visible')
183
-
settingsIcon.blur()
184
180
})
185
181
186
182
document.addEventListener('click', function (e) {
+1
-1
src/index.pug
+1
-1
src/index.pug
···
5
5
link(href="https://fonts.googleapis.com/css?family=Rubik:400,500", rel="stylesheet")
6
6
link(rel="stylesheet", type="text/css", href="index.styl")
7
7
body.no-transition(data-build-as=String(buildAs))
8
-
.bg
8
+
//- .bg
9
9
//- #toolbar-container(style='display:none')
10
10
.center
11
11
#note(spellcheck='false')
+23
-15
src/index.styl
+23
-15
src/index.styl
···
2
2
@import '~/quill-styles/snow.styl'
3
3
body
4
4
margin: 0px
5
+
transition: background-color transition-color
6
+
background-color var(--bgcolor)
5
7
.no-transition
8
+
transition: none !important
6
9
*, ::before, ::after
7
10
transition: none !important
8
11
p, h1, #note
9
12
font-family: Rubik
10
13
transition: color transition-color
11
14
color: var(--color)
12
-
.bg
13
-
transition: background-color transition-color
14
-
background-color var(--bgcolor)
15
-
min-height: 1000px
16
-
transform: translateY(-50%)
17
-
top: 50%
18
-
display: flex
19
-
position: fixed
20
-
flex-direction: column
21
-
width: 100%
22
-
height: 100%
15
+
// .bg
16
+
// transition: background-color transition-color
17
+
// background-color var(--bgcolor)
18
+
// min-height: 1000px
19
+
// transform: translateY(-50%)
20
+
// top: 50%
21
+
// display: flex
22
+
// position: fixed
23
+
// flex-direction: column
24
+
// width: 100%
25
+
// height: 100%
23
26
icon-margin = 8px
24
27
icon-padding = 8px
25
28
icon-size = 24px
···
124
127
border: 2px solid
125
128
border-color: var(--color)
126
129
border-radius: 2px
127
-
transition: background-color transition-color, opacity transition, transform transition
130
+
transition: border-color transition-color, opacity transition, transform transition
128
131
svg
129
132
display: block
130
-
transition: background-color transition-color, opacity transition, transform transition
133
+
transition: fill transition-color, opacity transition, transform transition
131
134
width: 100%
132
135
height: 100%
133
136
opacity: 0
···
148
151
editor-padding-vertical = 12px
149
152
editor-padding-horizontal = 15px
150
153
center-padding-vertical = 25px
151
-
center-padding-horizontal = icon-margin * 2 + icon-padding * 2 + icon-size - editor-padding-horizontal
154
+
center-padding-horizontal = icon-margin * 2 + icon-padding * 2 + icon-size
152
155
.center
153
156
position: fixed
154
157
overflow-y: auto
···
161
164
display: none
162
165
margin-left: auto
163
166
margin-right: auto
167
+
margin-bottom: 15px
164
168
border-radius: 5px
165
169
background-color: var(--bgcolor-overlay)
170
+
transition: background-color transition-color
166
171
&.visible
167
172
display: block
168
173
.ql-picker-label
···
176
181
font-family: 'Rubik'
177
182
font-size: 15px
178
183
.ql-editor
179
-
padding: editor-padding-vertical editor-padding-horizontal
184
+
background-color: var(--bgcolor-overlay)
185
+
transition: background-color transition-color
186
+
// padding: editor-padding-vertical editor-padding-horizontal
187
+
// margin: editor-padding-vertical editor-padding-horizontal
180
188
&::before
181
189
transition: color transition-color
182
190
color: var(--color)
+8
-1
src/quill-styles/base.styl
+8
-1
src/quill-styles/base.styl
···
51
51
52
52
button, .ql-picker-label, .ql-picker-item
53
53
color: var(--color)
54
+
transition: color transition-color
54
55
opacity: 0.4
55
56
outline: none
56
57
.ql-fill, .ql-stroke.ql-fill
57
58
fill: var(--color)
59
+
transition: fill transition-color
58
60
.ql-stroke, .ql-stroke-miter
59
61
stroke: var(--color)
62
+
transition: stroke transition-color
60
63
svg
61
64
width: 100%
62
65
···
189
192
display: inline-block
190
193
line-height: 22px
191
194
.ql-picker-options
192
-
background-color: backgroundColor
195
+
background-color: var(--bgcolor-overlay)
196
+
transition: background-color transition-color
193
197
display: none
194
198
min-width: 100%
195
199
padding: 4px 8px
···
203
207
.ql-picker.ql-expanded
204
208
.ql-picker-label
205
209
color: var(--color)
210
+
transition: color transition-color
206
211
opacity: 1
207
212
z-index: 2
208
213
.ql-fill
209
214
fill: var(--color)
215
+
transition: color transition-color
210
216
.ql-stroke
211
217
stroke: var(--color)
218
+
transition: color transition-color
212
219
.ql-picker-options
213
220
display: block
214
221
margin-top: -1px
+1
-1
src/quill-styles/snow.styl
+1
-1
src/quill-styles/snow.styl