Merge branch 'main' into add-file-tree-to-file-view-page

web_src/css/base.css

@@ -742,15 +742,10 @@ input:-webkit-autofill:active,
   font-family: var(--fonts-monospace);
   font-size: 13px;
   font-weight: var(--font-weight-normal);
-  margin: 0 6px;
-  padding: 5px 10px;
+  padding: 3px 5px;
   flex-shrink: 0;
 }
 
-.ui .sha.label .shortsha {
-  display: inline-block; /* not sure whether it is still needed */
-}
-
 .ui .button.truncate {
   display: inline-block;
   max-width: 100%;
@@ -933,7 +928,8 @@ strong.attention-caution, svg.attention-caution {
   color: var(--color-red-dark-1);
 }
 
-.center:not(.popup) {
+/* FIXME: this is a longstanding dirty patch since 2015, it only makes the pages more messy and shouldn't be used */
+.center {
   text-align: center;
 }
 
@@ -989,22 +985,6 @@ overflow-menu .ui.label {
   margin-top: 3em !important;
 }
 
-/* multiple radio or checkboxes as inline element */
-.inline-grouped-list {
-  display: inline-block;
-  vertical-align: top;
-}
-
-.inline-grouped-list > .ui {
-  display: block;
-  margin-top: 5px;
-  margin-bottom: 10px;
-}
-
-.inline-grouped-list > .ui:first-child {
-  margin-top: 1px;
-}
-
 .lines-blame-btn {
   padding: 0 0 0 5px;
   display: flex;

web_src/css/explore.css

@@ -1,13 +1,4 @@
-.explore .secondary-nav {
-  border-width: 1px !important;
-}
-
-.explore .secondary-nav .svg {
-  width: 16px;
-  text-align: center;
-  margin-right: 5px;
-}
-
+/* FIXME: need to refactor the repo branches list page and move these styles to proper place */
 .ui.repository.branches .info {
   font-size: 12px;
   color: var(--color-text-light);
@@ -20,12 +11,3 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
-
-.ui.repository.branches .overflow-visible {
-  overflow: visible;
-}
-
-/* fix alignment of PR popup in branches table */
-.ui.repository.branches table .ui.popup {
-  text-align: left;
-}

web_src/css/features/gitgraph.css

@@ -57,6 +57,12 @@
   white-space: nowrap;
   display: flex;
   align-items: center;
+  gap: 0.25em;
+}
+
+#git-graph-container li .ui.label.commit-id-short {
+  padding-top: 2px;
+  padding-bottom: 2px;
 }
 
 #git-graph-container li .node-relation {
@@ -112,17 +118,6 @@
   text-overflow: ellipsis;
 }
 
-#git-graph-container #rev-list .sha.label {
-  padding-top: 5px;
-  padding-bottom: 3px;
-}
-
-#git-graph-container #rev-list .sha.label .ui.detail.icon.button {
-  padding-top: 3px;
-  margin-top: -5px;
-  padding-bottom: 1px;
-}
-
 #git-graph-container #graph-raw-list {
   margin: 0;
 }

web_src/css/form.css

@@ -38,11 +38,6 @@ textarea,
   color: var(--color-input-text);
 }
 
-/* fix fomantic small dropdown having inconsistent padding with input */
-.ui.small.selection.dropdown {
-  padding: .67857143em 1.6em .67857143em 1em;
-}
-
 input:hover,
 textarea:hover,
 .ui.input input:hover,
@@ -109,9 +104,8 @@ textarea:focus,
   color: var(--color-input-text);
 }
 
-/* match <select> padding to <input> */
-.ui.form select {
-  padding: 0.67857143em 1em;
+.ui.form .field > .selection.dropdown {
+  min-width: 14em; /* matches the default min width */
 }
 
 .form .help {
@@ -120,47 +114,6 @@ textarea:focus,
   display: inline-block;
 }
 
-#create-page-form form {
-  margin: auto;
-}
-
-#create-page-form form .ui.message {
-  text-align: center;
-}
-
-@media (min-width: 768px) {
-  #create-page-form form {
-    width: 800px !important;
-  }
-  #create-page-form form .header {
-    padding-left: 280px !important;
-  }
-  #create-page-form form .inline.field > label {
-    text-align: right;
-    width: 250px !important;
-    word-wrap: break-word;
-  }
-  #create-page-form form .help {
-    margin-left: 265px !important;
-  }
-  #create-page-form form .optional .title {
-    margin-left: 250px !important;
-  }
-  #create-page-form form .inline.field > input,
-  #create-page-form form .inline.field > textarea {
-    width: 50%;
-  }
-}
-
-@media (max-width: 767.98px) {
-  #create-page-form form .optional .title {
-    margin-left: 15px;
-  }
-  #create-page-form form .inline.field > label {
-    display: block;
-  }
-}
-
 .m-captcha-style {
   width: 100%;
   height: 5em;
@@ -187,7 +140,7 @@ textarea:focus,
 }
 
 @media (max-height: 575px) {
-  #rc-imageselect,
+  #rc-imageselect, /* google recaptcha */
   .g-recaptcha-style,
   .h-captcha-style {
     transform: scale(0.77);
@@ -195,295 +148,40 @@ textarea:focus,
   }
 }
 
-.user.forgot.password form,
-.user.reset.password form,
-.user.signup form {
-  margin: auto;
-  width: 700px !important;
-}
-
-.user.activate form .ui.message,
-.user.forgot.password form .ui.message,
-.user.reset.password form .ui.message,
-.user.link-account form .ui.message,
-.user.signin form .ui.message,
-.user.signup form .ui.message {
-  text-align: center;
-}
-
-@media (min-width: 768px) {
-  .user.activate form,
-  .user.forgot.password form,
-  .user.reset.password form,
-  .user.link-account form,
-  .user.signin form,
-  .user.signup form {
-    width: 800px !important;
-  }
-  .user.activate form .header,
-  .user.forgot.password form .header,
-  .user.reset.password form .header,
-  .user.link-account form .header,
-  .user.signin form .header,
-  .user.signup form .header {
-    padding-left: 280px !important;
-  }
-  .user.activate form .inline.field > label {
-    text-align: right;
-    width: 250px !important;
-    word-wrap: break-word;
-  }
-  .user.activate form .help,
-  .user.forgot.password form .help,
-  .user.reset.password form .help,
-  .user.link-account form .help,
-  .user.signin form .help,
-  .user.signup form .help {
-    margin-left: 265px !important;
-  }
-  .user.activate form .optional .title,
-  .user.forgot.password form .optional .title,
-  .user.reset.password form .optional .title,
-  .user.link-account form .optional .title,
-  .user.signin form .optional .title,
-  .user.signup form .optional .title {
-    margin-left: 250px !important;
-  }
-}
-
-@media (max-width: 767.98px) {
-  .user.activate form .optional .title,
-  .user.forgot.password form .optional .title,
-  .user.reset.password form .optional .title,
-  .user.link-account form .optional .title,
-  .user.signin form .optional .title,
-  .user.signup form .optional .title {
-    margin-left: 15px;
-  }
-  .user.activate form .inline.field > label,
-  .user.forgot.password form .inline.field > label,
-  .user.reset.password form .inline.field > label,
-  .user.link-account form .inline.field > label,
-  .user.signin form .inline.field > label,
-  .user.signup form .inline.field > label {
-    display: block;
-  }
-}
-
-.user.activate form .header,
-.user.forgot.password form .header,
-.user.reset.password form .header,
-.user.link-account form .header,
-.user.signin form .header,
-.user.signup form .header {
-  padding-left: 0 !important;
-  text-align: center;
-}
-
-.user.activate form .inline.field > label,
-.user.forgot.password form .inline.field > label,
-.user.reset.password form .inline.field > label,
-.user.link-account form .inline.field > label,
-.user.signin form .inline.field > label,
-.user.signup form .inline.field > label {
-  width: 200px;
-}
-
-@media (max-width: 767.98px) {
-  .user.activate form .inline.field > label,
-  .user.forgot.password form .inline.field > label,
-  .user.reset.password form .inline.field > label,
-  .user.link-account form .inline.field > label,
-  .user.signin form .inline.field > label,
-  .user.signup form .inline.field > label {
-    width: 100% !important;
-  }
-}
-
-.user.activate form input[type="number"],
-.user.forgot.password form input[type="number"],
-.user.reset.password form input[type="number"],
-.user.link-account form input[type="number"],
-.user.signin form input[type="number"],
-.user.signup form input[type="number"] {
-  -moz-appearance: textfield;
-}
-
-.user.activate form input::-webkit-outer-spin-button,
-.user.forgot.password form input::-webkit-outer-spin-button,
-.user.reset.password form input::-webkit-outer-spin-button,
-.user.link-account form input::-webkit-outer-spin-button,
-.user.signin form input::-webkit-outer-spin-button,
-.user.signup form input::-webkit-outer-spin-button,
-.user.activate form input::-webkit-inner-spin-button,
-.user.forgot.password form input::-webkit-inner-spin-button,
-.user.reset.password form input::-webkit-inner-spin-button,
-.user.link-account form input::-webkit-inner-spin-button,
-.user.signin form input::-webkit-inner-spin-button,
-.user.signup form input::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-.repository.new.repo form,
-.repository.new.migrate form,
-.repository.new.fork form {
-  margin: auto;
-}
-
-.repository.new.repo form .ui.message,
-.repository.new.migrate form .ui.message,
-.repository.new.fork form .ui.message {
-  text-align: center;
-}
-
-@media (min-width: 768px) {
-  .repository.new.repo form,
-  .repository.new.migrate form,
-  .repository.new.fork form {
-    width: 800px !important;
-  }
-  .repository.new.repo form .header,
-  .repository.new.migrate form .header,
-  .repository.new.fork form .header {
-    padding-left: 280px !important;
-  }
-  .repository.new.repo form .inline.field > label,
-  .repository.new.migrate form .inline.field > label,
-  .repository.new.fork form .inline.field > label {
-    text-align: right;
-    width: 250px !important;
-    word-wrap: break-word;
-  }
-  .repository.new.repo form .help,
-  .repository.new.migrate form .help,
-  .repository.new.fork form .help {
-    margin-left: 265px !important;
-  }
-  .repository.new.repo form .optional .title,
-  .repository.new.migrate form .optional .title,
-  .repository.new.fork form .optional .title {
-    margin-left: 250px !important;
-  }
-  .repository.new.repo form .inline.field > input,
-  .repository.new.migrate form .inline.field > input,
-  .repository.new.fork form .inline.field > input,
-  .repository.new.repo form .inline.field > textarea,
-  .repository.new.migrate form .inline.field > textarea,
-  .repository.new.fork form .inline.field > textarea {
-    width: 50%;
-  }
-}
-
-@media (max-width: 767.98px) {
-  .repository.new.repo form .optional .title,
-  .repository.new.migrate form .optional .title,
-  .repository.new.fork form .optional .title {
-    margin-left: 15px;
-  }
-  .repository.new.repo form .inline.field > label,
-  .repository.new.migrate form .inline.field > label,
-  .repository.new.fork form .inline.field > label {
-    display: block;
-  }
-}
-
-.repository.new.repo form .dropdown .text,
-.repository.new.migrate form .dropdown .text,
-.repository.new.fork form .dropdown .text {
-  margin-right: 0 !important;
-}
-
-.repository.new.repo form .header,
-.repository.new.migrate form .header,
-.repository.new.fork form .header {
-  padding-left: 0 !important;
-  text-align: center;
-}
-
-.repository.new.repo form .selection.dropdown,
-.repository.new.migrate form .selection.dropdown,
-.repository.new.fork form .selection.dropdown,
-.repository.new.fork form .field a {
-  vertical-align: middle;
-  width: 50% !important;
-}
-
-@media (max-width: 767.98px) {
-  .repository.new.repo form label,
-  .repository.new.migrate form label,
-  .repository.new.fork form label,
-  .repository.new.repo form .inline.field > input,
-  .repository.new.migrate form .inline.field > input,
-  .repository.new.fork form .inline.field > input,
-  .repository.new.fork form .field a,
-  .repository.new.repo form .selection.dropdown,
-  .repository.new.migrate form .selection.dropdown,
-  .repository.new.fork form .selection.dropdown {
-    width: 100% !important;
-  }
-  .repository.new.repo form .field button,
-  .repository.new.migrate form .field button,
-  .repository.new.fork form .field button,
-  .repository.new.repo form .field a,
-  .repository.new.migrate form .field a {
-    margin-bottom: 1em;
-    width: 100%;
-  }
-}
-
-@media (min-width: 768px) {
-  .repository.new.repo .ui.form #auto-init {
-    margin-left: 265px !important;
-  }
-}
-
-.repository.new.repo .ui.form .selection.dropdown:not(.owner) {
-  width: 50% !important;
-}
-
-@media (max-width: 767.98px) {
-  .repository.new.repo .ui.form .selection.dropdown:not(.owner) {
-    width: 100% !important;
-  }
-}
-
-/* form fields with additional content besides their label, used on login form
- * use like <div class="field"><label/><a/><input/></div> */
-.form-field-content-aside-label {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-}
-.form-field-content-aside-label > *:nth-child(2) {
+.ui.form.left-right-form .inline.field > label {
   text-align: right;
-}
-.form-field-content-aside-label input {
-  grid-column: span 2;
+  width: 250px;
+  margin-right: 10px;
 }
 
-.ui.form .field > .selection.dropdown {
-  min-width: 14em; /* matches the default min width */
+.ui.form.left-right-form .inline.field > .help {
+  margin-left: calc(250px + 15px);
 }
 
-.new.webhook form .help {
-  margin-left: 25px;
+.ui.form.left-right-form .inline.field input:not([type="checkbox"], [type="radio"]),
+.ui.form.left-right-form .inline.field .ui.dropdown,
+.ui.form.left-right-form .inline.field textarea {
+  width: 50%;
 }
 
-.new.webhook .events.fields .column {
-  padding-left: 40px;
-}
-
-.githook textarea {
-  font-family: var(--fonts-monospace);
+.ui.form.left-right-form .inline.field .inline-right {
+  display: inline-flex;
+  flex-direction: column;
+  gap: 0.5em;
 }
 
 @media (max-width: 767.98px) {
-  .new.org .ui.form .field button,
-  .new.org .ui.form .field a {
-    margin-bottom: 1em;
+  .ui.form.left-right-form .inline.field > label {
+    width: 100%;
+    margin: 0;
+    text-align: left;
+  }
+  .ui.form.left-right-form .inline.field > .help {
+    margin: 0;
+  }
+  .ui.form.left-right-form .inline.field input:not([type="checkbox"], [type="radio"]),
+  .ui.form.left-right-form .inline.field .ui.dropdown,
+  .ui.form.left-right-form .inline.field textarea {
     width: 100%;
   }
-  .new.org .ui.form .field input {
-    width: 100% !important;
-  }
 }

web_src/css/index.css

@@ -82,5 +82,6 @@
 @import "./review.css";
 @import "./actions.css";
 
-@tailwind utilities;
 @import "./helpers.css";
+
+@tailwind utilities;

web_src/css/modules/navbar.css

@@ -103,11 +103,11 @@
 #navbar .ui.dropdown .navbar-profile-admin {
   display: block;
   position: absolute;
-  font-size: 10px;
+  font-size: 9px;
   font-weight: var(--font-weight-bold);
   color: var(--color-nav-bg);
   background: var(--color-primary);
-  padding: 2px 4px;
+  padding: 2px 3px;
   border-radius: 10px;
   top: -1px;
   left: 18px;

web_src/css/org.css

@@ -1,94 +1,7 @@
-#create-page-form form {
-  margin: auto;
-}
-
-#create-page-form form .ui.message {
-  text-align: center;
-}
-
-@media (min-width: 768px) {
-  #create-page-form form {
-    width: 800px !important;
-  }
-  #create-page-form form .header {
-    padding-left: 280px !important;
-  }
-  #create-page-form form .inline.field > label {
-    text-align: right;
-    width: 250px !important;
-    word-wrap: break-word;
-  }
-  #create-page-form form .help {
-    margin-left: 265px !important;
-  }
-  #create-page-form form .optional .title {
-    margin-left: 250px !important;
-  }
-  #create-page-form form .inline.field > input,
-  #create-page-form form .inline.field > textarea {
-    width: 50%;
-  }
-}
-
-@media (max-width: 767.98px) {
-  #create-page-form form .optional .title {
-    margin-left: 15px;
-  }
-  #create-page-form form .inline.field > label {
-    display: block;
-  }
-}
-
 .organization .head .ui.header .ui.right {
   margin-top: 5px;
 }
 
-.organization.new.org form {
-  margin: auto;
-}
-
-.organization.new.org form .ui.message {
-  text-align: center;
-}
-
-@media (min-width: 768px) {
-  .organization.new.org form {
-    width: 800px !important;
-  }
-  .organization.new.org form .header {
-    padding-left: 280px !important;
-  }
-  .organization.new.org form .inline.field > label {
-    text-align: right;
-    width: 250px !important;
-    word-wrap: break-word;
-  }
-  .organization.new.org form .help {
-    margin-left: 265px !important;
-  }
-  .organization.new.org form .optional .title {
-    margin-left: 250px !important;
-  }
-  .organization.new.org form .inline.field > input,
-  .organization.new.org form .inline.field > textarea {
-    width: 50%;
-  }
-}
-
-@media (max-width: 767.98px) {
-  .organization.new.org form .optional .title {
-    margin-left: 15px;
-  }
-  .organization.new.org form .inline.field > label {
-    display: block;
-  }
-}
-
-.organization.new.org form .header {
-  padding-left: 0 !important;
-  text-align: center;
-}
-
 .page-content.organization .org-avatar {
   margin-right: 15px;
 }

web_src/css/repo.css

@@ -120,15 +120,13 @@ td .commit-summary {
   align-items: center;
   overflow: hidden;
   text-overflow: ellipsis;
+  gap: 0.25em;
 }
 
 @media (max-width: 767.98px) {
-  .latest-commit .sha {
+  .latest-commit .commit-id-short {
     display: none;
   }
-  .latest-commit .commit-summary {
-    margin-left: 8px;
-  }
 }
 
 .repo-path {
@@ -605,15 +603,6 @@ td .commit-summary {
   margin-right: 0.25em;
 }
 
-.singular-commit {
-  display: flex;
-  align-items: center;
-}
-
-.singular-commit .badge {
-  height: 30px !important;
-}
-
 .repository.view.issue .comment-list .timeline-item.event > .commit-status-link {
   float: right;
   margin-right: 8px;
@@ -836,10 +825,6 @@ td .commit-summary {
   height: 10px;
 }
 
-.repository.compare.pull .show-form-container {
-  text-align: left;
-}
-
 .repository .choose.branch {
   display: flex;
   align-items: center;
@@ -877,11 +862,6 @@ td .commit-summary {
   margin-top: -8px;
 }
 
-.repository.compare.pull .pullrequest-form {
-  margin-top: 16px;
-  margin-bottom: 16px;
-}
-
 .repository.compare.pull .markup {
   font-size: 14px;
 }
@@ -936,14 +916,6 @@ td .commit-summary {
   width: 200px;
 }
 
-.repository #commits-table thead .shatd {
-  text-align: center;
-}
-
-.repository #commits-table td.sha .sha.label {
-  margin: 0;
-}
-
 .repository #commits-table.ui.basic.striped.table tbody tr:nth-child(2n) {
   background-color: var(--color-light) !important;
 }
@@ -1440,12 +1412,6 @@ td .commit-summary {
   padding-top: 15px;
 }
 
-.commit-header-row {
-  min-height: 50px !important;
-  padding-top: 0 !important;
-  padding-bottom: 0 !important;
-}
-
 .commit-header-buttons {
   display: flex;
   gap: 4px;
@@ -1622,7 +1588,7 @@ td .commit-summary {
   align-items: center;
 }
 
-.labels-list .label {
+.labels-list .label, .scope-parent > .label {
   padding: 0 6px;
   min-height: 20px;
   line-height: 1.3; /* there is a `font-size: 1.25em` for inside emoji, so here the line-height needs to be larger slightly */
@@ -1701,6 +1667,10 @@ tbody.commit-list {
   white-space: nowrap;
 }
 
+.latest-commit .message-wrapper {
+  max-width: calc(100% - 2.5rem);
+}
+
 /* in the commit list, messages can wrap so we can use inline */
 .commit-list .message-wrapper {
   display: inline;
@@ -2128,18 +2098,6 @@ tbody.commit-list {
   .repository.view.issue .comment-list .timeline .comment-header-right .role-label {
     display: none;
   }
-  .commit-header-row .ui.horizontal.list {
-    width: 100%;
-    overflow-x: auto;
-    margin-top: 2px;
-  }
-  .commit-header-row .ui.horizontal.list .item {
-    align-items: center;
-    display: flex;
-  }
-  .commit-header-row .author {
-    padding: 3px 0;
-  }
   .commit-header h3 {
     flex-basis: auto !important;
     margin-bottom: 0.5rem !important;

web_src/css/repo/commit-sign.css

@@ -1,272 +1,60 @@
-
-.repository .ui.attached.isSigned.isWarning {
-  border-left: 1px solid var(--color-error-border);
-  border-right: 1px solid var(--color-error-border);
-}
-
-.repository .ui.attached.isSigned.isWarning.top,
-.repository .ui.attached.isSigned.isWarning.message {
-  border-top: 1px solid var(--color-error-border);
-}
-
-.repository .ui.attached.isSigned.isWarning.message {
-  box-shadow: none;
-  background-color: var(--color-error-bg);
-  color: var(--color-error-text);
-}
-
-.repository .ui.attached.isSigned.isWarning.message .ui.text {
-  color: var(--color-error-text);
-}
-
-.repository .ui.attached.isSigned.isWarning:last-child,
-.repository .ui.attached.isSigned.isWarning.bottom {
-  border-bottom: 1px solid var(--color-error-border);
-}
-
-.repository .ui.attached.isSigned.isVerified {
-  border-left: 1px solid var(--color-success-border);
-  border-right: 1px solid var(--color-success-border);
-}
-
-.repository .ui.attached.isSigned.isVerified.top,
-.repository .ui.attached.isSigned.isVerified.message {
-  border-top: 1px solid var(--color-success-border);
-}
-
-.repository .ui.attached.isSigned.isVerified.message {
-  box-shadow: none;
-  background-color: var(--color-success-bg);
-  color: var(--color-success-text);
-}
-
-.repository .ui.attached.isSigned.isVerified.message .pull-right {
-  color: var(--color-text);
-}
-
-.repository .ui.attached.isSigned.isVerified.message .ui.text {
-  color: var(--color-success-text);
-}
-
-.repository .ui.attached.isSigned.isVerified:last-child,
-.repository .ui.attached.isSigned.isVerified.bottom {
-  border-bottom: 1px solid var(--color-success-border);
-}
-
-.repository .ui.attached.isSigned.isVerifiedUntrusted,
-.repository .ui.attached.isSigned.isVerifiedUnmatched {
-  border-left: 1px solid var(--color-warning-border);
-  border-right: 1px solid var(--color-warning-border);
-}
-
-.repository .ui.attached.isSigned.isVerifiedUntrusted.top,
-.repository .ui.attached.isSigned.isVerifiedUnmatched.top,
-.repository .ui.attached.isSigned.isVerifiedUntrusted.message,
-.repository .ui.attached.isSigned.isVerifiedUnmatched.message {
-  border-top: 1px solid var(--color-warning-border);
-}
-
-.repository .ui.attached.isSigned.isVerifiedUntrusted.message,
-.repository .ui.attached.isSigned.isVerifiedUnmatched.message {
-  box-shadow: none;
-  background-color: var(--color-warning-bg);
-  color: var(--color-warning-text);
-}
-
-.repository .ui.attached.isSigned.isVerifiedUntrusted.message .ui.text,
-.repository .ui.attached.isSigned.isVerifiedUnmatched.message .ui.text {
-  color: var(--color-warning-text);
-}
-
-.repository .ui.attached.isSigned.isVerifiedUntrusted:last-child,
-.repository .ui.attached.isSigned.isVerifiedUnmatched:last-child,
-.repository .ui.attached.isSigned.isVerifiedUntrusted.bottom,
-.repository .ui.attached.isSigned.isVerifiedUnmatched.bottom {
-  border-bottom: 1px solid var(--color-warning-border);
-}
-
-.repository #commits-table td.sha .sha.label,
-.repository #repo-files-table .sha.label,
-.repository #repo-file-commit-box .sha.label,
-.repository #rev-list .sha.label,
-.repository .timeline-item.commits-list .singular-commit .sha.label {
+.ui.label.commit-id-short,
+.ui.label.commit-sign-badge {
   border: 1px solid var(--color-light-border);
+  font-size: 13px;
+  font-weight: var(--font-weight-normal);
+  padding: 3px 5px;
+  flex-shrink: 0;
 }
 
-.repository #commits-table td.sha .sha.label .detail.icon,
-.repository #repo-files-table .sha.label .detail.icon,
-.repository #repo-file-commit-box .sha.label .detail.icon,
-.repository #rev-list .sha.label .detail.icon,
-.repository .timeline-item.commits-list .singular-commit .sha.label .detail.icon {
-  background: var(--color-light);
-  margin: -6px -10px -4px 0;
-  padding: 5px 4px 5px 6px;
-  border-left: 1px solid var(--color-light-border);
-  border-top: 0;
-  border-right: 0;
-  border-bottom: 0;
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
+.ui.label.commit-id-short {
+  font-family: var(--fonts-monospace);
 }
 
-.repository #commits-table td.sha .sha.label .detail.icon .svg,
-.repository #repo-files-table .sha.label .detail.icon .svg,
-.repository #repo-file-commit-box .sha.label .detail.icon .svg,
-.repository #rev-list .sha.label .detail.icon .svg,
-.repository .timeline-item.commits-list .singular-commit .sha.label .detail.icon .svg {
-  margin: 0 0.25em 0 0;
-}
-
-.repository #commits-table td.sha .sha.label .detail.icon > div,
-.repository #repo-files-table .sha.label .detail.icon > div,
-.repository #repo-file-commit-box .sha.label .detail.icon > div,
-.repository #rev-list .sha.label .detail.icon > div,
-.repository .timeline-item.commits-list .singular-commit .sha.label .detail.icon > div {
-  display: flex;
-  align-items: center;
-}
-
-.repository #commits-table td.sha .sha.label.isSigned.isWarning,
-.repository #repo-files-table .sha.label.isSigned.isWarning,
-.repository #repo-file-commit-box .sha.label.isSigned.isWarning,
-.repository #rev-list .sha.label.isSigned.isWarning,
-.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isWarning {
-  border: 1px solid var(--color-red-badge);
-  background: var(--color-red-badge-bg);
-}
-
-.repository #commits-table td.sha .sha.label.isSigned.isWarning .detail.icon,
-.repository #repo-files-table .sha.label.isSigned.isWarning .detail.icon,
-.repository #repo-file-commit-box .sha.label.isSigned.isWarning .detail.icon,
-.repository #rev-list .sha.label.isSigned.isWarning .detail.icon,
-.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isWarning .detail.icon {
-  border-left: 1px solid var(--color-red-badge);
-  color: var(--color-red-badge);
-}
-
-.repository #commits-table td.sha .sha.label.isSigned.isWarning:hover,
-.repository #repo-files-table .sha.label.isSigned.isWarning:hover,
-.repository #repo-file-commit-box .sha.label.isSigned.isWarning:hover,
-.repository #rev-list .sha.label.isSigned.isWarning:hover,
-.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isWarning:hover {
-  background: var(--color-red-badge-hover-bg) !important;
-}
-
-.repository #commits-table td.sha .sha.label.isSigned.isVerified,
-.repository #repo-files-table .sha.label.isSigned.isVerified,
-.repository #repo-file-commit-box .sha.label.isSigned.isVerified,
-.repository #rev-list .sha.label.isSigned.isVerified,
-.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerified {
-  border: 1px solid var(--color-green-badge);
-  background: var(--color-green-badge-bg);
-}
-
-.repository #commits-table td.sha .sha.label.isSigned.isVerified .detail.icon,
-.repository #repo-files-table .sha.label.isSigned.isVerified .detail.icon,
-.repository #repo-file-commit-box .sha.label.isSigned.isVerified .detail.icon,
-.repository #rev-list .sha.label.isSigned.isVerified .detail.icon,
-.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerified .detail.icon {
-  border-left: 1px solid var(--color-green-badge);
-  color: var(--color-green-badge);
-}
-
-.repository #commits-table td.sha .sha.label.isSigned.isVerified:hover,
-.repository #repo-files-table .sha.label.isSigned.isVerified:hover,
-.repository #repo-file-commit-box .sha.label.isSigned.isVerified:hover,
-.repository #rev-list .sha.label.isSigned.isVerified:hover,
-.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerified:hover {
-  background: var(--color-green-badge-hover-bg) !important;
-}
-
-.repository #commits-table td.sha .sha.label.isSigned.isVerifiedUntrusted,
-.repository #repo-files-table .sha.label.isSigned.isVerifiedUntrusted,
-.repository #repo-file-commit-box .sha.label.isSigned.isVerifiedUntrusted,
-.repository #rev-list .sha.label.isSigned.isVerifiedUntrusted,
-.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerifiedUntrusted {
-  border: 1px solid var(--color-yellow-badge);
-  background: var(--color-yellow-badge-bg);
-}
-
-.repository #commits-table td.sha .sha.label.isSigned.isVerifiedUntrusted .detail.icon,
-.repository #repo-files-table .sha.label.isSigned.isVerifiedUntrusted .detail.icon,
-.repository #repo-file-commit-box .sha.label.isSigned.isVerifiedUntrusted .detail.icon,
-.repository #rev-list .sha.label.isSigned.isVerifiedUntrusted .detail.icon,
-.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerifiedUntrusted .detail.icon {
-  border-left: 1px solid var(--color-yellow-badge);
-  color: var(--color-yellow-badge);
-}
-
-.repository #commits-table td.sha .sha.label.isSigned.isVerifiedUntrusted:hover,
-.repository #repo-files-table .sha.label.isSigned.isVerifiedUntrusted:hover,
-.repository #repo-file-commit-box .sha.label.isSigned.isVerifiedUntrusted:hover,
-.repository #rev-list .sha.label.isSigned.isVerifiedUntrusted:hover,
-.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerifiedUntrusted:hover {
-  background: var(--color-yellow-badge-hover-bg) !important;
-}
-
-.repository #commits-table td.sha .sha.label.isSigned.isVerifiedUnmatched,
-.repository #repo-files-table .sha.label.isSigned.isVerifiedUnmatched,
-.repository #repo-file-commit-box .sha.label.isSigned.isVerifiedUnmatched,
-.repository #rev-list .sha.label.isSigned.isVerifiedUnmatched,
-.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerifiedUnmatched {
-  border: 1px solid var(--color-orange-badge);
-  background: var(--color-orange-badge-bg);
-}
-
-.repository #commits-table td.sha .sha.label.isSigned.isVerifiedUnmatched .detail.icon,
-.repository #repo-files-table .sha.label.isSigned.isVerifiedUnmatched .detail.icon,
-.repository #repo-file-commit-box .sha.label.isSigned.isVerifiedUnmatched .detail.icon,
-.repository #rev-list .sha.label.isSigned.isVerifiedUnmatched .detail.icon,
-.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerifiedUnmatched .detail.icon {
-  border-left: 1px solid var(--color-orange-badge);
-  color: var(--color-orange-badge);
-}
-
-.repository #commits-table td.sha .sha.label.isSigned.isVerifiedUnmatched:hover,
-.repository #repo-files-table .sha.label.isSigned.isVerifiedUnmatched:hover,
-.repository #repo-file-commit-box .sha.label.isSigned.isVerifiedUnmatched:hover,
-.repository #rev-list .sha.label.isSigned.isVerifiedUnmatched:hover,
-.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerifiedUnmatched:hover {
-  background: var(--color-orange-badge-hover-bg) !important;
-}
-
-.singular-commit .shabox .sha.label {
+.ui.label.commit-id-short > .commit-sign-badge {
   margin: 0;
-  border: 1px solid var(--color-light-border);
+  padding: 0;
+  border: 0 !important;
+  border-radius: 0;
+  background: transparent;
 }
 
-.singular-commit .shabox .sha.label.isSigned.isWarning {
-  border: 1px solid var(--color-red-badge);
-  background: var(--color-red-badge-bg);
+.ui.label.commit-id-short > .commit-sign-badge:hover {
+  background: transparent !important;
 }
 
-.singular-commit .shabox .sha.label.isSigned.isWarning:hover {
-  background: var(--color-red-badge-hover-bg) !important;
+.commit-is-signed.sign-trusted {
+  border: 1px solid var(--color-green-badge) !important;
+  background: var(--color-green-badge-bg) !important;
 }
 
-.singular-commit .shabox .sha.label.isSigned.isVerified {
-  border: 1px solid var(--color-green-badge);
-  background: var(--color-green-badge-bg);
-}
-
-.singular-commit .shabox .sha.label.isSigned.isVerified:hover {
+.commit-is-signed.sign-trusted:hover {
   background: var(--color-green-badge-hover-bg) !important;
 }
 
-.singular-commit .shabox .sha.label.isSigned.isVerifiedUntrusted {
-  border: 1px solid var(--color-yellow-badge);
-  background: var(--color-yellow-badge-bg);
+.commit-is-signed.sign-untrusted {
+  border: 1px solid var(--color-yellow-badge) !important;
+  background: var(--color-yellow-badge-bg) !important;
 }
 
-.singular-commit .shabox .sha.label.isSigned.isVerifiedUntrusted:hover {
+.commit-is-signed.sign-untrusted:hover {
   background: var(--color-yellow-badge-hover-bg) !important;
 }
 
-.singular-commit .shabox .sha.label.isSigned.isVerifiedUnmatched {
-  border: 1px solid var(--color-orange-badge);
-  background: var(--color-orange-badge-bg);
+.commit-is-signed.sign-unmatched {
+  border: 1px solid var(--color-orange-badge) !important;
+  background: var(--color-orange-badge-bg) !important;
 }
 
-.singular-commit .shabox .sha.label.isSigned.isVerifiedUnmatched:hover {
+.commit-is-signed.sign-unmatched:hover {
   background: var(--color-orange-badge-hover-bg) !important;
 }
+
+.commit-is-signed.sign-warning {
+  border: 1px solid var(--color-red-badge) !important;
+  background: var(--color-red-badge-bg) !important;
+}
+
+.commit-is-signed.sign-warning:hover {
+  background: var(--color-red-badge-hover-bg) !important;
+}