Boostnote/browser/finder/NoteDetail.styl at 9091976337cd7ebe28ffefedb2842eccf97edd92 · 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
.root
  absolute top bottom left right
  width 100%
  height 100%

.description
  absolute top left right
  height 80px
  border-bottom $ui-border
  box-sizing border-box

.description-textarea
  display block
  height 100%
  width 100%
  resize none
  border none
  padding 10px
  line-height 1.6
  box-sizing border-box

.tabList
  absolute left right
  top 80px
  box-sizing border-box
  height 30px
  border-bottom $ui-border
  display flex
  background-color $ui-backgroundColor
.tabList-item
  position relative
  flex 1
  border-right $ui-border
.tabList-item--active
  @extend .tabList-item
  .tabList-item-button
    border-color $brand-color
.tabList-item-button
  width 100%
  height 29px
  navButtonColor()
  outline none
  border-left 4px solid transparent
.tabList-item-deleteButton
  position absolute
  top 5px
  height 20px
  right 5px
  width 20px
  text-align center
  border none
  padding 0
  color transparent
  background-color transparent
  border-radius 2px
.tabList-plusButton
  navButtonColor()
  width 30px
.tabView
  absolute left right bottom
  top 110px
.tabView-top
  absolute top left right
  height 30px
  border-bottom $ui-border
  display flex
  box-sizing border-box
.tabView-top-name
  flex 1
  border none
  padding 0 10px
  font-size 14px
.tabView-top-mode
  width 110px
  padding 0
  border none
  border-left $ui-border
  colorDefaultButton()
  color $ui-inactive-text-color
  pointer-events none
.tabView-content
  absolute left right bottom
  top 30px
  box-sizing border-box
  height 100%
  width 100%

body[data-theme="dark"]
  .description
    border-color $ui-dark-borderColor

  .description-textarea
    background-color $ui-dark-button--hover-backgroundColor
    color white

  .tabList
    background-color $ui-button--active-backgroundColor
    border-bottom-color $ui-dark-borderColor
    background-color $ui-dark-backgroundColor
  .tabList-item
    border-color $ui-dark-borderColor
    &:hover
      background-color $ui-dark-button--hover-backgroundColor
  .tabList-item--active
    border-color $ui-dark-borderColor
    .tabList-item-button
      border-color $brand-color
  .tabList-item-button
    navDarkButtonColor()
    border-left 4px solid transparent
  .tabList-plusButton
    navDarkButtonColor()

  .tabView-top
    border-color $ui-dark-borderColor
  .tabView-top-name
    border-color $ui-dark-borderColor
    color $ui-dark-text-color
    background-color $ui-dark-button--hover-backgroundColor
  .tabView-top-mode
    border-color $ui-dark-borderColor
    background-color $dark-default-button-background
    color $ui-dark-inactive-text-color