extern/heynote
1
0
Fork 0
mirror of https://github.com/heyman/heynote.git synced 2024-12-02 04:44:09 +01:00
Code Issues Packages Projects Releases Wiki Activity

Dark mode styling of New Note dialog

Browse Source
This commit is contained in:
Jonatan Heyman 2024-08-04 17:36:47 +02:00
parent ffc4464e78
commit 60b5c910a9
4 changed files with 27 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/NewNote.vue
View File

@ -192,7 +192,7 @@
&:focus &:focus
outline: none outline: none
+dark-mode +dark-mode
background: #333 background: #151516
box-shadow: 0 0 10px rgba(0,0,0,0.5) box-shadow: 0 0 10px rgba(0,0,0,0.5)
color: rgba(255,255,255, 0.7) color: rgba(255,255,255, 0.7)
+webapp-mobile +webapp-mobile
@ -247,8 +247,6 @@
padding-top: 0 padding-top: 0
display: flex display: flex
justify-content: flex-end justify-content: flex-end
+dark-mode
background: #222
button button
font-size: 12px font-size: 12px
height: 28px height: 28px
@ -258,5 +256,8 @@
padding-right: 10px padding-right: 10px
&:focus &:focus
outline-color: #48b57e outline-color: #48b57e
+dark-mode
background: #444
border: none
</style> </style>

16
src/components/folder-selector/FolderItem.vue
View File

@ -70,10 +70,17 @@
background-repeat: no-repeat background-repeat: no-repeat
background-position-y: 5px background-position-y: 5px
background-position-x: calc(2px + var(--indent-level) * 16px) background-position-x: calc(2px + var(--indent-level) * 16px)
+dark-mode
background-image: url('@/assets/icons/caret-right-white.svg')
color: rgba(255,255,255, 0.87)
&:hover &:hover
background-color: #f1f1f1 background-color: #f1f1f1
+dark-mode
background-color: #39393a
&.open &.open
background-image: url('@/assets/icons/caret-down.svg') background-image: url('@/assets/icons/caret-down.svg')
+dark-mode
background-image: url('@/assets/icons/caret-down-white.svg')
&.selected &.selected
background-color: #48b57e background-color: #48b57e
color: #fff color: #fff
@ -82,6 +89,11 @@
background-image: url('@/assets/icons/caret-down-white.svg') background-image: url('@/assets/icons/caret-down-white.svg')
&:hover &:hover
background-color: #40a773 background-color: #40a773
+dark-mode
background-color: #1b6540
color: rgba(255,255,255, 0.87)
&:hover
background-color: #1f6f47
.new-folder .new-folder
display: block display: block
color: rgba(255,255,255, 0.9) color: rgba(255,255,255, 0.9)
@ -90,6 +102,10 @@
color: rgba(0,0,0, 0.5) color: rgba(0,0,0, 0.5)
&.selected &.selected
color: rgba(255,255,255, 0.8) color: rgba(255,255,255, 0.8)
+dark-mode
color: rgba(255,255,255, 0.5)
&.selected
color: rgba(255,255,255, 0.8)
.name .name

3
src/components/folder-selector/FolderSelector.vue
View File

@ -245,4 +245,7 @@
outline: none outline: none
border: 1px solid #fff border: 1px solid #fff
outline: 2px solid #48b57e outline: 2px solid #48b57e
+dark-mode
background: #262626
border: 1px solid #363636
</style> </style>

6
src/components/folder-selector/NewFolderItem.vue
View File

@ -86,8 +86,8 @@
padding-left: calc(0px + var(--indent-level) * 16px) padding-left: calc(0px + var(--indent-level) * 16px)
display: flex display: flex
background: #f1f1f1 background: #f1f1f1
&:hover +dark-mode
background: #f1f1f1 background-color: #39393a
input input
@ -104,5 +104,7 @@
outline: none outline: none
&::placeholder &::placeholder
font-size: 12px font-size: 12px
+dark-mode
background: #3b3b3b
</style> </style>