Prettify timeline 3 (#11139)

* Fix timeline comments sections borders

* Fix files dropzone right alignment

* Update review comment form and controls

* Clear segment style from comment form tabs

* Remove segment class from pulls tab

* Fix Time Tracker - Add Time button border

* Fix buttons right alignment

* Markdown tab minimal height

* Fix DropZone hover effect

* Fix Lint + remove unused controls class

Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
Co-authored-by: zeripath <art27@cantab.net>

1 files changed, 40 insertions, 24 deletions

diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index 6fb089636a..b1576b8784 100644
--- a/web_src/less/_repository.less
+++ b/web_src/less/_repository.less
@@ -631,20 +631,13 @@
 
         .pull {
             &.tabular.menu {
-                margin-bottom: 10px;
+                margin-bottom: 1rem;
 
                 .svg {
                     margin-right: 5px;
                 }
             }
 
-            &.tab.segment {
-                border: 0;
-                padding: 10px 0 0;
-                box-shadow: none;
-                background-color: inherit;
-            }
-
             .merge.box {
                 .avatar {
                     margin-left: 10px;
@@ -853,6 +846,18 @@
                     }
                 }
 
+                > .content {
+                    > div:first-child {
+                        border-top-left-radius: 4px;
+                        border-top-right-radius: 4px;
+                    }
+
+                    > div:last-child {
+                        border-bottom-left-radius: 4px;
+                        border-bottom-right-radius: 4px;
+                    }
+                }
+
                 .content {
                     > .header {
                         #avatar-arrow;
@@ -861,11 +866,8 @@
                         position: relative;
                         color: #767676;
                         background-color: #f7f7f7;
-                        border-top-left-radius: 3px;
-                        border-top-right-radius: 3px;
 
                         .text {
-                            max-width: 78%;
                             padding-top: 10px;
                             padding-bottom: 10px;
                         }
@@ -967,13 +969,18 @@
                 }
 
                 .ui.form {
-                    .field:first-child {
-                        clear: none;
-                    }
+                    .field {
+                        &:first-child {
+                            clear: none;
+                        }
 
-                    .tab.segment {
-                        border: 0;
-                        padding: 10px 0 0;
+                        &.footer {
+                            overflow: hidden;
+                        }
+
+                        .tab.markdown {
+                            min-height: 5rem;
+                        }
                     }
 
                     textarea {
@@ -1082,11 +1089,6 @@
                 }
             }
 
-            .tab.segment {
-                border: 0;
-                padding: 10px 0 0;
-            }
-
             textarea {
                 height: 200px;
                 font-family: @monospaced-fonts, monospace;
@@ -2451,10 +2453,19 @@
 
 .ui.form {
     .dropzone {
-        width: 100%;
-        margin-bottom: 10px;
         border: 2px dashed #0087f5;
         box-shadow: none !important;
+        padding: 0;
+        min-height: 5rem;
+        border-radius: 4px;
+
+        .dz-button {
+            color: rgba(0, 0, 0, .6);
+        }
+
+        &:hover .dz-button {
+            color: rgba(0, 0, 0, .8);
+        }
 
         .dz-error-message {
             top: 140px;
@@ -2858,6 +2869,11 @@ td.blob-excerpt {
     overflow: hidden;
 }
 
+.ui .right .ui.button {
+    margin-left: .25em;
+    margin-right: 0;
+}
+
 .removed-code {
     background-color: #ff9999;
 }