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

diff --git a/.stylelintrc b/.stylelintrc
index 427d89b5bcda7d99d71808d8b7158ca79629d9b6..1d95b964bd2878b00ab88f3ba530ac476c4a71bc 100644 (file)
--- a/.stylelintrc
+++ b/.stylelintrc
@@ -11,5 +11,5 @@ rules:
   no-descending-specificity: null
   number-leading-zero: never
   rule-empty-line-before: null
-  selector-pseudo-element-colon-notation: null
+  selector-pseudo-element-colon-notation: double
   shorthand-property-no-redundant-values: true

diff --git a/templates/admin/user/edit.tmpl b/templates/admin/user/edit.tmpl
index a0edd68e48bfe13dc7ce48d64fd457e177ee41d9..e29b18f5beebd5b21a51a19a8bc879c1c9cc2bce 100644 (file)
--- a/templates/admin/user/edit.tmpl
+++ b/templates/admin/user/edit.tmpl
@@ -90,7 +90,7 @@
                                        </div>
                                </div>
                                <div class="inline field">
-                                       <div class="ui checkbox" data-tooltip="{{.i18n.Tr "admin.users.allow_git_hook_tooltip"}}">
+                                       <div class="ui checkbox poping up" data-content="{{.i18n.Tr "admin.users.allow_git_hook_tooltip"}}" data-variation="very wide">
                                                <label><strong>{{.i18n.Tr "admin.users.allow_git_hook"}}</strong></label>
                                                <input name="allow_git_hook" type="checkbox" {{if .User.CanEditGitHook}}checked{{end}} {{if DisableGitHooks}}disabled{{end}}>
                                        </div>

diff --git a/templates/repo/commits_table.tmpl b/templates/repo/commits_table.tmpl
index 89355f06537568fa88f29450a2ffd809e7b37d2e..623df6f63ea6dc50fd29c86d63629294dca5f203 100644 (file)
--- a/templates/repo/commits_table.tmpl
+++ b/templates/repo/commits_table.tmpl
@@ -17,7 +17,7 @@
                                        <input type="checkbox" name="all" id="all" value="true" {{.All}}>
                                        <label for="all">{{.i18n.Tr "repo.commits.search_all"}} &nbsp;&nbsp;</label>
                                </div>
-                               <button class="ui primary tiny button mr-0" data-panel="#add-deploy-key-panel" data-tooltip={{.i18n.Tr "repo.commits.search.tooltip"}}>{{.i18n.Tr "repo.commits.find"}}</button>
+                               <button class="ui primary tiny button mr-0 poping up" data-panel="#add-deploy-key-panel" data-content={{.i18n.Tr "repo.commits.search.tooltip"}}>{{.i18n.Tr "repo.commits.find"}}</button>
                        </form>
                {{else if .IsDiffCompare}}
                        <a href="{{$.CommitRepoLink}}/commit/{{.BeforeCommitID}}" class="ui green sha label">{{if not .BaseIsCommit}}{{if .BaseIsBranch}}{{svg "octicon-git-branch"}}{{else if .BaseIsTag}}{{svg "octicon-tag"}}{{end}}{{.BaseBranch}}{{else}}{{ShortSha .BaseBranch}}{{end}}</a>

diff --git a/templates/repo/create.tmpl b/templates/repo/create.tmpl
index 6b9a2bca36531afbfa225727075605f79f564e78..39759bcc4c7ebee39c72055a13c89570d8a82669 100644 (file)
--- a/templates/repo/create.tmpl
+++ b/templates/repo/create.tmpl
@@ -73,7 +73,7 @@
                                                                <input class="hidden" name="git_content" type="checkbox" tabindex="0" {{if .git_content}}checked{{end}}>
                                                                <label>{{.i18n.Tr "repo.template.git_content"}}</label>
                                                        </div>
-                                                       <div class="ui checkbox" {{if not .SignedUser.CanEditGitHook}}data-tooltip="{{.i18n.Tr "repo.template.git_hooks_tooltip"}}"{{end}}>
+                                                       <div class="ui checkbox{{if not .SignedUser.CanEditGitHook}} poping up{{end}}"{{if not .SignedUser.CanEditGitHook}} data-content="{{.i18n.Tr "repo.template.git_hooks_tooltip"}}"{{end}}>
                                                                <input class="hidden" name="git_hooks" type="checkbox" tabindex="0" {{if .git_hooks}}checked{{end}}>
                                                                <label>{{.i18n.Tr "repo.template.git_hooks"}}</label>
                                                        </div>

diff --git a/templates/repo/issue/view_content/sidebar.tmpl b/templates/repo/issue/view_content/sidebar.tmpl
index dad4f7e125bfb41edf7615ebfff0384e5576423e..4165ba49e6ae37279d818c9429bdb4738f8d8995 100644 (file)
--- a/templates/repo/issue/view_content/sidebar.tmpl
+++ b/templates/repo/issue/view_content/sidebar.tmpl
@@ -434,32 +434,35 @@
                                {{if (and (not .BlockedByDependencies) (not .BlockingDependencies))}}
                                        <span class="text"><strong>{{.i18n.Tr "repo.issues.dependency.title"}}</strong></span>
                                        <br>
-                                       <p>{{if .Issue.IsPull}}
+                                       <p>
+                                               {{if .Issue.IsPull}}
                                                        {{.i18n.Tr "repo.issues.dependency.pr_no_dependencies"}}
                                                {{else}}
                                                        {{.i18n.Tr "repo.issues.dependency.issue_no_dependencies"}}
-                                               {{end}}</p>
+                                               {{end}}
+                                       </p>
                                {{end}}
 
                                {{if .BlockingDependencies}}
-                                       <span class="text" data-tooltip="{{if .Issue.IsPull}}
-                                                       {{.i18n.Tr "repo.issues.dependency.pr_close_blocks"}}
-                                               {{else}}
-                                                       {{.i18n.Tr "repo.issues.dependency.issue_close_blocks"}}
-                                               {{end}}" data-inverted="">
-                                       <strong>{{.i18n.Tr "repo.issues.dependency.blocks_short"}}</strong>
+                                       <span class="text poping up" data-content="{{if .Issue.IsPull}}{{.i18n.Tr "repo.issues.dependency.pr_close_blocks"}}{{else}}{{.i18n.Tr "repo.issues.dependency.issue_close_blocks"}}{{end}}">
+                                               <strong>{{.i18n.Tr "repo.issues.dependency.blocks_short"}}</strong>
                                        </span>
                                        <div class="ui relaxed divided list">
                                                {{range .BlockingDependencies}}
-                                                       <div class="item{{if .Issue.IsClosed}} is-closed{{end}}">
-                                                               <span class="text grey right floated">#{{.Issue.Index}}</span>
-                                                               <a class="title" href="{{.Repository.Link}}/issues/{{.Issue.Index}}">{{.Issue.Title | RenderEmoji}}</a>
-                                                               <div class="text small">{{.Repository.OwnerName}}/{{.Repository.Name}}</div>
-                                                               <div class="ui transparent label right floated nopadding">
+                                                       <div class="item{{if .Issue.IsClosed}} is-closed{{end}} df ac sb">
+                                                               <div class="item-left df jc fc f1">
+                                                                       <a class="title" href="{{.Repository.Link}}/issues/{{.Issue.Index}}">
+                                                                               #{{.Issue.Index}} {{.Issue.Title | RenderEmoji}}
+                                                                       </a>
+                                                                       <div class="text small">
+                                                                               {{.Repository.OwnerName}}/{{.Repository.Name}}
+                                                                       </div>
+                                                               </div>
+                                                               <div class="item-right df ac">
                                                                        {{if and $.CanCreateIssueDependencies (not $.Repository.IsArchived)}}
-                                                                               <a class="delete-dependency-button" onclick="window.deleteDependencyModal({{.Issue.ID}}, 'blocking');"
-                                                                                       data-tooltip="{{$.i18n.Tr "repo.issues.dependency.remove_info"}}" data-inverted="">
-                                                                                       <i class="delete icon text red nopadding nomargin"></i>
+                                                                               <a class="delete-dependency-button poping up ci" onclick="window.deleteDependencyModal({{.Issue.ID}}, 'blocking');"
+                                                                                       data-content="{{$.i18n.Tr "repo.issues.dependency.remove_info"}}" data-inverted="">
+                                                                                       {{svg "octicon-trashcan" 16}}
                                                                                </a>
                                                                        {{end}}
                                                                </div>
@@ -469,24 +472,25 @@
                                {{end}}
 
                                {{if .BlockedByDependencies}}
-                                       <span class="text" data-tooltip="{{if .Issue.IsPull}}
-                                               {{.i18n.Tr "repo.issues.dependency.pr_closing_blockedby"}}
-                                       {{else}}
-                                               {{.i18n.Tr "repo.issues.dependency.issue_closing_blockedby"}}
-                                       {{end}}" data-inverted="">
-                                       <strong>{{.i18n.Tr "repo.issues.dependency.blocked_by_short"}}</strong>
+                                       <span class="text poping up" data-content="{{if .Issue.IsPull}}{{.i18n.Tr "repo.issues.dependency.pr_closing_blockedby"}}{{else}}{{.i18n.Tr "repo.issues.dependency.issue_closing_blockedby"}}{{end}}">
+                                               <strong>{{.i18n.Tr "repo.issues.dependency.blocked_by_short"}}</strong>
                                        </span>
                                        <div class="ui relaxed divided list">
                                                {{range .BlockedByDependencies}}
-                                                       <div class="item{{if .Issue.IsClosed}} is-closed{{end}}">
-                                                               <span class="text grey right floated">#{{.Issue.Index}}</span>
-                                                               <a class="title" href="{{.Repository.Link}}/issues/{{.Issue.Index}}">{{.Issue.Title | RenderEmoji}}</a>
-                                                               <div class="text small">{{.Repository.OwnerName}}/{{.Repository.Name}}</div>
-                                                               <div class="ui transparent label right floated nopadding">
+                                                       <div class="item{{if .Issue.IsClosed}} is-closed{{end}} df ac sb">
+                                                               <div class="item-left df jc fc f1">
+                                                                       <a class="title" href="{{.Repository.Link}}/issues/{{.Issue.Index}}">
+                                                                               #{{.Issue.Index}} {{.Issue.Title | RenderEmoji}}
+                                                                       </a>
+                                                                       <div class="text small">
+                                                                               {{.Repository.OwnerName}}/{{.Repository.Name}}
+                                                                       </div>
+                                                               </div>
+                                                               <div class="item-right df ac">
                                                                        {{if and $.CanCreateIssueDependencies (not $.Repository.IsArchived)}}
-                                                                               <a class="delete-dependency-button" onclick="window.deleteDependencyModal({{.Issue.ID}}, 'blockedBy');"
-                                                                                       data-tooltip="{{$.i18n.Tr "repo.issues.dependency.remove_info"}}" data-inverted="">
-                                                                                       <i class="delete icon text red nopadding nomargin"></i>
+                                                                               <a class="delete-dependency-button poping up ci" onclick="window.deleteDependencyModal({{.Issue.ID}}, 'blockedBy');"
+                                                                                       data-content="{{$.i18n.Tr "repo.issues.dependency.remove_info"}}" data-inverted="">
+                                                                                       {{svg "octicon-trashcan" 16}}
                                                                                </a>
                                                                        {{end}}
                                                                </div>

diff --git a/templates/repo/release/list.tmpl b/templates/repo/release/list.tmpl
index 71d40fdb238f7bd38ea6fae931eaeace9cf4504b..a05d671b15580eca6a1fd4bdd23d9f335c9296db 100644 (file)
--- a/templates/repo/release/list.tmpl
+++ b/templates/repo/release/list.tmpl
@@ -152,7 +152,9 @@
                                                                                {{if .Attachments}}
                                                                                        {{range .Attachments}}
                                                                                                <li>
-                                                                                                       <span class="ui text right" data-tooltip="{{$.i18n.Tr "repo.release.download_count" (.DownloadCount | PrettyNumber)}}" data-position="bottom right">{{svg "octicon-info"}}</span>
+                                                                                                       <span class="ui text right poping up" data-content="{{$.i18n.Tr "repo.release.download_count" (.DownloadCount | PrettyNumber)}}">
+                                                                                                               {{svg "octicon-info"}}
+                                                                                                       </span>
                                                                                                        <a target="_blank" rel="noopener noreferrer" href="{{.DownloadURL}}">
                                                                                                                <strong><span class="ui image" title='{{.Name}}'>{{svg "octicon-package" 16 "mr-2"}}</span>{{.Name}}</strong>
                                                                                                                <span class="ui text grey right">{{.Size | FileSize}}</span>

diff --git a/templates/repo/view_file.tmpl b/templates/repo/view_file.tmpl
index a849fa1f8413007ccd27eece03727a04486b13ca..2ad31f8c37d2602a8acc3a13300b893af83ac893 100644 (file)
--- a/templates/repo/view_file.tmpl
+++ b/templates/repo/view_file.tmpl
@@ -22,7 +22,7 @@
                                                </div>
                                        {{end}}
                                        {{if .LFSLock}}
-                                               <div class="file-info-entry ui" data-tooltip="{{.LFSLockHint}}" data-inverted="">
+                                               <div class="file-info-entry ui poping up" data-content="{{.LFSLockHint}}">
                                                        {{svg "octicon-lock" 16 "mr-2"}}
                                                        <a href="{{AppSubUrl}}/{{.LFSLock.Owner.Name}}">{{.LFSLockOwner}}</a>
                                                </div>

diff --git a/web_src/less/_base.less b/web_src/less/_base.less
index 3f1d5a5a54d8ca0d651894282712f5c15fe34476..65d274b6706808051bdca1d7f202092bd050e640 100644 (file)
--- 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;
 }

diff --git a/web_src/less/_markdown.less b/web_src/less/_markdown.less
index 335a2ebd47b43311bf280555e4095d943f4e8ee1..868fe5c146b07b20bdfa0618841ae14cd3dbac6f 100644 (file)
--- 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;
   }
 

diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index ef6bb329d11a855d375cc8d104315eb67af5b8aa..5c18ae385774f4be9758e911f7e94588f97507bb 100644 (file)
--- a/web_src/less/_repository.less
+++ b/web_src/less/_repository.less
@@ -113,24 +113,31 @@
 
       .item {
         padding: 0;
+        white-space: nowrap;
       }
 
-      .label.color {
-        padding: 0 8px;
-        margin-right: 5px;
+      .title {
+        max-width: 200px;
+        overflow: hidden;
+        text-overflow: ellipsis;
       }
 
-      a {
-        margin: 2px 0;
-
-        .text {
-          color: #444444;
+      @media (max-width: 1200px) {
+        .title {
+          max-width: 150px;
+        }
+      }
 
-          &:hover {
-            color: #000000;
-          }
+      @media (max-width: 1000px) {
+        .title {
+          max-width: 100px;
         }
       }
+
+      .label.color {
+        padding: 0 8px;
+        margin-right: 5px;
+      }
     }
 
     #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;
     }
   }

diff --git a/web_src/less/_review.less b/web_src/less/_review.less
index eb216970eedb93f509b56c6af6fe104cb46bc472..df6da056c877ca261625c25acea34760f49a32d7 100644 (file)
--- 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;

diff --git a/web_src/less/features/animations.less b/web_src/less/features/animations.less
index 8ee923a97dcb783ab8193943836b4396f57315ad..0b50440bf377e91b357706299b76d80bef6773eb 100644 (file)
--- 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;

diff --git a/web_src/less/helpers.less b/web_src/less/helpers.less
index be9adfa7a4b9b6e03cfdf5cd6cbcc5cbb5e860e6..1322ba4169749247207940d3ad8d6b72bf887616 100644 (file)
--- 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; }

diff --git a/web_src/less/standalone/swagger.less b/web_src/less/standalone/swagger.less
index c34469bede3fd3c99c1aae6ce09fe5c2bcd31cea..cc829961d31ef2b95cd3aef4eb5faeb24a59d422 100644 (file)
--- 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;
 }
 

diff --git a/web_src/less/themes/theme-arc-green.less b/web_src/less/themes/theme-arc-green.less
index 5b0cbb5e96e920638451a80e59a2908d964daae1..7f989e17217ac84836aa60dd6a0d119dac1c5fda 100644 (file)
--- 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;
 }