Files: f096230a58e0b7b3a85a61e839a6088a8fe434c2 / styles / main-window.mcss
2848 bytesRaw
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 | |
133 | div { |
134 | -webkit-user-select: text |
135 | } |
136 | } |
137 | } |
138 | |
139 | div.bottom { |
140 | position: relative |
141 | box-shadow: 0 0 3px #222 |
142 | background: #222 |
143 | align-items: center |
144 | display: flex |
145 | padding: 5px |
146 | |
147 | audio { |
148 | color: #EEE |
149 | |
150 | ::-webkit-media-controls-panel { |
151 | background: transparent |
152 | } |
153 | |
154 | ::-webkit-media-controls-current-time-display { |
155 | color: inherit |
156 | } |
157 | |
158 | width: 100% |
159 | } |
160 | } |
161 | } |
162 | |
163 | @keyframes slide-in { |
164 | 0% { |
165 | max-height: 0 |
166 | } |
167 | 100% { |
168 | max-height: 100px |
169 | } |
170 | } |
171 |
Built with git-ssb-web