@import url('/static/tw.css'); :root { color-scheme: light dark; font-family: InterVariable, system-ui, sans-serif, ui-sans-serif; --untangled-code-fg: #4c4f69; --untangled-code-muted: #8c8fa1; --untangled-code-keyword: #8839ef; --untangled-code-constant: #fe640b; --untangled-code-declaration: #d20f39; --untangled-code-namespace: #179299; --untangled-code-name: #1e66f5; --untangled-code-builtin: #04a5e5; --untangled-code-class: #df8e1d; --untangled-code-variable: #dc8a78; --untangled-code-string: #40a02b; --untangled-code-comment: #9ca0b0; --untangled-code-operator: #04a5e5; } @media (prefers-color-scheme: dark) { :root { --untangled-code-fg: #cad3f5; --untangled-code-muted: #8087a2; --untangled-code-keyword: #c6a0f6; --untangled-code-constant: #f5a97f; --untangled-code-declaration: #ed8796; --untangled-code-namespace: #8bd5ca; --untangled-code-name: #8aadf4; --untangled-code-builtin: #91d7e3; --untangled-code-class: #eed49f; --untangled-code-variable: #f4dbd6; --untangled-code-string: #a6da95; --untangled-code-comment: #6e738d; --untangled-code-operator: #91d7e3; } } .untangled-new-pr-step { position: relative; display: flex; min-width: 0; flex-direction: column; gap: 0.75rem; } .untangled-new-pr-heading { position: relative; display: flex; align-items: center; gap: 1rem; } .untangled-new-pr-step-line { position: absolute; left: 0.75rem; width: 1px; transform: translateX(-50%); background: rgb(229 231 235); } .untangled-new-pr-step-line-after { top: 0.75rem; bottom: -1.5rem; } .untangled-new-pr-step-line-before { top: -1.5rem; } .untangled-new-pr-step-line-through { bottom: -1.5rem; } .untangled-new-pr-step-line-fade { height: 3rem; -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 1.5rem), transparent); mask-image: linear-gradient(to bottom, black calc(100% - 1.5rem), transparent); } .untangled-new-pr-step-line-before.untangled-new-pr-step-line-fade { bottom: auto; } .untangled-new-pr-diff { min-width: 0; } @media (prefers-color-scheme: dark) { .untangled-new-pr-step-line { background: rgb(55 65 81); } } .untangled-pr-detail { display: flex; min-width: 0; flex-direction: column; gap: 2rem; } .untangled-pr-header-grid { display: grid; grid-template-columns: minmax(0, 1fr) 15rem; gap: 1rem; align-items: start; } .untangled-pr-summary-card { min-width: 0; border-radius: 0.25rem; background: rgb(255 255 255); padding: 1.5rem; color: rgb(17 24 39); box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); } .untangled-pr-meta { display: flex; min-width: 0; flex-direction: column; gap: 1.75rem; padding: 0.25rem 0; color: rgb(107 114 128); } .untangled-pr-meta-section h2 { margin: 0 0 0.25rem; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; color: rgb(75 85 99); } .untangled-pr-meta-section h2 span { display: inline-flex; min-width: 1.25rem; justify-content: center; border-radius: 0.25rem; background: rgb(229 231 235); padding: 0 0.25rem; font-size: 0.75rem; } .untangled-pr-meta-section p { margin: 0; font-size: 0.875rem; } .untangled-pr-meta-section code { font-size: 0.8125rem; color: rgb(17 24 39); } .untangled-pr-meta-action, .untangled-pr-icon-button { display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgb(209 213 219); border-radius: 0.25rem; background: transparent; color: rgb(107 114 128); } .untangled-pr-meta-action { border: 0; padding: 0.125rem; } .untangled-pr-icon-button { width: 2rem; height: 2rem; } .untangled-pr-diff-breakout { position: relative; left: 50%; width: 100vw; margin-left: -50vw; } .untangled-pr-diff-toolbar { position: sticky; top: 0; z-index: 30; display: grid; grid-template-columns: 15.5rem minmax(0, 1fr) 29.5rem; gap: 1rem; align-items: center; padding: 0.5rem; background: rgb(241 245 249); } .untangled-pr-diff-toolbar-sidebar-collapsed { grid-template-columns: minmax(0, 1fr) 29.5rem; } .untangled-pr-diff-toolbar-history-collapsed { grid-template-columns: 15.5rem minmax(0, 1fr) 2.125rem; } .untangled-pr-diff-toolbar-sidebar-collapsed.untangled-pr-diff-toolbar-history-collapsed { grid-template-columns: minmax(0, 1fr) 2.125rem; } .untangled-pr-diff-toolbar-main { grid-column: 1 / 3; grid-row: 1; display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: 0.625rem; font-size: 0.875rem; color: rgb(107 114 128); } .untangled-pr-diff-toolbar-sidebar-collapsed .untangled-pr-diff-toolbar-main { grid-column: 1; } .untangled-pr-diff-toolbar-actions { grid-column: 2; grid-row: 1; justify-self: end; } .untangled-pr-diff-toolbar-sidebar-collapsed .untangled-pr-diff-toolbar-actions { grid-column: 1; } .untangled-pr-diff-toolbar-history { grid-column: 3; grid-row: 1; justify-self: end; } .untangled-pr-diff-toolbar-sidebar-collapsed .untangled-pr-diff-toolbar-history { grid-column: 2; } .untangled-pr-sidebar-toggle { display: inline-flex; min-height: 2.125rem; align-items: center; justify-content: center; gap: 0.5rem; border: 1px solid rgb(209 213 219); border-radius: 0.25rem; background: rgb(255 255 255); padding: 0 0.75rem; font-size: 0.875rem; color: rgb(31 41 55); } .untangled-pr-sidebar-toggle { width: 2.125rem; padding: 0; } .untangled-diff-stat-pill { display: inline-flex; align-items: center; overflow: hidden; border-radius: 0.25rem; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-size: 0.875rem; line-height: 1; } .untangled-diff-stat-pill span { padding: 0.375rem 0.5rem; } .untangled-diff-stat-add { background: rgb(220 252 231); color: rgb(21 128 61); } .untangled-diff-stat-del { background: rgb(254 226 226); color: rgb(185 28 28); } .untangled-pr-diff-grid { display: grid; grid-template-columns: 15.5rem minmax(0, 1fr) 29.5rem; gap: 1rem; align-items: start; } .untangled-pr-diff-grid-sidebar-collapsed { grid-template-columns: minmax(0, 1fr) 29.5rem; } .untangled-pr-diff-grid-history-collapsed { grid-template-columns: 15.5rem minmax(0, 1fr); } .untangled-pr-diff-grid-sidebar-collapsed.untangled-pr-diff-grid-history-collapsed { grid-template-columns: minmax(0, 1fr); } .untangled-pr-file-tree { position: sticky; top: 3rem; max-height: calc(100vh - 3rem); overflow: auto; min-height: calc(100vh - 3rem); border: 1px solid rgb(229 231 235); border-top: 0; border-radius: 0 0 0.25rem 0.25rem; background: rgb(255 255 255); padding: 0.75rem 0.75rem 1.5rem; box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); } .untangled-pr-file-tree-list { display: flex; min-width: 0; flex-direction: column; gap: 0.125rem; } .untangled-pr-file-tree-node { min-width: 0; } .untangled-pr-file-tree-children { margin-left: 0.25rem; border-left: 1px solid rgb(209 213 219); padding-left: 0.5rem; } .untangled-pr-file-tree-entry { display: flex; min-width: 0; align-items: center; gap: 0.375rem; min-height: 1.5rem; border-radius: 0.25rem; padding-top: 0.125rem; padding-right: 0.25rem; padding-bottom: 0.125rem; padding-left: 0; color: rgb(55 65 81); font-size: 0.875rem; text-decoration: none; } .untangled-pr-file-tree-link:hover, .untangled-pr-file-tree-entry:hover { background: rgb(243 244 246); text-decoration: none; } .untangled-pr-diff-files { display: flex; min-width: 0; flex-direction: column; gap: 1rem; } .untangled-pr-diff-file { scroll-margin-top: 4rem; overflow: visible; border: 1px solid rgb(209 213 219); border-radius: 0.25rem; background: rgb(255 255 255); } .untangled-pr-diff-file-header { position: sticky; top: 3rem; z-index: 20; display: flex; min-height: 2.75rem; cursor: pointer; list-style: none; align-items: center; justify-content: space-between; gap: 1rem; padding: 0 1rem; background: rgb(31 41 55); } .untangled-pr-diff-file-header::-webkit-details-marker { display: none; } .untangled-pr-diff-file[open] .untangled-pr-diff-chevron { transform: rotate(90deg); } .untangled-pr-diff-ellipsis { background: rgb(55 65 81); padding: 0.125rem 0; text-align: center; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; color: rgb(209 213 219); } .untangled-pr-history { position: sticky; top: 3rem; max-height: calc(100vh - 3rem); overflow: auto; padding-right: 0.5rem; } .untangled-pr-history-card { overflow: hidden; border: 1px solid rgb(209 213 219); border-radius: 0.25rem; background: rgb(255 255 255); } .untangled-pr-history-card > header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid rgb(229 231 235); padding: 0.75rem 1rem; } .untangled-pr-history-card h2 { margin: 0; font-size: 1rem; font-weight: 500; } .untangled-pr-history-card header div { display: flex; gap: 1rem; font-size: 0.875rem; color: rgb(75 85 99); } .untangled-pr-history-submission { display: flex; width: 100%; gap: 0.75rem; border: 0; padding: 1rem; background: transparent; color: inherit; text-align: left; } .untangled-pr-history-submission:hover, .untangled-pr-history-submission-active { background: rgb(239 246 255); } .untangled-pr-history-event { display: flex; align-items: center; gap: 0.5rem; margin: 0 0.125rem 1rem; border: 1px solid transparent; border-radius: 0.25rem; padding: 0.75rem 1rem; font-weight: 500; } .untangled-pr-history-event-merged { border-color: rgb(168 85 247); background: rgb(126 34 206); color: rgb(250 245 255); } .untangled-pr-history-event-closed { border-color: rgb(239 68 68); background: rgb(127 29 29); color: rgb(254 242 242); } .untangled-pr-history-event-open { border-color: rgb(34 197 94); background: rgb(22 101 52); color: rgb(240 253 244); } .untangled-pr-history-comment { display: flex; flex-direction: column; gap: 0.75rem; border-top: 1px solid rgb(229 231 235); padding: 1rem; } @media (prefers-color-scheme: dark) { .untangled-pr-summary-card, .untangled-pr-sidebar-toggle, .untangled-pr-file-tree, .untangled-pr-diff-file, .untangled-pr-history-card { background: rgb(31 41 55); color: rgb(243 244 246); } .untangled-pr-meta, .untangled-pr-meta-section p { color: rgb(156 163 175); } .untangled-pr-meta-section h2 { color: rgb(209 213 219); } .untangled-pr-meta-section h2 span { background: rgb(75 85 99); color: rgb(243 244 246); } .untangled-pr-meta-section code { color: rgb(243 244 246); } .untangled-pr-meta-action, .untangled-pr-icon-button { border-color: rgb(55 65 81); color: rgb(156 163 175); } .untangled-pr-sidebar-toggle, .untangled-pr-diff-file, .untangled-pr-history-card { border-color: rgb(55 65 81); } .untangled-pr-file-tree { border-color: rgb(55 65 81); } .untangled-diff-stat-add { background: rgb(22 101 52 / 0.5); color: rgb(74 222 128); } .untangled-diff-stat-del { background: rgb(127 29 29 / 0.5); color: rgb(248 113 113); } .untangled-pr-file-tree-entry { color: rgb(229 231 235); } .untangled-pr-file-tree-children { border-color: rgb(75 85 99); } .untangled-pr-file-tree-entry:hover { background: rgb(31 41 55); } .untangled-pr-history-card > header, .untangled-pr-history-comment { border-color: rgb(55 65 81); } .untangled-pr-history-card header div { color: rgb(209 213 219); } .untangled-pr-diff-toolbar { background: rgb(17 24 39); } .untangled-pr-history-submission:hover, .untangled-pr-history-submission-active { background: rgb(30 64 175 / 0.45); } } @media (max-width: 1023px) { .untangled-pr-header-grid, .untangled-pr-diff-grid, .untangled-pr-diff-grid-sidebar-collapsed, .untangled-pr-diff-grid-history-collapsed { grid-template-columns: minmax(0, 1fr); } .untangled-pr-diff-toolbar, .untangled-pr-diff-toolbar-sidebar-collapsed, .untangled-pr-diff-toolbar-history-collapsed { display: flex !important; align-items: center; justify-content: space-between; gap: 0.5rem; position: static; } .untangled-pr-sidebar-toggle, .untangled-pr-diff-toolbar-history { display: none !important; } .untangled-pr-diff-file-header, .untangled-diff-view-commit .untangled-diff-file-header { position: static; } .untangled-pr-file-tree { position: static; max-height: none; display: none; } } @media (min-width: 768px) and (max-width: 1023px) { .untangled-pr-history { position: static; max-height: none; } } @media (max-width: 767px) { .untangled-pr-history { position: fixed; top: auto; bottom: 0; left: 0; right: 0; z-index: 50; width: 100%; max-height: none; overflow: visible; padding: 0; background: transparent; border: none; box-shadow: none; transform: translateY(calc(100% - 3rem)); transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); } .untangled-pr-history.open { transform: none; } .untangled-pr-history-body { transform: translateY(4rem); transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); } .untangled-pr-history.open .untangled-pr-history-body { transform: none; } .untangled-pr-history details, .untangled-pr-history details summary { border-top-left-radius: 0.625rem !important; border-top-right-radius: 0.625rem !important; } /* Style the history card skeleton to be a collapsed header at the bottom on mobile */ .untangled-pr-history-card { border: none !important; background: transparent !important; } .untangled-pr-history-card .untangled-pr-history-submission, .untangled-pr-history-card .px-4, .untangled-pr-history-card .p-4, .untangled-pr-history-card .untangled-pr-history-comment { display: none !important; } .untangled-pr-history-card > header { background: rgb(229 231 235); height: 3rem; border-top-left-radius: 0.625rem !important; border-top-right-radius: 0.625rem !important; padding: 0 1rem; border: 1px solid rgb(209 213 219); border-bottom: none; } } @media (max-width: 767px) and (prefers-color-scheme: dark) { .untangled-pr-history-card > header { background: rgb(31 41 55); border-color: rgb(55 65 81); } } summary::-webkit-details-marker { display: none; } summary { list-style: none; } @media (max-width: 767px) { .untangled-pr-summary-card { padding: 0.75rem; } .untangled-thread-meta { padding: 0.25rem 0.25rem 0.5rem; } } html, body, #root { min-height: 100%; } body { margin: 0; background: rgb(243 244 246); color: rgb(15 23 42); transition: background-color 200ms, color 200ms; } @media (prefers-color-scheme: dark) { body { background: rgb(17 24 39); color: rgb(243 244 246); } } * { box-sizing: border-box; } a { color: inherit; } button, input, select, textarea { font: inherit; } img { max-width: 100%; } pre { overflow: auto; } .untangled-focus:focus-visible { outline: 2px solid rgb(59 130 246); outline-offset: 2px; } .untangled-prose a { text-decoration: underline; } .untangled-prose pre { padding: 1rem; border-radius: 0.25rem; background: rgb(15 23 42); color: rgb(226 232 240); } .untangled-prose code { background: rgb(226 232 240 / 0.7); padding: 0.125rem 0.375rem; border-radius: 0.25rem; } @media (prefers-color-scheme: dark) { .untangled-prose code { background: rgb(51 65 85 / 0.8); } } .untangled-shell { width: 100%; max-width: 1126px; padding-bottom: max(2rem, calc(1.5rem + env(safe-area-inset-bottom))); } .untangled-settings-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; } @media (min-width: 768px) { .untangled-settings-grid { grid-template-columns: 15rem minmax(0, 1fr); } } .untangled-repo-frame-full { box-sizing: border-box; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding-left: 0.25rem; padding-right: 0.25rem; width: 100vw; } .untangled-skeleton { background: rgb(229 231 235); position: relative; overflow: hidden; } .untangled-skeleton-on-dark { background: rgb(75 85 99); } .untangled-skeleton::after { animation: untangled-skeleton-shimmer 1.4s ease-in-out infinite; background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.55), transparent); content: ''; inset: 0; position: absolute; transform: translateX(-100%); } @media (prefers-color-scheme: dark) { .untangled-skeleton { background: rgb(55 65 81); } .untangled-skeleton::after { background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.08), transparent); } .untangled-file-row-loading { background: rgb(255 255 255 / 0.06); } } @media (prefers-reduced-motion: reduce) { .untangled-skeleton::after { animation: none; } .untangled-file-row-loading { animation: none; } } @keyframes untangled-skeleton-shimmer { 100% { transform: translateX(100%); } } @keyframes untangled-file-row-breathe { 0%, 100% { opacity: 0.88; } 50% { opacity: 1; } } .untangled-skeleton-file-row { align-items: center; display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr) 8rem; } .untangled-skeleton-code-line { align-items: center; display: grid; gap: 0.75rem; grid-template-columns: 2.5rem minmax(0, 1fr); } .untangled-skeleton-branch-select { height: 34px; width: 128px; } .untangled-skeleton-compare-button { height: 30px; width: 40px; } .untangled-skeleton-clone-button { height: 30px; width: 80px; } .untangled-overlap-avatars > * + * { margin-left: -0.625rem; } .untangled-overlap-avatars > * { border: 1px solid rgb(17 24 39); } .untangled-at-uri-panel { min-width: 0; } .untangled-at-uri-header { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.5rem; color: rgb(107 114 128); font-size: 0.875rem; font-weight: 600; text-transform: uppercase; } .untangled-at-uri-actions { display: flex; align-items: center; gap: 0.5rem; } .untangled-at-uri-action { display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; padding: 0; color: rgb(107 114 128); text-decoration: none; } .untangled-at-uri-action:hover { color: rgb(55 65 81); text-decoration: none; } .untangled-at-uri { display: block; max-width: 100%; overflow-x: auto; white-space: nowrap; color: rgb(55 65 81); cursor: pointer; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-size: 0.875rem; user-select: all; } @media (prefers-color-scheme: dark) { .untangled-at-uri-header, .untangled-at-uri-action { color: rgb(156 163 175); } .untangled-at-uri-action:hover { color: rgb(229 231 235); } .untangled-at-uri { color: rgb(209 213 219); } } .untangled-repo-overview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.5rem; } .untangled-repo-overview--path { grid-template-columns: minmax(0, 1fr); } .untangled-file-tree-pane { border-right: 1px solid rgb(55 65 81); } .untangled-repo-overview--path .untangled-file-tree-pane { border-right: 0; padding-right: 0; } .untangled-language-bar { display: flex; gap: 1px; height: 1rem; overflow: hidden; padding: 0; border-radius: 0.25rem 0.25rem 0 0; transform: scaleY(0.5); transform-origin: top; transition: transform 150ms; cursor: pointer; list-style: none; } .untangled-language-bar-loading { cursor: default; pointer-events: none; } .untangled-language-bar-skeleton { width: 100%; height: 100%; border-radius: 0.25rem 0.25rem 0 0; } .untangled-language-bar::-webkit-details-marker { display: none; } .untangled-language-bar::marker { content: ''; } .untangled-language-bar:hover, details[open] > .untangled-language-bar { transform: scaleY(1); } .untangled-language-segment { height: 100%; min-width: 1px; } .untangled-home-page { display: flex; min-width: 0; flex-direction: column; gap: 1rem; } .untangled-home-command { display: grid; grid-template-columns: minmax(0, 1fr) minmax(22rem, 32rem); align-items: center; gap: 1rem; border-bottom: 1px solid rgb(229 231 235); padding: 0.5rem 0.25rem 1rem; } .untangled-home-brand { display: flex; min-width: 0; align-items: center; gap: 0.75rem; } .untangled-home-brand h1 { margin: 0; font-size: 1.875rem; font-weight: 800; letter-spacing: 0; line-height: 1.1; } .untangled-home-brand p { margin: 0.125rem 0 0; color: rgb(107 114 128); font-size: 0.875rem; } .untangled-home-jump { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.5rem; } .untangled-home-jump .untangled-input { min-height: 2.25rem; padding-top: 0.375rem; padding-bottom: 0.375rem; } .untangled-home-workspace { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: 1.5rem; align-items: start; } .untangled-home-side { display: flex; min-width: 0; flex-direction: column; gap: 0.75rem; padding: 0 0 0.75rem; position: sticky; top: 0; } .untangled-home-side-left { border-right: 1px solid rgb(229 231 235); padding-right: 1rem; } .untangled-home-side-right { padding-left: 1.5rem; } .untangled-home-section-header { position: sticky; top: 0; z-index: 10; background: rgb(241 245 249); padding-top: 0.5rem; display: flex; align-items: center; gap: 0.75rem; padding-bottom: 1rem; color: inherit; } .untangled-home-section-header h2 { margin: 0; font-size: 1.25rem; font-weight: 750; color: rgb(17 24 39); } .untangled-home-feed { min-width: 0; } .untangled-home-feed-header { position: sticky; top: 0; z-index: 10; background: rgb(241 245 249); padding-top: 0.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: 1rem; margin-bottom: 0.5rem; } .untangled-home-feed-title { margin: 0; display: flex; align-items: center; gap: 0.75rem; font-size: 1.25rem; font-weight: 750; color: rgb(17 24 39); } .untangled-home-live-pill { display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgb(209 213 219); border-radius: 9999px; padding: 0.25rem 0.625rem; color: rgb(75 85 99); font-size: 0.75rem; white-space: nowrap; } .untangled-home-activity-list { display: flex; min-width: 0; flex-direction: column; gap: 1rem; } /* upstream-style: individual bordered card per event, with connector lines */ .untangled-home-activity-card-wrap { position: relative; min-width: 0; } .untangled-home-activity-connector { position: absolute; left: 1rem; top: -1rem; width: 1px; height: 1rem; background: rgb(209 213 219); } .untangled-home-activity-card { display: flex; flex-direction: column; border: 1px solid rgb(229 231 235); border-radius: 0.125rem; overflow: hidden; } .untangled-home-activity-card-header { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; color: rgb(75 85 99); font-size: 0.8125rem; } .untangled-home-activity-header-text { display: flex; min-width: 0; flex: 1; flex-wrap: wrap; align-items: center; gap: 0.375rem; overflow: hidden; } .untangled-home-activity-repo-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: rgb(17 24 39); font-size: 0.8125rem; } .untangled-home-activity-time { flex-shrink: 0; color: rgb(107 114 128); font-size: 0.75rem; } .untangled-home-activity-card-body { display: block; padding: 0.5rem 0.75rem; background: rgb(249 250 251); border-top: 1px solid rgb(229 231 235); color: rgb(55 65 81); font-size: 0.8125rem; line-height: 1.4; text-decoration: none; transition: background-color 150ms; -webkit-box-orient: vertical; -webkit-line-clamp: 2; display: -webkit-box; overflow: hidden; } .untangled-home-activity-card-body:hover { background: rgb(243 244 246); text-decoration: none; } .untangled-home-activity-icon { display: inline-flex; width: 1.5rem; height: 1.5rem; align-items: center; justify-content: center; border-radius: 9999px; background: rgb(239 246 255); color: rgb(37 99 235); flex-shrink: 0; } .untangled-home-activity-icon-issue { background: rgb(220 252 231); color: rgb(22 101 52); } .untangled-home-activity-icon-pull { background: rgb(243 232 255); color: rgb(126 34 206); } .untangled-home-activity-icon-repo { background: rgb(241 245 249); color: rgb(51 65 85); } /* old copy/meta styles no longer used but kept for compat with following activity */ .untangled-home-activity-copy { display: flex; min-width: 0; flex-direction: column; gap: 0.375rem; } .untangled-home-activity-title { display: flex; min-width: 0; flex-wrap: wrap; align-items: baseline; gap: 0.35rem; color: rgb(17 24 39); font-size: 0.9375rem; } .untangled-home-activity-title strong { min-width: 0; overflow-wrap: anywhere; font-weight: 700; } .untangled-home-activity-body { display: -webkit-box; overflow: hidden; color: rgb(75 85 99); font-size: 0.875rem; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .untangled-home-activity-meta { display: flex; align-items: center; gap: 0.5rem; color: rgb(107 114 128); font-size: 0.8125rem; } .untangled-home-feed-empty { display: flex; min-height: 18rem; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; padding: 2rem; text-align: center; color: rgb(107 114 128); } .untangled-home-feed-empty h3 { margin: 0.5rem 0 0; color: rgb(31 41 55); font-size: 1rem; font-weight: 700; } .untangled-home-feed-empty p { max-width: 22rem; margin: 0; font-size: 0.875rem; line-height: 1.5; } .untangled-home-compact-list { display: flex; min-width: 0; flex-direction: column; gap: 0.5rem; } .untangled-home-following-list { display: flex; min-width: 0; flex-direction: column; gap: 0.75rem; } /* upstream repoCard style: flat link with icon + name, description below, time at right */ .untangled-home-repo-row { display: flex; min-width: 0; flex-direction: column; gap: 0.125rem; border: 1px solid rgb(229 231 235); border-radius: 0.125rem; padding: 0.625rem 0.75rem; color: inherit; text-decoration: none; transition: background-color 150ms; background: rgb(255 255 255); } .untangled-home-repo-row:last-child { border-bottom-width: 1px; } .untangled-home-repo-row:hover { background: rgb(249 250 251); text-decoration: none; } .untangled-home-repo-row-name { display: flex; align-items: center; gap: 0.375rem; min-width: 0; font-weight: 600; font-size: 0.875rem; color: rgb(17 24 39); overflow: hidden; } .untangled-home-repo-row-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .untangled-home-repo-row-desc { color: rgb(75 85 99); font-size: 0.75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; } .untangled-home-repo-row-footer { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.125rem; } .untangled-home-repo-row-lang { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.75rem; color: rgb(75 85 99); } .untangled-home-repo-row-lang-dot { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 9999px; } .untangled-home-repo-row-time { color: rgb(107 114 128); font-size: 0.75rem; } .untangled-home-following-row { display: flex; min-width: 0; align-items: center; gap: 0.5rem; padding: 0.375rem 0.125rem; color: inherit; transition: background-color 150ms; } .untangled-home-following-row span { display: flex; min-width: 0; flex-direction: column; } .untangled-home-following-row span span { overflow: hidden; color: rgb(17 24 39); font-size: 0.8125rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; } .untangled-home-following-row small { color: rgb(107 114 128); font-size: 0.75rem; } .untangled-home-empty { padding: 0.75rem 0.125rem; color: rgb(107 114 128); font-size: 0.875rem; line-height: 1.4; } .untangled-home-below { display: flex; flex-direction: column; gap: 1.5rem; padding-top: 2rem; padding-bottom: 4rem; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding-left: 2rem; padding-right: 2rem; background: rgb(248 250 252); box-sizing: border-box; } @media (prefers-color-scheme: dark) { .untangled-home-below { background: rgb(15 23 42); } } @media (min-width: 1280px) { .untangled-home-below { padding-left: 4rem; padding-right: 4rem; } } .untangled-home-wide-section { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; } .untangled-home-lower-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: start; } .untangled-home-promos-column { order: 3; } .untangled-home-lower-left { order: 1; } .untangled-home-lower-right { order: 2; } @media (min-width: 768px) { .untangled-home-lower-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } .untangled-home-promos-column { grid-column: span 2; display: flex; flex-direction: column; gap: 1rem; } } @media (min-width: 1024px) { .untangled-home-lower-grid { grid-template-columns: 18rem minmax(0, 1fr) 20rem; gap: 2rem; } .untangled-home-promos-column { grid-column: span 1; display: flex; flex-direction: column; gap: 1.25rem; order: 0; } .untangled-home-lower-left, .untangled-home-lower-right { order: 0; } } @media (min-width: 1280px) { .untangled-home-lower-grid { grid-template-columns: 22rem minmax(0, 1fr) 24rem; gap: 3.5rem; } } .untangled-home-announcements-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 768px) and (max-width: 1023px) { .untangled-home-workspace { padding-left: 1.5rem; padding-right: 1.5rem; } .untangled-home-below { padding-left: 1.5rem; padding-right: 1.5rem; } .untangled-home-announcements-grid { grid-template-columns: repeat(2, 1fr); } .untangled-home-promos-column { position: relative; z-index: 20; background: rgb(248 250 252); } } @media (min-width: 768px) and (max-width: 1023px) and (prefers-color-scheme: dark) { .untangled-home-promos-column { background: rgb(15 23 42); } } /* Vouch Card styles */ .untangled-home-vouch-card { display: flex; flex-direction: column; border: 1px solid rgb(229 231 235); border-radius: 0.25rem; background: rgb(255 255 255); padding: 1.25rem; box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); gap: 1rem; } @media (prefers-color-scheme: dark) { .untangled-home-vouch-card { border-color: rgb(55 65 81); background: rgb(31 41 55); } } .untangled-home-vouch-header { display: flex; align-items: center; justify-content: space-between; } .untangled-home-vouch-title { margin: 0; display: flex; align-items: center; gap: 0.5rem; font-size: 1rem; font-weight: 700; color: rgb(17 24 39); } @media (prefers-color-scheme: dark) { .untangled-home-vouch-title { color: rgb(243 244 246); } } .untangled-home-vouch-list { display: flex; flex-direction: column; gap: 1rem; } .untangled-home-vouch-item { display: flex; align-items: center; gap: 0.75rem; } .untangled-home-vouch-info { display: flex; flex-direction: column; min-width: 0; flex: 1; } .untangled-home-vouch-name { font-size: 0.875rem; font-weight: 600; color: rgb(17 24 39); text-decoration: none; } .untangled-home-vouch-name:hover { text-decoration: underline; } @media (prefers-color-scheme: dark) { .untangled-home-vouch-name { color: rgb(243 244 246); } } .untangled-home-vouch-reason { font-size: 0.75rem; color: rgb(107 114 128); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (prefers-color-scheme: dark) { .untangled-home-vouch-reason { color: rgb(156 163 175); } } .untangled-home-vouch-action-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; font-size: 0.75rem; font-weight: 600; padding: 0.375rem 0.75rem; border-radius: 0.125rem; border: 1px solid rgb(209 213 219); background: rgb(255 255 255); color: rgb(55 65 81); cursor: pointer; transition: all 150ms; } .untangled-home-vouch-action-btn:hover { background: rgb(249 250 251); border-color: rgb(156 163 175); } .untangled-home-vouch-action-btn.is-vouched { background: rgb(220 252 231); border-color: rgb(187 247 208); color: rgb(21 128 61); } .untangled-home-vouch-action-btn.is-vouched:hover { background: rgb(240 253 244); } @media (prefers-color-scheme: dark) { .untangled-home-vouch-action-btn { border-color: rgb(75 85 99); background: rgb(31 41 55); color: rgb(209 213 219); } .untangled-home-vouch-action-btn:hover { background: rgb(55 65 81); border-color: rgb(156 163 175); } .untangled-home-vouch-action-btn.is-vouched { background: rgb(20 83 45 / 0.4); border-color: rgb(20 83 45); color: rgb(74 222 128); } .untangled-home-vouch-action-btn.is-vouched:hover { background: rgb(20 83 45 / 0.6); } } .untangled-home-scroll-container { display: flex; flex-direction: column; gap: 0.75rem; max-height: 38rem; overflow-y: auto; padding-right: 0.5rem; padding-bottom: 3rem; transition: mask-image 0.2s, -webkit-mask-image 0.2s; } /* 1. At the top (only fade at bottom) */ .untangled-home-scroll-container.is-at-top { mask-image: linear-gradient(to bottom, black 90%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, black 90%, transparent 100%); } /* 2. At the bottom (only fade at top) */ .untangled-home-scroll-container.is-at-bottom { mask-image: linear-gradient(to top, black 90%, transparent 100%); -webkit-mask-image: linear-gradient(to top, black 90%, transparent 100%); } /* 3. In the middle (fade at both top and bottom) */ .untangled-home-scroll-container.is-in-middle { mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%); } /* 4. Not scrollable (no fade at all) */ .untangled-home-scroll-container.is-not-scrollable { mask-image: none; -webkit-mask-image: none; } .untangled-home-recent-strip, .untangled-home-sample-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 0.75rem; border-top: 1px solid rgb(229 231 235); border-left: 1px solid rgb(229 231 235); } .untangled-home-recent-link, .untangled-home-sample-link { display: flex; min-width: 0; flex-direction: column; gap: 0.25rem; border-right: 1px solid rgb(229 231 235); border-bottom: 1px solid rgb(229 231 235); padding: 0.875rem; color: inherit; text-decoration: none; transition: background-color 150ms; } .untangled-home-recent-link:hover, .untangled-home-sample-link:hover { background: rgb(255 255 255); text-decoration: none; } .untangled-home-recent-link span, .untangled-home-sample-link strong { overflow: hidden; color: rgb(17 24 39); font-size: 0.875rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; } .untangled-home-recent-link small, .untangled-home-sample-link span { overflow: hidden; color: rgb(107 114 128); font-size: 0.75rem; text-overflow: ellipsis; white-space: nowrap; } .untangled-home-sample-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } .untangled-home-sample-list-compact { grid-template-columns: minmax(0, 1fr); } @media (prefers-color-scheme: dark) { .untangled-home-command, .untangled-home-side-left, .untangled-home-side-right, .untangled-home-section-header, .untangled-home-feed-header, .untangled-home-wide-section, .untangled-home-recent-strip, .untangled-home-sample-list, .untangled-home-recent-link, .untangled-home-sample-link { border-color: rgb(55 65 81); } .untangled-home-activity-card, .untangled-home-repo-row { border-color: rgb(55 65 81); } .untangled-home-activity-connector { background: rgb(55 65 81); } .untangled-home-activity-card-header { background: rgb(31 41 55); color: rgb(156 163 175); } .untangled-home-activity-card-body { background: rgb(17 24 39); border-color: rgb(55 65 81); color: rgb(209 213 219); } .untangled-home-activity-card-body:hover { background: rgb(31 41 55); } .untangled-home-section-header, .untangled-home-feed-header { background: rgb(17 24 39); } .untangled-home-section-header h2, .untangled-home-feed-title, .untangled-home-activity-repo-label { color: rgb(243 244 246); } .untangled-home-activity-time { color: rgb(107 114 128); } .untangled-home-repo-row { background: rgb(31 41 55); } .untangled-home-repo-row:hover { background: rgb(55 65 81 / 0.6); } .untangled-home-repo-row-name { color: rgb(243 244 246); } .untangled-home-repo-row-desc, .untangled-home-repo-row-lang, .untangled-home-repo-row-time, .untangled-home-following-row small { color: rgb(156 163 175); } .untangled-home-brand p, .untangled-home-activity-body, .untangled-home-activity-meta, .untangled-home-feed-empty, .untangled-home-empty, .untangled-home-recent-link small, .untangled-home-sample-link span { color: rgb(156 163 175); } .untangled-home-feed-empty h3, .untangled-home-activity-title, .untangled-home-following-row span span, .untangled-home-recent-link span, .untangled-home-sample-link strong { color: rgb(243 244 246); } .untangled-home-live-pill { border-color: rgb(75 85 99); color: rgb(209 213 219); } .untangled-home-recent-link:hover, .untangled-home-sample-link:hover { background: rgb(55 65 81 / 0.35); } .untangled-home-activity-icon { background: rgb(15 23 42); color: rgb(191 219 254); } .untangled-home-activity-icon-issue { background: rgb(22 101 52 / 0.45); color: rgb(134 239 172); } .untangled-home-activity-icon-pull { background: rgb(88 28 135 / 0.55); color: rgb(216 180 254); } .untangled-home-activity-icon-repo { background: rgb(15 23 42); color: rgb(191 219 254); } } @media (max-width: 1023px) { .untangled-home-command { grid-template-columns: minmax(0, 1fr); } .untangled-home-workspace { display: flex; flex-direction: column; } .untangled-home-feed { order: -1; width: 100%; } .untangled-home-side { position: static; width: 100%; border-right: 0; border-left: 0; padding: 0.75rem 0 0; } .untangled-home-lower-grid, .untangled-home-recent-strip, .untangled-home-sample-list { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 767px) { .untangled-home-workspace { padding-left: 0.5rem; padding-right: 0.5rem; } .untangled-home-below { padding-left: 0.5rem; padding-right: 0.5rem; } .untangled-home-brand h1 { font-size: 1.5rem; } .untangled-home-jump { grid-template-columns: auto minmax(0, 1fr); } .untangled-home-jump button { grid-column: 1 / -1; } .untangled-home-feed-header { align-items: flex-start; flex-direction: column; } .untangled-home-activity-row { padding-right: 1rem; padding-left: 1rem; } } @media (min-width: 768px) { .untangled-home-lower-right { align-self: stretch; } .untangled-home-sticky-wrapper { position: sticky; top: 0; } } .untangled-safe-footer { padding-bottom: env(safe-area-inset-bottom); } .untangled-safe-header { padding-top: env(safe-area-inset-top); z-index: 20; } .untangled-unread-badge { font-size: 11px; } .untangled-branch-select, .untangled-toggle-button { min-height: 34px; } .untangled-toggle-button { background: transparent; color: rgb(75 85 99); } .untangled-toggle-button-idle:hover { background: rgb(249 250 251); color: rgb(17 24 39); } .untangled-toggle-button-active { background: rgb(229 231 235); color: rgb(17 24 39); } .untangled-toggle-button-active:hover { background: rgb(243 244 246); color: rgb(17 24 39); } .untangled-toggle-button-meta-idle { color: rgb(156 163 175); } .untangled-toggle-button-meta-active, .untangled-toggle-button-idle:hover .untangled-toggle-button-meta { color: rgb(107 114 128); } @media (prefers-color-scheme: dark) { .untangled-toggle-button { color: rgb(209 213 219); } .untangled-toggle-button-idle:hover { background: rgb(55 65 81 / 0.5); color: rgb(243 244 246); } .untangled-toggle-button-active { background: rgb(55 65 81); color: rgb(243 244 246); } .untangled-toggle-button-active:hover { background: rgb(75 85 99); color: rgb(243 244 246); } .untangled-toggle-button-meta-idle { color: rgb(107 114 128); } .untangled-toggle-button-meta-active, .untangled-toggle-button-idle:hover .untangled-toggle-button-meta { color: rgb(156 163 175); } } .untangled-toggle-group { display: flex; align-items: stretch; border-radius: 0.25rem; border: 1px solid rgb(209 213 219); overflow: hidden; } @media (prefers-color-scheme: dark) { .untangled-toggle-group { border-color: rgb(55 65 81); } } .untangled-list-row { display: block; border-radius: 0.25rem; background-color: rgb(255 255 255); padding: 1rem 1.5rem; box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); text-decoration-line: none; } .untangled-list-row:hover { text-decoration-line: underline; } @media (prefers-color-scheme: dark) { .untangled-list-row { background-color: rgb(31 41 55); /* border: 1px solid rgb(55 65 81); */ } } .untangled-thread-group { overflow: hidden; border-radius: 0.25rem; border: 1px solid rgb(229 231 235); background-color: rgb(249 250 251); box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); } @media (prefers-color-scheme: dark) { .untangled-thread-group { border-color: rgb(55 65 81); background-color: rgb(31 41 55 / 0.5); } } .untangled-thread-comment { display: flex; gap: 0.5rem; border-radius: 0.25rem; background-color: rgb(255 255 255); padding: 1rem 1.5rem; } @media (prefers-color-scheme: dark) { .untangled-thread-comment { background-color: rgb(31 41 55); } } .untangled-thread-replies-list { position: relative; margin-left: 2.5rem; border-left: 1px solid rgb(229 231 235); } @media (prefers-color-scheme: dark) { .untangled-thread-replies-list { border-left-color: rgb(55 65 81); } } .untangled-thread-reply { margin-left: -1rem; width: calc(100% + 1rem) !important; display: flex; gap: 0.5rem; padding: 1rem 1rem 1rem 0; } .untangled-thread-reply-trigger { display: flex; width: 100%; align-items: center; gap: 0.5rem; border-top: 1px solid rgb(209 213 219); background: transparent; padding: 0.5rem 1.5rem; text-align: left; font-size: 0.875rem; color: rgb(107 114 128); } @media (prefers-color-scheme: dark) { .untangled-thread-reply-trigger { border-top-color: rgb(55 65 81); color: rgb(156 163 175); } } .untangled-thread-reply-form { display: flex; width: 100%; flex-direction: column; gap: 0.5rem; border-top: 1px solid rgb(229 231 235); padding: 0.5rem; } @media (prefers-color-scheme: dark) { .untangled-thread-reply-form { border-top-color: rgb(55 65 81); } } .untangled-comment-composer { position: relative; display: flex; min-width: 0; width: 100%; flex-direction: column; gap: 0.75rem; border-radius: 0.25rem; background-color: rgb(255 255 255); padding: 1rem; box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); } @media (prefers-color-scheme: dark) { .untangled-comment-composer { background-color: rgb(31 41 55); } } .untangled-button { min-height: 30px; } .untangled-clone-dropdown { position: relative; display: inline-flex; } .untangled-clone-popover { position: absolute; top: calc(100% + 0.5rem); right: 0; z-index: 70; width: min(calc(100vw - 2rem), 27.5rem); overflow: visible; border: 1px solid rgb(229 231 235); border-radius: 0.25rem; background: rgb(255 255 255); padding: 1rem; color: rgb(17 24 39); box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); } .untangled-clone-url-row { display: flex; align-items: stretch; overflow: hidden; border: 1px solid rgb(209 213 219); border-radius: 0.25rem; } .untangled-clone-url-text { min-width: 0; flex: 1; overflow-x: auto; background: rgb(229 231 235); padding: 0.5rem 0.75rem; color: rgb(17 24 39); font-family: IBMPlexMono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace; font-size: 0.875rem; white-space: nowrap; cursor: pointer; user-select: all; } .untangled-clone-copy { display: inline-flex; align-items: center; justify-content: center; border: 0; border-left: 1px solid rgb(209 213 219); background: rgb(255 255 255); padding: 0 0.75rem; color: rgb(107 114 128); } .untangled-clone-copy:hover { color: rgb(55 65 81); } .untangled-input { min-height: 38px; } .untangled-textarea { min-height: 140px; } .untangled-topbar-search-box { position: relative; display: flex; max-height: 30px; width: 20rem; align-items: center; gap: 0.5rem; border: 1px solid rgb(229 231 235); border-radius: 0.25rem; background: rgb(255 255 255); padding: 1rem 0.375rem 1rem 0.5rem; } .untangled-topbar-search-box:focus-within { z-index: 51; outline: 2px solid rgb(209 213 219); outline-offset: 1px; } .untangled-topbar-search-input { min-width: 0; flex: 1; border: 0; border-color: transparent; border-radius: 0; background: transparent; padding: 0; color: rgb(31 41 55); font-size: 0.875rem; line-height: 1.25rem; outline: none; } .untangled-topbar-search-input:focus { border: 0; border-color: transparent; box-shadow: none; outline: none; } .untangled-topbar-search-input::placeholder { color: rgb(156 163 175); } .untangled-topbar-search-kbd { display: flex; align-items: center; border: 1px solid rgb(229 231 235); border-bottom-width: 2px; border-radius: 0.25rem; padding: 0 0.25rem; color: rgb(156 163 175); font-family: inherit; font-size: 0.75rem; line-height: 1.25rem; pointer-events: none; } .untangled-topbar-search-input:focus + .untangled-topbar-search-kbd, .untangled-topbar-search-box:focus-within .untangled-topbar-search-kbd, .untangled-topbar-search-input:not(:placeholder-shown) + .untangled-topbar-search-kbd { display: none; } .untangled-file-row { display: grid; grid-template-columns: minmax(0, 1fr) max-content; align-items: center; gap: 1rem; padding: 0.25rem 0.5rem 0.25rem 0; text-decoration: none; } .untangled-file-row-loading { animation: untangled-file-row-breathe 1.1s ease-in-out infinite; background: rgb(17 24 39 / 0.035); border-radius: 0.25rem; } .untangled-file-row-time { text-align: right; white-space: nowrap; } .untangled-filter-grid { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.5rem; } .untangled-repo-filter-search { position: relative; display: flex; min-width: 0; } .untangled-repo-filter-input { min-width: 0; flex: 1; border: 1px solid rgb(209 213 219); border-radius: 0.25rem 0 0 0.25rem; background: rgb(255 255 255); padding: 0.25rem 2.5rem 0.25rem 0.5rem; color: rgb(17 24 39); font-size: 0.875rem; line-height: 1.5rem; outline: none; } .untangled-repo-filter-input:focus { border-color: rgb(156 163 175); box-shadow: 0 0 0 1px rgb(156 163 175); z-index: 1; } .untangled-repo-filter-input::placeholder { color: rgb(156 163 175); } .untangled-repo-filter-reset { position: absolute; right: 2.75rem; top: 50%; display: none; color: rgb(156 163 175); transform: translateY(-50%); } .untangled-repo-filter-input:not(:placeholder-shown) + .untangled-repo-filter-reset { display: block; } .untangled-repo-filter-reset:hover { color: rgb(75 85 99); } .untangled-repo-filter-submit { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; border: 1px solid rgb(209 213 219); border-left: 0; border-radius: 0 0.25rem 0.25rem 0; background: rgb(255 255 255); color: rgb(156 163 175); } .untangled-repo-filter-submit:hover { color: rgb(31 41 55); } .untangled-search-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; } .untangled-search-main { display: flex; min-width: 0; flex-direction: column; gap: 1rem; } .untangled-search-sidebar { display: none; } .untangled-search-page-input { min-width: 0; flex: 1; border: 1px solid rgb(209 213 219); border-radius: 0.25rem 0 0 0.25rem; background: rgb(255 255 255); margin-right: -1px; padding: 0.25rem 2.5rem 0.25rem 0.5rem; color: rgb(17 24 39); outline: none; } .untangled-search-page-input::placeholder { color: rgb(156 163 175); } .untangled-search-page-input:focus { border-color: rgb(156 163 175); box-shadow: 0 0 0 1px rgb(156 163 175); z-index: 1; } .untangled-search-page-submit { display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgb(209 213 219); border-radius: 0 0.25rem 0.25rem 0; padding: 0.5rem; background: rgb(255 255 255); color: rgb(156 163 175); } .untangled-search-page-submit:hover { color: rgb(75 85 99); } .untangled-search-type-dot { width: 0.5rem; height: 0.5rem; flex-shrink: 0; border-radius: 9999px; background: radial-gradient(circle at 35% 35%, rgb(156 163 175), rgb(107 114 128) 30%, rgb(75 85 99)); } .untangled-search-description { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } @media (min-width: 1024px) { .untangled-topbar-search-box { width: 24rem; } } @media (min-width: 768px) { .untangled-search-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .untangled-search-main { grid-column: span 3 / span 3; } .untangled-search-sidebar { position: sticky; top: 0.5rem; display: block; align-self: start; } } .untangled-repo-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; width: 100%; } @media (min-width: 640px) { .untangled-repo-actions { width: fit-content; } } .untangled-repo-action { position: relative; z-index: 10; display: flex; width: 100%; min-height: 32px; align-items: stretch; overflow: hidden; border: 1px solid rgb(209 213 219); border-radius: 0.25rem; background: rgb(255 255 255); color: inherit; font-size: 0.875rem; line-height: 1.25rem; text-decoration: none; box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); } .untangled-repo-action::before { position: absolute; inset: 0; z-index: -10; display: block; border-radius: 0.125rem; box-shadow: inset 0 -2px 0 0 #e5e7eb; content: ''; transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); } .untangled-repo-action:hover { text-decoration: none; } .untangled-repo-action-main, .untangled-repo-action-count { display: inline-flex; align-items: center; } .untangled-repo-action-main { gap: 0.35rem; min-width: 3.5rem; padding: 0 0.5rem; flex: 1 1 auto; justify-content: center; position: relative; border: 0; background: transparent; color: inherit; cursor: pointer; font: inherit; text-decoration: none; } .untangled-repo-action-main:disabled { cursor: not-allowed; opacity: 0.5; pointer-events: none; } .untangled-repo-action-main:hover, .untangled-repo-action-count:hover { background: rgb(249 250 251); text-decoration: none; } .untangled-repo-action-count { border-left: 1px solid rgb(209 213 219); background: rgb(249 250 251); justify-content: center; min-width: 2rem; padding: 0 0.5rem; position: relative; text-decoration: none; } .untangled-repo-action-count[aria-disabled='true'] { color: rgb(107 114 128); pointer-events: none; } .untangled-repo-tab { min-width: 80px; } .untangled-repo-tab-meta { display: inline-flex; justify-content: center; min-width: 1.25rem; } .untangled-repo-tab-meta-placeholder { visibility: hidden; } .group:hover .untangled-repo-tab-idle { background: rgb(243 244 246 / 0.25); } .untangled-topic { border-radius: 0.25rem; background: rgb(229 231 235); padding: 0.125rem 0.25rem; font-size: 0.875rem; } .untangled-anywhere { overflow-wrap: anywhere; } .untangled-readme-prose, .untangled-readme-prose.prose { max-width: none; overflow-wrap: normal; word-break: normal; } .untangled-readme-prose p, .untangled-readme-prose li { max-width: none; overflow-wrap: normal; word-break: normal; } .untangled-blob-card { overflow: hidden; border-radius: 0.25rem; background: rgb(255 255 255); padding: 1rem 1.5rem; } .untangled-blob-file-info a, .untangled-blob-file-info button { border: 0; background: transparent; color: inherit; padding: 0; text-decoration: none; } .untangled-blob-file-info a:hover, .untangled-blob-file-info button:hover { text-decoration: underline; } .untangled-blob-rendered, .untangled-blob-preview, .untangled-blob-message { padding: 0; } .untangled-blob-rendered > .untangled-readme-prose, .untangled-blob-rendered > .untangled-readme-prose.prose { width: 100%; max-width: none; } .untangled-blob-rendered > .untangled-readme-prose > * { max-width: none; } .untangled-blob-rendered > .untangled-readme-prose > :first-child { margin-top: 0; } .untangled-blob-rendered > .untangled-readme-prose > :last-child { margin-bottom: 0; } .untangled-blob-commit-panel { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; border-bottom: 1px solid rgb(229 231 235); margin-bottom: 0.75rem; padding: 0 0 0.5rem; font-size: 0.875rem; } .untangled-blob-commit-link { display: inline-flex; align-items: center; width: fit-content; border-radius: 0.25rem; background: rgb(243 244 246); padding: 0.25rem 0.5rem; color: rgb(55 65 81); font-family: IBMPlexMono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace; font-size: 0.75rem; line-height: 1rem; text-decoration: none; } .untangled-blob-commit-link:hover { text-decoration: underline; } .untangled-code-scroll { overflow: auto; position: relative; /* padding: 0.875rem 0; */ } .untangled-code-view { display: table; min-width: 100%; font-family: IBMPlexMono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace; font-size: 0.875rem; line-height: 1.55; white-space: pre; color: var(--untangled-code-fg); } .untangled-code-view-wrap { white-space: pre-wrap; overflow-wrap: anywhere; } @media (prefers-color-scheme: dark) { } .untangled-code-line { display: table-row; } .untangled-code-line-number, .untangled-code-line-content { display: table-cell; } .untangled-code-line-number { width: 1%; padding: 0 0.75rem 0 0.5rem; color: var(--untangled-code-muted); overflow-wrap: normal; white-space: nowrap; word-break: normal; text-align: right; text-decoration: none; user-select: none; } .untangled-code-line-number:hover { text-decoration: underline; cursor: pointer; } /* Highlighted line (selected via line number click or URL hash) */ .untangled-code-line--hl .untangled-code-line-number, .untangled-code-line--hl .untangled-code-line-content { background-color: rgb(254 240 138 / 0.4); } @media (prefers-color-scheme: dark) { .untangled-code-line--hl .untangled-code-line-number, .untangled-code-line--hl .untangled-code-line-content { background-color: rgb(161 98 7 / 0.3); } } .untangled-code-line-content { padding-right: 1.5rem; color: var(--untangled-code-fg); } .untangled-code-diff-op { display: inline-block; min-width: 1ch; user-select: none; } .prose :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *))::before, .prose :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *))::after { content: none; } .prose pre code.hljs { color: inherit; background: transparent; padding: 0; font-weight: inherit; } :where(.untangled-code-line-content, .hljs) .hljs-keyword, :where(.untangled-code-line-content, .hljs) .hljs-selector-tag, :where(.untangled-code-line-content, .hljs) .hljs-name, :where(.untangled-code-line-content, .hljs) .hljs-tag { color: var(--untangled-code-keyword); } :where(.untangled-code-line-content, .hljs) .hljs-literal, :where(.untangled-code-line-content, .hljs) .hljs-number, :where(.untangled-code-line-content, .hljs) .hljs-symbol, :where(.untangled-code-line-content, .hljs) .hljs-bullet { color: var(--untangled-code-constant); } :where(.untangled-code-line-content, .hljs) .hljs-built_in, :where(.untangled-code-line-content, .hljs) .hljs-builtin-name, :where(.untangled-code-line-content, .hljs) .hljs-type { color: var(--untangled-code-builtin); } :where(.untangled-code-line-content, .hljs) .hljs-title, :where(.untangled-code-line-content, .hljs) .hljs-title.function_, :where(.untangled-code-line-content, .hljs) .hljs-function .hljs-title, :where(.untangled-code-line-content, .hljs) .hljs-selector-id { color: var(--untangled-code-name); } :where(.untangled-code-line-content, .hljs) .hljs-title.class_, :where(.untangled-code-line-content, .hljs) .hljs-class .hljs-title, :where(.untangled-code-line-content, .hljs) .hljs-section, :where(.untangled-code-line-content, .hljs) .hljs-selector-class { color: var(--untangled-code-class); } :where(.untangled-code-line-content, .hljs) .hljs-variable, :where(.untangled-code-line-content, .hljs) .hljs-template-variable, :where(.untangled-code-line-content, .hljs) .hljs-attr, :where(.untangled-code-line-content, .hljs) .hljs-attribute, :where(.untangled-code-line-content, .hljs) .hljs-property, :where(.untangled-code-line-content, .hljs) .hljs-params { color: var(--untangled-code-variable); } :where(.untangled-code-line-content, .hljs) .hljs-string, :where(.untangled-code-line-content, .hljs) .hljs-regexp, :where(.untangled-code-line-content, .hljs) .hljs-template-tag, :where(.untangled-code-line-content, .hljs) .hljs-template-variable { color: var(--untangled-code-string); } :where(.untangled-code-line-content, .hljs) .hljs-comment, :where(.untangled-code-line-content, .hljs) .hljs-quote { color: var(--untangled-code-comment); font-style: italic; } :where(.untangled-code-line-content, .hljs) .hljs-doctag, :where(.untangled-code-line-content, .hljs) .hljs-meta { color: var(--untangled-code-comment); font-style: italic; } :where(.untangled-code-line-content, .hljs) .hljs-operator, :where(.untangled-code-line-content, .hljs) .hljs-subst, :where(.untangled-code-line-content, .hljs) .hljs-link { color: var(--untangled-code-operator); } :where(.untangled-code-line-content, .hljs) .hljs-deletion { color: var(--untangled-code-declaration); } :where(.untangled-code-line-content, .hljs) .hljs-addition { color: var(--untangled-code-string); } :where(.untangled-code-line-content, .hljs) .hljs-emphasis { font-style: italic; } :where(.untangled-code-line-content, .hljs) .hljs-strong { font-weight: 700; } .untangled-code-line-add .untangled-code-line-number, .untangled-code-line-add .untangled-code-line-content { background: rgb(220 252 231); color: rgb(21 128 61); } .untangled-code-line-del .untangled-code-line-number, .untangled-code-line-del .untangled-code-line-content { background: rgb(254 226 226); color: rgb(185 28 28); } .untangled-code-line-hunk .untangled-code-line-number, .untangled-code-line-hunk .untangled-code-line-content { background: rgb(219 234 254); color: rgb(30 64 175); } @media (prefers-color-scheme: dark) { .untangled-code-line-add .untangled-code-line-number, .untangled-code-line-add .untangled-code-line-content { background: rgb(20 83 45 / 0.35); color: rgb(187 247 208); } .untangled-code-line-del .untangled-code-line-number, .untangled-code-line-del .untangled-code-line-content { background: rgb(127 29 29 / 0.35); color: rgb(254 202 202); } .untangled-code-line-hunk .untangled-code-line-number, .untangled-code-line-hunk .untangled-code-line-content { background: rgb(30 58 138 / 0.3); color: rgb(191 219 254); } } .untangled-diff-view { display: flex; flex-direction: column; gap: 0; } .untangled-commit-view, .untangled-commit-diff, .untangled-diff-view-commit { width: 100%; } .untangled-diff-panel { overflow: hidden; border: 1px solid rgb(229 231 235); border-radius: 0.25rem; background: rgb(255 255 255); } .untangled-diff-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: rgb(241 245 249); border-bottom: 1px solid rgb(229 231 235); padding: 0.5rem 0.75rem; } .untangled-diff-sidebar-toggle { display: inline-flex; width: 2rem; min-height: 2rem; align-items: center; justify-content: center; border: 1px solid rgb(209 213 219); border-radius: 0.25rem; background: rgb(255 255 255); color: rgb(31 41 55); } .untangled-diff-view-commit .untangled-diff-toolbar { background: rgb(241 245 249); } .untangled-diff-view-commit .untangled-diff-panel { overflow: visible; border: 0; border-radius: 0; background: transparent; } .untangled-diff-view-commit .untangled-diff-toolbar { border-bottom: 0; position: sticky; top: 0; z-index: 30; min-height: 3rem; padding: 0.5rem 0; } .untangled-diff-view-commit .untangled-diff-panel-body { padding-top: 0; padding-left: 0; padding-right: 0; } .untangled-diff-files { display: flex; min-width: 0; flex-direction: column; gap: 0.5rem; } .untangled-diff-tool-button, .untangled-diff-mode-button { display: inline-flex; align-items: center; gap: 0.375rem; min-height: 2rem; border: 1px solid rgb(209 213 219); border-radius: 0.25rem; background: rgb(255 255 255); padding: 0.25rem 0.625rem; font-size: 0.875rem; color: rgb(31 41 55); } .untangled-diff-tool-button:hover, .untangled-diff-mode-button:not(:disabled):hover { background: rgb(249 250 251); } .untangled-diff-mode-group { display: inline-flex; align-items: center; border: 1px solid rgb(209 213 219); border-radius: 0.25rem; overflow: hidden; } .untangled-diff-mode-group .untangled-diff-mode-button { border: 0; border-radius: 0; } .untangled-diff-mode-group .untangled-diff-mode-button + .untangled-diff-mode-button { border-left: 1px solid rgb(209 213 219); } .untangled-diff-mode-button-active { background: rgb(243 244 246); } .untangled-diff-mode-button:disabled { cursor: not-allowed; opacity: 0.65; } .untangled-diff-panel-body { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.5rem; } .untangled-diff-panel-body.untangled-diff-panel-body-with-tree { display: grid; grid-template-columns: 15.5rem minmax(0, 1fr); align-items: start; gap: 1rem; } .untangled-diff-view-commit .untangled-diff-panel-body.untangled-diff-panel-body-with-tree { padding-top: 0; } .untangled-diff-view-commit .untangled-pr-file-tree { top: 3rem; max-height: calc(100vh - 3rem); min-height: calc(100vh - 3rem); border-top: 1px solid rgb(229 231 235); border-radius: 0.25rem; } @media (max-width: 1023px) { .untangled-diff-panel-body.untangled-diff-panel-body-with-tree { display: flex; grid-template-columns: none; } } .untangled-diff-file { overflow: hidden; border: 1px solid rgb(229 231 235); border-radius: 0.25rem; background: rgb(255 255 255); } .untangled-diff-view-commit .untangled-diff-file { scroll-margin-top: 4rem; overflow: visible; } .untangled-diff-file-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.625rem 0.875rem; cursor: pointer; background: rgb(255 255 255); border-bottom: 1px solid rgb(229 231 235); list-style: none; } .untangled-diff-view-commit .untangled-diff-file-header { position: sticky; top: 3rem; z-index: 20; } .untangled-diff-file-header::-webkit-details-marker { display: none; } .untangled-diff-chevron { transition: transform 120ms ease; } .untangled-diff-file[open] .untangled-diff-chevron { transform: rotate(90deg); } .untangled-diff-file:not([open]) .untangled-diff-file-header { border-bottom: 0; } .untangled-diff-show-more { min-width: 0; } .untangled-diff-show-more-summary { display: flex; list-style: none; cursor: pointer; user-select: none; align-items: center; gap: 0.5rem; padding: 0.5rem 0.25rem; font-size: 0.875rem; color: rgb(55 65 81); } .untangled-diff-show-more-summary::-webkit-details-marker { display: none; } .untangled-diff-show-more-closed, .untangled-diff-show-more-open { align-items: center; gap: 0.5rem; } .untangled-diff-show-more-closed { display: inline-flex; } .untangled-diff-show-more-open { display: none; } .untangled-diff-show-more[open] > .untangled-diff-show-more-summary .untangled-diff-show-more-closed { display: none; } .untangled-diff-show-more[open] > .untangled-diff-show-more-summary .untangled-diff-show-more-open { display: inline-flex; } .untangled-diff-show-more[open] > .untangled-diff-show-more-summary .untangled-diff-chevron { transform: rotate(90deg); } .untangled-diff-show-more-files { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.5rem; } @media (prefers-color-scheme: dark) { .untangled-diff-panel { border-color: rgb(55 65 81); background: rgb(31 41 55); } .untangled-diff-toolbar { border-bottom-color: rgb(55 65 81); background: rgb(55 65 81 / 0.5); } .untangled-diff-view-commit .untangled-diff-toolbar { background: rgb(17 24 39); } .untangled-diff-view-commit .untangled-diff-panel { border: 0; background: transparent; } .untangled-diff-view-commit .untangled-pr-file-tree { border-top-color: rgb(55 65 81); } .untangled-diff-tool-button, .untangled-diff-mode-button, .untangled-diff-sidebar-toggle { border-color: rgb(55 65 81); background: rgb(17 24 39 / 0.35); color: rgb(229 231 235); } .untangled-diff-tool-button:hover, .untangled-diff-mode-button:not(:disabled):hover { background: rgb(55 65 81 / 0.65); } .untangled-diff-mode-group, .untangled-diff-mode-group .untangled-diff-mode-button + .untangled-diff-mode-button { border-color: rgb(55 65 81); } .untangled-diff-mode-button-active { background: rgb(55 65 81); } .untangled-diff-file { border-color: rgb(55 65 81); background: rgb(31 41 55); } .untangled-diff-file-header { border-bottom-color: rgb(55 65 81); background: rgb(17 24 39 / 0.35); } .untangled-diff-view-commit .untangled-diff-file-header { background: rgb(31 41 55); } .untangled-diff-show-more-summary { color: rgb(209 213 219); } } .z-60 { z-index: 60; } .untangled-footer-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.35rem 1.25rem; } @media (prefers-color-scheme: dark) { .untangled-topic { background: rgb(55 65 81); } .untangled-repo-action { border-color: rgb(55 65 81); background: rgb(31 41 55); } .untangled-repo-action::before { box-shadow: inset 0 -2px 0 0 #111827; } .untangled-repo-action-count { background: rgb(17 24 39); } .untangled-repo-action-main:hover, .untangled-repo-action-count:hover { background: rgb(55 65 81); } .untangled-repo-action-count { border-left-color: rgb(55 65 81); } .group:hover .untangled-repo-tab-idle { background: rgb(55 65 81 / 0.25); } .untangled-button:not(.btn-create):hover { background: rgb(55 65 81 / 0.4); } .untangled-clone-popover { border-color: rgb(55 65 81); background: rgb(31 41 55); color: rgb(243 244 246); } .untangled-clone-url-row { border-color: rgb(75 85 99); } .untangled-clone-url-text { background: rgb(55 65 81); color: rgb(243 244 246); } .untangled-clone-copy { border-left-color: rgb(75 85 99); background: rgb(31 41 55); color: rgb(156 163 175); } .untangled-clone-copy:hover { color: rgb(229 231 235); } .untangled-blob-card { background: rgb(31 41 55); } .untangled-topbar-search-box, .untangled-search-page-input, .untangled-search-page-submit, .untangled-repo-filter-input, .untangled-repo-filter-submit { border-color: rgb(55 65 81); background: rgb(17 24 39); } .untangled-topbar-search-box:focus-within { outline-color: rgb(75 85 99); } .untangled-topbar-search-input, .untangled-search-page-input, .untangled-repo-filter-input { color: rgb(229 231 235); } .untangled-topbar-search-input::placeholder, .untangled-search-page-input::placeholder, .untangled-repo-filter-input::placeholder { color: rgb(75 85 99); } .untangled-topbar-search-kbd { border-color: rgb(75 85 99); color: rgb(107 114 128); } .untangled-search-page-input:focus, .untangled-repo-filter-input:focus { border-color: rgb(75 85 99); box-shadow: 0 0 0 1px rgb(75 85 99); } .untangled-search-page-submit, .untangled-repo-filter-reset, .untangled-repo-filter-submit { color: rgb(156 163 175); } .untangled-search-page-submit:hover, .untangled-repo-filter-reset:hover, .untangled-repo-filter-submit:hover { color: rgb(229 231 235); } .untangled-blob-commit-panel { border-bottom-color: rgb(55 65 81); } .untangled-blob-commit-link { background: rgb(17 24 39); color: rgb(209 213 219); } } @media (max-width: 767px) { .untangled-repo-overview { grid-template-columns: minmax(0, 1fr); } .untangled-filter-grid { grid-template-columns: auto minmax(0, 1fr) auto; } .untangled-toggle-group { grid-row: 2; grid-column: 1; } .untangled-repo-filter-search { grid-row: 1; grid-column: 1 / span 3; } .untangled-filter-grid > a { grid-row: 2; grid-column: 3; } .untangled-file-tree-pane { border-right: 0; } } /* Lower grid section header background overrides */ /* Lower grid section header background overrides */ .untangled-home-below .untangled-home-section-header { background: rgb(248 250 252) !important; z-index: 15 !important; } @media (prefers-color-scheme: dark) { .untangled-home-below .untangled-home-section-header { background: rgb(15 23 42) !important; z-index: 15 !important; } } /* Homepage themed announcement cards */ .untangled-home-promo-card-indigo { border: 1px solid rgb(224 231 255); background: linear-gradient(to bottom, #ffffff, rgb(240 244 255)); color: rgb(67 56 202); } .untangled-home-promo-card-indigo h4 { color: rgb(55 48 163); } .untangled-home-promo-card-indigo a { color: rgb(67 56 202); } .untangled-home-promo-card-indigo a:hover { color: rgb(49 46 129); } .untangled-home-promo-card-green { border: 1px solid rgb(209 250 229); background: linear-gradient(to bottom, #ffffff, rgb(236 253 245)); color: rgb(4 120 87); } .untangled-home-promo-card-green h4 { color: rgb(6 95 70); } .untangled-home-promo-card-green a { color: rgb(4 120 87); } .untangled-home-promo-card-green a:hover { color: rgb(6 78 59); } .untangled-home-promo-card-purple { border: 1px solid rgb(243 232 255); background: linear-gradient(to bottom, #ffffff, rgb(250 245 255)); color: rgb(126 34 206); } .untangled-home-promo-card-purple h4 { color: rgb(107 33 168); } .untangled-home-promo-card-purple a { color: rgb(126 34 206); } .untangled-home-promo-card-purple a:hover { color: rgb(88 28 135); } .untangled-home-promo-card-blue { border: 1px solid rgb(219 234 254); background: linear-gradient(to bottom, #ffffff, rgb(239 246 255)); color: rgb(37 99 235); } .untangled-home-promo-card-blue h4 { color: rgb(26 86 219); } .untangled-home-promo-card-blue a { color: rgb(37 99 235); } .untangled-home-promo-card-blue a:hover { color: rgb(30 58 138); } .untangled-home-promo-card-amber { border: 1px solid rgb(254 243 199); background: linear-gradient(to bottom, #ffffff, rgb(254 252 232)); color: rgb(217 119 6); } .untangled-home-promo-card-amber h4 { color: rgb(180 83 9); } .untangled-home-promo-card-amber a { color: rgb(217 119 6); } .untangled-home-promo-card-amber a:hover { color: rgb(120 53 4); } .untangled-home-promo-card-rose { border: 1px solid rgb(254 226 226); background: linear-gradient(to bottom, #ffffff, rgb(255 241 241)); color: rgb(225 29 72); } .untangled-home-promo-card-rose h4 { color: rgb(190 24 74); } .untangled-home-promo-card-rose a { color: rgb(225 29 72); } .untangled-home-promo-card-rose a:hover { color: rgb(159 18 57); } .untangled-home-promo-card-orange { border: 1px solid rgb(254 237 222); background: linear-gradient(to bottom, #ffffff, rgb(255 247 237)); color: rgb(234 88 12); } .untangled-home-promo-card-orange h4 { color: rgb(194 65 12); } .untangled-home-promo-card-orange a { color: rgb(234 88 12); } .untangled-home-promo-card-orange a:hover { color: rgb(154 52 18); } .untangled-home-promo-card-teal { border: 1px solid rgb(204 251 241); background: linear-gradient(to bottom, #ffffff, rgb(240 253 250)); color: rgb(13 148 136); } .untangled-home-promo-card-teal h4 { color: rgb(15 118 110); } .untangled-home-promo-card-teal a { color: rgb(13 148 136); } .untangled-home-promo-card-teal a:hover { color: rgb(17 94 89); } .untangled-home-promo-card-sky { border: 1px solid rgb(224 242 254); background: linear-gradient(to bottom, #ffffff, rgb(240 249 255)); color: rgb(2 132 199); } .untangled-home-promo-card-sky h4 { color: rgb(3 105 161); } .untangled-home-promo-card-sky a { color: rgb(2 132 199); } .untangled-home-promo-card-sky a:hover { color: rgb(7 89 133); } .untangled-home-promo-card-pink { border: 1px solid rgb(252 231 243); background: linear-gradient(to bottom, #ffffff, rgb(253 242 248)); color: rgb(219 39 119); } .untangled-home-promo-card-pink h4 { color: rgb(190 24 93); } .untangled-home-promo-card-pink a { color: rgb(219 39 119); } .untangled-home-promo-card-pink a:hover { color: rgb(157 23 77); } /* Dark mode overrides */ @media (prefers-color-scheme: dark) { .untangled-home-promo-card-indigo { border-color: rgb(67 56 202 / 0.4); background: linear-gradient(to bottom, rgb(30 27 75 / 0.3), rgb(30 27 75 / 0.5)); color: rgb(165 180 252); } .untangled-home-promo-card-indigo h4 { color: rgb(199 210 254); } .untangled-home-promo-card-indigo a { color: rgb(165 180 252); } .untangled-home-promo-card-green { border-color: rgb(6 95 70 / 0.4); background: linear-gradient(to bottom, rgb(6 78 59 / 0.2), rgb(6 78 59 / 0.4)); color: rgb(110 231 183); } .untangled-home-promo-card-green h4 { color: rgb(167 243 208); } .untangled-home-promo-card-green a { color: rgb(110 231 183); } .untangled-home-promo-card-purple { border-color: rgb(126 34 206 / 0.4); background: linear-gradient(to bottom, rgb(88 28 135 / 0.2), rgb(88 28 135 / 0.4)); color: rgb(216 180 254); } .untangled-home-promo-card-purple h4 { color: rgb(233 213 255); } .untangled-home-promo-card-purple a { color: rgb(216 180 254); } .untangled-home-promo-card-blue { border-color: rgb(37 99 235 / 0.4); background: linear-gradient(to bottom, rgb(30 58 138 / 0.2), rgb(30 58 138 / 0.4)); color: rgb(147 197 253); } .untangled-home-promo-card-blue h4 { color: rgb(191 219 254); } .untangled-home-promo-card-blue a { color: rgb(147 197 253); } .untangled-home-promo-card-amber { border-color: rgb(217 119 6 / 0.4); background: linear-gradient(to bottom, rgb(120 53 4 / 0.2), rgb(120 53 4 / 0.4)); color: rgb(253 230 138); } .untangled-home-promo-card-amber h4 { color: rgb(254 243 199); } .untangled-home-promo-card-amber a { color: rgb(253 230 138); } .untangled-home-promo-card-rose { border-color: rgb(225 29 72 / 0.4); background: linear-gradient(to bottom, rgb(136 19 55 / 0.2), rgb(136 19 55 / 0.4)); color: rgb(244 63 94); } .untangled-home-promo-card-rose h4 { color: rgb(251 113 133); } .untangled-home-promo-card-rose a { color: rgb(244 63 94); } .untangled-home-promo-card-orange { border-color: rgb(234 88 12 / 0.4); background: linear-gradient(to bottom, rgb(124 45 18 / 0.2), rgb(124 45 18 / 0.4)); color: rgb(251 146 60); } .untangled-home-promo-card-orange h4 { color: rgb(253 186 116); } .untangled-home-promo-card-orange a { color: rgb(251 146 60); } .untangled-home-promo-card-teal { border-color: rgb(13 148 136 / 0.4); background: linear-gradient(to bottom, rgb(17 94 89 / 0.2), rgb(17 94 89 / 0.4)); color: rgb(45 212 191); } .untangled-home-promo-card-teal h4 { color: rgb(94 234 212); } .untangled-home-promo-card-teal a { color: rgb(45 212 191); } .untangled-home-promo-card-sky { border-color: rgb(2 132 199 / 0.4); background: linear-gradient(to bottom, rgb(7 89 133 / 0.2), rgb(7 89 133 / 0.4)); color: rgb(56 189 248); } .untangled-home-promo-card-sky h4 { color: rgb(125 211 252); } .untangled-home-promo-card-sky a { color: rgb(56 189 248); } .untangled-home-promo-card-pink { border-color: rgb(219 39 119 / 0.4); background: linear-gradient(to bottom, rgb(157 23 77 / 0.2), rgb(157 23 77 / 0.4)); color: rgb(244 114 182); } .untangled-home-promo-card-pink h4 { color: rgb(247 178 208); } .untangled-home-promo-card-pink a { color: rgb(244 114 182); } } .untangled-vouch-label { display: grid; grid-template-columns: auto 1fr auto; } .untangled-topbar-menu { position: relative; } .untangled-topbar-menu-summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 0.5rem; } .untangled-topbar-menu-summary::-webkit-details-marker { display: none; } .untangled-topbar-menu-dropdown { position: absolute; right: 0; margin-top: 0.5rem; border-radius: 0.25rem; background-color: rgb(255 255 255); border: 1px solid rgb(229 231 235); box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); z-index: 50; font-size: 0.875rem; width: 14rem; overflow: hidden; } @media (prefers-color-scheme: dark) { .untangled-topbar-menu-dropdown { background-color: rgb(31 41 55); border-color: rgb(55 65 81); } } .untangled-topbar-menu-item { display: flex; width: 100%; align-items: center; gap: 0.5rem; padding: 0.55rem 0.7rem; text-align: left; text-decoration: none; color: inherit; transition: background-color 150ms; border: 0; background: transparent; cursor: pointer; } .untangled-topbar-menu-item:hover { background-color: rgb(243 244 246); text-decoration: none; } @media (prefers-color-scheme: dark) { .untangled-topbar-menu-item:hover { background-color: rgb(55 65 81 / 0.5); } } .untangled-topbar-menu-item-danger { color: rgb(239 68 68); } .untangled-topbar-menu-item-danger:hover { background-color: rgb(254 242 242); } @media (prefers-color-scheme: dark) { .untangled-topbar-menu-item-danger:hover { background-color: rgb(153 27 27 / 0.2); } } .untangled-topbar-menu-add-account-icon { display: flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 9999px; background-color: rgb(229 231 235); color: rgb(55 65 81); } @media (prefers-color-scheme: dark) { .untangled-topbar-menu-add-account-icon { background-color: rgb(75 85 99); color: rgb(229 231 235); } } .untangled-topbar-menu-item-separator { border-top: 1px solid rgb(229 231 235); } @media (prefers-color-scheme: dark) { .untangled-topbar-menu-item-separator { border-color: rgb(55 65 81); } } /* Override btn-flat styles to ensure correct transparency and hover background colors */ .btn-flat { background-color: transparent !important; border: 1px solid transparent !important; border-radius: 0.25rem !important; transition: background-color 150ms ease-in-out, color 150ms ease-in-out !important; } .btn-flat:hover { background-color: rgb(229 231 235 / 0.5) !important; /* bg-gray-200/50 */ } @media (prefers-color-scheme: dark) { .btn-flat { background-color: transparent !important; border-color: transparent !important; } .btn-flat:hover { background-color: rgb(55 65 81 / 0.5) !important; /* bg-gray-700/50 */ } } .untangled-comment-highlight { position: relative; background-color: rgb(254 240 138 / 0.15) !important; border-radius: 0; } .untangled-comment-highlight::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 3px; background-color: #eab308; border-top-left-radius: 0.25rem; border-bottom-left-radius: 0.25rem; z-index: 1; } /* Align solid bar with the vertical replies thread line */ .-ml-4.untangled-comment-highlight::before, .-ml-4 > .untangled-comment-highlight::before, .untangled-thread-reply.untangled-comment-highlight::before { left: calc(1rem - 2px); border-radius: 0; } .-ml-4.untangled-comment-highlight, .-ml-4 > .untangled-comment-highlight, .untangled-thread-reply.untangled-comment-highlight { background-color: transparent !important; background-image: linear-gradient(to right, transparent calc(1rem - 2px), rgb(254 240 138 / 0.15) calc(1rem - 2px)) !important; } @media (prefers-color-scheme: dark) { .untangled-comment-highlight { background-color: rgb(161 98 7 / 0.1) !important; } .untangled-comment-highlight::before { background-color: #ca8a04; } .-ml-4.untangled-comment-highlight, .-ml-4 > .untangled-comment-highlight, .untangled-thread-reply.untangled-comment-highlight { background-color: transparent !important; background-image: linear-gradient(to right, transparent calc(1rem - 2px), rgb(161 98 7 / 0.1) calc(1rem - 2px)) !important; } } /* Timeline Step styling */ .untangled-timeline-step { position: relative; padding-left: 2.25rem; } .untangled-timeline-step::before { content: ''; position: absolute; left: 12px; width: 1px; background-color: #e5e7eb; /* gray-200 */ } @media (prefers-color-scheme: dark) { .untangled-timeline-step::before { background-color: #374151; /* gray-700 */ } } .untangled-timeline-step-1::before { top: 16px; bottom: 0; } .untangled-timeline-step-2::before { top: 0; height: 16px; } .untangled-timeline-circle { position: absolute; left: 0; top: 4px; width: 25px; height: 25px; display: flex; align-items: center; justify-content: center; } .untangled-timeline-circle-inner { width: 25px; height: 25px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; font-size: 0.875rem; /* text-sm */ font-weight: 500; /* font-medium */ background-color: #e5e7eb; /* bg-gray-200 */ color: #1f2937; /* text-gray-800 */ } @media (prefers-color-scheme: dark) { .untangled-timeline-circle-inner { background-color: #4b5563; /* bg-gray-600 */ color: #f3f4f6; /* text-gray-100 */ } } .untangled-fork-step .untangled-timeline-circle { top: 4px; } .untangled-fork-step-title { min-height: 25px; display: flex; align-items: center; } .untangled-repo-form-submit { margin-top: 1rem; } /* Checkbox specific overrides to prevent extra layout padding */ .untangled-checkbox { padding: 0 !important; margin: 0 !important; }