styles.css
56,109 bytes
| 1 | :root { |
|---|---|
| 2 | --ink: #101a2c; |
| 3 | --ink-soft: #536078; |
| 4 | --paper: #f6f8fc; |
| 5 | --white: #ffffff; |
| 6 | --line: #dce3ef; |
| 7 | --blue: #3158d4; |
| 8 | --blue-dark: #223d9a; |
| 9 | --blue-pale: #e8edff; |
| 10 | --cyan: #75d5e8; |
| 11 | --green: #17865b; |
| 12 | --red: #c6404b; |
| 13 | --viewer: #111a2b; |
| 14 | --shadow: 0 18px 50px rgba(21, 40, 82, .11); |
| 15 | } |
| 16 | |
| 17 | * { box-sizing: border-box; } |
| 18 | html { background: var(--paper); } |
| 19 | body { margin: 0; color: var(--ink); font-family: "Segoe UI", Arial, sans-serif; line-height: 1.5; } |
| 20 | a { color: inherit; } |
| 21 | button, input, select { font: inherit; } |
| 22 | .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); } |
| 23 | .wordmark { font-family: Georgia, serif; font-size: 22px; font-weight: 700; letter-spacing: -.04em; text-decoration: none; } |
| 24 | .wordmark span { color: var(--blue); } |
| 25 | .wordmark-light { color: white; } |
| 26 | .wordmark-light span { color: var(--cyan); } |
| 27 | .eyebrow, .step-label { margin: 0 0 9px; color: var(--blue); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; } |
| 28 | .button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; padding: 0 18px; border: 1px solid transparent; border-radius: 7px; font-weight: 700; text-decoration: none; cursor: pointer; } |
| 29 | .button-primary { background: var(--blue); color: white; box-shadow: 0 6px 18px rgba(49, 88, 212, .2); } |
| 30 | .button-primary:hover { background: var(--blue-dark); } |
| 31 | .button-secondary { border-color: var(--line); background: white; color: var(--ink); } |
| 32 | .button-danger { border-color: #cf222e; background: #cf222e; color: white; } |
| 33 | .button-danger:hover { background: #a40e26; } |
| 34 | .button-small { min-height: 34px; padding: 0 12px; font-size: 12px; } |
| 35 | .button:disabled { opacity: .45; cursor: not-allowed; } |
| 36 | .text-link { color: var(--blue); font-weight: 700; text-decoration: none; } |
| 37 | a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; } |
| 38 | |
| 39 | .owner-page { min-height: 100vh; background: radial-gradient(circle at 82% 10%, rgba(117, 213, 232, .2), transparent 24%), var(--paper); } |
| 40 | .owner-header { height: 74px; display: flex; align-items: center; justify-content: space-between; padding: 0 5vw; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.82); } |
| 41 | .owner-header-actions { display: flex; align-items: center; gap: 18px; } |
| 42 | .owner-identity { display: flex; align-items: center; gap: 10px; font-weight: 700; } |
| 43 | .owner-identity img { width: 32px; height: 32px; border-radius: 50%; } |
| 44 | .owner-header-actions form { margin: 0; } |
| 45 | .owner-signout { padding: 0; border: 0; background: transparent; color: var(--ink-soft); font-weight: 600; cursor: pointer; } |
| 46 | .owner-signout:hover { color: var(--ink); } |
| 47 | .owner-shell { width: min(1180px, 90vw); margin: 64px auto; } |
| 48 | .welcome-panel { width: min(730px, 65vw); padding: 70px; border: 1px solid var(--line); border-radius: 20px; background: rgba(255,255,255,.94); box-shadow: var(--shadow); } |
| 49 | .welcome-panel h1 { max-width: 620px; margin: 0; font: 700 54px/1.05 Georgia, serif; letter-spacing: -.045em; } |
| 50 | .lede { max-width: 590px; margin: 24px 0 34px; color: var(--ink-soft); font-size: 19px; } |
| 51 | .privacy-note { display: flex; gap: 10px; margin-top: 34px; padding-top: 23px; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 14px; } |
| 52 | .privacy-note strong { color: var(--ink); } |
| 53 | .notice { padding: 13px 16px; border: 1px solid #c7d6f3; border-radius: 7px; background: #edf3ff; } |
| 54 | .notice-error { border-color: #f0b9bf; background: #fff0f1; color: #8d2631; } |
| 55 | .notice-success { border-color: #a9d6b8; background: #dafbe1; color: #116329; } |
| 56 | .setup-panel { max-width: 660px; padding: 50px; border: 1px solid var(--line); border-radius: 16px; background: white; box-shadow: var(--shadow); } |
| 57 | .setup-panel h1, .workspace-heading h1 { margin: 0 0 12px; font: 700 40px/1.1 Georgia, serif; letter-spacing: -.035em; } |
| 58 | .setup-panel p:not(.step-label) { color: var(--ink-soft); font-size: 17px; } |
| 59 | .setup-panel .button { margin-top: 15px; } |
| 60 | .workspace-heading { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 28px; } |
| 61 | .share-form { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 28px; align-items: start; } |
| 62 | .share-form fieldset { min-width: 0; margin: 0; padding: 0; border: 0; } |
| 63 | .repo-selection { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } |
| 64 | .repo-choice { position: relative; display: flex; min-height: 142px; gap: 15px; padding: 21px; border: 1px solid var(--line); border-radius: 11px; background: white; cursor: pointer; transition: border-color .15s, transform .15s; } |
| 65 | .repo-choice:hover { border-color: #97a9d6; transform: translateY(-1px); } |
| 66 | .repo-choice:has(input:checked) { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); background: #f8faff; } |
| 67 | .repo-choice:has(input:focus-visible) { outline: 3px solid var(--cyan); outline-offset: 3px; } |
| 68 | .repo-choice input { position: absolute; opacity: 0; } |
| 69 | .choice-mark { width: 20px; height: 20px; flex: 0 0 auto; border: 1.5px solid #a8b4c8; border-radius: 5px; } |
| 70 | .repo-choice input:checked + .choice-mark { border-color: var(--blue); background: var(--blue); box-shadow: inset 0 0 0 4px white; } |
| 71 | .repo-choice-copy { display: flex; min-width: 0; flex: 1; flex-direction: column; } |
| 72 | .repo-choice-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; } |
| 73 | .repo-choice-title strong { overflow: hidden; text-overflow: ellipsis; font-size: 17px; } |
| 74 | .visibility { padding: 2px 7px; border: 1px solid var(--line); border-radius: 20px; color: var(--ink-soft); font-size: 10px; text-transform: uppercase; } |
| 75 | .repo-description { margin: 10px 0; color: var(--ink-soft); font-size: 14px; } |
| 76 | .repo-meta { margin-top: auto; color: #738098; font-size: 12px; } |
| 77 | .publish-panel { position: sticky; top: 25px; padding: 26px; border-radius: 12px; background: var(--ink); color: white; box-shadow: var(--shadow); } |
| 78 | .publish-panel .step-label { color: var(--cyan); } |
| 79 | .publish-panel label { display: block; font-weight: 700; } |
| 80 | .duration-input { display: flex; align-items: center; margin: 9px 0 15px; border: 1px solid #41506a; border-radius: 7px; background: #19243a; } |
| 81 | .duration-input input { width: 100%; padding: 12px; border: 0; outline: 0; background: transparent; color: white; font-size: 19px; } |
| 82 | .duration-input span { padding-right: 13px; color: #b6c1d5; } |
| 83 | .publish-panel p:not(.step-label) { color: #b6c1d5; font-size: 13px; } |
| 84 | .publish-panel .selection-count { color: white; font-weight: 700; } |
| 85 | .publish-panel .button { width: 100%; margin-top: 8px; } |
| 86 | .snapshot-list-section { margin-top: 62px; scroll-margin-top: 24px; } |
| 87 | .snapshot-list-heading { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 14px; } |
| 88 | .snapshot-list-heading h2 { margin: 0; font: 700 30px/1.2 Georgia, serif; } |
| 89 | .snapshot-list-heading > span { color: var(--ink-soft); font-size: 13px; } |
| 90 | .snapshot-list { overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: white; } |
| 91 | .snapshot-list-item { min-height: 132px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px; border-bottom: 1px solid var(--line); } |
| 92 | .snapshot-list-item:last-child { border-bottom: 0; } |
| 93 | .snapshot-list-main { min-width: 0; } |
| 94 | .snapshot-list-title { display: flex; align-items: center; gap: 10px; } |
| 95 | .snapshot-list-title h3 { margin: 0; overflow: hidden; font-size: 17px; text-overflow: ellipsis; white-space: nowrap; } |
| 96 | .snapshot-status { padding: 2px 7px; border: 1px solid var(--line); border-radius: 20px; color: var(--ink-soft); font-size: 10px; font-weight: 700; text-transform: capitalize; } |
| 97 | .snapshot-status-active { border-color: #a9d6b8; background: #dafbe1; color: #116329; } |
| 98 | .snapshot-status-revoked { border-color: #f0b9bf; background: #ffebe9; color: #a40e26; } |
| 99 | .snapshot-list-main p { margin: 7px 0; color: var(--ink-soft); font-size: 12px; } |
| 100 | .snapshot-list-main code { display: block; max-width: 620px; overflow: hidden; color: #57606a; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; } |
| 101 | .snapshot-list-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 7px; } |
| 102 | .snapshot-list-actions form { margin: 0; } |
| 103 | .center-shell { min-height: 100vh; display: grid; place-items: center; padding: 50px; } |
| 104 | .created-panel { width: min(720px, 80vw); padding: 56px; border: 1px solid var(--line); border-radius: 18px; background: white; box-shadow: var(--shadow); } |
| 105 | .created-panel h1 { margin: 15px 0; font: 700 44px/1.1 Georgia, serif; } |
| 106 | .snapshot-seal { display: inline-block; margin: 0; padding: 6px 10px; border: 1px solid var(--blue); color: var(--blue); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; transform: rotate(-1.5deg); } |
| 107 | .copy-row { display: flex; gap: 8px; margin: 28px 0 15px; } |
| 108 | .copy-row input { min-width: 0; flex: 1; padding: 0 13px; border: 1px solid var(--line); border-radius: 7px; background: var(--paper); } |
| 109 | .created-actions { display: flex; align-items: center; gap: 20px; } |
| 110 | .review-summary { margin: 28px 0; padding: 20px; border: 1px solid var(--line); border-radius: 9px; background: var(--paper); } |
| 111 | .review-summary h2 { margin: 0; font: 700 20px Georgia, serif; } |
| 112 | .review-summary p { margin: 6px 0 15px; color: var(--ink-soft); font-size: 13px; } |
| 113 | .review-summary ul { margin: 0; padding: 0; list-style: none; } |
| 114 | .review-summary li { display: flex; justify-content: space-between; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13px; } |
| 115 | .review-summary li span { color: var(--ink-soft); } |
| 116 | |
| 117 | .viewer-page { min-height: 100vh; background: #f4f6fa; } |
| 118 | .viewer-header { height: 68px; display: flex; align-items: center; justify-content: space-between; padding: 0 4vw; background: var(--viewer); color: #b8c3d7; } |
| 119 | .viewer-header > .wordmark { flex: 0 0 auto; } |
| 120 | .snapshot-search { width: min(440px, 40vw); height: 34px; display: flex; align-items: center; gap: 8px; margin: 0 28px; border: 1px solid #526078; border-radius: 6px; background: #0c1422; color: #8c98ad; } |
| 121 | .snapshot-search:focus-within { border-color: #75d5e8; box-shadow: 0 0 0 2px rgba(117, 213, 232, .18); } |
| 122 | .snapshot-search svg { flex: 0 0 auto; margin-left: 10px; fill: currentColor; } |
| 123 | .snapshot-search input:not([type="hidden"]) { min-width: 0; height: 100%; flex: 1; padding: 0; border: 0; outline: 0; background: transparent; color: white; font-size: 13px; } |
| 124 | .snapshot-search input::placeholder { color: #8c98ad; opacity: 1; } |
| 125 | .snapshot-search kbd { margin-right: 7px; padding: 0 5px 1px; border: 1px solid #526078; border-radius: 4px; color: #9eabc0; font: 11px/17px "Segoe UI", Arial, sans-serif; } |
| 126 | .snapshot-search button:not(.sr-only) { align-self: stretch; padding: 0 13px; border: 0; border-left: 1px solid #526078; background: #202b3d; color: white; font-size: 12px; font-weight: 600; cursor: pointer; } |
| 127 | .snapshot-search button:not(.sr-only):hover { background: #2b384d; } |
| 128 | .snapshot-meta, .top-nav { display: flex; align-items: center; gap: 10px; font-size: 12px; } |
| 129 | .snapshot-meta, .top-nav { flex: 0 0 auto; } |
| 130 | .top-nav a { color: white; font-weight: 700; text-decoration: none; } |
| 131 | .status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 4px rgba(117, 213, 232, .1); } |
| 132 | .meta-divider { width: 1px; height: 15px; background: #40506b; } |
| 133 | .profile-tabs { height: 52px; border-bottom: 1px solid #d8dee4; background: #fff; } |
| 134 | .profile-tabs > div { width: min(1180px, 92vw); height: 100%; display: flex; align-items: stretch; gap: 4px; margin: 0 auto; padding-left: 292px; } |
| 135 | .profile-tabs a { position: relative; display: flex; align-items: center; gap: 7px; padding: 0 14px; color: #1f2328; font-size: 14px; text-decoration: none; } |
| 136 | .profile-tabs a:hover { background: #f6f8fa; } |
| 137 | .profile-tabs a.active:after { position: absolute; right: 9px; bottom: -1px; left: 9px; height: 2px; border-radius: 2px; background: #fd8c73; content: ""; } |
| 138 | .profile-tabs a span { min-width: 22px; padding: 0 6px; border-radius: 20px; background: #eaeef2; font-size: 12px; font-weight: 600; text-align: center; } |
| 139 | .profile-shell { width: min(1180px, 92vw); display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 32px; margin: 32px auto 90px; align-items: start; } |
| 140 | .profile-card { position: sticky; top: 24px; } |
| 141 | .profile-avatar { width: 260px; height: 260px; display: block; margin-bottom: 18px; border: 1px solid #d0d7de; border-radius: 50%; object-fit: cover; } |
| 142 | .profile-card h1 { margin: 0; color: #1f2328; font: 600 26px/1.25 "Segoe UI", Arial, sans-serif; } |
| 143 | .profile-login { margin: 0 0 17px; color: #636c76; font-size: 20px; font-weight: 300; } |
| 144 | .profile-bio { margin: 0; color: #1f2328; font-size: 14px; } |
| 145 | .profile-count { display: flex; align-items: baseline; gap: 6px; margin-top: 18px; color: #636c76; font-size: 12px; } |
| 146 | .profile-count strong { color: #1f2328; font-size: 14px; } |
| 147 | .profile-content { min-width: 0; } |
| 148 | .section-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } |
| 149 | .section-heading h2 { margin: 0; color: #1f2328; font: 500 16px/1.4 "Segoe UI", Arial, sans-serif; } |
| 150 | .profile-section-link { color: #0969da; font-size: 12px; text-decoration: none; } |
| 151 | .read-only-badge { padding: 5px 9px; border: 1px solid #bfd1c9; border-radius: 20px; color: var(--green); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } |
| 152 | .repo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } |
| 153 | .repo-card { display: flex; min-height: 150px; flex-direction: column; padding: 16px; border: 1px solid #d0d7de; border-radius: 6px; background: white; color: inherit; text-decoration: none; } |
| 154 | .repo-card:hover { border-color: #0969da; } |
| 155 | .repo-card-top { display: flex; justify-content: space-between; color: #636c76; } |
| 156 | .language { display: inline-flex; align-items: center; gap: 6px; color: #636c76; font-size: 12px; } |
| 157 | .language i { width: 10px; height: 10px; border-radius: 50%; background: #3178c6; } |
| 158 | .repo-card h3 { margin: 14px 0 7px; color: #0969da; font: 600 14px/1.4 "Segoe UI", Arial, sans-serif; } |
| 159 | .repo-card p { margin: 0; color: #636c76; font-size: 12px; } |
| 160 | .repo-card-foot { display: flex; gap: 16px; margin-top: auto; padding-top: 15px; color: #636c76; font-size: 12px; } |
| 161 | .activity-section { margin-top: 38px; } |
| 162 | .activity-list { position: relative; margin: 0; padding: 0; list-style: none; } |
| 163 | .activity-list:before { position: absolute; top: 11px; bottom: 11px; left: 5px; width: 1px; background: #d0d7de; content: ""; } |
| 164 | .activity-list li { position: relative; display: flex; gap: 19px; padding: 0 0 22px; } |
| 165 | .activity-node { z-index: 1; width: 11px; height: 11px; flex: 0 0 auto; margin-top: 6px; border: 3px solid #f4f6fa; border-radius: 50%; background: #1f883d; box-shadow: 0 0 0 1px #1f883d; } |
| 166 | .activity-list strong, .activity-list span { display: block; } |
| 167 | .activity-list a { color: inherit; text-decoration: none; } |
| 168 | .activity-list a:hover strong { color: #0969da; } |
| 169 | .activity-list strong { font-size: 14px; } |
| 170 | .activity-list span { margin-top: 3px; color: #636c76; font-size: 12px; } |
| 171 | .repository-heading { margin-bottom: 16px; padding-bottom: 8px; border-bottom: 1px solid #d8dee4; } |
| 172 | .repository-filter { display: grid; grid-template-columns: minmax(0, 1fr) 150px 160px auto; gap: 8px; padding-bottom: 16px; border-bottom: 1px solid #d8dee4; } |
| 173 | .repository-filter input, .repository-filter select { min-width: 0; height: 32px; padding: 0 10px; border: 1px solid #d0d7de; border-radius: 6px; background: #fff; color: #1f2328; font-size: 13px; } |
| 174 | .repository-filter input:focus, .repository-filter select:focus { border-color: #0969da; outline: 2px solid rgba(9, 105, 218, .2); outline-offset: -1px; } |
| 175 | .repository-filter .quiet-button { border-color: #1f883d; background: #1f883d; color: #fff; cursor: pointer; } |
| 176 | .repository-list article { min-height: 134px; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 24px 0; border-bottom: 1px solid #d8dee4; } |
| 177 | .repository-list-main { min-width: 0; } |
| 178 | .repository-list-title { display: flex; align-items: center; gap: 9px; } |
| 179 | .repository-list-title > a { color: #0969da; font-size: 20px; font-weight: 600; text-decoration: none; } |
| 180 | .repository-list-main > p { margin: 8px 0 16px; color: #636c76; font-size: 13px; } |
| 181 | .repository-list-meta { display: flex; flex-wrap: wrap; gap: 18px; color: #636c76; font-size: 12px; } |
| 182 | .repository-list article > .quiet-button { flex: 0 0 auto; margin-top: 3px; } |
| 183 | .repository-list .empty-state { border-bottom: 1px solid #d8dee4; } |
| 184 | .repository-list .empty-state a { display: block; margin-top: 6px; color: #0969da; text-decoration: none; } |
| 185 | |
| 186 | .repository-page { background: #f6f8fa; color: #1f2328; } |
| 187 | .repo-mast { border-bottom: 1px solid #d8dee4; background: #fff; } |
| 188 | .repo-mast-inner { width: min(1180px, 92vw); margin: 0 auto; padding: 20px 0 18px; } |
| 189 | .repo-identity { display: flex; align-items: center; gap: 9px; } |
| 190 | .repo-mark { width: 20px; height: 20px; color: #636c76; } |
| 191 | .repo-icon { display: block; flex: none; fill: currentColor; overflow: visible; } |
| 192 | .repo-icon-mark { width: 20px; height: 20px; max-width: 20px; max-height: 20px; } |
| 193 | .repo-icon-tab, .repo-icon-file { width: 16px; height: 16px; max-width: 16px; max-height: 16px; } |
| 194 | .repo-icon-branch { width: 14px; height: 14px; max-width: 14px; max-height: 14px; } |
| 195 | .repo-identity h1 { display: flex; align-items: baseline; gap: 7px; margin: 0; font: 400 22px/1.3 "Segoe UI", Arial, sans-serif; letter-spacing: -.02em; } |
| 196 | .repo-identity h1 a { color: #0969da; text-decoration: none; } |
| 197 | .repo-identity h1 span { color: #636c76; } |
| 198 | .repo-identity h1 strong { color: #0969da; font-weight: 650; } |
| 199 | .repo-visibility { padding: 2px 8px; border: 1px solid #d0d7de; border-radius: 20px; color: #636c76; font-size: 12px; font-weight: 600; } |
| 200 | .repo-summary { max-width: 760px; margin: 12px 0 14px; color: #4d5661; font-size: 14px; } |
| 201 | .repo-facts { display: flex; gap: 22px; color: #636c76; font-size: 12px; } |
| 202 | .repo-facts strong { color: #1f2328; font-weight: 600; } |
| 203 | .repo-tabs { border-bottom: 1px solid #d8dee4; background: #fff; } |
| 204 | .repo-tabs-inner { width: min(1180px, 92vw); height: 49px; display: flex; align-items: stretch; gap: 4px; margin: 0 auto; } |
| 205 | .repo-tabs a { position: relative; display: flex; align-items: center; gap: 7px; padding: 0 14px; color: #1f2328; font-size: 14px; text-decoration: none; } |
| 206 | .repo-tabs a:hover { background: #f6f8fa; border-radius: 6px 6px 0 0; } |
| 207 | .repo-tabs a.active:after { position: absolute; right: 9px; bottom: -1px; left: 9px; height: 2px; border-radius: 2px; background: #fd8c73; content: ""; } |
| 208 | .repo-tabs .repo-icon { color: #636c76; } |
| 209 | .tab-count { min-width: 22px; padding: 0 6px; border-radius: 20px; background: #eaeef2; font-size: 12px; font-weight: 600; text-align: center; } |
| 210 | .repository-shell { width: min(1180px, 92vw); margin: 24px auto 80px; } |
| 211 | .code-toolbar { position: relative; height: 34px; display: flex; align-items: center; gap: 14px; margin-bottom: 12px; } |
| 212 | .branch-pill, .quiet-button { height: 32px; display: inline-flex; align-items: center; gap: 7px; padding: 0 12px; border: 1px solid #d0d7de; border-radius: 6px; background: #f6f8fa; color: #24292f; font-size: 13px; font-weight: 600; line-height: 1; text-decoration: none; box-shadow: 0 1px 0 rgba(27,31,36,.04); } |
| 213 | .ref-switcher { position: relative; } |
| 214 | .ref-switcher summary { list-style: none; cursor: pointer; } |
| 215 | .ref-switcher summary::-webkit-details-marker { display: none; } |
| 216 | .ref-switcher[open] summary { background: #eef1f4; } |
| 217 | .ref-chevron { margin-left: 3px; fill: #636c76; } |
| 218 | .ref-switcher[open] .ref-chevron { transform: rotate(180deg); } |
| 219 | .ref-menu { position: absolute; z-index: 20; top: 38px; left: 0; width: 340px; overflow: hidden; border: 1px solid #d0d7de; border-radius: 7px; background: #fff; box-shadow: 0 8px 24px rgba(140, 149, 159, .2); } |
| 220 | .ref-menu > header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 13px 14px; border-bottom: 1px solid #d8dee4; } |
| 221 | .ref-menu > header strong { font-size: 13px; } |
| 222 | .ref-menu > header span { color: #636c76; font-size: 11px; } |
| 223 | .ref-menu > input { width: calc(100% - 24px); height: 32px; margin: 12px; padding: 0 10px; border: 1px solid #d0d7de; border-radius: 6px; font-size: 12px; } |
| 224 | .ref-menu > input:focus { border-color: #0969da; outline: 2px solid rgba(9, 105, 218, .2); outline-offset: -1px; } |
| 225 | .ref-options { max-height: 330px; padding-bottom: 6px; overflow-y: auto; border-top: 1px solid #eaeef2; } |
| 226 | .ref-options > p:not(.ref-no-results) { margin: 0; padding: 9px 13px 5px; color: #636c76; font-size: 11px; font-weight: 600; text-transform: uppercase; } |
| 227 | .ref-options > a { min-height: 36px; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 7px; align-items: center; padding: 0 13px; color: #1f2328; font-size: 12px; text-decoration: none; } |
| 228 | .ref-options > a:hover { background: #f6f8fa; } |
| 229 | .ref-options > a.selected { font-weight: 600; } |
| 230 | .ref-options > a > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } |
| 231 | .ref-options small { padding: 1px 5px; border: 1px solid #d0d7de; border-radius: 20px; color: #636c76; font-size: 9px; font-weight: 500; } |
| 232 | .ref-check { position: relative; width: 14px; height: 14px; } |
| 233 | .ref-options > a.selected .ref-check:after { position: absolute; top: 0; left: 4px; width: 5px; height: 9px; border-right: 2px solid #1f883d; border-bottom: 2px solid #1f883d; content: ""; transform: rotate(45deg); } |
| 234 | .ref-no-results { margin: 0; padding: 22px 13px; color: #636c76; font-size: 12px; text-align: center; } |
| 235 | .head-reference { color: #636c76; font-size: 12px; } |
| 236 | .head-reference code { color: #24292f; } |
| 237 | .commit-shortcut { display: flex; align-items: center; gap: 6px; margin-left: auto; color: #57606a; font-size: 13px; text-decoration: none; } |
| 238 | .commit-shortcut:hover { color: #0969da; } |
| 239 | .browser-card, .readme-card, .commits-page, .file-view-card, .commit-detail-card { overflow: hidden; border: 1px solid #d0d7de; border-radius: 7px; background: #fff; box-shadow: 0 1px 0 rgba(27,31,36,.03); } |
| 240 | .latest-commit { min-height: 52px; display: grid; grid-template-columns: 28px auto minmax(120px, 1fr) auto auto; gap: 9px; align-items: center; padding: 0 16px; border-bottom: 1px solid #d8dee4; color: #1f2328; font-size: 12px; text-decoration: none; } |
| 241 | .latest-commit:hover .latest-message { color: #0969da; } |
| 242 | .commit-avatar { width: 28px; height: 28px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; background: #dde7ff; color: #3158d4; font-size: 11px; font-weight: 750; } |
| 243 | .latest-message { overflow: hidden; color: #4d5661; text-overflow: ellipsis; white-space: nowrap; } |
| 244 | .latest-commit code, .latest-commit time { color: #636c76; white-space: nowrap; } |
| 245 | .path-bar, .repo-breadcrumbs { min-height: 43px; display: flex; align-items: center; gap: 7px; padding: 0 16px; border-bottom: 1px solid #d8dee4; color: #636c76; font-size: 13px; } |
| 246 | .path-bar a, .repo-breadcrumbs a { color: #0969da; font-weight: 600; text-decoration: none; } |
| 247 | .repo-breadcrumbs { width: fit-content; min-height: auto; margin-bottom: 14px; padding: 0; border: 0; } |
| 248 | .file-row { min-height: 44px; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 7px; padding: 0 16px; border-bottom: 1px solid #eaeef2; color: #1f2328; font-size: 13px; text-decoration: none; } |
| 249 | .file-row:last-child { border-bottom: 0; } |
| 250 | .file-row:hover { background: #f6f8fa; } |
| 251 | .file-row strong { color: #0969da; font-weight: 500; } |
| 252 | .file-row > span:last-child { color: #636c76; font-size: 12px; } |
| 253 | .file-symbol { width: 16px; height: 16px; display: grid; place-items: center; color: #54aeff; } |
| 254 | .file-symbol-document { color: #636c76; } |
| 255 | .back-symbol { color: #636c76; font-size: 17px; } |
| 256 | .readme-card { margin-top: 20px; } |
| 257 | .readme-card > header { height: 49px; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; border-bottom: 1px solid #d8dee4; background: #f6f8fa; font-size: 13px; } |
| 258 | .readme-card > header div { display: flex; align-items: center; gap: 8px; } |
| 259 | .readme-card > header .repo-icon { color: #636c76; } |
| 260 | .readme-card > header a { color: #0969da; font-size: 12px; text-decoration: none; } |
| 261 | .markdown-body { max-width: 980px; padding: 34px 42px 50px; color: #1f2328; font-size: 16px; line-height: 1.6; overflow-wrap: anywhere; } |
| 262 | .markdown-body > :first-child { margin-top: 0 !important; } |
| 263 | .markdown-body > :last-child { margin-bottom: 0 !important; } |
| 264 | .markdown-body h1, .markdown-body h2 { margin: 24px 0 16px; padding-bottom: 9px; border-bottom: 1px solid #d8dee4; font-family: "Segoe UI", Arial, sans-serif; line-height: 1.25; letter-spacing: -.025em; } |
| 265 | .markdown-body h1 { font-size: 30px; } |
| 266 | .markdown-body h2 { font-size: 24px; } |
| 267 | .markdown-body h3 { margin: 24px 0 12px; font-size: 19px; } |
| 268 | .markdown-body p, .markdown-body ul, .markdown-body ol, .markdown-body blockquote, .markdown-body table, .markdown-body pre { margin: 0 0 16px; } |
| 269 | .markdown-body a { color: #0969da; text-decoration: none; } |
| 270 | .markdown-body a:hover { text-decoration: underline; } |
| 271 | .markdown-body code { padding: 2px 5px; border-radius: 4px; background: rgba(175,184,193,.2); font: 85% Consolas, monospace; } |
| 272 | .markdown-body pre { padding: 16px; border-radius: 6px; background: #f6f8fa; overflow: auto; } |
| 273 | .markdown-body pre code { padding: 0; background: transparent; font-size: 13px; } |
| 274 | .markdown-body blockquote { padding: 0 16px; border-left: 4px solid #d0d7de; color: #636c76; } |
| 275 | .markdown-body table { width: max-content; max-width: 100%; border-collapse: collapse; overflow: auto; } |
| 276 | .markdown-body th, .markdown-body td { padding: 7px 13px; border: 1px solid #d0d7de; } |
| 277 | .markdown-body tr:nth-child(2n) { background: #f6f8fa; } |
| 278 | .markdown-body hr { height: 4px; margin: 24px 0; border: 0; background: #d8dee4; } |
| 279 | .readme-empty { margin-top: 20px; padding: 30px; border: 1px dashed #afb8c1; border-radius: 7px; background: #fff; text-align: center; } |
| 280 | .readme-empty p { margin: 5px 0 0; color: #636c76; font-size: 13px; } |
| 281 | .section-title-row { min-height: 84px; display: flex; align-items: center; justify-content: space-between; padding: 0 22px; border-bottom: 1px solid #d8dee4; } |
| 282 | .section-title-row h2 { margin: 0; font: 650 22px/1.2 "Segoe UI", Arial, sans-serif; } |
| 283 | .section-kicker { margin: 0 0 3px; color: #636c76; font-size: 12px; } |
| 284 | .commit-feed { margin: 0; padding: 0; list-style: none; } |
| 285 | .commit-feed li { min-height: 72px; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto 68px; gap: 12px; align-items: center; padding: 10px 18px; border-bottom: 1px solid #eaeef2; } |
| 286 | .commit-feed li:last-child { border-bottom: 0; } |
| 287 | .commit-feed li:hover { background: #f6f8fa; } |
| 288 | .commit-main { min-width: 0; color: #1f2328; text-decoration: none; } |
| 289 | .commit-main strong, .commit-main span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } |
| 290 | .commit-main strong { font-size: 14px; } |
| 291 | .commit-main span { margin-top: 4px; color: #636c76; font-size: 12px; } |
| 292 | .commit-feed code { padding: 3px 6px; border: 1px solid #d0d7de; border-radius: 5px; color: #0969da; font-size: 11px; text-align: center; } |
| 293 | .commit-change { display: flex; gap: 7px; font: 600 11px Consolas, monospace; } |
| 294 | .commit-change b { color: #1a7f37; } |
| 295 | .commit-change i { color: #cf222e; font-style: normal; } |
| 296 | .file-view-header { min-height: 54px; display: flex; align-items: center; justify-content: space-between; padding: 0 17px; border-bottom: 1px solid #d8dee4; background: #f6f8fa; font-size: 13px; } |
| 297 | .file-view-header div { display: flex; gap: 10px; } |
| 298 | .file-view-header span { color: #636c76; } |
| 299 | .file-view-header a { color: #0969da; font-weight: 600; text-decoration: none; } |
| 300 | .file-view-actions { align-items: center; } |
| 301 | .file-view-actions .copy-path { height: 30px; min-height: 30px; padding: 0 10px; cursor: pointer; } |
| 302 | .file-view-actions a.quiet-button { color: #24292f; } |
| 303 | .file-view-tabs { display: flex; gap: 4px; padding: 8px 12px 0; border-bottom: 1px solid #d8dee4; } |
| 304 | .file-view-tabs a { margin-bottom: -1px; padding: 8px 12px 9px; border-bottom: 2px solid transparent; color: #636c76; font-size: 13px; font-weight: 600; text-decoration: none; } |
| 305 | .file-view-tabs a:hover { color: #1f2328; } |
| 306 | .file-view-tabs a.active { border-bottom-color: #fd8c73; color: #1f2328; } |
| 307 | .markdown-file-preview { max-width: none; min-height: 180px; } |
| 308 | .image-file-preview { min-height: 260px; display: grid; place-items: center; padding: 28px; background-color: #f6f8fa; background-image: linear-gradient(45deg, #eaeef2 25%, transparent 25%), linear-gradient(-45deg, #eaeef2 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #eaeef2 75%), linear-gradient(-45deg, transparent 75%, #eaeef2 75%); background-position: 0 0, 0 8px, 8px -8px, -8px 0; background-size: 16px 16px; } |
| 309 | .image-file-preview img { display: block; max-width: 100%; max-height: 720px; } |
| 310 | .file-history-page .section-title-row h2 code { font: 13px Consolas, monospace; } |
| 311 | .code-view { max-height: 760px; overflow: auto; background: #fff; color: #24292f; font: 13px/1.65 Consolas, monospace; tab-size: 2; } |
| 312 | .code-table { width: max-content; min-width: 100%; border-spacing: 0; } |
| 313 | .code-table th { width: 1%; min-width: 52px; padding: 0 12px; background: #f6f8fa; color: #8c959f; font-weight: 400; text-align: right; user-select: none; vertical-align: top; } |
| 314 | .code-table th a { color: inherit; text-decoration: none; } |
| 315 | .code-table td { min-width: 100%; padding: 0 18px; white-space: pre; } |
| 316 | .code-table td code { font: inherit; } |
| 317 | .code-table tr:first-child th, .code-table tr:first-child td { padding-top: 18px; } |
| 318 | .code-table tr:last-child th, .code-table tr:last-child td { padding-bottom: 18px; } |
| 319 | .code-table tr:target th, .code-table tr:target td { background: #fff8c5; } |
| 320 | .commit-detail-heading { min-height: 112px; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 20px 22px; border-bottom: 1px solid #d8dee4; background: #f6f8fa; } |
| 321 | .commit-detail-main { min-width: 0; } |
| 322 | .commit-detail-heading h2 { margin: 2px 0 10px; font: 650 22px/1.3 "Segoe UI", Arial, sans-serif; overflow-wrap: anywhere; } |
| 323 | .commit-detail-heading p { margin: 0; color: #636c76; font-size: 12px; } |
| 324 | .commit-message-body { max-width: 760px; margin: 0 0 14px; padding: 12px 14px; border: 1px solid #d8dee4; border-radius: 6px; background: #fff; color: #4d5661; font: 12px/1.65 Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; } |
| 325 | .commit-detail-byline { display: flex; align-items: center; gap: 8px; } |
| 326 | .commit-detail-byline strong { color: #1f2328; } |
| 327 | .commit-detail-side { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; } |
| 328 | .commit-sha { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border: 1px solid #d0d7de; border-radius: 6px; background: #fff; color: #636c76; font-size: 11px; } |
| 329 | .commit-sha code { color: #0969da; font: 12px Consolas, monospace; } |
| 330 | .commit-detail-side .quiet-button { cursor: pointer; } |
| 331 | |
| 332 | .diff-summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 14px 22px; border-bottom: 1px solid #d8dee4; } |
| 333 | .diff-summary p { margin: 0; color: #636c76; font-size: 13px; } |
| 334 | .diff-summary p strong { color: #1f2328; } |
| 335 | .diff-added { color: #1a7f37; font: 650 12px Consolas, monospace; } |
| 336 | .diff-removed { color: #cf222e; font: 650 12px Consolas, monospace; } |
| 337 | .diff-actions { display: flex; gap: 8px; } |
| 338 | .diff-actions .quiet-button { cursor: pointer; } |
| 339 | .diff-actions .quiet-button[aria-pressed="true"] { border-color: #0969da; background: #ddf4ff; color: #0550ae; } |
| 340 | .diff-index { margin: 16px 22px 0; border: 1px solid #d0d7de; border-radius: 6px; background: #fff; } |
| 341 | .diff-index > summary { min-height: 38px; display: flex; align-items: center; padding: 0 13px; color: #57606a; font-size: 12px; font-weight: 600; cursor: pointer; list-style: none; } |
| 342 | .diff-index > summary::-webkit-details-marker { display: none; } |
| 343 | .diff-index > summary:before { margin-right: 8px; color: #8c959f; content: "\25B8"; } |
| 344 | .diff-index[open] > summary { border-bottom: 1px solid #eaeef2; } |
| 345 | .diff-index[open] > summary:before { content: "\25BE"; } |
| 346 | .diff-index ol { margin: 0; padding: 6px 0 10px; list-style: none; } |
| 347 | .diff-index li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; padding: 3px 13px; } |
| 348 | .diff-index a { overflow: hidden; color: #0969da; font: 12px Consolas, monospace; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; } |
| 349 | .diff-index a:hover { text-decoration: underline; } |
| 350 | |
| 351 | .diff-file { margin: 16px 22px; overflow: hidden; border: 1px solid #d0d7de; border-radius: 6px; background: #fff; } |
| 352 | .diff-file > summary { display: grid; grid-template-columns: 12px auto minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 9px 12px; background: #f6f8fa; font-size: 12px; cursor: pointer; list-style: none; } |
| 353 | .diff-file > summary::-webkit-details-marker { display: none; } |
| 354 | .diff-file > summary:hover { background: #eef1f5; } |
| 355 | .diff-file[open] > summary { border-bottom: 1px solid #d0d7de; } |
| 356 | .diff-chevron { fill: #636c76; } |
| 357 | .diff-file[open] .diff-chevron { transform: rotate(90deg); } |
| 358 | .diff-status { padding: 1px 8px; border: 1px solid #d0d7de; border-radius: 20px; color: #636c76; font-size: 10px; font-weight: 650; text-transform: capitalize; } |
| 359 | .diff-status-added { border-color: #aceebb; background: #dafbe1; color: #116329; } |
| 360 | .diff-status-removed { border-color: #ffcecb; background: #ffebe9; color: #a40e26; } |
| 361 | .diff-status-renamed, .diff-status-copied { border-color: #b6d7f7; background: #ddf4ff; color: #0550ae; } |
| 362 | .diff-status-modified, .diff-status-changed { border-color: #eedfa6; background: #fff8c5; color: #7d4e00; } |
| 363 | .diff-file-name { min-width: 0; display: flex; align-items: center; gap: 6px; overflow: hidden; color: #1f2328; font: 600 12px Consolas, monospace; text-overflow: ellipsis; white-space: nowrap; } |
| 364 | .diff-file-path { overflow: hidden; text-overflow: ellipsis; } |
| 365 | .diff-rename-from { overflow: hidden; color: #8c959f; text-overflow: ellipsis; } |
| 366 | .diff-rename-arrow { color: #8c959f; } |
| 367 | .diff-file-stat { display: flex; align-items: center; gap: 8px; } |
| 368 | .diff-blocks { display: flex; gap: 2px; } |
| 369 | .diff-blocks i { width: 8px; height: 8px; border-radius: 2px; background: #d8dee4; } |
| 370 | .diff-blocks i.added { background: #1f883d; } |
| 371 | .diff-blocks i.removed { background: #cf222e; } |
| 372 | .diff-copy { height: 26px; padding: 0 9px; border: 1px solid #d0d7de; border-radius: 5px; background: #fff; color: #24292f; font-size: 11px; font-weight: 600; cursor: pointer; } |
| 373 | .diff-copy:hover { background: #f3f4f6; } |
| 374 | .diff-body { overflow-x: auto; background: #fff; } |
| 375 | .diff-table { width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 0; color: #1f2328; font: 12px/1.7 Consolas, monospace; tab-size: 2; } |
| 376 | .diff-col-num { width: 54px; } |
| 377 | .diff-gutter { position: sticky; z-index: 1; width: 54px; min-width: 54px; padding: 0 8px; border-right: 1px solid #eaeef2; background: #fff; color: #8c959f; font-size: 11px; text-align: right; vertical-align: top; white-space: nowrap; user-select: none; } |
| 378 | .diff-gutter:first-child { left: 0; } |
| 379 | .diff-gutter:nth-child(2) { left: 54px; } |
| 380 | .diff-code { width: 100%; padding: 0 16px 0 12px; vertical-align: top; white-space: pre; } |
| 381 | .diff-row-addition .diff-code { background: #e6ffec; } |
| 382 | .diff-row-addition .diff-gutter { background: #ccffd8; color: #24292f; } |
| 383 | .diff-row-deletion .diff-code { background: #ffebe9; } |
| 384 | .diff-row-deletion .diff-gutter { background: #ffd7d5; color: #24292f; } |
| 385 | .diff-row-hunk .diff-code, .diff-row-hunk .diff-gutter { background: #f1f6fc; color: #57606a; } |
| 386 | .diff-row-hunk .diff-code { border-top: 1px solid #eaeef2; border-bottom: 1px solid #eaeef2; } |
| 387 | .diff-row-hunk .diff-gutter { border-top: 1px solid #eaeef2; border-bottom: 1px solid #eaeef2; } |
| 388 | .diff-row:first-child .diff-code, .diff-row:first-child .diff-gutter { border-top: 0; } |
| 389 | .hunk-heading { margin-left: 16px; color: #8c959f; } |
| 390 | .diff-row-note .diff-code { background: #f6f8fa; color: #8c959f; font-style: italic; } |
| 391 | body.diff-wrapped .diff-table { width: 100%; } |
| 392 | body.diff-wrapped .diff-code { white-space: pre-wrap; overflow-wrap: anywhere; } |
| 393 | .empty-state { margin: 0; padding: 32px; color: var(--ink-soft); text-align: center; } |
| 394 | |
| 395 | .work-list-page, .discussion-page { color: #1f2328; } |
| 396 | .work-list-page { overflow: hidden; border: 1px solid #d0d7de; border-radius: 7px; background: #fff; } |
| 397 | .work-list-header { min-height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 16px 20px; border-bottom: 1px solid #d8dee4; background: #f6f8fa; } |
| 398 | .work-list-header h2 { margin: 0; font-size: 20px; } |
| 399 | .work-list-header p { margin: 3px 0 0; color: #636c76; font-size: 12px; } |
| 400 | .work-list-header nav { display: flex; gap: 5px; } |
| 401 | .work-list-header nav a { display: flex; align-items: center; gap: 6px; padding: 6px 9px; border-radius: 6px; color: #636c76; font-size: 12px; text-decoration: none; } |
| 402 | .work-list-header nav a:hover, .work-list-header nav a.active { background: #eaeef2; color: #1f2328; } |
| 403 | .work-list-header nav a.active { font-weight: 600; } |
| 404 | .work-list-header nav span { min-width: 20px; padding: 0 5px; border-radius: 20px; background: #d8dee4; font-size: 10px; text-align: center; } |
| 405 | .work-list article { min-height: 92px; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 15px 18px; border-bottom: 1px solid #eaeef2; } |
| 406 | .work-list article:last-child { border-bottom: 0; } |
| 407 | .work-list article:hover { background: #f6f8fa; } |
| 408 | .work-state-icon { width: 16px; height: 16px; margin-top: 3px; border: 2px solid #1f883d; border-radius: 50%; } |
| 409 | .work-state-icon.closed { border-color: #8250df; background: #8250df; box-shadow: inset 0 0 0 3px white; } |
| 410 | .work-state-icon.merged { border-color: #8250df; transform: rotate(45deg); } |
| 411 | .work-state-icon.draft { border-color: #8c959f; border-style: dashed; } |
| 412 | .work-title { color: #1f2328; font-size: 15px; font-weight: 650; text-decoration: none; } |
| 413 | .work-title:hover { color: #0969da; } |
| 414 | .work-list article p { margin: 7px 0 0; color: #636c76; font-size: 11px; } |
| 415 | .work-labels { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; } |
| 416 | .work-label { display: inline-flex; min-height: 20px; align-items: center; padding: 1px 7px; border: 1px solid #b6c7d9; border-radius: 20px; background: #f1f6fb; color: #334968; font-size: 10px; font-weight: 600; } |
| 417 | .work-comments { align-self: center; color: #636c76; font-size: 11px; text-align: right; } |
| 418 | .work-comments strong { color: #1f2328; } |
| 419 | .work-detail-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 30px; padding-bottom: 20px; border-bottom: 1px solid #d8dee4; } |
| 420 | .work-detail-heading h2 { margin: 0 0 10px; font: 500 28px/1.3 "Segoe UI", Arial, sans-serif; } |
| 421 | .work-detail-heading h2 span { color: #636c76; font-weight: 300; } |
| 422 | .work-detail-heading p { margin: 0; color: #636c76; font-size: 12px; } |
| 423 | .work-detail-heading p strong { color: #1f2328; } |
| 424 | .state-badge { display: inline-flex; min-height: 26px; align-items: center; margin-right: 7px; padding: 2px 10px; border-radius: 20px; background: #1f883d; color: white; font-size: 11px; font-weight: 650; text-transform: capitalize; } |
| 425 | .state-badge.closed, .state-badge.merged { background: #8250df; } |
| 426 | .state-badge.draft { background: #636c76; } |
| 427 | .discussion-layout { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 24px; margin-top: 24px; align-items: start; } |
| 428 | .discussion-timeline { min-width: 0; } |
| 429 | .discussion-card { margin-bottom: 16px; overflow: hidden; border: 1px solid #d0d7de; border-radius: 7px; background: #fff; } |
| 430 | .discussion-card > header { min-height: 42px; display: flex; align-items: center; gap: 6px; padding: 0 14px; border-bottom: 1px solid #d8dee4; background: #f6f8fa; font-size: 12px; } |
| 431 | .discussion-card > header span { color: #636c76; } |
| 432 | .discussion-body { padding: 18px; color: #1f2328; font-size: 14px; overflow-wrap: anywhere; } |
| 433 | .discussion-body > :first-child { margin-top: 0; } |
| 434 | .discussion-body > :last-child { margin-bottom: 0; } |
| 435 | .discussion-body a { color: #0969da; } |
| 436 | .discussion-body code { padding: 2px 4px; border-radius: 4px; background: #f0f2f4; font: 12px Consolas, monospace; } |
| 437 | .discussion-body pre { padding: 13px; overflow: auto; border-radius: 6px; background: #f6f8fa; } |
| 438 | .discussion-body pre code { padding: 0; background: transparent; } |
| 439 | .work-sidebar { border-top: 1px solid #d8dee4; color: #636c76; font-size: 12px; } |
| 440 | .work-sidebar section { padding: 14px 0; border-bottom: 1px solid #d8dee4; } |
| 441 | .work-sidebar section > strong, .work-sidebar section > span { display: block; } |
| 442 | .work-sidebar section > strong { margin-bottom: 8px; color: #1f2328; } |
| 443 | .pull-summary { min-height: 48px; display: flex; align-items: center; gap: 20px; margin-top: 14px; padding: 0 14px; border: 1px solid #d0d7de; border-radius: 7px; background: #f6f8fa; color: #636c76; font-size: 11px; } |
| 444 | .pull-summary code { color: #0969da; font: 11px Consolas, monospace; } |
| 445 | .pull-summary .commit-change { margin-left: auto; } |
| 446 | .pull-files { margin-top: 24px; } |
| 447 | .pull-files > h3 { display: flex; align-items: center; gap: 7px; margin: 0 0 12px; font-size: 16px; } |
| 448 | .pull-files > h3 span { min-width: 22px; padding: 1px 6px; border-radius: 20px; background: #eaeef2; font-size: 11px; text-align: center; } |
| 449 | .pull-files .diff-summary { padding: 0 0 12px; border-bottom: 0; } |
| 450 | .pull-files .diff-index { margin: 0 0 16px; } |
| 451 | .pull-files .diff-file { margin: 0 0 16px; } |
| 452 | .release-list-page, .release-detail { color: #1f2328; } |
| 453 | .release-list-page { overflow: hidden; border: 1px solid #d0d7de; border-radius: 7px; background: #fff; } |
| 454 | .release-list-page > header { min-height: 84px; display: flex; align-items: center; justify-content: space-between; padding: 15px 20px; border-bottom: 1px solid #d8dee4; background: #f6f8fa; } |
| 455 | .release-list-page > header h2 { margin: 0; font-size: 20px; } |
| 456 | .release-list-page > header p { margin: 3px 0 0; color: #636c76; font-size: 12px; } |
| 457 | .release-list-page > header > span { color: #636c76; font-size: 12px; } |
| 458 | .release-list-page > header > span strong { color: #1f2328; } |
| 459 | .release-list article { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 26px; padding: 24px 20px; border-bottom: 1px solid #d8dee4; } |
| 460 | .release-list article:last-child { border-bottom: 0; } |
| 461 | .release-list article > aside { display: flex; align-items: flex-start; flex-direction: column; gap: 8px; } |
| 462 | .release-list time { color: #636c76; font-size: 11px; } |
| 463 | .release-tag { display: inline-flex; min-height: 24px; align-items: center; padding: 2px 8px; border: 1px solid #b6c7d9; border-radius: 5px; background: #f1f6fb; color: #334968; font: 600 11px Consolas, monospace; } |
| 464 | .release-list-title { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; } |
| 465 | .release-list-title > a { color: #0969da; font-size: 18px; font-weight: 650; text-decoration: none; } |
| 466 | .latest-release, .release-status { display: inline-flex; min-height: 20px; align-items: center; padding: 1px 7px; border: 1px solid #1f883d; border-radius: 20px; color: #1f883d; font-size: 9px; font-weight: 650; } |
| 467 | .release-status { border-color: #bf8700; color: #9a6700; } |
| 468 | .release-list article > div > p { margin: 10px 0; color: #4d5661; font-size: 13px; white-space: pre-line; } |
| 469 | .release-list article > div > span { color: #636c76; font-size: 11px; } |
| 470 | .release-detail { overflow: hidden; border: 1px solid #d0d7de; border-radius: 7px; background: #fff; } |
| 471 | .release-detail > header { min-height: 118px; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 22px; border-bottom: 1px solid #d8dee4; background: #f6f8fa; } |
| 472 | .release-kicker { display: flex; align-items: center; gap: 7px; } |
| 473 | .release-detail h2 { margin: 10px 0 6px; font-size: 24px; } |
| 474 | .release-detail > header p { margin: 0; color: #636c76; font-size: 12px; } |
| 475 | .release-body { padding: 28px 34px; border-bottom: 1px solid #d8dee4; font-size: 15px; } |
| 476 | .release-assets { padding: 22px 34px 28px; } |
| 477 | .release-assets h3 { display: flex; align-items: center; gap: 7px; margin: 0 0 12px; font-size: 15px; } |
| 478 | .release-assets h3 span { min-width: 22px; padding: 1px 6px; border-radius: 20px; background: #eaeef2; font-size: 11px; text-align: center; } |
| 479 | .release-assets ul { margin: 0; padding: 0; border: 1px solid #d8dee4; border-radius: 6px; list-style: none; } |
| 480 | .release-assets li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; padding: 11px 13px; border-bottom: 1px solid #eaeef2; } |
| 481 | .release-assets li:last-child { border-bottom: 0; } |
| 482 | .release-assets li strong { font-size: 12px; } |
| 483 | .release-assets li code { color: #636c76; font: 11px Consolas, monospace; } |
| 484 | .release-assets li span { grid-row: 1 / span 2; grid-column: 2; align-self: center; color: #636c76; font-size: 10px; } |
| 485 | .release-assets > p { margin: 10px 0 0; color: #636c76; font-size: 11px; } |
| 486 | .repository-overview-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 24px; align-items: start; } |
| 487 | .repository-code-column { min-width: 0; } |
| 488 | .repository-about { color: #1f2328; font-size: 12px; } |
| 489 | .repository-about > h2 { margin: 0 0 8px; font-size: 16px; } |
| 490 | .repository-about > p { margin: 0 0 10px; color: #4d5661; font-size: 13px; } |
| 491 | .about-homepage { display: block; margin-bottom: 12px; color: #0969da; overflow-wrap: anywhere; } |
| 492 | .about-topics { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 16px; } |
| 493 | .about-topics span { padding: 2px 8px; border-radius: 20px; background: #ddf4ff; color: #0969da; font-size: 10px; font-weight: 600; } |
| 494 | .archived-badge { display: inline-flex; margin-bottom: 14px; padding: 3px 8px; border: 1px solid #bf8700; border-radius: 5px; color: #9a6700; font-size: 10px; font-weight: 600; } |
| 495 | .about-stats { margin: 0; padding: 14px 0; border-top: 1px solid #d8dee4; border-bottom: 1px solid #d8dee4; list-style: none; } |
| 496 | .about-stats li { padding: 3px 0; color: #636c76; } |
| 497 | .about-stats strong { color: #1f2328; } |
| 498 | .about-section { padding: 16px 0; border-bottom: 1px solid #d8dee4; } |
| 499 | .about-section h3 { margin: 0 0 8px; font-size: 13px; } |
| 500 | .about-section p { margin: 0; color: #636c76; } |
| 501 | .language-breakdown { display: grid; gap: 6px; } |
| 502 | .language-breakdown > div { display: flex; justify-content: space-between; gap: 10px; color: #636c76; font-size: 11px; } |
| 503 | .language-breakdown span { color: #1f2328; } |
| 504 | |
| 505 | .search-shell { width: min(1180px, 92vw); display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 34px; margin: 36px auto 80px; align-items: start; } |
| 506 | .search-filters { position: sticky; top: 24px; display: flex; flex-direction: column; padding: 8px 0; } |
| 507 | .search-filters h2 { margin: 0 12px 10px; color: #636c76; font-size: 12px; font-weight: 600; } |
| 508 | .search-filters > a { min-height: 38px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; border-radius: 6px; color: #1f2328; font-size: 13px; text-decoration: none; } |
| 509 | .search-filters > a:hover { background: #eaeef2; } |
| 510 | .search-filters > a.active { background: #0969da; color: white; font-weight: 600; } |
| 511 | .search-filters > a span { min-width: 24px; padding: 1px 6px; border-radius: 20px; background: rgba(175, 184, 193, .25); font-size: 11px; text-align: center; } |
| 512 | .search-filters > a.active span { background: rgba(255, 255, 255, .22); } |
| 513 | .search-scope { margin: 20px 12px 0; padding-top: 17px; border-top: 1px solid #d8dee4; font-size: 12px; } |
| 514 | .search-scope strong, .search-scope span { display: block; } |
| 515 | .search-scope span { margin: 3px 0 9px; color: #636c76; } |
| 516 | .search-scope a { color: #0969da; text-decoration: none; } |
| 517 | .search-heading { margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid #d8dee4; } |
| 518 | .search-heading p { margin: 0 0 3px; color: #636c76; font-size: 12px; } |
| 519 | .search-heading h1 { margin: 0; font: 500 20px/1.4 "Segoe UI", Arial, sans-serif; } |
| 520 | .search-heading h1 strong { font-weight: 650; } |
| 521 | .search-empty { padding: 70px 30px; border: 1px dashed #afb8c1; border-radius: 7px; background: #fff; text-align: center; } |
| 522 | .search-empty strong { font-size: 17px; } |
| 523 | .search-empty p { margin: 5px 0 0; color: #636c76; font-size: 13px; } |
| 524 | .result-group { margin-bottom: 24px; overflow: hidden; border: 1px solid #d0d7de; border-radius: 7px; background: #fff; } |
| 525 | .result-group > header { height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 16px; border-bottom: 1px solid #d8dee4; background: #f6f8fa; } |
| 526 | .result-group > header h2 { margin: 0; font-size: 14px; } |
| 527 | .result-group > header span { padding: 1px 7px; border-radius: 20px; background: #eaeef2; font-size: 11px; } |
| 528 | .code-result, .commit-result, .repository-result, .work-search-result { padding: 16px 18px; border-bottom: 1px solid #eaeef2; } |
| 529 | .code-result:last-child, .commit-result:last-child, .repository-result:last-child, .work-search-result:last-child { border-bottom: 0; } |
| 530 | .result-path { display: flex; gap: 5px; color: #0969da; font-size: 13px; text-decoration: none; } |
| 531 | .result-path span:last-child { overflow-wrap: anywhere; } |
| 532 | .code-result-line { display: grid; grid-template-columns: 46px minmax(0, 1fr); margin-top: 10px; overflow: hidden; border: 1px solid #eaeef2; border-radius: 5px; color: #1f2328; font: 12px/1.6 Consolas, monospace; text-decoration: none; } |
| 533 | .code-result-line > span { padding: 7px 10px; background: #f6f8fa; color: #8c959f; text-align: right; } |
| 534 | .code-result-line code { overflow: hidden; padding: 7px 12px; text-overflow: ellipsis; white-space: pre; } |
| 535 | .code-result > p { margin: 8px 0 0; color: #636c76; font-size: 12px; } |
| 536 | .commit-result { display: flex; align-items: center; justify-content: space-between; gap: 20px; } |
| 537 | .commit-result a { min-width: 0; color: #1f2328; text-decoration: none; } |
| 538 | .commit-result strong, .commit-result span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } |
| 539 | .commit-result strong { font-size: 13px; } |
| 540 | .commit-result span { margin-top: 4px; color: #636c76; font-size: 12px; } |
| 541 | .commit-result > code { flex: 0 0 auto; color: #0969da; font-size: 11px; } |
| 542 | .repository-result > a { color: #0969da; font-size: 15px; font-weight: 650; text-decoration: none; } |
| 543 | .repository-result p { margin: 5px 0 9px; color: #4d5661; font-size: 13px; } |
| 544 | .repository-result > span { color: #636c76; font-size: 11px; } |
| 545 | .work-search-result { position: relative; padding-right: 95px; } |
| 546 | .work-search-result > a { color: #0969da; text-decoration: none; } |
| 547 | .work-search-result > a strong, .work-search-result > a span { display: block; } |
| 548 | .work-search-result > a strong { font-size: 14px; } |
| 549 | .work-search-result > a span { margin-top: 2px; color: #636c76; font-size: 11px; } |
| 550 | .work-search-result > p { margin: 9px 0 0; color: #4d5661; font-size: 12px; } |
| 551 | .work-search-result > .state-badge { position: absolute; top: 16px; right: 18px; min-height: 22px; padding: 1px 8px; font-size: 10px; } |
| 552 | .work-search-result > .release-tag { position: absolute; top: 16px; right: 18px; } |
| 553 | |
| 554 | .state-page { min-height: 100vh; display: grid; place-items: center; background: var(--viewer); color: white; } |
| 555 | .state-shell { max-width: 620px; padding: 50px; text-align: center; } |
| 556 | .state-code { color: var(--cyan); font-size: 12px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; } |
| 557 | .state-shell h1 { margin: 10px 0 15px; font: 700 46px/1.1 Georgia, serif; } |
| 558 | .state-shell > p:not(.state-code) { color: #b8c3d7; } |
| 559 | .state-shell .text-link { color: var(--cyan); } |
| 560 | |
| 561 | @media (max-width: 900px) { |
| 562 | .owner-shell { width: min(720px, 92vw); margin: 40px auto; } |
| 563 | .share-form { grid-template-columns: 1fr; } |
| 564 | .publish-panel { position: static; } |
| 565 | .snapshot-list-item { align-items: flex-start; flex-direction: column; } |
| 566 | .viewer-header { height: auto; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 20px; padding: 12px 4vw; } |
| 567 | .snapshot-search { width: 100%; grid-row: 2; grid-column: 1 / -1; margin: 0; } |
| 568 | .top-nav { justify-self: end; } |
| 569 | .profile-tabs > div { padding-left: 0; overflow-x: auto; } |
| 570 | .profile-shell { grid-template-columns: 180px minmax(0, 1fr); gap: 24px; } |
| 571 | .profile-avatar { width: 180px; height: 180px; } |
| 572 | .repo-tabs-inner { overflow-x: auto; } |
| 573 | .repo-tabs a { flex: 0 0 auto; } |
| 574 | .repository-overview-layout, .discussion-layout, .search-shell { grid-template-columns: 1fr; } |
| 575 | .repository-about { padding-top: 20px; border-top: 1px solid #d8dee4; } |
| 576 | .search-filters { position: static; flex-direction: row; overflow-x: auto; } |
| 577 | .search-filters h2 { display: none; } |
| 578 | .search-filters > a { flex: 0 0 auto; } |
| 579 | .search-scope { margin: 0 0 0 12px; padding: 0 0 0 17px; border-top: 0; border-left: 1px solid #d8dee4; } |
| 580 | } |
| 581 | |
| 582 | @media (max-width: 640px) { |
| 583 | .owner-header { height: auto; gap: 16px; padding: 14px 4vw; } |
| 584 | .owner-header-actions { gap: 10px; } |
| 585 | .owner-header-actions > .text-link, .owner-identity span { display: none; } |
| 586 | .welcome-panel, .setup-panel, .created-panel { width: 100%; padding: 30px 24px; } |
| 587 | .welcome-panel h1, .created-panel h1 { font-size: 36px; } |
| 588 | .setup-panel h1, .workspace-heading h1 { font-size: 31px; } |
| 589 | .owner-shell { margin-top: 30px; } |
| 590 | .workspace-heading { align-items: flex-start; flex-direction: column; gap: 8px; } |
| 591 | .repo-selection { grid-template-columns: 1fr; } |
| 592 | .snapshot-list-actions { flex-wrap: wrap; } |
| 593 | .center-shell { padding: 20px; } |
| 594 | .copy-row, .created-actions { align-items: stretch; flex-direction: column; } |
| 595 | .copy-row input { min-height: 44px; } |
| 596 | .viewer-header > .wordmark { justify-self: start; } |
| 597 | .top-nav { grid-row: 1; grid-column: 2; justify-self: end; } |
| 598 | .top-nav span { display: none; } |
| 599 | .profile-shell { grid-template-columns: 1fr; margin-top: 24px; } |
| 600 | .profile-card { position: static; } |
| 601 | .profile-avatar { width: 104px; height: 104px; } |
| 602 | .repo-grid { grid-template-columns: 1fr; } |
| 603 | .repository-filter { grid-template-columns: 1fr 1fr; } |
| 604 | .repository-filter input { grid-column: 1 / -1; } |
| 605 | .repository-list article { flex-direction: column; gap: 12px; } |
| 606 | .repo-mast-inner, .repo-tabs-inner, .repository-shell { width: 92vw; } |
| 607 | .repo-identity { align-items: flex-start; flex-wrap: wrap; } |
| 608 | .repo-identity h1 { min-width: calc(100% - 32px); font-size: 19px; } |
| 609 | .repo-facts { flex-wrap: wrap; gap: 7px 16px; } |
| 610 | .repo-tabs-inner { height: 47px; } |
| 611 | .repo-tabs a { padding: 0 10px; white-space: nowrap; } |
| 612 | .code-toolbar { height: auto; flex-wrap: wrap; } |
| 613 | .commit-shortcut { margin-left: 0; } |
| 614 | .latest-commit { grid-template-columns: 28px minmax(0, 1fr) auto; } |
| 615 | .latest-commit > code, .latest-commit > time { display: none; } |
| 616 | .file-row { grid-template-columns: 24px minmax(0, 1fr); } |
| 617 | .file-row > span:last-child { display: none; } |
| 618 | .markdown-body { padding: 26px 18px 34px; } |
| 619 | .markdown-body h1 { font-size: 25px; } |
| 620 | .file-view-header, .section-title-row, .commit-detail-heading, .work-list-header, .work-detail-heading, .release-detail > header { align-items: flex-start; flex-direction: column; gap: 12px; padding: 15px; } |
| 621 | .file-view-actions { flex-wrap: wrap; } |
| 622 | .commit-feed li { grid-template-columns: 28px minmax(0, 1fr) auto; } |
| 623 | .commit-feed .commit-change { display: none; } |
| 624 | .commit-detail-side { width: 100%; justify-content: space-between; } |
| 625 | .diff-summary { padding: 12px 15px; } |
| 626 | .diff-index { margin: 12px 12px 0; } |
| 627 | .diff-file { margin: 12px; } |
| 628 | .diff-file > summary { grid-template-columns: 12px auto minmax(0, 1fr); row-gap: 8px; } |
| 629 | .diff-file-stat { grid-column: 2 / -1; } |
| 630 | .diff-copy { display: none; } |
| 631 | .diff-col-num { width: 42px; } |
| 632 | .diff-gutter { width: 42px; min-width: 42px; padding: 0 6px; } |
| 633 | .diff-gutter:nth-child(2) { left: 42px; } |
| 634 | .work-list-header nav { width: 100%; overflow-x: auto; } |
| 635 | .work-list-header nav a { flex: 0 0 auto; } |
| 636 | .work-list article { grid-template-columns: 22px minmax(0, 1fr); } |
| 637 | .work-comments { display: none; } |
| 638 | .pull-summary { align-items: flex-start; flex-wrap: wrap; padding: 12px; } |
| 639 | .pull-summary .commit-change { margin-left: 0; } |
| 640 | .release-list article { grid-template-columns: 1fr; gap: 14px; } |
| 641 | .release-body, .release-assets { padding: 22px 18px; } |
| 642 | .search-shell { width: 92vw; margin-top: 22px; } |
| 643 | .search-scope { display: none; } |
| 644 | .search-filters > a { min-height: 34px; } |
| 645 | .state-shell { padding: 30px 20px; } |
| 646 | .state-shell h1 { font-size: 35px; } |
| 647 | } |
| 648 | |
| 649 | @media (prefers-reduced-motion: reduce) { |
| 650 | *, *:before, *:after { scroll-behavior: auto !important; transition: none !important; } |
| 651 | } |
| 652 | |