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: 2;
20
21
    span {
22
23
      input.search {
24
        padding: 2px 4px;
25
        border: 01px solid #c7c6c6;
26
        border-radius: 4px;
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: 4px;
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: #314427
105
      transition: color 0.2s, background-color 0.2s
106
107
      :hover {
108
        text-decoration: none
109
        color: white
110
        background: #315427
111
      }
112
    }
113
    box-shadow: 0 0 3px black
114
    overflow: hidden
115
    animation: 0.5s slide-in
116
    position: relative
117
  }
118
119
  div.main {
120
    flex: 1
121
    display: flex
122
123
    div.view {
124
125
      [hidden] {
126
        display: none
127
      }
128
129
      display: flex
130
      flex-direction: column
131
      flex: 1
132
      max-width: 100%
133
134
      div {
135
        -webkit-user-select: text
136
      }
137
    }
138
  }
139
140
  div.bottom {
141
    position: relative
142
    box-shadow: 0 0 3px #222
143
    background: #222
144
    align-items: center
145
    display: flex
146
    padding: 5px
147
148
    audio {
149
      color: #EEE
150
151
      ::-webkit-media-controls-panel {
152
        background: transparent
153
      }
154
155
      ::-webkit-media-controls-current-time-display {
156
        color: inherit
157
      }
158
159
      width: 100%
160
    }
161
  }
162
}
163
164
@keyframes slide-in {
165
  0% {
166
    max-height: 0
167
  }
168
  100% {
169
    max-height: 100px
170
  }
171
}
172