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}
 60.CodeMirror {
 61    height: 100%;
 62    font-family: JetBrainsMono, sans-serif;
 63}
 64.title {
 65    font: normal 24px JetBrainsMono, sans-serif;
 66    white-space: nowrap;
 67}
 68.mono {
 69    font-family: JetBrainsMono, sans-serif;
 70}
 71.description-trigger:hover + #description {
 72    display: block;
 73    position: fixed;
 74    bottom: 20px;
 75    margin: 40px;
 76    right: 0;
 77    max-width: 350px;
 78}
 79.description-trigger:hover + #description + #overlay {
 80    /* Used to un-hover on mobile */
 81    display: block;
 82    position: fixed;
 83    background: transparent;
 84    right: 0;
 85    top: 0;
 86    left: 0;
 87    bottom: 25px;
 88}
 89
 90#description b {
 91    font-weight: normal;
 92    color: #ff79c6;
 93}
 94
 95/* Form elements */
 96
 97#controls .ss-main {
 98    width: 180px;
 99}
100
101.ss-main .ss-single-selected,
102button,
103input[type='text'],
104input[type='search'] {
105    background-color: #3b3b47 !important;
106    color: #fff !important;
107    border-radius: 2px !important;
108    border: 1px solid #ccc !important;
109    font: normal 14px Roboto, sans-serif;
110    height: 26px !important;
111}
112
113input::-webkit-search-cancel-button {
114    display: none;
115}
116input::-moz-selection {
117    background-color: rgba(90, 95, 128, 0.99);
118}
119input::selection {
120    background-color: rgba(90, 95, 128, 0.99);
121}
122button {
123    cursor: pointer;
124}
125button:hover {
126    background-color: rgba(255, 255, 255, 0.1) !important;
127}
128.ss-content {
129    background-color: #282936;
130    color: #dedede;
131    font-size: 14px;
132}
133.ss-content .ss-disabled {
134    background-color: #3b3b47 !important;
135}
136
137/* Fonts */
138@font-face {
139    font-family: 'JetBrainsMono';
140    src: url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff2/JetBrainsMono-Regular.woff2')
141            format('woff2'),
142        url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff/JetBrainsMono-Regular.woff') format('woff'),
143        url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/ttf/JetBrainsMono-Regular.ttf') format('truetype');
144    font-weight: 400;
145    font-style: normal;
146}
147
148@font-face {
149    font-family: 'Roboto';
150    font-style: normal;
151    font-weight: 400;
152    font-display: swap;
153    src: local('Roboto'), local('Roboto-Regular'),
154        url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');
155    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,
156        U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
157}