thunderbird-patch-review

Easy-to-use patch review interface for Thunderbird

Contribute: ~marcc/thunderbird-review-plugin@lists.sr.ht

git clone git://mccd.space/thunderbird-patch-review

review.css (10355B)

 :root {
   --bg: #ffffff;
   --fg: #1f2328;
   --muted: #656d76;
   --border: #d1d9e0;
   --surface: #f6f8fa;
   --accent: #0969da;
   --add-bg: #dafbe1;
   --add-gutter: #aceebb;
   --del-bg: #ffebe9;
   --del-gutter: #ffcecb;
   --hunk-bg: #ddf4ff;
   --comment-bg: #fff8c5;
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
     --bg: #0d1117;
     --fg: #e6edf3;
     --muted: #8d96a0;
     --border: #30363d;
     --surface: #161b22;
     --accent: #4493f8;
     --add-bg: #12261e;
     --add-gutter: #1b4721;
     --del-bg: #25171c;
     --del-gutter: #542426;
     --hunk-bg: #121d2f;
     --comment-bg: #272115;
   }
 }
 
 * { box-sizing: border-box; }
 
 /* The hidden attribute must always win, even over display: flex rules. */
 [hidden] { display: none !important; }
 
 body {
   margin: 0;
   background: var(--bg);
   color: var(--fg);
   font: 13px/1.5 -apple-system, "Segoe UI", Cantarell, Ubuntu, sans-serif;
 }
 
 #topbar {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
   padding: 0.5rem 1rem;
   border-bottom: 1px solid var(--border);
   background: var(--surface);
   position: sticky;
   top: 0;
   z-index: 2;
 }
 
 #series-nav {
   display: flex;
   align-items: center;
   justify-content: flex-start;
   gap: 0.4rem;
   flex-wrap: wrap;
   margin: 0.6rem 0;
 }
 
 #series-title {
   font-weight: 600;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
 #actions {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   flex-shrink: 0;
 }
 
 
 #repo-path {
   max-width: 18rem;
   padding: 0.3rem 0.6rem;
   border: 1px solid var(--border);
   border-radius: 6px;
   background: var(--bg);
   color: var(--fg);
   font-family: ui-monospace, monospace;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   user-select: none;
   cursor: pointer;
   text-align: left;
 }
 
 #repo-path .repo-branch { color: var(--muted); }
 #repo-path.error .repo-sep,
 #repo-path.error .repo-branch { color: inherit; }
 #repo-path:hover { background: var(--hunk-bg); }
 #repo-path.error { cursor: pointer; }
 #repo-path.error {
   border-color: #cf222e;
   color: #cf222e;
 }
 @media (prefers-color-scheme: dark) {
   #repo-path.error { border-color: #f85149; color: #f85149; }
 }
 
 /* A joined cluster: the repo chip and the Apply split read as one control.
    Children sit flush; inner borders merge and inner corners flatten. */
 .cluster {
   display: flex;
   align-items: stretch;
 }
 .cluster > #repo-path {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
 .cluster > .split {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
 .cluster > .split > button:first-child {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
   border-left: 0;
 }
 
 button {
   padding: 0.3rem 0.8rem;
   border: 1px solid var(--border);
   border-radius: 6px;
   background: var(--surface);
   color: var(--fg);
   cursor: pointer;
 }
 
 button:hover { background: var(--hunk-bg); }
 button:disabled { opacity: 0.5; cursor: not-allowed; }
 button:disabled:hover { background: inherit; opacity: 0.5; }
 button.primary:disabled { background: var(--accent); border-color: var(--accent); color: #fff; }
 button.primary:disabled:hover { opacity: 0.5; }
 
 .split .menu button.danger {
   color: #cf222e;
 }
 .split .menu button.danger:hover {
   background: #cf222e;
   color: #fff;
 }
 @media (prefers-color-scheme: dark) {
   .split .menu button.danger { color: #f85149; }
   .split .menu button.danger:hover { background: #f85149; color: #0d1117; }
 }
 button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
 button.primary:hover { color: #fff; opacity: 0.9; }
 
 .split {
   position: relative;
   display: flex;
 }
 
 .split > button:first-child {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
 
 .split > .menu-toggle {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
   border-left-color: rgba(255, 255, 255, 0.35);
   padding: 0.3rem 0.45rem;
 }
 
 .split .menu {
   position: absolute;
   top: calc(100% + 4px);
   right: 0;
   display: flex;
   flex-direction: column;
   min-width: 12rem;
   border: 1px solid var(--border);
   border-radius: 6px;
   background: var(--surface);
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
   z-index: 4;
   overflow: hidden;
 }
 
 .split .menu button {
   border: 0;
   border-radius: 0;
   background: none;
   text-align: left;
   padding: 0.45rem 0.8rem;
 }
 
 .split .menu button:hover {
   background: var(--hunk-bg);
   color: var(--fg);
 }
 
 .patch-box {
   margin: 0 0 1rem;
   border: 1px solid var(--border);
   border-radius: 6px;
   background: var(--surface);
   overflow: hidden;
 }
 
 #series-nav .pill {
   padding: 0.2rem 0.7rem;
   border: 1px solid var(--border);
   border-radius: 999px;
   cursor: pointer;
   color: var(--muted);
 }
 
 #series-nav .pill.active {
   border-color: var(--accent);
   color: var(--accent);
   font-weight: 600;
 }
 
 #series-nav .pill .badge {
   display: inline-block;
   min-width: 1.2em;
   margin-left: 0.35em;
   border-radius: 999px;
   background: var(--accent);
   color: #fff;
   font-size: 11px;
   text-align: center;
 }
 
 #content { padding: 0 1rem 4rem; max-width: 72rem; margin: 0 auto; }
 
 .commit-message {
   position: relative;
   margin: 0;
   padding: 0.8rem 1rem;
   border: 0;
   border-bottom: 1px solid var(--border);
   border-radius: 0;
   background: transparent;
   white-space: pre-wrap;
   font-family: ui-monospace, monospace;
 }
 
 .commit-message .btn-general {
   display: block;
   margin: 0.6rem 0 0;
 }
 
 .commit-message .patch-headers {
   margin: 0 0 0.4rem;
   font-family: ui-monospace, "Cascadia Mono", "Source Code Pro", monospace;
   color: var(--fg);
 }
 .commit-message .patch-headers dt {
   display: inline;
   color: var(--fg);
   margin-right: 0.3em;
 }
 .commit-message .patch-headers dd {
   display: inline;
   margin: 0;
   color: var(--fg);
 }
 .commit-message .patch-headers code {
   font-family: inherit;
   color: var(--fg);
 }
 .commit-message .patch-headers > dt + dd::after { content: "\A"; white-space: pre; }
 
 .file {
   margin-bottom: 1rem;
   border: 1px solid var(--border);
   border-radius: 6px;
   overflow: hidden;
 }
 
 .file > summary {
   padding: 0.4rem 0.8rem;
   background: var(--surface);
   font-family: ui-monospace, monospace;
   font-weight: 600;
   cursor: pointer;
 }
 
 .file .file-note { padding: 0.4rem 0.8rem; color: var(--muted); }
 
 .binary-note {
   padding: 0.4rem 0.8rem 0.6rem;
   color: var(--muted);
   border-left: 3px solid #d1242f;
 }
 .binary-note .file-note { padding: 0; }
 .binary-note button { margin-top: 0.4rem; }
 .binary-note .binary-raw {
   margin: 0.5rem 0 0;
   padding: 0.5rem 0.7rem;
   max-height: 16rem;
   overflow: auto;
   border: 1px solid var(--border);
   border-radius: 6px;
   background: var(--bg);
   font: 11px/1.4 ui-monospace, monospace;
   white-space: pre-wrap;
   color: var(--muted);
 }
 
 table.diff {
   width: 100%;
   border-collapse: collapse;
   font: 12px/1.45 ui-monospace, "Cascadia Mono", "Source Code Pro", monospace;
 }
 
 table.diff td { padding: 0 0.5em; vertical-align: top; }
 
 td.gutter {
   width: 3em;
   min-width: 3em;
   text-align: right;
   color: var(--muted);
   user-select: none;
   border-right: 1px solid var(--border);
 }
 
 td.code { white-space: pre-wrap; word-break: break-all; width: 100%; }
 
 tr.hunk-header td {
   background: var(--hunk-bg);
   color: var(--muted);
   padding: 0.2em 0.5em;
 }
 
 tr.line { cursor: pointer; }
 tr.line:hover td.code { box-shadow: inset 2px 0 0 var(--accent); }
 tr.line.add td { background: var(--add-bg); }
 tr.line.add td.gutter { background: var(--add-gutter); }
 tr.line.del td { background: var(--del-bg); }
 tr.line.del td.gutter { background: var(--del-gutter); }
 tr.line.commented td.code { box-shadow: inset 3px 0 0 var(--accent); }
 
 /* Intra-line highlight: the span that actually changed within a line. */
 tr.line.add td.code .hl { background: var(--add-gutter); border-radius: 2px; }
 tr.line.del td.code .hl { background: var(--del-gutter); border-radius: 2px; }
 
 tr.comment-row td { padding: 0; }
 
 .comment-box {
   margin: 0.3rem 2rem 0.5rem 3.5rem;
   border: 1px solid var(--border);
   border-radius: 6px;
   background: var(--comment-bg);
   font-family: -apple-system, "Segoe UI", sans-serif;
 }
 
 .comment-box .comment-text { padding: 0.5rem 0.8rem; white-space: pre-wrap; }
 
 .comment-box textarea {
   display: block;
   width: 100%;
   min-height: 4.5em;
   padding: 0.5rem 0.8rem;
   border: 0;
   border-bottom: 1px solid var(--border);
   background: transparent;
   color: var(--fg);
   font: inherit;
   resize: vertical;
 }
 
 .comment-box .comment-actions {
   display: flex;
   gap: 0.4rem;
   justify-content: flex-end;
   padding: 0.3rem 0.5rem;
   /* The editor inherits the yellow comment-box bg; the action row should read
      as a distinct footer, not blend into the yellow. */
   background: var(--surface);
   border-radius: 0 0 5px 5px;
 }
 
 #send-confirm {
   position: fixed;
   inset: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   background: rgba(0, 0, 0, 0.4);
   z-index: 5;
 }
 
 #send-confirm .modal-card {
   width: min(32rem, 90vw);
   border: 1px solid var(--border);
   border-radius: 8px;
   background: var(--bg);
   box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
   padding: 1.2rem 1.4rem;
 }
 
 #send-confirm h2 {
   margin: 0 0 0.4rem;
   font-size: 15px;
 }
 
 #send-confirm-summary {
   margin: 0 0 0.8rem;
   color: var(--muted);
   font-size: 12px;
 }
 
 #send-confirm #srht-status {
   display: flex;
   align-items: center;
   gap: 0.4rem;
   margin: 0 0 0.8rem;
   color: var(--muted);
 }
 
 #send-confirm #srht-status select {
   padding: 0.2rem 0.3rem;
   border: 1px solid var(--border);
   border-radius: 6px;
   background: var(--bg);
   color: var(--fg);
   font: inherit;
 }
 
 #send-confirm .modal-actions {
   display: flex;
   gap: 0.5rem;
   justify-content: flex-end;
 }
 
 #status {
   position: fixed;
   inset: auto 1rem 1rem auto;
   width: min(44rem, 90vw);
   max-height: 60vh;
   display: flex;
   flex-direction: column;
   border: 1px solid var(--border);
   border-radius: 6px;
   background: var(--surface);
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
   z-index: 3;
 }
 
 #status-text {
   margin: 0;
   padding: 0.8rem 1rem;
   overflow: auto;
   font: 12px/1.45 ui-monospace, monospace;
   white-space: pre-wrap;
 }
 
 #status-buttons {
   display: flex;
   gap: 0.5rem;
   justify-content: flex-end;
   padding: 0.5rem;
   border-top: 1px solid var(--border);
 }
 
 .error { color: #d1242f; }
 @media (prefers-color-scheme: dark) { .error { color: #ff7b72; } }