summaryrefslogtreecommitdiffstats
path: root/client/components/main/header.styl
blob: 191e8893058a369a72f8340f2393dc1d59953806 (plain)
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
199
200
201
202
203
204
205
206
207
208
209
210
211
@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

      .board-header-watch-icon
        padding-left: 7px

      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

      .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

.announcement,
.offline-warning
  width: 100%
  text-align: center
  padding: 0
  margin: 0
  background: #F8ECBD
  clear: both

  p
    margin: 7px
    padding: 0