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
    background: #fff;
15
    padding: 10px;
16
    border-bottom: 2px solid #e4edff;
17
    box-shadow: 0 0 3px #7f7f7f;
18
    position: relative;
19
    z-index: 100
20
21
    span {
22
23
      input.search {
24
        padding: 2px 4px;
25
        border: 01px solid #c7c6c6;
26
        border-radius: 0
27
        background: #ffffff;
28
        color: #656565;
29
        font-size: 120%;
30
        margin-top: -3px;
31
        width: 180px;
32
      }
33
34
      a {
35
        padding: 2px 8px;
36
        border: 2px solid #c7c6c6;
37
        border-radius: 0
38
        background: #dedede;
39
        color: #656565;
40
        font-size: 120%;
41
        cursor: pointer;
42
        margin-left: 5px;
43
        text-decoration: none !important
44
45
        :hover {
46
          color: black
47
          border-color: #888
48
        }
49
50
        -selected {
51
          border-color: #444
52
          background: #CCC
53
          color: black
54
        }
55
56
        -add {
57
          border-color: #498849
58
          background-color: #255D24
59
          text-shadow: 1px 1px 1px #000
60
          color: white
61
62
          :active {
63
            background-color: #1F331F !important
64
          }
65
66
          :hover {
67
            background-color: #356D34
68
            border-color: #4CB54C
69
          }
70
        }
71
      }
72
    }
73
74
    span.history {
75
      a {
76
        opacity: 0.3
77
78
        -active {
79
          opacity: 1
80
        }
81
      }
82
83
      a + a {
84
        margin-left: 0
85
      }
86
    }
87
88
    span.appTitle {
89
      flex: 1;
90
      text-align: center;
91
      font-size: 130%;
92
      color: #757575;
93
      letter-spacing: 0.1em;
94
      font-weight: bold;
95
      font-weight: normal;
96
      -webkit-app-region: drag;
97
    }
98
  }
99
100
  div.info {
101
    a.message {
102
      display: block;
103
      padding: 10px;
104
      background: #deffde;
105
      transition: color 0.2s, background-color 0.2s;
106
      color: #217720;
107
108
      :hover {
109
        text-decoration: none
110
        background: #c0ffae
111
      }
112
    }
113
114
    div.status {
115
      padding: 5px
116
      background: #7c7c7c
117
      color: white
118
      (svg) {
119
        width: 20px
120
        height: 20px
121
      }
122
    }
123
124
    [hidden] {
125
      display: block
126
      max-height: 0
127
      animation: none
128
    }
129
130
    max-height: 100px
131
    box-shadow: 0 0 3px #616161
132
    overflow: hidden
133
    transition: 0.5s max-height
134
    animation: 0.5s slide-in
135
    position: relative
136
    z-index: 1
137
  }
138
139
  div.main {
140
    flex: 1
141
    position: relative
142
143
    div.view {
144
145
      position: absolute
146
      top: 0
147
      bottom: 0
148
      left: 0
149
      right: 0
150
151
      [hidden] {
152
        visibility: hidden
153
      }
154
155
      display: flex
156
      flex-direction: column
157
158
      div {
159
        -webkit-user-select: text
160
      }
161
    }
162
  }
163
164
  div.bottom {
165
    position: relative
166
    box-shadow: 0 0 3px #222
167
    background: #222
168
    align-items: center
169
    display: flex
170
    padding: 5px
171
172
    audio {
173
      color: #EEE
174
175
      ::-webkit-media-controls-panel {
176
        background: transparent
177
      }
178
179
      ::-webkit-media-controls-current-time-display {
180
        color: inherit
181
      }
182
183
      width: 100%
184
    }
185
  }
186
}
187
188
@keyframes slide-in {
189
  0% {
190
    max-height: 0
191
  }
192
  100% {
193
    max-height: 100px
194
  }
195
}
196