Polar
RU Sign in
rin
Public Open-source lightweight git hosting.
Code Issues Pull requests Releases 9 Activity

fix(ui): use solid surfaces and inset page backgrounds

53ad704 Browse files
R rin · 2026-10-17 07:01 UTC
12 files changed +278 -69
assets/input.css
+227 -31
... ... @@ -38,11 +38,12 @@ html[data-theme="light"] {
38 38 --secondary: 0 0% 95%;
39 39 --secondary-foreground: 0 0% 6.7%;
40 40 --muted: 0 0% 95%;
41 - --muted-foreground: 0 0% 45%;
41 + --muted-foreground: 0 0% 38%;
42 42 --accent: 0 0% 93%;
43 43 --accent-foreground: 0 0% 6.7%;
44 44 --destructive: 0 72% 46%;
45 45 --destructive-foreground: 0 0% 100%;
46 + --destructive-surface: 0 72% 96%;
46 47 --border: 0 0% 90%;
47 48 --input: 0 0% 89%;
48 49 --ring: 0 0% 6.7%;
... ... @@ -66,21 +67,22 @@ html[data-theme="light"] {
66 67 html[data-theme="dark"] {
67 68 --background: 0 0% 6.7%;
68 69 --foreground: 0 0% 100%;
69 - --card: 0 0% 9%;
70 + --card: 0 0% 10%;
70 71 --card-foreground: 0 0% 100%;
71 - --popover: 0 0% 9.5%;
72 + --popover: 0 0% 11%;
72 73 --popover-foreground: 0 0% 100%;
73 74 --primary: 0 0% 100%;
74 75 --primary-foreground: 0 0% 6.7%;
75 - --secondary: 0 0% 13%;
76 + --secondary: 0 0% 15%;
76 77 --secondary-foreground: 0 0% 100%;
77 - --muted: 0 0% 12%;
78 - --muted-foreground: 0 0% 65%;
79 - --accent: 0 0% 15%;
78 + --muted: 0 0% 14%;
79 + --muted-foreground: 0 0% 74%;
80 + --accent: 0 0% 17%;
80 81 --accent-foreground: 0 0% 100%;
81 82 --destructive: 0 72% 58%;
82 83 --destructive-foreground: 0 0% 98%;
83 - --border: 0 0% 16%;
84 + --destructive-surface: 0 45% 15%;
85 + --border: 0 0% 20%;
84 86 --input: 0 0% 17%;
85 87 --ring: 0 0% 85%;
86 88
... ... @@ -103,21 +105,22 @@ html[data-theme="dark"] {
103 105 html[data-theme="system"] {
104 106 --background: 0 0% 6.7%;
105 107 --foreground: 0 0% 100%;
106 - --card: 0 0% 9%;
108 + --card: 0 0% 10%;
107 109 --card-foreground: 0 0% 100%;
108 - --popover: 0 0% 9.5%;
110 + --popover: 0 0% 11%;
109 111 --popover-foreground: 0 0% 100%;
110 112 --primary: 0 0% 100%;
111 113 --primary-foreground: 0 0% 6.7%;
112 - --secondary: 0 0% 13%;
114 + --secondary: 0 0% 15%;
113 115 --secondary-foreground: 0 0% 100%;
114 - --muted: 0 0% 12%;
115 - --muted-foreground: 0 0% 65%;
116 - --accent: 0 0% 15%;
116 + --muted: 0 0% 14%;
117 + --muted-foreground: 0 0% 74%;
118 + --accent: 0 0% 17%;
117 119 --accent-foreground: 0 0% 100%;
118 120 --destructive: 0 72% 58%;
119 121 --destructive-foreground: 0 0% 98%;
120 - --border: 0 0% 16%;
122 + --destructive-surface: 0 45% 15%;
123 + --border: 0 0% 20%;
121 124 --input: 0 0% 17%;
122 125 --ring: 0 0% 85%;
123 126 --diff-add-bg: 142 50% 12%;
... ... @@ -293,6 +296,48 @@ html[data-sidebar="collapsed"] .sidebar-inner {
293 296 display: flex;
294 297 flex-direction: column;
295 298 min-height: 100vh;
299 + position: relative;
300 + isolation: isolate;
301 +}
302 +
303 +.page-bg {
304 + position: absolute;
305 + inset: 0;
306 + z-index: 0;
307 + left: 0;
308 + overflow: hidden;
309 + pointer-events: none;
310 + background: hsl(var(--background));
311 + transition: left 200ms cubic-bezier(0.16, 1, 0.3, 1);
312 +}
313 +.page-bg img {
314 + position: absolute;
315 + inset: 0 0 auto;
316 + width: 100%;
317 + height: clamp(28rem, 92vh, 54rem);
318 + object-fit: cover;
319 + object-position: center 28%;
320 + opacity: 0.9;
321 + filter: saturate(0.9) contrast(0.97);
322 + -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.96) 38%, rgba(0, 0, 0, 0.62) 72%, transparent 100%);
323 + mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.96) 38%, rgba(0, 0, 0, 0.62) 72%, transparent 100%);
324 +}
325 +.page-bg::after {
326 + content: "";
327 + position: absolute;
328 + inset: 0;
329 + background:
330 + radial-gradient(118% 86% at 50% 0%, transparent 16%, hsl(var(--background) / 0.36) 52%, hsl(var(--background) / 0.9) 86%, hsl(var(--background)) 100%),
331 + linear-gradient(to bottom,
332 + hsl(var(--background) / 0.5) 0%,
333 + hsl(var(--background) / 0.6) 32%,
334 + hsl(var(--background) / 0.88) 68%,
335 + hsl(var(--background)) 100%);
336 +}
337 +.app-col > .mobile-topbar,
338 +.app-col > .app-main {
339 + position: relative;
340 + z-index: 1;
296 341 }
297 342
298 343 .app-main {
... ... @@ -321,6 +366,12 @@ html[data-sidebar="collapsed"] .sidebar-inner {
321 366 .app-sidebar {
322 367 display: flex;
323 368 }
369 + .page-bg {
370 + left: 0.75rem;
371 + }
372 + html[data-sidebar="collapsed"] .page-bg {
373 + left: 0;
374 + }
324 375 .sidebar-expand-btn {
325 376 display: inline-flex;
326 377 }
... ... @@ -492,7 +543,8 @@ html[data-sidebar="collapsed"] .sidebar-inner {
492 543 color: hsl(var(--primary-foreground));
493 544 }
494 545 .btn-default:hover, .btn-primary:hover {
495 - opacity: 0.9;
546 + filter: brightness(0.92);
547 + opacity: 1;
496 548 }
497 549 .btn-secondary {
498 550 background-color: hsl(var(--secondary));
... ... @@ -503,7 +555,7 @@ html[data-sidebar="collapsed"] .sidebar-inner {
503 555 background-color: hsl(var(--accent));
504 556 }
505 557 .btn-outline {
506 - background-color: transparent;
558 + background-color: hsl(var(--card));
507 559 color: hsl(var(--foreground));
508 560 border-color: hsl(var(--border));
509 561 }
... ... @@ -512,7 +564,7 @@ html[data-sidebar="collapsed"] .sidebar-inner {
512 564 color: hsl(var(--accent-foreground));
513 565 }
514 566 .btn-ghost {
515 - background-color: transparent;
567 + background-color: hsl(var(--background));
516 568 color: hsl(var(--muted-foreground));
517 569 }
518 570 .btn-ghost:hover {
... ... @@ -700,7 +752,7 @@ input[type="radio"]:focus-visible {
700 752 .card-footer {
701 753 padding: 0.65rem 0.9rem;
702 754 border-top: 1px solid hsl(var(--border));
703 - background-color: hsl(var(--muted) / 0.3);
755 + background-color: hsl(var(--muted));
704 756 }
705 757
706 758 /* Badges */
... ... @@ -718,7 +770,7 @@ input[type="radio"]:focus-visible {
718 770 background-color: hsl(var(--secondary));
719 771 }
720 772 .badge-outline {
721 - background-color: transparent;
773 + background-color: hsl(var(--background));
722 774 color: hsl(var(--muted-foreground));
723 775 }
724 776 .badge-primary {
... ... @@ -727,7 +779,7 @@ input[type="radio"]:focus-visible {
727 779 border-color: transparent;
728 780 }
729 781 .badge-destructive {
730 - background-color: hsl(var(--destructive) / 0.12);
782 + background-color: hsl(var(--destructive-surface));
731 783 color: hsl(var(--destructive));
732 784 border-color: hsl(var(--destructive) / 0.3);
733 785 }
... ... @@ -793,9 +845,9 @@ kbd, .kbd {
793 845 align-items: center;
794 846 gap: 0.35rem;
795 847 padding: 0.28rem 0.65rem;
796 - border: 1px solid hsl(var(--border));
848 + border: 1px solid hsl(var(--border) / 0.9);
797 849 border-radius: 9999px;
798 - background: hsl(var(--muted) / 0.25);
850 + background: hsl(var(--card));
799 851 font-size: 0.75rem;
800 852 color: hsl(var(--muted-foreground));
801 853 text-decoration: none;
... ... @@ -839,7 +891,7 @@ kbd, .kbd {
839 891 padding: 0.2rem;
840 892 border: 1px solid hsl(var(--border));
841 893 border-radius: 999px;
842 - background: hsl(var(--muted) / 0.25);
894 + background: hsl(var(--muted));
843 895 margin-bottom: 1rem;
844 896 overflow-x: auto;
845 897 }
... ... @@ -883,7 +935,7 @@ kbd, .kbd {
883 935 border-bottom: none;
884 936 }
885 937 .dense-row:hover {
886 - background-color: hsl(var(--accent) / 0.5);
938 + background-color: hsl(var(--accent));
887 939 }
888 940
889 941 .table-wrap {
... ... @@ -904,7 +956,7 @@ kbd, .kbd {
904 956 color: hsl(var(--muted-foreground));
905 957 padding: 0.5rem 0.75rem;
906 958 border-bottom: 1px solid hsl(var(--border));
907 - background-color: hsl(var(--muted) / 0.35);
959 + background-color: hsl(var(--muted));
908 960 font-size: 0.75rem;
909 961 }
910 962 .table td {
... ... @@ -1137,6 +1189,7 @@ kbd, .kbd {
1137 1189 padding: 2rem 1rem;
1138 1190 border: 1px dashed hsl(var(--border));
1139 1191 border-radius: var(--radius);
1192 + background-color: hsl(var(--card));
1140 1193 color: hsl(var(--muted-foreground));
1141 1194 }
1142 1195
... ... @@ -1232,7 +1285,7 @@ kbd, .kbd {
1232 1285 font-size: 0.84em;
1233 1286 }
1234 1287 .markdown-body pre {
1235 - background-color: hsl(var(--muted) / 0.6);
1288 + background-color: hsl(var(--muted));
1236 1289 border: 1px solid hsl(var(--border));
1237 1290 border-radius: var(--radius);
1238 1291 padding: 0.75rem 0.9rem;
... ... @@ -1437,7 +1490,7 @@ kbd, .kbd {
1437 1490 gap: 0.35rem;
1438 1491 border: 1px solid hsl(var(--border));
1439 1492 border-radius: var(--radius);
1440 - background: hsl(var(--muted) / 0.25);
1493 + background: hsl(var(--muted));
1441 1494 padding: 0.15rem 0.25rem 0.15rem 0.6rem;
1442 1495 min-width: 0;
1443 1496 }
... ... @@ -1458,7 +1511,7 @@ kbd, .kbd {
1458 1511 padding: 1.6rem 1rem;
1459 1512 border: 1.5px dashed hsl(var(--border));
1460 1513 border-radius: calc(var(--radius) * 1.3);
1461 - background: hsl(var(--muted) / 0.2);
1514 + background: hsl(var(--muted));
1462 1515 color: hsl(var(--muted-foreground));
1463 1516 cursor: pointer;
1464 1517 transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
... ... @@ -1469,7 +1522,7 @@ kbd, .kbd {
1469 1522 }
1470 1523 .upload-drop.drag {
1471 1524 border-color: hsl(var(--foreground) / 0.6);
1472 - background: hsl(var(--muted) / 0.5);
1525 + background: hsl(var(--accent));
1473 1526 color: hsl(var(--foreground));
1474 1527 }
1475 1528 /* Utility completion (classes used in templates but absent from the build) */
... ... @@ -1477,4 +1530,147 @@ kbd, .kbd {
1477 1530 .gap-1\.5 { gap: 0.375rem; }
1478 1531 .gap-5 { gap: 1.25rem; }
1479 1532 .mb-1\.5 { margin-bottom: 0.375rem; }
1480 -.pt-1 { padding-top: 0.25rem; }
1533 +.pt-1 { padding-top: 0.25rem; }
1534 +
1535 +/* Profile header sits directly on the page backdrop. */
1536 +.profile-hero {
1537 + position: relative;
1538 + padding: 0.6rem 0 0;
1539 + border: 0;
1540 + border-radius: 0;
1541 + background: transparent;
1542 +}
1543 +.profile-hero-content {
1544 + position: relative;
1545 +}
1546 +.has-page-bg .profile-hero h1,
1547 +.has-page-bg .profile-hero p,
1548 +.has-page-bg .profile-hero .text-muted {
1549 + text-shadow: 0 1px 16px hsl(var(--background) / 0.95);
1550 +}
1551 +
1552 +/* Media settings */
1553 +.background-preview {
1554 + position: relative;
1555 + width: 100%;
1556 + aspect-ratio: 16 / 6;
1557 + min-height: 7rem;
1558 + overflow: hidden;
1559 + border: 1px solid hsl(var(--border));
1560 + border-radius: calc(var(--radius) * 1.3);
1561 + background:
1562 + radial-gradient(100% 130% at 50% 30%, hsl(var(--muted)) 0%, hsl(var(--card)) 72%);
1563 +}
1564 +.background-preview img {
1565 + width: 100%;
1566 + height: 100%;
1567 + object-fit: cover;
1568 + object-position: center;
1569 + display: block;
1570 + -webkit-mask-image: radial-gradient(120% 145% at 50% 25%, #000 38%, rgba(0,0,0,0.86) 58%, transparent 100%);
1571 + mask-image: radial-gradient(120% 145% at 50% 25%, #000 38%, rgba(0,0,0,0.86) 58%, transparent 100%);
1572 +}
1573 +.background-preview::after {
1574 + content: "";
1575 + position: absolute;
1576 + inset: 0;
1577 + background: linear-gradient(to top, hsl(var(--background) / 0.75), hsl(var(--background) / 0.05));
1578 + pointer-events: none;
1579 +}
1580 +.background-preview.is-empty {
1581 + display: flex;
1582 + align-items: center;
1583 + justify-content: center;
1584 +}
1585 +.background-preview-placeholder {
1586 + color: hsl(var(--muted-foreground) / 0.7);
1587 +}
1588 +
1589 +/* Registration policy selector */
1590 +.registration-options {
1591 + display: grid;
1592 + grid-template-columns: repeat(3, minmax(0, 1fr));
1593 + gap: 0.55rem;
1594 +}
1595 +.registration-option {
1596 + display: flex;
1597 + align-items: flex-start;
1598 + gap: 0.6rem;
1599 + padding: 0.75rem;
1600 + border: 1px solid hsl(var(--border));
1601 + border-radius: calc(var(--radius) * 1.2);
1602 + background: hsl(var(--card));
1603 + cursor: pointer;
1604 + transition: border-color 0.15s ease, background-color 0.15s ease;
1605 +}
1606 +.registration-option:hover {
1607 + border-color: hsl(var(--foreground) / 0.28);
1608 + background: hsl(var(--accent));
1609 +}
1610 +.registration-option:has(input:checked) {
1611 + border-color: hsl(var(--foreground) / 0.72);
1612 + background: hsl(var(--secondary));
1613 +}
1614 +.registration-option input {
1615 + margin-top: 0.14rem;
1616 + flex-shrink: 0;
1617 +}
1618 +.registration-option strong,
1619 +.registration-option small {
1620 + display: block;
1621 +}
1622 +.registration-option strong {
1623 + font-size: 0.8rem;
1624 + line-height: 1.3;
1625 +}
1626 +.registration-option small {
1627 + margin-top: 0.18rem;
1628 + color: hsl(var(--muted-foreground));
1629 + font-size: 0.7rem;
1630 + line-height: 1.4;
1631 +}
1632 +
1633 +/* Admin actions */
1634 +.admin-row-actions {
1635 + display: flex;
1636 + align-items: center;
1637 + justify-content: flex-end;
1638 + gap: 0.25rem;
1639 + flex-wrap: wrap;
1640 +}
1641 +.admin-row-actions form {
1642 + margin: 0;
1643 + display: inline-flex;
1644 +}
1645 +.admin-repo-row {
1646 + gap: 0.75rem;
1647 +}
1648 +.admin-repo-link {
1649 + display: flex;
1650 + align-items: center;
1651 + gap: 0.6rem;
1652 + min-width: 0;
1653 + flex: 1;
1654 + color: inherit;
1655 + text-decoration: none;
1656 +}
1657 +.admin-repo-link:hover strong {
1658 + text-decoration: underline;
1659 + text-underline-offset: 2px;
1660 +}
1661 +
1662 +.segmented-btn {
1663 + text-decoration: none;
1664 +}
1665 +
1666 +@media (max-width: 760px) {
1667 + .registration-options {
1668 + grid-template-columns: 1fr;
1669 + }
1670 + .profile-hero {
1671 + padding: 0.35rem 0 0;
1672 + }
1673 + .background-preview {
1674 + aspect-ratio: 16 / 7;
1675 + }
1676 +}
internal/web/static/css/app.css
+29 -16
... ... @@ -43,6 +43,7 @@ html[data-theme="light"] {
43 43 --accent-foreground: 0 0% 6.7%;
44 44 --destructive: 0 72% 46%;
45 45 --destructive-foreground: 0 0% 100%;
46 + --destructive-surface: 0 72% 96%;
46 47 --border: 0 0% 90%;
47 48 --input: 0 0% 89%;
48 49 --ring: 0 0% 6.7%;
... ... @@ -66,21 +67,22 @@ html[data-theme="light"] {
66 67 html[data-theme="dark"] {
67 68 --background: 0 0% 6.7%;
68 69 --foreground: 0 0% 100%;
69 - --card: 0 0% 9%;
70 + --card: 0 0% 10%;
70 71 --card-foreground: 0 0% 100%;
71 - --popover: 0 0% 9.5%;
72 + --popover: 0 0% 11%;
72 73 --popover-foreground: 0 0% 100%;
73 74 --primary: 0 0% 100%;
74 75 --primary-foreground: 0 0% 6.7%;
75 - --secondary: 0 0% 13%;
76 + --secondary: 0 0% 15%;
76 77 --secondary-foreground: 0 0% 100%;
77 - --muted: 0 0% 12%;
78 - --muted-foreground: 0 0% 70%;
79 - --accent: 0 0% 15%;
78 + --muted: 0 0% 14%;
79 + --muted-foreground: 0 0% 74%;
80 + --accent: 0 0% 17%;
80 81 --accent-foreground: 0 0% 100%;
81 82 --destructive: 0 72% 58%;
82 83 --destructive-foreground: 0 0% 98%;
83 - --border: 0 0% 16%;
84 + --destructive-surface: 0 45% 15%;
85 + --border: 0 0% 20%;
84 86 --input: 0 0% 17%;
85 87 --ring: 0 0% 85%;
86 88
... ... @@ -103,21 +105,22 @@ html[data-theme="dark"] {
103 105 html[data-theme="system"] {
104 106 --background: 0 0% 6.7%;
105 107 --foreground: 0 0% 100%;
106 - --card: 0 0% 9%;
108 + --card: 0 0% 10%;
107 109 --card-foreground: 0 0% 100%;
108 - --popover: 0 0% 9.5%;
110 + --popover: 0 0% 11%;
109 111 --popover-foreground: 0 0% 100%;
110 112 --primary: 0 0% 100%;
111 113 --primary-foreground: 0 0% 6.7%;
112 - --secondary: 0 0% 13%;
114 + --secondary: 0 0% 15%;
113 115 --secondary-foreground: 0 0% 100%;
114 - --muted: 0 0% 12%;
115 - --muted-foreground: 0 0% 70%;
116 - --accent: 0 0% 15%;
116 + --muted: 0 0% 14%;
117 + --muted-foreground: 0 0% 74%;
118 + --accent: 0 0% 17%;
117 119 --accent-foreground: 0 0% 100%;
118 120 --destructive: 0 72% 58%;
119 121 --destructive-foreground: 0 0% 98%;
120 - --border: 0 0% 16%;
122 + --destructive-surface: 0 45% 15%;
123 + --border: 0 0% 20%;
121 124 --input: 0 0% 17%;
122 125 --ring: 0 0% 85%;
123 126 --diff-add-bg: 142 50% 12%;
... ... @@ -301,9 +304,11 @@ html[data-sidebar="collapsed"] .sidebar-inner {
301 304 position: absolute;
302 305 inset: 0;
303 306 z-index: 0;
307 + left: 0;
304 308 overflow: hidden;
305 309 pointer-events: none;
306 310 background: hsl(var(--background));
311 + transition: left 200ms cubic-bezier(0.16, 1, 0.3, 1);
307 312 }
308 313 .page-bg img {
309 314 position: absolute;
... ... @@ -361,6 +366,12 @@ html[data-sidebar="collapsed"] .sidebar-inner {
361 366 .app-sidebar {
362 367 display: flex;
363 368 }
369 + .page-bg {
370 + left: 0.75rem;
371 + }
372 + html[data-sidebar="collapsed"] .page-bg {
373 + left: 0;
374 + }
364 375 .sidebar-expand-btn {
365 376 display: inline-flex;
366 377 }
... ... @@ -532,7 +543,8 @@ html[data-sidebar="collapsed"] .sidebar-inner {
532 543 color: hsl(var(--primary-foreground));
533 544 }
534 545 .btn-default:hover, .btn-primary:hover {
535 - opacity: 0.9;
546 + filter: brightness(0.92);
547 + opacity: 1;
536 548 }
537 549 .btn-secondary {
538 550 background-color: hsl(var(--secondary));
... ... @@ -767,7 +779,7 @@ input[type="radio"]:focus-visible {
767 779 border-color: transparent;
768 780 }
769 781 .badge-destructive {
770 - background-color: hsl(var(--destructive) / 0.12);
782 + background-color: hsl(var(--destructive-surface));
771 783 color: hsl(var(--destructive));
772 784 border-color: hsl(var(--destructive) / 0.3);
773 785 }
... ... @@ -1177,6 +1189,7 @@ kbd, .kbd {
1177 1189 padding: 2rem 1rem;
1178 1190 border: 1px dashed hsl(var(--border));
1179 1191 border-radius: var(--radius);
1192 + background-color: hsl(var(--card));
1180 1193 color: hsl(var(--muted-foreground));
1181 1194 }
1182 1195
internal/web/views/pages/branches.html
+2 -2
... ... @@ -12,7 +12,7 @@
12 12 </div>
13 13
14 14 {{if and .CanWrite (not .IsEmpty)}}
15 - <form method="post" action="/{{.Repo.OwnerUsername}}/{{.Repo.Name}}/branches" class="card-body flex items-center flex-wrap gap-2" style="border-bottom:1px solid hsl(var(--border));background:hsl(var(--muted)/0.25);">
15 + <form method="post" action="/{{.Repo.OwnerUsername}}/{{.Repo.Name}}/branches" class="card-body flex items-center flex-wrap gap-2" style="border-bottom:1px solid hsl(var(--border));background:hsl(var(--muted));">
16 16 <input type="hidden" name="_csrf" value="{{.CSRFToken}}">
17 17 <input name="branch_name" type="text" class="input font-mono" style="flex:1 1 12rem;height:1.9rem;" placeholder="{{t .Lang "repo.branch.name_ph"}}" required maxlength="100">
18 18 <select name="from_ref" class="select font-mono" style="flex:0 1 11rem;height:1.9rem;">
... ... @@ -75,7 +75,7 @@
75 75 </div>
76 76
77 77 {{if and .CanWrite (not .IsEmpty)}}
78 - <form method="post" action="/{{.Repo.OwnerUsername}}/{{.Repo.Name}}/tags" class="card-body flex items-center flex-wrap gap-2" style="border-bottom:1px solid hsl(var(--border));background:hsl(var(--muted)/0.25);">
78 + <form method="post" action="/{{.Repo.OwnerUsername}}/{{.Repo.Name}}/tags" class="card-body flex items-center flex-wrap gap-2" style="border-bottom:1px solid hsl(var(--border));background:hsl(var(--muted));">
79 79 <input type="hidden" name="_csrf" value="{{.CSRFToken}}">
80 80 <input name="tag_name" type="text" class="input font-mono" style="flex:0 1 9rem;height:1.9rem;" placeholder="{{t .Lang "repo.tag.name_ph"}}" required maxlength="80">
81 81 <select name="from_ref" class="select font-mono" style="flex:0 1 10rem;height:1.9rem;">
internal/web/views/pages/commit.html
+1 -1
... ... @@ -18,7 +18,7 @@
18 18 </div>
19 19
20 20 {{if .Detail.Commit.Body}}
21 - <div class="card-body" style="border-bottom:1px solid hsl(var(--border));background:hsl(var(--muted)/0.25);">
21 + <div class="card-body" style="border-bottom:1px solid hsl(var(--border));background:hsl(var(--muted));">
22 22 <pre class="font-mono text-xs" style="margin:0;white-space:pre-wrap;">{{.Detail.Commit.Body}}</pre>
23 23 </div>
24 24 {{end}}
internal/web/views/pages/issue_detail.html
+2 -2
... ... @@ -43,7 +43,7 @@
43 43
44 44 <!-- Issue Description Card -->
45 45 <div class="card mb-4">
46 - <div class="card-header text-xs" style="padding:0.5rem 0.85rem;background:hsl(var(--muted)/0.3);">
46 + <div class="card-header text-xs" style="padding:0.5rem 0.85rem;background:hsl(var(--muted));">
47 47 <div class="flex items-center gap-2">
48 48 {{avatar .Issue.AuthorUsername .Issue.AuthorAvatar}}
49 49 <a href="/{{.Issue.AuthorUsername}}" class="font-semibold">@{{.Issue.AuthorUsername}}</a>
... ... @@ -64,7 +64,7 @@
64 64 <div class="flex flex-col gap-3 mb-4">
65 65 {{range .Comments}}
66 66 <div class="card">
67 - <div class="card-header text-xs" style="padding:0.5rem 0.85rem;background:hsl(var(--muted)/0.2);">
67 + <div class="card-header text-xs" style="padding:0.5rem 0.85rem;background:hsl(var(--muted));">
68 68 <div class="flex items-center gap-2">
69 69 {{avatar .AuthorUsername .AuthorAvatar}}
70 70 <a href="/{{.AuthorUsername}}" class="font-semibold">@{{.AuthorUsername}}</a>
internal/web/views/pages/pull_detail.html
+8 -8
... ... @@ -34,7 +34,7 @@
34 34
35 35 <div class="flex items-center gap-2 mt-2 text-xs text-muted flex-wrap">
36 36 {{if eq .PR.Status "merged"}}
37 - <span class="badge font-medium flex items-center gap-1.5" style="background:hsl(var(--diff-add-bg));color:hsl(var(--diff-add-fg));border-color:hsl(var(--diff-add-fg)/0.35);">
37 + <span class="badge font-medium flex items-center gap-1.5" style="background:hsl(var(--diff-add-bg));color:hsl(var(--diff-add-fg));border-color:hsl(var(--diff-add-fg));">
38 38 {{icon "git-merge" "size-3.5"}} {{t .Lang "pulls.status.merged"}}
39 39 </span>
40 40 {{else if eq .PR.Status "closed"}}
... ... @@ -172,7 +172,7 @@
172 172
173 173 <!-- Initial PR Description Card -->
174 174 <div class="card mb-4">
175 - <div class="card-header text-xs" style="padding:0.5rem 0.85rem;background:hsl(var(--muted)/0.3);">
175 + <div class="card-header text-xs" style="padding:0.5rem 0.85rem;background:hsl(var(--muted));">
176 176 <div class="flex items-center gap-2">
177 177 {{avatar .PR.AuthorUsername .PR.AuthorAvatar}}
178 178 <a href="/{{.PR.AuthorUsername}}" class="font-semibold">@{{.PR.AuthorUsername}}</a>
... ... @@ -193,7 +193,7 @@
193 193 <div class="flex flex-col gap-3 mb-4">
194 194 {{range .Comments}}
195 195 <div class="card">
196 - <div class="card-header text-xs" style="padding:0.5rem 0.85rem;background:hsl(var(--muted)/0.2);">
196 + <div class="card-header text-xs" style="padding:0.5rem 0.85rem;background:hsl(var(--muted));">
197 197 <div class="flex items-center gap-2">
198 198 {{avatar .AuthorUsername .AuthorAvatar}}
199 199 <a href="/{{.AuthorUsername}}" class="font-semibold">@{{.AuthorUsername}}</a>
... ... @@ -211,7 +211,7 @@
211 211 <!-- Merge Box / State Banner -->
212 212 <div class="card mb-4">
213 213 {{if eq .PR.Status "merged"}}
214 - <div class="card-body flex items-center gap-3" style="background:hsl(var(--muted)/0.2);">
214 + <div class="card-body flex items-center gap-3" style="background:hsl(var(--muted));">
215 215 <span style="color:hsl(var(--diff-add-fg));">{{icon "git-merge" "size-6"}}</span>
216 216 <div class="flex flex-col gap-0.5">
217 217 <div class="font-semibold text-sm">{{t .Lang "pulls.merged_message"}}</div>
... ... @@ -228,7 +228,7 @@
228 228 </div>
229 229
230 230 {{else if eq .PR.Status "closed"}}
231 - <div class="card-body flex items-center gap-3" style="background:hsl(var(--muted)/0.2);">
231 + <div class="card-body flex items-center gap-3" style="background:hsl(var(--muted));">
232 232 <span class="text-muted">{{icon "close" "size-6"}}</span>
233 233 <div class="flex flex-col gap-0.5">
234 234 <div class="font-semibold text-sm">{{t .Lang "pulls.closed_message"}}</div>
... ... @@ -239,7 +239,7 @@
239 239 {{else}}
240 240 <!-- PR is open -->
241 241 {{if .CanMergeAction}}
242 - <div class="card-body flex flex-col gap-3" style="background:hsl(var(--muted)/0.15);">
242 + <div class="card-body flex flex-col gap-3" style="background:hsl(var(--muted));">
243 243 <div class="flex items-center gap-2 text-sm font-semibold" style="color:hsl(var(--diff-add-fg));">
244 244 {{icon "check" "size-5"}}
245 245 <span>{{t .Lang "pulls.able_to_merge"}}</span>
... ... @@ -254,7 +254,7 @@
254 254 </form>
255 255 </div>
256 256 {{else if not .CanMerge}}
257 - <div class="card-body flex items-center gap-3" style="background:hsl(var(--muted)/0.15);">
257 + <div class="card-body flex items-center gap-3" style="background:hsl(var(--muted));">
258 258 <span style="color:hsl(var(--diff-del-fg));">{{icon "alert-circle" "size-5"}}</span>
259 259 <div class="flex flex-col gap-0.5">
260 260 <div class="font-semibold text-sm" style="color:hsl(var(--diff-del-fg));">{{t .Lang "pulls.conflicts_title"}}</div>
... ... @@ -262,7 +262,7 @@
262 262 </div>
263 263 </div>
264 264 {{else}}
265 - <div class="card-body flex items-center gap-2 text-xs text-muted" style="background:hsl(var(--muted)/0.15);">
265 + <div class="card-body flex items-center gap-2 text-xs text-muted" style="background:hsl(var(--muted));">
266 266 {{icon "check" "size-4"}}
267 267 <span>{{t .Lang "pulls.only_write_merge"}}</span>
268 268 </div>
internal/web/views/pages/pull_new.html
+2 -2
... ... @@ -36,11 +36,11 @@
36 36 </div>
37 37
38 38 {{if and (eq .BaseBranch .HeadBranch) (eq .HeadRepo.ID .Repo.ID)}}
39 - <div class="card-body text-xs text-muted" style="background:hsl(var(--muted)/0.2);">
39 + <div class="card-body text-xs text-muted" style="background:hsl(var(--muted));">
40 40 {{icon "alert-circle" "size-4"}} {{t .Lang "pulls.branches_identical"}}
41 41 </div>
42 42 {{else}}
43 - <div class="card-body text-xs flex items-center gap-2" style="background:hsl(var(--muted)/0.2);">
43 + <div class="card-body text-xs flex items-center gap-2" style="background:hsl(var(--muted));">
44 44 {{if .CanMerge}}
45 45 <span style="color:hsl(var(--diff-add-fg));" class="flex items-center gap-1.5 font-medium">
46 46 {{icon "check" "size-4"}} {{t .Lang "pulls.able_to_merge"}}
internal/web/views/pages/register.html
+1 -1
... ... @@ -15,7 +15,7 @@
15 15 <form method="post" action="/register" class="card-body flex flex-col gap-3">
16 16 <input type="hidden" name="_csrf" value="{{.CSRFToken}}">
17 17 {{if eq .RegistrationMode "confirm"}}
18 - <div class="card p-2.5 text-xs text-muted" style="background:hsl(var(--muted) / 0.35);">
18 + <div class="card p-2.5 text-xs text-muted" style="background:hsl(var(--muted));">
19 19 {{t .Lang "auth.register.pending_notice"}}
20 20 </div>
21 21 {{end}}
internal/web/views/pages/releases.html
+1 -1
... ... @@ -68,7 +68,7 @@
68 68 </div>
69 69
70 70 <!-- Release Assets: uploaded files + generated source archives -->
71 - <div class="card-body" style="border-top:1px solid hsl(var(--border));padding:0.6rem 0.9rem;background:hsl(var(--muted)/0.15);">
71 + <div class="card-body" style="border-top:1px solid hsl(var(--border));padding:0.6rem 0.9rem;background:hsl(var(--muted));">
72 72 <div class="text-xs font-semibold text-muted uppercase mb-2" style="letter-spacing:0.04em;">{{t $.Lang "releases.assets"}}</div>
73 73 <div class="flex flex-col gap-1.5">
74 74 {{range .Assets}}
internal/web/views/pages/repo.html
+3 -3
... ... @@ -20,7 +20,7 @@
20 20 <span>{{t .Lang "common.copy"}}</span>
21 21 </button>
22 22 </div>
23 - <pre class="card p-3 font-mono text-xs" style="margin:0;background:hsl(var(--muted)/0.4);overflow-x:auto;"><code>{{.QuickStartNew}}</code></pre>
23 + <pre class="card p-3 font-mono text-xs" style="margin:0;background:hsl(var(--muted));overflow-x:auto;"><code>{{.QuickStartNew}}</code></pre>
24 24 </div>
25 25
26 26 <div>
... ... @@ -31,7 +31,7 @@
31 31 <span>{{t .Lang "common.copy"}}</span>
32 32 </button>
33 33 </div>
34 - <pre class="card p-3 font-mono text-xs" style="margin:0;background:hsl(var(--muted)/0.4);overflow-x:auto;"><code>{{.QuickStartExisting}}</code></pre>
34 + <pre class="card p-3 font-mono text-xs" style="margin:0;background:hsl(var(--muted));overflow-x:auto;"><code>{{.QuickStartExisting}}</code></pre>
35 35 </div>
36 36 </div>
37 37 </div>
... ... @@ -134,7 +134,7 @@
134 134 <!-- Unified Repository Card: Latest Commit Header + File List -->
135 135 <div class="card mb-4">
136 136 {{if .LatestCommit}}
137 - <div class="card-header text-xs" style="padding:0.5rem 0.8rem;background:hsl(var(--muted)/0.3);">
137 + <div class="card-header text-xs" style="padding:0.5rem 0.8rem;background:hsl(var(--muted));">
138 138 <div class="flex items-center gap-2 min-w-0">
139 139 <span class="avatar" style="width:1.25rem;height:1.25rem;font-size:0.62rem;">{{avatarInitial .LatestCommit.AuthorName}}</span>
140 140 <span class="font-medium">{{.LatestCommit.AuthorName}}</span>
internal/web/views/pages/repo_settings.html
+1 -1
... ... @@ -96,7 +96,7 @@
96 96 </div>
97 97
98 98 <!-- Feature Toggles for Repository -->
99 - <div class="card p-3 mt-1" style="background:hsl(var(--muted) / 0.25);">
99 + <div class="card p-3 mt-1" style="background:hsl(var(--muted));">
100 100 <div class="font-semibold text-xs text-muted mb-2 uppercase" style="letter-spacing:0.04em;">{{t .Lang "repo.features"}}</div>
101 101 <div class="flex flex-col gap-2.5">
102 102 <label class="flex items-center justify-between cursor-pointer">
internal/web/views/pages/settings.html
+1 -1
... ... @@ -128,7 +128,7 @@
128 128 <p class="text-xs text-muted" style="margin:0;">{{t .Lang "settings.tokens.desc"}}</p>
129 129
130 130 {{if .NewRawToken}}
131 - <div class="card p-3" style="border-color:hsl(var(--primary));background:hsl(var(--muted)/0.5);">
131 + <div class="card p-3" style="border-color:hsl(var(--primary));background:hsl(var(--muted));">
132 132 <div class="text-xs font-medium mb-2">{{t .Lang "settings.token.created_once"}}</div>
133 133 <div class="flex items-center justify-between gap-2">
134 134 <code class="font-mono text-sm select-all" id="created-token-val">{{.NewRawToken}}</code>