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,
 23#description,
 24footer {
 25    background-color: #3b3b47;
 26    z-index: 10;
 27}
 28
 29#progress {
 30    min-height: 3px;
 31    background: #ff79c6;
 32    z-index: 15;
 33    width: 0;
 34}
 35
 36.hidden,
 37select,
 38#copy:not(.hidden) + #controls,
 39.readonly .hide-readonly {
 40    display: none;
 41}
 42
 43#copy-link {
 44    font-family: JetBrainsMono, sans-serif;
 45    width: 100%;
 46}
 47
 48/* Styling */
 49.shadow-bottom {
 50    box-shadow: rgba(0, 0, 0, 0.15) 0 3px 10px;
 51}
 52.shadow-top {
 53    box-shadow: rgba(0, 0, 0, 0.15) 0 -3px 10px;
 54}
 55a,
 56a:hover,
 57a:active {
 58    color: #fff;
 59    text-decoration: none;
 60}
 61.CodeMirror {
 62    height: 100%;
 63    font-family: JetBrainsMono, sans-serif;
 64}
 65.title {
 66    font: normal 24px JetBrainsMono, sans-serif;
 67    white-space: nowrap;
 68}
 69.mono {
 70    font-family: JetBrainsMono, sans-serif;
 71}
 72#description {
 73    display: block;
 74    position: fixed;
 75    top: 0;
 76    margin: 45px;
 77    left: 0;
 78    max-width: 370px;
 79}
 80#overlay {
 81    /* Used to un-hover on mobile */
 82    position: fixed;
 83    background: rgba(0, 0, 0, 0.3);
 84    right: 0;
 85    top: 0;
 86    left: 0;
 87    bottom: 0;
 88    z-index: 20;
 89}
 90
 91#description b {
 92    font-weight: normal;
 93    color: #ff79c6;
 94}
 95
 96/* Form elements */
 97
 98#controls .ss-main {
 99    width: 180px;
100}
101
102.ss-main .ss-single-selected,
103button,
104input[type='text'],
105input[type='search'] {
106    background-color: #3b3b47 !important;
107    color: #fff !important;
108    border-radius: 2px !important;
109    border: 1px solid #ccc !important;
110    font: normal 14px Roboto, sans-serif;
111    height: 26px !important;
112}
113
114input::-webkit-search-cancel-button {
115    display: none;
116}
117input::-moz-selection {
118    background-color: rgba(90, 95, 128, 0.99);
119}
120input::selection {
121    background-color: rgba(90, 95, 128, 0.99);
122}
123button {
124    cursor: pointer;
125}
126button:hover {
127    background-color: rgba(255, 255, 255, 0.1) !important;
128}
129.ss-content {
130    background-color: #282936;
131    color: #dedede;
132    font-size: 14px;
133}
134.ss-content .ss-disabled {
135    background-color: #3b3b47 !important;
136}
137
138/* Fonts */
139@font-face {
140    font-family: 'JetBrainsMono';
141    src: url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff2/JetBrainsMono-Regular.woff2')
142            format('woff2'),
143        url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff/JetBrainsMono-Regular.woff') format('woff'),
144        url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/ttf/JetBrainsMono-Regular.ttf') format('truetype');
145    font-weight: 400;
146    font-style: normal;
147}
148
149@font-face {
150    font-family: 'Roboto';
151    font-style: normal;
152    font-weight: 400;
153    font-display: swap;
154    src: local('Roboto'), local('Roboto-Regular'),
155        url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');
156    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,
157        U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
158}
159
160/* Icons */
161.icon {
162    display: inline-block;
163    font-size: 21px;
164    width: 1em;
165    height: 1em;
166    stroke-width: 0;
167    stroke: currentColor;
168    fill: currentColor;
169}