diff --git a/browser/main/NoteList/NoteItemSimple.js b/browser/main/NoteList/NoteItemSimple.js
index 020023b5..2696ccd4 100644
--- a/browser/main/NoteList/NoteItemSimple.js
+++ b/browser/main/NoteList/NoteItemSimple.js
@@ -3,7 +3,7 @@
*/
import React, { PropTypes } from 'react'
import CSSModules from 'browser/lib/CSSModules'
-import styles from './NoteItem.styl'
+import styles from './NoteItemSimple.styl'
/**
* @description Note item component when using simple display mode.
@@ -14,17 +14,17 @@ import styles from './NoteItem.styl'
*/
const NoteItemSimple = ({ isActive, note, handleNoteClick, handleNoteContextMenu }) => (
handleNoteClick(e, `${note.storage}-${note.key}`)}
onContextMenu={e => handleNoteContextMenu(e, `${note.storage}-${note.key}`)}
>
-
+
{note.title.trim().length > 0
? note.title
- : Empty
+ : Empty
}
diff --git a/browser/main/NoteList/NoteItemSimple.styl b/browser/main/NoteList/NoteItemSimple.styl
new file mode 100644
index 00000000..fbc36aee
--- /dev/null
+++ b/browser/main/NoteList/NoteItemSimple.styl
@@ -0,0 +1,68 @@
+$control-height = 30px
+
+.root
+ absolute left bottom
+ top $topBar-height - 1
+ background-color $ui-noteList-backgroundColor
+
+.item-simple
+ position relative
+ padding 20px 25px
+ user-select none
+ cursor pointer
+ background-color $ui-noteList-backgroundColor
+ transition background-color 0.15s
+ &:hover
+ background-color alpha($ui-active-color, 20%)
+ &:active
+ background-color $ui-active-color
+ color white
+
+.item-simple--active
+ @extend .item-simple
+ background-color $ui-active-color
+ color white
+ &:hover
+ background-color $ui-active-color
+
+.item-simple-title
+ font-size 14px
+ height 40px
+ box-sizing border-box
+ line-height 24px
+ padding-top 5px
+ padding-bottom 20px
+ overflow ellipsis
+ color $ui-text-color
+
+.item-simple-title-empty
+ font-weight normal
+ color $ui-inactive-text-color
+
+body[data-theme="dark"]
+ .root
+ border-color $ui-dark-borderColor
+ background-color $ui-dark-noteList-backgroundColor
+
+ .item-simple
+ border-color $ui-dark-borderColor
+ background-color $ui-dark-noteList-backgroundColor
+ &:active
+ background-color $ui-active-color
+ &:hover
+ background-color alpha($ui-active-color, 20%)
+
+ .item-simple--active
+ @extend .item-simple
+ border-color $ui-dark-borderColor
+ background-color $ui-active-color
+ .item-simple-title
+ color white
+ &:hover
+ background-color $ui-active-color
+
+ .item-simple-title
+ color $ui-dark-text-color
+
+ .item-simple-title-empty
+ color $ui-dark-inactive-text-color