1/* App layout */
  2
  3#editor,
  4#controls,
  5#copy,
  6#progress {
  7    position: absolute;
  8    left: 0;
  9    right: 0;
 10}
 11
 12#editor {
 13    top: 44px;
 14    bottom: 0;
 15}
 16.readonly #editor {
 17    top: 0;
 18}
 19
 20#controls {
 21    box-shadow: rgba(0, 0, 0, 0.15) 0 3px 10px;
 22}
 23#controls .title {
 24    color: #fff;
 25    font-family: JetBrainsMono, sans-serif;
 26    font-size: 24px;
 27    line-height: 30px;
 28}
 29
 30.CodeMirror {
 31    height: 100%;
 32    font-size: 14px;
 33    font-family: JetBrainsMono, sans-serif;
 34}
 35
 36#controls,
 37#copy {
 38    top: 0;
 39    height: 36px;
 40    padding: 8px 8px 0;
 41    background-color: #3b3b47;
 42    display: flex;
 43    flex-wrap: wrap;
 44    z-index: 10;
 45}
 46#controls > *,
 47#copy > * {
 48    margin: 0 6px;
 49}
 50
 51.readonly #controls {
 52    display: none;
 53}
 54
 55#progress {
 56    top: 0;
 57    height: 3px;
 58    background: #ff79c6;
 59    z-index: 5;
 60    width: 0;
 61}
 62
 63#copy-link {
 64    font-family: JetBrainsMono, sans-serif;
 65}
 66
 67.grow {
 68    flex-grow: 1;
 69}
 70
 71/* Form elements */
 72
 73#controls .ss-main {
 74    max-width: 230px;
 75    width: calc(100% - 150px);
 76    font-family: Roboto, sans-serif;
 77    margin-right: 30px;
 78}
 79
 80.ss-main .ss-single-selected,
 81button,
 82input[type='text'],
 83input[type='search'] {
 84    height: 28px;
 85    background-color: #3b3b47 !important;
 86    color: #fff !important;
 87    border-radius: 2px !important;
 88    border: 1px solid #ccc !important;
 89    font-size: 14px !important;
 90    font-family: Roboto, sans-serif;
 91}
 92input[type='text'],
 93input[type='search'] {
 94    height: 26px !important;
 95    padding: 0 5px;
 96}
 97
 98input::-webkit-search-cancel-button {
 99    display: none;
100}
101input::-moz-selection {
102    background-color: rgba(90, 95, 128, 0.99);
103}
104input::selection {
105    background-color: rgba(90, 95, 128, 0.99);
106}
107button {
108    cursor: pointer;
109    padding: 4px 8px;
110}
111button:hover {
112    background-color: rgba(255, 255, 255, 0.1) !important;
113}
114.ss-content {
115    background-color: #282936;
116    color: #dedede;
117    font-size: 14px;
118}
119.ss-content .ss-disabled {
120    background-color: #3b3b47 !important;
121}
122
123/* Fonts */
124@font-face {
125    font-family: 'JetBrainsMono';
126    src: url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff2/JetBrainsMono-Regular.woff2')
127            format('woff2'),
128        url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff/JetBrainsMono-Regular.woff') format('woff'),
129        url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/ttf/JetBrainsMono-Regular.ttf') format('truetype');
130    font-weight: 400;
131    font-style: normal;
132}
133
134@font-face {
135    font-family: 'Roboto';
136    font-style: normal;
137    font-weight: 400;
138    font-display: swap;
139    src: local('Roboto'), local('Roboto-Regular'),
140        url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');
141    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,
142        U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
143}