1/* App layout */
  2
  3#editor,
  4#footer,
  5#copy {
  6    position: absolute;
  7    left: 0;
  8    right: 0;
  9    bottom: 0;
 10}
 11
 12#editor {
 13    top: 0;
 14    bottom: 46px;
 15}
 16
 17#footer,
 18#copy {
 19    height: 38px;
 20    padding: 8px 10px 0 42px;
 21    background-color: #3b3b47;
 22    display: flex;
 23    flex-wrap: wrap;
 24}
 25#footer > *,
 26#copy > * {
 27    margin: 0 6px;
 28}
 29.grow {
 30    flex-grow: 1;
 31}
 32
 33.codeflask textarea {
 34    box-shadow: 5px -5px 10px rgba(0, 0, 0, 0.3) inset;
 35}
 36
 37/* Form elements */
 38
 39.ss-main {
 40    max-width: 300px;
 41    width: calc(100% - 150px);
 42    font-family: sans-serif;
 43}
 44
 45.ss-main .ss-single-selected,
 46button,
 47input[type='text'],
 48input[type='search'] {
 49    height: 28px;
 50    background-color: #3b3b47 !important;
 51    color: #fff !important;
 52    border-radius: 2px !important;
 53    border: 1px solid #ccc !important;
 54    font-size: 14px !important;
 55}
 56.ss-content {
 57    background-color: #282936;
 58    color: #dedede;
 59    font-size: 14px;
 60}
 61.ss-content .ss-disabled {
 62    background-color: #3b3b47 !important;
 63}
 64
 65input[type='text'],
 66input[type='search'] {
 67    height: 26px !important;
 68    padding: 0 5px;
 69}
 70input::-moz-selection {
 71    background-color: rgba(90, 95, 128, 0.99);
 72}
 73input::selection {
 74    background-color: rgba(90, 95, 128, 0.99);
 75}
 76
 77button {
 78    cursor: pointer;
 79    padding: 4px 8px;
 80}
 81button:hover {
 82    background-color: rgba(255, 255, 255, 0.1) !important;
 83}
 84
 85/* Code editor theme */
 86
 87.codeflask {
 88    color: #ccc;
 89    background: #282936;
 90}
 91.codeflask textarea {
 92    color: #282936;
 93    caret-color: rgba(241, 250, 140, 1);
 94}
 95
 96.codeflask .codeflask__flatten {
 97    font-size: 15px;
 98}
 99
100.codeflask textarea::-moz-selection,
101.codeflask textarea ::-moz-selection {
102    background-color: rgba(90, 95, 128, 0.99);
103    color: #5a5f80;
104}
105
106.codeflask textarea::selection,
107.codeflask textarea ::selection {
108    background-color: rgba(90, 95, 128, 0.99);
109    color: #5a5f80;
110}
111
112.codeflask.codeflask--has-line-numbers::before {
113    background: #3b3b47 !important;
114}
115
116/* Code editor syntax highlight */
117/* Inspiration from https://github.com/dracula/prism */
118.token.comment {
119    color: rgba(98, 114, 164, 1);
120}
121
122.token.prolog {
123    color: rgba(207, 207, 194, 1);
124}
125
126.token.tag {
127    color: rgba(220, 104, 170, 1);
128}
129
130.token.entity {
131    color: rgba(139, 233, 253, 1);
132}
133
134.token.atrule {
135    color: rgba(98, 239, 117, 1);
136}
137
138.token.url {
139    color: rgba(102, 217, 239, 1);
140}
141
142.token.selector {
143    color: rgba(207, 207, 194, 1);
144}
145
146.token.string {
147    color: rgba(241, 250, 140, 1);
148}
149
150.token.property {
151    color: rgba(255, 184, 108, 1);
152}
153
154.token.important {
155    color: rgba(255, 121, 198, 1);
156    font-weight: bold;
157}
158
159.token.punctuation {
160    color: white;
161}
162
163.token.number {
164    color: rgba(189, 147, 249, 1);
165}
166
167.token.function {
168    color: rgba(80, 250, 123, 1);
169}
170
171.token.class-name {
172    color: rgba(255, 184, 108, 1);
173}
174
175.token.keyword {
176    color: rgba(255, 121, 198, 1);
177}
178
179.token.boolean {
180    color: rgba(255, 184, 108, 1);
181}
182
183.token.operator {
184    color: rgba(139, 233, 253, 1);
185}
186
187.token.char {
188    color: rgba(255, 135, 157, 1);
189}
190
191.token.regex {
192    color: rgba(80, 250, 123, 1);
193}
194
195.token.variable {
196    color: rgba(80, 250, 123, 1);
197}
198
199.token.constant {
200    color: rgba(255, 184, 108, 1);
201}
202
203.token.symbol {
204    color: rgba(255, 184, 108, 1);
205}
206
207.token.builtin {
208    color: rgba(255, 121, 198, 1);
209}
210
211.token.attr-value {
212    color: #7ec699;
213}
214
215.token.deleted {
216    color: #e2777a;
217}
218
219.token.namespace {
220    color: #e2777a;
221}
222
223.token.bold {
224    font-weight: bold;
225}
226
227.token.italic {
228    font-style: italic;
229}
230
231.token {
232    color: #ff79c6;
233}
234
235.language-cpp .token.string {
236    color: #8be9fd;
237}
238
239.language-c .token.string {
240    color: #8be9fd;
241}
242
243.language-css .token.selector {
244    color: rgba(80, 250, 123, 1);
245}
246
247.language-css .token.property {
248    color: rgba(255, 184, 108, 1);
249}
250
251.language-java span.token.class-name {
252    color: #8be9fd;
253}
254
255.language-java .token.class-name {
256    color: #8be9fd;
257}
258
259.language-markup .token.attr-value {
260    color: rgba(102, 217, 239, 1);
261}
262
263.language-markup .token.tag {
264    color: rgba(80, 250, 123, 1);
265}
266
267.language-objectivec .token.property {
268    color: #66d9ef;
269}
270
271.language-objectivec .token.string {
272    color: #50fa7b;
273}
274
275.language-php .token.boolean {
276    color: #8be9fd;
277}
278
279.language-php .token.function {
280    color: #ff79c6;
281}
282
283.language-php .token.keyword {
284    color: #66d9ef;
285}
286
287.language-ruby .token.symbol {
288    color: #8be9fd;
289}
290
291.language-ruby .token.class-name {
292    color: #cfcfc2;
293}