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
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
|
@import 'nib'
#header
color: white
transition: background-color 0.4s
background: #2980B9
#header-main-bar
height: 40px
padding: 7px 10px 0
h1
font-size: 20px
line-height: 1.7em
padding: 0 10px
margin: 0
margin-right: 10px
float: left
border-radius: 3px
a.fa, a i.fa
color: white
.back-btn
font-size: 0.9em
margin-right: 10px
.wekan-logo
display: block
margin: 3px auto 0
width: 97px
opacity: 0.6
transition: opacity 0.15s
&:hover
opacity: 0.9
.board-header-btns
display: block
margin-top: 3px
width: auto
// XXX Use a flexbox instead of floats?
&.left
float: left
&.right
float: right
.board-header-btn
border-radius: 3px
color: darken(white, 5%)
padding: 0
height: 28px
font-size: 13px
float: left
overflow: hidden
line-height: @height
margin: 0 2px
i.fa
float: left
display: block
line-height: 28px
color: darken(white, 5%)
margin: 0 10px
+ span
display: inline-block
margin-top: 1px
margin-right: 10px
.board-header-btn-close
float: right
i.fa
margin: 0 6px
.board-header-btn,
h1.is-clickable
&.is-active,
&:hover:not(.is-disabled)
background: rgba(0, 0, 0, .15)
.separator
margin: 2px 4px
border-left: 1px solid rgba(255, 255, 255, .3)
height: 24px
float: left
#header-quick-access
color: white
transition: background-color 0.4s
background: #2573a7
height: 28px
font-size: 12px
display: flex
#header-user-bar,
#header-new-board-icon,
ul li
color: darken(white, 17%)
.fa
color: inherit
a:hover, a.is-active
color: white
ul
transition: opacity 0.2s
margin: 4px 0 0 5px
overflow: hidden
li
display: block
float: left
width: auto
color: darken(white, 15%)
padding: 2px 5px 0
&.current
color: darken(white, 5%)
&:first-child .fa-home
margin-right: 5px
a.js-create-board
margin-left: 5px
#header-user-bar,
#header-new-board-icon
flex-shrink: 0
#header-user-bar
margin: 2px 0
.header-user-bar-avatar
float: left
position: relative
top: -5px
margin-right: 5px
.member
width: 24px
height: @width
margin: 0
margin-top: 1px
.header-user-bar-name
margin: 4px 8px 0 0
float: left
i.fa-chevron-down
margin-right: 4px
#header-new-board-icon
flex-grow: 1
margin: 6px 5px 0
width: 12px
@media screen and (max-width: 800px)
#header
#header-main-bar
height: 40px
h1
display: none
.board-header-btns
margin-top: 0px
.board-header-btn
height: 32px
line-height: @height
font-size: 16px
i.fa
line-height: 32px
+ span
display: none
#header-quick-access
transition: background-color 0.4s
width: 100%
padding: 10px 0px
z-index: 30
position: absolute
bottom: 0px
ul
width: calc(100% - 150px)
overflow: ellipsis
li
height: 28px
|
