diff --git a/src/index.css b/src/index.css index 3498edd..c073a88 100644 --- a/src/index.css +++ b/src/index.css @@ -20,7 +20,7 @@ } @media (prefers-color-scheme: dark) { - :root { + :root{ --untangled-code-fg: #cad3f5; --untangled-code-muted: #8087a2; --untangled-code-keyword: #c6a0f6; @@ -37,7 +37,7 @@ } } -.untangled-new-pr-step { +.untangled-new-pr-step{ position: relative; display: flex; min-width: 0; @@ -45,14 +45,14 @@ gap: 0.75rem; } -.untangled-new-pr-heading { +.untangled-new-pr-heading{ position: relative; display: flex; align-items: center; gap: 1rem; } -.untangled-new-pr-step-line { +.untangled-new-pr-step-line{ position: absolute; left: 0.75rem; width: 1px; @@ -60,54 +60,54 @@ background: rgb(229 231 235); } -.untangled-new-pr-step-line-after { +.untangled-new-pr-step-line-after{ top: 0.75rem; bottom: -1.5rem; } -.untangled-new-pr-step-line-before { +.untangled-new-pr-step-line-before{ top: -1.5rem; } -.untangled-new-pr-step-line-through { +.untangled-new-pr-step-line-through{ bottom: -1.5rem; } -.untangled-new-pr-step-line-fade { +.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 { +.untangled-new-pr-step-line-before.untangled-new-pr-step-line-fade{ bottom: auto; } -.untangled-new-pr-diff { +.untangled-new-pr-diff{ min-width: 0; } @media (prefers-color-scheme: dark) { - .untangled-new-pr-step-line { + .untangled-new-pr-step-line{ background: rgb(55 65 81); } } -.untangled-pr-detail { +.untangled-pr-detail{ display: flex; min-width: 0; flex-direction: column; gap: 2rem; } -.untangled-pr-header-grid { +.untangled-pr-header-grid{ display: grid; grid-template-columns: minmax(0, 1fr) 15rem; gap: 1rem; align-items: start; } -.untangled-pr-summary-card { +.untangled-pr-summary-card{ min-width: 0; border-radius: 0.25rem; background: rgb(255 255 255); @@ -116,7 +116,7 @@ box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); } -.untangled-pr-meta { +.untangled-pr-meta{ display: flex; min-width: 0; flex-direction: column; @@ -125,7 +125,7 @@ color: rgb(107 114 128); } -.untangled-pr-meta-section h2 { +.untangled-pr-meta-section h2{ margin: 0 0 0.25rem; font-size: 0.75rem; font-weight: 700; @@ -133,7 +133,7 @@ color: rgb(75 85 99); } -.untangled-pr-meta-section h2 span { +.untangled-pr-meta-section h2 span{ display: inline-flex; min-width: 1.25rem; justify-content: center; @@ -143,18 +143,17 @@ font-size: 0.75rem; } -.untangled-pr-meta-section p { +.untangled-pr-meta-section p{ margin: 0; font-size: 0.875rem; } -.untangled-pr-meta-section code { +.untangled-pr-meta-section code{ font-size: 0.8125rem; color: rgb(17 24 39); } -.untangled-pr-meta-action, -.untangled-pr-icon-button { +.untangled-pr-meta-action, .untangled-pr-icon-button{ display: inline-flex; align-items: center; justify-content: center; @@ -164,24 +163,24 @@ color: rgb(107 114 128); } -.untangled-pr-meta-action { +.untangled-pr-meta-action{ border: 0; padding: 0.125rem; } -.untangled-pr-icon-button { +.untangled-pr-icon-button{ width: 2rem; height: 2rem; } -.untangled-pr-diff-breakout { +.untangled-pr-diff-breakout{ position: relative; left: 50%; width: 100vw; margin-left: -50vw; } -.untangled-pr-diff-toolbar { +.untangled-pr-diff-toolbar{ position: sticky; top: 0; z-index: 30; @@ -193,19 +192,19 @@ background: rgb(241 245 249); } -.untangled-pr-diff-toolbar-sidebar-collapsed { +.untangled-pr-diff-toolbar-sidebar-collapsed{ grid-template-columns: minmax(0, 1fr) 29.5rem; } -.untangled-pr-diff-toolbar-history-collapsed { +.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 { +.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 { +.untangled-pr-diff-toolbar-main{ grid-column: 1 / 3; grid-row: 1; display: flex; @@ -217,31 +216,31 @@ color: rgb(107 114 128); } -.untangled-pr-diff-toolbar-sidebar-collapsed .untangled-pr-diff-toolbar-main { +.untangled-pr-diff-toolbar-sidebar-collapsed .untangled-pr-diff-toolbar-main{ grid-column: 1; } -.untangled-pr-diff-toolbar-actions { +.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 { +.untangled-pr-diff-toolbar-sidebar-collapsed .untangled-pr-diff-toolbar-actions{ grid-column: 1; } -.untangled-pr-diff-toolbar-history { +.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 { +.untangled-pr-diff-toolbar-sidebar-collapsed .untangled-pr-diff-toolbar-history{ grid-column: 2; } -.untangled-pr-sidebar-toggle { +.untangled-pr-sidebar-toggle{ display: inline-flex; min-height: 2.125rem; align-items: center; @@ -255,12 +254,12 @@ color: rgb(31 41 55); } -.untangled-pr-sidebar-toggle { +.untangled-pr-sidebar-toggle{ width: 2.125rem; padding: 0; } -.untangled-diff-stat-pill { +.untangled-diff-stat-pill{ display: inline-flex; align-items: center; overflow: hidden; @@ -270,40 +269,40 @@ line-height: 1; } -.untangled-diff-stat-pill span { +.untangled-diff-stat-pill span{ padding: 0.375rem 0.5rem; } -.untangled-diff-stat-add { +.untangled-diff-stat-add{ background: rgb(220 252 231); color: rgb(21 128 61); } -.untangled-diff-stat-del { +.untangled-diff-stat-del{ background: rgb(254 226 226); color: rgb(185 28 28); } -.untangled-pr-diff-grid { +.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 { +.untangled-pr-diff-grid-sidebar-collapsed{ grid-template-columns: minmax(0, 1fr) 29.5rem; } -.untangled-pr-diff-grid-history-collapsed { +.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 { +.untangled-pr-diff-grid-sidebar-collapsed.untangled-pr-diff-grid-history-collapsed{ grid-template-columns: minmax(0, 1fr); } -.untangled-pr-file-tree { +.untangled-pr-file-tree{ position: sticky; top: 3rem; max-height: calc(100vh - 3rem); @@ -317,24 +316,24 @@ box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); } -.untangled-pr-file-tree-list { +.untangled-pr-file-tree-list{ display: flex; min-width: 0; flex-direction: column; gap: 0.125rem; } -.untangled-pr-file-tree-node { +.untangled-pr-file-tree-node{ min-width: 0; } -.untangled-pr-file-tree-children { +.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 { +.untangled-pr-file-tree-entry{ display: flex; min-width: 0; align-items: center; @@ -350,20 +349,19 @@ text-decoration: none; } -.untangled-pr-file-tree-link:hover, -.untangled-pr-file-tree-entry:hover { +.untangled-pr-file-tree-link:hover, .untangled-pr-file-tree-entry:hover{ background: rgb(243 244 246); text-decoration: none; } -.untangled-pr-diff-files { +.untangled-pr-diff-files{ display: flex; min-width: 0; flex-direction: column; gap: 1rem; } -.untangled-pr-diff-file { +.untangled-pr-diff-file{ scroll-margin-top: 4rem; overflow: visible; border: 1px solid rgb(209 213 219); @@ -371,7 +369,7 @@ background: rgb(255 255 255); } -.untangled-pr-diff-file-header { +.untangled-pr-diff-file-header{ position: sticky; top: 3rem; z-index: 20; @@ -386,15 +384,15 @@ background: rgb(31 41 55); } -.untangled-pr-diff-file-header::-webkit-details-marker { +.untangled-pr-diff-file-header::-webkit-details-marker{ display: none; } -.untangled-pr-diff-file[open] .untangled-pr-diff-chevron { +.untangled-pr-diff-file[open] .untangled-pr-diff-chevron{ transform: rotate(90deg); } -.untangled-pr-diff-ellipsis { +.untangled-pr-diff-ellipsis{ background: rgb(55 65 81); padding: 0.125rem 0; text-align: center; @@ -402,7 +400,7 @@ color: rgb(209 213 219); } -.untangled-pr-history { +.untangled-pr-history{ position: sticky; top: 3rem; max-height: calc(100vh - 3rem); @@ -410,14 +408,14 @@ padding-right: 0.5rem; } -.untangled-pr-history-card { +.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 { +.untangled-pr-history-card > header{ display: flex; align-items: center; justify-content: space-between; @@ -426,20 +424,20 @@ padding: 0.75rem 1rem; } -.untangled-pr-history-card h2 { +.untangled-pr-history-card h2{ margin: 0; font-size: 1rem; font-weight: 500; } -.untangled-pr-history-card header div { +.untangled-pr-history-card header div{ display: flex; gap: 1rem; font-size: 0.875rem; color: rgb(75 85 99); } -.untangled-pr-history-submission { +.untangled-pr-history-submission{ display: flex; width: 100%; gap: 0.75rem; @@ -450,12 +448,11 @@ text-align: left; } -.untangled-pr-history-submission:hover, -.untangled-pr-history-submission-active { +.untangled-pr-history-submission:hover, .untangled-pr-history-submission-active{ background: rgb(239 246 255); } -.untangled-pr-history-event { +.untangled-pr-history-event{ display: flex; align-items: center; gap: 0.5rem; @@ -466,25 +463,25 @@ font-weight: 500; } -.untangled-pr-history-event-merged { +.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 { +.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 { +.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 { +.untangled-pr-history-comment{ display: flex; flex-direction: column; gap: 0.75rem; @@ -493,101 +490,86 @@ } @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 { + .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 { + .untangled-pr-meta, .untangled-pr-meta-section p{ color: rgb(156 163 175); } - .untangled-pr-meta-section h2 { + .untangled-pr-meta-section h2{ color: rgb(209 213 219); } - .untangled-pr-meta-section h2 span { + .untangled-pr-meta-section h2 span{ background: rgb(75 85 99); color: rgb(243 244 246); } - .untangled-pr-meta-section code { + .untangled-pr-meta-section code{ color: rgb(243 244 246); } - .untangled-pr-meta-action, - .untangled-pr-icon-button { + .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 { + .untangled-pr-sidebar-toggle, .untangled-pr-diff-file, .untangled-pr-history-card{ border-color: rgb(55 65 81); } - .untangled-pr-file-tree { + .untangled-pr-file-tree{ border-color: rgb(55 65 81); } - .untangled-diff-stat-add { + .untangled-diff-stat-add{ background: rgb(22 101 52 / 0.5); color: rgb(74 222 128); } - .untangled-diff-stat-del { + .untangled-diff-stat-del{ background: rgb(127 29 29 / 0.5); color: rgb(248 113 113); } - .untangled-pr-file-tree-entry { + .untangled-pr-file-tree-entry{ color: rgb(229 231 235); } - .untangled-pr-file-tree-children { + .untangled-pr-file-tree-children{ border-color: rgb(75 85 99); } - .untangled-pr-file-tree-entry:hover { + .untangled-pr-file-tree-entry:hover{ background: rgb(31 41 55); } - .untangled-pr-history-card > header, - .untangled-pr-history-comment { + .untangled-pr-history-card > header, .untangled-pr-history-comment{ border-color: rgb(55 65 81); } - .untangled-pr-history-card header div { + .untangled-pr-history-card header div{ color: rgb(209 213 219); } - .untangled-pr-diff-toolbar { + .untangled-pr-diff-toolbar{ background: rgb(17 24 39); } - .untangled-pr-history-submission:hover, - .untangled-pr-history-submission-active { + .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 { + .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 { + .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; @@ -595,17 +577,15 @@ position: static; } - .untangled-pr-sidebar-toggle, - .untangled-pr-diff-toolbar-history { + .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 { + .untangled-pr-diff-file-header, .untangled-diff-view-commit .untangled-diff-file-header{ position: static; } - .untangled-pr-file-tree { + .untangled-pr-file-tree{ position: static; max-height: none; display: none; @@ -613,14 +593,14 @@ } @media (min-width: 768px) and (max-width: 1023px) { - .untangled-pr-history { + .untangled-pr-history{ position: static; max-height: none; } } @media (max-width: 767px) { - .untangled-pr-history { + .untangled-pr-history{ position: fixed; top: auto; bottom: 0; @@ -638,39 +618,35 @@ transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); } - .untangled-pr-history.open { + .untangled-pr-history.open{ transform: none; } - .untangled-pr-history-body { + .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 { + .untangled-pr-history.open .untangled-pr-history-body{ transform: none; } - .untangled-pr-history details, - .untangled-pr-history details summary { + .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 { + .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 { + .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 { + .untangled-pr-history-card > header{ background: rgb(229 231 235); height: 3rem; border-top-left-radius: 0.625rem !important; @@ -682,36 +658,34 @@ } @media (max-width: 767px) and (prefers-color-scheme: dark) { - .untangled-pr-history-card > header { + .untangled-pr-history-card > header{ background: rgb(31 41 55); border-color: rgb(55 65 81); } } -summary::-webkit-details-marker { +summary::-webkit-details-marker{ display: none; } -summary { +summary{ list-style: none; } @media (max-width: 767px) { - .untangled-pr-summary-card { + .untangled-pr-summary-card{ padding: 0.75rem; } - .untangled-thread-meta { + .untangled-thread-meta{ padding: 0.25rem 0.25rem 0.5rem; } } -html, -body, -#root { +html, body, #root{ min-height: 100%; } -body { +body{ margin: 0; background: rgb(243 244 246); color: rgb(15 23 42); @@ -721,82 +695,79 @@ body { } @media (prefers-color-scheme: dark) { - body { + body{ background: rgb(17 24 39); color: rgb(243 244 246); } } -* { +*{ box-sizing: border-box; } -a { +a{ color: inherit; } -button, -input, -select, -textarea { +button, input, select, textarea{ font: inherit; } -img { +img{ max-width: 100%; } -pre { +pre{ overflow: auto; } -.untangled-focus:focus-visible { +.untangled-focus:focus-visible{ outline: 2px solid rgb(59 130 246); outline-offset: 2px; } -.untangled-prose a { +.untangled-prose a{ text-decoration: underline; } -.untangled-prose pre { +.untangled-prose pre{ padding: 1rem; border-radius: 0.25rem; background: rgb(15 23 42); color: rgb(226 232 240); } -.untangled-prose code { +.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 { + .untangled-prose code{ background: rgb(51 65 85 / 0.8); } } -.untangled-shell { +.untangled-shell{ width: 100%; max-width: 1126px; padding-bottom: max(2rem, calc(1.5rem + env(safe-area-inset-bottom))); } -.untangled-settings-grid { +.untangled-settings-grid{ display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; } @media (min-width: 768px) { - .untangled-settings-grid { + .untangled-settings-grid{ grid-template-columns: 15rem minmax(0, 1fr); } } -.untangled-repo-frame-full { +.untangled-repo-frame-full{ box-sizing: border-box; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); @@ -805,17 +776,17 @@ pre { width: 100vw; } -.untangled-skeleton { +.untangled-skeleton{ background: rgb(229 231 235); position: relative; overflow: hidden; } -.untangled-skeleton-on-dark { +.untangled-skeleton-on-dark{ background: rgb(75 85 99); } -.untangled-skeleton::after { +.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: ''; @@ -825,88 +796,87 @@ pre { } @media (prefers-color-scheme: dark) { - .untangled-skeleton { + .untangled-skeleton{ background: rgb(55 65 81); } - .untangled-skeleton::after { + .untangled-skeleton::after{ background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.08), transparent); } - .untangled-file-row-loading { + .untangled-file-row-loading{ background: rgb(255 255 255 / 0.06); } } @media (prefers-reduced-motion: reduce) { - .untangled-skeleton::after { + .untangled-skeleton::after{ animation: none; } - .untangled-file-row-loading { + .untangled-file-row-loading{ animation: none; } } @keyframes untangled-skeleton-shimmer { - 100% { + 100%{ transform: translateX(100%); } } @keyframes untangled-file-row-breathe { - 0%, - 100% { + 0%, 100%{ opacity: 0.88; } - 50% { + 50%{ opacity: 1; } } -.untangled-skeleton-file-row { +.untangled-skeleton-file-row{ align-items: center; display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr) 8rem; } -.untangled-skeleton-code-line { +.untangled-skeleton-code-line{ align-items: center; display: grid; gap: 0.75rem; grid-template-columns: 2.5rem minmax(0, 1fr); } -.untangled-skeleton-branch-select { +.untangled-skeleton-branch-select{ height: 34px; width: 128px; } -.untangled-skeleton-compare-button { +.untangled-skeleton-compare-button{ height: 30px; width: 40px; } -.untangled-skeleton-clone-button { +.untangled-skeleton-clone-button{ height: 30px; width: 80px; } -.untangled-overlap-avatars > * + * { +.untangled-overlap-avatars > * + *{ margin-left: -0.625rem; } -.untangled-overlap-avatars > * { +.untangled-overlap-avatars > *{ border: 1px solid rgb(17 24 39); } -.untangled-at-uri-panel { +.untangled-at-uri-panel{ min-width: 0; } -.untangled-at-uri-header { +.untangled-at-uri-header{ display: flex; align-items: center; justify-content: space-between; @@ -918,13 +888,13 @@ pre { text-transform: uppercase; } -.untangled-at-uri-actions { +.untangled-at-uri-actions{ display: flex; align-items: center; gap: 0.5rem; } -.untangled-at-uri-action { +.untangled-at-uri-action{ display: inline-flex; align-items: center; justify-content: center; @@ -935,12 +905,12 @@ pre { text-decoration: none; } -.untangled-at-uri-action:hover { +.untangled-at-uri-action:hover{ color: rgb(55 65 81); text-decoration: none; } -.untangled-at-uri { +.untangled-at-uri{ display: block; max-width: 100%; overflow-x: auto; @@ -953,41 +923,39 @@ pre { } @media (prefers-color-scheme: dark) { - .untangled-at-uri-header, - .untangled-at-uri-action { + .untangled-at-uri-header, .untangled-at-uri-action{ color: rgb(156 163 175); } - .untangled-at-uri-action:hover { + .untangled-at-uri-action:hover{ color: rgb(229 231 235); } - .untangled-at-uri { + .untangled-at-uri{ color: rgb(209 213 219); } } - -.untangled-repo-overview { +.untangled-repo-overview{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.5rem; } -.untangled-repo-overview--path { +.untangled-repo-overview--path{ grid-template-columns: minmax(0, 1fr); } -.untangled-file-tree-pane { +.untangled-file-tree-pane{ border-right: 1px solid rgb(55 65 81); } -.untangled-repo-overview--path .untangled-file-tree-pane { +.untangled-repo-overview--path .untangled-file-tree-pane{ border-right: 0; padding-right: 0; } -.untangled-language-bar { +.untangled-language-bar{ display: flex; gap: 1px; height: 1rem; @@ -1001,43 +969,35 @@ pre { list-style: none; } -.untangled-language-bar-loading { +.untangled-language-bar-loading{ cursor: default; pointer-events: none; } -.untangled-language-bar-skeleton { +.untangled-language-bar-skeleton{ width: 100%; height: 100%; border-radius: 0.25rem 0.25rem 0 0; } -.untangled-language-bar::-webkit-details-marker { +.untangled-language-bar::-webkit-details-marker{ display: none; } -.untangled-language-bar::marker { +.untangled-language-bar::marker{ content: ''; } -.untangled-language-bar:hover, -details[open] > .untangled-language-bar { +.untangled-language-bar:hover, details[open] > .untangled-language-bar{ transform: scaleY(1); } -.untangled-language-segment { +.untangled-language-segment{ height: 100%; min-width: 1px; } -.untangled-home-page { - display: flex; - min-width: 0; - flex-direction: column; - gap: 1rem; -} - -.untangled-home-command { +.untangled-home-command{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(22rem, 32rem); align-items: center; @@ -1046,14 +1006,14 @@ details[open] > .untangled-language-bar { padding: 0.5rem 0.25rem 1rem; } -.untangled-home-brand { +.untangled-home-brand{ display: flex; min-width: 0; align-items: center; gap: 0.75rem; } -.untangled-home-brand h1 { +.untangled-home-brand h1{ margin: 0; font-size: 1.875rem; font-weight: 800; @@ -1061,56 +1021,26 @@ details[open] > .untangled-language-bar { line-height: 1.1; } -.untangled-home-brand p { +.untangled-home-brand p{ margin: 0.125rem 0 0; color: rgb(107 114 128); font-size: 0.875rem; } -.untangled-home-jump { +.untangled-home-jump{ display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.5rem; } -.untangled-home-jump .untangled-input { +.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); +.untangled-home-section-header{ padding-top: 0.5rem; display: flex; align-items: center; @@ -1119,18 +1049,14 @@ details[open] > .untangled-language-bar { color: inherit; } -.untangled-home-section-header h2 { +.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 { +.untangled-home-feed-header{ position: sticky; top: 0; z-index: 10; @@ -1144,7 +1070,7 @@ details[open] > .untangled-language-bar { margin-bottom: 0.5rem; } -.untangled-home-feed-title { +.untangled-home-feed-title{ margin: 0; display: flex; align-items: center; @@ -1154,7 +1080,7 @@ details[open] > .untangled-language-bar { color: rgb(17 24 39); } -.untangled-home-live-pill { +.untangled-home-live-pill{ display: inline-flex; align-items: center; justify-content: center; @@ -1166,7 +1092,7 @@ details[open] > .untangled-language-bar { white-space: nowrap; } -.untangled-home-activity-list { +.untangled-home-activity-list{ display: flex; min-width: 0; flex-direction: column; @@ -1174,12 +1100,12 @@ details[open] > .untangled-language-bar { } /* upstream-style: individual bordered card per event, with connector lines */ -.untangled-home-activity-card-wrap { +.untangled-home-activity-card-wrap{ position: relative; min-width: 0; } -.untangled-home-activity-connector { +.untangled-home-activity-connector{ position: absolute; left: 1rem; top: -1rem; @@ -1188,7 +1114,7 @@ details[open] > .untangled-language-bar { background: rgb(209 213 219); } -.untangled-home-activity-card { +.untangled-home-activity-card{ display: flex; flex-direction: column; border: 1px solid rgb(229 231 235); @@ -1196,7 +1122,7 @@ details[open] > .untangled-language-bar { overflow: hidden; } -.untangled-home-activity-card-header { +.untangled-home-activity-card-header{ display: flex; align-items: center; gap: 0.5rem; @@ -1205,7 +1131,7 @@ details[open] > .untangled-language-bar { font-size: 0.8125rem; } -.untangled-home-activity-header-text { +.untangled-home-activity-header-text{ display: flex; min-width: 0; flex: 1; @@ -1215,7 +1141,7 @@ details[open] > .untangled-language-bar { overflow: hidden; } -.untangled-home-activity-repo-label { +.untangled-home-activity-repo-label{ min-width: 0; overflow: hidden; text-overflow: ellipsis; @@ -1225,13 +1151,13 @@ details[open] > .untangled-language-bar { font-size: 0.8125rem; } -.untangled-home-activity-time { +.untangled-home-activity-time{ flex-shrink: 0; color: rgb(107 114 128); font-size: 0.75rem; } -.untangled-home-activity-card-body { +.untangled-home-activity-card-body{ display: block; padding: 0.5rem 0.75rem; background: rgb(249 250 251); @@ -1247,12 +1173,12 @@ details[open] > .untangled-language-bar { overflow: hidden; } -.untangled-home-activity-card-body:hover { +.untangled-home-activity-card-body:hover{ background: rgb(243 244 246); text-decoration: none; } -.untangled-home-activity-icon { +.untangled-home-activity-icon{ display: inline-flex; width: 1.5rem; height: 1.5rem; @@ -1264,30 +1190,30 @@ details[open] > .untangled-language-bar { flex-shrink: 0; } -.untangled-home-activity-icon-issue { +.untangled-home-activity-icon-issue{ background: rgb(220 252 231); color: rgb(22 101 52); } -.untangled-home-activity-icon-pull { +.untangled-home-activity-icon-pull{ background: rgb(243 232 255); color: rgb(126 34 206); } -.untangled-home-activity-icon-repo { +.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 { +.untangled-home-activity-copy{ display: flex; min-width: 0; flex-direction: column; gap: 0.375rem; } -.untangled-home-activity-title { +.untangled-home-activity-title{ display: flex; min-width: 0; flex-wrap: wrap; @@ -1297,13 +1223,13 @@ details[open] > .untangled-language-bar { font-size: 0.9375rem; } -.untangled-home-activity-title strong { +.untangled-home-activity-title strong{ min-width: 0; overflow-wrap: anywhere; font-weight: 700; } -.untangled-home-activity-body { +.untangled-home-activity-body{ display: -webkit-box; overflow: hidden; color: rgb(75 85 99); @@ -1313,7 +1239,7 @@ details[open] > .untangled-language-bar { -webkit-line-clamp: 2; } -.untangled-home-activity-meta { +.untangled-home-activity-meta{ display: flex; align-items: center; gap: 0.5rem; @@ -1321,7 +1247,7 @@ details[open] > .untangled-language-bar { font-size: 0.8125rem; } -.untangled-home-feed-empty { +.untangled-home-feed-empty{ display: flex; min-height: 18rem; flex-direction: column; @@ -1333,28 +1259,28 @@ details[open] > .untangled-language-bar { color: rgb(107 114 128); } -.untangled-home-feed-empty h3 { +.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 { +.untangled-home-feed-empty p{ max-width: 22rem; margin: 0; font-size: 0.875rem; line-height: 1.5; } -.untangled-home-compact-list { +.untangled-home-compact-list{ display: flex; min-width: 0; flex-direction: column; gap: 0.5rem; } -.untangled-home-following-list { +.untangled-home-following-list{ display: flex; min-width: 0; flex-direction: column; @@ -1362,7 +1288,7 @@ details[open] > .untangled-language-bar { } /* upstream repoCard style: flat link with icon + name, description below, time at right */ -.untangled-home-repo-row { +.untangled-home-repo-row{ display: flex; min-width: 0; flex-direction: column; @@ -1376,16 +1302,16 @@ details[open] > .untangled-language-bar { background: rgb(255 255 255); } -.untangled-home-repo-row:last-child { +.untangled-home-repo-row:last-child{ border-bottom-width: 1px; } -.untangled-home-repo-row:hover { +.untangled-home-repo-row:hover{ background: rgb(249 250 251); text-decoration: none; } -.untangled-home-repo-row-name { +.untangled-home-repo-row-name{ display: flex; align-items: center; gap: 0.375rem; @@ -1396,13 +1322,13 @@ details[open] > .untangled-language-bar { overflow: hidden; } -.untangled-home-repo-row-name span { +.untangled-home-repo-row-name span{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } -.untangled-home-repo-row-desc { +.untangled-home-repo-row-desc{ color: rgb(75 85 99); font-size: 0.75rem; overflow: hidden; @@ -1411,14 +1337,14 @@ details[open] > .untangled-language-bar { display: block; } -.untangled-home-repo-row-footer { +.untangled-home-repo-row-footer{ display: flex; align-items: center; gap: 0.75rem; margin-top: 0.125rem; } -.untangled-home-repo-row-lang { +.untangled-home-repo-row-lang{ display: inline-flex; align-items: center; gap: 0.25rem; @@ -1426,19 +1352,19 @@ details[open] > .untangled-language-bar { color: rgb(75 85 99); } -.untangled-home-repo-row-lang-dot { +.untangled-home-repo-row-lang-dot{ display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 9999px; } -.untangled-home-repo-row-time { +.untangled-home-repo-row-time{ color: rgb(107 114 128); font-size: 0.75rem; } -.untangled-home-following-row { +.untangled-home-following-row{ display: flex; min-width: 0; align-items: center; @@ -1448,13 +1374,13 @@ details[open] > .untangled-language-bar { transition: background-color 150ms; } -.untangled-home-following-row span { +.untangled-home-following-row span{ display: flex; min-width: 0; flex-direction: column; } -.untangled-home-following-row span span { +.untangled-home-following-row span span{ overflow: hidden; color: rgb(17 24 39); font-size: 0.8125rem; @@ -1463,146 +1389,41 @@ details[open] > .untangled-language-bar { white-space: nowrap; } -.untangled-home-following-row small { +.untangled-home-following-row small{ color: rgb(107 114 128); font-size: 0.75rem; } -.untangled-home-empty { +.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: 100%; - padding-left: 0; - padding-right: 0; - 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: 0; - padding-right: 0; - } -} - -.untangled-home-wide-section { +.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 { +.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 { + .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 { +.untangled-home-vouch-card{ display: flex; flex-direction: column; border: 1px solid rgb(229 231 235); @@ -1614,19 +1435,19 @@ details[open] > .untangled-language-bar { } @media (prefers-color-scheme: dark) { - .untangled-home-vouch-card { + .untangled-home-vouch-card{ border-color: rgb(55 65 81); background: rgb(31 41 55); } } -.untangled-home-vouch-header { +.untangled-home-vouch-header{ display: flex; align-items: center; justify-content: space-between; } -.untangled-home-vouch-title { +.untangled-home-vouch-title{ margin: 0; display: flex; align-items: center; @@ -1637,48 +1458,48 @@ details[open] > .untangled-language-bar { } @media (prefers-color-scheme: dark) { - .untangled-home-vouch-title { + .untangled-home-vouch-title{ color: rgb(243 244 246); } } -.untangled-home-vouch-list { +.untangled-home-vouch-list{ display: flex; flex-direction: column; gap: 1rem; } -.untangled-home-vouch-item { +.untangled-home-vouch-item{ display: flex; align-items: center; gap: 0.75rem; } -.untangled-home-vouch-info { +.untangled-home-vouch-info{ display: flex; flex-direction: column; min-width: 0; flex: 1; } -.untangled-home-vouch-name { +.untangled-home-vouch-name{ font-size: 0.875rem; font-weight: 600; color: rgb(17 24 39); text-decoration: none; } -.untangled-home-vouch-name:hover { +.untangled-home-vouch-name:hover{ text-decoration: underline; } @media (prefers-color-scheme: dark) { - .untangled-home-vouch-name { + .untangled-home-vouch-name{ color: rgb(243 244 246); } } -.untangled-home-vouch-reason { +.untangled-home-vouch-reason{ font-size: 0.75rem; color: rgb(107 114 128); overflow: hidden; @@ -1687,12 +1508,12 @@ details[open] > .untangled-language-bar { } @media (prefers-color-scheme: dark) { - .untangled-home-vouch-reason { + .untangled-home-vouch-reason{ color: rgb(156 163 175); } } -.untangled-home-vouch-action-btn { +.untangled-home-vouch-action-btn{ display: inline-flex; align-items: center; justify-content: center; @@ -1708,45 +1529,45 @@ details[open] > .untangled-language-bar { transition: all 150ms; } -.untangled-home-vouch-action-btn:hover { +.untangled-home-vouch-action-btn:hover{ background: rgb(249 250 251); border-color: rgb(156 163 175); } -.untangled-home-vouch-action-btn.is-vouched { +.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 { +.untangled-home-vouch-action-btn.is-vouched:hover{ background: rgb(240 253 244); } @media (prefers-color-scheme: dark) { - .untangled-home-vouch-action-btn { + .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 { + .untangled-home-vouch-action-btn:hover{ background: rgb(55 65 81); border-color: rgb(156 163 175); } - .untangled-home-vouch-action-btn.is-vouched { + .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 { + .untangled-home-vouch-action-btn.is-vouched:hover{ background: rgb(20 83 45 / 0.6); } } -.untangled-home-scroll-container { +.untangled-home-scroll-container{ display: flex; flex-direction: column; gap: 0.75rem; @@ -1758,31 +1579,30 @@ details[open] > .untangled-language-bar { } /* 1. At the top (only fade at bottom) */ -.untangled-home-scroll-container.is-at-top { +.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 { +.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 { +.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 { +.untangled-home-scroll-container.is-not-scrollable{ mask-image: none; -webkit-mask-image: none; } -.untangled-home-recent-strip, -.untangled-home-sample-list { +.untangled-home-recent-strip, .untangled-home-sample-list{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; @@ -1791,8 +1611,7 @@ details[open] > .untangled-language-bar { border-left: 1px solid rgb(229 231 235); } -.untangled-home-recent-link, -.untangled-home-sample-link { +.untangled-home-recent-link, .untangled-home-sample-link{ display: flex; min-width: 0; flex-direction: column; @@ -1805,14 +1624,12 @@ details[open] > .untangled-language-bar { transition: background-color 150ms; } -.untangled-home-recent-link:hover, -.untangled-home-sample-link:hover { +.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 { +.untangled-home-recent-link span, .untangled-home-sample-link strong{ overflow: hidden; color: rgb(17 24 39); font-size: 0.875rem; @@ -1821,8 +1638,7 @@ details[open] > .untangled-language-bar { white-space: nowrap; } -.untangled-home-recent-link small, -.untangled-home-sample-link span { +.untangled-home-recent-link small, .untangled-home-sample-link span{ overflow: hidden; color: rgb(107 114 128); font-size: 0.75rem; @@ -1830,288 +1646,218 @@ details[open] > .untangled-language-bar { white-space: nowrap; } -.untangled-home-sample-list { +.untangled-home-sample-list{ grid-template-columns: repeat(3, minmax(0, 1fr)); } -.untangled-home-sample-list-compact { +.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 { + .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 { + .untangled-home-activity-card, .untangled-home-repo-row{ border-color: rgb(55 65 81); } - .untangled-home-activity-connector { + .untangled-home-activity-connector{ background: rgb(55 65 81); } - .untangled-home-activity-card-header { + .untangled-home-activity-card-header{ background: rgb(31 41 55); color: rgb(156 163 175); } - .untangled-home-activity-card-body { + .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 { + .untangled-home-activity-card-body:hover{ background: rgb(31 41 55); } - .untangled-home-section-header, - .untangled-home-feed-header { + .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 { + .untangled-home-section-header h2, .untangled-home-feed-title, .untangled-home-activity-repo-label{ color: rgb(243 244 246); } - .untangled-home-activity-time { + .untangled-home-activity-time{ color: rgb(107 114 128); } - .untangled-home-repo-row { + .untangled-home-repo-row{ background: rgb(31 41 55); } - .untangled-home-repo-row:hover { + .untangled-home-repo-row:hover{ background: rgb(55 65 81 / 0.6); } - .untangled-home-repo-row-name { + .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 { + .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 { + .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 { + .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 { + .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 { + .untangled-home-recent-link:hover, .untangled-home-sample-link:hover{ background: rgb(55 65 81 / 0.35); } - .untangled-home-activity-icon { + .untangled-home-activity-icon{ background: rgb(15 23 42); color: rgb(191 219 254); } - .untangled-home-activity-icon-issue { + .untangled-home-activity-icon-issue{ background: rgb(22 101 52 / 0.45); color: rgb(134 239 172); } - .untangled-home-activity-icon-pull { + .untangled-home-activity-icon-pull{ background: rgb(88 28 135 / 0.55); color: rgb(216 180 254); } - .untangled-home-activity-icon-repo { + .untangled-home-activity-icon-repo{ background: rgb(15 23 42); color: rgb(191 219 254); } } @media (max-width: 1023px) { - .untangled-home-command { + .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 { + .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 { + .untangled-home-brand h1{ font-size: 1.5rem; } - .untangled-home-jump { + .untangled-home-jump{ grid-template-columns: auto minmax(0, 1fr); } - .untangled-home-jump button { + .untangled-home-jump button{ grid-column: 1 / -1; } - .untangled-home-feed-header { + .untangled-home-feed-header{ align-items: flex-start; flex-direction: column; } - .untangled-home-activity-row { + .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 { +.untangled-safe-footer{ padding-bottom: env(safe-area-inset-bottom); } -.untangled-safe-header { +.untangled-safe-header{ padding-top: env(safe-area-inset-top); z-index: 20; } -.untangled-unread-badge { +.untangled-unread-badge{ font-size: 11px; } -.untangled-branch-select, -.untangled-toggle-button { +.untangled-branch-select, .untangled-toggle-button{ min-height: 34px; } -.untangled-toggle-button { +.untangled-toggle-button{ background: transparent; color: rgb(75 85 99); } -.untangled-toggle-button-idle:hover { +.untangled-toggle-button-idle:hover{ background: rgb(249 250 251); color: rgb(17 24 39); } -.untangled-toggle-button-active { +.untangled-toggle-button-active{ background: rgb(229 231 235); color: rgb(17 24 39); } -.untangled-toggle-button-active:hover { +.untangled-toggle-button-active:hover{ background: rgb(243 244 246); color: rgb(17 24 39); } -.untangled-toggle-button-meta-idle { +.untangled-toggle-button-meta-idle{ color: rgb(156 163 175); } -.untangled-toggle-button-meta-active, -.untangled-toggle-button-idle:hover .untangled-toggle-button-meta { +.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 { + .untangled-toggle-button{ color: rgb(209 213 219); } - .untangled-toggle-button-idle:hover { + .untangled-toggle-button-idle:hover{ background: rgb(55 65 81 / 0.5); color: rgb(243 244 246); } - .untangled-toggle-button-active { + .untangled-toggle-button-active{ background: rgb(55 65 81); color: rgb(243 244 246); } - .untangled-toggle-button-active:hover { + .untangled-toggle-button-active:hover{ background: rgb(75 85 99); color: rgb(243 244 246); } - .untangled-toggle-button-meta-idle { + .untangled-toggle-button-meta-idle{ color: rgb(107 114 128); } - .untangled-toggle-button-meta-active, - .untangled-toggle-button-idle:hover .untangled-toggle-button-meta { + .untangled-toggle-button-meta-active, .untangled-toggle-button-idle:hover .untangled-toggle-button-meta{ color: rgb(156 163 175); } } -.untangled-toggle-group { +.untangled-toggle-group{ display: flex; align-items: stretch; border-radius: 0.25rem; @@ -2119,12 +1865,12 @@ details[open] > .untangled-language-bar { overflow: hidden; } @media (prefers-color-scheme: dark) { - .untangled-toggle-group { + .untangled-toggle-group{ border-color: rgb(55 65 81); } } -.untangled-list-row { +.untangled-list-row{ display: block; border-radius: 0.25rem; background-color: rgb(255 255 255); @@ -2132,17 +1878,17 @@ details[open] > .untangled-language-bar { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); text-decoration-line: none; } -.untangled-list-row:hover { +.untangled-list-row:hover{ text-decoration-line: underline; } @media (prefers-color-scheme: dark) { - .untangled-list-row { + .untangled-list-row{ background-color: rgb(31 41 55); /* border: 1px solid rgb(55 65 81); */ } } -.untangled-thread-group { +.untangled-thread-group{ overflow: hidden; border-radius: 0.25rem; border: 1px solid rgb(229 231 235); @@ -2150,13 +1896,13 @@ details[open] > .untangled-language-bar { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); } @media (prefers-color-scheme: dark) { - .untangled-thread-group { + .untangled-thread-group{ border-color: rgb(55 65 81); background-color: rgb(31 41 55 / 0.5); } } -.untangled-thread-comment { +.untangled-thread-comment{ display: flex; gap: 0.5rem; border-radius: 0.25rem; @@ -2164,23 +1910,23 @@ details[open] > .untangled-language-bar { padding: 1rem 1.5rem; } @media (prefers-color-scheme: dark) { - .untangled-thread-comment { + .untangled-thread-comment{ background-color: rgb(31 41 55); } } -.untangled-thread-replies-list { +.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 { + .untangled-thread-replies-list{ border-left-color: rgb(55 65 81); } } -.untangled-thread-reply { +.untangled-thread-reply{ margin-left: -1rem; width: calc(100% + 1rem) !important; display: flex; @@ -2188,7 +1934,7 @@ details[open] > .untangled-language-bar { padding: 1rem 1rem 1rem 0; } -.untangled-thread-reply-trigger { +.untangled-thread-reply-trigger{ display: flex; width: 100%; align-items: center; @@ -2201,13 +1947,13 @@ details[open] > .untangled-language-bar { color: rgb(107 114 128); } @media (prefers-color-scheme: dark) { - .untangled-thread-reply-trigger { + .untangled-thread-reply-trigger{ border-top-color: rgb(55 65 81); color: rgb(156 163 175); } } -.untangled-thread-reply-form { +.untangled-thread-reply-form{ display: flex; width: 100%; flex-direction: column; @@ -2216,12 +1962,12 @@ details[open] > .untangled-language-bar { padding: 0.5rem; } @media (prefers-color-scheme: dark) { - .untangled-thread-reply-form { + .untangled-thread-reply-form{ border-top-color: rgb(55 65 81); } } -.untangled-comment-composer { +.untangled-comment-composer{ position: relative; display: flex; min-width: 0; @@ -2234,21 +1980,21 @@ details[open] > .untangled-language-bar { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); } @media (prefers-color-scheme: dark) { - .untangled-comment-composer { + .untangled-comment-composer{ background-color: rgb(31 41 55); } } -.untangled-button { +.untangled-button{ min-height: 30px; } -.untangled-clone-dropdown { +.untangled-clone-dropdown{ position: relative; display: inline-flex; } -.untangled-clone-popover { +.untangled-clone-popover{ position: absolute; top: calc(100% + 0.5rem); right: 0; @@ -2265,7 +2011,7 @@ details[open] > .untangled-language-bar { 0 4px 6px -4px rgb(0 0 0 / 0.1); } -.untangled-clone-url-row { +.untangled-clone-url-row{ display: flex; align-items: stretch; overflow: hidden; @@ -2273,7 +2019,7 @@ details[open] > .untangled-language-bar { border-radius: 0.25rem; } -.untangled-clone-url-text { +.untangled-clone-url-text{ min-width: 0; flex: 1; overflow-x: auto; @@ -2287,7 +2033,7 @@ details[open] > .untangled-language-bar { user-select: all; } -.untangled-clone-copy { +.untangled-clone-copy{ display: inline-flex; align-items: center; justify-content: center; @@ -2298,19 +2044,19 @@ details[open] > .untangled-language-bar { color: rgb(107 114 128); } -.untangled-clone-copy:hover { +.untangled-clone-copy:hover{ color: rgb(55 65 81); } -.untangled-input { +.untangled-input{ min-height: 38px; } -.untangled-textarea { +.untangled-textarea{ min-height: 140px; } -.untangled-topbar-search-box { +.untangled-topbar-search-box{ position: relative; display: flex; max-height: 30px; @@ -2323,13 +2069,13 @@ details[open] > .untangled-language-bar { padding: 1rem 0.375rem 1rem 0.5rem; } -.untangled-topbar-search-box:focus-within { +.untangled-topbar-search-box:focus-within{ z-index: 51; outline: 2px solid rgb(209 213 219); outline-offset: 1px; } -.untangled-topbar-search-input { +.untangled-topbar-search-input{ min-width: 0; flex: 1; border: 0; @@ -2343,18 +2089,18 @@ details[open] > .untangled-language-bar { outline: none; } -.untangled-topbar-search-input:focus { +.untangled-topbar-search-input:focus{ border: 0; border-color: transparent; box-shadow: none; outline: none; } -.untangled-topbar-search-input::placeholder { +.untangled-topbar-search-input::placeholder{ color: rgb(156 163 175); } -.untangled-topbar-search-kbd { +.untangled-topbar-search-kbd{ display: flex; align-items: center; border: 1px solid rgb(229 231 235); @@ -2368,13 +2114,11 @@ details[open] > .untangled-language-bar { 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 { +.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 { +.untangled-file-row{ display: grid; grid-template-columns: minmax(0, 1fr) max-content; align-items: center; @@ -2383,30 +2127,30 @@ details[open] > .untangled-language-bar { text-decoration: none; } -.untangled-file-row-loading { +.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 { +.untangled-file-row-time{ text-align: right; white-space: nowrap; } -.untangled-filter-grid { +.untangled-filter-grid{ display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.5rem; } -.untangled-repo-filter-search { +.untangled-repo-filter-search{ position: relative; display: flex; min-width: 0; } -.untangled-repo-filter-input { +.untangled-repo-filter-input{ min-width: 0; flex: 1; border: 1px solid rgb(209 213 219); @@ -2419,17 +2163,17 @@ details[open] > .untangled-language-bar { outline: none; } -.untangled-repo-filter-input:focus { +.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 { +.untangled-repo-filter-input::placeholder{ color: rgb(156 163 175); } -.untangled-repo-filter-reset { +.untangled-repo-filter-reset{ position: absolute; right: 2.75rem; top: 50%; @@ -2438,15 +2182,15 @@ details[open] > .untangled-language-bar { transform: translateY(-50%); } -.untangled-repo-filter-input:not(:placeholder-shown) + .untangled-repo-filter-reset { +.untangled-repo-filter-input:not(:placeholder-shown) + .untangled-repo-filter-reset{ display: block; } -.untangled-repo-filter-reset:hover { +.untangled-repo-filter-reset:hover{ color: rgb(75 85 99); } -.untangled-repo-filter-submit { +.untangled-repo-filter-submit{ display: inline-flex; align-items: center; justify-content: center; @@ -2458,28 +2202,28 @@ details[open] > .untangled-language-bar { color: rgb(156 163 175); } -.untangled-repo-filter-submit:hover { +.untangled-repo-filter-submit:hover{ color: rgb(31 41 55); } -.untangled-search-grid { +.untangled-search-grid{ display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; } -.untangled-search-main { +.untangled-search-main{ display: flex; min-width: 0; flex-direction: column; gap: 1rem; } -.untangled-search-sidebar { +.untangled-search-sidebar{ display: none; } -.untangled-search-page-input { +.untangled-search-page-input{ min-width: 0; flex: 1; border: 1px solid rgb(209 213 219); @@ -2491,17 +2235,17 @@ details[open] > .untangled-language-bar { outline: none; } -.untangled-search-page-input::placeholder { +.untangled-search-page-input::placeholder{ color: rgb(156 163 175); } -.untangled-search-page-input:focus { +.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 { +.untangled-search-page-submit{ display: inline-flex; align-items: center; justify-content: center; @@ -2512,11 +2256,11 @@ details[open] > .untangled-language-bar { color: rgb(156 163 175); } -.untangled-search-page-submit:hover { +.untangled-search-page-submit:hover{ color: rgb(75 85 99); } -.untangled-search-type-dot { +.untangled-search-type-dot{ width: 0.5rem; height: 0.5rem; flex-shrink: 0; @@ -2524,7 +2268,7 @@ details[open] > .untangled-language-bar { background: radial-gradient(circle at 35% 35%, rgb(156 163 175), rgb(107 114 128) 30%, rgb(75 85 99)); } -.untangled-search-description { +.untangled-search-description{ display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; @@ -2532,21 +2276,21 @@ details[open] > .untangled-language-bar { } @media (min-width: 1024px) { - .untangled-topbar-search-box { + .untangled-topbar-search-box{ width: 24rem; } } @media (min-width: 768px) { - .untangled-search-grid { + .untangled-search-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); } - .untangled-search-main { + .untangled-search-main{ grid-column: span 3 / span 3; } - .untangled-search-sidebar { + .untangled-search-sidebar{ position: sticky; top: 0.5rem; display: block; @@ -2554,19 +2298,19 @@ details[open] > .untangled-language-bar { } } -.untangled-repo-actions { +.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 { + .untangled-repo-actions{ width: fit-content; } } -.untangled-repo-action { +.untangled-repo-action{ position: relative; z-index: 10; display: flex; @@ -2584,7 +2328,7 @@ details[open] > .untangled-language-bar { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); } -.untangled-repo-action::before { +.untangled-repo-action::before{ position: absolute; inset: 0; z-index: -10; @@ -2595,17 +2339,16 @@ details[open] > .untangled-language-bar { transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); } -.untangled-repo-action:hover { +.untangled-repo-action:hover{ text-decoration: none; } -.untangled-repo-action-main, -.untangled-repo-action-count { +.untangled-repo-action-main, .untangled-repo-action-count{ display: inline-flex; align-items: center; } -.untangled-repo-action-main { +.untangled-repo-action-main{ gap: 0.35rem; min-width: 3.5rem; padding: 0 0.5rem; @@ -2620,19 +2363,18 @@ details[open] > .untangled-language-bar { text-decoration: none; } -.untangled-repo-action-main:disabled { +.untangled-repo-action-main:disabled{ cursor: not-allowed; opacity: 0.5; pointer-events: none; } -.untangled-repo-action-main:hover, -.untangled-repo-action-count:hover { +.untangled-repo-action-main:hover, .untangled-repo-action-count:hover{ background: rgb(249 250 251); text-decoration: none; } -.untangled-repo-action-count { +.untangled-repo-action-count{ border-left: 1px solid rgb(209 213 219); background: rgb(249 250 251); justify-content: center; @@ -2642,63 +2384,60 @@ details[open] > .untangled-language-bar { text-decoration: none; } -.untangled-repo-action-count[aria-disabled='true'] { +.untangled-repo-action-count[aria-disabled='true']{ color: rgb(107 114 128); pointer-events: none; } -.untangled-repo-tab { +.untangled-repo-tab{ min-width: 80px; } -.untangled-repo-tab-meta { +.untangled-repo-tab-meta{ display: inline-flex; justify-content: center; min-width: 1.25rem; } -.untangled-repo-tab-meta-placeholder { +.untangled-repo-tab-meta-placeholder{ visibility: hidden; } -.group:hover .untangled-repo-tab-idle { +.group:hover .untangled-repo-tab-idle{ background: rgb(243 244 246 / 0.25); } -.untangled-topic { +.untangled-topic{ border-radius: 0.25rem; background: rgb(229 231 235); padding: 0.125rem 0.25rem; font-size: 0.875rem; } -.untangled-anywhere { +.untangled-anywhere{ overflow-wrap: anywhere; } -.untangled-readme-prose, -.untangled-readme-prose.prose { +.untangled-readme-prose, .untangled-readme-prose.prose{ max-width: none; overflow-wrap: normal; word-break: normal; } -.untangled-readme-prose p, -.untangled-readme-prose li { +.untangled-readme-prose p, .untangled-readme-prose li{ max-width: none; overflow-wrap: normal; word-break: normal; } -.untangled-blob-card { +.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 { +.untangled-blob-file-info a, .untangled-blob-file-info button{ border: 0; background: transparent; color: inherit; @@ -2706,36 +2445,32 @@ details[open] > .untangled-language-bar { text-decoration: none; } -.untangled-blob-file-info a:hover, -.untangled-blob-file-info button:hover { +.untangled-blob-file-info a:hover, .untangled-blob-file-info button:hover{ text-decoration: underline; } -.untangled-blob-rendered, -.untangled-blob-preview, -.untangled-blob-message { +.untangled-blob-rendered, .untangled-blob-preview, .untangled-blob-message{ padding: 0; } -.untangled-blob-rendered > .untangled-readme-prose, -.untangled-blob-rendered > .untangled-readme-prose.prose { +.untangled-blob-rendered > .untangled-readme-prose, .untangled-blob-rendered > .untangled-readme-prose.prose{ width: 100%; max-width: none; } -.untangled-blob-rendered > .untangled-readme-prose > * { +.untangled-blob-rendered > .untangled-readme-prose > *{ max-width: none; } -.untangled-blob-rendered > .untangled-readme-prose > :first-child { +.untangled-blob-rendered > .untangled-readme-prose > :first-child{ margin-top: 0; } -.untangled-blob-rendered > .untangled-readme-prose > :last-child { +.untangled-blob-rendered > .untangled-readme-prose > :last-child{ margin-bottom: 0; } -.untangled-blob-commit-panel { +.untangled-blob-commit-panel{ display: flex; align-items: center; justify-content: space-between; @@ -2747,7 +2482,7 @@ details[open] > .untangled-language-bar { font-size: 0.875rem; } -.untangled-blob-commit-link { +.untangled-blob-commit-link{ display: inline-flex; align-items: center; width: fit-content; @@ -2762,17 +2497,17 @@ details[open] > .untangled-language-bar { text-decoration: none; } -.untangled-blob-commit-link:hover { +.untangled-blob-commit-link:hover{ text-decoration: underline; } -.untangled-code-scroll { +.untangled-code-scroll{ overflow: auto; position: relative; /* padding: 0.875rem 0; */ } -.untangled-code-view { +.untangled-code-view{ display: table; min-width: 100%; font-family: IBMPlexMono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace; @@ -2782,24 +2517,20 @@ details[open] > .untangled-language-bar { color: var(--untangled-code-fg); } -.untangled-code-view-wrap { +.untangled-code-view-wrap{ white-space: pre-wrap; overflow-wrap: anywhere; } -@media (prefers-color-scheme: dark) { -} - -.untangled-code-line { +.untangled-code-line{ display: table-row; } -.untangled-code-line-number, -.untangled-code-line-content { +.untangled-code-line-number, .untangled-code-line-content{ display: table-cell; } -.untangled-code-line-number { +.untangled-code-line-number{ width: 1%; padding: 0 0.75rem 0 0.5rem; color: var(--untangled-code-muted); @@ -2811,189 +2542,152 @@ details[open] > .untangled-language-bar { user-select: none; } -.untangled-code-line-number:hover { +.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 { +.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 { + .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 { +.untangled-code-line-content{ padding-right: 1.5rem; color: var(--untangled-code-fg); } -.untangled-code-diff-op { +.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 { +.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 { +.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 { +: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 { +: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 { +: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 { +: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 { +: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 { +: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 { +: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 { +: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 { +: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 { +: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 { +:where(.untangled-code-line-content, .hljs) .hljs-deletion{ color: var(--untangled-code-declaration); } -:where(.untangled-code-line-content, .hljs) .hljs-addition { +:where(.untangled-code-line-content, .hljs) .hljs-addition{ color: var(--untangled-code-string); } -:where(.untangled-code-line-content, .hljs) .hljs-emphasis { +:where(.untangled-code-line-content, .hljs) .hljs-emphasis{ font-style: italic; } -:where(.untangled-code-line-content, .hljs) .hljs-strong { +: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 { +.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 { +.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 { +.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 { + .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 { + .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 { + .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 { +.untangled-diff-view{ display: flex; flex-direction: column; gap: 0; } -.untangled-commit-view, -.untangled-commit-diff, -.untangled-diff-view-commit { +.untangled-commit-view, .untangled-commit-diff, .untangled-diff-view-commit{ width: 100%; } -.untangled-diff-panel { +.untangled-diff-panel{ overflow: hidden; border: 1px solid rgb(229 231 235); border-radius: 0.25rem; background: rgb(255 255 255); } -.untangled-diff-toolbar { +.untangled-diff-toolbar{ display: flex; align-items: center; justify-content: space-between; @@ -3003,7 +2697,7 @@ details[open] > .untangled-language-bar { padding: 0.5rem 0.75rem; } -.untangled-diff-sidebar-toggle { +.untangled-diff-sidebar-toggle{ display: inline-flex; width: 2rem; min-height: 2rem; @@ -3015,18 +2709,18 @@ details[open] > .untangled-language-bar { color: rgb(31 41 55); } -.untangled-diff-view-commit .untangled-diff-toolbar { +.untangled-diff-view-commit .untangled-diff-toolbar{ background: rgb(241 245 249); } -.untangled-diff-view-commit .untangled-diff-panel { +.untangled-diff-view-commit .untangled-diff-panel{ overflow: visible; border: 0; border-radius: 0; background: transparent; } -.untangled-diff-view-commit .untangled-diff-toolbar { +.untangled-diff-view-commit .untangled-diff-toolbar{ border-bottom: 0; position: sticky; top: 0; @@ -3035,21 +2729,20 @@ details[open] > .untangled-language-bar { padding: 0.5rem 0; } -.untangled-diff-view-commit .untangled-diff-panel-body { +.untangled-diff-view-commit .untangled-diff-panel-body{ padding-top: 0; padding-left: 0; padding-right: 0; } -.untangled-diff-files { +.untangled-diff-files{ display: flex; min-width: 0; flex-direction: column; gap: 0.5rem; } -.untangled-diff-tool-button, -.untangled-diff-mode-button { +.untangled-diff-tool-button, .untangled-diff-mode-button{ display: inline-flex; align-items: center; gap: 0.375rem; @@ -3062,12 +2755,11 @@ details[open] > .untangled-language-bar { color: rgb(31 41 55); } -.untangled-diff-tool-button:hover, -.untangled-diff-mode-button:not(:disabled):hover { +.untangled-diff-tool-button:hover, .untangled-diff-mode-button:not(:disabled):hover{ background: rgb(249 250 251); } -.untangled-diff-mode-group { +.untangled-diff-mode-group{ display: inline-flex; align-items: center; border: 1px solid rgb(209 213 219); @@ -3075,43 +2767,43 @@ details[open] > .untangled-language-bar { overflow: hidden; } -.untangled-diff-mode-group .untangled-diff-mode-button { +.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 { +.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 { +.untangled-diff-mode-button-active{ background: rgb(243 244 246); } -.untangled-diff-mode-button:disabled { +.untangled-diff-mode-button:disabled{ cursor: not-allowed; opacity: 0.65; } -.untangled-diff-panel-body { +.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 { +.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 { +.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 { +.untangled-diff-view-commit .untangled-pr-file-tree{ top: 3rem; max-height: calc(100vh - 3rem); min-height: calc(100vh - 3rem); @@ -3120,25 +2812,25 @@ details[open] > .untangled-language-bar { } @media (max-width: 1023px) { - .untangled-diff-panel-body.untangled-diff-panel-body-with-tree { + .untangled-diff-panel-body.untangled-diff-panel-body-with-tree{ display: flex; grid-template-columns: none; } } -.untangled-diff-file { +.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 { +.untangled-diff-view-commit .untangled-diff-file{ scroll-margin-top: 4rem; overflow: visible; } -.untangled-diff-file-header { +.untangled-diff-file-header{ display: flex; align-items: center; justify-content: space-between; @@ -3150,33 +2842,33 @@ details[open] > .untangled-language-bar { list-style: none; } -.untangled-diff-view-commit .untangled-diff-file-header { +.untangled-diff-view-commit .untangled-diff-file-header{ position: sticky; top: 3rem; z-index: 20; } -.untangled-diff-file-header::-webkit-details-marker { +.untangled-diff-file-header::-webkit-details-marker{ display: none; } -.untangled-diff-chevron { +.untangled-diff-chevron{ transition: transform 120ms ease; } -.untangled-diff-file[open] .untangled-diff-chevron { +.untangled-diff-file[open] .untangled-diff-chevron{ transform: rotate(90deg); } -.untangled-diff-file:not([open]) .untangled-diff-file-header { +.untangled-diff-file:not([open]) .untangled-diff-file-header{ border-bottom: 0; } -.untangled-diff-show-more { +.untangled-diff-show-more{ min-width: 0; } -.untangled-diff-show-more-summary { +.untangled-diff-show-more-summary{ display: flex; list-style: none; cursor: pointer; @@ -3188,37 +2880,36 @@ details[open] > .untangled-language-bar { color: rgb(55 65 81); } -.untangled-diff-show-more-summary::-webkit-details-marker { +.untangled-diff-show-more-summary::-webkit-details-marker{ display: none; } -.untangled-diff-show-more-closed, -.untangled-diff-show-more-open { +.untangled-diff-show-more-closed, .untangled-diff-show-more-open{ align-items: center; gap: 0.5rem; } -.untangled-diff-show-more-closed { +.untangled-diff-show-more-closed{ display: inline-flex; } -.untangled-diff-show-more-open { +.untangled-diff-show-more-open{ display: none; } -.untangled-diff-show-more[open] > .untangled-diff-show-more-summary .untangled-diff-show-more-closed { +.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 { +.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 { +.untangled-diff-show-more[open] > .untangled-diff-show-more-summary .untangled-diff-chevron{ transform: rotate(90deg); } -.untangled-diff-show-more-files { +.untangled-diff-show-more-files{ display: flex; flex-direction: column; gap: 0.5rem; @@ -3226,75 +2917,71 @@ details[open] > .untangled-language-bar { } @media (prefers-color-scheme: dark) { - .untangled-diff-panel { + .untangled-diff-panel{ border-color: rgb(55 65 81); background: rgb(31 41 55); } - .untangled-diff-toolbar { + .untangled-diff-toolbar{ border-bottom-color: rgb(55 65 81); background: rgb(55 65 81 / 0.5); } - .untangled-diff-view-commit .untangled-diff-toolbar { + .untangled-diff-view-commit .untangled-diff-toolbar{ background: rgb(17 24 39); } - .untangled-diff-view-commit .untangled-diff-panel { + .untangled-diff-view-commit .untangled-diff-panel{ border: 0; background: transparent; } - .untangled-diff-view-commit .untangled-pr-file-tree { + .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 { + .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 { + .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 { + .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 { + .untangled-diff-mode-button-active{ background: rgb(55 65 81); } - .untangled-diff-file { + .untangled-diff-file{ border-color: rgb(55 65 81); background: rgb(31 41 55); } - .untangled-diff-file-header { + .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 { + .untangled-diff-view-commit .untangled-diff-file-header{ background: rgb(31 41 55); } - .untangled-diff-show-more-summary { + .untangled-diff-show-more-summary{ color: rgb(209 213 219); } } -.z-60 { +.z-60{ z-index: 60; } -.untangled-footer-links { +.untangled-footer-links{ display: flex; flex-wrap: wrap; align-items: center; @@ -3303,455 +2990,426 @@ details[open] > .untangled-language-bar { } @media (prefers-color-scheme: dark) { - .untangled-topic { + .untangled-topic{ background: rgb(55 65 81); } - .untangled-repo-action { + .untangled-repo-action{ border-color: rgb(55 65 81); background: rgb(31 41 55); } - .untangled-repo-action::before { + .untangled-repo-action::before{ box-shadow: inset 0 -2px 0 0 #111827; } - .untangled-repo-action-count { + .untangled-repo-action-count{ background: rgb(17 24 39); } - .untangled-repo-action-main:hover, - .untangled-repo-action-count:hover { + .untangled-repo-action-main:hover, .untangled-repo-action-count:hover{ background: rgb(55 65 81); } - .untangled-repo-action-count { + .untangled-repo-action-count{ border-left-color: rgb(55 65 81); } - .group:hover .untangled-repo-tab-idle { + .group:hover .untangled-repo-tab-idle{ background: rgb(55 65 81 / 0.25); } - .untangled-button:not(.btn-create):hover { + .untangled-button:not(.btn-create):hover{ background: rgb(55 65 81 / 0.4); } - .untangled-clone-popover { + .untangled-clone-popover{ border-color: rgb(55 65 81); background: rgb(31 41 55); color: rgb(243 244 246); } - .untangled-clone-url-row { + .untangled-clone-url-row{ border-color: rgb(75 85 99); } - .untangled-clone-url-text { + .untangled-clone-url-text{ background: rgb(55 65 81); color: rgb(243 244 246); } - .untangled-clone-copy { + .untangled-clone-copy{ border-left-color: rgb(75 85 99); background: rgb(31 41 55); color: rgb(156 163 175); } - .untangled-clone-copy:hover { + .untangled-clone-copy:hover{ color: rgb(229 231 235); } - .untangled-blob-card { + .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 { + .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 { + .untangled-topbar-search-box:focus-within{ outline-color: rgb(75 85 99); } - .untangled-topbar-search-input, - .untangled-search-page-input, - .untangled-repo-filter-input { + .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 { + .untangled-topbar-search-input::placeholder, .untangled-search-page-input::placeholder, .untangled-repo-filter-input::placeholder{ color: rgb(75 85 99); } - .untangled-topbar-search-kbd { + .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 { + .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 { + .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 { + .untangled-search-page-submit:hover, .untangled-repo-filter-reset:hover, .untangled-repo-filter-submit:hover{ color: rgb(229 231 235); } - .untangled-blob-commit-panel { + .untangled-blob-commit-panel{ border-bottom-color: rgb(55 65 81); } - .untangled-blob-commit-link { + .untangled-blob-commit-link{ background: rgb(17 24 39); color: rgb(209 213 219); } } @media (max-width: 767px) { - .untangled-repo-overview { + .untangled-repo-overview{ grid-template-columns: minmax(0, 1fr); } - .untangled-filter-grid { + .untangled-filter-grid{ grid-template-columns: auto minmax(0, 1fr) auto; } - .untangled-toggle-group { + .untangled-toggle-group{ grid-row: 2; grid-column: 1; } - .untangled-repo-filter-search { + .untangled-repo-filter-search{ grid-row: 1; grid-column: 1 / span 3; } - .untangled-filter-grid > a { + .untangled-filter-grid > a{ grid-row: 2; grid-column: 3; } - .untangled-file-tree-pane { + .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 { +.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 { +.untangled-home-promo-card-indigo h4{ color: rgb(55 48 163); } -.untangled-home-promo-card-indigo a { +.untangled-home-promo-card-indigo a{ color: rgb(67 56 202); } -.untangled-home-promo-card-indigo a:hover { +.untangled-home-promo-card-indigo a:hover{ color: rgb(49 46 129); } -.untangled-home-promo-card-green { +.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 { +.untangled-home-promo-card-green h4{ color: rgb(6 95 70); } -.untangled-home-promo-card-green a { +.untangled-home-promo-card-green a{ color: rgb(4 120 87); } -.untangled-home-promo-card-green a:hover { +.untangled-home-promo-card-green a:hover{ color: rgb(6 78 59); } -.untangled-home-promo-card-purple { +.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 { +.untangled-home-promo-card-purple h4{ color: rgb(107 33 168); } -.untangled-home-promo-card-purple a { +.untangled-home-promo-card-purple a{ color: rgb(126 34 206); } -.untangled-home-promo-card-purple a:hover { +.untangled-home-promo-card-purple a:hover{ color: rgb(88 28 135); } -.untangled-home-promo-card-blue { +.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 { +.untangled-home-promo-card-blue h4{ color: rgb(26 86 219); } -.untangled-home-promo-card-blue a { +.untangled-home-promo-card-blue a{ color: rgb(37 99 235); } -.untangled-home-promo-card-blue a:hover { +.untangled-home-promo-card-blue a:hover{ color: rgb(30 58 138); } -.untangled-home-promo-card-amber { +.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 { +.untangled-home-promo-card-amber h4{ color: rgb(180 83 9); } -.untangled-home-promo-card-amber a { +.untangled-home-promo-card-amber a{ color: rgb(217 119 6); } -.untangled-home-promo-card-amber a:hover { +.untangled-home-promo-card-amber a:hover{ color: rgb(120 53 4); } -.untangled-home-promo-card-rose { +.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 { +.untangled-home-promo-card-rose h4{ color: rgb(190 24 74); } -.untangled-home-promo-card-rose a { +.untangled-home-promo-card-rose a{ color: rgb(225 29 72); } -.untangled-home-promo-card-rose a:hover { +.untangled-home-promo-card-rose a:hover{ color: rgb(159 18 57); } -.untangled-home-promo-card-orange { +.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 { +.untangled-home-promo-card-orange h4{ color: rgb(194 65 12); } -.untangled-home-promo-card-orange a { +.untangled-home-promo-card-orange a{ color: rgb(234 88 12); } -.untangled-home-promo-card-orange a:hover { +.untangled-home-promo-card-orange a:hover{ color: rgb(154 52 18); } -.untangled-home-promo-card-teal { +.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 { +.untangled-home-promo-card-teal h4{ color: rgb(15 118 110); } -.untangled-home-promo-card-teal a { +.untangled-home-promo-card-teal a{ color: rgb(13 148 136); } -.untangled-home-promo-card-teal a:hover { +.untangled-home-promo-card-teal a:hover{ color: rgb(17 94 89); } -.untangled-home-promo-card-sky { +.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 { +.untangled-home-promo-card-sky h4{ color: rgb(3 105 161); } -.untangled-home-promo-card-sky a { +.untangled-home-promo-card-sky a{ color: rgb(2 132 199); } -.untangled-home-promo-card-sky a:hover { +.untangled-home-promo-card-sky a:hover{ color: rgb(7 89 133); } -.untangled-home-promo-card-pink { +.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 { +.untangled-home-promo-card-pink h4{ color: rgb(190 24 93); } -.untangled-home-promo-card-pink a { +.untangled-home-promo-card-pink a{ color: rgb(219 39 119); } -.untangled-home-promo-card-pink a:hover { +.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 { + .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 { + .untangled-home-promo-card-indigo h4{ color: rgb(199 210 254); } - .untangled-home-promo-card-indigo a { + .untangled-home-promo-card-indigo a{ color: rgb(165 180 252); } - .untangled-home-promo-card-green { + .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 { + .untangled-home-promo-card-green h4{ color: rgb(167 243 208); } - .untangled-home-promo-card-green a { + .untangled-home-promo-card-green a{ color: rgb(110 231 183); } - .untangled-home-promo-card-purple { + .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 { + .untangled-home-promo-card-purple h4{ color: rgb(233 213 255); } - .untangled-home-promo-card-purple a { + .untangled-home-promo-card-purple a{ color: rgb(216 180 254); } - .untangled-home-promo-card-blue { + .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 { + .untangled-home-promo-card-blue h4{ color: rgb(191 219 254); } - .untangled-home-promo-card-blue a { + .untangled-home-promo-card-blue a{ color: rgb(147 197 253); } - .untangled-home-promo-card-amber { + .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 { + .untangled-home-promo-card-amber h4{ color: rgb(254 243 199); } - .untangled-home-promo-card-amber a { + .untangled-home-promo-card-amber a{ color: rgb(253 230 138); } - .untangled-home-promo-card-rose { + .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 { + .untangled-home-promo-card-rose h4{ color: rgb(251 113 133); } - .untangled-home-promo-card-rose a { + .untangled-home-promo-card-rose a{ color: rgb(244 63 94); } - .untangled-home-promo-card-orange { + .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 { + .untangled-home-promo-card-orange h4{ color: rgb(253 186 116); } - .untangled-home-promo-card-orange a { + .untangled-home-promo-card-orange a{ color: rgb(251 146 60); } - .untangled-home-promo-card-teal { + .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 { + .untangled-home-promo-card-teal h4{ color: rgb(94 234 212); } - .untangled-home-promo-card-teal a { + .untangled-home-promo-card-teal a{ color: rgb(45 212 191); } - .untangled-home-promo-card-sky { + .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 { + .untangled-home-promo-card-sky h4{ color: rgb(125 211 252); } - .untangled-home-promo-card-sky a { + .untangled-home-promo-card-sky a{ color: rgb(56 189 248); } - .untangled-home-promo-card-pink { + .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 { + .untangled-home-promo-card-pink h4{ color: rgb(247 178 208); } - .untangled-home-promo-card-pink a { + .untangled-home-promo-card-pink a{ color: rgb(244 114 182); } } -.untangled-vouch-label { +.untangled-vouch-label{ display: grid; grid-template-columns: auto 1fr auto; } - -.untangled-topbar-menu { +.untangled-topbar-menu{ position: relative; } -.untangled-topbar-menu-summary { +.untangled-topbar-menu-summary{ cursor: pointer; list-style: none; display: flex; @@ -3759,11 +3417,11 @@ details[open] > .untangled-language-bar { gap: 0.5rem; } -.untangled-topbar-menu-summary::-webkit-details-marker { +.untangled-topbar-menu-summary::-webkit-details-marker{ display: none; } -.untangled-topbar-menu-dropdown { +.untangled-topbar-menu-dropdown{ position: absolute; right: 0; margin-top: 0.5rem; @@ -3778,13 +3436,13 @@ details[open] > .untangled-language-bar { } @media (prefers-color-scheme: dark) { - .untangled-topbar-menu-dropdown { + .untangled-topbar-menu-dropdown{ background-color: rgb(31 41 55); border-color: rgb(55 65 81); } } -.untangled-topbar-menu-item { +.untangled-topbar-menu-item{ display: flex; width: 100%; align-items: center; @@ -3799,32 +3457,32 @@ details[open] > .untangled-language-bar { cursor: pointer; } -.untangled-topbar-menu-item:hover { +.untangled-topbar-menu-item:hover{ background-color: rgb(243 244 246); text-decoration: none; } @media (prefers-color-scheme: dark) { - .untangled-topbar-menu-item:hover { + .untangled-topbar-menu-item:hover{ background-color: rgb(55 65 81 / 0.5); } } -.untangled-topbar-menu-item-danger { +.untangled-topbar-menu-item-danger{ color: rgb(239 68 68); } -.untangled-topbar-menu-item-danger:hover { +.untangled-topbar-menu-item-danger:hover{ background-color: rgb(254 242 242); } @media (prefers-color-scheme: dark) { - .untangled-topbar-menu-item-danger:hover { + .untangled-topbar-menu-item-danger:hover{ background-color: rgb(153 27 27 / 0.2); } } -.untangled-topbar-menu-add-account-icon { +.untangled-topbar-menu-add-account-icon{ display: flex; align-items: center; justify-content: center; @@ -3836,51 +3494,51 @@ details[open] > .untangled-language-bar { } @media (prefers-color-scheme: dark) { - .untangled-topbar-menu-add-account-icon { + .untangled-topbar-menu-add-account-icon{ background-color: rgb(75 85 99); color: rgb(229 231 235); } } -.untangled-topbar-menu-item-separator { +.untangled-topbar-menu-item-separator{ border-top: 1px solid rgb(229 231 235); } @media (prefers-color-scheme: dark) { - .untangled-topbar-menu-item-separator { + .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 { +.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 { +.btn-flat:hover{ background-color: rgb(229 231 235 / 0.5) !important; /* bg-gray-200/50 */ } @media (prefers-color-scheme: dark) { - .btn-flat { + .btn-flat{ background-color: transparent !important; border-color: transparent !important; } - .btn-flat:hover { + .btn-flat:hover{ background-color: rgb(55 65 81 / 0.5) !important; /* bg-gray-700/50 */ } } -.untangled-comment-highlight { +.untangled-comment-highlight{ position: relative; background-color: rgb(254 240 138 / 0.15) !important; border-radius: 0; } -.untangled-comment-highlight::before { +.untangled-comment-highlight::before{ content: ''; position: absolute; top: 0; @@ -3894,42 +3552,36 @@ details[open] > .untangled-language-bar { } /* 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 { +.-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 { +.-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 { + .untangled-comment-highlight{ background-color: rgb(161 98 7 / 0.1) !important; } - .untangled-comment-highlight::before { + .untangled-comment-highlight::before{ background-color: #ca8a04; } - .-ml-4.untangled-comment-highlight, - .-ml-4 > .untangled-comment-highlight, - .untangled-thread-reply.untangled-comment-highlight { + .-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 { +.untangled-timeline-step{ position: relative; padding-left: 2.25rem; } -.untangled-timeline-step::before { +.untangled-timeline-step::before{ content: ''; position: absolute; left: 12px; @@ -3938,22 +3590,22 @@ details[open] > .untangled-language-bar { } @media (prefers-color-scheme: dark) { - .untangled-timeline-step::before { + .untangled-timeline-step::before{ background-color: #374151; /* gray-700 */ } } -.untangled-timeline-step-1::before { +.untangled-timeline-step-1::before{ top: 16px; bottom: 0; } -.untangled-timeline-step-2::before { +.untangled-timeline-step-2::before{ top: 0; height: 16px; } -.untangled-timeline-circle { +.untangled-timeline-circle{ position: absolute; left: 0; top: 4px; @@ -3964,7 +3616,7 @@ details[open] > .untangled-language-bar { justify-content: center; } -.untangled-timeline-circle-inner { +.untangled-timeline-circle-inner{ width: 25px; height: 25px; border-radius: 9999px; @@ -3978,40 +3630,40 @@ details[open] > .untangled-language-bar { } @media (prefers-color-scheme: dark) { - .untangled-timeline-circle-inner { + .untangled-timeline-circle-inner{ background-color: #4b5563; /* bg-gray-600 */ color: #f3f4f6; /* text-gray-100 */ } } -.untangled-fork-step .untangled-timeline-circle { +.untangled-fork-step .untangled-timeline-circle{ top: 4px; } -.untangled-fork-step-title { +.untangled-fork-step-title{ min-height: 25px; display: flex; align-items: center; } -.untangled-repo-form-submit { +.untangled-repo-form-submit{ margin-top: 1rem; } /* Checkbox specific overrides to prevent extra layout padding */ -.untangled-checkbox { +.untangled-checkbox{ padding: 0 !important; margin: 0 !important; } -.untangled-watched-page { +.untangled-watched-page{ display: flex; min-width: 0; flex-direction: column; gap: 1rem; } -.untangled-watched-page-header { +.untangled-watched-page-header{ display: flex; align-items: flex-start; justify-content: space-between; @@ -4019,7 +3671,7 @@ details[open] > .untangled-language-bar { padding: 0.5rem 0.25rem; } -.untangled-watched-page-header h1 { +.untangled-watched-page-header h1{ display: flex; align-items: center; gap: 0.75rem; @@ -4028,31 +3680,16 @@ details[open] > .untangled-language-bar { font-weight: 750; } -.untangled-watched-list { - display: flex; - min-width: 0; - flex-direction: row; - align-items: flex-start; - gap: 1rem; - overflow-x: auto; - padding-bottom: 0.5rem; - scroll-snap-type: x proximity; - overscroll-behavior-x: contain; - scrollbar-width: thin; - scrollbar-color: rgb(107 114 128) transparent; - cursor: grab; -} - -.untangled-watched-list:active { +.untangled-watched-list:active{ cursor: grabbing; } -.untangled-watched-list:focus-visible { +.untangled-watched-list:focus-visible{ outline: 2px solid rgb(96 165 250); outline-offset: 0.25rem; } -.untangled-watched-repo { +.untangled-watched-repo{ min-width: 0; flex: 0 0 min(24rem, calc(100% - 3rem)); border: 1px solid rgb(229 231 235); @@ -4062,7 +3699,7 @@ details[open] > .untangled-language-bar { scroll-snap-align: start; } -.untangled-watched-repo-header { +.untangled-watched-repo-header{ display: flex; align-items: flex-start; justify-content: space-between; @@ -4070,13 +3707,13 @@ details[open] > .untangled-language-bar { padding: 0.75rem; } -.untangled-watched-repo-title { +.untangled-watched-repo-title{ font-size: 1rem; font-weight: 700; color: rgb(17 24 39); } -.untangled-watched-repo-description { +.untangled-watched-repo-description{ max-width: 65ch; margin: 0.35rem 0 0 1.5rem; color: rgb(107 114 128); @@ -4084,14 +3721,14 @@ details[open] > .untangled-language-bar { line-height: 1.4; } -.untangled-watched-quick-links { +.untangled-watched-quick-links{ display: flex; align-items: center; gap: 0.125rem; color: rgb(107 114 128); } -.untangled-watched-quick-links a { +.untangled-watched-quick-links a{ display: inline-flex; align-items: center; justify-content: center; @@ -4101,14 +3738,13 @@ details[open] > .untangled-language-bar { border-radius: 0.125rem; } -.untangled-watched-quick-links a:hover, -.untangled-watched-quick-links a:focus-visible { +.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 { +.untangled-watched-stats{ display: flex; flex-wrap: nowrap; align-items: center; @@ -4119,39 +3755,38 @@ details[open] > .untangled-language-bar { white-space: nowrap; } -.untangled-watch-stat { +.untangled-watch-stat{ display: inline-flex; align-items: center; gap: 0.4rem; } -.untangled-watch-stat strong { +.untangled-watch-stat strong{ color: rgb(17 24 39); } -.untangled-watch-stat-button { +.untangled-watch-stat-button{ cursor: pointer; list-style: none; } -.untangled-watch-stat-button::-webkit-details-marker { +.untangled-watch-stat-button::-webkit-details-marker{ display: none; } -.untangled-watch-stat-button:hover, -.untangled-watch-stat-button:focus-visible { +.untangled-watch-stat-button:hover, .untangled-watch-stat-button:focus-visible{ color: rgb(37 99 235); } -.untangled-watch-commit-details { +.untangled-watch-commit-details{ position: relative; } -.untangled-watch-commit-details:hover > .untangled-watch-commit-popover { +.untangled-watch-commit-details:hover > .untangled-watch-commit-popover{ display: block; } -.untangled-watch-commit-popover { +.untangled-watch-commit-popover{ position: absolute; top: calc(100% + 0.5rem); right: 0; @@ -4164,7 +3799,7 @@ details[open] > .untangled-language-bar { box-shadow: 0 8px 24px rgb(15 23 42 / 0.12); } -.untangled-watch-popover-heading { +.untangled-watch-popover-heading{ padding: 0.35rem 0.5rem 0.5rem; color: rgb(75 85 99); font-size: 0.75rem; @@ -4172,8 +3807,7 @@ details[open] > .untangled-language-bar { text-transform: lowercase; } -.untangled-watch-commit-row, -.untangled-watch-work-link { +.untangled-watch-commit-row, .untangled-watch-work-link{ display: flex; min-width: 0; align-items: center; @@ -4183,31 +3817,28 @@ details[open] > .untangled-language-bar { 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 { +.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 { +.untangled-watch-commit-hash{ font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: rgb(37 99 235); } -.untangled-watched-work-grid { +.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 { +.untangled-watched-work-grid section{ min-width: 0; } -.untangled-watched-work-grid h2 { +.untangled-watched-work-grid h2{ margin: 0 0 0.5rem; color: rgb(75 85 99); font-size: 0.75rem; @@ -4215,38 +3846,37 @@ details[open] > .untangled-language-bar { text-transform: lowercase; } -.untangled-watch-work-list { +.untangled-watch-work-list{ display: flex; flex-direction: column; gap: 0.125rem; } -.untangled-watch-muted, -.untangled-watch-loading { +.untangled-watch-muted, .untangled-watch-loading{ color: rgb(107 114 128); font-size: 0.8125rem; } -.untangled-watch-loading { +.untangled-watch-loading{ display: flex; align-items: center; gap: 0.5rem; padding: 1rem 0.25rem; } -.untangled-watch-empty { +.untangled-watch-empty{ border: 1px dashed rgb(209 213 219); padding: 2rem 1rem; text-align: center; } -.untangled-watch-empty h2 { +.untangled-watch-empty h2{ margin: 0; font-size: 1rem; font-weight: 700; } -.untangled-watch-empty p { +.untangled-watch-empty p{ max-width: 40ch; margin: 0.5rem auto 0; color: rgb(107 114 128); @@ -4254,51 +3884,516 @@ details[open] > .untangled-language-bar { } @media (prefers-color-scheme: dark) { - .untangled-watched-repo, - .untangled-watched-stats { + .untangled-watched-repo, .untangled-watched-stats{ border-color: rgb(55 65 81); } - .untangled-watched-repo, - .untangled-watch-commit-popover { + .untangled-watched-repo, .untangled-watch-commit-popover{ background: rgb(31 41 55); } - .untangled-watched-repo-title, - .untangled-watch-stat strong { + .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 { + .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 { + .untangled-watch-empty{ border-color: rgb(75 85 99); } } @media (max-width: 640px) { - .untangled-watched-page-header, - .untangled-watched-repo-header { + .untangled-watched-page-header, .untangled-watched-repo-header{ flex-direction: column; } - .untangled-watched-quick-links { + .untangled-watched-quick-links{ align-self: flex-end; } - .untangled-watched-work-grid { + .untangled-watched-work-grid{ grid-template-columns: minmax(0, 1fr); } - .untangled-watched-repo { + .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-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; + color: rgb(107 114 128); + font-size: 0.75rem; +} + +.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; +} diff --git a/src/pages/home.tsx b/src/pages/home.tsx index 27e772d..588d944 100644 --- a/src/pages/home.tsx +++ b/src/pages/home.tsx @@ -355,72 +355,153 @@ export const HomePage: Component = () => { -