artin/heynote
1
0
Fork 0
mirror of https://github.com/heyman/heynote.git synced 2026-02-06 11:27:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add styling of image widget for light theme

Browse Source
This commit is contained in:
Jonatan Heyman 2026-01-19 16:49:11 +01:00
parent bd4cbad307
commit 32fd508628
3 changed files with 26 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/icons/resize-handle-se-light.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

34
src/css/image.sass
View File

@ -1,10 +1,19 @@
@use "include" as *
.heynote-image
//--outline-color: var(--highlight-color)
//--outline-color: #b3bfcc
//--outline-color: #17242b
--outline-color: #0060c7
//--outline-color: #549a70
--handle-color: #192736
--snapped-outline-color: var(--highlight-color)
--outline-color: #2482ce
--handle-color: #ccc
--image-border-color: #c9c9c9
+dark-mode
//--outline-color: var(--highlight-color)
//--outline-color: #b3bfcc
//--outline-color: #17242b
--outline-color: #0060c7
--snapped-outline-color: #39a363
//--outline-color: #549a70
--handle-color: #192736
--image-border-color: #252525
padding: 6px 2px
display: inline-block
position: relative
@ -20,7 +29,7 @@
.inner
position: relative
border: 1px solid #252525
border: 1px solid var(--image-border-color)
&:hover
//border: 1px solid var(--outline-color)
.buttons-container
@ -55,6 +64,7 @@
button
font-size: 12px
background-color: #646e71
color: #fff
opacity: 0.5
transition: opacity 200ms
//background-color: #51595c
@ -80,12 +90,16 @@
&.selected
--handle-color: var(--outline-color)
+dark-mode
--handle-color: var(--outline-color)
.inner
//border: 2px solid var(--outline-color)
.highlight-border
display: block
.resize-handle
opacity: 1.0
.icon
background-image: url("@/assets/icons/resize-handle-se-dark.png")
&:hover
.resize-handle
opacity: 1.0
@ -114,10 +128,12 @@
position: absolute
top: -4px
left: -4px
background: url("@/assets/icons/resize-handle-se-dark.png")
background-image: url("@/assets/icons/resize-handle-se-light.png")
background-size: 100%
width: 12px
height: 12px
+dark-mode
background-image: url("@/assets/icons/resize-handle-se-dark.png")
&.resizing
.inner .buttons-container
@ -126,5 +142,5 @@
opacity: 1
transition: none
&.snapped
--outline-color: #39a363
--outline-color: var(--snapped-outline-color)

1
src/editor/image/image.js
View File

@ -156,6 +156,7 @@ const imageIsSelected = (image, selection) => {
//return selection.from === image.from && selection.to === image.to
return selection.from === selection.to && (selection.from === image.from || selection.from === image.to)
//return selection.from === selection.to && selection.from === image.to
//return selection.from === selection.to && ((selection.assoc === 1 && selection.from === image.from) || (selection.assoc <= 0 && selection.from === image.to))
//if (selection.main.assoc === 1) {