Boostnote/browser/components/NoteItem.styl at master · csseditor/Boostnote · GitHub

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
$control-height = 30px

.root
  absolute left bottom
  top $topBar-height - 1
  background-color $ui-noteList-backgroundColor

.item
  position relative
  padding 0 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-title
    .item-title-empty
    .item-bottom-tagList-empty
    .item-bottom-time
    .item-title-icon
      color white
    .item-bottom-tagList-item
      background-color transparent
      color white

.item-wrapper
  padding 20px 0
  border-bottom $ui-border

.item--active
  @extend .item
  background-color $ui-active-color
  color white
  .item-title
  .item-title-empty
  .item-bottom-tagList-empty
  .item-bottom-time
  .item-title-icon
    color white
  .item-bottom-tagList-item
    background-color transparent
    color white
  .item-wrapper
    border-color transparent
  &:hover
    background-color $ui-active-color

.item-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-title-icon
  position absolute
  top 20px
  right 25px
  font-size 14px
  color $ui-inactive-text-color

.item-title-empty
  font-weight normal
  color $ui-inactive-text-color

.item-bottom
  position relative
  bottom 0px
  margin-top 2px
  height 20px
  font-size 12px
  line-height 20px
  overflow ellipsis
  display flex

.item-bottom-tagList
  flex 1
  overflow ellipsis
  line-height 20px
  color #FFFFFF

.item-bottom-tagList-item
  font-size 12px
  margin-right 8px
  padding 0 10px
  height 20px
  box-sizing border-box
  border-radius 20px
  vertical-align middle
  background-color $ui-tag-backgroundColor
  color #FFFFFF

.item-bottom-tagList-empty
  color $ui-inactive-text-color
  vertical-align middle
  font-size 10px
  margin-left 5px

.item-bottom-time
  color $ui-inactive-text-color
  font-size 12px

.item-star
  position absolute
  top 20px
  right 29px
  width 34px
  height 34px
  color $ui-favorite-star-button-color
  font-size 14px
  padding 0
  border-radius 17px

body[data-theme="dark"]
  .root
    border-color $ui-dark-borderColor
    background-color $ui-dark-noteList-backgroundColor

  .item
    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-wrapper
    border-color $ui-dark-borderColor

  .item--active
    @extend .item
    border-color $ui-dark-borderColor
    background-color $ui-active-color
    .item-wrapper
      border-color transparent
    .item-title
      color white
    .item-bottom-tagList-item
      background-color transparent
      color white
    .item-bottom-tagList-empty
      color white
    &:hover
      background-color $ui-active-color

  .item-title
    color $ui-dark-text-color

  .item-title-icon
    color $ui-darkinactive-text-color

  .item-title-empty
    color $ui-dark-inactive-text-color

  .item-bottom-tagList-item
    background-color $ui-dark-tag-backgroundColor
    color $ui-dark-text-color

  .item-bottom-tagList-empty
    color $ui-inactive-text-color
    vertical-align middle