feat: ✨ enhance styling and structure of forms, buttons, and repository settings

src/themes/scss/theme/components/_boxes.scss

@@ -0,0 +1,124 @@
+@use '@lucas-labs/lui-micro/var' as var;
+@use '@lucas-labs/lui-micro/color' as color;
+
+@mixin segment {
+    .ui.top.attached.header {
+        border-radius: var(--border-radius) var(--border-radius) 0 0;
+    }
+
+    .ui.attached.segment:has(+.ui[class*="top attached"].header), .ui.attached.segment:has(+.page.buttons), .ui.attached.segment:last-child, .ui.segment:has(+.ui.segment:not(.attached)), .ui.attached.segment:has(+.ui.modal) {
+        border-bottom-left-radius: var(--border-radius);
+        border-bottom-right-radius: var(--border-radius);
+    }
+
+    .ui.segments:not(.horizontal)>.segment:first-child {
+        border-radius: var(--border-radius);
+    }
+
+    .ui.segments:not(.horizontal)>.segment:last-child {
+        border-radius: var(--border-radius);
+    }
+
+    .ui.segment {
+        border-radius: var(--border-radius);
+    }
+}
+
+@mixin comments {
+    .comment {
+        .content {
+            background-color: var(--color-box-body);
+
+            >.comment-header, >.ui.segment {
+                &:before, &:after {
+                    display: none;
+                }
+            }
+
+            .comment-header {
+                padding: var.get('measure/.25x') var.get('measure/.25x') var.get('measure/.25x') var.get('measure/1x') !important;
+
+                .comment-header-left {
+                    .text {
+                        color: color.get('subtle') !important;
+
+                        .author {
+                            color: color.get('text') !important;
+                        }
+                    }
+                }
+
+                .comment-header-right {
+                    * {
+                        color: color.get('subtle') !important;
+                    }
+                    
+                    .label {
+                        height: var.get('measure/1.25x', 1.25rem) !important;
+                        padding: 0px var.get('measure/.375x') !important;
+                        border-radius: var.get('measure/1x') !important;
+                    }
+                }
+            }
+        }
+
+        // comment form at the end
+        &.form:not(.issue-content) {
+            display: flex;
+            align-items: flex-start;
+            background-color: var(--color-body);
+            gap: var.get('measure/1x');
+            left: -68px !important;
+            width: calc(100% + 68px - 16px) !important;
+
+            @media (max-width: 768px) {
+                left: 0 !important;
+                margin-left: -16px !important;
+                width: auto !important;
+            }
+
+            .timeline-avatar {
+                display: block;
+                position: relative !important;
+                left: unset !important;
+                flex: 0 0 auto !important;
+            }
+
+            .content {
+                // fake title to mimic github new issue page
+                &:before {
+                    display: block;
+                    content: 'Add a comment';
+                    font-weight: 600;
+                    margin-bottom: var.get('measure/1x');
+                    margin-top: var.get('measure/.5x');
+                    font-size: var.get('font-size/lg');
+                }
+
+                display: block;
+                position: relative !important;
+                margin-left: 0 !important;
+                flex: 1;
+
+                .ui.segment {
+                    padding: 0 !important;
+                    border: none !important;
+                }
+            }
+        }
+    }
+
+    .comment-list .comment>.content>div:last-child {
+        border-bottom-left-radius: var(--border-radius) !important;
+        border-bottom-right-radius: var(--border-radius) !important;
+    }
+
+    .comment-list .comment>.content>div:first-child {
+        border-top-left-radius: var(--border-radius) !important;
+        border-top-right-radius: var(--border-radius) !important;
+    }
+
+    .ui.comments .comment {
+        margin: var.get('measure/.25x') 0 0;
+    }
+}

src/themes/scss/theme/components/_editor.scss

@@ -2,10 +2,6 @@
 @use '@lucas-labs/lui-micro/color' as color;
 
 @mixin editor {
-    #comment-form, .edit-content-zone {
-        padding: 0 !important;
-        border: none !important;
-
     .combo-markdown-editor {
         .top.tabular.menu {
             background-color: var(--color-box-header);
@@ -119,7 +115,7 @@
         }
     }
 
-        .field:first-child {
+    .combo-markdown-editor {
         border: 1px solid var(--color-secondary);
         border-radius: var(--border-radius);
         &:focus-within {
@@ -128,10 +124,18 @@
         }
 
         textarea:focus {
-                outline: none;
+            outline: none !important;
+        }
+
+        .ui.tab.markup[data-tab-panel=markdown-previewer] {
+            border-bottom: 0px;
         }
     }
 
+    #comment-form, .edit-content-zone, .comment-form, .comment-code-cloud form {
+        padding: 0 !important;
+        border: none !important;
+
         .field {
             margin-bottom: var.get('measure/1x') !important;
         }

src/themes/scss/theme/components/_forms.scss

@@ -5,6 +5,7 @@
 @mixin forms {
     @include forms.dropdown-menu;
     @include forms.menu;
+    @include forms.tabular-menu;
     @include forms.input;
 }
 

src/themes/scss/theme/components/_labels.scss

@@ -53,8 +53,12 @@
             border-bottom-left-radius: 0;
         }
 
-        &.green, &.red {
+        &.green {
             color: var(--color-green-contrast) !important;
         }
+
+        &.red {
+            color: var(--color-red-contrast) !important;
+        }
     }
 }

src/themes/scss/theme/components/button/index.scss

@@ -50,13 +50,56 @@
 }
 
 @mixin gitea-button {
+    .ui.icon.buttons .button, .ui.icon.button:not(.compact) {
+        // padding: 50px;
+    }
+
+    .code-comment-buttons-buttons {
+        button:not(.labeled):not(.icon) {
+            padding: .78571429em !important;
+        }
+    }
+
+    // buttons group
+    .ui.buttons {
+        &.icon .button, &.icon:not(.compact) {
+            padding: 50px 50px;
+        }
+
+        .button {
+            &:first-child {
+                border-top-left-radius: var(--border-radius);
+                border-bottom-left-radius: var(--border-radius);
+                border-top-right-radius: 0;
+                border-bottom-right-radius: 0;
+            }
+
+            &.button:last-child {
+                border-top-right-radius: var(--border-radius);
+                border-bottom-right-radius: var(--border-radius);
+                border-top-left-radius: 0;
+                border-bottom-left-radius: 0;
+            }
+
+            border-right: none;
+            flex: 1 0 auto;
+            border-radius: 0;
+            margin: 0;
+        }
+    }
+
     .ui.button {
         border-radius: var(--border-radius);
         transition: color .1s ease, background-color .1s ease, border-color .1s ease;
         padding: calc(#{var.get('measure/.375x')} - 1px) var.get('measure/1x');
-        font-size: var.get('font-size/md') !important;
+        font-size: var.get('font-size/md');
         line-height: 20px;
 
+        &.tiny {
+            font-size: var.get('font-size/sm');
+            line-height: var.get('font-size/sm');
+        }
+
         &.basic {
             border-radius: var(--border-radius);
         }
@@ -80,4 +123,6 @@
             font-weight: 500;
         }
     }
+
+    
 }

src/themes/scss/theme/components/forms/_menu.scss

@@ -161,10 +161,13 @@
                 border-radius: var(--border-radius) !important;
                 border-top-width: 1px !important;
                 border-color: var(--color-secondary) !important;
-                display: flex !important;
                 flex-direction: column;
                 gap: var.get('measure/.25x');
 
+                &.visible {
+                    display: flex;
+                }
+
                 .item {
                     border: none !important;
                 }
@@ -203,3 +206,9 @@
         }
     }    
 }
+
+@mixin tabular-menu {
+    .ui.tabular.menu .active.item, .ui.tabular.menu .active.item:hover {
+        border-radius: var(--border-radius) var(--border-radius) 0 0 !important;
+    }
+}

src/themes/scss/theme/components/index.scss

@@ -4,3 +4,4 @@
 @forward './file-content';
 @forward './avatar';
 @forward './button';
+@forward './boxes';

src/themes/scss/theme/index.scss

@@ -14,6 +14,8 @@
     @include components.file-content;   // github-style file content
     @include components.avatar;         // github-style avatars
     @include components.gitea-button;   // github-style buttons
+    @include components.segment;
+    @include components.comments;       // github-style comment boxes
 
     // code highlighting
     @include modules.chroma($is-dark);  // syntax highlighting

src/themes/scss/theme/modules/issues/_issue.scss

@@ -22,6 +22,12 @@
         .issue-title-meta {
             color: color.get('subtle');
         }
+
+        &:has(+ .ui.pull.tabs) { // if the next sibling is a tab (e.g. pull request tab selector)
+            margin-bottom: var.get('measure/1x');
+            padding-bottom: var.get('measure/.5x');
+            border-bottom: none;
+        }
     }
 
     .issue-content {
@@ -35,97 +41,171 @@
     }
 
     .timeline-item {
-        &.comment {
+        &.event {
-            .content {
+            .badge {
-                background-color: var(--color-box-body);
+                // and not contains a tw-bg-* class
+                &:not([class*="tw-bg-"]) {
+                    color: var(--color-timeline-badge-fg) !important;
+                }
+
+                &.tw-bg-green.tw-text-white {
+                    color: var(--color-green-contrast) !important;
+                }
+
+                &.tw-bg-red.tw-text-white {
+                    color: var(--color-red-contrast) !important;
+                }
+            }
+
+            .ui.segments.conversation-holder {
+                margin-left: var.get('measure/.5x');
+                border-radius: var(--border-radius);
+            }
+        }
+    }
+
+    .repository.view.issue {
+        --avatar-size: 24px;
+
+        .comment-list .ui.comments {
+            background-color: transparent;
+            gap: var.get('measure/1x');
+            position: relative;
+        }
+
+        .comment-list {
+            .ui.comment-code-cloud.segment {
+                padding: 0 var.get('measure/.5x') var.get('measure/.5x') !important;
+
+                .ui.comments {
+                    gap: var.get('measure/.5x');
+
+                    &:before {
+                        display: block;
+                        content: "";
+                        position: absolute;
+                        top: 0;
+                        bottom: 0;
+                        left: calc((var(--avatar-size) / 2) - 1px);
+                        top: 16px;
+                        width:  3px;
+                        background-color: var(--color-timeline);
+                        opacity: 50%;
+                    }
+
+                    .comment.code-comment .content.comment-container{
+                        background-color: transparent !important;
+
+                        .header.comment-header {
+                            .comment-header-left {
+                                gap: var.get('measure/.5x');
+                                .avatar img {
+                                    z-index: 1 !important;
+                                    width: var(--avatar-size) !important;
+                                    height: var(--avatar-size) !important;
+                                }
+                            }
+                        }
+                    }
+                }
+
+                .code-comment-buttons {
+                    margin: 0!important;
+                }
+
+                .comment-form {
+                    margin-top: var.get('measure/1x');
+
+                    .field.footer {
+                        margin: 0 !important;
+                        padding: 0 !important;
+
+                        button {
+                            padding: var.get('measure/.5x') var.get('measure/1x') !important;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    .repository .ui.tabs.divider {
+        margin-bottom: var.get('measure/1x');
+    }
+
+    .repository .diff-detail-box { // diff page detail box
+        padding: var.get('measure/.5x') 0;
+        margin: calc(var.get('measure/1x') * -1) 0 0 0;
+        height: 60px;
+    }
+
+    .repository #diff-container {
+        #diff-file-tree {
+            top: 60px;
+            .diff-file-tree-items {
+                margin: 0;
+            }
+        }
+
+        column-gap: var.get('measure/1x');
+
+        .diff-file-body tr.tag-code:last-child td:first-child, .diff-file-body tr.tag-code:last-child td:first-child * {
+            border-bottom-left-radius: calc(var(--border-radius) - 2px);
+        }
+
+        .diff-file-body tr.tag-code:last-child td:last-child, .diff-file-body tr.tag-code:last-child td:last-child * {
+            border-bottom-right-radius: var(--border-radius);
+        }
+
+        .ui.attached.header.diff-file-header.sticky-2nd-row {
+            position: sticky;
+            top: 60px;
+            z-index: 7;
+        }
+
+        .add-comment {
+            border-top: 1px solid var(--color-secondary);
+            border-bottom: 1px solid var(--color-secondary);
+            
+            .conversation-holder {
+                .comment-code-cloud {
+                    padding: var.get('measure/.75x') !important;
+                    form {
+                        &:not(:first-child) {
+                            margin-top: var.get('measure/.5x');
+                        }
+                        
+                        .field.footer {
+                            margin: 0 !important;
+                            padding: 0 !important;
+
+                            button {
+                                padding: var.get('measure/.5x') var.get('measure/1x') !important;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    // new issue page
+    .page-content.repository.new.issue {
+        .issue-content-left {
+            .ui.comments .comment {
+                .ui.segment.content {
+                    padding: 6px 0 0;
+                    border: none;
+
+                    .field {
+                        margin-bottom: var.get('measure/1x');
+                    }
 
-                >.comment-header, >.ui.segment {
                     &:before, &:after {
                         display: none;
                     }
                 }
-
-                .comment-header {
-                    padding: var.get('measure/.25x') var.get('measure/.25x') var.get('measure/.25x') var.get('measure/1x') !important;
-
-                    .comment-header-left {
-                        .text {
-                            color: color.get('subtle') !important;
-
-                            .author {
-                                color: color.get('text') !important;
-                            }
-                        }
-                    }
-
-                    .comment-header-right {
-                        * {
-                            color: color.get('subtle') !important;
-                        }
-                        
-                        .label {
-                            height: var.get('measure/1.25x', 1.25rem) !important;
-                            padding: 0px var.get('measure/.375x') !important;
-                            border-radius: var.get('measure/1x') !important;
             }
         }
     }        
 }
-
-            // comment form at the end
-            &.form {
-                display: flex;
-                align-items: flex-start;
-                background-color: var(--color-body);
-                gap: var.get('measure/1x');
-                left: -68px !important;
-                width: calc(100% + 68px - 16px) !important;
-
-                @media (max-width: 768px) {
-                    left: 0 !important;
-                    margin-left: -16px !important;
-                    width: auto !important;
-                }
-
-                .timeline-avatar {
-                    display: block;
-                    position: relative !important;
-                    left: unset !important;
-                    flex: 0 0 auto !important;
-                }
-
-                .content {
-                    // fake title to mimic github new issue page
-                    &:before {
-                        display: block;
-                        content: 'Add a comment';
-                        font-weight: 600;
-                        margin-bottom: var.get('measure/1x');
-                        margin-top: var.get('measure/.5x');
-                        font-size: var.get('font-size/lg');
-                    }
-
-                    display: block;
-                    position: relative !important;
-                    margin-left: 0 !important;
-                    flex: 1;
-
-                    .ui.segment {
-                        padding: 0 !important;
-                        border: none !important;
-                    }
-                }
-            }
-        }
-    }
-
-    .repository.view.issue .comment-list .comment>.content>div:last-child {
-        border-bottom-left-radius: var(--border-radius);
-        border-bottom-right-radius: var(--border-radius);
-    }
-
-    .repository.view.issue .comment-list .comment>.content>div:first-child {
-        border-top-left-radius: var(--border-radius);
-        border-top-right-radius: var(--border-radius);
-    }
-}

src/themes/scss/theme/modules/repo/_home.scss

@@ -39,6 +39,13 @@
 
         .repo-description {
             margin-bottom: var.get('measure/1x');
+
+            +a.flex-text-block {
+                svg {
+                    color: color.get('subtle') !important;
+                }
+                margin-bottom: var.get('measure/1x');
+            }
         }        
 
         .flex-text-block {
@@ -53,6 +60,10 @@
         @media (max-width: 768px) {
             .repo-description {
                 margin-top: 0 !important;
+
+                +a.flex-text-block {
+                    margin-bottom: 0;
+                }
             }
 
             #repo-topics, #manage_topic, .flex-item-title {
@@ -105,7 +116,6 @@
             gap: 0 !important;
 
             .language-stats {
-                background-color: red !important;
                 margin: 0 !important;
                 height: var.get('measure/.5x') !important;
                 margin-bottom: var.get('measure/.5x') !important;
@@ -164,4 +174,70 @@
             }
         }
     }
+
+    button.ui.primary.button.js-btn-clone-panel {
+        display: flex;
+        flex-wrap: nowrap;
+        gap: var.get('measure/.5x');
+        align-items: center;
+
+        span {
+            display: flex;
+            flex-wrap: nowrap;
+            gap: var.get('measure/.375x');
+            align-items: center;
+        }
+    }
+
+    .clone-panel-popup {
+        .clone-panel-field {
+            margin: var.get('measure/1x');
+        }
+
+        .clone-panel-list {
+            margin: var.get('measure/1x');
+
+            .item {
+                margin: var.get('measure/.5x') 0;
+            }
+        }
+
+        .clone-panel-tab {
+            padding: 0 var.get('measure/1x') var.get('measure/.5x');
+            display: flex;
+            gap: var.get('measure/.5x');
+
+            button {
+                padding: var.get('measure/.375x') var.get('measure/.5x');
+                font-weight: 600;
+
+                &.active {
+                    border-bottom: 0;
+                    position: relative;
+
+                    &:after {
+                        content: '';
+                        display: block;
+                        position: absolute;
+                        bottom: -7px;
+                        left: 0;
+                        width: 100%;
+                        height: 2px;
+                        background-color: color.get('primary/base');
+                    }
+                }
+
+                &:hover {
+                    background-color: var(--color-hover);
+                    border-radius: var(--border-radius);
+                    transition: background 0.12s ease-out;
+                    text-decoration: none;
+                }
+            }
+        }
+    }
+
+    .tippy-svg-arrow {
+        display: none;
+    }
 }

src/themes/scss/theme/modules/settings/_pages.scss

@@ -3,7 +3,7 @@
 @use './section';
 
 @mixin settings-pages {
-    .page-content.user.settings, .page-content.admin {
+    .page-content.user.settings, .page-content.admin, .page-content.repository.settings {
         .ui.flex-container {
             column-gap: 40px;
             
@@ -16,6 +16,5 @@
                 @include section.content;
             }
         }
-        
     }
 }

src/themes/scss/theme/vars/_base.scss

@@ -40,7 +40,7 @@
         --opacity-disabled:    0.55;
         --height-loading:      16rem;
         --min-height-textarea: 132px; // padding + 6 lines + border = calc(1.57142em + 6lh + 2px), but lh is not fully supported
-        --checkbox-size:       15px;  // height and width of checkbox and radio inputs
+        --checkbox-size:       16px;  // height and width of checkbox and radio inputs
         --page-spacing:        24px;  // space between page elements
         --page-margin-x:       32px;  // minimum space on left and right side of page
         --tab-size:            4;

src/themes/scss/theme/vars/_colors.scss

@@ -123,7 +123,7 @@
         --color-purple: #{color.get('palette/purple/base')};
         --color-pink:   #{color.get('palette/pink/base')};
         --color-brown:  #{color.get('palette/brown/base')};
-        --color-black:  #{color.get('elevation/1')};
+        --color-black:  #{color.get('palette/black/base')};
 
         // ┌───────┐
         // │ named │ » contrasts (lugit addition)
@@ -287,6 +287,7 @@
         --color-text-light-3: #{color.get('subtle')};
         --color-footer:       rgba(#{color.get('elevation/2', 'rgb')}, 0.2);
         --color-timeline:     #{color.get('elevation/5')};
+        --color-timeline-badge-fg:  #{if($is-dark, var(--color-white), var.get('color-text'))};
 
         // box
         --color-box-header:         #{rgba(color.get('elevation/4', 'rgb'), 1)};
@@ -306,7 +307,7 @@
         --color-light-border: #{color.get('elevation/6')};
         --color-hover: rgba(#{color.get('elevation/6', 'rgb')}, 0.5);
         --color-hover-opaque: #{color.get('elevation/6', 'rgb')};
-        --color-active: #{color.get('elevation/4')};
+        --color-active: #{color.get('elevation/5')};
         --color-menu: #{color.get('elevation/4')};
         --color-card: #{color.get('elevation/3')};
         --color-markup-table-row: rgba(#{color.get('text', 'rgb')}, 0.02);