1/* App layout */
  2
  3html,
  4body {
  5    height: 100%;
  6}
  7body {
  8    display: flex;
  9    flex-flow: column;
 10    color: #fff;
 11    font: normal 14px Roboto, sans-serif;
 12    background-color: #282a36;
 13}
 14
 15#editor {
 16    flex-grow: 1;
 17    margin-top: -3px;
 18    overflow: auto;
 19}
 20
 21#controls,
 22#copy,
 23footer {
 24    background-color: #3b3b47;
 25    z-index: 10;
 26}
 27
 28#progress {
 29    min-height: 3px;
 30    background: #ff79c6;
 31    z-index: 15;
 32    width: 0;
 33}
 34
 35.hidden,
 36select,
 37#copy:not(.hidden) + #controls,
 38body.readonly .hide-readonly,
 39body:not(.readonly) .show-readonly,
 40body.readonly:not(:hover) #footer {
 41    display: none;
 42}
 43
 44#copy-link {
 45    font-family: JetBrainsMono, sans-serif;
 46    width: 100%;
 47}
 48
 49/* Styling */
 50.shadow-bottom {
 51    box-shadow: rgba(0, 0, 0, 0.15) 0 3px 10px;
 52}
 53.shadow-top {
 54    box-shadow: rgba(0, 0, 0, 0.15) 0 -3px 10px;
 55}
 56a,
 57a:hover,
 58a:active,
 59a:focus {
 60    color: #fff;
 61    outline: none;
 62}
 63#controls a,
 64#footer a {
 65    text-decoration: none;
 66}
 67#controls a:hover {
 68    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
 69}
 70
 71.CodeMirror {
 72    height: 100%;
 73    font-family: JetBrainsMono, sans-serif;
 74}
 75h1 {
 76    font: normal 24px JetBrainsMono, sans-serif;
 77    white-space: nowrap;
 78}
 79.mono {
 80    font-family: JetBrainsMono, sans-serif;
 81}
 82.pink {
 83    color: #ff79c6;
 84}
 85
 86/* Modals */
 87
 88.modal {
 89    display: none;
 90}
 91.modal.is-open {
 92    display: block;
 93}
 94.modal-content {
 95    background-color: #3b3b47;
 96    max-width: 600px;
 97    max-height: 100vh;
 98    overflow-y: auto;
 99    box-sizing: border-box;
100}
101.modal-overlay {
102    position: fixed;
103    background: rgba(0, 0, 0, 0.2);
104    right: 0;
105    top: 0;
106    left: 0;
107    bottom: 0;
108    z-index: 20;
109    display: flex;
110    justify-content: center;
111    align-items: center;
112}
113
114/* Form elements */
115
116#controls .ss-main {
117    width: 180px;
118}
119
120.ss-main .ss-single-selected,
121button,
122input[type='text'],
123input[type='search'] {
124    background-color: #3b3b47 !important;
125    color: #fff !important;
126    border-radius: 2px !important;
127    border: 1px solid #ccc !important;
128    font: normal 14px Roboto, sans-serif;
129    height: 26px !important;
130}
131
132input::-webkit-search-cancel-button {
133    display: none;
134}
135input::-moz-selection {
136    background-color: rgba(90, 95, 128, 0.99);
137}
138input::selection {
139    background-color: rgba(90, 95, 128, 0.99);
140}
141button {
142    cursor: pointer;
143}
144button:hover {
145    background-color: rgba(255, 255, 255, 0.1) !important;
146}
147.ss-content {
148    background-color: #282936;
149    color: #dedede;
150    font-size: 14px;
151}
152.ss-content .ss-disabled {
153    background-color: #3b3b47 !important;
154}
155
156/* Fonts */
157@font-face {
158    font-family: 'JetBrainsMono';
159    src: url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff2/JetBrainsMono-Regular.woff2') format('woff2'),
160        url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff/JetBrainsMono-Regular.woff') format('woff'),
161        url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/ttf/JetBrainsMono-Regular.ttf') format('truetype');
162    font-weight: 400;
163    font-style: normal;
164}
165
166@font-face {
167    font-family: 'Roboto';
168    font-style: normal;
169    font-weight: 400;
170    font-display: swap;
171    src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');
172    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
173        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
174}
175
176/* Icons */
177
178@font-face {
179    font-family: 'icomoon';
180    src: url('data:application/x-font-woff;charset=utf-8;base64,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')
181        format('truetype');
182    font-weight: normal;
183    font-style: normal;
184    font-display: block;
185}
186
187[class^='icon-'],
188[class*=' icon-'] {
189    font-family: 'icomoon' !important;
190    speak: none;
191    font-style: normal;
192    font-weight: normal;
193    font-variant: normal;
194    text-transform: none;
195    line-height: 1;
196    -webkit-font-smoothing: antialiased;
197    -moz-osx-font-smoothing: grayscale;
198    font-size: 21px;
199}
200.icon-edit {
201    font-size: 12px;
202}
203
204.icon-question:before {
205    content: '\e900';
206}
207.icon-github:before {
208    content: '\e901';
209}
210.icon-edit:before {
211    content: '\e903';
212}
213.icon-notes:before {
214    content: '\e902';
215}
216.icon-wrap-text:before {
217    content: '\e905';
218}