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