Fix tooltips and issue dependency styles (#13458)

- Convert all tooltips to JS-based ones, fixing overflow issues - Restyle issue dependencies/dependants - Move popup styles to base style - CSS Helper tweaks - Unify pseudo element selectors and lint for it Fixes: https://github.com/go-gitea/gitea/issues/13400
2025-11-04 08:30:25 +08:00 · 2020-11-10 19:28:07 +01:00
parent 9155f13bf8
commit 21d496364a
15 changed files with 164 additions and 146 deletions
--- a/web_src/less/_base.less
+++ b/web_src/less/_base.less
@@ -362,10 +362,6 @@ a:hover,
    background-color: transparent;
  }

-  &.nopadding {
-    padding: 0;
-  }
-
  &.menu,
  &.vertical.menu,
  &.segment {
@@ -506,14 +502,6 @@ a:hover,
    &.middle {
      vertical-align: middle;
    }
-
-    &.nopadding {
-      padding: 0;
-    }
-
-    &.nomargin {
-      margin: 0;
-    }
  }

  .message {
@@ -952,7 +940,7 @@ footer {
    background: rgba(0, 0, 0, .2);
  }

-  .ui.menu.new-menu:after {
+  .ui.menu.new-menu::after {
    position: absolute;
    margin-top: -15px;
    display: block;
@@ -1049,12 +1037,12 @@ i.icon.centerlock {

  span {
    &.bottom-line {
-      &:after {
+      &::after {
        border-bottom: 1px solid #eaecef;
      }
    }

-    &:after {
+    &::after {
      content: attr(data-line-number);
      line-height: 20px !important;
      padding: 0 10px;
@@ -1271,6 +1259,37 @@ i.icon.centerlock {
  }
 }

+.ui.popup {
+  background-color: var(--color-body);
+  color: var(--color-secondary-dark-6);
+  border-color: var(--color-secondary);
+}
+
+.ui.popup::before {
+  box-shadow: 1px 1px 0 0 var(--color-secondary);
+}
+
+.ui.bottom.popup::before,
+.ui.top.popup::before,
+.ui.right.center.popup::before,
+.ui.left.center.popup::before {
+  background-color: var(--color-body);
+}
+
+.ui.bottom.left.popup::before,
+.ui.bottom.right.popup::before,
+.ui.bottom.center.popup::before {
+  box-shadow: -1px -1px 0 0 var(--color-secondary);
+}
+
+.ui.left.center.popup::before {
+  box-shadow: 1px -1px 0 0 var(--color-secondary);
+}
+
+.ui.right.center.popup::before {
+  box-shadow: -1px 1px 0 0 var(--color-secondary);
+}
+
 .ui.popup .ui.label {
  margin-bottom: .4em;
 }
--- a/web_src/less/_markdown.less
+++ b/web_src/less/_markdown.less
@@ -403,10 +403,10 @@
    border: 0;
  }

-  pre code:before,
-  pre code:after,
-  pre tt:before,
-  pre tt:after {
+  pre code::before,
+  pre code::after,
+  pre tt::before,
+  pre tt::after {
    content: normal;
  }

--- a/web_src/less/_repository.less
+++ b/web_src/less/_repository.less
@@ -113,24 +113,31 @@

      .item {
        padding: 0;
+        white-space: nowrap;
+      }
+
+      .title {
+        max-width: 200px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      @media (max-width: 1200px) {
+        .title {
+          max-width: 150px;
+        }
+      }
+
+      @media (max-width: 1000px) {
+        .title {
+          max-width: 100px;
+        }
      }

      .label.color {
        padding: 0 8px;
        margin-right: 5px;
      }
-
-      a {
-        margin: 2px 0;
-
-        .text {
-          color: #444444;
-
-          &:hover {
-            color: #000000;
-          }
-        }
-      }
    }

    #deadlineForm input {
@@ -520,7 +527,7 @@
        border-radius: 3px;
        #avatar-arrow;

-        &:after {
+        &::after {
          border-right-color: #ffffff;
        }

@@ -590,7 +597,7 @@
        margin-left: 4em;
        #avatar-arrow;

-        &:after {
+        &::after {
          border-right-color: #ffffff;
        }

@@ -771,7 +778,7 @@
    }

    .comment-list {
-      &:not(.prevent-before-timeline):before {
+      &:not(.prevent-before-timeline)::before {
        display: block;
        content: "";
        position: absolute;
@@ -791,7 +798,7 @@
        margin-left: 40px;
        padding-left: 16px;

-        &:before { //ciara
+        &::before { //ciara
          display: block;
          content: "";
          position: absolute;
@@ -1068,7 +1075,7 @@
              max-width: 150px;
              background-color: #ffffff;

-              &:before {
+              &::before {
                content: ' ';
                display: inline-block;
                height: 100%;
@@ -1222,7 +1229,7 @@
      .form {
        #avatar-arrow;

-        &:after {
+        &::after {
          border-right-color: #ffffff;
        }
      }
@@ -1362,7 +1369,7 @@
      .content {
        #avatar-arrow;

-        &:after {
+        &::after {
          border-right-color: #ffffff;
        }
      }
@@ -1596,7 +1603,7 @@
      padding-right: 2px;
    }

-    > div:after {
+    > div::after {
      clear: both;
      content: "";
      display: block;
@@ -2799,7 +2806,7 @@
  box-shadow: 0 0 0 3px var(--color-primary-alpha-30) !important;
 }

-.comment:target .header:before {
+.comment:target .header::before {
  border-right-color: var(--color-primary) !important;
  filter: drop-shadow(-3px 0 0 var(--color-primary-alpha-30)) !important;
 }
@@ -2917,8 +2924,8 @@

 #avatar-arrow {

-  &:before,
-  &:after {
+  &::before,
+  &::after {
    right: 100%;
    top: 20px;
    border: solid transparent;
@@ -2929,13 +2936,13 @@
    pointer-events: none;
  }

-  &:before {
+  &::before {
    border-right-color: var(--color-secondary);
    border-width: 9px;
    margin-top: -9px;
  }

-  &:after {
+  &::after {
    border-right-color: var(--color-box-header);
    border-width: 8px;
    margin-top: -8px;
@@ -3323,7 +3330,7 @@ td.blob-excerpt {
  background: none !important;

  @media only screen and (max-width: 1200px) {
-    &:after {
+    &::after {
      background: none !important;
    }
  }
--- a/web_src/less/_review.less
+++ b/web_src/less/_review.less
@@ -96,7 +96,7 @@
      padding-top: 6px;
    }

-    &:after {
+    &::after {
      clear: both;
      content: "";
      display: block;
--- a/web_src/less/features/animations.less
+++ b/web_src/less/features/animations.less
@@ -12,7 +12,7 @@
  overflow: hidden !important;
 }

-.is-loading:after {
+.is-loading::after {
  content: "";
  position: absolute;
  display: block;
--- a/web_src/less/helpers.less
+++ b/web_src/less/helpers.less
@@ -4,9 +4,19 @@
 .js { justify-content: flex-start !important; }
 .je { justify-content: flex-end !important; }
 .sb { justify-content: space-between !important; }
-.mono { font-family: var(--fonts-monospace); font-size: .9em; /* compensate for monospace fonts being usually slighty larger */ }
+.fc { flex-direction: column !important; }
+.f1 { flex: 1 !important; }
 .rounded { border-radius: var(--border-radius) !important; }
-.word-break { word-wrap: break-word; word-break: break-all; }
+
+.mono {
+  font-family: var(--fonts-monospace) !important;
+  font-size: .9em !important; /* compensate for monospace fonts being usually slighty larger */
+}
+
+.word-break {
+  word-wrap: break-word !important;
+  word-break: break-all !important;
+}

 .m-0 { margin: 0 !important; }
 .m-1 { margin: .125rem !important; }
--- a/web_src/less/standalone/swagger.less
+++ b/web_src/less/standalone/swagger.less
@@ -4,8 +4,8 @@ html {
 }

 *,
-*:before,
-*:after {
+*::before,
+*::after {
  box-sizing: inherit;
 }

--- a/web_src/less/themes/theme-arc-green.less
+++ b/web_src/less/themes/theme-arc-green.less
@@ -1105,28 +1105,28 @@ a.ui.basic.green.label:hover {
    border-color: var(--color-secondary);
  }

-  .header:after {
+  .header::after {
    border-right-color: var(--color-secondary);
  }

-  .merge-section.no-header:after {
+  .merge-section.no-header::after {
    border-right-color: var(--color-secondary);
  }

-  .header:before {
+  .header::before {
    border-right-color: var(--color-secondary);
  }

-  .merge-section.no-header:before {
+  .merge-section.no-header::before {
    border-right-color: #505667;
  }
 }

-.repository.new.issue .comment.form .content:after {
+.repository.new.issue .comment.form .content::after {
  border-right-color: #353945;
 }

-.repository.new.issue .comment.form .content:before {
+.repository.new.issue .comment.form .content::before {
  border-right-color: #353945;
 }

@@ -1151,11 +1151,11 @@ a.ui.basic.green.label:hover {
  border-right-color: #505667;
 }

-.repository .comment.form .content .form:after {
+.repository .comment.form .content .form::after {
  border-right-color: #353945;
 }

-.repository .comment.form .content .form:before {
+.repository .comment.form .content .form::before {
  border-right-color: var(--color-secondary);
 }

@@ -1354,7 +1354,7 @@ td.blob-hunk {
  border-color: transparent !important;

  @media only screen and (max-width: 1200px) {
-    &:after {
+    &::after {
      background: linear-gradient(to right, transparent 0%, #2a2e3a 100%);
    }
  }
@@ -1430,60 +1430,60 @@ td.blob-hunk {
  color: #dbdbdb !important;
 }

-.ui.checkbox .box:before,
-.ui.checkbox label:before {
+.ui.checkbox .box::before,
+.ui.checkbox label::before {
  background: #2e323e;
  border: 1px solid var(--color-secondary);
 }

-.ui.checkbox .box:hover:before,
-.ui.checkbox label:hover:before,
-.ui.checkbox .box:active:before,
-.ui.checkbox label:active:before {
+.ui.checkbox .box:hover::before,
+.ui.checkbox label:hover::before,
+.ui.checkbox .box:active::before,
+.ui.checkbox label:active::before {
  background: #2e323e;
  border-color: #6a737d;
 }

-.ui.checkbox input:focus ~ .box:before,
-.ui.checkbox input:focus ~ label:before,
-.ui.checkbox input:checked:focus ~ .box:before,
-.ui.checkbox input:checked:focus ~ label:before {
+.ui.checkbox input:focus ~ .box::before,
+.ui.checkbox input:focus ~ label::before,
+.ui.checkbox input:checked:focus ~ .box::before,
+.ui.checkbox input:checked:focus ~ label::before {
  background: #2e323e;
  border-color: #6a737d;
 }

-.ui.checkbox input:checked ~ .box:after,
-.ui.checkbox input:checked ~ label:after {
+.ui.checkbox input:checked ~ .box::after,
+.ui.checkbox input:checked ~ label::after {
  color: #dbdbdb;
 }

-.ui.checkbox input:checked ~ .box:before,
-.ui.checkbox input:checked ~ label:before {
+.ui.checkbox input:checked ~ .box::before,
+.ui.checkbox input:checked ~ label::before {
  background: #2e323e;
  opacity: 1;
  color: #dbdbdb;
  border-color: #505667;
 }

-.ui.checkbox input:checked:focus ~ .box:before,
-.ui.checkbox input:checked:focus ~ label:before,
-.ui.checkbox input:not([type="radio"]):indeterminate:focus ~ .box:before,
-.ui.checkbox input:not([type="radio"]):indeterminate:focus ~ label:before {
+.ui.checkbox input:checked:focus ~ .box::before,
+.ui.checkbox input:checked:focus ~ label::before,
+.ui.checkbox input:not([type="radio"]):indeterminate:focus ~ .box::before,
+.ui.checkbox input:not([type="radio"]):indeterminate:focus ~ label::before {
  background: #2e323e;
  border-color: #6a737d;
 }

-.ui.checkbox input:checked:focus ~ .box:after,
-.ui.checkbox input:checked:focus ~ label:after,
-.ui.checkbox input:not([type="radio"]):indeterminate:focus ~ .box:after,
-.ui.checkbox input:not([type="radio"]):indeterminate:focus ~ label:after {
+.ui.checkbox input:checked:focus ~ .box::after,
+.ui.checkbox input:checked:focus ~ label::after,
+.ui.checkbox input:not([type="radio"]):indeterminate:focus ~ .box::after,
+.ui.checkbox input:not([type="radio"]):indeterminate:focus ~ label::after {
  background: #2e323e;
  color: #dbdbdb;
 }

-.ui.checkbox input:focus ~ .box:after,
+.ui.checkbox input:focus ~ .box::after,
 .ui.checkbox input:focus ~ label,
-.ui.checkbox input:focus ~ label:after {
+.ui.checkbox input:focus ~ label::after {
  color: #9a9a9a;
 }

@@ -1572,7 +1572,7 @@ td.blob-hunk {
 }

 .bottom-line,
-.bottom-line:after {
+.bottom-line::after {
  border-color: #4e525e !important;
 }

@@ -1966,30 +1966,6 @@ a.ui.labels .label:hover {
  }
 }

-.ui.loading.segment:before {
-  background: #353945;
-}
-
-.ui.popup {
-  background-color: #383c4a;
-  color: var(--color-secondary-dark-6);
-  border-color: var(--color-secondary);
-}
-
-.ui.popup:before {
-  box-shadow: 1px 1px 0 0 var(--color-secondary);
-}
-
-.ui.popup.top:before,
-.ui.popup.bottom:before {
-  background-color: #383c4a;
-}
-
-.ui.bottom.left.popup:before,
-.ui.bottom.right.popup:before {
-  box-shadow: -1px -1px 0 0 var(--color-secondary);
-}
-
 .markdown:not(code) h1 {
  border-bottom-color: #888;
 }
@@ -2095,7 +2071,7 @@ img[src$="/img/matrix.svg"] {
  filter: invert(84%) hue-rotate(180deg);
 }

-.is-loading:after {
+.is-loading::after {
  border-color: #4a4c58 #4a4c58 #d7d7da #d7d7da;
 }