reach-vb/github-issue-generator-webgpu

1body {2  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;3  line-height: 1.5;4  color: #24292f;5}6 7/* GitHub-like textarea */8.github-textarea {9  width: 100%;10  min-height: 200px;11  padding: 8px 12px;12  font-size: 14px;13  line-height: 1.5;14  color: #24292f;15  background-color: #ffffff;16  border: 1px solid #d0d7de;17  border-radius: 6px;18  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);19  resize: vertical;20}21 22.github-textarea:focus {23  border-color: #0969da;24  outline: none;25  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);26}27 28/* GitHub-like select */29.github-select {30  padding: 5px 12px;31  font-size: 14px;32  line-height: 20px;33  color: #24292f;34  background-color: #f6f8fa;35  border: 1px solid #d0d7de;36  border-radius: 6px;37  outline: none;38  box-shadow: 0 1px 0 rgba(27,31,36,0.04);39  min-width: 200px;40  cursor: pointer;41}42 43.github-select:focus {44  border-color: #0969da;45  outline: none;46  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);47}48 49.github-select:hover {50  background-color: #f3f4f6;51  border-color: #b1bac4;52}53 54/* GitHub-like button */55.github-button {56  color: #ffffff;57  background-color: #2da44e;58  padding: 5px 16px;59  font-size: 14px;60  font-weight: 500;61  line-height: 20px;62  border: 1px solid rgba(27,31,36,0.15);63  border-radius: 6px;64  box-shadow: 0 1px 0 rgba(27,31,36,0.1);65  transition: all 0.2s;66}67 68.github-button:hover {69  background-color: #2c974b;70}71 72.github-button:active {73  background-color: #298e46;74  box-shadow: inset 0 1px 0 rgba(0,45,17,0.2);75}76 77/* GitHub-like octicon */78.octicon {79  fill: currentColor;80  color: #57606a;81}82 83#output {84  min-height: 100px;85  font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;86  font-size: 12px;87  line-height: 1.5;88  white-space: pre-wrap;89  overflow-wrap: break-word;90}91 92#stats {93  color: #57606a;94  border-top: 1px solid #d0d7de;95  margin-top: 16px;96  padding-top: 16px;97}98 99/* Ace editor customizations */100.ace_editor {101  font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace !important;102  font-size: 12px !important;103  background-color: #f6f8fa !important;104}105 106/* Add styles for the label */107.github-select-label {108  font-size: 14px;109  color: #57606a;110  margin-right: 8px;111}112 113.loading {114  color: #57606a;115  font-size: 14px;116  padding: 12px;117  display: flex;118  align-items: flex-start;119  gap: 8px;120  white-space: pre-wrap;121  overflow-wrap: break-word;122}123 124.loading::before {125  content: "";126  width: 16px;127  height: 16px;128  flex-shrink: 0;129  border: 2px solid #e5e7eb;130  border-top-color: #0969da;131  border-radius: 50%;132  animation: spin 1s linear infinite;133  margin-top: 2px;134}135 136.error {137  color: #cf222e;138  background-color: #ffebe9;139  padding: 12px;140  border-radius: 6px;141  font-size: 14px;142}143 144@keyframes spin {145  to {146    transform: rotate(360deg);147  }148}149 150/* Improve Ace editor appearance */151#schema {152  height: 400px !important;153  border: 1px solid #d0d7de;154  border-radius: 6px;155}156 157.ace_editor {158  font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace !important;159  font-size: 12px !important;160  background-color: #f6f8fa !important;161  border-radius: 6px;162}163 164.ace_gutter {165  background: #f6f8fa !important;166}167 168/* Make the textarea more GitHub-like */169.github-textarea {170  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;171  font-size: 14px !important;172  line-height: 1.5 !important;173  padding: 12px !important;174  min-height: 300px !important;175  max-height: 600px;176}177 178/* Improve output formatting */179#output {180  min-height: 300px;181  max-height: 500px;182  overflow-y: auto;183  font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;184  font-size: 12px;185  line-height: 1.5;186  white-space: pre-wrap;187  overflow-wrap: break-word;188  padding: 16px !important;189  background-color: #f6f8fa !important;190}191 192#output .hljs {193  background-color: transparent !important;194  padding: 0 !important;195}196 197/* Improve the container padding on mobile */198@media (max-width: 768px) {199  .max-w-7xl {200    padding-left: 1rem;201    padding-right: 1rem;202  }203}204 205/* Priority badges */206.priority-critical {207  background-color: #cf222e;208  color: white;209}210 211.priority-high {212  background-color: #bc4c00;213  color: white;214}215 216.priority-medium {217  background-color: #bf8700;218  color: white;219}220 221.priority-low {222  background-color: #1a7f37;223  color: white;224}225 226/* Label styles */227.issue-label {228  padding: 2px 8px;229  border-radius: 2em;230  font-size: 12px;231  font-weight: 500;232  white-space: nowrap;233}234 235.label-bug {236  background-color: #ffebe9;237  color: #cf222e;238}239 240.label-enhancement {241  background-color: #ddf4ff;242  color: #0969da;243}244 245.label-documentation {246  background-color: #fff8c5;247  color: #9a6700;248}249 250.label-security {251  background-color: #ffeff7;252  color: #bf3989;253}254 255.label-high-priority {256  background-color: #fff1e5;257  color: #bc4c00;258}259 260/* Assignee avatars */261.assignee-avatar {262  width: 24px;263  height: 24px;264  border-radius: 50%;265  background-color: #f6f8fa;266  border: 2px solid white;267  display: flex;268  align-items: center;269  justify-content: center;270  font-size: 12px;271  color: #57606a;272  font-weight: 500;273}274 275/* Issue description styling */276.issue-description {277  font-size: 14px;278  line-height: 1.5;279  color: #24292f;280}281 282/* Transition for the preview */283#issue-preview {284  transition: all 0.3s ease-in-out;285  opacity: 0;286  transform: translateY(10px);287}288 289#issue-preview.visible {290  opacity: 1;291  transform: translateY(0);292}