@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-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-section-header{ 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-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-wide-section{ display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; } .untangled-home-announcements-grid{ display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 768px) and (max-width: 1023px) { .untangled-home-announcements-grid{ grid-template-columns: repeat(2, 1fr); } } /* 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-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-recent-strip, .untangled-home-sample-list{ grid-template-columns: minmax(0, 1fr); } } @media (max-width: 767px) { .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; } } .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; } .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; } } /* 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; } .untangled-watched-page{ display: flex; min-width: 0; flex-direction: column; gap: 1rem; } .untangled-watched-page-header{ display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 0.5rem 0.25rem; } .untangled-watched-page-header h1{ display: flex; align-items: center; gap: 0.75rem; margin: 0; font-size: 1.5rem; font-weight: 750; } .untangled-watched-list:active{ cursor: grabbing; } .untangled-watched-list:focus-visible{ outline: 2px solid rgb(96 165 250); outline-offset: 0.25rem; } .untangled-watched-repo{ min-width: 0; flex: 0 0 min(24rem, calc(100% - 3rem)); border: 1px solid rgb(229 231 235); border-radius: 0.125rem; background: rgb(255 255 255); overflow: visible; scroll-snap-align: start; } .untangled-watched-repo-header{ display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 0.75rem; } .untangled-watched-repo-title{ font-size: 1rem; font-weight: 700; color: rgb(17 24 39); } .untangled-watched-repo-description{ max-width: 65ch; margin: 0.35rem 0 0 1.5rem; color: rgb(107 114 128); font-size: 0.8125rem; line-height: 1.4; } .untangled-watched-quick-links{ display: flex; align-items: center; gap: 0.125rem; color: rgb(107 114 128); } .untangled-watched-quick-links a{ display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border: 1px solid transparent; border-radius: 0.125rem; } .untangled-watched-quick-links a:hover, .untangled-watched-quick-links a:focus-visible{ border-color: rgb(209 213 219); background: rgb(249 250 251); color: rgb(37 99 235); } .untangled-watched-stats{ display: flex; flex-wrap: nowrap; align-items: center; gap: 0.75rem; padding: 0.1rem 0.75rem 0.75rem; color: rgb(75 85 99); font-size: 0.8125rem; white-space: nowrap; } .untangled-watch-stat{ display: inline-flex; align-items: center; gap: 0.4rem; } .untangled-watch-stat strong{ color: rgb(17 24 39); } .untangled-watch-stat-button{ cursor: pointer; list-style: none; } .untangled-watch-stat-button::-webkit-details-marker{ display: none; } .untangled-watch-stat-button:hover, .untangled-watch-stat-button:focus-visible{ color: rgb(37 99 235); } .untangled-watch-commit-details{ position: relative; } .untangled-watch-commit-details:hover > .untangled-watch-commit-popover{ display: block; } .untangled-watch-commit-popover{ position: absolute; top: calc(100% + 0.5rem); right: 0; z-index: 20; width: min(32rem, calc(100vw - 2rem)); border: 1px solid rgb(209 213 219); border-radius: 0.125rem; background: rgb(255 255 255); padding: 0.5rem; box-shadow: 0 8px 24px rgb(15 23 42 / 0.12); } .untangled-watch-popover-heading{ padding: 0.35rem 0.5rem 0.5rem; color: rgb(75 85 99); font-size: 0.75rem; font-weight: 700; text-transform: lowercase; } .untangled-watch-commit-row, .untangled-watch-work-link{ display: flex; min-width: 0; align-items: center; gap: 0.5rem; padding: 0.5rem; border-radius: 0.125rem; font-size: 0.8125rem; } .untangled-watch-commit-row:hover, .untangled-watch-commit-row:focus-visible, .untangled-watch-work-link:hover, .untangled-watch-work-link:focus-visible{ background: rgb(249 250 251); text-decoration: none; } .untangled-watch-commit-hash{ font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: rgb(37 99 235); } .untangled-watched-work-grid{ display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; padding: 0.875rem 0.75rem 1rem; } .untangled-watched-work-grid section{ min-width: 0; } .untangled-watched-work-grid h2{ margin: 0 0 0.5rem; color: rgb(75 85 99); font-size: 0.75rem; font-weight: 700; text-transform: lowercase; } .untangled-watch-work-list{ display: flex; flex-direction: column; gap: 0.125rem; } .untangled-watch-muted, .untangled-watch-loading{ color: rgb(107 114 128); font-size: 0.8125rem; } .untangled-watch-loading{ display: flex; align-items: center; gap: 0.5rem; padding: 1rem 0.25rem; } .untangled-watch-empty{ border: 1px dashed rgb(209 213 219); padding: 2rem 1rem; text-align: center; } .untangled-watch-empty h2{ margin: 0; font-size: 1rem; font-weight: 700; } .untangled-watch-empty p{ max-width: 40ch; margin: 0.5rem auto 0; color: rgb(107 114 128); font-size: 0.875rem; } @media (prefers-color-scheme: dark) { .untangled-watched-repo, .untangled-watched-stats{ border-color: rgb(55 65 81); } .untangled-watched-repo, .untangled-watch-commit-popover{ background: rgb(31 41 55); } .untangled-watched-repo-title, .untangled-watch-stat strong{ color: rgb(243 244 246); } .untangled-watched-quick-links a:hover, .untangled-watched-quick-links a:focus-visible, .untangled-watch-commit-row:hover, .untangled-watch-commit-row:focus-visible, .untangled-watch-work-link:hover, .untangled-watch-work-link:focus-visible{ border-color: rgb(75 85 99); background: rgb(55 65 81); } .untangled-watch-empty{ border-color: rgb(75 85 99); } } @media (max-width: 640px) { .untangled-watched-page-header, .untangled-watched-repo-header{ flex-direction: column; } .untangled-watched-quick-links{ align-self: flex-end; } .untangled-watched-work-grid{ grid-template-columns: minmax(0, 1fr); } .untangled-watched-repo{ flex-basis: calc(100% - 2.5rem); } } /* Watched repositories use one quiet, expandable rail rather than separate cards. */ .untangled-watched-list{ display: flex; min-width: 0; flex-direction: column; gap: 0; overflow: visible; padding: 0; border-top: 1px solid rgb(229 231 235); border-bottom: 1px solid rgb(229 231 235); cursor: default; } .untangled-watched-list:active{ cursor: default; } .untangled-watched-list-heading, .untangled-watched-repo-summary{ display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 1.25rem; align-items: center; } .untangled-watched-skeleton-row{ display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 1.25rem; align-items: center; min-height: 4.5rem; padding: 1rem 0.25rem; border-bottom: 1px solid rgb(229 231 235); } .untangled-watched-skeleton-repo, .untangled-watched-skeleton-latest{ display: flex; min-width: 0; flex-direction: column; gap: 0.5rem; } .untangled-watched-list-heading > *, .untangled-watched-repo-summary > *{ min-width: 0; } .untangled-watched-list-heading{ padding: 0.65rem 0.25rem 0.4rem; color: rgb(107 114 128); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .untangled-watched-repo{ width: 100%; flex: none; border: 0; border-bottom: 1px solid rgb(229 231 235); border-radius: 0; background: transparent; overflow: visible; } .untangled-watched-repo:last-child{ border-bottom: 0; } .untangled-watched-repo-summary{ width: 100%; min-height: 3.75rem; border: 0; padding: 0.55rem 0.25rem; background: transparent; color: inherit; text-align: left; } .untangled-watched-repo-identity{ display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: 0.2rem; border: 0; background: transparent; padding: 0; color: inherit; text-align: left; } .untangled-watched-repo-identity:hover .untangled-watched-repo-title, .untangled-watched-repo-identity:focus-visible .untangled-watched-repo-title{ color: rgb(37 99 235); } .untangled-watched-repo-title{ display: flex; min-width: 0; align-items: center; gap: 0.5rem; overflow: hidden; font-size: 0.9375rem; font-weight: 700; color: rgb(17 24 39); } .untangled-watched-repo-title > span{ min-width: 0; max-width: 26ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .untangled-watched-repo-description{ display: block; max-width: 26ch; margin: 0 0 0 1.5rem; overflow: hidden; color: rgb(107 114 128); font-size: 0.75rem; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; } .untangled-watched-work-summary, .untangled-watched-activity-summary{ display: flex; min-width: 0; align-items: center; gap: 0.75rem; color: rgb(75 85 99); font-size: 0.8125rem; white-space: nowrap; } .untangled-watched-work-summary > span{ display: inline-flex; align-items: center; gap: 0.35rem; } .untangled-watched-activity-summary{ gap: 0.5rem; } .untangled-watched-latest-commit{ min-width: 0; overflow: hidden; text-overflow: ellipsis; color: rgb(55 65 81); } .untangled-watched-latest-time{ flex: none; margin-left: auto; padding-left: 0.75rem; color: rgb(107 114 128); font-size: 0.75rem; text-align: right; } .untangled-watched-expand{ display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border: 1px solid transparent; border-radius: 0.125rem; background: transparent; color: rgb(107 114 128); } .untangled-watched-expand:hover, .untangled-watched-expand:focus-visible{ border-color: rgb(209 213 219); background: rgb(249 250 251); color: rgb(37 99 235); } .untangled-watched-repo-summary:has(+ .untangled-watched-repo-detail) .untangled-watched-expand-icon{ transform: rotate(180deg); } .untangled-watched-repo-detail{ padding: 0 0.25rem 0.7rem; } .untangled-watched-detail-header{ display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.15rem 0 0.35rem; color: rgb(107 114 128); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .untangled-watched-detail-header .untangled-watched-quick-links{ letter-spacing: normal; text-transform: none; } .untangled-watched-work-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; padding: 0; } .untangled-watched-work-grid h2{ margin-bottom: 0.2rem; font-size: 0.6875rem; letter-spacing: 0.04em; } .untangled-watch-work-list{ gap: 0.05rem; } .untangled-watch-work-link{ padding: 0.3rem 0.25rem; } .untangled-watched-pagination{ display: flex; align-items: center; justify-content: flex-end; gap: 0.45rem; margin-top: 0.6rem; color: rgb(107 114 128); font-size: 0.75rem; } .untangled-watched-page-button{ display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border: 1px solid rgb(209 213 219); border-radius: 0.125rem; background: transparent; color: rgb(75 85 99); } .untangled-watched-page-button:hover:not(:disabled), .untangled-watched-page-button:focus-visible:not(:disabled){ border-color: rgb(37 99 235); color: rgb(37 99 235); } .untangled-watched-page-button:disabled{ opacity: 0.4; cursor: not-allowed; } @media (prefers-color-scheme: dark) { .untangled-watched-list{ border-color: rgb(55 65 81); } .untangled-watched-list-heading, .untangled-watched-detail-header, .untangled-watched-repo-description, .untangled-watched-latest-time, .untangled-watched-work-summary, .untangled-watched-activity-summary{ color: rgb(156 163 175); } .untangled-watched-repo{ border-color: rgb(55 65 81); } .untangled-watched-repo-title, .untangled-watched-latest-commit{ color: rgb(243 244 246); } .untangled-watched-repo-identity:hover .untangled-watched-repo-title, .untangled-watched-repo-identity:focus-visible .untangled-watched-repo-title{ color: rgb(147 197 253); } .untangled-watched-expand:hover, .untangled-watched-expand:focus-visible{ border-color: rgb(75 85 99); background: rgb(55 65 81); } .untangled-watched-page-button{ border-color: rgb(75 85 99); color: rgb(209 213 219); } .untangled-watched-page-button:hover:not(:disabled), .untangled-watched-page-button:focus-visible:not(:disabled){ border-color: rgb(147 197 253); color: rgb(147 197 253); } } @media (max-width: 767px) { .untangled-watched-list-heading{ display: none; } .untangled-watched-repo-summary{ grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem 0.75rem; padding: 0.75rem 0.25rem; } .untangled-watched-repo-identity{ grid-column: 1; grid-row: 1; } .untangled-watched-work-summary{ grid-column: 1; grid-row: 2; } .untangled-watched-activity-summary{ grid-column: 1 / -1; grid-row: 3; } .untangled-watched-expand{ grid-column: 2; grid-row: 1 / span 2; } .untangled-watched-repo-detail{ padding-inline: 0.25rem; } .untangled-watched-work-grid{ grid-template-columns: minmax(0, 1fr); } } /* --------------------------------------------------------------------------- Home page layout Three zones: 1. watched repos top left 2. recent / issues top right, beside watched repos 3. announcements + underneath, announcements left and timeline filling timeline the remaining width The home page breaks out of the app shell and uses a 4rem outer gutter, so the left edge of zone 1/3 and the right edge of zone 2 are symmetric. Zones 1+2 live in their own row; zone 3 is a sibling, so a long discovery rail can never push announcements and the timeline down. --------------------------------------------------------------------------- */ .untangled-home-page { display: flex; min-width: 0; flex-direction: column; gap: 2rem; box-sizing: border-box; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding-inline: 1rem; } .untangled-home-workspace { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; align-items: start; min-width: 0; } .untangled-home-lower-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; align-items: start; min-width: 0; } .untangled-home-feed, .untangled-home-promos-column, .untangled-home-lower-left, .untangled-home-lower-right { display: flex; min-width: 0; flex-direction: column; gap: 0.75rem; } .untangled-home-lower-right { gap: 1.5rem; } @media (min-width: 768px) { .untangled-home-page { padding-inline: 2rem; } } @media (min-width: 1024px) { .untangled-home-page { padding-inline: 4rem; } /* zone 1 (watched repos) and zone 3 (announcements + timeline) stack in the left column; zone 2 (the rail) occupies the right column across both, so its height never pushes zone 3 down. */ .untangled-home-workspace { grid-template-columns: minmax(0, 1fr) 22rem; column-gap: 2rem; row-gap: 2rem; } .untangled-home-feed { grid-column: 1; grid-row: 1; } /* The rail is layered into its reserved column so its height never feeds back into the row that watched repos sits in. The column is still reserved by the grid, so zone 3 never runs underneath it. */ .untangled-home-workspace { position: relative; } .untangled-home-lower-right { position: absolute; top: 0; right: 0; width: 22rem; } .untangled-home-lower-grid { grid-column: 1; grid-row: 2; grid-template-columns: 18rem minmax(0, 1fr); gap: 2rem; } /* below 1024 the rail returns to normal flow */ .untangled-home-workspace > .untangled-home-lower-right { margin: 0; } } @media (min-width: 1280px) { .untangled-home-lower-grid { grid-template-columns: 22rem minmax(0, 1fr); gap: 2.5rem; } } @media (max-width: 1023px) { .untangled-home-workspace { display: flex; flex-direction: column; gap: 2rem; } .untangled-home-feed { order: 1; } .untangled-home-lower-grid { order: 2; } .untangled-home-lower-right { order: 3; } } /* Calmer watched-repos rhythm: more air between rows and softer rules. */ .untangled-watched-list { border-top-color: rgb(148 163 184 / 0.16); border-bottom-color: rgb(148 163 184 / 0.16); } .untangled-watched-repo { border-bottom-color: rgb(148 163 184 / 0.12); } .untangled-watched-repo-summary { min-height: 4.5rem; padding-block: 1rem; } .untangled-watched-list-heading { padding-bottom: 0.7rem; letter-spacing: 0.06em; } .untangled-watched-repo-detail { padding-block: 0.5rem 1rem; }