git ssb

1
MainWindow {
2
  height: 100%
3
  display: flex
4
  flex-direction: column
5
6
  -darwin {
7
    div.top {
8
      padding-left: 70px
9
      span.appTitle {
10
        span.title {
11
          visibility: visible
12
        }
13
      }
14
    }
15
  }
16
17
  div.top {
18
    display: flex;
19
    align-items: center;
20
    background: #fff;
21
    padding: 6px;
22
    border-bottom: 2px solid #e4edff;
23
    box-shadow: 0 0 3px #7f7f7f;
24
    position: relative;
25
    z-index: 100
26
27
    span {
28
      input.search {
29
        padding: 4px 8px;
30
        border-radius: 3px;
31
        border: 0 none;
32
        background: #ffffff;
33
        color: #656565;
34
        font-size: 120%;
35
        width: 180px;
36
        box-shadow: inset 0 0 0px 1px rgba(0,0,0,0.1)
37
        :focus {
38
          outline: 0;
39
          box-shadow: inset 0 0 0px 1px #286bc3
40
        }
41
      }
42
    }
43
44
    span.history {
45
      padding-left: 6px
46
      height: 26px;
47
      display: inline-block
48
      a {
49
        cursor: pointer;
50
        text-decoration: none !important
51
        display: inline-block
52
        width: 28px
53
        height: 100%
54
        border-radius: 2px
55
        background: svg(backArrow) no-repeat center
56
        opacity: 0.4
57
        -active {
58
          opacity: 1
59
        }
60
        :hover {
61
          background-color: #E8E8E8
62
        }
63
      }
64
65
      a + a {
66
        transform: rotate(180deg)
67
      }
68
69
      @svg backArrow {
70
        width: 14px
71
        height: 14px
72
        content: '<g stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M1.5 7h11M7 13L1 7l6-6"/></g>'
73
74
        path {
75
          stroke: #979797
76
        }
77
78
        -active {
79
          path {
80
            fill: #DDD
81
          }
82
        }
83
      }
84
    }
85
86
    span.nav {
87
      display: inline-block
88
      a {
89
        padding: 4px 10px;
90
        border-radius: 3px;
91
        background: #f3f3f3;
92
        color: #656565;
93
        font-size: 120%;
94
        font-weight: 200;
95
        cursor: pointer;
96
        margin-left: 8px;
97
        text-decoration: none !important
98
99
        :hover {
100
          color: black
101
          background: #E8E8E8
102
        }
103
104
        -selected {
105
          background: #d2d2d2
106
          color: black
107
          :hover {
108
            background: #d2d2d2
109
          }
110
        }
111
112
        -drop {
113
114
          :after {
115
            background-image: svg(dropArrow)
116
            background-repeat: no-repeat;
117
            background-position: center right;
118
            width: 10px;
119
            height: 14px;
120
            display: inline-block;
121
            content: ' ';
122
            margin-left: 6px;
123
            margin-right: -6px;
124
            border-left: 1px solid #d2d2d2;
125
            padding-left: 5px;
126
            margin-bottom: -2px;
127
          }
128
        }
129
130
        -add {
131
          border-color: #498849
132
          background-color: #255D24
133
          text-shadow: 1px 1px 1px #000
134
          color: white
135
136
          :active {
137
            background-color: #1F331F !important
138
          }
139
140
          :hover {
141
            background-color: #356D34
142
            border-color: #4CB54C
143
          }
144
        }
145
      }
146
    }
147
148
    span.appTitle {
149
      flex: 1;
150
      text-align: center;
151
      font-size: 20px;
152
      color: #757575;
153
      letter-spacing: 1px;
154
      font-weight: 200;
155
      -webkit-app-region: drag;
156
      position: relative
157
158
      span.title {
159
        visibility: hidden
160
      }
161
162
      div.info {
163
        display: block
164
        position: absolute;
165
        top: 0;
166
        bottom: 0;
167
        left: 0;
168
        right: 0;
169
        background: white;
170
        margin-top: -3px;
171
        opacity: 1;
172
        transition: opacity 0.1s;
173
        max-height: 25px;
174
        padding: 0 10px;
175
        font-size: 13px;
176
        letter-spacing: 0;
177
        [hidden] {
178
          opacity: 0
179
        }
180
      }
181
    }
182
  }
183
184
  div.info {
185
    a.message {
186
      display: block;
187
      padding: 10px;
188
      background: #deffde;
189
      transition: color 0.2s, background-color 0.2s;
190
      color: #217720;
191
192
      a.ignore {
193
        float: right
194
        border-radius: 10px
195
        padding: 2px 5px
196
        margin-top: -2px
197
        :hover {
198
          text-decoration: none
199
          background: #c0c0c0
200
          color: white
201
        }
202
      }
203
204
      :hover {
205
        text-decoration: none
206
        background: #c0ffae
207
      }
208
    }
209
210
    div.status {
211
      padding: 5px
212
      background: #7c7c7c
213
      color: white
214
      (svg) {
215
        width: 20px
216
        height: 20px
217
      }
218
    }
219
220
    [hidden] {
221
      display: block
222
      max-height: 0
223
      animation: none
224
    }
225
226
    max-height: 100px
227
    box-shadow: 0 0 3px #616161
228
    overflow: hidden
229
    transition: 0.5s max-height
230
    animation: 0.5s slide-in
231
    position: relative
232
    z-index: 1
233
  }
234
235
  div.main {
236
    flex: 1
237
    position: relative
238
239
    div.view {
240
241
      position: absolute
242
      top: 0
243
      bottom: 0
244
      left: 0
245
      right: 0
246
247
      [hidden] {
248
        visibility: hidden
249
      }
250
251
      display: flex
252
      flex-direction: column
253
254
      div {
255
        -webkit-user-select: text
256
      }
257
    }
258
  }
259
260
  div.bottom {
261
    position: relative
262
    box-shadow: 0 0 3px #222
263
    background: #222
264
    align-items: center
265
    display: flex
266
    padding: 5px
267
268
    audio {
269
      color: #EEE
270
271
      ::-webkit-media-controls-panel {
272
        background: transparent
273
      }
274
275
      ::-webkit-media-controls-current-time-display {
276
        color: inherit
277
      }
278
279
      width: 100%
280
    }
281
  }
282
}
283
284
@keyframes slide-in {
285
  0% {
286
    max-height: 0
287
  }
288
  100% {
289
    max-height: 100px
290
  }
291
}
292
293
@svg dropArrow {
294
  width: 12px
295
  height: 6px
296
  content: "<path d='M2,0 L10,0 L6,6 Z' />"
297
298
  path {
299
    fill: #888
300
  }
301
302
  -active {
303
    path {
304
      fill: #DDD
305
    }
306
  }
307
}
308