code.gitea.io/gitea@v1.22.3/web_src/css/repo.css (about)

     1  .repository .data-table .line-num,
     2  .repository .diff-file-box .file-body.file-code .lines-num,
     3  .repository .diff-file-box .code-diff tbody tr .lines-type-marker {
     4    user-select: none;
     5  }
     6  
     7  .repository .owner.dropdown {
     8    min-width: 40% !important;
     9  }
    10  
    11  .repository .unicode-escaped .escaped-code-point[data-escaped]::before {
    12    visibility: visible;
    13    content: attr(data-escaped);
    14    font-family: var(--fonts-monospace);
    15    color: var(--color-red);
    16  }
    17  
    18  .repository .unicode-escaped .escaped-code-point .char {
    19    display: none;
    20  }
    21  
    22  .repository .broken-code-point {
    23    font-family: var(--fonts-monospace);
    24    color: var(--color-blue);
    25  }
    26  
    27  .repository .unicode-escaped .ambiguous-code-point {
    28    border: 1px var(--color-yellow) solid;
    29  }
    30  
    31  .issue-content {
    32    display: flex;
    33    align-items: flex-start;
    34    gap: 16px;
    35  }
    36  
    37  @media (max-width: 767.98px) {
    38    .issue-content {
    39      flex-direction: column;
    40    }
    41  }
    42  
    43  .issue-content-left {
    44    margin: 0 !important;
    45    width: calc(100% - 316px);
    46  }
    47  
    48  .issue-content-right {
    49    margin: 0 !important;
    50    width: 300px;
    51  }
    52  
    53  .issue-content-right .dropdown > .menu {
    54    max-width: 270px;
    55    min-width: 0;
    56  }
    57  
    58  @media (max-width: 767.98px) {
    59    .issue-content-left,
    60    .issue-content-right {
    61      width: 100%;
    62    }
    63  }
    64  
    65  .repository .issue-content-right .ui.list .dependency {
    66    padding: 0;
    67    white-space: nowrap;
    68  }
    69  
    70  .repository .issue-content-right .ui.list .title {
    71    overflow: hidden;
    72    text-overflow: ellipsis;
    73  }
    74  
    75  .repository .issue-content-right #deadlineForm input {
    76    width: 12.8rem;
    77    border-radius: var(--border-radius) 0 0 var(--border-radius);
    78    border-right: 0;
    79    white-space: nowrap;
    80  }
    81  
    82  .repository .issue-content-right .filter.menu {
    83    max-height: 500px;
    84    overflow-x: auto;
    85  }
    86  
    87  .repository .filter.menu.labels .label-filter .menu .info {
    88    display: inline-block;
    89    padding: 0.5rem 0;
    90    font-size: 12px;
    91    width: 100%;
    92    white-space: nowrap;
    93    margin-left: 10px;
    94    margin-right: 8px;
    95    text-align: left;
    96  }
    97  
    98  .repository .filter.menu.labels .label-filter .menu .info code {
    99    border: 1px solid var(--color-secondary);
   100    border-radius: var(--border-radius);
   101    padding: 1px 2px;
   102    font-size: 11px;
   103  }
   104  
   105  /* make all issue filter dropdown menus popup leftward, to avoid go out the viewport (right side) */
   106  .repository .filter.menu .ui.dropdown .menu {
   107    max-height: 500px;
   108    max-width: 300px;
   109    overflow-x: hidden;
   110    right: 0;
   111    left: auto;
   112  }
   113  
   114  /* the label-filter is the first dropdown, it shouldn't be shown leftward, otherwise it may go out the viewport (left side) */
   115  .repository .filter.menu .ui.dropdown.label-filter .menu {
   116    min-width: max-content;
   117    right: unset;
   118    left: 0;
   119  }
   120  
   121  .repository .select-label .desc {
   122    padding-left: 23px;
   123  }
   124  
   125  /* For the secondary pointing menu, respect its own border-bottom */
   126  /* style reference: https://semantic-ui.com/collections/menu.html#pointing */
   127  .repository .ui.tabs.container .ui.menu:not(.secondary.pointing) {
   128    border-bottom: 0;
   129  }
   130  
   131  .repository .ui.tabs.divider {
   132    margin-top: -1px;
   133    margin-bottom: 12px;
   134  }
   135  
   136  .repository .clone-panel {
   137    display: flex;
   138    flex: 1;
   139  }
   140  
   141  .repository.wiki .clone-panel {
   142    flex: 0;
   143  }
   144  
   145  .repository.wiki .clone-panel input {
   146    width: 20ch;
   147  }
   148  
   149  .repository .clone-panel #repo-clone-url {
   150    border-radius: 0;
   151    flex: 1;
   152  }
   153  
   154  .repository .ui.action.input.clone-panel > button + button,
   155  .repository .ui.action.input.clone-panel > button + input {
   156    margin-left: -1px; /* make the borders overlap to avoid double borders */
   157  }
   158  
   159  .repository .clone-panel > button:first-of-type {
   160    border-radius: var(--border-radius) 0 0 var(--border-radius) !important;
   161  }
   162  
   163  .repository .clone-panel > button:last-of-type {
   164    border-radius: 0 var(--border-radius) var(--border-radius) 0 !important;
   165  }
   166  
   167  .repository .clone-panel .dropdown .menu {
   168    right: 0 !important;
   169    left: auto !important;
   170  }
   171  
   172  .repository .repo-description {
   173    font-size: 16px;
   174    margin-bottom: 5px;
   175  }
   176  
   177  .commit-summary {
   178    flex: 1;
   179    overflow-wrap: anywhere;
   180    overflow: hidden;
   181    white-space: nowrap;
   182    text-overflow: ellipsis;
   183  }
   184  
   185  .commit-header .commit-summary,
   186  td .commit-summary {
   187    white-space: normal;
   188  }
   189  
   190  .latest-commit {
   191    display: flex;
   192    flex: 1;
   193    align-items: center;
   194    overflow: hidden;
   195    text-overflow: ellipsis;
   196  }
   197  
   198  @media (max-width: 767.98px) {
   199    .latest-commit .sha {
   200      display: none;
   201    }
   202    .latest-commit .commit-summary {
   203      margin-left: 8px;
   204    }
   205  }
   206  
   207  .repo-path {
   208    display: flex;
   209    overflow-wrap: anywhere;
   210  }
   211  
   212  /* this is what limits the commit table width to a value that works on all viewport sizes */
   213  #repo-files-table th:first-of-type {
   214    max-width: calc(calc(min(100vw, 1280px)) - 145px - calc(2 * var(--page-margin-x)));
   215  }
   216  
   217  .repository.file.list #repo-files-table thead th {
   218    font-weight: var(--font-weight-normal);
   219  }
   220  
   221  .repository.file.list #repo-files-table tbody .svg {
   222    margin-left: 3px;
   223    margin-right: 5px;
   224  }
   225  
   226  .repository.file.list #repo-files-table tbody .svg.octicon-reply {
   227    margin-right: 10px;
   228  }
   229  
   230  .repository.file.list #repo-files-table tbody .svg.octicon-file-directory-fill,
   231  .repository.file.list #repo-files-table tbody .svg.octicon-file-submodule {
   232    color: var(--color-primary);
   233  }
   234  
   235  .repository.file.list #repo-files-table tbody .svg.octicon-file,
   236  .repository.file.list #repo-files-table tbody .svg.octicon-file-symlink-file,
   237  .repository.file.list #repo-files-table tbody .svg.octicon-file-directory-symlink {
   238    color: var(--color-secondary-dark-7);
   239  }
   240  
   241  .repository.file.list #repo-files-table td {
   242    padding-top: 0;
   243    padding-bottom: 0;
   244    overflow: initial;
   245  }
   246  
   247  .repository.file.list #repo-files-table td.name {
   248    width: 33%;
   249    max-width: calc(100vw - 140px);
   250  }
   251  
   252  @media (min-width: 1201px) {
   253    .repository.file.list #repo-files-table td.name {
   254      max-width: 150px;
   255    }
   256  }
   257  
   258  @media (min-width: 992px) and (max-width: 1200px) {
   259    .repository.file.list #repo-files-table td.name {
   260      max-width: 200px;
   261    }
   262  }
   263  
   264  @media (min-width: 768px) and (max-width: 991.98px) {
   265    .repository.file.list #repo-files-table td.name {
   266      max-width: 300px;
   267    }
   268  }
   269  
   270  .repository.file.list #repo-files-table td.message {
   271    color: var(--color-text-light-1);
   272    width: 66%;
   273  }
   274  
   275  @media (min-width: 1201px) {
   276    .repository.file.list #repo-files-table td.message {
   277      max-width: 400px;
   278    }
   279  }
   280  
   281  @media (min-width: 992px) and (max-width: 1200px) {
   282    .repository.file.list #repo-files-table td.message {
   283      max-width: 350px;
   284    }
   285  }
   286  
   287  @media (min-width: 768px) and (max-width: 991.98px) {
   288    .repository.file.list #repo-files-table td.message {
   289      max-width: 250px;
   290    }
   291  }
   292  
   293  .repository.file.list #repo-files-table td.age {
   294    color: var(--color-text-light-1);
   295  }
   296  
   297  .repository.file.list #repo-files-table td .truncate {
   298    display: inline-block;
   299    overflow: hidden;
   300    text-overflow: ellipsis;
   301    white-space: nowrap;
   302    width: 100%;
   303    padding-top: 8px;
   304    padding-bottom: 8px;
   305  }
   306  
   307  .repository.file.list #repo-files-table td a {
   308    padding-top: 8px;
   309    padding-bottom: 8px;
   310  }
   311  
   312  .repository.file.list #repo-files-table td .at {
   313    margin-left: 3px;
   314    margin-right: 3px;
   315  }
   316  
   317  .repository.file.list #repo-files-table td > * {
   318    vertical-align: middle;
   319  }
   320  
   321  .repository.file.list #repo-files-table td.message .isSigned {
   322    cursor: default;
   323  }
   324  
   325  .repository.file.list #repo-files-table tr:last-of-type td:first-child {
   326    border-bottom-left-radius: var(--border-radius);
   327  }
   328  
   329  .repository.file.list #repo-files-table tr:last-of-type td:last-child {
   330    border-bottom-right-radius: var(--border-radius);
   331  }
   332  
   333  .repository.file.list #repo-files-table tr:hover {
   334    background-color: var(--color-hover);
   335  }
   336  
   337  .repository.file.list #repo-files-table tr.has-parent a {
   338    display: inline-block;
   339    padding-top: 8px;
   340    padding-bottom: 8px;
   341    width: calc(100% - 1.25rem);
   342  }
   343  
   344  .repository.file.list .non-diff-file-content .header .icon {
   345    font-size: 1em;
   346  }
   347  
   348  .repository.file.list .non-diff-file-content .header .small.icon {
   349    font-size: 0.75em;
   350  }
   351  
   352  .repository.file.list .non-diff-file-content .header .tiny.icon {
   353    font-size: 0.5em;
   354  }
   355  
   356  .repository.file.list .non-diff-file-content .header .file-actions .btn-octicon {
   357    line-height: var(--line-height-default);
   358    padding: 8px;
   359    vertical-align: middle;
   360    color: var(--color-text);
   361  }
   362  
   363  .repository.file.list .non-diff-file-content .header .file-actions .btn-octicon:hover {
   364    color: var(--color-primary);
   365  }
   366  
   367  .repository.file.list .non-diff-file-content .header .file-actions .btn-octicon-danger:hover {
   368    color: var(--color-red);
   369  }
   370  
   371  .repository.file.list .non-diff-file-content .header .file-actions .btn-octicon.disabled {
   372    color: inherit;
   373    opacity: var(--opacity-disabled);
   374    cursor: default;
   375  }
   376  
   377  .view-raw {
   378    display: flex;
   379    justify-content: center;
   380    align-items: center;
   381  }
   382  
   383  .view-raw > * {
   384    max-width: 100%;
   385  }
   386  
   387  .view-raw audio,
   388  .view-raw video,
   389  .view-raw img {
   390    margin: 1rem 0;
   391    border-radius: 0;
   392    object-fit: contain;
   393  }
   394  
   395  .view-raw img[src$=".svg" i] {
   396    max-height: 600px !important;
   397    max-width: 600px !important;
   398  }
   399  
   400  .pdf-content {
   401    width: 100%;
   402    height: 600px;
   403    border: none !important;
   404    display: flex;
   405    align-items: center;
   406    justify-content: center;
   407  }
   408  
   409  .pdf-content .pdf-fallback-button {
   410    margin: 50px auto;
   411  }
   412  
   413  .repository.file.list .non-diff-file-content .plain-text {
   414    padding: 1em 2em;
   415  }
   416  
   417  .repository.file.list .non-diff-file-content .plain-text pre {
   418    word-break: break-word;
   419    white-space: pre-wrap;
   420  }
   421  
   422  .repository.file.list .non-diff-file-content .csv {
   423    overflow-x: auto;
   424    padding: 0 !important;
   425  }
   426  
   427  .repository.file.list .non-diff-file-content pre {
   428    overflow: auto;
   429  }
   430  
   431  .repository.file.list .non-diff-file-content .asciicast {
   432    padding: 0 !important;
   433  }
   434  
   435  .non-diff-file-content .pdfobject {
   436    border-radius: 0 0 var(--border-radius) var(--border-radius);
   437  }
   438  
   439  .repository.file.list .sidebar {
   440    padding-left: 0;
   441  }
   442  
   443  .repository.file.list .sidebar .svg {
   444    width: 16px;
   445  }
   446  
   447  .repo-editor-header {
   448    width: 100%;
   449  }
   450  
   451  .repo-editor-header input {
   452    vertical-align: middle !important;
   453    width: auto !important;
   454    padding: 7px 8px !important;
   455    margin-right: 5px !important;
   456  }
   457  
   458  .repository.file.editor .tabular.menu .svg {
   459    margin-right: 5px;
   460  }
   461  
   462  .repository.file.editor .commit-form-wrapper {
   463    padding-left: 64px;
   464  }
   465  
   466  .repository.file.editor .commit-form-wrapper .commit-avatar {
   467    float: left;
   468    margin-left: -64px;
   469    width: 3em;
   470    height: auto;
   471  }
   472  
   473  .repository.file.editor .commit-form-wrapper .commit-form {
   474    position: relative;
   475    padding: 15px;
   476    margin-bottom: 10px;
   477    border: 1px solid var(--color-secondary);
   478    background: var(--color-box-body);
   479    border-radius: var(--border-radius);
   480  }
   481  
   482  .repository.file.editor .commit-form-wrapper .commit-form::before,
   483  .repository.file.editor .commit-form-wrapper .commit-form::after {
   484    right: 100%;
   485    top: 20px;
   486    border: solid transparent;
   487    content: " ";
   488    height: 0;
   489    width: 0;
   490    position: absolute;
   491    pointer-events: none;
   492  }
   493  
   494  .repository.file.editor .commit-form-wrapper .commit-form::before {
   495    border-right-color: var(--color-secondary);
   496    border-width: 9px;
   497    margin-top: -9px;
   498  }
   499  
   500  .repository.file.editor .commit-form-wrapper .commit-form::after {
   501    border-right-color: var(--color-box-body);
   502    border-width: 8px;
   503    margin-top: -8px;
   504  }
   505  
   506  .repository.file.editor .commit-form-wrapper .commit-form .quick-pull-choice .branch-name {
   507    display: inline-block;
   508    padding: 2px 4px;
   509    font: 12px var(--fonts-monospace);
   510    color: var(--color-text);
   511    background: var(--color-secondary);
   512    border-radius: var(--border-radius);
   513    margin: 0 2px;
   514  }
   515  
   516  .repository.file.editor .commit-form-wrapper .commit-form .quick-pull-choice .new-branch-name-input {
   517    position: relative;
   518    margin-left: 25px;
   519  }
   520  
   521  .repository.file.editor .commit-form-wrapper .commit-form .quick-pull-choice .new-branch-name-input input {
   522    width: 240px !important;
   523    padding-left: 26px !important;
   524  }
   525  
   526  .repository.file.editor .commit-form-wrapper .commit-form .quick-pull-choice .octicon-git-branch {
   527    position: absolute;
   528    top: 9px;
   529    left: 10px;
   530    color: var(--color-grey);
   531  }
   532  
   533  .repository.options #interval {
   534    width: 100px !important;
   535    min-width: 100px;
   536  }
   537  
   538  #new-issue .comment .avatar {
   539    width: 3em;
   540  }
   541  
   542  .repository.new.issue .comment.form .content::before,
   543  .repository.new.issue .comment.form .content::after {
   544    right: 100%;
   545    top: 20px;
   546    border: solid transparent;
   547    content: " ";
   548    height: 0;
   549    width: 0;
   550    position: absolute;
   551    pointer-events: none;
   552  }
   553  
   554  .repository.new.issue .comment.form .content::before {
   555    border-right-color: var(--color-secondary);
   556    border-width: 9px;
   557    margin-top: -9px;
   558  }
   559  
   560  .repository.new.issue .comment.form .content::after {
   561    border-right-color: var(--color-box-body);
   562    border-width: 8px;
   563    margin-top: -8px;
   564  }
   565  
   566  .repository.new.issue .comment.form .content .markup {
   567    font-size: 14px;
   568  }
   569  
   570  .repository.view.issue .instruct-toggle {
   571    display: inline-block;
   572  }
   573  
   574  @media (max-width: 767.98px) {
   575    .comment.form .issue-content-left .avatar {
   576      display: none;
   577    }
   578    .comment.form .issue-content-left .content {
   579      margin-left: 0 !important;
   580    }
   581    .comment.form .issue-content-left .content::before,
   582    .comment.form .issue-content-left .content::after,
   583    .comment.form .content .form::before,
   584    .comment.form .content .form::after {
   585      display: none;
   586    }
   587  }
   588  
   589  /* issue title & meta & edit */
   590  .issue-title-header {
   591    width: 100%;
   592    padding-bottom: 4px;
   593    margin-bottom: 1rem;
   594  }
   595  
   596  .issue-title-meta {
   597    display: flex;
   598    align-items: center;
   599  }
   600  
   601  .repository.view.issue .issue-title-buttons {
   602    display: flex;
   603    gap: 0.5em;
   604  }
   605  
   606  .repository.view.issue .issue-title-buttons > .ui.button {
   607    margin: 0;
   608    height: 35px;
   609  }
   610  
   611  .repository.view.issue .issue-title {
   612    display: flex;
   613    align-items: center;
   614    gap: 0.5em;
   615    margin-bottom: 8px;
   616    min-height: 40px; /* avoid layout shift on edit */
   617  }
   618  
   619  .repository.view.issue .issue-title h1 {
   620    flex: 1;
   621    width: 100%;
   622    font-weight: var(--font-weight-normal);
   623    font-size: 32px;
   624    line-height: 40px;
   625    margin: 0;
   626    padding-right: 0.25rem;
   627  }
   628  
   629  @media (max-width: 767.98px) {
   630    .repository.view.issue .issue-title {
   631      flex-direction: column;
   632    }
   633    .repository.view.issue .issue-title-buttons {
   634      width: 100%;
   635      justify-content: space-between;
   636    }
   637  }
   638  
   639  .repository.view.issue .issue-title .ui.input {
   640    width: 100%;
   641    height: 35px;
   642  }
   643  
   644  .repository.view.issue .issue-title .ui.input input {
   645    font-size: 1.5em;
   646    padding: 2px .5rem;
   647  }
   648  
   649  .issue-title .index {
   650    color: var(--color-text-light-2);
   651  }
   652  
   653  .issue-title .label {
   654    margin-right: 10px;
   655  }
   656  
   657  .issue-state-label {
   658    display: flex !important;
   659    align-items: center !important;
   660    font-size: 14px !important;
   661    padding: 7px 10px !important;
   662    border-radius: var(--border-radius-medium) !important;
   663    flex-shrink: 0;
   664  }
   665  
   666  .issue-state-label .svg {
   667    margin-right: 4px;
   668  }
   669  
   670  .repository.view.issue .pull-desc code {
   671    color: var(--color-primary);
   672  }
   673  
   674  .repository.view.issue .pull-desc a[data-clipboard-text] {
   675    cursor: pointer;
   676  }
   677  
   678  .repository.view.issue .pull-desc a[data-clipboard-text] svg {
   679    vertical-align: middle;
   680    position: relative;
   681    top: -2px;
   682    right: 1px;
   683  }
   684  
   685  .repository.view.issue .pull.tabs.container {
   686    width: 100%;
   687    max-width: 100%;
   688  }
   689  
   690  .repository.view.issue .pull.tabular.menu {
   691    margin-bottom: 0;
   692    overflow-x: auto;
   693    overflow-y: hidden;
   694  }
   695  
   696  .repository.view.issue .pull.tabular.menu .svg {
   697    margin-right: 5px;
   698  }
   699  
   700  .repository.view.issue .merge.box .branch-update.grid .row {
   701    padding-bottom: 1rem;
   702  }
   703  
   704  .repository.view.issue .merge.box .branch-update.grid .row .icon {
   705    margin-top: 1.1rem;
   706  }
   707  
   708  .repository.view.issue .comment-list:not(.prevent-before-timeline)::before {
   709    display: block;
   710    content: "";
   711    position: absolute;
   712    margin-top: 12px;
   713    margin-bottom: 14px;
   714    top: 0;
   715    bottom: 0;
   716    left: 96px;
   717    width: 2px;
   718    background-color: var(--color-timeline);
   719    z-index: -1;
   720  }
   721  
   722  .repository.view.issue .comment-list .timeline {
   723    position: relative;
   724    display: block;
   725    margin-left: 40px;
   726    padding-left: 16px;
   727  }
   728  
   729  .repository.view.issue .comment-list .timeline::before { /* ciara */
   730    display: block;
   731    content: "";
   732    position: absolute;
   733    margin-top: 12px;
   734    margin-bottom: 14px;
   735    top: 0;
   736    bottom: 0;
   737    left: 30px;
   738    width: 2px;
   739    background-color: var(--color-timeline);
   740    z-index: -1;
   741  }
   742  
   743  .repository.view.issue .comment-list .timeline-item,
   744  .repository.view.issue .comment-list .timeline-item-group {
   745    padding: 16px 0;
   746  }
   747  
   748  .repository.view.issue .comment-list .timeline-item-group .timeline-item {
   749    padding-top: 8px;
   750    padding-bottom: 8px;
   751  }
   752  
   753  .repository.view.issue .comment-list .timeline-avatar-offset {
   754    margin-top: 48px;
   755  }
   756  
   757  .repository.view.issue .comment-list .timeline-item {
   758    margin-left: 16px;
   759    position: relative;
   760  }
   761  
   762  .repository.view.issue .comment-list .timeline-item .timeline-avatar {
   763    position: absolute;
   764    left: -68px;
   765  }
   766  
   767  /* Don't show the mobile oriented avatar ".inline-timeline-avatar" on desktop. Desktop uses the avatar with class ".timeline-avatar" */
   768  .repository.view.issue .comment-list .timeline-item .inline-timeline-avatar {
   769    display: none;
   770  }
   771  
   772  .repository.view.issue .comment-list .timeline-item:first-child:not(.commit) {
   773    padding-top: 0 !important;
   774  }
   775  
   776  .repository.view.issue .comment-list .timeline-item:last-child:not(.commit) {
   777    padding-bottom: 0 !important;
   778  }
   779  
   780  .repository.view.issue .comment-list .timeline-item .badge.badge-commit {
   781    border-color: transparent;
   782    background: radial-gradient(var(--color-body) 40%, transparent 40%) no-repeat;
   783  }
   784  
   785  .repository.view.issue .comment-list .timeline-item .badge {
   786    width: 34px;
   787    height: 34px;
   788    background-color: var(--color-timeline);
   789    border-radius: var(--border-radius-full);
   790    display: flex;
   791    float: left;
   792    margin-left: -33px;
   793    margin-right: 8px;
   794    color: var(--color-text);
   795    align-items: center;
   796    justify-content: center;
   797  }
   798  
   799  .repository.view.issue .comment-list .timeline-item .badge .svg {
   800    width: 22px;
   801    height: 22px;
   802    padding: 3px;
   803  }
   804  
   805  .repository.view.issue .comment-list .timeline-item .badge .svg.octicon-comment {
   806    margin-top: 2px;
   807  }
   808  
   809  .repository.view.issue .comment-list .timeline-item.comment > .content {
   810    margin-left: -16px;
   811  }
   812  
   813  .repository.view.issue .comment-list .timeline-item.event > .text {
   814    line-height: 32px;
   815    vertical-align: middle;
   816  }
   817  
   818  .repository.view.issue .comment-list .timeline-item.commits-list {
   819    padding-left: 15px;
   820    padding-top: 0;
   821  }
   822  
   823  .repository.view.issue .comment-list .timeline-item.commits-list .ui.avatar {
   824    margin-right: 0.25em;
   825  }
   826  
   827  .singular-commit {
   828    display: flex;
   829    align-items: center;
   830  }
   831  
   832  .singular-commit .badge {
   833    height: 30px !important;
   834  }
   835  
   836  .singular-commit .shabox .sha.label {
   837    margin: 0;
   838    border: 1px solid var(--color-light-border);
   839  }
   840  
   841  .singular-commit .shabox .sha.label.isSigned.isWarning {
   842    border: 1px solid var(--color-red-badge);
   843    background: var(--color-red-badge-bg);
   844  }
   845  
   846  .singular-commit .shabox .sha.label.isSigned.isWarning:hover {
   847    background: var(--color-red-badge-hover-bg) !important;
   848  }
   849  
   850  .singular-commit .shabox .sha.label.isSigned.isVerified {
   851    border: 1px solid var(--color-green-badge);
   852    background: var(--color-green-badge-bg);
   853  }
   854  
   855  .singular-commit .shabox .sha.label.isSigned.isVerified:hover {
   856    background: var(--color-green-badge-hover-bg) !important;
   857  }
   858  
   859  .singular-commit .shabox .sha.label.isSigned.isVerifiedUntrusted {
   860    border: 1px solid var(--color-yellow-badge);
   861    background: var(--color-yellow-badge-bg);
   862  }
   863  
   864  .singular-commit .shabox .sha.label.isSigned.isVerifiedUntrusted:hover {
   865    background: var(--color-yellow-badge-hover-bg) !important;
   866  }
   867  
   868  .singular-commit .shabox .sha.label.isSigned.isVerifiedUnmatched {
   869    border: 1px solid var(--color-orange-badge);
   870    background: var(--color-orange-badge-bg);
   871  }
   872  
   873  .singular-commit .shabox .sha.label.isSigned.isVerifiedUnmatched:hover {
   874    background: var(--color-orange-badge-hover-bg) !important;
   875  }
   876  
   877  .repository.view.issue .comment-list .timeline-item.event > .commit-status-link {
   878    float: right;
   879    margin-right: 8px;
   880    margin-top: 4px;
   881  }
   882  
   883  .repository.view.issue .comment-list .timeline-item .comparebox {
   884    line-height: 32px;
   885    vertical-align: middle;
   886  }
   887  
   888  .repository.view.issue .comment-list .timeline-item .comparebox .compare.label {
   889    font-size: 1rem;
   890    margin: 0;
   891    border: 1px solid var(--color-light-border);
   892  }
   893  
   894  @media (max-width: 767.98px) {
   895    .repository.view.issue .comment-list .timeline-item .ui.segments {
   896      margin-left: -2rem;
   897    }
   898  }
   899  
   900  .repository.view.issue .comment-list .ui.comments {
   901    max-width: 100%;
   902    display: flex;
   903    flex-direction: column;
   904    gap: 3px;
   905  }
   906  
   907  .repository.view.issue .comment-list .comment > .content > div:first-child {
   908    border-top-left-radius: 4px;
   909    border-top-right-radius: 4px;
   910  }
   911  
   912  .repository.view.issue .comment-list .comment > .content > div:last-child {
   913    border-bottom-left-radius: 4px;
   914    border-bottom-right-radius: 4px;
   915  }
   916  
   917  .repository.view.issue .comment-list .comment .comment-container {
   918    border: 1px solid var(--color-secondary);
   919    border-radius: var(--border-radius);
   920    background: var(--color-box-body);
   921  }
   922  
   923  .repository.view.issue .comment-list .conversation-holder .comment .comment-container {
   924    border: none;
   925  }
   926  
   927  @media (max-width: 767.98px) {
   928    .repository.view.issue .comment-list .comment .content .form .button {
   929      width: 100%;
   930      margin: 0;
   931    }
   932    .repository.view.issue .comment-list .comment .content .form .button:not(:last-child) {
   933      margin-bottom: 1rem;
   934    }
   935  }
   936  
   937  .repository.view.issue .comment-list .comment .merge-section {
   938    background-color: var(--color-box-body);
   939  }
   940  
   941  .repository.view.issue .comment-list .comment .merge-section .item-section {
   942    display: flex;
   943    flex-wrap: wrap;
   944    align-items: center;
   945    justify-content: space-between;
   946    padding: 0;
   947    gap: 0.5em;
   948  }
   949  
   950  .repository.view.issue .comment-list .comment .merge-section .divider {
   951    margin-left: -1rem;
   952    width: calc(100% + 2rem);
   953  }
   954  
   955  .repository.view.issue .comment-list .comment .merge-section.no-header::before,
   956  .repository.view.issue .comment-list .comment .merge-section.no-header::after {
   957    right: 100%;
   958    top: 20px;
   959    border: solid transparent;
   960    content: " ";
   961    height: 0;
   962    width: 0;
   963    position: absolute;
   964    pointer-events: none;
   965  }
   966  
   967  .repository.view.issue .comment-list .comment .merge-section.no-header::before {
   968    border-right-color: var(--color-secondary);
   969    border-width: 9px;
   970    margin-top: -9px;
   971  }
   972  
   973  .repository.view.issue .comment-list .comment .merge-section.no-header::after {
   974    border-right-color: var(--color-box-body);
   975    border-width: 8px;
   976    margin-top: -8px;
   977  }
   978  
   979  .merge-section-info code {
   980    border: 1px solid var(--color-light-border);
   981    border-radius: var(--border-radius);
   982    padding: 2px 4px;
   983    background: var(--color-light);
   984  }
   985  
   986  .repository.view.issue .comment-list .comment .markup {
   987    font-size: 14px;
   988  }
   989  
   990  .repository.view.issue .comment-list .comment .no-content {
   991    color: var(--color-text-light-2);
   992    font-style: italic;
   993  }
   994  
   995  .repository.view.issue .comment-list .comment .ui.form .field:first-child {
   996    clear: none;
   997  }
   998  
   999  .repository.view.issue .comment-list .comment .ui.form .field.footer {
  1000    overflow: hidden;
  1001  }
  1002  
  1003  .repository.view.issue .comment-list .comment .ui.form .field .tab.markup {
  1004    min-height: 5rem;
  1005  }
  1006  
  1007  .repository.view.issue .comment-list .comment .edit.buttons {
  1008    margin-top: 10px;
  1009  }
  1010  
  1011  .repository.view.issue .comment-list .code-comment {
  1012    border: 1px solid transparent;
  1013    margin: 0;
  1014  }
  1015  
  1016  .repository.view.issue .comment-list .code-comment .comment-header {
  1017    background: transparent;
  1018    border-bottom: 0 !important;
  1019    padding: 0 !important;
  1020  }
  1021  
  1022  .repository.view.issue .comment-list .code-comment .comment-header::after,
  1023  .repository.view.issue .comment-list .code-comment .comment-header::before {
  1024    display: none;
  1025  }
  1026  
  1027  .repository.view.issue .comment-list .code-comment .comment-content {
  1028    margin-left: 36px;
  1029  }
  1030  
  1031  .repository.view.issue .comment-list .comment > .avatar {
  1032    margin-top: 6px;
  1033  }
  1034  
  1035  .repository.view.issue .comment-list .comment-code-cloud button.comment-form-reply {
  1036    margin: 0;
  1037  }
  1038  
  1039  .repository.view.issue .comment-list .event {
  1040    padding-left: 15px;
  1041  }
  1042  
  1043  .repository.view.issue .comment-list .event .detail {
  1044    margin-top: 4px;
  1045    margin-left: 15px;
  1046  }
  1047  
  1048  .repository.view.issue .comment-list .event .detail .text {
  1049    overflow: hidden;
  1050    white-space: nowrap;
  1051    text-overflow: ellipsis;
  1052  }
  1053  
  1054  .repository.view.issue .comment-list .event .segments {
  1055    box-shadow: none;
  1056  }
  1057  
  1058  .repository.view.issue .ui.depending .item.is-closed .title {
  1059    text-decoration: line-through;
  1060  }
  1061  
  1062  .repository .comment.form .content .field:first-child {
  1063    clear: none;
  1064  }
  1065  
  1066  .repository .comment.form .content .segment::before,
  1067  .repository .comment.form .content .segment::after {
  1068    right: 100%;
  1069    top: 20px;
  1070    border: solid transparent;
  1071    content: " ";
  1072    height: 0;
  1073    width: 0;
  1074    position: absolute;
  1075    pointer-events: none;
  1076  }
  1077  
  1078  .repository .comment.form .content .segment::before {
  1079    border-right-color: var(--color-secondary);
  1080    border-width: 9px;
  1081    margin-top: -9px;
  1082  }
  1083  
  1084  .repository .comment.form .content .segment::after {
  1085    border-right-color: var(--color-box-body);
  1086    border-width: 8px;
  1087    margin-top: -8px;
  1088  }
  1089  
  1090  .repository.new.milestone textarea {
  1091    height: 200px;
  1092  }
  1093  
  1094  .milestone-progress-big {
  1095    width: min(420px, 96vw);
  1096    height: 10px;
  1097  }
  1098  
  1099  .repository.compare.pull .show-form-container {
  1100    text-align: left;
  1101  }
  1102  
  1103  .repository .choose.branch {
  1104    display: flex;
  1105    align-items: center;
  1106    gap: 8px;
  1107    flex-wrap: wrap;
  1108  }
  1109  
  1110  .repository .choose .compare-separator {
  1111    width: 100%;
  1112    margin-top: -1rem;
  1113    text-align: center;
  1114  }
  1115  
  1116  .repository.compare.pull .comment.form .content::before,
  1117  .repository.compare.pull .comment.form .content::after {
  1118    right: 100%;
  1119    top: 20px;
  1120    border: solid transparent;
  1121    content: " ";
  1122    height: 0;
  1123    width: 0;
  1124    position: absolute;
  1125    pointer-events: none;
  1126  }
  1127  
  1128  .repository.compare.pull .comment.form .content::before {
  1129    border-right-color: var(--color-secondary);
  1130    border-width: 9px;
  1131    margin-top: -9px;
  1132  }
  1133  
  1134  .repository.compare.pull .comment.form .content::after {
  1135    border-right-color: var(--color-box-body);
  1136    border-width: 8px;
  1137    margin-top: -8px;
  1138  }
  1139  
  1140  .repository.compare.pull .pullrequest-form {
  1141    margin-top: 16px;
  1142    margin-bottom: 16px;
  1143  }
  1144  
  1145  .repository.compare.pull .markup {
  1146    font-size: 14px;
  1147  }
  1148  
  1149  .repository.branches .commit-divergence .bar-group {
  1150    position: relative;
  1151    float: left;
  1152    padding-bottom: 6px;
  1153    width: 50%;
  1154    max-width: 90px;
  1155  }
  1156  
  1157  .repository.branches .commit-divergence .bar-group:last-child {
  1158    border-left: 1px solid var(--color-secondary-dark-2);
  1159  }
  1160  
  1161  .repository.branches .commit-divergence .count {
  1162    margin: 0 3px;
  1163  }
  1164  
  1165  .repository.branches .commit-divergence .count.count-ahead {
  1166    text-align: left;
  1167  }
  1168  
  1169  .repository.branches .commit-divergence .count.count-behind {
  1170    text-align: right;
  1171  }
  1172  
  1173  .repository.branches .commit-divergence .bar {
  1174    height: 4px;
  1175    position: absolute;
  1176    background-color: var(--color-secondary-dark-2);
  1177  }
  1178  
  1179  .repository.branches .commit-divergence .bar.bar-behind {
  1180    right: 0;
  1181  }
  1182  
  1183  .repository.branches .commit-divergence .bar.bar-ahead {
  1184    left: 0;
  1185  }
  1186  
  1187  .repository.commits .header .search input {
  1188    font-weight: var(--font-weight-normal);
  1189    padding: 5px 10px;
  1190  }
  1191  
  1192  .repository #commits-table td:not(.message) {
  1193    white-space: nowrap;
  1194  }
  1195  .repository #commits-table thead .sha {
  1196    width: 200px;
  1197  }
  1198  
  1199  .repository #commits-table thead .shatd {
  1200    text-align: center;
  1201  }
  1202  
  1203  .repository #commits-table td.sha .sha.label {
  1204    margin: 0;
  1205  }
  1206  
  1207  .repository #commits-table.ui.basic.striped.table tbody tr:nth-child(2n) {
  1208    background-color: var(--color-light) !important;
  1209  }
  1210  
  1211  .repository #commits-table td.sha .sha.label,
  1212  .repository #repo-files-table .sha.label,
  1213  .repository #repo-file-commit-box .sha.label,
  1214  .repository #rev-list .sha.label,
  1215  .repository .timeline-item.commits-list .singular-commit .sha.label {
  1216    border: 1px solid var(--color-light-border);
  1217  }
  1218  
  1219  .repository #commits-table td.sha .sha.label .ui.signature.avatar,
  1220  .repository #repo-files-table .sha.label .ui.signature.avatar,
  1221  .repository #repo-file-commit-box .sha.label .ui.signature.avatar,
  1222  .repository #rev-list .sha.label .ui.signature.avatar,
  1223  .repository .timeline-item.commits-list .singular-commit .sha.label .ui.signature.avatar {
  1224    height: 16px;
  1225    margin-bottom: 0;
  1226    width: 16px;
  1227  }
  1228  
  1229  .repository #commits-table td.sha .sha.label .detail.icon,
  1230  .repository #repo-files-table .sha.label .detail.icon,
  1231  .repository #repo-file-commit-box .sha.label .detail.icon,
  1232  .repository #rev-list .sha.label .detail.icon,
  1233  .repository .timeline-item.commits-list .singular-commit .sha.label .detail.icon {
  1234    background: var(--color-light);
  1235    margin: -6px -10px -4px 0;
  1236    padding: 5px 4px 5px 6px;
  1237    border-left: 1px solid var(--color-light-border);
  1238    border-top: 0;
  1239    border-right: 0;
  1240    border-bottom: 0;
  1241    border-top-left-radius: 0;
  1242    border-bottom-left-radius: 0;
  1243  }
  1244  
  1245  .repository #commits-table td.sha .sha.label .detail.icon img,
  1246  .repository #repo-files-table .sha.label .detail.icon img,
  1247  .repository #repo-file-commit-box .sha.label .detail.icon img,
  1248  .repository #rev-list .sha.label .detail.icon img,
  1249  .repository .timeline-item.commits-list .singular-commit .sha.label .detail.icon img {
  1250    margin-right: 0;
  1251  }
  1252  
  1253  .repository #commits-table td.sha .sha.label .detail.icon .svg,
  1254  .repository #repo-files-table .sha.label .detail.icon .svg,
  1255  .repository #repo-file-commit-box .sha.label .detail.icon .svg,
  1256  .repository #rev-list .sha.label .detail.icon .svg,
  1257  .repository .timeline-item.commits-list .singular-commit .sha.label .detail.icon .svg {
  1258    margin: 0 0.25em 0 0;
  1259  }
  1260  
  1261  .repository #commits-table td.sha .sha.label .detail.icon > div,
  1262  .repository #repo-files-table .sha.label .detail.icon > div,
  1263  .repository #repo-file-commit-box .sha.label .detail.icon > div,
  1264  .repository #rev-list .sha.label .detail.icon > div,
  1265  .repository .timeline-item.commits-list .singular-commit .sha.label .detail.icon > div {
  1266    display: flex;
  1267    align-items: center;
  1268  }
  1269  
  1270  .repository #commits-table td.sha .sha.label.isSigned.isWarning,
  1271  .repository #repo-files-table .sha.label.isSigned.isWarning,
  1272  .repository #repo-file-commit-box .sha.label.isSigned.isWarning,
  1273  .repository #rev-list .sha.label.isSigned.isWarning,
  1274  .repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isWarning {
  1275    border: 1px solid var(--color-red-badge);
  1276    background: var(--color-red-badge-bg);
  1277  }
  1278  
  1279  .repository #commits-table td.sha .sha.label.isSigned.isWarning .detail.icon,
  1280  .repository #repo-files-table .sha.label.isSigned.isWarning .detail.icon,
  1281  .repository #repo-file-commit-box .sha.label.isSigned.isWarning .detail.icon,
  1282  .repository #rev-list .sha.label.isSigned.isWarning .detail.icon,
  1283  .repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isWarning .detail.icon {
  1284    border-left: 1px solid var(--color-red-badge);
  1285    color: var(--color-red-badge);
  1286  }
  1287  
  1288  .repository #commits-table td.sha .sha.label.isSigned.isWarning:hover,
  1289  .repository #repo-files-table .sha.label.isSigned.isWarning:hover,
  1290  .repository #repo-file-commit-box .sha.label.isSigned.isWarning:hover,
  1291  .repository #rev-list .sha.label.isSigned.isWarning:hover,
  1292  .repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isWarning:hover {
  1293    background: var(--color-red-badge-hover-bg) !important;
  1294  }
  1295  
  1296  .repository #commits-table td.sha .sha.label.isSigned.isVerified,
  1297  .repository #repo-files-table .sha.label.isSigned.isVerified,
  1298  .repository #repo-file-commit-box .sha.label.isSigned.isVerified,
  1299  .repository #rev-list .sha.label.isSigned.isVerified,
  1300  .repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerified {
  1301    border: 1px solid var(--color-green-badge);
  1302    background: var(--color-green-badge-bg);
  1303  }
  1304  
  1305  .repository #commits-table td.sha .sha.label.isSigned.isVerified .detail.icon,
  1306  .repository #repo-files-table .sha.label.isSigned.isVerified .detail.icon,
  1307  .repository #repo-file-commit-box .sha.label.isSigned.isVerified .detail.icon,
  1308  .repository #rev-list .sha.label.isSigned.isVerified .detail.icon,
  1309  .repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerified .detail.icon {
  1310    border-left: 1px solid var(--color-green-badge);
  1311    color: var(--color-green-badge);
  1312  }
  1313  
  1314  .repository #commits-table td.sha .sha.label.isSigned.isVerified:hover,
  1315  .repository #repo-files-table .sha.label.isSigned.isVerified:hover,
  1316  .repository #repo-file-commit-box .sha.label.isSigned.isVerified:hover,
  1317  .repository #rev-list .sha.label.isSigned.isVerified:hover,
  1318  .repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerified:hover {
  1319    background: var(--color-green-badge-hover-bg) !important;
  1320  }
  1321  
  1322  .repository #commits-table td.sha .sha.label.isSigned.isVerifiedUntrusted,
  1323  .repository #repo-files-table .sha.label.isSigned.isVerifiedUntrusted,
  1324  .repository #repo-file-commit-box .sha.label.isSigned.isVerifiedUntrusted,
  1325  .repository #rev-list .sha.label.isSigned.isVerifiedUntrusted,
  1326  .repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerifiedUntrusted {
  1327    border: 1px solid var(--color-yellow-badge);
  1328    background: var(--color-yellow-badge-bg);
  1329  }
  1330  
  1331  .repository #commits-table td.sha .sha.label.isSigned.isVerifiedUntrusted .detail.icon,
  1332  .repository #repo-files-table .sha.label.isSigned.isVerifiedUntrusted .detail.icon,
  1333  .repository #repo-file-commit-box .sha.label.isSigned.isVerifiedUntrusted .detail.icon,
  1334  .repository #rev-list .sha.label.isSigned.isVerifiedUntrusted .detail.icon,
  1335  .repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerifiedUntrusted .detail.icon {
  1336    border-left: 1px solid var(--color-yellow-badge);
  1337    color: var(--color-yellow-badge);
  1338  }
  1339  
  1340  .repository #commits-table td.sha .sha.label.isSigned.isVerifiedUntrusted:hover,
  1341  .repository #repo-files-table .sha.label.isSigned.isVerifiedUntrusted:hover,
  1342  .repository #repo-file-commit-box .sha.label.isSigned.isVerifiedUntrusted:hover,
  1343  .repository #rev-list .sha.label.isSigned.isVerifiedUntrusted:hover,
  1344  .repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerifiedUntrusted:hover {
  1345    background: var(--color-yellow-badge-hover-bg) !important;
  1346  }
  1347  
  1348  .repository #commits-table td.sha .sha.label.isSigned.isVerifiedUnmatched,
  1349  .repository #repo-files-table .sha.label.isSigned.isVerifiedUnmatched,
  1350  .repository #repo-file-commit-box .sha.label.isSigned.isVerifiedUnmatched,
  1351  .repository #rev-list .sha.label.isSigned.isVerifiedUnmatched,
  1352  .repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerifiedUnmatched {
  1353    border: 1px solid var(--color-orange-badge);
  1354    background: var(--color-orange-badge-bg);
  1355  }
  1356  
  1357  .repository #commits-table td.sha .sha.label.isSigned.isVerifiedUnmatched .detail.icon,
  1358  .repository #repo-files-table .sha.label.isSigned.isVerifiedUnmatched .detail.icon,
  1359  .repository #repo-file-commit-box .sha.label.isSigned.isVerifiedUnmatched .detail.icon,
  1360  .repository #rev-list .sha.label.isSigned.isVerifiedUnmatched .detail.icon,
  1361  .repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerifiedUnmatched .detail.icon {
  1362    border-left: 1px solid var(--color-orange-badge);
  1363    color: var(--color-orange-badge);
  1364  }
  1365  
  1366  .repository #commits-table td.sha .sha.label.isSigned.isVerifiedUnmatched:hover,
  1367  .repository #repo-files-table .sha.label.isSigned.isVerifiedUnmatched:hover,
  1368  .repository #repo-file-commit-box .sha.label.isSigned.isVerifiedUnmatched:hover,
  1369  .repository #rev-list .sha.label.isSigned.isVerifiedUnmatched:hover,
  1370  .repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerifiedUnmatched:hover {
  1371    background: var(--color-orange-badge-hover-bg) !important;
  1372  }
  1373  
  1374  .repository .data-table {
  1375    width: 100%;
  1376  }
  1377  
  1378  .repository .data-table tr {
  1379    border-top: 0;
  1380    background: none !important;
  1381  }
  1382  
  1383  .repository .data-table td,
  1384  .repository .data-table th {
  1385    padding: 5px !important;
  1386    overflow: hidden;
  1387    font-size: 12px;
  1388    text-align: left;
  1389    white-space: nowrap;
  1390    border: 1px solid var(--color-secondary);
  1391  }
  1392  
  1393  /* the border css competes with .markup where all tables have outer border which would add a double
  1394     border here, remove only the outer borders from this table */
  1395  .repository .data-table tr:first-child :is(td,th) {
  1396    border-top: none !important;
  1397  }
  1398  .repository .data-table tr:last-child :is(td,th) {
  1399    border-bottom: none !important;
  1400  }
  1401  .repository .data-table tr :is(td,th):first-child {
  1402    border-left: none !important;
  1403  }
  1404  .repository .data-table tr :is(td,th):last-child {
  1405    border-right: none !important;
  1406  }
  1407  
  1408  .repository .data-table td {
  1409    white-space: pre-line;
  1410  }
  1411  
  1412  .repository .data-table th {
  1413    font-weight: var(--font-weight-semibold);
  1414    background: var(--color-box-header);
  1415    border-top: 0;
  1416  }
  1417  
  1418  .repository .data-table td.added,
  1419  .repository .data-table th.added,
  1420  .repository .data-table tr.added {
  1421    background-color: var(--color-diff-added-row-bg) !important;
  1422  }
  1423  
  1424  .repository .data-table td.removed,
  1425  .repository .data-table th.removed,
  1426  .repository .data-table tr.removed {
  1427    background-color: var(--color-diff-removed-row-bg) !important;
  1428  }
  1429  
  1430  .repository .data-table td.moved,
  1431  .repository .data-table th.moved,
  1432  .repository .data-table tr.moved {
  1433    background-color: var(--color-diff-moved-row-bg) !important;
  1434  }
  1435  
  1436  .repository .data-table tbody.section {
  1437    border-top: 2px solid var(--color-secondary);
  1438  }
  1439  
  1440  .repository .data-table .line-num {
  1441    width: 1%;
  1442    min-width: 50px;
  1443    font-family: monospace;
  1444    line-height: 20px;
  1445    color: var(--color-text-light-1);
  1446    white-space: nowrap;
  1447    vertical-align: top;
  1448    cursor: pointer;
  1449    text-align: right;
  1450    background: var(--color-body);
  1451    border: 0;
  1452  }
  1453  
  1454  .repository .diff-detail-box {
  1455    display: flex;
  1456    justify-content: space-between;
  1457    align-items: center;
  1458    position: sticky;
  1459    top: 0;
  1460    z-index: 8;
  1461    padding: 7px 5px;
  1462    margin: 0 -5px; /* negative margin so it covers active file shadow */
  1463    height: 44px; /* this height should match sticky-2nd-row */
  1464    background: var(--color-body);
  1465  }
  1466  
  1467  @media (max-width: 480px) {
  1468    .repository .diff-detail-box {
  1469      flex-wrap: wrap;
  1470    }
  1471  }
  1472  .repository .diff-detail-box .diff-detail-stats strong {
  1473    margin-left: 0.25rem;
  1474    margin-right: 0.25rem;
  1475  }
  1476  
  1477  /* Because the translations contain the <strong> we need to style with nth-of-type */
  1478  
  1479  .repository .diff-detail-box .diff-detail-stats strong:nth-of-type(1) {
  1480    color: var(--color-yellow);
  1481  }
  1482  
  1483  .repository .diff-detail-box .diff-detail-stats strong:nth-of-type(2) {
  1484    color: var(--color-green);
  1485  }
  1486  
  1487  .repository .diff-detail-box .diff-detail-stats strong:nth-of-type(3) {
  1488    color: var(--color-red);
  1489  }
  1490  
  1491  @media (max-width: 800px) {
  1492    .repository .diff-detail-box .diff-detail-stats {
  1493      display: none !important;
  1494    }
  1495  }
  1496  
  1497  .diff-detail-actions {
  1498    display: flex;
  1499    align-items: center;
  1500    gap: 0.25em;
  1501    justify-content: end;
  1502  }
  1503  
  1504  .diff-detail-actions > *,
  1505  .diff-detail-actions .button {
  1506    margin-left: 0 !important;
  1507    margin-right: 0 !important;
  1508  }
  1509  
  1510  .repository .diff-detail-box span.status {
  1511    display: inline-block;
  1512    width: 12px;
  1513    height: 12px;
  1514    margin-right: 8px;
  1515    vertical-align: middle;
  1516  }
  1517  
  1518  .repository .diff-detail-box span.status.modify {
  1519    background-color: var(--color-yellow);
  1520  }
  1521  
  1522  .repository .diff-detail-box span.status.add {
  1523    background-color: var(--color-green);
  1524  }
  1525  
  1526  .repository .diff-detail-box span.status.del {
  1527    background-color: var(--color-red);
  1528  }
  1529  
  1530  .repository .diff-detail-box span.status.rename {
  1531    background-color: var(--color-teal);
  1532  }
  1533  
  1534  .repository .diff-detail-box .ui.button {
  1535    padding: 0 12px;
  1536    height: 30px;
  1537  }
  1538  
  1539  .repository .diff-box .resolved-placeholder .button {
  1540    padding: 8px 12px;
  1541  }
  1542  
  1543  .repository .diff-file-box .header {
  1544    background-color: var(--color-box-header);
  1545  }
  1546  
  1547  .repository .diff-file-box .file-body.file-code {
  1548    background: var(--color-code-bg);
  1549    border-radius: var(--border-radius);
  1550  }
  1551  
  1552  .repository .diff-file-box .file-body.file-code .lines-num {
  1553    text-align: right;
  1554  }
  1555  
  1556  .repository .diff-file-box .file-body.file-code .lines-num span.fold {
  1557    display: block;
  1558    text-align: center;
  1559  }
  1560  
  1561  .repository .diff-file-box .code-diff td {
  1562    padding: 0 0 0 10px !important;
  1563    border-top: 0;
  1564  }
  1565  
  1566  .repository .diff-file-box .code-diff .lines-num {
  1567    padding: 0 5px !important;
  1568  }
  1569  
  1570  .repository .diff-file-box .code-diff .tag-code .lines-num,
  1571  .repository .diff-file-box .code-diff .tag-code td {
  1572    padding: 0 !important;
  1573  }
  1574  
  1575  .repository .diff-file-box .code-diff table {
  1576    table-layout: fixed;
  1577  }
  1578  
  1579  .repository .diff-file-box .code-diff tbody tr td.center {
  1580    text-align: center;
  1581  }
  1582  
  1583  .repository .diff-file-box .code-diff tbody tr [data-line-num]::before {
  1584    content: attr(data-line-num);
  1585    text-align: right;
  1586  }
  1587  
  1588  .repository .diff-file-box .code-diff tbody tr .lines-type-marker {
  1589    width: 10px;
  1590    min-width: 10px;
  1591  }
  1592  
  1593  .repository .diff-file-box .code-diff tbody tr [data-type-marker]::before {
  1594    content: attr(data-type-marker);
  1595    text-align: right;
  1596    display: inline-block;
  1597  }
  1598  
  1599  .repository .diff-file-box .code-diff-split .tag-code .lines-code code.code-inner {
  1600    padding-left: 10px !important;
  1601  }
  1602  
  1603  .repository .diff-file-box .code-diff-split table,
  1604  .repository .diff-file-box .code-diff-split tbody {
  1605    width: 100%;
  1606  }
  1607  
  1608  .repository .diff-file-box.file-content {
  1609    clear: right;
  1610  }
  1611  
  1612  .repository .diff-file-box.file-content .image-diff img {
  1613    max-width: 100%;
  1614    padding: 0;
  1615    border-radius: 0;
  1616  }
  1617  
  1618  .repository .diff-file-box .ui.bottom.attached.table.segment {
  1619    padding-top: 5px;
  1620    padding-bottom: 5px;
  1621  }
  1622  
  1623  .diff-file-box {
  1624    border: 1px solid transparent;
  1625    border-radius: var(--border-radius);
  1626    scroll-margin-top: 47px; /* match .repository .diff-detail-box */
  1627  }
  1628  
  1629  .file.editor .diff-file-box {
  1630    border: none;
  1631  }
  1632  
  1633  .file.editor .diff-file-box .ui.attached.table {
  1634    border: none;
  1635  }
  1636  
  1637  /* TODO: this can potentially be made "global" by removing the class prefix */
  1638  .diff-file-box .ui.attached.header,
  1639  .diff-file-box .ui.attached.table {
  1640    margin: 0; /* remove fomantic negative margins */
  1641    width: initial; /* remove fomantic over 100% width */
  1642    max-width: initial; /* remove fomantic over 100% width */
  1643  }
  1644  
  1645  .repository .diff-stats {
  1646    clear: both;
  1647    margin-bottom: 5px;
  1648    max-height: 200px;
  1649    height: fit-content;
  1650    overflow: auto;
  1651    padding-left: 0;
  1652  }
  1653  
  1654  .repository .diff-stats li {
  1655    list-style: none;
  1656    padding-bottom: 4px;
  1657    margin-bottom: 4px;
  1658    padding-left: 6px;
  1659  }
  1660  
  1661  .repository .diff-stats li + li {
  1662    border-top: 1px solid var(--color-secondary);
  1663  }
  1664  
  1665  .repository .repo-search-result {
  1666    padding-top: 10px;
  1667    padding-bottom: 10px;
  1668  }
  1669  
  1670  .repository .repo-search-result .lines-num a {
  1671    color: inherit;
  1672  }
  1673  
  1674  .repository.quickstart .guide .item {
  1675    padding: 1em;
  1676  }
  1677  
  1678  .repository.quickstart .guide .item small {
  1679    font-weight: var(--font-weight-normal);
  1680  }
  1681  
  1682  .repository.quickstart .guide #repo-clone-url {
  1683    border-radius: 0;
  1684    padding: 5px 10px;
  1685    font-size: 1.2em;
  1686    line-height: 1.4;
  1687    flex: 1
  1688  }
  1689  
  1690  .empty-placeholder {
  1691    display: flex;
  1692    flex-direction: column;
  1693    align-items: center;
  1694    padding-top: 40px;
  1695    padding-bottom: 40px;
  1696  }
  1697  
  1698  .repository.packages .file-size {
  1699    white-space: nowrap;
  1700  }
  1701  
  1702  .file-view.markup {
  1703    padding: 1em 2em;
  1704  }
  1705  .repository .activity-header {
  1706    display: flex;
  1707    justify-content: space-between;
  1708    gap: 8px;
  1709    flex-wrap: wrap;
  1710  }
  1711  
  1712  /* if the element is for a checkbox, then it should have a padding-left to align to the checkbox's text */
  1713  .repository.settings.branches .branch-protection .ui.checkbox .help,
  1714  .repository.settings.branches .branch-protection .checkbox-sub-item {
  1715    padding-left: 26px;
  1716  }
  1717  
  1718  .repository.settings.branches .branch-protection .status-check-matched-mark {
  1719    font-weight: var(--font-weight-semibold);
  1720    font-style: italic;
  1721  }
  1722  
  1723  .repository.settings.webhook .events .column {
  1724    padding-bottom: 0;
  1725  }
  1726  
  1727  .repository.settings.webhook .events .help {
  1728    font-size: 13px;
  1729    margin-left: 26px;
  1730    padding-top: 0;
  1731  }
  1732  
  1733  .repository .ui.attached.isSigned.isWarning {
  1734    border-left: 1px solid var(--color-error-border);
  1735    border-right: 1px solid var(--color-error-border);
  1736  }
  1737  
  1738  .repository .ui.attached.isSigned.isWarning.top,
  1739  .repository .ui.attached.isSigned.isWarning.message {
  1740    border-top: 1px solid var(--color-error-border);
  1741  }
  1742  
  1743  .repository .ui.attached.isSigned.isWarning.message {
  1744    box-shadow: none;
  1745    background-color: var(--color-error-bg);
  1746    color: var(--color-error-text);
  1747  }
  1748  
  1749  .repository .ui.attached.isSigned.isWarning.message .ui.text {
  1750    color: var(--color-error-text);
  1751  }
  1752  
  1753  .repository .ui.attached.isSigned.isWarning:last-child,
  1754  .repository .ui.attached.isSigned.isWarning.bottom {
  1755    border-bottom: 1px solid var(--color-error-border);
  1756  }
  1757  
  1758  .repository .ui.attached.isSigned.isVerified {
  1759    border-left: 1px solid var(--color-success-border);
  1760    border-right: 1px solid var(--color-success-border);
  1761  }
  1762  
  1763  .repository .ui.attached.isSigned.isVerified.top,
  1764  .repository .ui.attached.isSigned.isVerified.message {
  1765    border-top: 1px solid var(--color-success-border);
  1766  }
  1767  
  1768  .repository .ui.attached.isSigned.isVerified.message {
  1769    box-shadow: none;
  1770    background-color: var(--color-success-bg);
  1771    color: var(--color-success-text);
  1772  }
  1773  
  1774  .repository .ui.attached.isSigned.isVerified.message .pull-right {
  1775    color: var(--color-text);
  1776  }
  1777  
  1778  .repository .ui.attached.isSigned.isVerified.message .ui.text {
  1779    color: var(--color-success-text);
  1780  }
  1781  
  1782  .repository .ui.attached.isSigned.isVerified:last-child,
  1783  .repository .ui.attached.isSigned.isVerified.bottom {
  1784    border-bottom: 1px solid var(--color-success-border);
  1785  }
  1786  
  1787  .repository .ui.attached.isSigned.isVerifiedUntrusted,
  1788  .repository .ui.attached.isSigned.isVerifiedUnmatched {
  1789    border-left: 1px solid var(--color-warning-border);
  1790    border-right: 1px solid var(--color-warning-border);
  1791  }
  1792  
  1793  .repository .ui.attached.isSigned.isVerifiedUntrusted.top,
  1794  .repository .ui.attached.isSigned.isVerifiedUnmatched.top,
  1795  .repository .ui.attached.isSigned.isVerifiedUntrusted.message,
  1796  .repository .ui.attached.isSigned.isVerifiedUnmatched.message {
  1797    border-top: 1px solid var(--color-warning-border);
  1798  }
  1799  
  1800  .repository .ui.attached.isSigned.isVerifiedUntrusted.message,
  1801  .repository .ui.attached.isSigned.isVerifiedUnmatched.message {
  1802    box-shadow: none;
  1803    background-color: var(--color-warning-bg);
  1804    color: var(--color-warning-text);
  1805  }
  1806  
  1807  .repository .ui.attached.isSigned.isVerifiedUntrusted.message .ui.text,
  1808  .repository .ui.attached.isSigned.isVerifiedUnmatched.message .ui.text {
  1809    color: var(--color-warning-text);
  1810  }
  1811  
  1812  .repository .ui.attached.isSigned.isVerifiedUntrusted:last-child,
  1813  .repository .ui.attached.isSigned.isVerifiedUnmatched:last-child,
  1814  .repository .ui.attached.isSigned.isVerifiedUntrusted.bottom,
  1815  .repository .ui.attached.isSigned.isVerifiedUnmatched.bottom {
  1816    border-bottom: 1px solid var(--color-warning-border);
  1817  }
  1818  
  1819  .repository .ui.fluid.action.input .ui.search.action.input {
  1820    flex: auto;
  1821  }
  1822  
  1823  .repository .repository-summary {
  1824    box-shadow: none;
  1825  }
  1826  
  1827  .repository .repository-summary .segment.sub-menu {
  1828    border: none;
  1829    display: flex;
  1830    align-items: center;
  1831    padding: 0;
  1832    overflow: hidden;
  1833  }
  1834  
  1835  .repository .repository-summary .sub-menu .item {
  1836    flex: 1;
  1837    height: 30px;
  1838    line-height: var(--line-height-default);
  1839    display: flex;
  1840    align-items: center;
  1841    justify-content: center;
  1842    gap: 0.25em;
  1843    padding: 0 0.5em; /* make the UI look better for narrow (mobile) view */
  1844    text-decoration: none;
  1845  }
  1846  
  1847  .repository .repository-summary .sub-menu .item.active {
  1848    background: var(--color-secondary);
  1849  }
  1850  
  1851  .repository .repository-summary .segment.language-stats {
  1852    display: flex;
  1853    gap: 2px;
  1854    padding: 0;
  1855    height: 10px;
  1856    white-space: nowrap;
  1857    border-radius: 0 0 3px 3px !important;
  1858    overflow: hidden;
  1859  }
  1860  
  1861  #cite-repo-modal #citation-panel {
  1862    display: flex;
  1863    width: 100%;
  1864  }
  1865  
  1866  #cite-repo-modal #citation-panel input {
  1867    border-radius: 0;
  1868    padding: 5px 10px;
  1869    width: 50%;
  1870    line-height: 1.4;
  1871  }
  1872  
  1873  #cite-repo-modal #citation-panel .citation.button {
  1874    font-size: 13px;
  1875    padding: 7.5px 5px;
  1876  }
  1877  
  1878  #cite-repo-modal #citation-panel #citation-copy-content {
  1879    border-radius: 0;
  1880    padding: 5px 10px;
  1881    font-size: 1.2em;
  1882    line-height: 1.4;
  1883    flex: 1;
  1884  }
  1885  
  1886  #cite-repo-modal #citation-panel #citation-copy-apa,
  1887  #cite-repo-modal #citation-panel #citation-copy-bibtex {
  1888    border-right: none;
  1889  }
  1890  
  1891  #cite-repo-modal #citation-panel #goto-citation-btn {
  1892    border-left: none;
  1893  }
  1894  
  1895  #cite-repo-modal #citation-panel > :first-child {
  1896    border-radius: var(--border-radius) 0 0 var(--border-radius) !important;
  1897  }
  1898  
  1899  #cite-repo-modal #citation-panel > :last-child {
  1900    border-radius: 0 var(--border-radius) var(--border-radius) 0 !important;
  1901  }
  1902  
  1903  #cite-repo-modal #citation-panel .icon.button {
  1904    padding: 0 10px;
  1905  }
  1906  
  1907  .user-cards .list {
  1908    padding: 0;
  1909    display: flex;
  1910    flex-wrap: wrap;
  1911  }
  1912  
  1913  .user-cards .list .item {
  1914    list-style: none;
  1915    width: 32%;
  1916    margin: 10px 10px 10px 0;
  1917    padding-bottom: 14px;
  1918    float: left;
  1919  }
  1920  
  1921  .user-cards .list .item .avatar {
  1922    width: 48px;
  1923    height: 48px;
  1924    float: left;
  1925    display: block;
  1926    margin-right: 10px;
  1927  }
  1928  
  1929  .user-cards .list .item .name {
  1930    margin-top: 0;
  1931    margin-bottom: 0;
  1932    font-weight: var(--font-weight-normal);
  1933  }
  1934  
  1935  .user-cards .list .item .meta {
  1936    margin-top: 5px;
  1937  }
  1938  
  1939  #search-user-box .results .result .image {
  1940    order: 0;
  1941    margin-right: 12px;
  1942    width: 2em;
  1943    height: 2em;
  1944    min-width: 2em;
  1945    min-height: 2em;
  1946  }
  1947  
  1948  #search-user-box .results .result .content {
  1949    margin: 0; /* remove margin reserved for avatar because we move it to left via `order: 0` */
  1950  }
  1951  
  1952  .ui.menu .item > img:not(.ui) {
  1953    width: auto;
  1954  }
  1955  
  1956  .page.buttons {
  1957    padding-top: 15px;
  1958  }
  1959  
  1960  .commit-header-row {
  1961    min-height: 50px !important;
  1962    padding-top: 0 !important;
  1963    padding-bottom: 0 !important;
  1964  }
  1965  
  1966  .commit-header-buttons {
  1967    display: flex;
  1968    gap: 4px;
  1969    align-items: flex-start;
  1970    white-space: nowrap;
  1971  }
  1972  
  1973  @media (max-width: 767.98px) {
  1974    .commit-header-buttons {
  1975      flex-direction: column;
  1976      align-items: stretch;
  1977    }
  1978  }
  1979  
  1980  .settings.webhooks .list > .item:not(:first-child),
  1981  .settings.githooks .list > .item:not(:first-child),
  1982  .settings.actions .list > .item:not(:first-child) {
  1983    padding: 0.25rem 1rem;
  1984    margin: 12px -1rem -1rem;
  1985  }
  1986  
  1987  .settings .list > .item:not(:first-child) {
  1988    border-top: 1px solid var(--color-secondary);
  1989    padding: 1rem;
  1990    margin: 16px -1rem -1rem;
  1991  }
  1992  
  1993  .settings .list > .item > .svg {
  1994    display: table-cell;
  1995  }
  1996  
  1997  .settings .list > .item > .svg + .content {
  1998    display: table-cell;
  1999    padding: 0 0 0 0.5em;
  2000    vertical-align: top;
  2001  }
  2002  
  2003  .settings .list > .item .info {
  2004    margin-top: 10px;
  2005  }
  2006  
  2007  .settings .list > .item .info .tab.segment {
  2008    border: 0;
  2009    padding: 10px 0 0;
  2010  }
  2011  
  2012  .comment:target .comment-container {
  2013    border-color: var(--color-primary) !important;
  2014    box-shadow: 0 0 0 3px var(--color-primary-alpha-30) !important;
  2015  }
  2016  
  2017  .comment:target .header::before {
  2018    border-right-color: var(--color-primary) !important;
  2019    filter: drop-shadow(-3px 0 0 var(--color-primary-alpha-30)) !important;
  2020  }
  2021  
  2022  .code-comment:target,
  2023  .diff-file-box:target {
  2024    border-color: var(--color-primary) !important;
  2025    border-radius: var(--border-radius) !important;
  2026    box-shadow: 0 0 0 3px var(--color-primary-alpha-30) !important;
  2027  }
  2028  
  2029  .code-comment:target .content {
  2030    box-shadow: none !important;
  2031  }
  2032  
  2033  .comment-header {
  2034    border: none !important;
  2035    background: var(--color-box-header);
  2036    border-bottom: 1px solid var(--color-secondary) !important;
  2037    font-weight: var(--font-weight-normal) !important;
  2038    padding: 0.5rem 1rem;
  2039    margin: 0 !important;
  2040    position: relative;
  2041    color: var(--color-text);
  2042    min-height: 41px;
  2043    background-color: var(--color-box-header);
  2044    display: flex;
  2045    justify-content: space-between;
  2046    align-items: center;
  2047  }
  2048  
  2049  .comment-header::before,
  2050  .comment-header::after {
  2051    right: 100%;
  2052    top: 20px;
  2053    border: solid transparent;
  2054    content: " ";
  2055    height: 0;
  2056    width: 0;
  2057    position: absolute;
  2058    pointer-events: none;
  2059  }
  2060  
  2061  .comment-header::before {
  2062    border-right-color: var(--color-secondary);
  2063    border-width: 9px;
  2064    margin-top: -9px;
  2065  }
  2066  
  2067  .comment-header::after {
  2068    border-right-color: var(--color-box-header);
  2069    border-width: 8px;
  2070    margin-top: -8px;
  2071  }
  2072  
  2073  .comment-header.arrow-top::before,
  2074  .comment-header.arrow-top::after {
  2075    transform: rotate(90deg);
  2076  }
  2077  
  2078  .comment-header.arrow-top::before {
  2079    top: -9px;
  2080    left: 6px;
  2081  }
  2082  
  2083  .comment-header.arrow-top::after {
  2084    top: -8px;
  2085    left: 7px;
  2086  }
  2087  
  2088  .comment-header .actions a:not(.label) {
  2089    padding: 0.5rem !important;
  2090  }
  2091  
  2092  .comment-header .actions .label {
  2093    margin: 0 !important;
  2094  }
  2095  
  2096  .comment-header-left,
  2097  .comment-header-right {
  2098    gap: 4px;
  2099  }
  2100  
  2101  .comment-body {
  2102    background: var(--color-box-body);
  2103    border: none !important;
  2104    width: 100% !important;
  2105    max-width: 100% !important;
  2106    margin: 0 !important;
  2107    padding: 1em;
  2108  }
  2109  
  2110  .edit-label.modal .form .column,
  2111  .new-label.modal .form .column {
  2112    padding-right: 0;
  2113  }
  2114  
  2115  .edit-label.modal .form .buttons,
  2116  .new-label.modal .form .buttons {
  2117    margin-left: auto;
  2118    padding-top: 15px;
  2119  }
  2120  
  2121  .stats-table {
  2122    display: table;
  2123    width: 100%;
  2124    margin: 6px 0;
  2125    border-spacing: 2px;
  2126  }
  2127  
  2128  .stats-table .table-cell {
  2129    display: table-cell;
  2130  }
  2131  
  2132  .stats-table .table-cell.tiny {
  2133    height: 8px;
  2134  }
  2135  
  2136  .stats-table .table-cell:first-child {
  2137    border-top-left-radius: 4px;
  2138    border-bottom-left-radius: 4px;
  2139  }
  2140  
  2141  .stats-table .table-cell:last-child {
  2142    border-top-right-radius: 4px;
  2143    border-bottom-right-radius: 4px;
  2144  }
  2145  
  2146  .labels-list {
  2147    display: inline-flex;
  2148    flex-wrap: wrap;
  2149    gap: 2.5px;
  2150    align-items: center;
  2151  }
  2152  
  2153  .labels-list .label {
  2154    padding: 0 6px;
  2155    min-height: 20px;
  2156    line-height: 1.3; /* there is a `font-size: 1.25em` for inside emoji, so here the line-height needs to be larger slightly */
  2157  }
  2158  
  2159  /* Scoped labels with different colors on left and right */
  2160  .ui.label.scope-parent {
  2161    background: none !important;
  2162    padding: 0 !important;
  2163    gap: 0 !important;
  2164  }
  2165  
  2166  .archived-label {
  2167    filter: grayscale(0.5);
  2168    opacity: 0.5;
  2169  }
  2170  
  2171  .ui.label.scope-left {
  2172    border-bottom-right-radius: 0;
  2173    border-top-right-radius: 0;
  2174    margin-right: 0;
  2175  }
  2176  
  2177  .ui.label.scope-right {
  2178    border-bottom-left-radius: 0;
  2179    border-top-left-radius: 0;
  2180    margin-left: 0;
  2181  }
  2182  
  2183  .repo-button-row {
  2184    margin: 8px 0;
  2185    display: flex;
  2186    align-items: center;
  2187    gap: 8px;
  2188    justify-content: space-between;
  2189  }
  2190  
  2191  .repo-button-row-left,
  2192  .repo-button-row-right {
  2193    display: flex;
  2194    flex: 1;
  2195    align-items: center;
  2196    gap: 0.5rem;
  2197  }
  2198  
  2199  .repo-button-row-right {
  2200    justify-content: flex-end;
  2201  }
  2202  
  2203  .repo-button-row[data-is-homepage="false"] .repo-button-row-right {
  2204    flex-grow: 0;
  2205  }
  2206  
  2207  @media (max-width: 991px) {
  2208    .repository:not(.wiki) .repo-button-row {
  2209      flex-direction: column;
  2210      align-items: stretch;
  2211    }
  2212  }
  2213  
  2214  .repo-button-row .button {
  2215    padding: 6px 10px !important;
  2216    height: 30px;
  2217    flex-shrink: 0;
  2218    margin: 0;
  2219  }
  2220  
  2221  .repo-button-row .button.dropdown:not(.icon) {
  2222    padding-right: 22px !important; /* normal buttons have !important paddings, so we need to override it for dropdown (Add File) icons */
  2223  }
  2224  
  2225  .repo-button-row input {
  2226    height: 30px;
  2227  }
  2228  
  2229  @media (max-width: 600px) {
  2230    .repo-button-row-left {
  2231      flex-wrap: wrap;
  2232    }
  2233  }
  2234  
  2235  tbody.commit-list {
  2236    vertical-align: baseline;
  2237  }
  2238  
  2239  .message-wrapper,
  2240  .author-wrapper {
  2241    overflow: hidden;
  2242    text-overflow: ellipsis;
  2243    max-width: 100%;
  2244    display: inline-block;
  2245    vertical-align: middle;
  2246  }
  2247  
  2248  .author-wrapper {
  2249    max-width: 180px;
  2250    align-self: center;
  2251    white-space: nowrap;
  2252  }
  2253  
  2254  /* in the commit list, messages can wrap so we can use inline */
  2255  .commit-list .message-wrapper {
  2256    display: inline;
  2257    overflow-wrap: anywhere;
  2258  }
  2259  
  2260  /* but in the repo-files-table we cannot */
  2261  #repo-files-table .commit-list .message-wrapper {
  2262    display: inline-block;
  2263  }
  2264  
  2265  @media (max-width: 767.98px) {
  2266    tr.commit-list {
  2267      width: 100%;
  2268    }
  2269    .author-wrapper {
  2270      max-width: 80px;
  2271    }
  2272  }
  2273  
  2274  @media (min-width: 768px) and (max-width: 991.98px) {
  2275    tr.commit-list {
  2276      width: 723px;
  2277    }
  2278  }
  2279  
  2280  @media (min-width: 992px) and (max-width: 1200px) {
  2281    tr.commit-list {
  2282      width: 933px;
  2283    }
  2284  }
  2285  
  2286  @media (min-width: 1201px) {
  2287    tr.commit-list {
  2288      width: 1127px;
  2289    }
  2290  }
  2291  
  2292  .commit-list .commit-status-link {
  2293    display: inline-block;
  2294    vertical-align: middle;
  2295  }
  2296  
  2297  .commit-body {
  2298    margin: 0.25em 0;
  2299    white-space: pre-wrap;
  2300    overflow-wrap: anywhere;
  2301    line-height: initial;
  2302  }
  2303  
  2304  .git-notes.top {
  2305    text-align: left;
  2306  }
  2307  
  2308  .comment-diff-data {
  2309    background: var(--color-code-bg);
  2310    min-height: 12em;
  2311    max-height: calc(100vh - 10.5rem);
  2312    overflow-y: auto;
  2313  }
  2314  
  2315  .comment-diff-data pre {
  2316    line-height: 18px;
  2317    margin: 1em;
  2318    white-space: pre-wrap;
  2319    word-break: break-all;
  2320    overflow-wrap: break-word;
  2321  }
  2322  
  2323  .content-history-detail-dialog .header .avatar {
  2324    position: relative;
  2325    top: -2px;
  2326  }
  2327  
  2328  #repo-topics .repo-topic {
  2329    font-weight: var(--font-weight-normal);
  2330    cursor: pointer;
  2331    margin: 0;
  2332  }
  2333  
  2334  #new-dependency-drop-list.ui.selection.dropdown {
  2335    min-width: 0;
  2336    width: 100%;
  2337    border-radius: var(--border-radius) 0 0 var(--border-radius);
  2338    border-right: 0;
  2339    white-space: nowrap;
  2340  }
  2341  
  2342  #new-dependency-drop-list .text {
  2343    width: 100%;
  2344    overflow: hidden;
  2345  }
  2346  
  2347  .tag-code {
  2348    height: 28px;
  2349  }
  2350  
  2351  .tag-code,
  2352  .tag-code td,
  2353  .tag-code.line-expanded {
  2354    background-color: var(--color-box-body-highlight);
  2355    vertical-align: middle;
  2356  }
  2357  
  2358  /* fix bottom border radius on diff files */
  2359  .diff-file-body tr.tag-code:last-child {
  2360    background: none;
  2361  }
  2362  .diff-file-body tr.tag-code:last-child > td {
  2363    background: var(--color-box-body-highlight);
  2364  }
  2365  .diff-file-body tr.tag-code:last-child td:first-child,
  2366  .diff-file-body tr.tag-code:last-child td:first-child * {
  2367    border-bottom-left-radius: 3px;
  2368  }
  2369  .diff-file-body tr.tag-code:last-child td:last-child,
  2370  .diff-file-body tr.tag-code:last-child td:last-child * {
  2371    border-bottom-right-radius: 3px;
  2372  }
  2373  
  2374  .resolved-placeholder {
  2375    display: flex;
  2376    align-items: center;
  2377    font-size: 14px !important;
  2378    padding: 8px !important;
  2379    font-weight: var(--font-weight-normal) !important;
  2380    border: 1px solid var(--color-secondary) !important;
  2381    border-radius: var(--border-radius) !important;
  2382    margin: 4px !important;
  2383  }
  2384  
  2385  .resolved-placeholder + .comment-code-cloud {
  2386    padding-top: 0 !important;
  2387  }
  2388  
  2389  .line-expanded {
  2390    background-color: var(--color-secondary-alpha-20);
  2391  }
  2392  
  2393  .issue-keyword {
  2394    border-bottom: 1px dotted var(--color-text-light-3) !important;
  2395  }
  2396  
  2397  .issue-keyword:hover {
  2398    border-bottom: none !important;
  2399  }
  2400  
  2401  .file-header {
  2402    align-items: center;
  2403    display: flex;
  2404    justify-content: space-between;
  2405    overflow-x: auto;
  2406    padding: 6px 12px !important;
  2407    font-size: 13px !important;
  2408  }
  2409  
  2410  .file-info {
  2411    display: flex;
  2412    align-items: center;
  2413  }
  2414  
  2415  .file-info-entry {
  2416    display: flex;
  2417    align-items: center;
  2418    width: max-content;
  2419  }
  2420  
  2421  .file-info-entry + .file-info-entry {
  2422    border-left: 1px solid currentcolor;
  2423    margin-left: 8px;
  2424    padding-left: 8px;
  2425  }
  2426  
  2427  #diff-container {
  2428    display: flex;
  2429  }
  2430  
  2431  #diff-file-boxes {
  2432    flex: 1;
  2433    max-width: 100%;
  2434    display: flex;
  2435    flex-direction: column;
  2436    gap: 8px;
  2437  }
  2438  
  2439  #diff-file-tree {
  2440    flex: 0 0 20%;
  2441    max-width: 380px;
  2442    line-height: inherit;
  2443    position: sticky;
  2444    padding-top: 0;
  2445    top: 47px;
  2446    max-height: calc(100vh - 47px);
  2447    height: 100%;
  2448    overflow-y: auto;
  2449  }
  2450  
  2451  .ui.message.unicode-escape-prompt {
  2452    margin-bottom: 0;
  2453    border-radius: 0;
  2454    display: flex;
  2455    flex-direction: column;
  2456  }
  2457  
  2458  /* fomantic's last-child selector does not work with hidden last child */
  2459  .ui.buttons .unescape-button {
  2460    border-top-right-radius: 0.28571429rem;
  2461    border-bottom-right-radius: 0.28571429rem;
  2462  }
  2463  
  2464  .webhook-info {
  2465    padding: 7px 12px;
  2466    margin: 10px 0;
  2467    background-color: var(--color-markup-code-block);
  2468    border: 1px solid var(--color-secondary);
  2469    border-radius: var(--border-radius);
  2470    font-size: 13px;
  2471    line-height: 1.5;
  2472    overflow: auto;
  2473  }
  2474  
  2475  .title_wip_desc {
  2476    margin-top: 1em;
  2477  }
  2478  
  2479  .sidebar-item-link {
  2480    display: inline-flex;
  2481    align-items: center;
  2482    overflow-wrap: anywhere;
  2483  }
  2484  
  2485  .diff-file-header {
  2486    padding: 5px 8px !important;
  2487    box-shadow: 0 -1px 0 1px var(--color-body); /* prevent borders being visible behind top corners when sticky and scrolled */
  2488    font-weight: var(--font-weight-normal);
  2489    display: flex;
  2490    justify-content: space-between;
  2491    align-items: center;
  2492    flex-wrap: wrap;
  2493  }
  2494  
  2495  .diff-file-header .file {
  2496    min-width: 0;
  2497  }
  2498  
  2499  .diff-file-header .file-link {
  2500    max-width: fit-content;
  2501    display: -webkit-box;
  2502    -webkit-box-orient: vertical;
  2503    -webkit-line-clamp: 2;
  2504    overflow: hidden;
  2505    overflow-wrap: anywhere;
  2506  }
  2507  
  2508  .diff-file-header .button {
  2509    padding: 0 12px;
  2510    flex: 0 0 auto;
  2511    margin-right: 0;
  2512    height: 30px;
  2513  }
  2514  
  2515  @media (max-width: 767.98px) {
  2516    .diff-file-header {
  2517      flex-direction: column;
  2518      align-items: stretch;
  2519    }
  2520  }
  2521  
  2522  .diff-file-box[data-folded="true"] .diff-file-body {
  2523    display: none;
  2524  }
  2525  
  2526  .diff-file-box[data-folded="true"] .diff-file-header {
  2527    border-radius: var(--border-radius) !important;
  2528  }
  2529  
  2530  .ui.attached.header.diff-file-header.sticky-2nd-row {
  2531    position: sticky;
  2532    top: 44px; /* match .repository .diff-detail-box */
  2533    z-index: 7;
  2534  }
  2535  
  2536  .diff-file-name {
  2537    flex: auto;
  2538    min-width: 100px;
  2539  }
  2540  
  2541  .diff-file-name .ui.label {
  2542    margin-left: 0 !important;
  2543  }
  2544  
  2545  .diff-stats-bar {
  2546    display: inline-block;
  2547    background-color: var(--color-red);
  2548    height: 12px;
  2549    width: 44px;
  2550  }
  2551  
  2552  .diff-stats-bar .diff-stats-add-bar {
  2553    background-color: var(--color-green);
  2554    height: 100%;
  2555  }
  2556  
  2557  .ui.form .right .ui.button {
  2558    margin-left: 0.25em;
  2559    margin-right: 0;
  2560  }
  2561  
  2562  .removed-code {
  2563    background: var(--color-diff-removed-word-bg);
  2564  }
  2565  
  2566  .added-code {
  2567    background: var(--color-diff-added-word-bg);
  2568  }
  2569  
  2570  .code-diff-unified .del-code,
  2571  .code-diff-unified .del-code td,
  2572  .code-diff-split .del-code .lines-num-old,
  2573  .code-diff-split .del-code .lines-escape-old,
  2574  .code-diff-split .del-code .lines-type-marker-old,
  2575  .code-diff-split .del-code .lines-code-old {
  2576    background: var(--color-diff-removed-row-bg);
  2577    border-color: var(--color-diff-removed-row-border);
  2578  }
  2579  
  2580  .code-diff-unified .add-code,
  2581  .code-diff-unified .add-code td,
  2582  .code-diff-split .add-code .lines-type-marker-new,
  2583  .code-diff-split .add-code .lines-escape-new,
  2584  .code-diff-split .add-code .lines-code-new,
  2585  .code-diff-split .del-code .add-code.lines-type-marker-new,
  2586  .code-diff-split .del-code .add-code.lines-escape-new,
  2587  .code-diff-split .del-code .add-code.lines-code-new {
  2588    background: var(--color-diff-added-row-bg);
  2589    border-color: var(--color-diff-added-row-border);
  2590  }
  2591  
  2592  .code-diff-split .del-code .lines-type-marker-new,
  2593  .code-diff-split .del-code .lines-code-new,
  2594  .code-diff-split .del-code .lines-escape-new,
  2595  .code-diff-split .add-code .lines-escape-old,
  2596  .code-diff-split .add-code .lines-type-marker-old,
  2597  .code-diff-split .add-code .lines-code-old {
  2598    background: var(--color-diff-inactive);
  2599  }
  2600  
  2601  .code-diff-split .add-code .lines-num.lines-num-old,
  2602  .code-diff-split .del-code .lines-num.lines-num-new {
  2603    background: var(--color-diff-inactive);
  2604  }
  2605  
  2606  .code-diff-unified .del-code .lines-num,
  2607  .code-diff-split .del-code .lines-num {
  2608    background: var(--color-diff-removed-linenum-bg);
  2609    color: var(--color-text);
  2610  }
  2611  
  2612  .code-diff-unified .add-code .lines-num,
  2613  .code-diff-split .add-code .lines-num,
  2614  .code-diff-split .del-code .add-code.lines-num {
  2615    background: var(--color-diff-added-linenum-bg);
  2616    color: var(--color-text);
  2617  }
  2618  
  2619  .code-diff-split tbody tr td:nth-child(5),
  2620  .code-diff-split tbody tr td.add-comment-right {
  2621    border-left: 1px solid var(--color-secondary);
  2622  }
  2623  
  2624  .migrate-entries {
  2625    display: grid !important;
  2626    grid-template-columns: repeat(3, 1fr);
  2627    gap: 25px;
  2628    margin: 0 !important;
  2629  }
  2630  
  2631  @media (max-width: 767.98px) {
  2632    .migrate-entries {
  2633      grid-template-columns: repeat(1, 1fr);
  2634    }
  2635  }
  2636  
  2637  .migrate-entry {
  2638    transition: all 0.1s ease-in-out;
  2639    box-shadow: none !important;
  2640    border: 1px solid var(--color-secondary);
  2641    color: var(--color-text) !important;
  2642    width: auto !important;
  2643    margin: 0 !important;
  2644  }
  2645  
  2646  .migrate-entry:hover {
  2647    transform: scale(105%);
  2648    box-shadow: 0 0.5rem 1rem var(--color-shadow) !important;
  2649  }
  2650  
  2651  .migrate-entry .description {
  2652    text-wrap: balance;
  2653  }
  2654  
  2655  .commits-table .commits-table-right form {
  2656    display: flex;
  2657    align-items: center;
  2658    gap: 0.75em;
  2659    justify-content: center;
  2660    flex-wrap: wrap;
  2661  }
  2662  
  2663  @media (max-width: 767.98px) {
  2664    .repository.file.list #repo-files-table .entry,
  2665    .repository.file.list #repo-files-table .commit-list {
  2666      align-items: center;
  2667      display: flex !important;
  2668      padding-top: 4px;
  2669      padding-bottom: 4px;
  2670    }
  2671    .repository.file.list #repo-files-table .entry td.age,
  2672    .repository.file.list #repo-files-table .commit-list td.age,
  2673    .repository.file.list #repo-files-table .entry th.age,
  2674    .repository.file.list #repo-files-table .commit-list th.age {
  2675      margin-left: auto;
  2676    }
  2677    .repository.file.list #repo-files-table .entry td.message,
  2678    .repository.file.list #repo-files-table .commit-list td.message,
  2679    .repository.file.list #repo-files-table .entry span.commit-summary,
  2680    .repository.file.list #repo-files-table .commit-list tr span.commit-summary {
  2681      display: none !important;
  2682    }
  2683    .repository.view.issue .comment-list .timeline,
  2684    .repository.view.issue .comment-list .timeline-item {
  2685      margin-left: 0;
  2686    }
  2687    .repository.view.issue .comment-list .timeline::before {
  2688      left: 14px;
  2689    }
  2690    .repository.view.issue .comment-list .timeline .inline-timeline-avatar {
  2691      display: flex;
  2692      margin-bottom: auto;
  2693      margin-left: 6px;
  2694      margin-right: 2px;
  2695    }
  2696    .repository.view.issue .comment-list .timeline .comment-header {
  2697      padding-left: 4px;
  2698    }
  2699    .repository.view.issue .comment-list .timeline .comment-header::before,
  2700    .repository.view.issue .comment-list .timeline .comment-header::after {
  2701      content: unset;
  2702    }
  2703    /* Don't show the general avatar, we show the inline avatar on mobile.
  2704     * And don't show the role labels, there's no place for that. */
  2705    .repository.view.issue .comment-list .timeline .timeline-avatar,
  2706    .repository.view.issue .comment-list .timeline .comment-header-right .role-label {
  2707      display: none;
  2708    }
  2709    .commit-header-row .ui.horizontal.list {
  2710      width: 100%;
  2711      overflow-x: auto;
  2712      margin-top: 2px;
  2713    }
  2714    .commit-header-row .ui.horizontal.list .item {
  2715      align-items: center;
  2716      display: flex;
  2717    }
  2718    .commit-header-row .author {
  2719      padding: 3px 0;
  2720    }
  2721    .commit-header h3 {
  2722      flex-basis: auto !important;
  2723      margin-bottom: 0.5rem !important;
  2724    }
  2725    .commits-table {
  2726      flex-direction: column;
  2727    }
  2728    .commits-table .commits-table-left {
  2729      align-items: initial !important;
  2730      margin-bottom: 6px;
  2731    }
  2732    .commits-table .commits-table-right form > div:nth-child(1) {
  2733      order: 1; /* the "commit search" input */
  2734    }
  2735    .commits-table .commits-table-right form > div:nth-child(2) {
  2736      order: 3; /* the "search all" checkbox */
  2737    }
  2738    .commits-table .commits-table-right form > button:nth-child(3) {
  2739      order: 2; /* the "search" button */
  2740    }
  2741    .commit-table {
  2742      overflow-x: auto;
  2743    }
  2744    .commit-table td.sha,
  2745    .commit-table th.sha {
  2746      display: none !important;
  2747    }
  2748    .comment-header {
  2749      flex-wrap: wrap;
  2750    }
  2751    .comment-header .comment-header-left {
  2752      flex-wrap: wrap;
  2753    }
  2754    .comment-header .comment-header-right {
  2755      margin-left: auto;
  2756    }
  2757  }
  2758  
  2759  .commit-status-header {
  2760    /* reset the default ".ui.attached.header" styles, to use the outer border */
  2761    border: none !important;
  2762    /* add a bottom border to make sure the there is always a divider between the header and list when the list is scrolling */
  2763    border-bottom: 1px solid var(--color-secondary) !important;
  2764    /* use negative margin to avoid the newly added border conflict with the list's top border */
  2765    margin: 0 0 -1px !important;
  2766  }
  2767  
  2768  .commit-status-list {
  2769    max-height: 240px; /* fit exactly 6 items, commit-status-item.height * 6 */
  2770    overflow-x: hidden;
  2771    transition: max-height .2s;
  2772  }
  2773  
  2774  .commit-status-item {
  2775    height: 40px;
  2776    padding: 0 10px;
  2777    display: flex;
  2778    gap: 8px;
  2779    align-items: center;
  2780  }
  2781  
  2782  .commit-status-item + .commit-status-item {
  2783    border-top: 1px solid var(--color-secondary);
  2784  }
  2785  
  2786  .commit-status-item .commit-status {
  2787    flex-shrink: 0;
  2788  }
  2789  
  2790  .commit-status-item .status-context {
  2791    color: var(--color-text);
  2792    flex: 1;
  2793  }
  2794  
  2795  .commit-status-item .status-details {
  2796    display: flex;
  2797    align-items: center;
  2798    justify-content: flex-end;
  2799    gap: 8px;
  2800  }
  2801  
  2802  @media (max-width: 767.98px) {
  2803    .commit-status-item .status-details {
  2804      flex-direction: column;
  2805      align-items: flex-end;
  2806      justify-content: center;
  2807    }
  2808  }
  2809  
  2810  .commit-status-item .status-details > span {
  2811    padding-right: 0.5em; /* To match the alignment with the "required" label */
  2812  }
  2813  
  2814  .search-fullname {
  2815    color: var(--color-text-light-2);
  2816  }
  2817  
  2818  #issue-pins {
  2819    display: grid;
  2820    grid-template-columns: repeat(3, 1fr);
  2821    gap: 8px;
  2822    margin-bottom: 8px;
  2823  }
  2824  
  2825  @media (max-width: 767.98px) {
  2826    #issue-pins {
  2827      grid-template-columns: repeat(1, 1fr);
  2828    }
  2829  }
  2830  
  2831  #cherry-pick-modal .scrolling.menu {
  2832    max-height: 200px;
  2833  }
  2834  
  2835  .branch-selector-dropdown {
  2836    max-width: 100%;
  2837  }
  2838  
  2839  .ui.dropdown.branch-selector-dropdown > .menu {
  2840    margin-top: 4px;
  2841  }
  2842  
  2843  .ui.dropdown.branch-selector-dropdown .scrolling.menu {
  2844    max-width: min(400px, 90vw);
  2845  }
  2846  
  2847  .branch-selector-dropdown .branch-dropdown-button {
  2848    margin: 0;
  2849    max-width: 340px;
  2850    line-height: var(--line-height-default);
  2851  }
  2852  
  2853  /* FIXME: These media selectors are not ideal (just keep them from old code).
  2854      There are many different pages, some need the max-width while some others don't,
  2855      they should be tested and improved in the future. */
  2856  @media (min-width: 768px) and (max-width: 991.98px) {
  2857    .branch-selector-dropdown .branch-dropdown-button {
  2858      max-width: 185px;
  2859    }
  2860  }
  2861  
  2862  @media (max-width: 767.98px) {
  2863    .branch-selector-dropdown .branch-dropdown-button {
  2864      max-width: 165px;
  2865    }
  2866  }
  2867  
  2868  .branch-selector-dropdown .branch-tag-tab {
  2869    padding: 0 10px;
  2870  }
  2871  
  2872  .branch-selector-dropdown .branch-tag-item {
  2873    display: inline-block;
  2874    padding: 10px;
  2875    border: 1px solid transparent;
  2876    border-bottom: none;
  2877  }
  2878  
  2879  .branch-selector-dropdown .branch-tag-item.active {
  2880    border-color: var(--color-secondary);
  2881    background: var(--color-menu);
  2882    border-top-left-radius: var(--border-radius);
  2883    border-top-right-radius: var(--border-radius);
  2884  }
  2885  
  2886  .branch-selector-dropdown .branch-tag-divider {
  2887    margin-top: -1px !important;
  2888    border-top: 1px solid var(--color-secondary);
  2889  }
  2890  
  2891  .branch-selector-dropdown .scrolling.menu {
  2892    border-top: none !important;
  2893  }
  2894  
  2895  .branch-selector-dropdown .menu .item .rss-icon {
  2896    position: absolute;
  2897    right: 4px;
  2898    visibility: hidden; /* only show RSS icon on hover */
  2899  }
  2900  
  2901  .branch-selector-dropdown .menu .item:hover .rss-icon {
  2902    visibility: visible;
  2903  }
  2904  
  2905  .branch-selector-dropdown .scrolling.menu .loading-indicator {
  2906    height: 4em;
  2907  }