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