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