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
      a.ignore {
145
        float: right
146
        border-radius: 10px
147
        padding: 2px 5px
148
        margin-top: -2px
149
        :hover {
150
          text-decoration: none
151
          background: #c0c0c0
152
          color: white
153
        }
154
      }
155
156
      :hover {
157
        text-decoration: none
158
        background: #c0ffae
159
      }
160
    }
161
162
    div.status {
163
      padding: 5px
164
      background: #7c7c7c
165
      color: white
166
      (svg) {
167
        width: 20px
168
        height: 20px
169
      }
170
    }
171
172
    [hidden] {
173
      display: block
174
      max-height: 0
175
      animation: none
176
    }
177
178
    max-height: 100px
179
    box-shadow: 0 0 3px #616161
180
    overflow: hidden
181
    transition: 0.5s max-height
182
    animation: 0.5s slide-in
183
    position: relative
184
    z-index: 1
185
  }
186
187
  div.main {
188
    flex: 1
189
    position: relative
190
191
    div.view {
192
193
      position: absolute
194
      top: 0
195
      bottom: 0
196
      left: 0
197
      right: 0
198
199
      [hidden] {
200
        visibility: hidden
201
      }
202
203
      display: flex
204
      flex-direction: column
205
206
      div {
207
        -webkit-user-select: text
208
      }
209
    }
210
  }
211
212
  div.bottom {
213
    position: relative
214
    box-shadow: 0 0 3px #222
215
    background: #222
216
    align-items: center
217
    display: flex
218
    padding: 5px
219
220
    audio {
221
      color: #EEE
222
223
      ::-webkit-media-controls-panel {
224
        background: transparent
225
      }
226
227
      ::-webkit-media-controls-current-time-display {
228
        color: inherit
229
      }
230
231
      width: 100%
232
    }
233
  }
234
}
235
236
@keyframes slide-in {
237
  0% {
238
    max-height: 0
239
  }
240
  100% {
241
    max-height: 100px
242
  }
243
}
244