git ssb

10+

Matt McKegg / patchwork



Tree: 593dfd760dee299082f615e02f2747f1c6f660ec

Files: 593dfd760dee299082f615e02f2747f1c6f660ec / styles / light / main-window.mcss

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

Built with git-ssb-web